VIDEO: Vytvořte si Joomla šablonu online a zdarma

30.10.2018 00:00 1527 zhlédnutí
Autor článku
Linelabcz
Článek uživatele

Včera byla spuštěna nové verze Linelaboxu na doméně www.linelab.org, jedná se o nový Free Joomla! Template Builder, který nabízí opravdu vše, co potřebujete k tvorbě nádherných Joomla šablon bez znalosti kódování. Je to revoluční nástroj, který nemá na internetu obdoby. Joomla šablonu vytváříte v reálném čase a všechny změny vidíte okamžitě. Editor je zdarma. Pro Free účty je limitován pouze počet stažení šablon. K dispozici máte více jak 1 000 000 obrázků zdarma k použití. Zkuste si, jak snadné je s Linelabox editorem vytvořit krásnou Joomla šablonu. Jak to funguje?

Po přihlášení na web Linelab.org si vyberete z již hotových šablon zdarma, které si můžete upravit, nebo zvolíte "Blank template" a vytvoříte si novou unikátní šablonu s unikátním názvem od začátku.

 

1. Vytvořte si pozice pro moduly

Jakmile se Blank template" šablona, kterou jste si vybrali k editaci a pojmenovali, nahraje do editoru, klikněte na záložku "Bootstrap Grid". Zobrazí se vám mřížka s řádky "abox, bbox, cbox..." a sloupci "abox1, abox2, abox3...". Sloupce abox1, abox2, abox3 atd. jsou pozice pro moduly, tedy místo, kde chcete, aby se vám moduly jako Joomla Menu, Login, modul Vyhledávání a další moduly zobrazily.

Zaškrtnutím checkboxů na záložce "Bootstrap Grid" jednotlivé řádky aktivujete, odškrtnutím deaktivujete a pomocí posuvníku v editaci jednotlivých řádek potom vytvoříte sloupce. Šířku řádků změníte výběrem z možností boxed (pevná šířka v pixelech), nebo fluid (plovoucí šířka v procentech). Šířku sloupců si upravíte tahem myší po kliknutí na ikonku dvojité šipky u každého ze sloupců, nejlépe tak, aby sloupce nepřetékali na nový řádek. Mřížku šablony navrhujete zvlášť pro monitor stolního PC, tablet a mobilní telefon. To je velmi užitečné proto, aby se šablona správně zobrazovala na různých zařízeních a byla takzvaně responzivní. Například pro mobil není dobré nechat zobrazit 4 moduly v jednom řádku šablony, jako na monitoru stolního PC, nevypadalo by to dobře, obsah by byl natěsnaný na sebe a uživatel by mohl mít problémy kliknout na mobilu na jednotlivé ovládací prvky v obsahu modulů. Proto je dobré si pro mobil nastavit například jen jeden sloupec (pozici pro modul) na řádek.

Jakmile uložíte nastavení mřížky pro PC, změňte si v horní liště pohled, kliknutím na ikonku tabletu nebo mobilu a dokončete nastavení mřížky šablony i pro tato zařízení. K tomuto nastavení se můžete kdykoliv vrátit. Pokud uděláte chybu, jednoduše klikněte v horní liště na ikonku levé šipky, tím se vrátíte o krok zpět. Funkce "Undo, Redo" je neomezená"Bootstrap Grid" nabízí i další funkce, například odškrtnutím checkboxu u názvu sloupce můžete sloupec, tedy pozici pro modul skrýt pro vybraný pohled. Pozice se tedy nezobrazí například v mobilu. Můžete si také vypnout mezery mezi jednotlivými sloupci „No gutters“ . Toto platí pouze pro šablonu Blank template" v ostatních šablonách jsou řádky a pozice vytvořené.

 

 

2. Přetáhněte moduly do šablony

Klikněte na záložku „Modules“ Vyberte si ze základních modulů Joomla, nebo modulů vybraných rozšíření, jako K2, Phoca Cart, Virtuemart (připravujeme) a další. Moduly jednoduše přetáhněte do zvolených pozic abox1, abox2 a podobně. Pokud chcete přidat vlastní HTML a CSS kód, přetáhněte do pozice vybraných pozic Joomla! modul s názvem “Custom HTML”. Vzhled modulu „Skin“ je vždy základní a lze jej kompletně změnit, na stránce „Edit Page“, viz dále. Zde můžete moduly také klonovat, mazat a Drag Drop přesouvat mezi pozicemi tak, jak potřebujete, po kliknutí na ikonky v modré nástrojové liště u každého z modulů. K tomuto nastavení se můžete kdykoliv vrátit.

