Jak zapnout Wordpress do vizuálního stavitele

Sep 10, 2025
jak
(Image Credit: Elementor / Joseph Ford)

Vizuální stavitelé existují po dlouhou dobu pro WordPress, ale vždy způsobily rozdělení jejich použití. Nejvíce měly významné nevýhody, pokud jde o rychlost stránky a kódu, které generují, a častěji než ne drag and pád bloků v úpravě obrazovky nebyly realistickou reprezentací konečného výsledku. Na druhou stranu, někdy chcete být moci rychle navrhnout a prototyp, aniž byste museli napsat kód.

Použití zásuvného prvku PageBuilder s pravým nastavením, WordPress může být převeden na minimalistický vizuální Webové stránky Builder. , téměř nezávislý na téma, který ovládá řadu nastavení, což vám umožní vytvářet složité vzory s lehkostí.

Pomocí dvaceti devatenácti výchozích hodnot Wordpress téma , můžete vytvořit plátno připravené k použití, které lze použít k prototypu nebo sestavení výroby připravenosti Wordpress Websites. . S tímto plátnem uděláme jednoduchou stránku se dvěma sekcemi a kontaktním formulářem.

Budeme dělat webovou stránku mobilní telefony a používáme dva pluginy, budeme řešit hlavní obavy s použitím vizuálního stavitele a minimalizovat již minimální dobu zatížení stránky. Případně vidíte naše kulaté Wordpress tutoriály Dokončit své dovednosti ještě dál.

Pro zvětšení použijte ikonu v pravém horním rohu každého obrázku

  • Nejlepší WordPress Hosting Services v roce 2019

01. Nainstalujte kopii aplikace WordPress

Chcete-li věci vypnout, nainstalujte kopii WordPress na systém, který používáte. Používáme program nazvaný Laragon, který nabízí možnost rychlé instalace k vytvoření instance na mém počítači.

02. Odstraňte části, které nepotřebujete

Give yourself a clutter-free page to work with

Dát si nepořádek bez nepořádku (Image Credit: Elementor / Joseph Ford)

Hlavu přes pluginy a smažte vše, co je dodáváno s WordPressem. V době psaní bude zefektivnit naše úsilí na instalaci pluginu 'Classic Editor' pro zakázání nového Gutenburg Editor . Chcete-li snížit nepořádek, měli bychom také jít na vzhled & gt; Widgety a odstranit všechny widgety.

03. Vyberte téma s hlavičkou a zápatí

Jediná část tématu, který budeme používat, je záhlaví a zápatí - všechno ostatní bude svlékáno. Budeme používat výchozí dvacet devatenáct téma, a ukáže vám nějaké rychlé změny, aby to vypadalo ostře. Při použití elementora, tím méně je téma lepší.

04. Instalovat elementor a vytvořit stránku

You'll find Elementor in the WordPress plugins library

Najdete zde Elementor v knihovně aplikace Wordpress Plugins (Image Credit: Elementor / Joseph Ford)

Použijte aplikaci WordPress Plugin Hledat pro nalezení Elementární a nainstalujte ji. Po instalaci a aktivaci vytvořte novou stránku. Pojmenujte novou stránku 'Domů' a uložte jej jako návrh tak, aby existoval v databázi. Klikněte na 'Upravit v elementoru.' To bude načteno Elementor Visual Builder.

05. Plná šířka stránka

Při pohledu na stránku je omezen na krabicový rozložení našeho tématu. Chcete-li jej zakázat, klepněte na ozubenou vlevo vlevo od editoru elementoru a změňte "rozložení stránky" na "Elementor Full Width". Pokud děláte webové stránky bez mnoha stránek, můžete zvážit možnost "Elementor Canvas", která také odstraní záhlaví a zápatí.

06. Přidat nějaký obsah

Give yourself some content to work with

Dejte si nějaký obsah pracovat (Image Credit: Elementor / Joseph Ford)

