WordPress er et meget populært CMS rundt om i verden på grund af sin enkle grænseflade, meget tilpasselige temaer og et uendeligt udvalg af Plugins kraftfuld. Det har forenklet oprettelse, udvikling og styring af websteder, selv for de mest amatørbrugere.

I dag og takket være WordPress behøver du ikke længere have specifik viden for at skabe attraktive websider. Dog er du det peut være allerede snublet over et websted, der tilbyder et virkelig utroligt design, og du har sikkert undret dig: Hvordan blev det gjort?

Desværre, hvis du er amatør eller begynder, kan du ikke gøre meget, selv med WordPress, for at ændre dit tema har du brug for en vis grad af ekspertise inden for HTML, CSS, PHP og flere andre færdigheder afhængigt af arten af ​​dit tema, men også dit projekt eller mål.

Selvom du er en erfaren koder, har du bestemt brug for et værktøj, der giver dig mulighed for at spare tid og kvalitet på slutresultatet.

Heldigvis plugin WordPress « WPBakery Page Builder Tidligere kendt som " Visual Composer » giver en løsning på dette problem. Med sidstnævnte, selv de fleste begynderbloggere kan lave sider med et helt unikt look til deres hjemmeside.

Med dette plugin kan du oprette:

  • Attraktive destinationssider (destinationsside)
  • Fra salgssider til professionelt udseende
  • "Fremvis" websteder til din virksomhed
  • moduler sider til din træning
  • kort tid

Det er efter min mening det bedste formateringsværktøj (eller layout) på internettet. Især for WordPress-brugere.

I denne tutorial vil jeg derfor vise dig, hvordan du giver et unikt udseende til dit websted (eller blog) med plugin Visual Composer.

Så ...

Sådan installeres og konfigureres WPBakery Page Builder-plugin

WPBakery Page Builder er et plugin præmie, som du kan købe på Codecanyon : Den bedste salgsplatform på internettet plugins.

OKAY. Når du har købt og downloadet dette layout-plugin på WordPress, skal du bare installere det og aktivere det.

Derefter begynder vi med at foretage nogle grundlæggende justeringer. For at gøre dette skal du navigere til placeringen "Indstillinger >> Visual Composer » på instrumentbrættet.

generelle indstillinger

generelle indstillinger visuel komponistDen første fane (generelle indstillinger), Gør det muligt at ændre:

  • Indholdet på hvilken visuel komponere vil være tilgængelig. Du kan tjekke varerne (indlæg) og / eller sider (side)
  • De forskellige regler foradgang forskellige roller. Med denne mulighed kan du bestemme der ændrer hvad. De forskellige tilgængelige roller vises. Du bliver nødt til at klikke på hver enkelt for at kontrollere de elementer, som den er anbragt til (rollen) vil have adgang. Du har mulighed for at forbyde brugen af ​​" visuel komponist ”til brugere af en bestemt rolle.
    aktiver redaktøren på WPbakery sidebygger
  • Aktivér eller deaktiver elementer lydhør
  • Definer delmængder til Google-skrifttyper

valg af wpbakery-rollerDesign Options

På designmulighederne har du muligheden for at ændre det standardvisuelle udseende af de forskellige elementer i " visuel komponere '. Før du bruger det, skal du sørge for at have markeret indstillingen « Brug tilpassede designindstillinger ».

css indstillinger

Disse muligheder giver dig mulighed for at definere den farve, der gælder for alle elementerne. 

  • Det " Tilpasset CSS »Giver dig muligheden for yderligere at tilpasse hvert element, kun udviklere kan vide, hvad det er.
  • Fanen « Product License »Giver dig mulighed for at aktivere din plugin for at modtage automatiske opdateringer.
  • Fanen « kortkoder aktiver Handler hovedsageligt om udviklere.

Okay, nu skal vi oprette en brugerdefineret webside med Visuel komponist.

Sådan opretter du en brugerdefineret side med visuel komponere

For nemt at oprette personlige websider har du valget mellem redaktøren for " back office ", Dvs. du ændrer webstedet fra dit WordPress-dashboard, hvor det af" front office '.

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

Hvis du bruger Gutenberg, vil du bemærke en "Page Editor" -knap i øverste proceslinje.

redaktør visuel komponist instrumentbræt redaktør Gutenberg

Fordelen med redaktøren af Front office er, at du kan redigere dine sider live og se, hvordan de forskellige elementer vises på dit tema.

