Met Divi kunt u in een handomdraai een onbeperkt aantal kant-en-klare gebieden creëren. Zijbalken kunnen vervolgens aan elke pagina worden toegevoegd, zodat u unieke zijbalken kunt maken voor verschillende secties van uw Site web.

Hoe een Zonde-widgetmodule van Divi toe te voegen

Voordat u een zijbalkmodule aan uw pagina kunt toevoegen, moet u eerst naar Divi Builder springen. Zodra de Divi-thema geïnstalleerd op uw Site web, je ziet een knop Gebruik Divi Builder boven de berichteditor wanneer u een nieuwe pagina maakt. Klik op deze knop om Divi Builder te activeren en toegang te krijgen tot alle Divi Builder-modules. Klik vervolgens op de knop Gebruik Visual Builder om de generator in visuele modus te starten. U kunt ook op de knop klikken Gebruik Visual Builder wanneer u door uw bladert Site web op de voorgrond als u bent ingelogd op uw WordPress-dashboard.

Zodra u Visual Builder gebruikt, kunt u op de grijze (+) knop klikken om een nieuwe module aan uw pagina toe te voegen. Nieuwe modules kunnen alleen binnen rijen worden toegevoegd. Als u een nieuwe pagina begint, vergeet dan niet om eerst een rij aan uw pagina toe te voegen.

Zoek de zijbalkmodule in de lijst met modules en klik erop om deze aan uw pagina toe te voegen. De lijst met modules is doorzoekbaar, wat betekent dat u ook het woord "zijbalk" kunt typen en vervolgens op "Enter" kunt klikken om de zijbalkmodule automatisch te zoeken en toe te voegen! Zodra de module is toegevoegd, wordt u begroet door de lijst met moduleopties. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerpfase et vergevorderd .

Gebruiksvoorbeeld: een zijbalk toevoegen aan uw blogpagina

Met de zijbalkmodule kunt u een zijbalk (en alle ingebouwde widgets) overal op uw pagina invoegen. Eigenlijk kunt u elk widgetgebied toevoegen met behulp van de zijbalkmodule. Voor dit voorbeeld laat ik je zien hoe je een aangepaste zijbalk aan je blogpagina toevoegt met behulp van de gespecialiseerde sectie om de widget Zoeken en recente berichten op WordPress weer te geven.

Deze blogpagina heeft een koptekst over de volledige breedte om de blogtitel bovenaan de pagina weer te geven. Onder de koptekstmodule over de volledige breedte bevindt zich een speciale lay-out met een blogmodule aan de linkerkant en een rechtse verticale zijbalk aan de rechterkant.

Met behulp van de gespecialiseerde sectie kunt u complexe kolomvariaties toevoegen naast de verticale zijbalken, zonder ongewenste onderbrekingen aan de pagina toe te voegen. Dit is perfect voor een blog met een zijbalk.

Eerst moet je ervoor zorgen dat je de widgets hebt ingesteld op de Widgets-pagina van je WordPress-dashboard. Voor dit voorbeeld voeg ik de zoekwidget en de recente artikelen-widget toe aan de zijbalkwidget.

Implementeer vervolgens Visual Builder om de blogpagina te bewerken. Voeg een gespecialiseerde sectie toe aan uw pagina (net onder uw koptekst) met de volgende lay-out:

Als je eenmaal een gespecialiseerde sectie aan de pagina hebt toegevoegd, zul je zien dat een gebied (aan de linkerkant) een knop "Module toevoegen" heeft. Voor dit voorbeeld is hier de Blog-module met een rasterlay-out toegevoegd om blogposts weer te geven.

De andere (aan de rechterkant) heeft een knop "Rij invoegen". Het gebied "Module invoegen" vertegenwoordigt uw verticale zijbalk. Hier komt u in de zijbalkmodule. U kunt hier zoveel modules in één rij toevoegen, en ze beslaan de verticale breedte van de sectie, grenzend aan de kolomstructuur die u ernaast bouwt. In feite heeft de blogpagina voor dit voorbeeld al een e-mailoptin-module en een persoon-module in dat gebied van de verticale zijbalk van de speciale lay-out.