Teď, když máme prázdnou stránku, měli bychom dát něco k práci. Pro zobrazení všech dostupných prvků klikněte na ikonu Grid Elementor vpravo od editoru. Blok záhlaví a textový blok se přidají přetažením do středu stránky. Tyto dva prvky nám pomohou naši typografii.

07. Odstraňte hlavové linky

Můžete si všimnout při použití dvacátého devatenáctého tématu, že řádek je vykreslen nad všemi záhlavím. Odebrat, že pomocí nástroje WordPress Upravit nástroj. Zatímco jsme tady, budu také přidat logo v nastavení identity webu a některé položky menu. 

 H1: Před, H2: Před {
Displej: Žádný;
}

08. Oprava šířky obsahu

Ensure the content lines up with the header

Zajistěte obsah obsahu s hlavičkou (Image Credit: Elementor / Joseph Ford)

Naše sekce obsahu se s hlavičkou neobjeví. Je to proto, že dvacet devatenáct používá vypočtený okraj pro nastavení šířky záhlaví a zápatí. Můžeme to replikovat na našich elementárních sekcích pro konzistenci s některými CSS.

Měli bychom také zvýšit šířku obsahu v hlavní stránce nastavení hlavního elementoru. 

 @Media pouze obrazovka a (min-šířka: 768px) {
.Elementor-top-sekce.
boxed & gt; kontejnerová kontejner {
Margin: 0 Calc (10% + 60px);
}
}

09. Proveďte otevírací sekci

Drag in the elements you want to include

Přetáhněte prvky, které chcete zahrnout (Image Credit: Elementor / Joseph Ford)

Začneme s horní částí stránky, která bude obsahovat malé množství textu a obrazu. Vymažte naši sekci od dřívějšího a nahraďte jej novým sekcí dvou sloupců klepnutím na červenou plus. Přetáhněte v záhlaví, textový editor a tlačítko doleva. Vpravo přetahujeme v obraze.

10. Přidat pozadí

Vyberte sekci buď se vznášejícím se nad ním a klepnutím na modrou kartu nebo pomocí navigátoru v pravém dolním vpravo od tlačítek Elementor. Uvidíte tři záložky - rozložení, styl a pokročilý.

Pomocí karty rozložení dejte naší sekci výšku 80VH. Vyberte styl pro vyhledání možností a pomocí možnosti Pozadí nastavte pozadí # 0073AA.

11. Styl textu

You can change the font for your whole document in one go

Můžete změnit písmo pro celý dokument v jednom jít (Image Credit: Elementor / Joseph Ford)

Chcete-li změnit písmo pro celý celý dokument, můžeme kliknout na 'Výchozí písma' v menu Hamburger v horní části elementárního řádku. Můžete také kliknout na jednotlivé textové prvky a použít kartu Styl pro změnu barev a dalších možností.

12. Použijte efekt překrytí pozadí

Skvělý doplněk je schopnost rychle přidat překrytí pozadí z karty Styl sekce. Vyberte naši sekci a přejděte na kartu Pozadí. Dejte nám na pozadí obrázek Chcete-li to dát texturu, pak přejděte na 'Překrytí pozadí', rozevírací se níže a vyberte překrytí gradientu pozadí.

13. Vytvořte hovor na akci

Druhá část naší stránky bude hovor do akce. Budeme vložit kontaktní formulář 7, ale cokoliv, co může generovat šortku bude fungovat. Proveďte novou sekci se dvěma sloupcemi, nebo klikněte pravým tlačítkem myši na naši poslední sekci a duplikujte jej.

Nainstalujte plugin kontaktního formuláře a generujte šití pro formulář. V pravém sloupci přetáhněte v widgetu s krátkým kódem a vložte do krabice do krabice.

14. mobilní přátelský

Don't forget to tweak your design for mobile

Nezapomeňte vylepšit svůj design pro mobilní telefony (Image Credit: Elementor / Joseph Ford)

