WordPress je široce používaný CMS po celém světě díky svému jednoduchému rozhraní, vysoce přizpůsobitelným tématům a nekonečné rozmanitosti Pluginy mocný. Zjednodušila tvorbu, vývoj a správu webových stránek, a to i pro ty amatérské uživatele.

Dnes a díky WordPress již nemusíte mít specifické znalosti, abyste mohli vytvářet atraktivní webové stránky. Nicméně jste peut být již narazili na web, který nabízí skutečně neuvěřitelný design, a pravděpodobně jste se divili: Jak se to dělá?

Bohužel, pokud jste amatér nebo začátečník, nemůžete dělat moc, dokonce s WordPress, protože pro úpravu vašeho tématu potřebujete určitou úroveň znalostí HTML, CSS, PHP a několik dalších dovedností v závislosti na povaze vašeho tématu, ale také vašeho projektu nebo cíle.

I když jste ale zkušený programátor, určitě potřebujete nástroj, který vám umožní ušetřit čas a kvalitu na konečném výsledku.

Naštěstí, plugin WordPress « WPBakery Page Builder Dříve známý jako „ Vizuální skladatel » poskytuje řešení tohoto problému. S tím druhým dokonce většina začátečníci bloggerů mohou vytvářet stránky se zcela jedinečným vzhledem svého webu.

Pomocí tohoto pluginu můžete vytvářet:

  • Atraktivní vstupní stránky (vstupní stránka)
  • Od prodejních stránek až po profesionální vzhled
  • Prezentační weby pro vaše podnikání
  • moduly stránky pro váš trénink
  • chvilka

Je to podle mého názoru nejlepší nástroj pro formátování (nebo rozložení) na internetu. Speciálně pro uživatele WordPress.

V tomto tutoriálu vám proto ukážu, jak dát svému webu jedinečný vzhled (Nebo blog)plugin Vizuální skladatel.

Takže ...

Jak nainstalovat a nakonfigurovat Plugin WPBakery Page Builder

WPBakery Page Builder je plugin prémii, kterou si můžete koupit Codecanyon : Nejlepší prodejní platformu na internetových zásuvných modulů.

DOBŘE. Jakmile si tento plugin pro rozvržení zakoupíte a stáhnete na WordPress, musíte jej pouze nainstalovat a aktivovat.

Pak začneme provedením několika základních úprav. Chcete-li to provést, přejděte na místo "Nastavení >> Vizuální skladatel » na přístrojové desce.

Obecná nastavení

vizuální skladatel s obecným nastavenímPrvní karta (obecná nastavení), Umožňuje změnit:

  • Obsah, na němž vizuální bude k dispozici. Položky můžete zkontrolovat (zveřejnit) a / nebo stránek (strana)
  • Různá pravidlapřístup různé role. Pomocí této možnosti můžete určit která se mění co. Zobrazí se různé dostupné role. Budete muset kliknout na každý z nich a zkontrolovat prvky, ke kterým je (role) bude mít přístup. Máte možnost zakázat použití „ vizuální skladatel “uživatelům konkrétní role.
    aktivujte editor v nástroji pro tvorbu stránek WPbakery
  • Povolit nebo zakázat položky citlivý
  • Definujte podmnožiny písem Google

výběr rolí wpbakeryMožnosti designu

V možnostech návrhu máte možnost upravit výchozí vizuální vzhled různých prvků „ vizuální komponovat ". Před použitím se ujistěte, že jste zaškrtli tuto možnost « Použijte vlastní možnosti designu ».

css nastavení

Tyto možnosti vám umožní definovat barvu, která platí pro všechny prvky. 

  • Vlastní CSS Dává vám příležitost další přizpůsobení každé položky, pouze vývojáři mohou vědět, o co jde.
  • Karta « License Product »Umožňuje vám aktivovat plugin přijímat automatické aktualizace.
  • Karta « shortcodes aktiva Jde v podstatě o vývojáře.

Dobře, teď vytvoříme vlastní webovou stránku s Visual Composer.

Jak vytvořit vlastní stránku pomocí vizuální komponovat

Chcete-li snadno vytvářet přizpůsobené webové stránky, máte na výběr mezi editorem back office „, To znamená, že web upravíte na řídicím panelu WordPress, kde„ “ front office ".

Editor-the-front-end-the-editor-backend

Pokud používáte Gutenberg, na horním panelu úloh si všimnete tlačítka „Editor stránek“.

editor vizuálního skladatele editoru dashboardu