Voeg nu de zijbalkmodule toe aan de bovenkant van de andere modules in uw verticale zijbalkgebied.

Werk in de instelling Sidebar Module het volgende bij:

Inhoud tabblad

Widgetgebied: selecteer Zijbalk

Ontwerp tabblad

Oriëntatie: rechts (omdat de zijbalk aan de rechterkant is)
Grensscheider verwijderen: JA
Tekstkleur:
Donkere koptekst lettergrootte: 26px
Afstand van letters van
header: 3px Hoogte van de koprij: 1.1em

Tabblad Geavanceerd

Voeg onder de sectie Aangepaste CSS de volgende CSS toe aan het tekstvak Widget. Dit zorgt ervoor dat het ontwerp van de zijbalkwidgets overeenkomt met het ontwerp van de site:

achtergrond: #fff; opvulling: 20px; -webkit-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1) -moz-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1); box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1);

Instellingen opslaan

U kunt nu zien dat de zijbalkmodule de elementen van de zijbalkwidget (zoeken en recente artikelen) weergeeft en ze weergeeft in het verticale zijbalkgebied van uw speciale sectie.

Inhoudsopties voor de zijbalk

Op het tabblad Inhoud vind je alle inhoudselementen van de module, zoals tekst, afbeeldingen en iconen. Alles dat bepaalt wat er in uw module wordt weergegeven, vindt u altijd op dit tabblad.

Widgets

De zijbalkmodule gebruikt vakken voor het maken van widgets die u kunt maken op het tabblad Uiterlijk> Widgets. U kunt een van uw aangepaste widgetgebieden selecteren in dit vervolgkeuzemenu.

Admin-label

Hierdoor wordt het modulelabel in de constructor gewijzigd voor gemakkelijke identificatie. Wanneer u de WireFrame-weergave in Visual Builder gebruikt, verschijnen deze labels in het moduleblok van de Divi Builder-interface.

Ontwerpopties zijbalk

Op het tabblad Ontwerpen vindt u alle stijlopties voor de module, zoals lettertypen, kleuren, grootte en spatiëring. Dit is het tabblad dat u gaat gebruiken om het uiterlijk van uw module te wijzigen. Elke Divi-module heeft een lange lijst met ontwerpinstellingen die u kunt gebruiken om alles te wijzigen.

Beeldoriëntatie

Hier kunt u kiezen aan welke kant van de pagina uw zijbalk wordt weergegeven. Deze parameter bepaalt de oriëntatie van de tekst en de positie van de rand.

Verwijder het randscheidingsteken

Hier kunt u de dunne grijze rand verwijderen die uw zijbalk scheidt van de inhoud van uw pagina.

Tekstkleur

Hier kunt u kiezen of uw tekst licht of donker moet zijn. Als u op een donkere achtergrond werkt, moet uw tekst licht zijn. Als uw achtergrond licht is, moet uw tekst donker zijn.

Header lettertype

U kunt het lettertype van uw koptekst wijzigen door het gewenste lettertype te selecteren in het vervolgkeuzemenu. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met opties voor vet, cursief, hoofdletters en onderstrepen.

Lettergrootte koptekst

Hier kunt u de grootte van uw koptekst aanpassen. U kunt de bereikschuifregelaar slepen om de grootte van uw tekst te vergroten of verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks invoeren in het invoerveld rechts van de schuifregelaar. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Kleur koptekst

Standaard worden alle tekstkleuren in Divi weergegeven in wit of donkergrijs. Als u de kleur van uw koptekst wilt wijzigen, kiest u met deze optie de gewenste kleur uit de kleurkiezer.

Tussenruimte koptekst

Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw koptekst wilt vergroten, gebruikt u de bereikschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Hoogte koprij

De regelhoogte is van invloed op de ruimte tussen elke regel van uw koptekst. Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de schuifregelaar om de ruimte aan te passen of voert u de gewenste afstand in het veld in. invoer rechts van de schuifregelaar. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Lichaamsdoopvont