Chcete-li přistupovat k mobilním možnostem pro naši stránku, budete muset zapnout "citlivé možnosti" v dolní části panelu Elementor. Výběrem režimu "Mobile" můžeme vidět, že naše sekce budou potřebovat nějaké polstrování.

Pomocí mobilní volby, kterou můžete zkontrolovat tím, že se ujistěte, že je vedle každého nastavení modrá, naše volby nebudou mít vliv na hlavní zobrazení pracovní plochy. Veškeré změny provedené v tomto režimu však ovlivní zobrazení plochy.

15. Optimalizujte obrázky

Chcete-li minimalizovat obavy pro rychlost zatížení stránky, měli bychom spustit kompresi obrazu. To lze provést přes plugin nebo prostřednictvím webového serveru. Prozatím vyhledáváme populární plugin, EWWW Optimiser optimalizátor, nastavit maximální kvalitu a šířku pro naše obrázky a potom spustit optimalizaci.

16. Stránky mezipaměti pro zvýšení výkonu

Make your site lightning-fast with help from a cache plugin

Udělej si svůj web blesk - rychle s pomocí pluginu cache (Image Credit: Elementor / Joseph Ford)

Konečně budeme instalovat plugin cache pro maximalizaci zatížení pro naši stránku. Existuje mnoho cache pluginů, ale v současné době, Cache Enabler. je nízký profil a dobře funguje s tímto nastavením.

S aktivovanou mezipaměť se webová stránka rychle zatíří. Má také plně funkční vizuální stavitel v pozadí. Je to perfektní rychlé prázdné plátno pro vás navrhnout.

Generate CSS – the conference for web designers: 26 September, Rich Mix, Shoreditch, London

(Image Credit: budoucnost)

Připojte se k nám 26. září Generovat CSS. , na zakázku konference pro webové designéry vám přináší kreativní bloq, netto a web designer . Ušetřit £ 50 s časnou jízdenkou, když si rezervujete před 15. srpna 2019.

Tento článek byl původně publikován v časopisu Creative Web Design Web Designer. . Prodám vydání 287. nebo předplatit .

Přečtěte si více:

  • 40 brilantní wordpress tutoriály
  • Použijte WordPress jako bezhlavé CMS
  • Co je nového v Wordpress 5.0?

jak - Nejoblíbenější články

Jak natáhnout plátno a nastavit pro olejové barvy

jak Sep 10, 2025

(Image Credit: Getty Images) Vítejte v našem průvodci, jak se natáhnout plátno a nastavit pro olejové barvy. Ta..

Lino Printmaking: Úvod

jak Sep 10, 2025

(Image Credit: Meg Buick) Lino Printmaking je metoda reliéfního tisku, který zahrnuje řezbářský výkres do mě..

Začínáme s Adobe Dimension CC

jak Sep 10, 2025

Adobe Dimension z něj činí vítr nastavit komplexní scény (Image Credit: Mike Griggs) Adobe Dimensio..

Vytvoření 3D textu v aplikaci Photoshop: Průvodce krok za krokem

jak Sep 10, 2025

V tomto tutoriálu vám ukážeme, jak vytvořit kus 3D umění představovat realistický trojrozměrný textový..

Jak ilustrovat zvířecí oči

jak Sep 10, 2025

(Image Credit: Jill Tisbury) Při učení Jak nakreslit zvířata Jeden složitý aspekt k řízení j..

Přidejte efekt glitch na vaše webové stránky

jak Sep 10, 2025

Skvělý způsob, jak upoutat pozornost - a udržet ji - je vytvořit rozložení webových stránek To představuje vaše talenty z ..

Vytvořte vlastní štítek kartáč v ARTRAGE

jak Sep 10, 2025

Používám střižný sprej Artage. - Báječný umělecký nástroj, zejména pokud pro něj učiníte vlastní ..

Jak vytvořit krásný akvarel krajinomalba

jak Sep 10, 2025

Moje je poměrně impresionistický styl akvarelu Malířská technika , kde je podrobně méně důležitý než ..

Kategorie