Divi er bestemt en af WordPress-temaer mest populære i dag. Et af de elementer, der udgør styrken ved dette tema, er dets builder (Divi Builder), som minder os meget om Visual Composer.

Divi Builder findes i to former: standard "Back-end Builder" og "Visual Builder". Begge grænseflader giver dig mulighed for at oprette nøjagtigt de samme typer websteder med de samme stykker indhold og de samme designparametre. Den eneste forskel er grænsefladen. Back-end Builder bor inde i WordPress-dashboardet og er tilgængelig med alle andre standard WordPress-indstillinger.

Det sidder inde i WordPress-brugergrænsefladen og erstatter standard WordPress-indlægseditor. Det er fantastisk til hurtige ændringer, mens du er inde i instrumentbrættet, men det er også begrænset af instrumentbrættet og gengives som en blokeret gengivelse af dit websted. Denne vejledning fokuserer kun på den visuelle builder.

Download DIVI WordPress Theme

divi builder.jpeg

Den helt nye Visual Builder lader dig derimod bygge dine sider på forsiden af ​​dit websted! Det er en fantastisk oplevelse og giver mulighed for meget hurtigere design. Når du tilføjer indhold eller justerer designindstillinger inde i den visuelle builder, vises dine ændringer med det samme.

Du kan klikke på siden og begynde at skrive. Du kan fremhæve teksten og justere dens skrifttype og stil. Du kan tilføje nyt indhold, bygge din side og se alt, hvad der sker foran dine øjne.

brug af-visuel-builder.jpg

Sådan aktiveres Visual Builder

Når du er logget ind på dit WordPress-dashboard, kan du navigere til en hvilken som helst side på forsiden af ​​dit websted og klikke på knappen "Aktiver Visual Builder" i WordPress-adminlinjen for at starte bygherren. visuel.

hvordan man aktiverer visuel builder.jpeg

Hvis du redigerer din side på instrumentbrættet, kan du skifte til den visuelle builder ved at klikke på "Aktivér Visual Builder" -knappen, der er øverst i Divi Builder-back-end-interface (bemærk, at du først skal aktiver Divi Builder, før den visuelle builder-knap vises).

brug den visuelle bygherre Divi.jpeg

Grundlæggende om Visual Builder

Kraften i Divi ligger i Visual Builder, en sidebygger, der arbejder med "Drag And Drop", der giver dig mulighed for at opbygge næsten enhver form for hjemmeside ved at kombinere og arrangere indholdsstykkerne.

Byggeren bruger tre hovedbygningsblokke: sektioner, rækker og moduler. Brug af dem i fællesskab giver dig mulighed for at oprette utallige antal layouts. Sektioner er de største byggesten, og de rummer grupper af rækker. Rækkerne er inde i sektionerne og bruges til at huse modulerne. Modulerne placeres inden i rækkerne. Dette er strukturen på hvert Divi-websted.

Sektioner

De mest basale og største byggesten, der bruges til at designe layout med Divi, er sektioner. De bruges til at oprette store grupper af indhold, og det er den første ting, du tilføjer til din side. Der er tre typer sektioner: Regelmæssig, Specialitet og Fuld bredde.

Almindelige sektioner består af rækker af søjler, mens sektioner i fuld bredde består af moduler i fuld bredde, der udvider hele skærmbredden. De specielle sektioner giver mulighed for mere avancerede sidelayouter.

rækken

Rækkerne er inde i sektionerne, og du kan placere et vilkårligt antal rækker inde i en sektion. Der er mange forskellige typer kolonner at vælge imellem. Når du har defineret en kolonnestruktur for din række, kan du derefter placere moduler i en ønsket kolonne. Der er ingen grænse for antallet af moduler, du kan placere i en kolonne.

Moduler

Moduler er de indholdsstykker, der udgør dit websted. Hvert Divi-modul kan tilpasse sig enhver søjlebredde, og de er alle lydhøre.

Byg din første side

De tre grundlæggende byggesten (sektioner, linjer og moduler) bruges til at bygge din side.

opførelse af en Divi.jpg side

Tilføjelse af din første sektion

Før du kan tilføje noget til din side, skal du først tilføje et afsnit. Sektioner kan tilføjes ved at klikke på den blå (+) knap. Når du holder markøren over et afsnit, der allerede findes på siden, vises en blå (+) knap nedenfor. Når du klikker, tilføjes et nyt afsnit under det afsnit, du aktuelt svæver over.

Hvis du starter en ny side, tilføjes din første sektion automatisk.

liste over divi.jpg sektioner

Tilføjelse af din første linje

Når du har tilføjet din første sektion, kan du begynde at tilføje rækker af kolonner indeni. En sektion kan indeholde et hvilket som helst antal rækker, og du kan blande og matche rækker fra forskellige kolonnetyper for at oprette en række layouts.

For at tilføje en række skal du klikke på den grønne (+) knap inde i en tom sektion eller klikke på den grønne (+) knap, der vises, når du svæver over en aktuel række for at tilføje en ny række nedenfor. Når du har klikket på den grønne (+) knap, bliver du mødt med en liste over kolonnetyper. Vælg den valgte kolonne, og du er klar til at tilføje dit første modul.

hvordan man indsætter Divi.jpeg-rækken

Tilføjelse af dit første modul

Moduler kan tilføjes inden for rækker, og hver række kan indeholde et hvilket som helst antal moduler. Moduler er indholdselementerne på din side, og Divi leveres med over 40 forskellige elementer, som du kan bruge til at opbygge.

Du kan bruge basismoduler som tekster, billeder og knapper eller mere avancerede moduler som skydere, porteføljegallerier og eCommerce Butikker.

For at tilføje et modul skal du klikke på den grå (+) knap, der findes i en tom kolonne, eller klikke på den grå (+) knap, der findes, når du holder markøren over et modul på siden for at tilføje et nyt modul nedenfor . Når du klikker på knappen, vil du blive mødt med en liste over moduler.

Vælg det ønskede modul, så tilføjes det til din side, og modulets kontrolpanel vises. Ved hjælp af dette kontrolpanel kan du begynde at konfigurere dit modul.

indsæt et DIVI.jpeg-modul

Det var det for denne tutorial. Med det du har lært i dag, vil du være i stand til at lave et layout med Divi. Vi vender tilbage med avancerede tutorials om emnet. Du kan allerede downloade Divi-tema.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expanded "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flad" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DOWNLOAD DIVI-TEMAET [/ vcex_button] [/ width»_vc_column] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "udvidet" align = "center" font_family = "Raleway" font_weight = "700 ″ stil =" flad "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "icon_right =" faPL D fa-LOAD" DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Andre Divi tutorials