WordPress is een veelgebruikt CMS over de hele wereld vanwege de eenvoudige interface, zeer aanpasbare thema's en eindeloze variëteit aan plugins krachtig. Het heeft het maken, ontwikkelen en beheren van websites vereenvoudigd, zelfs voor de meeste amateurgebruikers.

Tegenwoordig, en dankzij WordPress, hoeft u geen specifieke kennis meer te hebben om aantrekkelijke webpagina's te maken. Maar dat ben je wel peut être kwam al een website tegen die een werkelijk ongelooflijk ontwerp biedt, en je hebt je waarschijnlijk afgevraagd: Hoe was het gedaan?

Helaas, als je een amateur of een beginner bent, kun je niet veel doen, zelfs niet met WordPress, aangezien u om uw thema aan te passen een zekere mate van expertise in HTML, CSS, PHP en verschillende andere vaardigheden nodig heeft, afhankelijk van de aard van uw thema, maar ook van uw project of doelstelling.

Maar zelfs als u een ervaren coder bent, heeft u zeker een tool nodig waarmee u tijd en kwaliteit kunt besparen op het eindresultaat.

Heureusement, le inpluggen WordPress « WPBakery Page Builder Voorheen bekend als ' Visual Composer » biedt een oplossing voor dit probleem. Met de laatste, zelfs de meeste beginnende bloggers kunnen pagina's maken met een volledig unieke look voor hun website.

Met deze plug-in kunt u het volgende maken:

  • Aantrekkelijke bestemmingspagina's (bestemmingspagina)
  • Van verkooppagina's tot professionele uitstraling
  • 'Showcase'-sites voor uw bedrijf
  • modules pagina's voor uw training
  • korte tijd

Het is naar mijn mening de beste opmaak- (of lay-out) tool op internet. Vooral voor WordPress-gebruikers.

Daarom zal ik je in deze tutorial laten zien hoe je je website een unieke uitstraling kunt geven (Of blog) met de inpluggen Visual Composer.

Dus…

Hoe te installeren en configureren Plug-in WPBakery Page Builder

WPBakery Page Builder een inpluggen premium die u kunt kopen Codecanyon : De beste verkoop-platform op het internet plugins.

OKE. Nadat u deze lay-outplug-in op WordPress heeft gekocht en gedownload, hoeft u deze alleen maar te installeren en te activeren.

Daarna beginnen we met enkele basisaanpassingen. Navigeer hiervoor naar de locatie "Instellingen >> Visual Composer » op je dashboard.

algemene instellingen

algemene instellingen visuele componistHet eerste tabblad (algemene instellingen), Hiermee kunt u wijzigen:

  • De inhoud van die visuele opstellen zal beschikbaar zijn. U kunt de items controleren (post) en / of pagina's (pagina)
  • De verschillende regels vantoegang verschillende rollen. Met deze optie kunt u bepalen dat verandert wat. De verschillende beschikbare rollen worden weergegeven. U moet op elk klikken om de elementen te controleren waarnaar het verwijst (de rol) zal toegang hebben. U heeft de mogelijkheid om het gebruik van " visuele componist ”voor gebruikers van een specifieke rol.
    activeer de editor op de WPbakery-paginabuilder
  • Items in- of uitschakelen responsive
  • Definieer subsets voor Google-lettertypen

selectie van wpbakery-rollenDesign opties

Bij de ontwerpopties heeft u de mogelijkheid om het standaard uiterlijk van de verschillende elementen van de " visuele componist . Zorg ervoor dat u de optie heeft aangevinkt voordat u het gebruikt « Gebruik aangepaste ontwerpopties ».

CSS-instellingen

Met deze opties kunt u de kleur definiëren die van toepassing is op alle elementen. 

  • De " Aangepaste CSS »Geeft u de mogelijkheid om elk item verder aan te passen, alleen ontwikkelaars kunnen weten wat het is.
  • Het tabblad « product License »Hiermee kunt u uw inpluggen om automatische updates te ontvangen.
  • Het tabblad « shortcodes activa Gaat hoofdzakelijk over ontwikkelaars.

Oké, nu gaan we een aangepaste webpagina maken met Visuele componist.

Een aangepaste pagina maken met visuele componist

Om eenvoudig gepersonaliseerde webpagina's te maken, heeft u de keuze tussen de editor van de " backoffice ", Dat wil zeggen dat je de site aanpast vanuit je WordPress-dashboard, waar dat van" front office .

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

Als je Gutenberg gebruikt, zul je een "Page Editor" knop in de taakbalk bovenaan zien.

editor visuele componist dashboard-editor gutenberg

Het voordeel bij de redacteur van Front office is dat je je pagina's live kunt bewerken en kunt zien hoe de verschillende elementen in je thema verschijnen.

