Nový Page / Template builder Linelabox

Linelabcz
01. srp 2017 14:34 #131948
Zdravím, Připravujeme nový Page / Template builder Linelabox a hledáme beta testery. Builder pro Joomla bude v základní verzi zdarma včetně možností úpravy vzhledu rozšíření K2, Phoca Cart, Virtuemart a Jevents. Nepůjde o žádné obarvování šablon, ale kompletní tvorbu šablon a stránek. Builder poběží na Bootstrap frameworku, ale zvažujeme i podporu CSS Grid. (Dost se o CSS Grid píše ve vztahu k nově připravovaným sériím Joomla) Hledáme Joomlisty, kteří by se rádi podíleli na vývoji Template builderu nejen testováním a hlášením chyb, ale i novými nápady. Pokud máte zájem, pište prosím do PM nebo na Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.. Díky.

Linelab.cz Tvorba a správa webových stránek Joomla! LINELABOX Vytvořte si Joomla! šablony zdarma
Poděkovali: Bong

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Linelabcz
12. zář 2017 21:29 - 17. led 2018 13:30 #132253
Zdravím, vývoj Online editoru je zhruba v polovině. Níže je pár obrázků na ukázku, co je hotové a jak se s editorem pracuje.

Zvolíte si hotovou šablonu, od nás, nebo od uživatelů kteří sdílejí vlastní template a nebo začnete na bílé stránce.

Zobrazí se rozhraní editoru s možností přepnutí pro plný náhled šablony bez postranního editačního panelu. Přepínání rozlišení pro vybraná media jako desktop, tablet, Phone. Přepnutí editačního panelu vlevo a zpět, undo, redo, možnost skrýt boční panel (plný náhled šablony), výběr stránky, kterou vytváříte (komponenty) Quick tour atd...



Druhé dva obrázky zobrazují Bootstrap grid - mřížku, kde si nastavíte počet řádků a v řádcích pak počet sloupců vaší šablony, snadno tahem myší. Více jak 170 pozic pro moduly s možností přidání dalších.



Mřížku si nastavíte pokud chcete pro různá media (desktop, tablet, phone) tak jak potřebujete. Například na mobilu nebudete chtít 6 sloupců na řádek, ale pouze jeden na řádek atd...



Na tomto obrázku je vidět správa modulů Joomla a modulů pro Phoca Cart, Virtuemart, k2.... Zde snadno tahem myší drag drop vyberete modul a upustíte do vybrané pozice pro konkrétní page (na obrázku je Home Page) . Před upuštěním si jen zvolíte styl modulu jako například horizontální login, vertikální login, popup login atd, tuto volbu je možné měnit i v "edit page" části



Na další záložce, pokud chcete upravíte základní HTML tagy šablony jako body, h1, h2, form, aside, main, nav..., vyberte a přidáte fonty, se kterými budete v šabloně pracovat. Fontů je více jak 500, od těch základních po Google fonts včetně všech jejich variant. Zde je také vidět tlačítko "Edit code" kde si upravujte přímo css soubor (pro profíky). Všechny úpravy v editoru můžete provádět extra pro desktop, tablet a mobil. Dále je zde možnost přidat pseudo class (:first-child, :last-child a další) pro každý HTML tag. Editor kontroluje použité barvy a fonty, pokud chcete smazat font nebo barvu, kterou někde v kódu používáte, upozorní vás na to a napíše vám kde je font nebo barva použita. Funkcí je daleko více.



Na dalších dvou obrázcích vidíte stránku, na které budete trávit nejvíce času, je to "Edit page"
Zde editujete jednotlivé prvky šablony, přidáváte obrázky (editor je napojen na Full API jedné z největších free fotobank na internetu takže obrázků jsou tisíce) tak jak potřebujete, přidáváte barvy, rozměry, rámečky prostě vše, co potřebujete pro jakýkoliv prvek šablony. Navíc můžete opravdu velmi snadno přidávat různé hotové snippety a vše kompletně editovat.


Na obrázcích dole je také vidět lišta pro rychlou editaci rodičovských elementů vybraného prvku stránky.





Samozřejmostí je možnost přidání a úprav vlastního html kódu, css a javascriptu.



Ty z vás, které složitější tvorba šablon nebude bavit, můžou jednoduše naskládat celé hotové bloky do šablony tak, jak to znáte z ostatních page builderů pro Joomla, a šablonu vytvořit za pár minut. Instalátor bude Package nebo Template.
Online Editor je určený pro běžné uživatele, ale i pro profesionály, kteří zde najdou kompletní nástroj pro tvorbu šablon.

