WordPress er et veldig populært CMS over hele verden på grunn av dets enkle grensesnitt, svært tilpassbare temaer og endeløs rekke plugins mektig. Det har forenklet opprettelse, utvikling og administrasjon av nettsteder, selv for de mest amatørbrukere.

I dag, og takket være WordPress, trenger du ikke lenger ha spesifikk kunnskap for å lage attraktive websider. Imidlertid er du det peut være allerede snublet over et nettsted som tilbyr en virkelig utrolig design, og du har sikkert lurt på: Hvordan ble det gjort?

Dessverre, hvis du er amatør eller nybegynner, kan du ikke gjøre mye, selv med WordPress, siden for å endre temaet ditt, trenger du en viss grad av ekspertise innen HTML, CSS, PHP og flere andre ferdigheter, avhengig av temaet, men også prosjektet eller målet ditt.

Men selv om du er en erfaren koder, trenger du absolutt et verktøy som lar deg spare tid og kvalitet på sluttresultatet.

Heldigvis plugg inn WordPress « WPBakery Page Builder Tidligere kjent som " Visual Composer » gir en løsning på dette problemet. Med sistnevnte, til og med de fleste nybegynnere bloggere kan lage sider med et helt unikt utseende for nettsiden deres.

Med denne pluginen kan du opprette:

  • Attraktive destinasjonssider (destinasjonsside)
  • Fra salgssider til profesjonelt utseende
  • "Fremvis" nettsteder for din bedrift
  • moduler sider for treningen din
  • kort stund

Det er etter min mening det beste formaterings (eller layout) verktøyet på internett. Spesielt for WordPress-brukere.

I denne opplæringen vil jeg derfor vise deg hvordan du kan gi et unikt utseende på nettstedet ditt (Eller blogg) med plugg inn Visual Composer.

Så ...

Hvordan installere og konfigurere WPBakery Page Builder-plugin

WPBakery Page Builder er en plugg inn Premium som du kan kjøpe på Codecanyon : Den beste salgsplattform på internett plugins.

GREIT. Når du har kjøpt og lastet ned denne plugin-modulen på WordPress, er alt du trenger å gjøre å installere den og aktivere den.

Så vil vi begynne med å gjøre noen grunnleggende justeringer. For å gjøre dette, naviger til stedet "Innstillinger >> Visual Composer » på dashbordet.

Generelle innstillinger

Generelle innstillinger visuell komponistDen første kategorien (generelle innstillinger), Kan du endre:

  • Innholdet på hvilken visuell komponere vil være tilgjengelig. Du kan sjekke varene (poste) og / eller sider (side)
  • De forskjellige reglene foraccès forskjellige roller. Med dette alternativet kan du bestemme som endrer det. De forskjellige tilgjengelige rollene vises. Du må klikke på hver og en for å sjekke elementene den blir brukt til (rollen) vil ha tilgang. Du har muligheten til å forby bruk av " visuell komponist ”til brukere av en bestemt rolle.
    aktiver redaktøren på WPbakery-sidebyggeren
  • Aktiver eller deaktiver elementer responsive
  • Definer undergrupper for Google-skrifter

utvalg av wpbakery-rollerDesign

På designalternativene har du muligheten til å endre standard visuelt utseende til de forskjellige elementene i " visuell komponist '. Før du bruker den, må du kontrollere at du har sjekket alternativet « Bruk tilpassede designalternativer ».

css innstillinger

Disse alternativene lar deg definere fargen som gjelder for alle elementene. 

  • " Tilpasset CSS Gir deg muligheten til å tilpasse hvert element ytterligere, bare utviklere kan vite hva det er.
  • Fanen « Product License »Lar deg aktivere din plugg inn for å motta automatiske oppdateringer.
  • Fanen « kortkoder eiendeler Handler egentlig om utviklere.

Ok, nå skal vi lage en egendefinert nettside med Visuell komponist.

Hvordan lage en tilpasset side med visuell komponist

For å enkelt lage personlige nettsider, har du valget mellom redaktøren for " back office ", Dvs. du endrer nettstedet fra WordPress-dashbordet ditt, der det til" front office '.

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

Hvis du bruker Gutenberg, vil du legge merke til en "Page Editor" -knapp på øverste oppgavelinje.

redaktør visuell komponist instrumentbord redaktør Gutenberg

