WordPress är ett allmänt använt CMS runt om i världen på grund av dess enkla gränssnitt, mycket anpassningsbara teman och oändlig mängd insticksmoduler kraftfull. Det har förenklat skapandet, utvecklingen och hanteringen av webbplatser, även för de mest amatöranvändare.

Idag och tack vare WordPress behöver du inte längre ha specifik kunskap för att skapa attraktiva webbsidor. Men du är det peut vara redan snubblat över en webbplats som erbjuder en verkligt otrolig design, och du har förmodligen undrat: Hur var det gjort?

Tyvärr, om du är en amatör eller nybörjare, kan du inte göra mycket, inte ens med Wordpress, eftersom du behöver ändra en viss expertis inom HTML, CSS, PHP och flera andra färdigheter beroende på temat, men också ditt projekt eller mål.

Men även om du är en erfaren kodare behöver du verkligen ett verktyg som sparar tid och kvalitet på slutresultatet.

Lyckligtvis, den plugin WordPress « WPBakery Page Builder Tidigare känd som " Visual Composer » ger en lösning på detta problem. Med det senare, även de flesta nybörjare bloggare kan skapa sidor med ett helt unikt utseende för sin hemsida.

Med detta plugin kan du skapa:

  • Attraktiva målsidor (målsida)
  • Från försäljningssidor till professionellt utseende
  • "Visa" webbplatser för ditt företag
  • moduler sidor för din träning
  • kort stund

Det är enligt min mening det bästa formateringsverktyget (eller layouten) på internet. Speciellt för WordPress-användare.

I denna handledning kommer jag därför att visa dig hur du ger en unik look på din webbplats (eller blogg) med plugin Visual Composer.

Så ...

Hur man installerar och konfigurera WPBakery Page Builder-plugin

WPBakery Page Builder är en plugin premie som du kan köpa på Codecanyon : Det bästa försäljning plattform på internet plugins.

OKEJ. När du väl har köpt och laddat ner detta layout-plugin på WordPress är allt du behöver göra att installera det och aktivera det.

Sedan börjar vi med att göra några grundläggande justeringar. För att göra detta, navigera till platsen "Inställningar >> Visual Composer » på instrumentbrädan.

Allmänna inställningar

allmänna inställningar visuell kompositörDen första fliken (allmänna inställningar), Kan du ändra:

  • Innehållet på vilken visuell komponera kommer att finnas tillgänglig. Du kan kontrollera objekten (inlägg) och / eller sidor (sida)
  • De olika reglerna förtillgång olika roller. Med det här alternativet kan du bestämma att förändringar vad. De olika tillgängliga rollerna visas. Du måste klicka på var och en för att kontrollera vilka element den har (rollen) kommer att ha tillgång. Du har möjlighet att förbjuda användningen av " visuell kompositör ”till användare av en specifik roll.
    aktivera redigeraren på WPbakery sidbyggare
  • Aktivera eller inaktivera objekt mottaglig
  • Definiera delmängder för Google-teckensnitt

urval av wpbakery-rollerDesign Alternativ

På designalternativen har du möjlighet att ändra det visuella standardutseendet för de olika elementen i " visuell komponera ". Innan du använder den, se till att du har markerat alternativet « Använd anpassade designalternativ ».

css-inställningar

Med dessa alternativ kan du definiera den färg som gäller för alla element. 

  • " Anpassad CSS »Ger dig möjlighet att ytterligare anpassa varje objekt, bara utvecklare kan veta vad det är.
  • Fliken « produkt~~POS=TRUNC License »Låter dig aktivera din plugin för att få automatiska uppdateringar.
  • Fliken « kortkoder aktiv Handlar i huvudsak om utvecklare.

Okej, nu ska vi skapa en anpassad webbsida med Visuell kompositör.

Hur man skapar en anpassad sida med visuell komponera

För att enkelt skapa personliga webbsidor har du valet mellan redaktören för " back-office ", Det vill säga att du ändrar webbplatsen från din WordPress-instrumentpanel, där den av" front office ".

redaktör-the-front-end-the-editor-backend

Om du använder Gutenberg kommer du att märka en "Page Editor" -knapp i det övre aktivitetsfältet.

visuell redaktör instrumentpanel redaktör Gutenberg