Editor bude k dispozici pro každého uživatele Joomla zadarmo a na pořád. Registrace bude nutná. Poplatek bude za rozšíření výběru předpřipravených hotových šablon a limity některých funkcí a počtu stažení šablon.

Myslím si, že nic podobného na internetu zdarma nenajdete, vývoj je poměrně náročný, takže díky za trpělivost. Všem beta testerům, kteří se přihlásili přes email nebo pm se ozvu. Pokud už teď máte dotazy k novému editoru, klidně pište. Parametry editoru se budou rozšířovat a měnit, funkcí je mnoho.

Linelab.cz Tvorba a správa webových stránek Joomla! LINELABOX Vytvořte si Joomla! šablony zdarma
Poděkovali: Bong

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Cufe
12. zář 2017 22:36 #132254
Franto, určitě je radost takovou věc představovat, ještě větší radost je o tom číst. Vypadá to jako skvělý online nástroj, gratuluji. Přeji, aby bylo mnoho uživatelů po celém světě soudných a přispělo finančně za jeho užívání.

Joomla úřední deska | IVT služby - IT služby, webové stránky v Joomla!, online marketing | Joomla je best! Zveřejni svůj problém, pokud ho vyřešíš sám, jsi best!

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Linelabcz
13. zář 2017 14:04 #132266
Díky, určitě to bude pecka. Testoval jsem různé page a template buildery, ale většinou jsem měl pocit, že práce s nimi je příliš komplikovaná a nepřehledná i když s pěknou grafikou, stránky nebylo možné jednoduše upravit pro různá mobilní zařízení, nutná instalace do systému Joomla, tedy potencionální problémy všeho druhu atd... neexistují zatím žádné standardy, jak by měl takový editor / builder fungovat, jeden kopíruje druhý, ale možnost vytvořit si kompletní Joomla šablonu, a připravit stránky dalších joomla komponent tak jak potřebuje uživatel, nenabízí ani jeden. Proto jsme se rozhodli řešit editor úplně jinak.

Linelab.cz Tvorba a správa webových stránek Joomla! LINELABOX Vytvořte si Joomla! šablony zdarma

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od radek
14. zář 2017 07:37 #132281
Bude to spis page builder nebo template builder? Zatim to z toho moc nepoznam. Ted pouzivam dva - jeden placeny a porad bych tam radsi videl jiny veci, nez tam oni strkaji. Konkretne mne, by vyhovovalo neco mezi s moznosti vytvaret moduly nebo addony (kazdej to nazyva jinak), jako maji u frameworku gantry od RT, kde se jeden element da pouzit do vice stranek nebo kde se naopak za pomoci jejich frameworku daji bez problemu vytvaret stranky celyho webu. Coz u ostatnich pagebuilderu moc nejde a hodi se je pouzit napriklad na 5 stranek.

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Linelabcz
14. zář 2017 10:09 - 14. zář 2017 10:15 #132284
Ahoj, Pro snippety, addony nebo jak to nazvat, používáme Custom html modul. Snippety pak ukládáme/uživatel ukládá do knihovny. V custom html modulu můžeš přidat vlastní html kód, css a javascript. Pokud si v knihovně editoru nevybereš, můžeš navštívit mnoho stránek se snippety třeba zde bootsnipp.com/ a protože šablona podporuje Bootstrap, přidání nového snippetu do custom html modulu zabere asi 5 vteřin a vše vypadá skvěle. Snippety si pak snadno dostyluješ. K dispozici je ale i možnost vytvořit vlastní obsahovou stránku tedy Joomla article, (seskládat z bloků nebo snippetů a upravit včetně textu) vlevo nahoře na obrázku je seznam stránek pod záložkou pages. Řešíme způsob, jak si vytvořené stránky uživatel přidá rychle na vlastní web. Takže vlastně se jedná o Page Builder i Template Builder.

Linelab.cz Tvorba a správa webových stránek Joomla! LINELABOX Vytvořte si Joomla! šablony zdarma

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od radek
14. zář 2017 16:46 #132299
Ahoj,

takze jsem se zhruba trefil, ze mne to pripomina oboje. No uvidime, jak se to bude jednoduse pouzivat. Gantry od RT je sice framework, ale je to nedotazeny page builder. Super vec je ta, ze se jeden addon, ze kteryho si vytvoris napriklad tab s nejakym obsahem, muzes pak v editoru hodit do clanku jako modul. Tohle ma treba Quix, ale u nej nejde psat clanky primo v Joomla articlu, coz jde zase v jinych, ale chybi jim zase neco jiny. Uplne nejjednodussi je ten od Joomlartu, ale strasne spatne se v nem meni nektery veci. Je to ale velmi jednoducha a velmi rychla stavebnice.