Fordelen med redaktøren av Front office er at du kan redigere live sidene dine og se hvordan de forskjellige elementene vises på temaet ditt.

Med backoffice-redaktøren

For å få tilgang til redaktøren av " back office », Inviterer jeg deg til å klikke på« Publisher Back-office '. Du kan når som helst gå tilbake til WordPress visuelle redaktør ved å klikke på " Classic-modus ". Men jeg tror det ikke vil være nødvendig, så denne formateringen av plugin-websiden er fullført.

En gang i Back-office-redigereren kan du velge et globalt oppsett som vil gjelde for siden.

Oppdateringene side variere avhengig av hva du planlegger å gjøre med siden. Så du kan velge « landing side » å lage en hjemmeside, "Liste over tjenester" for en side som viser tjenester, og så videre. Med erfaring vil du til og med klare å lage spill en sider spesialdesignet veldig proff.

Uansett valg av innstilling side, presentasjonen av elementene er lik på alle de sistnevnte. Du kan legge til en ny element en cliquant sur "+" helt på toppen av meta boks « Visual Editor », Eller legg til en modell ved å klikke på ikonet "Mal".

På hver linje kan du (fra venstre til høyre) :

  • Flytt linjen
  • Administrer kolonner i rekken
  • Legg til en ny kolonne

wpbakery side builder grensesnittAndre alternativer er tilgjengelige til høyre for boksen. Disse alternativene tillater deg å (fra venstre til høyre) Til:

  • redusere linjen
  • rediger en rad
  • duplisere en rad
  • slett en rad

wpbackery-oppsettMidt i hver kolonne kan du legge til et element før, redigere en kolonne eller slette den.

alternativer for wpbackery-seksjonalternativer for wpbackery-seksjon

Anbefalte ressurser

Her er noen utvidelser visuell komponist som vi anbefaler:

1 - Hvordan administrere kolonnene

I kolonnehåndteringsfanen kan du velge antall kolonner du vil legge til i raden. For å forstå de forskjellige kolonnemodellene, vet du at hver brøk svarer til bredden som kolonnen vil oppta. Så mye som en mal har brøk, så mange ganger vil siden ha kolonner.

Selvfølgelig er 11 forskjellige kolonnemaler tilgjengelige, men du kan opprette så mange du vil ved å klikke på lenken "Custom" rett under listen over kolonner.

For å vise en del av siden med 2-kolonner i like bredder, må du for eksempel velge (Eller legg) "1 / 2 + 1 / 2". 

Kolonnene vises på bloggen din, og breddene deres blir fordelt proporsjonalt med dimensjonene til temaet. En kolonne kan inneholde så mange elementer som mulig, så det er ingen grense for dette nivået.

layout wpbakery seksjon

De forskjellige elementene kan flyttes til alle kolonner.

flytte wpbakery wordpress tekstboksVed å holde musepekeren over hvert element, vil du kunne få tilgang til alternativene, spesielt knappen som gjør det mulig å:

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

alternativer-the-elementer

2 - Slik legger du til elementer

Du har muligheten til å tilpasse hver kolonne med elementene foreslått av " Visual Komponer '. For å legge til et element, klikk på knappen "+" på en bestemt kolonne eller på knappen "+" Hovedmeny plugin.

legg til wpbakery-element
Når en kolonne er tom (ne inneholder ikke noe innhold)hun har en knapp "+" innsiden.
 For å legge til en video, for eksempel, klikk på denne knappen og velg videoelementet.

add-a-video

Hvis du klikker på den, åpnes et nytt vindu. I dette vinduet må du oppgi tittelen, lenken til videoen og en ekstra klasse (som ikke er obligatorisk). Når du er ferdig med å legge inn den forskjellige informasjonen om videoen din, ikke glem å lagre endringene.

wpbakery videostillingVideoen din vil være tilgjengelig på backoffice-redaktøren. Lagre endringene dine igjen. Du kan nå se det ved å bare klikke "forhåndsvisning".

legg til video wpbakery wordpressProsessen for å legge til en vare er den samme for alle andre, med noen få unntak. Informasjonen som skal fylles ut, kan variere avhengig av elementene. 

Ved å velge for eksempel tekstelementet, finner du en klassisk visuell editor (den som er tilgjengelig når du skriver artikler eller sider), men også et alternativ som lar deg legge til en animasjon under visningen av elementet. Sistnevnte kan derfor falme fra en posisjon til en annen, avhengig av innstillingene dine.

