De code van je Extra-thema aanpassen

Procédure

Inleiding

LWS biedt je 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.

De code van uw Extra-thema aanpassen

Je kunt de Code module gebruiken om aangepaste HTML en/of WordPress shortcodes aan je lay-outs toe te voegen. In het bovenstaande voorbeeld hebben we een e-mail opt-in formulier toegevoegd met behulp van een shortcode van de e-mail opt-in plugin Bloom.

Hoe voeg je een code module toe aan je pagina?

Voordat je een code-module aan je pagina kunt toevoegen, moet je eerst overschakelen naar de Divi Builder. Zodra het Extra-thema op je website is geïnstalleerd, zie je telkens wanneer je een nieuwe pagina maakt een knop Divi Builder gebruiken 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.

Nu stuitert de knop bij het laden van de pagina!

Conclusie

Bedankt voor het volgen van deze tutorial!

Gebruik de code-module om aangepaste code op je pagina te plaatsen, zoals HTML en JS, of om korte codes van derden in te voeren.

Tot snel voor een volgende tutorial ;)

Voor meer informatie over het Extra-thema en hoe je het kunt gebruiken

Een blog maken met het Extra-thema

De Extra tekstmodule

> Raadpleeg onze Extra thema helpsectie