De codemodule is een leeg canvas waarmee u code aan uw pagina kunt toevoegen, zoals shortcodes voor plug-ins of statische HTML-code. Als je een plug-in van derden wilt gebruiken, bijvoorbeeld een schuifregelaar-plug-in van een derde, kun je de shortcode van de plug-in eenvoudig in een standaard of volledige codemodule plaatsen om het element onbelemmerd weer te geven.
Hoe een codemodule aan uw pagina toe te voegen
Voordat u een codemodule aan uw pagina kunt toevoegen, moet u eerst de Divi Builder openen. Zodra de Divi-thema geïnstalleerd op uw Site web, je ziet een knop Gebruik Divi Builder boven de uitgever telkens wanneer u een nieuwe pagina maakt.
Door op deze knop te klikken, activeert u Divi Builder, waarmee u toegang krijgt 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 upstream als u bent ingelogd op uw WordPress-dashboard.
Eenmaal ingevoerd in Visual Builder, kunt u op de grijze plusknop 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 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 u ook het woord "code" kunt typen en vervolgens op enter kunt drukken om de codemodule automatisch te zoeken en toe te voegen! Zodra de module is toegevoegd, wordt u begroet met de lijst met module-opties. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerpfase et vergevorderd .
Gebruik case door een saai stylesheet toe te voegen om inhoud op een individuele pagina te animeren
In dit voorbeeld zal ik een linkscript toevoegen om Animate.css te importeren om animatie-effecten toe te voegen aan de elementen op de pagina. Omdat het Animate.css-bestand veel code bevat, is het logisch om het alleen op de pagina te laden die ik nodig heb.
Voeg gewoon een normale sectie en een regel over de volledige breedte (1-kolom) toe en voeg de codemodule toe.
In het tekstvak van inhoud, voeg het codefragment toe.
Het enige dat u hoeft te doen, is een paar CSS-klassen toevoegen om elk element van uw CSS-klassenpagina op uw pagina te animeren. In dit voorbeeld laat ik de knop bouncen wanneer de pagina wordt geladen.
Voer in de instellingen van de Button module, op het tabblad Geavanceerd, de twee klassen "geanimeerd" en "bounce" in het tekstvak CSS-klasse in.
Nu kaatst de knop wanneer de pagina wordt geladen.
Tip: soms zorgt het toevoegen van code met regeleinden ervoor dat de code niet meer werkt. Het is beter om uw code in een teksteditor te maken en deze in de codemodule te plakken.
Codeer inhoudsopties
In het tabblad van inhoudvind je alle inhoudselementen van de module, zoals tekst, afbeeldingen en iconen. Alles wat controleert wat verschijnt in uw module zal altijd op dit tabblad staan.
Inhoud
Hier kunt u elke HTML-, CSS- of JavaScript-code plaatsen die u op de huidige locatie op de pagina wilt weergeven. Alleen redacteuren en beheerders mogen ongefilterde HTML plaatsen, wat betekent dat code uit de cursus kan worden verwijderd als deze door een auteur of bijdrager wordt gebruikt. U kunt ook shortcodes in de module plaatsen. Deze cursuscodes (shortcodes) worden weergegeven in de bovenliggende kolom zonder extra wrappers van Divi-modules.
Administratie label
Hierdoor wordt het modulelabel in de generator gewijzigd voor gemakkelijke identificatie. Wanneer u de WireFrame-weergave in Visual Builder gebruikt, verschijnen deze labels in het moduleblok van de Divi Builder-interface.
Code ontwerpopties
Op het tabblad Ontwerpen vindt u alle stijlopties voor de module, zoals lettertypen, kleuren, grootte en spatiëring. Op dit tabblad kunt u het uiterlijk van uw module wijzigen. Elke Divi-module heeft een lange lijst met ontwerpinstellingen die u kunt gebruiken om vrijwel alles aan te passen.
Maximale breedte
Elke waarde die hier wordt ingevoerd, beperkt de breedte van elke inhoud die in de codemodule wordt weergegeven tot de ingestelde waarde. Als u bijvoorbeeld 50% invoert in het invoerveld, wordt de inhoud van de codemodule teruggebracht tot 50% van de kolom die deze bevat.
Code Geavanceerde opties Code
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 eenvoudig te gebruiken CSS-ID in voor deze module. Een ID kan worden gebruikt om een aangepaste CSS-stijl te maken of om te linken naar bepaalde secties van uw pagina.
CSS-klasse
Voer de optionele CSS-klassen in die voor deze module moeten worden gebruikt. Een CSS-klasse kan worden gebruikt om aangepaste CSS-styling te maken. U kunt meerdere klassen toevoegen, gescheiden door een spatie. Deze lessen kunnen worden gebruikt in uw Divi-thema Kind of in de aangepaste CSS die u toevoegt aan uw pagina of uw Site web met behulp van Divi-themaopties of Divi Builder-pagina-instellingen.
Aangepaste CSS
Aangepaste CSS kan ook worden toegepast op de module en alle interne elementen van de module. In het gedeelte Aangepaste CSS vindt u een tekstveld waarin u CSS rechtstreeks aan elk element kunt toevoegen. De CSS-items in deze instellingen zijn al ingesloten met stijltags. U hoeft dus alleen maar CSS-regels in te voeren, 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.
Dat is het voor deze tutorial.
