Blokový motiv nebo page builder: co se doopravdy mění
Page builder přidává do WordPressu druhý editor a ukládá rozvržení do vlastního formátu, který umí číst jen daný plugin. Bloková šablona používá editor, který dodává WordPress, a stránky se ukládají jako standardní blokový kód. Rozdíl se projeví při změně nástrojů. Opuštění page builderu obvykle znamená přestavět každou stránku, zatímco core bloky se zobrazují v jakékoli blokové šabloně. Rychlost závisí na tom, co každá stránka načítá.
Část 1: Dva způsoby, jak vytvořit stránku ve WordPressu
Pokud odhlédnete od marketingu, máte před sebou dva návrhy.
Plugin pro tvorbu stránek
Builder přidává do prostředí WordPress vlastní editor, vlastní modul rozvržení a vlastní knihovnu widgetů. Navrhujete v plátně builderu a builder ukládá výsledek ve vlastním formátu do vašich příspěvků. Jeho styly a skripty běží na frontendu a převádějí tento formát zpět na stránku. Šablona většinou ustupuje do pozadí.
Blocková šablona v editoru, který WordPress nabízí
Blokový editor je součástí samotného WordPressu. Bloky se ukládají jako HTML se strukturovanými komentáři okolo, předlohy jsou blokové předlohy a barvy a typografie pocházejí ze souboru theme.json, který čtou jak editor, tak front end. Blokově založená šablona jako Canvas přidává bloky, předlohy a nastavení do tohoto jediného editoru. Vedle něj nestojí nic.
Oba přístupy vytvoří web ještě dnes odpoledne. Rozdíl se projeví o tři roky později, až se změní vaše priority, hostingová společnost nebo vývojář.
Část 2: Jak se váš obsah ukládá
Na tuto část lidé přijdou v nejhorší možný okamžik, proto začněte tady.
Formát tvůrce stránek
Page buildery ukládají rozvržení jako vlastní strukturu: jako shortcode, serializovaný blok nastavení nebo blok JSON v metadatech příspěvku. Dokud je plugin aktivní, vypadá to skvěle. Jakmile jej deaktivujete, stejná stránka zobrazí buď surové shortcody, nebo nic, protože tento formát žádný jiný software nečte. Přechod jinam obvykle znamená ruční přestavbu, stránku po stránce.
Základní formát
Značkování bloků je prostý HTML kód s komentáři. Otevřete příspěvek v editoru kódu a přečtěte si ho. Přepněte na jinou blokovou šablonu a základní bloky se dál vykreslují, protože vykreslování zajišťuje WordPress. Nejde o marketingové tvrzení, jde o vlastnost formátu ukládání.
Canvas dbá na totéž i na své vlastní úrovni. Každý blok Canvas je registrovaný typ bloku s reálným panelem nastavení, nikdy ne shortcode, a jeho atributy jsou běžné atributy bloku, takže je mohou nastavit i vzor, REST API nebo příkazová řádka. Bloky jsou součástí pluginu Canvas, takže změna šablony vaše stránky nikdy nevrátí zpět na prostý text.
Buďte upřímní ohledně limitu: každá knihovna bloků, kterou nainstalujete, je kód, na kterém nyní závisíte. Rozdíl je ve velikosti díry, kterou zanechá. Odebráním knihovny bloků zůstanou nevykreslené sekce, které její bloky používaly. Odebráním buildera zůstane nevykreslená celá stránka.
Vyzkoušejte to nejdříve na testovací kopii, ještě než se tak či onak rozhodnete. Duplikujte web, deaktivujte nástroj pro rozvržení a prohlédněte si tři stránky. Cokoli uvidíte, je skutečná cena odchodu, a lepší je o ní vědět hned.
Část 3: Co se na stránce skutečně načte
Argumenty o rychlosti v této oblasti bývají obvykle založené na zažitých předsudcích. Mechanismus je dostatečně jednoduchý, aby se dal logicky posoudit.
Page builder je druhý motor pro rozvržení. Dodává vlastní mřížkový systém CSS, vlastní knihovnu animací a vlastní JavaScript, často na každé stránce, protože plugin nemůže vždy předem vědět, které widgety stránka použije. To je pevný náklad navíc k WordPressu a vaší šabloně.
Editor bloků nemá vlastní běhové prostředí. Základní bloky jsou většinou HTML a CSS a dobře postavená bloková šablona k tomu přidá jen málo. Canvas načítá pouze CSS a JavaScript bloků, které stránka skutečně obsahuje, a přidává 35 optimalizací, které můžete zapínat a vypínat, včetně pěti zaměřených přímo na skripty, které WooCommerce načítá na stránkách, jež nic neprodávají.
Upřímná verze
Pečlivě vytvořená stránka v dobrém page builderu může předčit nedbale vytvořenou stránku v šabloně založené na blocích. Nástroje pro rozvržení jsou jeden faktor mezi několika, vedle vašeho hostingu, obrázků, písem a dalších jedenácti pluginů, které jste nainstalovali. Důvod, proč dávat přednost menšímu množství mechanismů, nemá nic společného s ukázkami z benchmarků. Je ho méně, co se může pokazit v den, kdy se díváte jinam.
Část 4: Jak úpravy vypadají v každodenním provozu
Tady si buildery vydobyly svou pověst a tady se propast nejvíce zacelila.
Vidět skutečnou stránku během úprav
Starou výtku k editoru bloků bylo, že stránka se otevřela jako bílé pole bez designu kolem sebe. Canvas nastavuje editor tak, aby vykreslil celou šablonu, takže hlavička, slider, pás titulku stránky, obsah i patička se zobrazí v plátně, vykreslené stejným kódem, který kreslí front end. Šířky a mezery jsou skutečné, takže sekce na celou šířku vypadá skutečně na celou šířku.
Nastavení tam, kde ho čekáte
Vyberte blok a otevře se jeho panel s textem, odkazy, obrázky, ikonami, barvami, velikostmi a chováním, kterým daný blok rozumí. Canvas přidává stejný pokročilý panel ke každému typu bloku registrovanému na webu, včetně základních bloků: animaci při vstupu a odchodu, vlastní CSS omezené na daný blok, vlastní atributy pro analytiku nebo testovací účely a podmínky zobrazení podle role nebo zařízení.
Nemusíte se opakovat
Dva systémy vám ušetří opakování. Uložit jako výchozí uloží blok nastavený podle vašich představ, takže další vložený blok začne právě s těmito nastaveními. Globální styly bloků pojmenují sadu nastavení jako předvolbu, kterou použijete na celém webu a kterou pak změníte jen jednou. Šablony a části šablon jsou uloženy v Editoru webu, kde je WordPress spravuje, a v šabloně Canvas najdete 173 šablon bloků, 5 částí šablon a 4 varianty stylů.
Část 5: Co ještě lépe zvládá nástroj pro tvorbu stránek
Srovnání, které na druhé straně nenajde nic dobrého, je reklama. Tady je, v čem jsou page buildery dnes opravdu napřed.
- Volné umísťování. Přetažení prvku kamkoli a jeho posun o pixel je ve vyspělém builderu pořád plynulejší. Blokový editor dává přednost struktuře před absolutním umístěním, což je dobré pro tým a horší pro jednorázovou hero sekci.
- Hloubka ekosystému. Velké tvůrce stránek mají roky doplňků třetích stran, tržišť a integrací. Pokud váš pracovní postup závisí na konkrétním doplňku, před přechodem ověřte, zda existuje ekvivalentní blok.
- Tým to ví. Pokud váš tým, váš klient nebo freelancer, kterého najímáte na pátky, pět let stavěl v jednom builderu, tato zběhlost má skutečnou hodnotu. Přeškolení něco stojí a projeví se to ve vašem dalším projektu.
- Ovládání podle zařízení všude. Některé nástroje pro tvorbu stránek nabízejí hodnoty pro telefon a tablet téměř u každé vlastnosti. Core je výběrovější a občas sáhnete po poli pro vlastní CSS tam, kde jiný nástroj měl ovládací prvek.
- Jedno řešení pro všechno. Nástroj pro tvorbu stránek, který zároveň nabízí vyskakovací okna, formuláře a tvůrce šablon, znamená jednoho dodavatele a jednu podporu. Canvas na to reaguje tím, že stejné části dodává sám, ale tento argument platí spravedlivě vůči základní blokové šabloně.
- Stabilita rozhraní. Editor bloků se mění s každou verzí WordPressu. Page builder se mění tehdy, když to rozhodne jeho dodavatel. Pokud měnící se rozhraní narušuje práci vašich klientů, na tom záleží.
Nic z toho není důvodem k tomu, abyste se vyhnuli šabloně založené na blocích. Jsou to důvody k tomu, abyste se rozhodli s otevřenýma očima a nedůvěřovali každé srovnávací tabulce, která jeden sloupec vybarví zeleněji.
Část 6: Co přechod ve skutečnosti stojí
Pokud máte existující web postavený v page builderu, upřímná odpověď zní, že přesun znamená nové vytvoření, nikoli převod. Na to počítejte s dostatečným rozpočtem.
- Obsah se přenese, rozvržení ne. Text a obrázky jsou vaše a přenosné. Uspořádání patřilo page builderu a musí se vytvořit znovu.
- Postupujte stránku po stránce. Začněte stránkami, které přinášejí nejvíc: úvodní stránkou, hlavní vstupní stránkou a kontaktní stránkou. Archiv starých příspěvků nechte na konec, protože obvykle obsahuje běžný obsah.
- Začněte z dema, ne z prázdné stránky. Import kompletního demo webu vám poskytne hotový návrh k úpravám a celý import se vrátí zpět, pokud si to rozmyslíte.
- Nechte builder nainstalovaný, dokud nebudete hotovi. Deaktivujte ho teprve tehdy, když na něm nebude záviset žádná živá stránka, a poté web zkontrolujte crawlerem odkazů.
- Nepřesměrovávejte nic, co přesměrovat nemusíte. Zachovejte stejné adresy URL a zachováte i pozice ve vyhledávání, které k nim patří.
Počítejte s tím, že první dvě stránky půjdou pomalu, dokud se naučíte vrstvy bloku, vzoru a předlohy. Poté přijde určitý rytmus. Většina ušetřeného času pramení z toho, že se hlavička a patička při každém projektu nemusí stavět znovu.
Část 7: Jak se rozhodnout
Odpovězte upřímně na těchto pět otázek a rozhodnutí se obvykle udělá samo.
- Kdo bude tento web upravovat za dva roky? Pokud je to klient, stážista nebo někdo bez konkrétní odpovědnosti, nejspíš jim bude nejblíž editor, který je součástí WordPressu.
- Kolik webů spravujete? Jeden osobní web unese libovolné množství dalších nástrojů. Dvacet klientských webů nikoli a každá další vrstva je požadavek na podporu, který čeká na založení.
- Je váš design neobvyklý, nebo konvenční? Konvenční tvary stránek jsou přesně to, v čem bloky, vzory a šablony vynikají. Vrstvený a výtvarně řízený jednorázový návrh může být v builderu stále rychlejší.
- Jaká je vaše strategie odchodu? Pokud je odpovědí „žádná strategie odchodu neexistuje“, zvolte formát, který čte sám WordPress.
- Za co vlastně platíte? Porovnejte celkovou částku: šablonu, builder, plugin pro formuláře, plugin pro vyskakovací okna, plugin pro slidery a obnovení každého z nich, s jedním produktem, který je všechny pokrývá.
Pokud už je některý builder na vašem seznamu, dvě naše srovnání kladou tyto otázky konkrétnímu produktu: Canvas jako alternativa k Elementoru, tarif po tarifu, a jak se Canvas srovnává s Divi z hlediska úprav, závislosti na dodavateli a toho, co se stane, když licence vyprší. Obě uvádějí své zdroje a datum, kdy byly údaje zjištěny.
Canvas je blokovou šablonou, která na tento seznam odpovídá: 209 bloků v nástroji pro vkládání, který už používáte, 183 vzorů, 173 předloh, tvůrce hlavičky a patičky, formuláře a 88 kompletních ukázkových webů jako výchozí bod. Pokud byste raději viděli rozdíl, než o něm číst, otevřete ukázkový web a přejděte na libovolnou stránku.
Zdroje
Tam, kde tento průvodce popisuje něco mimo samotný Canvas, najdete oficiální stránky, které to dokumentují.
- Ukázka značkování blokudeveloper.wordpress.org · Bloky se ukládají jako HTML s komentáři, které označují začátek a konec každého bloku
- Úvod do theme.jsondeveloper.wordpress.org · Nastavení a styly v souboru theme.json se projeví na webu i v editorech
- Co je šablona?developer.wordpress.org · Blokové šablony se skládají z předloh bloků a funkce uložené v pluginu přetrvají změnu šablony
- Úvod do předlohdeveloper.wordpress.org · Editor webu ukládá vaše předlohy a jejich části jako značkování bloků do databáze
Kam dál
Dva návody, které ukazují blokový přístup v praxi, a knihovnu, na které to stojí.
Je šablona založená na blocích automaticky rychlejší než page builder?
Ne, a každý, kdo tvrdí opak, něco prodává. Rychlost závisí na tom, kolik CSS, JavaScriptu a značkování stránka odešle, a ne na kategorii nástroje. Blokově založená šablona vám dává kratší cestu ke lehké stránce: žádný druhý layoutovací engine a v Canvas pouze soubory bloků, které stránka obsahuje, a navíc 35 přepínačů pro zbytek. Změřte si své stránky před a po změně. Neberte žádné z těchto tvrzení za pravdivé, dokud je neověříte.
Přestanou mé stránky fungovat, pokud přestanu Canvas používat?
Základní bloky se zobrazují v jakékoli šabloně, protože obsah se ukládá jako standardní značky bloků, které čte samotný WordPress. Bloky Canvas pocházejí z pluginu Canvas, takže po změně šablony zůstanou ve vašich příspěvcích a stránkách. Odstraníte-li navíc i plugin, tyto konkrétní sekce přestanou být zobrazeny, což platí pro jakoukoli knihovnu bloků.
Mohu na šabloně Canvas používat page builder?
Page builder je plugin, takže vám nic nebrání ho nainstalovat. Nedoporučujeme to: na jednom webu byste spravovali dva systémy rozvržení, dva systémy stylů a dva cykly aktualizací, a předlohy, prvky rozhraní a bloky, za které platíte Canvas, by zůstaly pod tím nevyužité.
Potřebuji znát kód, abych mohl stavět bez page builderu?
Ne, stavba webu Canvas bez page builderu nevyžaduje žádný kód. Každá část stránky Canvas je blok s panelem nastavení, včetně hlavičky, patičky a pásu s titulkem stránky, a pokročilý panel přidává animace, vlastní CSS, vlastní atributy a podmínky zobrazení ke každému typu bloku na webu. Pole pro vlastní CSS je k dispozici, když je potřebujete, ne proto, že by je produkt vyžadoval.
Vytvořte svůj další web s Canvas
Ať už jste začátečník, freelancer, nebo agentura, dostanete stejné bloky i stejná dema. Začněte jedním webem a vytvářejte tolik, kolik potřebujete, na stejné licenci.