Toto platí pouze pro šablonu “Blank template” v ostatních šablonách jsou již moduly obsažené. Překontrolujte si vzhled šablony, tak jak bude vypadat na webu, kdykoliv kliknutím na tlačítko “Quick Vew” v horní nástrojové liště editoru. Nezapomínejte kontrolovat vzhled šablony i v náhledu pro tablet a mobil.

3. Editace základního CSS stylu šablony, výběr palety barev a fontů

Přidání fontů:

Klikněte na záložku „Global CSS Styles“ Na tomto místě si do šablony můžete přidat různé fonty a jejich styly (Light, Extra Light, Medium, Bold atd..), které budete při vytváření Joomla! šablony používat, například pro nadpisy a podobně. Doporučujeme to s počtem fontů nepřehánět. Na výběr máte ze standardních fontů a Google Fonts. Celkem více jak 850 fontů Vybrané fonty pak můžete aplikovat na libovolný prvek Joomla! šablony. Pokud se rozhodnete některý z fontů smazat, editor vás informuje o tom, kde je font použitý. Všechny změny, které provádíte opět vidíte v reálném čase.

Přidání barev, barevné schéma šablony:

Kliknutím na tlačítko “Add new color” si definujete barvy, se kterými budete v šabloně dále pracovat. Přidané barvy lze kdykoliv zaměnit a kompletně tak nahradit barevné schéma za jiné. Kliknutím na ikonku “i” u každé z přidaných barev si můžete později zjistit, kde je barva použita, abyste měli přehled.

Editace základního CSS stylu:

V této sekci si můžete upravit základní selektory šablony, jako “body“ tedy tělo dokumentu, nadpisy, h1, h2, odstavce, odkazy, seznamy, formuláře, tlačítka a mnoho dalších. Editaci základního CSS doporučujeme provádět na stránce „Typography“, na kterou můžete přejít v levém horním rohu editoru po kliknutí na odkaz „Pages“. Lze také využít přímé editace CSS stylů po kliknutí na tlačítko „Edit Code“ (vhodné pro zkušenější uživatele), máte tak plnou kontrolu nad tvorbou základního CSS stylu. U každé z vlastností a u každého selektoru je nápověda, pokud například nevíte, jak správně nastavit šířku vnějšího okraje prvku který editujete (Margin), najeďte myší na ikonku “i” u každého selektoru.

Těm z vás, kteří se CSS učit nechtějí postačí ke skvělým výsledkům pro editaci pravý panel editoru. Pokud chcete základní editaci CSS zcela vynechat, použije se základní CSS Bootstrap frameworku. Toto platí pouze pro šablonu “Blank template” v ostatních šablonách je již základní CSS styl upravený. Pokud uděláte chybu, jednoduše klikněte v horní liště na ikonku levé šipky, tím se vrátíte o krok zpět.

 

 

4. Edit Page

Na záložce "Edit Page" si upravíte parametry a vzhled nově přidaných modulů, stránek jednotlivých komponent anebo Snippetů. Snippet je vlastní HTML a CSS kód, který přidáváte do modulu s názvem “Custom html”. Vybrané rozšířené parametry jsou totožné s nastavením modulů v administraci Joomla. K úpravě vzhledu stránek komponent, modulů, snippetů, řádků a sloupců můžete využít pravý panel editoru anebo je zde opět k dispozici funkce „Edit code“, lze tedy vytvořit prakticky jakýkoliv design. Názvy modulů si můžete přejmenovat, tak jak potřebujete.

V levém horním rohu se po najetí myší na moduly zobrazí modrá nástrojová lišta s ikonkami. Po kliknutí na ikonku editace můžete měnit vzhled obsahu modulu, po případě vzhled stránek komponenty. Po kliknutí na ikonku složky v levé horní nástrojové liště si můžete nahrát některý z předem vytvořených skinů modulů. Pokud si do pozice přetáhnete "Custom HTML" modul, při jeho editaci si namísto Skinů vybíráte ze Snippetů. Po kliknutí na ikonku diskety v levé horní nástrojové liště si můžete Skin modulu nebo vlastní Snippet uložit do knihovny pro pozdější použití.

V pravém dolním rohu se po najetí myší na modul zobrazí další modrá nástrojová lišta s ikonkami. Po kliknutí na ikonku editace můžete měnit vzhled stylu modulu, tedy nadpis modulu, a parametry prvků, které obsah modulu obalují a to včetně vzhledu sloupců a řádek, které jste si definovali na záložce “Boostrap Grid”. Tag ”Section” navíc proti jiným elementům nabízí možnost nastavení obrázku na pozadí s nádhernou funkcí Parallax. Po kliknutí na ikonku složky v pravé spodní nástrojové liště si můžete nahrát některý z předem vytvořených stylů modulů (varianty modulů). Po kliknutí na ikonku diskety v pravé spodní nástrojové liště si můžete vlastní styl modulu uložit do knihovny pro pozdější použití.