Med back office-redaktøren

For at få adgang til redaktøren for " back office », Jeg inviterer dig til at klikke på« Publisher BACK-OFFICE '. Du kan når som helst vende tilbage til WordPress visuelle editor ved at klikke på " Classic-tilstand ". Men jeg tror, ​​det ikke vil være nødvendigt, så formateringen af ​​denne plugins webside er færdig.

Når du er i Back-office-editoren, kan du vælge et globalt layout, der gælder for siden.

Opdateringerne side varierer alt efter hvad du planlægger at gøre med siden. Så du kan vælge « landing side » at oprette en startside, "Liste over tjenester" for en side, der viser tjenester osv. Med erfaring vil du endda være i stand til at oprette væddemål en sider specialdesignet meget pro.

Uanset valg af din indstilling side, præsentationen af ​​elementerne svarer til alle sidstnævnte. Du kan tilføje en ny element en cliquant sur "+" øverst på meta boks « Visual Editor », Eller tilføj en model ved at klikke på ikonet "Skabelon".

På hver linje kan du (fra venstre mod højre) :

  • Flyt linjen
  • Administrer kolonner i rækken
  • Tilføj en ny kolonne

wpbakery side builder interfaceAndre muligheder er tilgængelige til højre for kassen. Disse muligheder giver dig mulighed for (fra venstre mod højre) Til:

  • mindsk linjen
  • rediger en række
  • duplikere en række
  • slette en række

wpbackery-layoutI midten af ​​hver kolonne kan du tilføje et element før, redigere en kolonne eller slette det.

indstillinger for wpbackery-sektionindstillinger for wpbackery-sektion

Anbefalede ressourcer

Her er nogle udvidelser visuelle komponister, som vi stærkt anbefaler:

1 - Sådan styres kolonnerne

På kolonnehåndteringsfanen kan du vælge det antal kolonner, du vil føje til rækken. For at forstå de forskellige søjlemodeller skal du vide, at hver brøk svarer til den bredde, som søjlen vil optage. Så meget som en skabelon har brøker, så mange gange vil siden have kolonner.

Naturligvis er 11 forskellige kolonneskabeloner tilgængelige, men du kan oprette så mange du vil ved at klikke på linket "Custom" lige under listen over kolonner.

For at få vist et afsnit på siden med 2-kolonner med lige store bredder, skal du for eksempel vælge (Eller tilføje) "1 / 2 + 1 / 2". 

Kolonnerne vises på din blog, og deres bredder vil blive fordelt proportionalt med dimensioner af temaet. En kolonne kan indeholde så mange elementer som muligt, så du har ingen begrænsninger på dette niveau.

wpbageri-sektionslayout

De forskellige elementer kan flyttes til alle kolonner.

flytte wordpress tekstboks wpbakeryVed at holde musepekeren over hvert element vil du kunne få adgang til dets muligheder, især knappen, der gør det muligt at:

  • flytte element
  • modifier element
  • dupliquer element
  • supprimer element

optioner-the-elementer

2 - Sådan tilføjes elementer

Du har mulighed for at tilpasse hver kolonne med de elementer, der er foreslået af " Visuel Komponere '. For at tilføje en vare skal du klikke på knappen "+" på en bestemt kolonne eller på knappen "+" Hovedmenu plugin.

tilføj et wpbakery-element
Når en kolonne er tom (ne indeholder intet indhold)hun har en knap "+" inde.
 For at tilføje en video, f.eks. Skal du klikke på denne knap og vælge videoelementet.

add-en-video

Hvis du klikker på det, åbnes et nyt vindue. I dette vindue skal du angive titlen, linket til videoen og en ekstra klasse (hvilket ikke er obligatorisk). Når du er færdig med at indtaste de forskellige oplysninger om din video, skal du ikke glemme at gemme dine ændringer.

wpbakery videotuningDin video vil være tilgængelig på backoffice-editoren. Gem dine ændringer igen. Du kan nu se det ved blot at klikke på "forhåndsvisning".

tilføj video wpbakery wordpressProcessen for at tilføje et element er den samme for alle andre, med et par undtagelser. Oplysninger, der skal udfyldes, kan variere afhængigt af elementerne. 

Ved at vælge tekstelementet for eksempel finder du en klassisk visuel editor (den, der er tilgængelig, når du skriver artikler eller sider), men også en mulighed, der giver dig mulighed for at tilføje en animation under visningen af ​​elementet. Sidstnævnte kan derfor falme fra en position til en anden, afhængigt af dine indstillinger.

