Een overzicht van Divi-secties

Secties zijn de grootste bouwsteen in de Divi-bouwer. Je kunt ze zien als horizontale stapelblokken die je inhoud kunnen groeperen in visueel onderscheidbare gebieden. In Divi begint alles wat je bouwt met een sectie. Deze inhoudswrapper heeft verschillende instellingen die kunnen worden gebruikt om een ​​aantal echt geweldige dingen te doen.

Hoe u een sectie aan uw pagina kunt toevoegen

Voordat u een sectiemodule aan uw pagina kunt toevoegen, moet u eerst in Divi Builder springen. Nadat het Divi-thema op uw website is geïnstalleerd, ziet u elke keer dat u een nieuwe pagina bouwt een knop Divi Builder gebruiken boven de berichteditor. Als u op deze knop klikt, wordt Divi Builder ingeschakeld en hebt u toegang tot alle modules van Divi Builder. Klik vervolgens op de knop Visual Builder gebruiken om de builder in Visual Mode te starten. U kunt ook klikken op de knop Visual Builder gebruiken tijdens het browsen op uw website aan de voorkant als u bent aangemeld bij uw WordPress-dashboard.

Nadat u Visual Builder hebt ingevoerd, kunt u op de blauwe plusknop klikken om een ​​nieuwe sectie aan uw pagina toe te voegen. Je wordt begroet met een pop-up waarmee je elk van Divi’s drie sectietypen kunt toevoegen. Deze typen zijn onder meer: ​​Standaard, Specialiteit en Volledige breedte.

Nadat de sectie is toegevoegd, wordt u begroet met de lijst met opties van de sectie. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerp en Geavanceerd .

Sectie Inhoud Opties

Op het tabblad inhoud vindt u alle inhoudselementen van de sectie. Voor secties zijn deze inhoudselementen beperkt tot achtergrondelementen zoals achtergrondafbeeldingen en video’s.

Achtergrond afbeelding

Indien gedefinieerd, wordt deze afbeelding gebruikt als achtergrond voor deze module. Om een ​​achtergrondafbeelding te verwijderen, verwijdert u eenvoudig de URL uit het instellingenveld.

Achtergrond kleur

Indien gedefinieerd, wordt deze afbeelding gebruikt als achtergrond voor deze module. Om een ​​achtergrondafbeelding te verwijderen, verwijdert u eenvoudig de URL uit het instellingenveld.

Achtergrondvideo MP4

Alle video’s moeten worden geüpload in beide .MP4 .WEBM-indelingen om maximale compatibiliteit in alle browsers te garanderen. Upload hier de .MP4-versie. Video-achtergronden zijn uitgeschakeld vanaf mobiele apparaten. In plaats daarvan wordt uw achtergrondafbeelding gebruikt. Om deze reden moet u zowel een achtergrondafbeelding als een achtergrondvideo definiëren om de beste resultaten te garanderen. Belangrijke opmerking: om het MP4-videoformaat in alle browsers te laten werken, moet uw server de juiste MIME-typen hebben. Meer informatie over het gebruik van .htaccess om MIME-typen te definiëren, vindt u hier. Als je merkt dat je video’s niet in bepaalde browsers worden afgespeeld, is dit waarschijnlijk de reden.

Achtergrondvideo WEBM

Alle video’s moeten worden geüpload in beide .MP4 .WEBM-indelingen om maximale compatibiliteit in alle browsers te garanderen. Upload hier de .WEBM-versie. Video-achtergronden zijn uitgeschakeld vanaf mobiele apparaten. In plaats daarvan wordt uw achtergrondafbeelding gebruikt. Om deze reden moet u zowel een achtergrondafbeelding als een achtergrondvideo definiëren om de beste resultaten te garanderen. Belangrijke opmerking: om het WEBM-videoformaat in alle browsers te laten werken, moet uw server de juiste MIME-typen hebben. Meer informatie over het gebruik van .htaccess om MIME-typen te definiëren, vindt u hier. Als je merkt dat je video’s niet in bepaalde browsers worden afgespeeld, is dit waarschijnlijk de reden.

Breedte achtergrondvideo

Om ervoor te zorgen dat video’s de juiste grootte hebben, moet u hier de exacte breedte (in pixels) van uw video invoeren.

Hoogte achtergrondvideo

Om ervoor te zorgen dat video’s de juiste grootte hebben, moet u hier de exacte hoogte (in pixels) van uw video invoeren.

Beheerderslabel

In deze vervolgkeuzelijst kunt u een admin-label toevoegen dat wordt weergegeven in de back-endbuilder en in de skeletweergave van de visuele builder.

Sectieontwerpopties

Op het ontwerptabblad vindt u alle stijlopties van de sectie, zoals grootte en afstand. Dit is het tabblad dat u gebruikt om het uiterlijk van uw sectie te wijzigen. Elk Divi-sectietype heeft een lange lijst met ontwerpinstellingen die u kunt gebruiken om vrijwel alles te wijzigen.

Toon innerlijke schaduw