Su zvedavej, jak se to bude rychle nacitat, protoze treba ten od Joomshaperu je fakt rychlej, zejmena diky jejich frameworku a dodanymu template, coz je zase nevyhoda Quix. Ten ma milion technickych serepeticek, ale to zakladni - sablona a rychlost, mu chybi.

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od David Zirhut
18. zář 2017 11:02 #132315
Ahoj, zkusím na otázku odpovědět po svém.
Jedná se v principu o template builder (a bude to template builder v případě vygenerování instalačního balíčku - šablony). Protože ale při běžné instalaci šablony Joomla! nabízí omezené možnosti, tak celá aplikace bude nabízet něco navíc. Při editaci šablony bude možné přidávat a nastavovat i věci, které jdou nad rámec instalátoru šablony (snippety jako custom html, přiřazování modulů na pozice, souběžná instalace doplňkových modulů a další). Proto bude možné stáhnout rozšířený balíček/instalátor který do Joomly! doplní prvky, které už rámec template builderu přesahují.

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Martin70
24. říj 2017 06:42 - 24. říj 2017 06:42 #132744
Vypadá to velice zajímavě, určitě to pak rád vyzkouším. Já používám vše od Joomshaper (šablony, framework Helix3, PageBuilder). Ostatní pagebuildery jsem netestoval. Celkem mi to vyhovuje, jak tvorba Layoutu v šabloně, tak i PageBuilder. Verze 1 byla línější, verze 2 je rychlejší a teď jsem instaloval poslední verzi PB s Joomla 3.8.1 a na PHP 7.1 a přijde mi to celé zase o dost rychlejší (možná to je i tím PHP 7.1 oproti 5.6). V posledních setinkových verzích PB přibylo propojeni PageBuilderu s články a moduly - to jsou ty snippety. Dalo by se říct, že mi tam už skoro nic nechybí. Snad jen nějaká knihovna hotových věcí, že když chci něco přestylovat tak abych místo psaní css kódu někam sáhl - ale to už si hodně vymýšlím. :)

Když jsi vzpomenu, jak jsem před lety dělal statické weby tak, že jsem nejdříve vytvořil návrh ve Photoshopu (začínal jsem z prázdné bílé stránky), pak to nařezal, psal HTML a CSS - taky od nuly, pak to ladil v prohlížečích (v IE bylo vše jinak),.. Teď je celý responzivní web hotový za pár dnů komplet.

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Linelabcz
24. říj 2017 07:32 #132745

Martin70 napsal: Dalo by se říct, že mi tam už skoro nic nechybí. Snad jen nějaká knihovna hotových věcí, že když chci něco přestylovat tak abych místo psaní css kódu někam sáhl - ale to už si hodně vymýšlím. :)


Právě taková knihovna "hotových věcí", tedy přes CSS upravených modulů core Joomla, K2, Virtuemart... + další knihovna tzv snippetů je v novém Builderu k dispozici. Navíc můžete snippety sdílet s ostatními, stejně jako celé Joomla šablony.

Linelab.cz Tvorba a správa webových stránek Joomla! LINELABOX Vytvořte si Joomla! šablony zdarma

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Linelabcz
18. lis 2017 00:25 #133055
Zdravím, čas pokročil a Template Builder je připravený k prvním testům. Linelabox Template Builder je nástroj, pomocí kterého si snadno dokážete vytvořit perfektní Joomla šablonu bez znalosti kódování. Ti z vás, kteří ovládají znalosti CSS a HTML můžou naplno využít funkce Template Builderu přímou editací css souborů a html kódu.

Pokud máte zájem o testování, anebo jste nedostali přístupy, ozvěte se na email Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.

Na webu je k dispozici malá nápověda po kliknutí na ikonku „Quick Tour“ s otazníkem v levém horním rohu editoru.
Funkce vlastní úpravy stránek komponent Joomla! Article, J! Blog, J! Contact, Phoca Cart, K2 a Virtuemart je ve fázi vývoje. Před testováním je nutné se na webu registrovat, Template Builder není zatím veřejně přístupný.

Joomla šablonu pro editaci si po přihlášení zvolte v Horním menu „ Account“ na záložce „Shared templates“.
Primárně se prosím při testech zaměřte na použitelnost Template Builderu a následně na hledání chyb a nefunkčností, připomínky pište do chatovacího okna na webu, umí i printscreeny obrazovky.

