Overzicht van alle Divi-onderdelen

Procédure

Divi builder is inbegrepen in onzeWordpress webhostingpakketten. Als je ondersteuning voor DIVI builder wilt, moet je je direct op de Elegent theme Divi website abonneren op een licentie.

Introductie

LWS biedt 3 premium plugins van Elegant Themes (Divi, Bloom en Monarch). Deze worden regelmatig bijgewerkt. Als je eenmaal klant bent bij LWS, krijg je gratis toegang tot deze plugins door de 'Divi Builder' distributie te kiezen bij de installatie van het Wordpress CMS met onze Auto-Installer.

Als je een cPanel pakket hebt of Wordpress al hebt geïnstalleerd met deze distributie, maar geen toegang hebt tot alle thema's of updates, laat het ons dan weten door ons de toegangsgegevens voor het administratiegedeelte van je Wordpress site te geven zodat een technicus de licentie kan updaten.

Let op: u dient een Elegant Themes licentie af te sluiten om gebruik te kunnen maken van ondersteuning. LWS biedt geen ondersteuning voor deze producten.

Secties zijn de grootste bouwstenen in de Divi-bouwer. Je kunt ze zien als horizontaal gestapelde blokken die je inhoud kunnen groeperen in visueel verschillende gebieden. In Divi begint alles wat je bouwt met een sectie. Deze inhoudswrapper heeft verschillende parameters waarmee je heel leuke dingen kunt doen.

Zo voeg je een sectie toe aan je pagina

Voordat je een sectiemodule aan je pagina kunt toevoegen, moet je eerst overschakelen naar de Divi Builder. Zodra het Divi-thema op je website is geïnstalleerd, zie je telkens wanneer je een nieuwe pagina maakt een knop Gebruik Divi Builder boven de editor voor berichten. Klik op deze knop om de Divi Builder te activeren, zodat je toegang krijgt tot alle modules. Klik vervolgens op de knop Use Visual Builder om de bouwer in visuele modus te starten. Je kunt ook op de knop Visuele bouwer gebruiken klikken terwijl je vooraan op je website bladert als je bent ingelogd op je WordPress dashboard.

Zodra je Visual Builder hebt geopend , kun je op de blauwe + knop klikken om een nieuwe sectie aan je pagina toe te voegen. Je wordt begroet door een pop-up venster waarmee je een van de drie sectietypes van Divi kunt toevoegen. Deze typen zijn: Normaal, Speciaal en Volledig scherm.

Zodra de sectie is toegevoegd, wordt je begroet met een lijst met opties voor de sectie. Deze opties zijn verdeeld in drie hoofdgroepen: Inhoud, Stijl en Geavanceerd.

Sectie inhoud opties

Op het tabblad Inhoud vind je alle inhoudselementen voor de sectie. Voor secties zijn deze inhoudselementen beperkt tot achtergrondelementen zoals achtergrondafbeeldingen en video's.

Achtergrondafbeelding

Indien gedefinieerd, wordt deze afbeelding gebruikt als achtergrond voor deze module. Om een achtergrondafbeelding te verwijderen, verwijder je gewoon de URL uit het parameterveld.

Achtergrondkleur

Indien gedefinieerd, wordt deze kleur gebruikt als achtergrond voor deze module. Als u een achtergrondkleur wilt verwijderen, verwijdert u deze uit het instellingenveld.

Achtergrond video MP4 + WEBM

Alle video's moeten worden geüpload in zowel .MP4- als .WEBM-formaat voor maximale compatibiliteit in alle browsers. Video-achtergronden worden uitgeschakeld op mobiele apparaten. In plaats daarvan wordt je achtergrondafbeelding gebruikt. Daarom moet je zowel een achtergrondafbeelding als een achtergrondvideo definiëren voor de beste resultaten. Belangrijke opmerking: Om ervoor te zorgen dat de MP4- en/of WEBM-video-indeling in alle browsers werkt, moet op je server het juiste MIME-type zijn aangegeven. Je kunt meer te weten komen over het gebruik van .htaccess om MIME-typen te definiëren op deze link. Als je merkt dat je video's niet worden afgespeeld in bepaalde browsers, is dit waarschijnlijk de reden.

Breedte achtergrondvideo

Om video's de juiste afmetingen te geven, moet je hier de exacte breedte (in pixels) van je video invoeren.

Hoogte van achtergrondvideo

Om video's de juiste grootte te geven, moet je hier de exacte hoogte (in pixels) van je video invoeren.

Beheerderslabel

In deze vervolgkeuzelijst kun je een beheerderslabel toevoegen dat zowel in de rear builder als in de skeletweergave van de visual builder zal verschijnen.

Sectie stijl opties

Op het tabblad stijl vind je alle sectie stijlopties, zoals grootte en spatiëring. Dit is het tabblad dat je gebruikt om het uiterlijk van je sectie aan te passen. Elk Divi sectietype heeft een lange lijst ontwerpinstellingen waarmee je zo'n beetje alles kunt veranderen.

Binnenste schaduw tonen

Hier kun je kiezen of je sectie een binnenschaduw heeft of niet. Dit kan er geweldig uitzien als je gekleurde achtergronden of achtergrondafbeeldingen hebt.

Parallax-effect gebruiken