Výhoda s editorem Front office je to, že můžete upravovat živé stránky a sledovat, jak se různé prvky ve vašem motivu objevují.

S editorem back office

Pro přístup k editoru „ back office », Pozývám vás k kliknutí na« vydavatel Back-office ". Do vizuálního editoru WordPress se můžete kdykoli vrátit kliknutím na „ Classic mód “. Ale myslím, že to nebude nutné, takže toto formátování webové stránky pluginu je dokončeno.

Jakmile jste v editoru Back-office, můžete zvolit globální rozvržení, které bude použito pro stránku.

Aktualizace strana liší se podle toho, co máte v plánu udělat se stránkou. Takže si můžete vybrat « přistání stránka » vytvořit domovskou stránku, "Seznam služeb" pro stránku, která zobrazuje služby atd. Se zkušenostmi budete dokonce moci vytvářet sázky en stránky na míru navržený velmi pro.

Ať je výběr vašeho nastavení jakýkoli strana, prezentace prvků je u všech těchto prvků podobná. Můžete přidat nový element kliknutím na tlačítko "+" na samém vrcholu meta box « Vizuální editor », Nebo přidejte model kliknutím na ikonu "Model".

Na každém řádku můžete (zleva doprava) :

  • Přesuňte čáru
  • Spravujte sloupce v řádku
  • Přidat nový sloupec

rozhraní pro tvorbu stránek wpbakeryVpravo od rámečku jsou k dispozici další možnosti. Tyto možnosti vám umožňují (zleva doprava) Komu:

  • zmenšit řádek
  • upravit řádek
  • duplikovat řádek
  • smazat řádek

wpbackery rozloženíUprostřed každého sloupce můžete přidat položku před, upravit sloupec nebo jej smazat.

možnosti sekce wpbackerymožnosti sekce wpbackery

Doporučené zdroje

Zde je několik vizuálních skladatelů rozšíření, které doporučujeme:

1 - Jak spravovat sloupce

Na kartě Správa sloupců můžete zvolit počet sloupců, které chcete přidat do řádku. Chcete-li porozumět různým modelům sloupců, vězte, že každý zlomek odpovídá šířce, kterou sloupec zabírá. Stejně jako šablona obsahuje zlomky, tolikrát bude mít stránka sloupce.

Samozřejmě jsou k dispozici různé šablony sloupců 11, ale kliknutím na odkaz můžete vytvořit libovolný počet „Personalizováno“ těsně pod seznamem sloupců.

Chcete-li například zobrazit část stránky se sloupci 2 ve stejné šířce, musíte zvolit (Nebo přidat) „1 / 2 + 1 / 2“. 

Sloupce se zobrazí na vašem blogu a jejich šířky budou rozděleny úměrně rozměrům motivu. Sloupec může obsahovat co nejvíce položek, takže na této úrovni není žádný limit.

rozložení wpbakery sekce

Různé prvky lze přesunout do libovolných sloupců.

pohybující se wordpress textové pole wpbakeryUmístěním kurzoru nad každý prvek získáte přístup k jeho možnostem, zejména k tlačítku, které umožňuje:

  • stěhovat živel
  • modifikátor živel
  • duplikát živel
  • supprimer živel

Možnosti-the-elementy

2 - Jak přidat prvky

Máte možnost přizpůsobit každý sloupec elementům navrženým „ Vizuální Hudební Skladatel ". Chcete-li přidat položku, klikněte na tlačítko "+" na konkrétním sloupci nebo na tlačítku "+" Hlavní menu plugin.

přidat prvek wpbakery
Když je sloupec prázdný (ne obsahuje žádný obsah)ona má tlačítko "+" uvnitř.
 Chcete-li například přidat video, klikněte na toto tlačítko a vyberte prvek videa.

doplněk s-video

Kliknutím na něj se otevře nové okno. V tomto okně musíte uvést název, odkaz na video a další třídu (což není povinné). Po dokončení zadávání různých informací o videu nezapomeňte změny uložit.

úprava videa wpbakeryVaše video bude k dispozici v editoru back office. Uložte změny ještě jednou. Nyní jej můžete zobrazit pouhým kliknutím " náhled ".

přidat video wpbakery wordpressProces přidání položky je pro všechny ostatní stejný, až na několik výjimek. Informace, které mají být vyplněny, se mohou lišit v závislosti na prvcích. 

Když vyberete například textový prvek, najdete klasický vizuální editor (ten, který je k dispozici při psaní článků nebo stránek), ale také možnost, která umožňuje přidat animaci během zobrazení prvku. Druhá z nich proto může blednout z jedné polohy do druhé, v závislosti na vašem nastavení.