Met de backoffice-editor

Om toegang te krijgen tot de editor van de " backoffice », Ik nodig u uit om op« te klikken uitgever BACK-OFFICE . U kunt op elk gewenst moment terugkeren naar de visuele editor van WordPress door op " Classic-modus ". Maar ik denk dat het niet nodig zal zijn, dus deze opmaak van de plugin-webpagina is voltooid.

Eenmaal in de backoffice-editor kunt u een algemene lay-out kiezen die van toepassing is op de pagina.

De updates pagina variëren afhankelijk van wat u van plan bent te doen met de pagina. Dus je kunt kiezen « landing pagina » om een ​​startpagina te maken, "Lijst van diensten" voor een pagina waarop services worden weergegeven, enzovoort. Met ervaring lukt het je zelfs om weddenschappen te creëren en paginas op maat ontworpen zeer pro.

Ongeacht de keuze van uw instelling pagina, de presentatie van de elementen is op alle laatstgenoemde vergelijkbaar. U kunt een nieuwe toevoegen element en cliquant sur "+" helemaal bovenaan meta vak « Visual Editor », Of voeg een model toe door op het icoon te klikken "Template".

Op elke regel kunt u (van links naar rechts) :

  • Verplaats de lijn
  • Beheer kolommen in de rij
  • Voeg een nieuwe kolom

wpbakery-interface voor het maken van pagina'sAndere opties zijn beschikbaar aan de rechterkant van de doos. Met deze opties kunt u (van links naar rechts) Aan:

  • verminder de lijn
  • rij bewerken
  • een rij dupliceren
  • rij verwijderen

wpbackery-indelingIn het midden van elke kolom kunt u eerder een item toevoegen, een kolom bewerken of verwijderen.

wpbackery sectie optieswpbackery sectie opties

Aanbevolen bronnen

Hier zijn een aantal extensies visuele componist die we sterk aanbevelen:

1 - Hoe kolommen te beheren

Op het tabblad Kolommenbeheer kunt u het aantal kolommen kiezen dat u aan de rij wilt toevoegen. Om de verschillende kolommodellen te begrijpen, moet u weten dat elke breuk overeenkomt met de breedte die de kolom zal innemen. Zoveel als een sjabloon breuken bevat, zo vaak bevat de pagina kolommen.

Natuurlijk zijn er 11 verschillende kolomsjablonen beschikbaar, maar u kunt er zoveel maken als u wilt door op de link te klikken "Custom" net onder de lijst met kolommen.

Als u bijvoorbeeld een gedeelte van de pagina met 2-kolommen op gelijke breedte wilt weergeven, moet u kiezen (Of toe te voegen) "1 / 2 + 1 / 2". 

De kolommen worden weergegeven op uw blog en hun breedte wordt evenredig verdeeld over de afmetingen van het thema. Een kolom kan zoveel mogelijk items bevatten, dus u heeft geen limieten op dit niveau.

indeling wpbakery-sectie

De verschillende elementen kunnen naar elke kolom worden verplaatst.

bewegende Wordpress-tekstvak wpbakeryDoor over elk element te zweven, krijgt u toegang tot de opties, met name de knop waarmee u:

  • verplaatsen, verschuiven element
  • verandering element
  • dupliquer element
  • supprimer element

opties-the-elementen

2 - Hoe elementen toe te voegen

U kunt elke kolom aanpassen met de elementen voorgesteld door ' Visual Componist . Klik op de knop om een ​​item toe te voegen "+" op een specifieke kolom of op de knop "+" Hoofdmenu plugin.

voeg een wpbakery-element toe
Als een kolom leeg is (ne bevat geen inhoud)ze heeft een knop "+" binnen.
 Om bijvoorbeeld een video toe te voegen, klikt u op deze knop en kiest u het video-element.

add-a-video

Als u hierop klikt, wordt een nieuw venster geopend. In dit venster moet je de titel, de link naar de video en een extra klasse opgeven (wat niet verplicht is). Als u klaar bent met het invoeren van de verschillende informatie over uw video, vergeet dan niet uw wijzigingen op te slaan.

wpbakery video aanpassingUw video is beschikbaar in de backoffice-editor. Sla uw wijzigingen nogmaals op. U kunt het nu bekijken door eenvoudig te klikken "voorbeeld".

video toevoegen wpbakery wordpressHet proces voor het toevoegen van een item is voor alle andere hetzelfde, met een paar uitzonderingen. De in te vullen informatie kan variëren, afhankelijk van de elementen. 

