Divi's afbeeldingsmodule

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 Image Module?

Divi maakt het gemakkelijk om overal op de pagina afbeeldingen toe te voegen. Alle afbeeldingen ondersteunen lui laden en worden geleverd met 4 verschillende animatiestijlen die het navigeren op je website leuk en boeiend maken. Afbeeldingsmodules kunnen in elke kolom worden geplaatst die je aanmaakt en hun grootte wordt dienovereenkomstig aangepast.

Zo voeg je een afbeeldingsmodule toe aan je pagina

Voordat je een afbeeldingsmodule 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 op 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 afbeeldingsmodule 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 "afbeelding" kunt intypen en dan op de knop Enter kunt klikken om de afbeeldingsmodule 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 onderverdeeld in drie hoofdgroepen: Inhoud, Stijl en Geavanceerd.

Gebruiksvoorbeeld: Overlappende afbeeldingen toevoegen om diensten op een dienstenpagina te illustreren

Er zijn talloze manieren om de afbeeldingsmodule te gebruiken. In dit voorbeeld laat ik zien hoe je afbeeldingen kunt toevoegen aan een dienstenpagina voor een website van een klein bedrijf. Hier ga ik de afbeeldingen toevoegen. Elke rode cirkel stelt een afbeelding voor.

Omdat het toevoegen van een afbeelding aan een pagina een vrij eenvoudig en rechttoe rechtaan proces is, ga ik een beetje aangepaste styling toevoegen om mijn afbeeldingen zo te plaatsen dat ze elkaar overlappen, waardoor een gestapeld effect ontstaat.

Laten we meteen aan de slag gaan!

Gebruik de visual builder om een standaardsectie toe te voegen met een 1/4 1/4 1/4 1/2 lay-out. Voeg vervolgens een tekstelement toe aan de rechter 1/2 kolom van je rij. Voer een koptekst en een beschrijving van de dienst in.

Voeg vervolgens een afbeeldingsmodule toe in de 1/4 kolom aan de linkerkant.

Vul de daarvoor bestemde velden in

Voeg nog een afbeeldingsmodule toe in de tweede 1/4 kolom (of middelste kolom) en werk de afbeeldingsparameters bij.

Dat was het voor de eerste sectie. Voor het volgende servicegedeelte kunnen we het gedeelte dat we zojuist hebben gemaakt dupliceren. Zodra deze gedupliceerd is, verander je de kolomstructuur van de rij in een 1/2 1/4 1/4 kolom lay-out (het tegenovergestelde van de vorige).

Sleep vervolgens het tekstelement met de dienstkop en beschrijving naar de linker 1/2 kolom. Zorg ervoor dat u de twee afbeeldingsmodules versleept om elke 1/4 kolom te vullen (nu aan de rechterkant).

Omdat de afbeeldingsmodules duplicaten zijn, moeten we de nieuwe afbeeldingen uploaden voor dit specifieke serviceonderdeel. Bovendien hebben de modules nog steeds dezelfde aangepaste marge-instellingen als de eerste twee afbeeldingsmodules die zijn gemaakt. Breng de gewenste wijzigingen aan.

Videopresentatie van de Divi afbeeldingsmodule

Conclusie

Gefeliciteerd! Je weet nu hoe je afbeeldingen kunt invoegen op je website om deze zo aantrekkelijk mogelijk te maken :)

Bedankt voor het volgen van deze tutorial! Heb je nog vragen of opmerkingen? Stuur ze naar ons in de reacties hieronder ;) We horen graag van je :)

Om meer te weten te komen over Elegant Themes Divi en hoe het te gebruiken

Divi Inlogmodule

Divi Kaarten Module

> Bekijk onze Elegant Themes Divi helpsectie