nastavení textového blokuNejzajímavější s tím plugin, je to, že budete moci vytvořit postranní pokud vaše téma například nefunguje. Chcete-li to provést, klikněte na tlačítko Přidat (" + "), a vyberte prvek " Komentáře WP nedávný "" facebook jako A konečně « Kategorie Wp ".

Nyní vytvořte tuto vlastní šablonu sloupců 1 / 3 + 2 / 3 »Nebo jakýkoli jiný a přidejte prvek sidebar v levém sloupci nebo v pravém. Nezáleží na tom, protože vše závisí na tom, jak široký chcete, aby váš postranní panel vytvořený v rámci tohoto rozšíření rozložení byl ve Visual Composeru.

konfigurace sloupce wpbakery

Na pravé straně si všimnete nového prázdného sloupce a přidáte nový prvek podle vašeho výběru (Doporučuji přidat jednoduchý text). Nyní stránku uložte a v náhledu zobrazte výsledek tohoto cvičení.

3 - Jak uložit a znovu použít šablonu stránky

Je možné uložit šablonu vaší stránky a použít ji později. Líbí se mi tato možnost, protože vám ušetří hodiny strávené pokusem o kopírování šablony ze stránky. Zde se vše provádí jedním kliknutím. Ano, slyšeli jste správně, JEDINÝM KLIKNUTÍM ... nebo ve dvou 🙂

Chcete-li uložit šablonu, klikněte na ikonu šablony. V okně, které se objeví, zadejte název svého modelu do pole „ Uložte aktuální rozvržení jako šablonu », Pak klikněte na« Uložit šablonu ".

důležité: Musíte to udělat na stránce, kterou chcete uložit jako šablonu, a nikoli na prázdné stránce.

zaregistrujte model wpbakery

Je to stejným způsobem, že najdete různé modely, které jste uložili, dále dolů ve stejném okně v sekci "Načíst model".

moje modely wpbakeryV tomto případě musíte pouze vytvořit novou stránku, poté přejít na šablony a vybrat tu, které chcete své stránce přiřadit.

S editorem front-office

Výhodou je editor front office de vám umožní upravit vaši stránku v reálném čase. Jinými slovy vám umožní zjistit, jak bude vypadat každá změna provedená na vašem webu pomocí Visual Composeru. Výhodou tohoto přístupu je, že nemusíte pracovat naslepo jako v editoru stránek back-office.

Z jedné možnosti na druhou můžete kdykoli přejít (Office back office nebo hrana).

Editor front-office se neliší od editoru back-office v tom, že existuje lišta utilisateur stejné, ale také všechny možnosti editoru back office jsou stejné jako v editoru front office.

wpbakery toolbarBylo však přidáno pět nových tlačítek, mezi něž patří:

  • Aktivace nebo deaktivace průvodců
  • Emulátor, který vám umožní vidět, jak bude váš blog vypadat na různých zařízeních
  • Tlačítko zpět do back-office
  • Tlačítko Uložit změny
  • Tlačítko exit vizuální komponovat

wpbakery možnostiKaždý prvek stránky lze upravit, možnosti, které jsou k dispozici, zobrazíte umístěním kurzoru nad každý prvek. Tvar tlačítka "HRÁT SI", vám umožní zobrazit více možností pro prvek.

Možnosti-the-elementy-of-the-front office

Vaše první kroky mohou být obtížné, ale s praxí dosáhnete domovská stránka takhle.  Pokud budete chtít, než se dostanete pluginMůžete vyzkoušejte to zdarma (login, user: demo, heslo: demo).

Tady je to, čeho jsem byl schopen dosáhnout za 1 minutu doma. S praxí můžete dosáhnout velmi, velmi uspokojivých výsledků. A pokud potřebujete pomoci s vytvořením vašeho webu WordPress pomocí tohoto výkonného pluginu, pak neváhejte kontaktujte tým BlogPasCherkdo bude rád realizovat vaše projekty.

Doufám, že vám tento výukový program ve francouzštině pomůže udělat první kroky s programem plugin « Vizuální skladatel ". Pokud máte nějaký problém, my (nebo pomoc) rádi vám pomůžeme. Nezapomeň: krásné webové stránky převádí více zvědavých zákazníků.

Doporučená rozšíření

Zde je několik vizuálních skladatelů rozšíření, které doporučujeme:

Objevte další pluginy Codecanyon

Sdílet tento výukový program s těmi v nouzi.