Fördelen med redaktören av Front office är att du kan redigera dina sidor live och se hur de olika elementen visas i ditt tema.

Med backoffice-redaktören

För att komma åt redaktören för " back-office », Jag inbjuder dig att klicka på« utgivare Back-office ". Du kan när som helst återvända till WordPress-visuella redaktör genom att klicka på " Classic-läget ". Men jag tror att det inte kommer att behövas, så den här formaten för plugin-webbsidan är klar.

En gång i Backoffice-redigeraren kan du välja en global layout som ska gälla för sidan.

Uppdateringarna sida variera beroende på vad du planerar att göra med sidan. Så du kan välja « landning sida » att skapa en hemsida, "Lista över tjänster" för en sida som visar tjänster osv. Med erfarenhet kan du till och med skapa spel en sidor skräddarsydd mycket pro.

Oavsett valet av din inställning sida, presentationen av elementen liknar alla de senare. Du kan lägga till en ny elementet klicka på "+" längst upp i meta ruta « Visual Editor »Eller lägg till en modell genom att klicka på ikonen "Template".

På varje linje kan du (från vänster till höger) :

  • Flytta linjen
  • Hantera kolumner i raden
  • Lägg till en ny kolumn

wpbakery sida byggare gränssnittAndra alternativ finns till höger om rutan. Dessa alternativ tillåter dig att (från vänster till höger) Till:

  • minska linjen
  • redigera en rad
  • duplicera en rad
  • radera en rad

wpbackery-layoutI mitten av varje kolumn kan du lägga till ett objekt innan, redigera en kolumn eller radera det.

alternativ för wpbackery-avsnittalternativ för wpbackery-avsnitt

Rekommenderade resurser

Här är några extensions visuell kompositör som vi rekommenderar:

1 - Hur man hanterar kolumner

På fliken kolumnhantering kan du välja antalet kolumner du vill lägga till i raden. För att förstå de olika kolumnmodellerna, vet att varje bråk motsvarar den bredd som kolumnen kommer att uppta. Så mycket som en mall har bråk, så många gånger kommer sidan att ha kolumner.

Naturligtvis finns 11 olika kolumnmallar tillgängliga, men du kan skapa så många du vill genom att klicka på länken "Custom" precis under listan med kolumner.

Om du till exempel vill visa ett avsnitt på sidan med 2-kolumner med samma bredd måste du välja (Eller lägg) "1 / 2 + 1 / 2". 

Kolumnerna kommer att visas på din blogg och deras bredder kommer att fördelas proportionellt mot tematets dimensioner. En kolumn kan innehålla så många objekt som möjligt, så det finns ingen gräns för denna nivå.

layout wpbakery avsnittet

De olika elementen kan flyttas till valfria kolumner.

flytta wordpress textbox wpbakeryGenom att sväva över varje element kommer du att kunna komma åt dess alternativ, i synnerhet knappen som gör det möjligt att:

  • flyttning element
  • modifierare element
  • duplicera element
  • Supprimer element

Alternativ-de-elementen

2 - Hur man lägger till element

Du har möjlighet att anpassa varje kolumn med de element som föreslås av " Visuell Samman ". För att lägga till ett objekt, klicka på knappen "+" i en specifik kolumn eller på knappen "+" Huvudmenyn plugin.

lägg till ett wpbakery-element
När en kolumn är tom (ne innehåller inget innehåll)hon har en knapp "+" inuti.
 För att lägga till en video till exempel, klicka på den här knappen och välj videoelementet.

add-a-video

Om du klickar på det öppnas ett nytt fönster. I det här fönstret måste du ange titeln, länken till videon och en ytterligare klass (vilket inte är obligatoriskt). Glöm inte att spara dina ändringar när du är klar med att ange olika uppgifter om din video.

wpbakery videojusteringDin video kommer att finnas tillgänglig på backoffice-redigeraren. Spara ändringarna en gång till. Du kan nu se det genom att helt enkelt klicka på "förhandsvisning".

lägg till video wpbakery wordpressProcessen för att lägga till ett objekt är detsamma för alla andra, med några få undantag. Informationen som ska fyllas i kan variera beroende på elementen. 