Moduly je možné v editoru přiřadit ke stránce Homepage nebo ostatním stránkám tak, aby se nezobrazovaly na každé stránce editoru, stejným způsobem přiřazujete moduly jednotlivým stránkám v administraci Joomla. Nastavení přiřazení modulů k položkám menu si můžete později libovolně měnit v administraci Joomla. Překontrolujte si vzhled šablony, tak jak bude vypadat na webu, kdykoliv kliknutím na tlačítko “Quick Vew” v horní liště editoru. Nezapomínejte kontrolovat vzhled šablony i v náhledu pro tablet a mobil.

 

 

5. Stažení šablony a instalace šablony na web

Poté, co šablonu dokončíte, přejděte do svého účtu na Linelab.org. Klikněte na tlačítko “Download” a šablona se za pár minut vygeneruje. Odkaz ke stažení se zobrazí v účtu. Navíc vám také přijde odkaz ke stažení na email, který jste uvedli při registraci na web Linelab.org.

  • Přejděte do administrace Joomla.
  • Vyberte nabídku „Rozšíření > Spravovat > Instalovat“.
  • Vyberte tlačítko "Procházet" a vyberte instalační balíček šablony, kterou jste stáhli z našeho webu.
  • Klikněte na tlačítko "Nahrání a instalace".
  • Po instalaci uvidíte potvrzovací zprávu o úspěšné instalaci vaší Joomla šablony a další důležité informace.
  • Chcete-li aktivovat novou šablonu, přejděte do části „Rozšíření > Šablony > Varianty“, vyberte nainstalovanou šablonu a klikněte na možnost "Nastavit jako výchozí", kliknutím na tlačítko vlevo nahoře, nebo na ikonku hvězdičky u varianty šablony. To je vše.

Najdete li v Template Builderu nějakou chybu nebo problém, napište nám prosím. Přímo v editoru v horní liště je Bug Reporter (ikonka broučka), což preferujeme, nebo do fóra linelab.org. Psát mužete i česky.

 

WEB: www.linelab.org

DEMO EDITORU: www.linelab.org/live-template-builder

 VIDEO NÁVODY: www.linelab.org/tutorials

 

Informace o autorovi Linelabcz
Specializuje se na CMS systém Joomla v oblasti webdesignu a vývoje internetových aplikací

Líbil se vám článek?
(1 hodnocení)
Nová Joomla! 3.6. je zde
Předchozí článek autora Linelabcz  30.10.2018 1527
Nová Joomla! 3.6. je zde
Článek uživatele
Dnes byla na webu joomla.org uvolněna ke stažení nová Joomla! verze 3.6. Joomla! 3.6 přináší více...
Joomla 3.8.4
Následujicí článek autora Linelabcz  30.10.2018 1527
Joomla 3.8.4
Článek uživatele
Dnes byla uvolněna ke stažení Joomla 3.8.4. Jedná se o bezpečnostní vydání pro sérii Joomla 3.x,...

Štítky: Návod Šablony Video

22.12.2018 14:29 207 zhlédnutí
Komunita Joomlaportal.cz
Veselé Vánoce a šťastný nový rok 2019
Veselé Vánoce a šťastný nový rok 2019

Jménem týmu Joomlaportál.cz přeji všem uživatelům Joomla! šťastné a veselé Vánoční svátky a bohatý...

15.11.2018 22:13 416 zhlédnutí
Novinky
VIDEO: Joomla! opět vítězí jako nejlepší redakční systém zdarma
VIDEO: Joomla! opět vítězí jako nejlepší redakční systém zdarma

Stejně jako v loňském roce, i letos Joomla! vyhrála jako nejlepší redakční systém zdarma v CMS...

13.11.2018 11:25 325 zhlédnutí
Začínáme s Joomla!
Deset nejstupidnějších triků administrátorů Joomla!
Deset nejstupidnějších triků administrátorů Joomla!

Jaké jsou nejhloupější bezpečnostní triky administrátorů Joomla? V tomto článků si můžete přečíst seznam...

01.11.2018 11:50 364 zhlédnutí
Rozšíření a eshopy pro Joomla!
Virtuemart Bugfix vydání 3.4.2
Virtuemart Bugfix vydání 3.4.2