tekstblokindstillingerDet mest interessante med dette plugin, er, at du vil være i stand til at oprette sidebars hvis dit tema ikke gør det, for eksempel. For at gøre dette skal du klikke på knappen Tilføj (" + "), og vælg elementet " WP Kommentarer Seneste "" Facebook ligesom Og endelig « Wp kategorier '.

Opret nu denne brugerdefinerede kolonneskabelon 1 / 3 + 2 / 3 »Eller enhver anden, og tilføj elementet sidebar i venstre kolonne eller til højre. Det betyder ikke noget, fordi det hele afhænger af, hvor bredt du vil have din sidebjælke oprettet under denne layoutudvidelse som i Visual Composer.

wpbakery kolonner konfiguration

Du vil se en ny tom kolonne til højre, tilføje et nyt element efter eget valg (Jeg anbefaler, at du tilføjer en simpel tekst). Gem nu siden og gå til eksemplet for at se resultatet af denne øvelse.

3 - Sådan gemmes og genbruges en sideskabelon

Det er muligt at gemme skabelonen på din side og bruge den senere. Jeg elsker denne mulighed, fordi det sparer dig for at bruge timer på at prøve at kopiere en skabelon fra en side. Her gøres alt med et enkelt klik. Ja, du hørte rigtigt, I ET KLIK ... eller i to 🙂

Klik på skabelonikonet for at gemme en skabelon. I vinduet, der vises, skal du indtaste navnet på din model i " Gem det aktuelle layout som en skabelon », Klik derefter på« Gem skabelon '.

Vigtig: Du skal gøre dette på den side, du vil gemme som en skabelon, og ikke på en tom side.

registrere et model wpbakery

Dette er på samme måde, som du finder de forskellige modeller, du har gemt, længere nede i samme vindue i sektionen "Indlæs en model".

mine modeller wpbakeryAlt hvad du skal gøre i dette tilfælde er at oprette en ny side, derefter gå til skabeloner og vælge den, du vil give din side.

Med front-office editor

Front office-redaktøren har fordelen de giver dig mulighed for at redigere din side i realtid. Med andre ord kan du se, hvordan hver ændring, du foretager på dit websted, vil se ud ved hjælp af Visual Composer. Fordelen med denne tilgang er, at du ikke behøver at arbejde blindt som du gør med back-office side editor.

Du kan til enhver tid skifte fra en mulighed til en anden (back office eller front office).

Front-office-editoren adskiller sig ikke så meget fra back-office-editoren, da der er en bjælke utilisateur identiske, men også alle mulighederne for backoffice-editoren er de samme som i frontoffice-editoren.

wpbakery værktøjslinjeDer er dog tilføjet fem nye knapper, herunder:

  • Aktivering eller deaktivering af guider
  • Emulatoren, som giver dig mulighed for at se, hvordan din blog vil se ud på forskellige enheder
  • Bagsiden knap til back office
  • Knappen Gem ændringer
  • Knappen exit visuel komponere

wpbakery-indstillingerHvert element på en side kan ændres, du vil kunne se de tilgængelige muligheder ved at svæve over hvert element. Knappen er formet "SPIL", giver dig mulighed for at få vist flere muligheder for et element.

optioner-the-elementer-of-the-front office

Dine første trin kan være vanskelige, men med praksis vil du opnå en hjemmeside som denne.  Hvis du ønsker det, før du får den pluginDu kan test det gratis (login, bruger: demo, password: demo).

Her er hvad jeg var i stand til at opnå på 1 minut derhjemme. Med praksis kan du opnå meget tilfredsstillende resultater. Og hvis du har brug for hjælp til at opbygge dit WordPress-websted med dette kraftfulde plugin, er du velkommen til kontakt BlogPasCher-teametder er glad for at realisere dine projekter.

Jeg håber, at denne tutorial helt på fransk hjælper dig med at tage dine første skridt med plugin « Visual Composer '. Hvis du har et problem, vi (eller hjælp) vil gerne hjælpe dig. Glem ikke: en smuk webside konverterer mere nysgerrige kunder.

Anbefalede udvidelser

Her er nogle udvidelser visuelle komponister, som vi stærkt anbefaler:

Oplev flere plugins til Codecanyon

Del denne tutorial med dem i nød.