Divi är definitivt en av dem WordPress-teman mest populära nuförtiden. Ett av de element som utgör styrkan med detta tema är dess byggare (Divi Builder), som påminner oss mycket om Visual Composer.

Divi Builder finns i två former: standarden "Back-end Builder" och "Visual Builder". Båda gränssnitten låter dig bygga exakt samma typer av webbplatser med samma delar av innehåll och samma designparametrar. Den enda skillnaden är gränssnittet. Back-end Builder bor inne i WordPress-instrumentpanelen och är tillgänglig med alla andra vanliga WordPress-inställningar.

Den sitter inne i WordPress-användargränssnittet och ersätter standard WordPress-redigeraren. Det är bra för att göra snabba ändringar medan du befinner dig i instrumentpanelen, men det är också begränsat av instrumentpanelen och återges som en blockerande representation av din webbplats. Denna handledning fokuserar endast på den visuella byggaren.

Ladda ner DIVI WordPress Theme

divi builder.jpeg

Med den helt nya Visual Builder kan du å andra sidan bygga dina sidor på framsidan av din webbplats! Det är en fantastisk upplevelse och möjliggör mycket snabbare design. När du lägger till innehåll eller justerar designinställningar i den visuella byggaren visas dina ändringar direkt.

Du kan klicka på sidan och börja skriva. Du kan markera texten och justera dess typsnitt och stil. Du kan lägga till nytt innehåll, bygga din sida och se allt som händer inför dina ögon.

användning av-visual-builder.jpg

Så här aktiverar du Visual Builder

När du är inloggad på din WordPress-instrumentpanel kan du navigera till vilken sida som helst på framsidan av din webbplats och klicka på knappen "Aktivera Visual Builder" i WordPress-administrationsfältet för att starta byggaren. visuell.

hur man aktiverar visuell builder.jpeg

Om du redigerar din sida på instrumentpanelen kan du växla till den visuella byggaren genom att klicka på knappen "Aktivera Visual Builder" som finns högst upp i Divi Builder-backgränssnittet (notera att du först måste aktivera Divi Builder innan den visuella byggarknappen visas).

använd den visuella byggaren Divi.jpeg

Grunderna i Visual Builder

Kraften med Divi ligger i Visual Builder, en sidbyggare som arbetar med "Dra och släpp" som låter dig bygga nästan vilken typ av webbplats som helst genom att kombinera och ordna innehållsdelarna.

Byggaren använder tre huvudbyggstenar: sektioner, rader och moduler. Genom att använda dem tillsammans kan du skapa otaliga antal layouter. Avsnitt är de största byggstenarna och de innehåller grupper av rader. Raderna finns inuti sektionerna och används för att hysa modulerna. Modulerna placeras i raderna. Detta är strukturen på varje Divis webbplats.

Sektioner

De mest grundläggande och största byggstenarna som används vid utformning av layouter med Divi är sektioner. De används för att skapa stora grupper av innehåll, och det här är det första du lägger till på din sida. Det finns tre typer av avsnitt: Vanlig, Specialitet och Full bredd.

Vanliga sektioner består av rader med kolumner medan sektioner med full bredd består av moduler med full bredd som vidgar hela skärmens bredd. De speciella avsnitten möjliggör mer avancerade sidlayouter.

rad

Raderna finns inom sektionerna och du kan placera valfritt antal rader inuti ett avsnitt. Det finns många olika typer av kolumner att välja mellan. När du väl har definierat en kolumnstruktur för din rad kan du sedan placera moduler i en önskad kolumn. Det finns ingen gräns för antalet moduler du kan placera i en kolumn.

Moduler

Moduler är innehållsdelarna som utgör din webbplats. Varje Divi-modul kan anpassas till valfri kolumnbredd och de är alla lyhörda.

Bygg din första sida

De tre grundläggande byggstenarna (sektioner, linjer och moduler) används för att bygga din sida.

byggandet av en Divi.jpg-sida

Lägga till ditt första avsnitt

Innan du kan lägga till något på din sida måste du först lägga till ett avsnitt. Avsnitt kan läggas till genom att klicka på den blå (+) knappen. När du svävar över ett avsnitt som redan finns på sidan visas en blå (+) knapp nedan. När du klickar läggs ett nytt avsnitt till under det avsnitt du för närvarande svävar över.

Om du startar en ny sida läggs ditt första avsnitt till automatiskt.

lista över divi.jpg sektioner

Lägga till din första rad

När du har lagt till ditt första avsnitt kan du börja lägga till rader med kolumner inuti. Ett avsnitt kan innehålla valfritt antal rader och du kan blanda och matcha rader från olika typer av kolumner för att skapa en mängd olika layouter.

För att lägga till en rad, klicka på den gröna knappen (+) i ett tomt avsnitt eller klicka på den gröna (+) knappen som visas när du svävar över en aktuell rad för att lägga till en ny rad nedan. När du har klickat på den gröna knappen (+) hälsas du med en lista med kolumntyper. Välj den kolumn du väljer och du är redo att lägga till din första modul.

hur man sätter in Divi.jpeg-raden

Lägger till din första modul

Moduler kan läggas till i rader och varje rad kan innehålla valfritt antal moduler. Moduler är innehållselementen på din sida och Divi levereras med över 40 olika element som du kan använda för att bygga.

Du kan använda grundläggande moduler som texter, bilder och knappar, eller mer avancerade moduler som skjutreglage, portföljgallerier och e-handel Butiker.

För att lägga till en modul, klicka på den grå (+) knappen som finns i en tom kolumn eller klicka på den grå (+) knappen som finns när du svävar över en modul på sidan för att lägga till en ny modul nedan . När du klickar på knappen kommer du att hälsas med en lista med moduler.

Välj önskad modul så läggs den till på din sida och modulens kontrollpanel visas. Med hjälp av denna kontrollpanel kan du börja konfigurera din modul.

sätt in en DIVI.jpeg-modul

Det var allt för den här handledningen. Med det du har lärt dig idag kommer du att kunna skapa en layout med Divi. Vi återkommer med avancerade tutorials i ämnet. Du kan redan ladda ner 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 = "platt" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] LADDA NER DIVI TEMA [/ vcex_button] [/ width»_vc_column] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "tom" layout = "expanderad" align = "center" font_family = "Raleway" font_weight = "700 ″ stil =" platt "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "icon_right =" EMPL D fa-LOAD ] DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Andra Divi tutorials