tekstblokkinnstillingerDet mest interessante med dette plugg inn, er at du vil være i stand til å lage sidefelt hvis temaet ditt ikke gjør det, for eksempel. For å gjøre dette, klikk på Legg til-knappen (" + "), og velg elementet " WP Kommentarer Siste "" Facebook  i likhet med Og til slutt « Wp-kategorier '.

Nå oppretter du denne tilpassede kolonnemalen 1 / 3 + 2 / 3 »Eller andre og legg til elementet sidebar i venstre kolonne eller til høyre. Det spiller ingen rolle fordi det hele avhenger av hvor bredt du vil gi sidefeltet opprettet under denne layoututvidelsen enn i Visual Composer.

wpbakery kolonner konfigurasjon

Du vil legge merke til en ny tom kolonne til høyre, legge til et nytt element du ønsker (Jeg anbefaler at du legger til en enkel tekst). Lagre siden og gå til forhåndsvisningen for å se resultatet av denne øvelsen.

3 - Hvordan lagre og gjenbruke en sidemal

Det er mulig å lagre malen på siden din og bruke den senere. Jeg elsker dette alternativet fordi det sparer deg for å bruke timer på å prøve å kopiere en mal fra en side. Her gjøres alt med ett klikk. Ja du hørte riktig, ETT KLIKK ... eller i to 🙂

For å lagre en mal, klikk på malikonet. I vinduet som vises, skriv inn navnet på modellen din i " Lagre gjeldende oppsett som en mal Klikk deretter på « Lagre mal '.

Viktig: Du må gjøre dette på siden du vil lagre som mal og ikke på en blank side.

registrere et modell wpbakery

Det er på samme måte som du finner de forskjellige modellene du lagret lenger nede i samme vindu i seksjonen "Last inn en modell".

mine wpbakery modellerAlt du trenger å gjøre i dette tilfellet er å opprette en ny side, deretter gå til maler og velge den du vil gi siden din.

Med front-office redaktør

Front office editor har fordelen de lar deg redigere siden din i sanntid. Med andre ord kan du se hvordan alle endringer du gjør på nettstedet ditt vil se ut ved å bruke Visual Composer. Fordelen med denne tilnærmingen er at du ikke trenger å jobbe blindt som du gjør med back-office side editor.

Du kan når som helst bytte fra ett alternativ til et annet (Kontor back office eller kant).

Front-office-redaktøren er ikke så forskjellig fra back-office-redaktøren, fordi det er en bar utilisateur identiske, men også alle alternativene i backoffice-editoren er de samme som i front office-editoren.

wpbakery verktøylinjeImidlertid har fem nye knapper blitt lagt til, disse inkluderer:

  • Aktivering eller deaktivering av guider
  • Emulatoren, som lar deg se hvordan bloggen din vil se ut på forskjellige enheter
  • Tilbake-knappen på baksiden kontor
  • Lagre endringsknappen
  • Avkjørselen knappen visuell komponist

wpbakery alternativerHvert element på en side kan endres, du vil kunne se de tilgjengelige alternativene ved å sveve over hvert element. Knappen er formet "SPILLE", lar deg vise flere alternativer for et element.

alternativer-the-elementer-of-the-front office

De første trinnene dine kan være vanskelige, men med praksis vil du oppnå en hjemmeside som dette.  Hvis du ønsker, før du får plugg inndu kan test det gratis (innlogging, bruker: demo, passord: demo).

Her er hva jeg klarte å oppnå på 1 minutt hjemme. Med praksis kan du oppnå svært tilfredsstillende resultater. Og hvis du trenger hjelp til å bygge WordPress-nettstedet ditt med dette kraftige pluginet, kan du gjerne kontakt BlogPasCher-teametsom vil gjerne realisere prosjektene dine.

Jeg håper denne opplæringen helt på fransk vil hjelpe deg å ta dine første skritt med plugg inn « Visual Composer '. Hvis du har et problem, vi (eller assistanse) vil gjerne hjelpe deg. Ikke glem: en vakker nettside konverterer mer nysgjerrige kunder.

Anbefalte utvidelser

Her er noen utvidelser visuell komponist som vi anbefaler:

Oppdag flere plugins på Codecanyon

Del denne opplæringen med de trengende.