Door bijvoorbeeld het tekstelement te selecteren, vindt u een klassieke visuele editor (degene die beschikbaar is bij het schrijven van artikelen of pagina's), maar ook een optie waarmee je een animatie kunt toevoegen tijdens de weergave van het element. Dit laatste kan daarom van de ene positie naar de andere vervagen, afhankelijk van uw instellingen.

tekstblokinstellingenHet meest interessant hierbij inpluggen, is dat je zult kunnen creëren sidebars als je thema dat niet doet, bijvoorbeeld. Om dit te doen, klikt u op de knop Toevoegen (" + »), en kies het element ' WP-opmerkingen recents "," Facebook als En ten slotte « Wp Categorieën .

Maak nu deze aangepaste kolomsjabloon 1 / 3 + 2 / 3 »Of een andere en voeg het element toe sidebar in de linkerkolom of in de rechterkolom. Het maakt niet uit, want het hangt allemaal af van hoe breed u uw zijbalk wilt maken onder deze lay-outextensie, zoals in Visual Composer.

wpbakery kolommen configuratie

Je ziet een nieuwe lege kolom aan de rechterkant, voeg een nieuw element naar keuze toe (Ik raad u aan een eenvoudige tekst toe te voegen). Sla nu de pagina op en ga naar de preview om het resultaat van deze oefening te zien.

3 - Een paginasjabloon opslaan en opnieuw gebruiken

Het is mogelijk om het sjabloon van uw pagina op te slaan en later te gebruiken. Ik ben dol op deze optie omdat het je uren bespaart om een ​​sjabloon van een pagina te kopiëren. Hier is alles met één klik gedaan. Ja, je hebt het goed gehoord, IN ÉÉN KLIK… of in twee 🙂

Om een ​​sjabloon op te slaan, klikt u op het sjablonenpictogram. Voer in het venster dat verschijnt de naam van uw model in de " Sla de huidige lay-out op als een sjabloon », Klik vervolgens op« Sjabloon opslaan .

Belangrijk: U moet dit doen op de pagina die u als sjabloon wilt opslaan en niet op een lege pagina.

registreer een model wpbakery

Op dezelfde manier vindt u de verschillende modellen die u hebt opgeslagen, verderop in hetzelfde venster in de sectie "Een model laden".

mijn wpbakery-modellenHet enige dat u in dit geval hoeft te doen, is een nieuwe pagina maken, vervolgens naar sjablonen gaan en degene kiezen die u uw pagina wilt geven.

Met de frontoffice-editor

De frontoffice-editor heeft het voordeel de kunt u uw pagina in realtime bewerken. Met andere woorden, het laat u zien hoe elke wijziging die u op uw site aanbrengt eruit zal zien met Visual Composer. Het voordeel van deze aanpak is dat u niet blindelings hoeft te werken zoals met de backoffice-pagina-editor.

U kunt op elk moment van de ene optie naar de andere overschakelen (Office back office of rand).

De frontoffice-editor verschilt niet zo veel van de back-office-editor, omdat er een bar is utilisateur identiek, maar ook alle opties van de backoffice-editor zijn hetzelfde als die van de frontoffice-editor.

wpbakery werkbalkEr zijn echter vijf nieuwe knoppen toegevoegd, waaronder:

  • Activering of deactivering van gidsen
  • De emulator, waarmee je kunt zien hoe je blog eruit komt te zien op verschillende apparaten
  • De back-knop om de back office
  • De knop Wijzigingen opslaan
  • De exit-knop visuele componist

wpbakery-optiesElk element van een pagina kan worden gewijzigd, u kunt de beschikbare opties zien door over elk element te bewegen. De knop is gevormd "SPEEL", kunt u meer opties voor een element weergeven.

Opties-de-elementen-of-the-front office

Je eerste stappen zijn misschien moeilijk, maar met oefening bereik je een startpagina als deze.  Als je wilt, voordat je de inpluggen, U kunt test het gratis (login, user: demo, wachtwoord: demo).

Dit is wat ik thuis in 1 minuut heb kunnen bereiken. Met oefening kunt u zeer bevredigende resultaten behalen. En als je hulp nodig hebt bij het bouwen van je WordPress-website met deze krachtige plug-in, voel je dan vrij om neem contact op met het BlogPasCher-teamdie blij zijn om uw projecten te realiseren.

Ik hoop dat deze tutorial, volledig in het Frans, je zal helpen je eerste stappen te zetten met het inpluggen « Visual Composer . Als je een probleem hebt, wij (of hulp) helpen u graag verder. Niet vergeten: een mooie webpagina converteert nieuwsgieriger klanten.

Aanbevolen extensies

Hier zijn een aantal extensies visuele componist die we sterk aanbevelen:

Ontdek meer plug-ins op Codecanyon

Deel deze tutorial met mensen in nood.