Hier kunt u selecteren of uw sectie een binnenschaduw heeft of niet. Dit kan er geweldig uitzien als u gekleurde achtergronden of achtergrondafbeeldingen hebt.

Gebruik Parallax-effect

Indien ingeschakeld, blijft je achtergrondafbeelding vast als je schuif, waardoor een leuk parallaxachtig effect ontstaat. U kunt ook kiezen tussen twee parallax-methoden: CSS en True Parallax.

Aangepaste opvulling

Hier kunt u de opvulling van de sectie aanpassen aan specifieke waarden, of leeg laten om de standaard opvulling te gebruiken.

Sectie Geavanceerde opties

Op het tabblad Geavanceerd vindt u opties die meer ervaren webontwerpers nuttig kunnen vinden, zoals aangepaste CSS- en HTML-kenmerken. Hier kunt u aangepaste CSS op uw sectie toepassen. U kunt ook aangepaste CSS-klassen en ID’s op de sectie toepassen, die kunnen worden gebruikt om de sectie in het style.css-bestand van uw kindthema aan te passen.

CSS ID

Voer een optionele CSS-ID in die voor deze sectie moet worden gebruikt. Een ID kan worden gebruikt om aangepaste CSS-stijlen te maken of om koppelingen naar bepaalde delen van uw pagina te maken.

CSS-klasse

Voer optionele CSS-klassen in die voor deze sectie moeten worden gebruikt. Een CSS-klasse kan worden gebruikt om aangepaste CSS-stijlen te maken. U kunt meerdere klassen toevoegen, gescheiden door een spatie. Deze klassen kunnen worden gebruikt in uw Divi Child-thema of in de Custom CSS die u toevoegt aan uw pagina of uw website met behulp van de Divi Theme Options of Divi Builder-pagina-instellingen.

Aangepaste CSS

Aangepaste CSS kan hier op de sectie worden toegepast. In het gedeelte Aangepaste CSS vindt u een tekstveld waar u aangepaste CSS rechtstreeks aan elk element kunt toevoegen. CSS-invoer in deze instellingen is al ingepakt in stijltags, dus u hoeft alleen CSS-regels in te voeren gescheiden door puntkomma’s.

Zichtbaarheid

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

Fullwidth-secties gebruiken

Fullwidth-secties geven u toegang tot een nieuwe set Fullwidth-modules. Deze modules werken een beetje anders omdat ze profiteren van de volledige breedte van de browser. Fullwidth-modules kunnen alleen in Fullwidth-secties worden geplaatst.

Nadat u een nieuwe sectie met volledige breedte aan uw pagina hebt toegevoegd, kunt u op de knop “Modules toevoegen” in de sectie klikken om een ​​module met volledige breedte toe te voegen. In tegenstelling tot de normale sectie is er geen concept van rijen of kolommen, omdat de modules met volledige breedte altijd profiteren van 100% van het scherm. Fullwidth-modules zijn een geweldige manier om een ​​visuele onderbreking aan de pagina toe te voegen!

Een goed voorbeeld van een fullwidth-module is de schuifregelaar voor de volledige breedte. Deze schuifregelaar met volledige breedte werkt net als een normale schuifregelaar, behalve dat deze wordt uitgebreid tot 100% breedte. Het weergeven van een schuifregelaar op zo’n schaal kan behoorlijk verbluffend zijn, bekijk onze divi-demo voor een voorbeeld.

docs afbeelding

Speciale secties gebruiken

Speciale secties zijn gemaakt om meer geavanceerde kolomstructuren mogelijk te maken. In tegenstelling tot normale secties, kunt u, wanneer u een speciale sectie gebruikt, complexe kolomvariaties naast volledig verticale verticale zijbalken toevoegen, zonder ongewenste onderbrekingen aan de pagina toe te voegen. Dit soort lay-outs zijn niet mogelijk met normale secties.

Nadat u een speciale sectie aan de pagina hebt toegevoegd, zult u merken dat het ene gebied een knop “module toevoegen” heeft, terwijl het andere een knop “rij invoegen” heeft. Het gedeelte “module invoegen” vertegenwoordigt uw verticale zijbalk. Je kunt hier zoveel modules toevoegen, in een enkele rij, en ze zullen de verticale breedte van de sectie overspannen, grenzend aan de kolomstructuur die je ernaast bouwt. Als u op “rij invoegen” klikt, kunt u extra rijen links / rechts van uw zijbalk invoegen. In zekere zin kan dit worden gezien als het toevoegen van rijen binnen rijen!

Het resultaat is de mogelijkheid om zowat elke kolomstructuur te maken waar u van kunt dromen, en ongeacht de structuur die u kiest, we hebben ervoor gezorgd dat de combinatie er geweldig uit zal zien! Hier is een voorbeeld van een pagina-indeling gemaakt met speciale secties. Zoals u kunt zien, is het effect een lay-out met twee zijbalken, met twee verticaal overspannen rijen links / rechts van een complexe kolomstructuur in het midden.

docs afbeelding