Tato verze primárně opravuje chybu, která ovlivnila některé uživatele, kteří aktualizovali svůj...

25.10.2018 17:37 267 zhlédnutí
Novinky
Bezpečnostní aktualizace Joomla 3.8.13
Bezpečnostní aktualizace Joomla 3.8.13

Bezpečnostní aktualizace Joomla 3.8.13 je nyní k dispozici ke stažení. Tato verze opravuje celkem 5...

06.02.2018 13:58 155 zhlédnutí
Novinky
Joomla 3.8.5
Joomla 3.8.5

Dnes byla uvolněna ke stažení Joomla s pořadovým číslem 3.8.5. Jedná se o vydání, které opravuje chyby...

30.01.2018 13:58 133 zhlédnutí
Novinky
Joomla 3.8.4
Joomla 3.8.4

Dnes byla uvolněna ke stažení Joomla 3.8.4. Jedná se o bezpečnostní vydání pro sérii Joomla 3.x,...

30.10.2018 14:04 1528 zhlédnutí
Novinky
VIDEO: Vytvořte si Joomla šablonu online a zdarma
VIDEO: Vytvořte si Joomla šablonu online a zdarma

Včera byla spuštěna nové verze Linelaboxu na doméně www.linelab.org, jedná se o nový Free Joomla!...

12.07.2016 14:19 121 zhlédnutí
Novinky
Nová Joomla! 3.6. je zde
Nová Joomla! 3.6. je zde

Dnes byla na webu joomla.org uvolněna ke stažení nová Joomla! verze 3.6. Joomla! 3.6 přináší více než...

21.03.2016 13:58 124 zhlédnutí
Novinky
Joomla 3.5 je zde
Joomla 3.5 je zde

Dnes byla uvolněna ke stažení Joomla! verze 3.5, jako zatím poslední z třetí série. Nově bylo...

22.12.2015 10:21 121 zhlédnutí
Novinky
Joomla! 3.4.7 Bezpečnostní aktualizace!
14.12.2015 19:33 108 zhlédnutí
Novinky
Joomla! 3.4.6 Bezpečnostní aktualizace!
22.10.2015 21:24 120 zhlédnutí
Novinky
Joomla! 3.4.5 Bezpečnostní aktualizace!
Joomla! 3.4.5 Bezpečnostní aktualizace!

Joomla! verze 3.4.5 byla dnes uvolněna ke stažení. Jedná se o bezpečnostní vydání pro Joomla!...

26.02.2012 13:05 140 zhlédnutí
Rozšíření a eshopy pro Joomla!
VirtueMart 2.0.2 a nové funkce
VirtueMart 2.0.2 a nové funkce

Dnes byla uvolněna nová verze VirtueMart 2.0.2. Mnozí uživatelé si stěžovali, že stabilní verze...

20.12.2011 18:29 124 zhlédnutí
Rozšíření a eshopy pro Joomla!
VirtueMart 2 Stable
VirtueMart 2 Stable

Po 2 letech vývoje tým uvolnil stabilní verzi nového VirtueMart 2. VirtueMart 2.0.0 je Open source...

27.09.2011 19:13 90 zhlédnutí
Novinky
Joomla 1.7.1 uvolněna
Joomla 1.7.1 uvolněna
Dnes byla vydána nová verze Joomla s pořadovým číslem 1.7.1. Jedná se o bezpečnostní vydání....
18.07.2011 15:25 126 zhlédnutí
Rozšíření a eshopy pro Joomla!
VirtueMart 2 RC2 je zde
VirtueMart 2 RC2 je zde

Před pár dny byla uvolněna ke stažení nová verze VirtueMart s označením 2 RC2 (1.9.8). Kód jádra...

15.09.2011 14:04 330 zhlédnutí
Rozšíření a eshopy pro Joomla!
Joomla šablony na web zdarma
Joomla šablony na web zdarma

Tvorba webových stránek postavených na redakčním systému Joomla je nyní ještě jednodušší....

25.10.2007 17:19 108 zhlédnutí
Rozšíření a eshopy pro Joomla!
Nová verze JoomSEF 2.2.2 k dispozici!
Nová verze JoomSEF 2.2.2 k dispozici!

Včera byla uvolněna nová verze SEO komponenty JoomSEF od společnosti Artio - JoomSEF 2.2.2....

Nové články

Článek uživatele
Novinky
Co nového přináší Joomla 3.9.2?
Článek uživatele
Začínáme s Joomla!
sef url joomla
Článek uživatele
Rozšíření a eshopy pro Joomla!
Filtrování položek v nastavení Joomla!

Související články