Divi's code module

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.

Wat is de Divi Code Module?

De Code Module is een leeg canvas waarmee je code aan je pagina kunt toevoegen, zoals plugin shortcodes of statische HTML. Als je een plugin van een derde partij wilt gebruiken, bijvoorbeeld een slider plugin van een derde partij, kun je de shortcode van de plugin gewoon in een standaard of full-width code module plaatsen om het element onbelemmerd weer te geven.

Een code module toevoegen aan je pagina

Voordat je een code module 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 door je website bladert als je bent ingelogd op je WordPress dashboard.

Zodra je Visual Builder hebt geopend , kun je op de grijze + knop klikken om een nieuwe module aan je pagina toe te voegen. Nieuwe modules kunnen alleen binnen rijen worden toegevoegd. Als je een nieuwe pagina begint, vergeet dan niet om eerst een rij aan je pagina toe te voegen.

Zoek de codemodule 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 je ook het woord "code" kunt intypen en dan op de enter knop kunt klikken om de code module te vinden en automatisch toe te voegen! Zodra de module is toegevoegd, wordt u begroet met een lijst met opties voor de module. Deze opties zijn verdeeld in drie hoofdgroepen: Inhoud, Stijl en Geavanceerd.

Voorbeeld use case: Een extern stijlblad toevoegen om de inhoud van een individuele pagina te animeren

In dit voorbeeld ga ik een linkscript toevoegen om Animate.css te importeren om animatie-effecten toe te voegen aan de pagina-elementen. Omdat het bestand Animate.css veel code bevat, is het zinvol om het alleen te laden op de pagina die ik nodig heb.

Voeg gewoon een normale sectie en een rij over de volledige breedte (1 kolom) toe en voeg de Code-module toe.

Voeg in het tekstvak voor de inhoud het codefragment toe.

Nu hoef je alleen nog maar wat CSS-klassen toe te voegen om elk element van je CSS-klassenpagina te animeren op je pagina. In dit voorbeeld laat ik de knop stuiteren als de pagina wordt geladen.

In de instellingen van de knopmodule, op het tabblad Geavanceerd, voer je de twee klassen "animated" en "bounce" in het CSS class tekstvak in.

De knop stuitert nu bij het laden van de pagina.

Hier zijn nog een paar voorbeelden van hoe je de code module kunt gebruiken:

1. Voeg blokken javascriptcode of bibliotheken toe die alleen van toepassing zijn op je pagina.
2. Plugins van derden integreren, zoals de revolution slider.
3. Je kunt de code module over de volledige breedte gebruiken om een standaardformulier te integreren voor meer interactieve vragenlijsten, contactformulieren, enz.
4. Een zwevend actiemenu toevoegen
5. Een glijdende bovenbalkadvertentie maken.
6. Voeg een zwevende actieknop toe.

Tip: Soms zorgt het toevoegen van code met regeleinden ervoor dat de code niet werkt. Het is het beste om je code in een teksteditor te maken en aan elkaar te rijgen (alles op één regel) voordat je het in de Code-module plakt.

Videopresentatie van de Divi code module

Conclusie

Bedankt voor het volgen van deze tutorial!

De Code Module is een andere manier om je website te personaliseren en te verlevendigen door deze dynamische toets toe te voegen.

Tot snel voor een volgende tutorial ;)

Voor meer informatie over Divi van Elegant Themes en hoe je het kunt gebruiken

Divi's commentaarmodule

De contactformuliermodule van Divi beheren

> Raadpleeg onze Elegant Themes Divi helpsectie