Divi is er zeker een van WordPress-thema's tegenwoordig het populairst. Een van de elementen die de kracht van dit thema vormt, is de bouwer (Divi Builder), die ons veel doet denken aan die van Visual Composer.

De Divi Builder is er in twee vormen: de standaard "Back-end Builder" en de "Visual Builder". Met beide interfaces kunt u exact dezelfde soorten websites bouwen met dezelfde stukjes inhoud en dezelfde ontwerpparameters. Het enige verschil is de interface. De back-end Builder leeft in het WordPress-dashboard en is toegankelijk met alle andere standaard WordPress-instellingen.

Het bevindt zich in de gebruikersinterface van WordPress en vervangt de standaard WordPress-berichteditor. Het is geweldig om snel wijzigingen aan te brengen terwijl u zich in het dashboard bevindt, maar het wordt ook beperkt door het dashboard en wordt weergegeven als een blokkerige weergave van uw website. Deze tutorial richt zich alleen op de visuele bouwer.

Download DIVI WordPress Theme

divi builder.jpeg

Met de geheel nieuwe Visual Builder kunt u uw pagina's aan de voorkant van uw website bouwen! Het is een geweldige ervaring en zorgt voor een veel sneller ontwerp. Wanneer u inhoud toevoegt of ontwerpinstellingen aanpast in de visuele builder, worden uw wijzigingen onmiddellijk weergegeven.

U kunt op de pagina klikken en beginnen met typen. U kunt de tekst markeren en het lettertype en de stijl aanpassen. U kunt nieuwe inhoud toevoegen, uw pagina samenstellen en alles zien wat er voor uw ogen gebeurt.

gebruik van-visuele-builder.jpg

Visual Builder inschakelen

Wanneer u bent ingelogd op uw WordPress-dashboard, kunt u naar elke pagina aan de voorkant van uw website navigeren en op de knop "Activate Visual Builder" in de WordPress-beheerbalk klikken om de builder te starten. visueel.

hoe visuele builder.jpeg in te schakelen

Als u uw pagina op het dashboard bewerkt, kunt u overschakelen naar de visuele builder door op de knop "Visual Builder inschakelen" te klikken die zich bovenaan de Divi Builder-back-endinterface bevindt (merk op dat u eerst activeer de Divi Builder voordat de visuele builderknop verschijnt).

gebruik de visuele bouwer Divi.jpeg

De basis van Visual Builder

De kracht van Divi ligt in Visual Builder, een paginabuilder die werkt met "Drag and Drop" waarmee je vrijwel elk type website kunt bouwen door de stukjes inhoud te combineren en ordenen.

De bouwer gebruikt drie hoofdbouwstenen: secties, rijen en modules. Door ze tegelijkertijd te gebruiken, kunt u talloze lay-outs maken. Secties zijn de grootste bouwstenen en bevatten groepen rijen. De rijen bevinden zich in de secties en worden gebruikt om de modules te huisvesten. De modules worden in de rijen geplaatst. Dit is de structuur van elke Divi-website.

Secties

De meest elementaire en grootste bouwstenen die worden gebruikt bij het ontwerpen van lay-outs met Divi zijn secties. Ze worden gebruikt om grote groepen inhoud te maken, en dit is het eerste dat u aan uw pagina toevoegt. Er zijn drie soorten secties: normaal, speciaal en volledige breedte.

Gewone secties bestaan ​​uit rijen kolommen, terwijl secties over de volledige breedte bestaan ​​uit modules over de volledige breedte die de volledige breedte van het scherm vergroten. Speciale secties maken meer geavanceerde zijlay-outs mogelijk.

rij

De rijen bevinden zich in de secties en u kunt een willekeurig aantal rijen in een sectie plaatsen. Er zijn veel verschillende soorten kolommen om uit te kiezen. Nadat u een kolomstructuur voor uw rij heeft gedefinieerd, kunt u modules in een gewenste kolom plaatsen. Er is geen limiet aan het aantal modules dat u in een kolom kunt plaatsen.

Modules

Modules zijn de stukjes inhoud waaruit uw website bestaat. Elke Divi-module kan worden aangepast aan elke kolombreedte en ze reageren allemaal volledig.

Bouw je eerste pagina

De drie basisbouwstenen (secties, lijnen en modules) worden gebruikt om uw pagina te bouwen.

constructie van een Divi.jpg pagina

Uw eerste sectie toevoegen

Voordat u iets aan uw pagina kunt toevoegen, moet u eerst een sectie toevoegen. Secties kunnen worden toegevoegd door op de blauwe (+) knop te klikken. Als je de muisaanwijzer over een sectie beweegt die al op de pagina staat, verschijnt er een blauwe (+) knop onder. Wanneer u klikt, wordt een nieuwe sectie toegevoegd onder de sectie waar u momenteel over zweeft.

Als u een nieuwe pagina start, wordt uw eerste sectie automatisch toegevoegd.

lijst met divi.jpg secties

Uw eerste regel toevoegen

Nadat u uw eerste sectie heeft toegevoegd, kunt u beginnen met het toevoegen van rijen kolommen erin. Een sectie kan een willekeurig aantal rijen bevatten, en u kunt rijen uit verschillende typen kolommen combineren om een ​​verscheidenheid aan lay-outs te creëren.

Om een ​​rij toe te voegen, klikt u op de groene (+) knop in een lege sectie, of klikt u op de groene (+) knop die verschijnt wanneer u over een huidige rij beweegt om een ​​nieuwe rij eronder toe te voegen. Nadat u op de groene (+) knop heeft geklikt, wordt u begroet met een lijst met kolomtypen. Kies de kolom van uw keuze en u bent klaar om uw eerste module toe te voegen.

hoe de Divi.jpeg rij in te voegen

Uw eerste module toevoegen

Modules kunnen binnen rijen worden toegevoegd en elke rij kan een willekeurig aantal modules bevatten. Modules zijn de inhoudselementen van uw pagina en Divi wordt geleverd met meer dan 40 verschillende elementen die u kunt gebruiken om te bouwen.

U kunt basismodules gebruiken zoals Teksten, Afbeeldingen en Knoppen, of meer geavanceerde modules zoals Sliders, Portfolios Galleries en E-commerce Winkels.

Om een ​​module toe te voegen, klikt u op de grijze (+) knop die in een lege kolom staat of klikt u op de grijze (+) knop die aanwezig is wanneer u met de muis over een module op de pagina beweegt om hieronder een nieuwe module toe te voegen . Zodra u op de knop klikt, wordt u begroet met een lijst met modules.

Kies de module van uw keuze en deze wordt aan uw pagina toegevoegd en het configuratiescherm van de module verschijnt. Met dit bedieningspaneel kunt u beginnen met het configureren van uw module.

plaats een DIVI.jpeg-module

Dat was het voor deze tutorial. Met wat je vandaag hebt geleerd, kun je een lay-out maken met Divi. We komen terug met geavanceerde tutorials over dit onderwerp. Je kunt de . al downloaden Divi-thema.

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

Andere Divi-zelfstudies