Videa s nápovědou přidáme postupně během pár dní. Níže jsou první dvě.

První video zobrazuje způsob navržení mřížky Joomla šablony, zaškrtnutím checkboxu si definujete řádky a pomocí posuvníku potom sloupce. Sloupce jsou vlastně pozice pro moduly, tak jak znáte z administrace Joomla, když instalujete nějaký modul, zveřejníte jej v určité pozici.

Mřížku navrhujete zvlášť pro monitor stolního PC, tablet a mobil. To je velmi užitečné proto, aby se šablona správně zobrazovala na různých zařízeních. Například pro mobil není dobré nechat zobrazit 4 moduly v jednom řádku, jako na monitoru stolního pc, nevypadalo by to dobře, proto je dobré si nastavit například jen jeden sloupec /pozici na řádek.

Pro řádky můžete nastavit plovoucí nebo fixní šířku (fluid a boxed), odstranit mezery mezi sloupci, skrývat jednotlivé sloupce pro různá media. Například na mobilu nechcete zobrazovat určitou pozici s modulem, tak si pozici v nastavení vypnete.

Na videu si všimněte řádku mainbox, zde si můžete nastavit po stranách šablony další sloupce zatím 2x levý a 2x pravý. V nastavení řádku mainbox můžete také vypnout zobrazení komponenty na úvodní stránce. To znamená, že pokud chcete mít na úvodní stránce webu pouze moduly a v menu odkazujete na úvodní stránku třeba článkem, ten se nezobrazí. Tuto možnost můžete po instalaci šablony kdykoliv změnit přímo v nastavení.



Druhé video zobrazuje způsob přidávání modulů Joomla, modulů komponenty K2, modulů Phoca Cart, Virtuemart a další. Modul jednoduše přetáhnete do zvolené pozice. Editor podle šířky sloupce rozpozná jaký skin (vzhled modulu) je vhodný, což je vidět na videu například u menu. V této části editoru můžete moduly klonovat, mazat a Drag Drop přesouvat dle libosti. Vzhled modulů který vidíte na videu je základní a lze jej kompletně změnit, buď výběrem jiného skinu, nebo pomocí parametrů v pravém panelu, nebo přímou editací css v popup okně, nebo pomocí nastavení originálních parametrů modulu, které znáte z administrace Joomla a nebo kombinací všech těchto možností, to vše v reálném čase, ihned vidíte změny.



V dalším videu si ukážeme, jak si připravit základní vzhled šablony, tedy jak upravit zobrazení nadpisů, formulářů, tlačítek atd. a jak upravit vzhled modulů.

Díky za váš čas.

Linelab.cz Tvorba a správa webových stránek Joomla! LINELABOX Vytvořte si Joomla! šablony zdarma
Poděkovali: zpetr

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Linelabcz
18. lis 2017 11:36 - 18. lis 2017 13:36 #133059
V následujícím videu je vidět způsob přidávání fontů a verzí fontů (Light, Extra Light, Medium, Bold atd..) do Joomla! šablony. V prvním kroku si zvolíte fonty, které chcete při vytváření vaší šablony používat, na výběr máte ze standartní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 ukázce na videu je vidět přidání fontů z Google Fonts a použití fontů pro nadpisy H1 a H2. Všechny změny opět vidíte v reálném čase.


Linelab.cz Tvorba a správa webových stránek Joomla! LINELABOX Vytvořte si Joomla! šablony zdarma
Poděkovali: zpetr

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Linelabcz
18. lis 2017 19:14 - 18. lis 2017 19:16 #133063
Video níže zobrazuje způsob přidání obrázku na pozadí jakéhokoliv prvku vaší Joomla šablony.
Obrázek nebo Background image můžete přidávat nejen z pravého panelu, ale i kliknutím na tlačítko „Edit Code“ v různých sekcích editoru, prakticky kamkoliv budete potřebovat. Navíc je zde možnost přidat pro Background image také Parallax Scrolling efekt jednoduše výběrem ze selectboxu.

Každou provedenou akci můžete vrátit zpět pomocí funkce Undo a Redo a to i když provedete stovky změn. Obrázků zdarma k použití je více jak 1 000 000, což momentálně nenabízí žádný podobný software na internetu. Obrázky mužete vyhledávat podle orientace na výšku nebo šířku, klíčových slov a kategorií. Tvorba šablon se tak posouvá na zcela jiný level.