Genom att till exempel välja textelement hittar du en klassisk visuell redigerare (den som är tillgänglig när du skriver artiklar eller sidor), men också ett alternativ som låter dig lägga till en animation under visningen av elementet. Det senare kan därför blekna från en position till en annan, beroende på dina inställningar.

textblockinställningarDet mest intressanta med det här plugin, är att du kommer att kunna skapa sidofält om ditt tema inte gör det, till exempel. Klicka på knappen Lägg till för att göra detta (" + »)och välj elementet " WP Kommentarer Sentida "" Facebook tycka om Och slutligen « Wp-kategorier ".

Skapa nu den anpassade kolumnmallen 1 / 3 + 2 / 3 »Eller någon annan och lägg till elementet sidebar till vänster eller till höger. Det spelar ingen roll eftersom det beror på hur brett du vill att din sidofält ska skapas under denna layouttillägg som i Visual Composer.

wpbakery kolumnkonfiguration

Du kommer att märka en ny tom kolumn till höger, lägga till ett nytt valfritt element (Jag rekommenderar att du lägger till en enkel text). Spara nu sidan och gå till förhandsgranskningen för att se resultatet av den här övningen.

3 - Hur man sparar och återanvänder en sidmall

Det är möjligt att spara mallen på din sida och använda den senare. Jag älskar det här alternativet eftersom det sparar dig att spendera timmar på att försöka kopiera en mall från en sida. Här görs allt med ett klick. Ja du hörde rätt, med ett klick ... eller i två 🙂

Klicka på mallikonen för att spara en mall. Ange namnet på din modell i fönstret som kommer att visas i " Spara den aktuella layouten som en mall », Klicka sedan på« Spara mall ".

Viktigt: Du måste göra detta på den sida du vill spara som mall och inte på en tom sida.

registrera en modell wpbakery

Det är på samma sätt som du hittar de olika modellerna som du sparat längre ner i samma fönster i avsnittet "Ladda en modell".

mina modeller wpbakeryAllt du behöver göra i det här fallet är att skapa en ny sida, sedan gå till mallar och välja den du vill ge din sida.

Med front-office redaktör

Front office-redaktören har fördelen de låter dig redigera din sida i realtid. Med andra ord kan du se hur varje förändring du gör på din webbplats kommer att se ut med Visual Composer. Fördelen med detta tillvägagångssätt är att du inte behöver arbeta blint som du gör med backoffice-sidredigeraren.

Du kan byta från ett alternativ till ett annat när som helst (back office eller front office).

Front-office-redaktören skiljer sig inte så mycket från back-office-redaktören, eftersom det finns en stapel utilisateur identiska, men alla alternativ för backoffice-redaktören är desamma som i frontoffice-redigeraren.

wpbakery verktygsfältMen fem nya knappar har lagts till, dessa inkluderar:

  • Aktivering eller avaktivering av guider
  • Emulatorn, som låter dig se hur din blogg kommer att se ut på olika enheter
  • Baksidan knappen till back office
  • Knappen Spara ändringar
  • Utgången knappen visuell komponera

wpbakery-alternativVarje element på en sida kan modifieras, du kommer att kunna se de tillgängliga alternativen genom att hålla muspekaren över varje element. Knappen formad "SPELA", låter dig visa fler alternativ för ett element.

Alternativ-the-element-of-the-front office

Dina första steg kan vara svåra, men med övning kommer du att uppnå en hemsida så här.  Om du vill, innan du får plugindu kan testa det gratis (inloggning, användar: demo, lösenord: demo).

Här är vad jag lyckades uppnå på 1 minut hemma. Med övning kan du uppnå mycket tillfredsställande resultat. Och om du behöver hjälp med att bygga din WordPress-webbplats med detta kraftfulla plugin, tveka inte att kontakta BlogPasCher-teametsom kommer gärna att förverkliga dina projekt.

Jag hoppas att den här guiden helt på franska hjälper dig att ta dina första steg med plugin « Visual Composer ". Om du har problem, vi (eller hjälp) hjälper dig gärna. Glöm inte: en vacker webbsida omvandlar mer nyfikna kunder.

Rekommenderade tillägg

Här är några extensions visuell kompositör som vi rekommenderar:

Upptäck fler plugins på Codecanyon

Dela den här guiden med de behövande.