Als deze optie is ingeschakeld, blijft je achtergrondafbeelding vaststaan terwijl je scrolt, waardoor een leuk parallax-effect ontstaat. Je kunt ook kiezen uit twee parallaxmethoden: CSS en True Parallax.

Aangepaste opvulling

Hier kun je de padding van de sectie aanpassen aan specifieke waarden, of leeg laten om de standaard padding te gebruiken.

Geavanceerde opties

Op het tabblad Geavanceerd vind je opties die meer ervaren webdesigners handig kunnen vinden, zoals aangepaste CSS en HTML-attributen. Hier kun je aangepaste CSS toepassen op je sectie. Je kunt ook aangepaste CSS klassen en ID's toepassen op de sectie, die gebruikt kunnen worden om de sectie aan te passen in het style.css bestand van je kinderthema.

CSS ID

Voer een optionele CSS ID in om te gebruiken voor deze sectie. Een ID kan worden gebruikt om een aangepaste CSS stijl te maken of om links te maken naar bepaalde secties van je pagina.

CSS klasse

Voer de optionele CSS klassen in die moeten worden gebruikt voor dit gedeelte. Een CSS class kan worden gebruikt om een aangepaste CSS stijl te maken. Je kunt meerdere klassen toevoegen, gescheiden door een spatie. Deze klassen kunnen worden gebruikt in je Divi-thema of in de aangepaste CSS die je toevoegt aan je pagina of website met Divi Theme Options of Divi Builder Pagina-instellingen.

Aangepaste CSS

Aangepaste CSS kan hier worden toegepast. In het gedeelte Aangepaste CSS vind je een tekstveld waarin je aangepaste CSS rechtstreeks aan elk element kunt toevoegen. De CSS-invoer in deze parameters is al verpakt in stijltags, dus je hoeft alleen maar de CSS-regels in te voeren, gescheiden door puntkomma's.

Zichtbaarheid

Met deze optie kun je bepalen op welke apparaten je sectie wordt weergegeven. Je kunt ervoor kiezen om je sectie afzonderlijk uit te schakelen op tablets, smartphones of desktops. Dit is handig als je verschillende secties op verschillende apparaten wilt gebruiken, of als je het mobiele ontwerp wilt vereenvoudigen door bepaalde secties van de pagina te verwijderen.

Secties over de volledige breedte gebruiken

Full-screen secties geven je toegang tot een nieuwe set full-width modules. Deze modules werken een beetje anders omdat ze gebruik maken van de volledige breedte van de browser. Schermvullende modules kunnen alleen worden geplaatst in schermvullende secties.

Zodra u een nieuwe schermvullende sectie aan uw pagina toevoegt, kunt u op de knop Modules toevoegen in de sectie klikken om een schermvullende module toe te voegen. In tegenstelling tot de normale sectie is er geen concept van rijen of kolommen, omdat deze modules altijd 100% van het scherm benutten. Volledig-scherm modules zijn een uitstekende manier om een visuele onderbreking aan de pagina toe te voegen!

Een goed voorbeeld van een schermvullende module is de schermvullende slider. Deze slider werkt als een normale slider, behalve dat hij 100% van zijn breedte beslaat. Het weergeven van een slider op een dergelijke schaal kan heel verbazingwekkend zijn, kijk maar eens naar onze divi demo voor een voorbeeld.

Gespecialiseerde secties gebruiken

Gespecialiseerde secties zijn gemaakt om meer geavanceerde kolomstructuren mogelijk te maken. In tegenstelling tot normale secties kun je met een gespecialiseerde sectie complexe kolomvariaties toevoegen naast verticale sidebars met volledige spanwijdte, zonder ongewenste onderbrekingen toe te voegen aan de pagina. Dit soort lay-outs zijn niet mogelijk met normale secties.

Zodra je een gespecialiseerde sectie toevoegt aan de pagina, zie je dat het ene gebied een knop 'module toevoegen' heeft en het andere een knop 'rij invoegen'. Het gebied "module invoegen" vertegenwoordigt je verticale zijbalk. U kunt hier zoveel modules toevoegen als u wilt, in een enkele rij, en ze zullen de verticale breedte van de sectie beslaan, naast de kolomstructuur die u ernaast bouwt. Door op "rij invoegen" te klikken, kunt u extra rijen links/rechts van uw zijbalk invoegen. In zekere zin kun je dit zien als het toevoegen van rijen binnen rijen!

Het resultaat is de mogelijkheid om zo ongeveer elke kolomstructuur te maken die je maar kunt bedenken, en welke structuur je ook kiest, we hebben ervoor gezorgd dat de combinatie perfect is! Hier zie je een voorbeeld van een lay-out die is gemaakt met behulp van gespecialiseerde secties. Zoals je kunt zien, is het effect een dubbele zijbalklay-out, met twee verticale lijnen links/rechts van een complexe kolomstructuur in het midden.

Videopresentatie over de preview van alle Divi-secties

Conclusie

Bedankt voor het volgen van deze tutorial!

Je weet nu hoe je de verschillende secties in Divi kunt gebruiken.

Tot snel voor een nieuwe tutorial :)

Om meer te weten te komen over Elegant Themes Divi en hoe het te gebruiken

Hoe maak je een nieuw project met Divi

Hoe u uw Divi-plugin bijwerkt

> Bekijk onze Elegant Themes Divi helpsectie