U kunt uw hoofdlettertype wijzigen door het gewenste lettertype te selecteren in het vervolgkeuzemenu. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met opties voor vet, cursief, hoofdletters en onderstrepen.

Tekst lettergrootte

Hier kunt u de grootte van uw hoofdtekst aanpassen. U kunt de schuifregelaar slepen om de grootte van uw tekst te vergroten of te verkleinen, of u kunt de waarde van de gewenste tekstgrootte rechtstreeks in het invoerveld rechts van de schuifregelaar invoeren. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Tekstkleur hoofdtekst

Standaard worden alle tekstkleuren in Divi weergegeven in wit of donkergrijs. Als u de kleur van uw tekst wilt wijzigen, kiest u met deze optie de gewenste kleur uit de kleurenkiezer.

Afstand van hoofdletters

Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw tekst wilt vergroten, gebruikt u de bereikschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Hoogte van de lichaamslijn

De regelhoogte is van invloed op de ruimte tussen elke regel tekst in uw lichaam.Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de bereikschuifregelaar om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld in rechts van de cursor. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Geavanceerde zijbalkopties

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 toepassen op elk van de vele elementen van de module. U kunt ook aangepaste CSS-klassen en ID's op de module toepassen, die kunnen worden gebruikt om de module aan te passen in het style.css-bestand van uw child-thema.

CSS ID

Voer een optionele CSS-ID in om voor deze module te gebruiken. Een ID kan worden gebruikt om een aangepaste CSS-stijl te maken of om naar bepaalde secties van uw pagina te linken.

CSS-klasse

Voer de optionele CSS-klassen in die voor deze module moeten worden gebruikt. Een CSS-klasse kan worden gebruikt om een aangepaste CSS-stijl te maken. U kunt meerdere klassen toevoegen, gescheiden door een spatie. Deze klassen kunnen worden gebruikt in uw Divi-child-thema of in de aangepaste CSS-stylesheet die u aan uw pagina of aan uw website toevoegt met behulp van de Divi-thema-opties of de instellingen op de Divi Builder-pagina.

Aangepaste CSS

Aangepaste CSS kan ook worden toegepast op de module en elk van de interne onderdelen van de module. In de sectie Aangepaste CSS vindt u een tekstveld waar u aangepaste CSS-stijlpagina's rechtstreeks aan elk element kunt toevoegen. CSS-vermeldingen in deze instellingen zijn al verpakt in stijltags. Voer dus gewoon de CSS-regels in, gescheiden door puntkomma's.

zichtbaarheid

Met deze optie kunt u de apparaten bedienen waarop uw module verschijnt. U kunt ervoor kiezen om uw module afzonderlijk op tablets, smartphones of desktops te deactiveren. Dit is handig als u verschillende mods op verschillende apparaten wilt gebruiken, of als u het mobiele ontwerp wilt vereenvoudigen door bepaalde elementen van de pagina te verwijderen.

[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=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DIVI THEMA [/vcex_button][/vc_column][vc_column width=” 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 DE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andere Divi-zelfstudies

Vergelijkbare artikelen

3 Reacties

Aurélie op 22 oktober 2019 om 16 uur 53 min

Dag
In tegenstelling tot jou probeer ik de zijbalk op de pagina's van mijn blogartikelen te verwijderen en ik weet niet hoe ik dit moet doen in de nieuwe Divi 4-versie
Heb je een tip?
merci
Aurélie
antwoord
Cess Telo op 29 maart 2019 om 15 uur 02 min

Hallo en bedankt voor deze tutorials.

Bent u in dit voorbeeld begonnen met een pagina over de volledige breedte of met een sjabloon met een originele zijbalk?
antwoord
- Thierry Bertrand op 1 april 2019 om 16:25 uur
  
  Hallo Cess, ik weet het niet echt meer.
  antwoord

Plaats de reactie Annuler la réponse

Deze site gebruikt Akismet om ongewenst te verminderen. Meer informatie over hoe uw opmerkingen worden gebruikt.

Divi-zelfstudie: de Zone Widget-module gebruiken

Hoe een Zonde-widgetmodule van Divi toe te voegen