Prohlédněte si i předchozí videa na začátku diskuze.

Linelab.cz Tvorba a správa webových stránek Joomla! LINELABOX Vytvořte si Joomla! šablony zdarma

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Linelabcz
19. lis 2017 14:53 #133072
Na tomto videu vidíte, jakým způsobem se stylují základní selektory šablony, jako “body“ tedy tělo dokumentu, nadpisy, h1, h2, odstavce, odkazy, seznamy, formuláře, tlačítka a mnoho dalších. Na záložce Global CSS Styles si můžete pro každý selektor definovat pravidla, jak má který prvek v šabloně vypadat. Například vlastnosti písma, barvy textu, barvy a obrázky pozadí, vlastnosti bloků a další. 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“. Zde také najdete k editaci ostatní stránky komponent Joomla, K2, Phoca Cart, Virtuemart, Acymailing atd. Ale o tom až později.

V sekci Global CSS Styles můžete snadno v pravém panelu definovat předvolené hodnoty vlastností, nebo si přidat jaké potřebujete. Důležité je, že lze využít i přímé editace CSS stylů po kliknutí na tlačítko „Edit Code“ a máte tak plnou kontrolu nad tvrbou základního CSS.

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 vpravo. Editor vás i něco nového naučí. :)
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. Nicméně doporučím www.jakpsatweb.cz/css/ kde najdete mnoho užitečných informací a můžete si v reálném čase vyzkoušet na vaší šabloně, jak vše funguje. Každou akci můžete snadno neomezeně vrátit zpět pomocí nástrojů Undo a Redo.




Další videa už budou ze sekce Edit Page, kde se budete pohybovat nejčastěji.

Linelab.cz Tvorba a správa webových stránek Joomla! LINELABOX Vytvořte si Joomla! šablony zdarma

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Linelabcz
20. lis 2017 13:13 - 20. lis 2017 16:34 #133075
Na videu níže se konečně dostáváme k položce "Edit Page"

V ukázce jsme si na záložce "Modules" rychle přidali moduly do mřížky šablony, mřížku tedy řádky a sloupce pro desktop, tablet a mobil verzi šablony jsme si před tím vytvořili na záložce "Boostrap Grid" Vybrané moduly jsme rozmístili do sloupců, tedy pozic pro moduly.

Na záložce "Edit Page" upravujeme parametry a vzhled Joomla! modulů a stránek komponent Joomla, Phoca cart, Virtuemart, k2 atd..., k dispozici je opět funkce „Edit code“ , lze tedy vytvořit prakticky jakýkoliv design modulů a jim nadřazených elementů. K úpravě vzhledu stránek "Pages", modulů a jim nadřazených elementů můžete samozřejmě využít i pravý panel editoru, je to velmi snadné. U každé položky je nápověda, každou akci lze vrátit zpět.

Vybrané rozšířené parametry jsou totožné s nastavením modulů v administraci Joomla. Na ukázce je vidět změna textu tlačítka pro modul vyhledávání, dále vypnutí zobrazování Submenu a nastavení obrázků v rozšířených parametrech modulu Slideshow. Všem modulům můžete také zobrazit a upravit nadpis, nastavit typ nadpisu h1 až h6, modul můžete pojmenovat tak, abyste se později v seznamu modulů dobře orientovali, Například pro menu si zvolíte název „Horní Menu“. Modul je možné přiřadit ke stránce Homepage nebo ostatním stránkám tak, aby se nezobrazoval na každé stránce editoru, tak jak přiřazujete moduly jednotlivým stránkám v administraci Joomla. Všechna tato nastavení si můžete později libovolně měnit v administraci Joomla.

V ukázce vidíte také editaci „Custom HTML“ modulu, můžete přidat nebo upravit HTML kód i CSS styly jak pro obsah modulu, tak pro modul samotný nebo nadřazený element modulu.
Důležitou funkcí je i výběr vzhledu modulu ikonka složky „Load skin“ a "Save skin". Můžete si uložit vlastní skin modulu pro pozdější použití nebo si pro každý jednotlivý modul vybrat z již přednastavených skinů tak, aby vám do šablony vyhovoval. V ukázce vidíte výběr skinu pro modul „mod_menu“.



„Edit Page“ nabízí obrovské množství funkcí a kontrolu nad každým prvkem šablony. Další zajímavé a důležité funkce si popíšeme v následujících videích.

Linelab.cz Tvorba a správa webových stránek Joomla! LINELABOX Vytvořte si Joomla! šablony zdarma

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.