Divi maakt het eenvoudig om overal afbeeldingen toe te voegen jouw blog. Alle afbeeldingen ondersteunen progressief laden en worden geleverd met 4 verschillende animatiestijlen die het navigeren op uw site leuk en boeiend maken. Afbeeldingsmodules kunnen in elke kolom die u maakt worden geplaatst en hun grootte wordt aangepast.
Hoe een beeldmodule van Divi toe te voegen
Voordat u een afbeeldingsmodule aan uw pagina kunt toevoegen, moet u eerst naar Divi Builder springen. Zodra de Divi-thema geïnstalleerd op uw website, ziet u 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 website op de voorgrond bladert en u bent verbonden met uw WordPress-dashboard.
Nadat u de Visual Builder heeft geactiveerd, 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 afbeeldingsmodule in de lijst met modules en klik erop om deze aan uw pagina toe te voegen. De lijst met mods is doorzoekbaar, wat betekent dat je ook het woord "image" kunt typen en dan op enter kunt klikken om automatisch de image mod 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: overlappende afbeeldingen toevoegen om services op een servicespagina te illustreren
Er zijn talloze manieren om de afbeeldingsmodule te gebruiken. Voor dit voorbeeld laat ik u zien hoe u afbeeldingen toevoegt aan een servicepagina voor een kleine bedrijfswebsite. Hier zal ik de afbeeldingen toevoegen. Elke rode cirkel vertegenwoordigt een afbeelding.
Aangezien het toevoegen van een afbeelding aan een pagina een vrij eenvoudig en duidelijk proces is, ga ik een aangepaste stijl toevoegen om mijn afbeeldingen zo te positioneren dat ze elkaar overlappen, waardoor een gestapeld effect ontstaat.
Laten we beginnen.
Gebruik de visuele builder om een standaardsectie toe te voegen met een 1/4 1/4 1/2 lay-out. Voeg vervolgens een tekstmodule toe aan de rechterkolom 1/2 van uw rij. Voer een koptekst en beschrijving in voor de service.
Voeg vervolgens een afbeeldingsmodule toe aan de meest linkse 1/4 kolom.
Werk de instellingen van de Afbeelding-module als volgt bij:
Inhoud opties
Afbeeldings-URL: [voer URL in of download de afbeelding met afmetingen 500 × 625]
Ontwerpopties
Aangepaste marge: links -60px
Opties AVANCEES
Animatie: van links naar rechts
Instellingen opslaan
Voeg nog een afbeeldingsmodule toe in de tweede 1/4 kolom (of middelste kolom) en werk de afbeeldingsinstellingen als volgt bij:
Inhoud opties
Afbeeldings-URL: [voer URL in of download de afbeelding met afmetingen 500 × 625]
Ontwerpopties
Aangepaste marge: Boven 100px, -60px links
Opties AVANCEES
Animatie: van rechts naar links
Instellingen opslaan
Dit zorgt voor het eerste deel. Nu kunnen we voor de volgende servicesectie de sectie dupliceren die we zojuist hebben gemaakt voor de eerste servicesectie. Zodra de sectie is gedupliceerd, wijzigt u de kolomstructuur in een 1/2 1/4 1/4 kolomindeling (het tegenovergestelde van de vorige).
Sleep vervolgens de tekstmodule met de koptekst en beschrijving van de service naar kolom 1/2 helemaal links. Zorg ervoor dat u de twee afbeeldingsmodules verschuift om elke 1/4 kolom te vullen (nu aan de rechterkant).
Omdat de afbeeldingsmodules duplicaten zijn, moeten we de nieuwe afbeeldingen voor dat specifieke servicesectie uploaden. Modules hebben ook altijd aangepaste marge-instellingen zoals de eerste twee gemaakte afbeeldingsmodules. Laten we dat veranderen.
Begin met de module Afbeelding in de rechter kolom 1 / 4 en werk de volgende afbeeldingsinstellingen bij:
Inhoud opties
Afbeeldings-URL: [voer URL in of download de afbeelding met afmetingen 500 × 625]
Ontwerpopties
Aangepaste marge: -60px links (alleen)
Tabblad Geavanceerd
Animatie: van rechts naar links
Werk ten slotte de beeldinstellingen voor de 1/4 middenkolombeeldmodule bij met het volgende:
Inhoud opties
Afbeeldings-URL: [voer URL in of download de afbeelding met afmetingen 500 × 625]
Ontwerpopties
Aangepaste marge: 100px Omhoog, -60px Rechts
Tabblad Geavanceerd
Animatie: van links naar rechts
Instellingen opslaan
Bekijk nu de pagina!
Beeldmodule inhoud opties
Op het inhoudstabblad vind je alle inhoudselementen van de module, zoals tekst, afbeeldingen en iconen. Dat alles controleert wat verschijnt in uw module, vindt u altijd op dit tabblad.
afbeelding URL
Plaats hier een geldige afbeeldings-url, of kies / upload een afbeelding via de WordPress mediabibliotheek. Afbeeldingen verschijnen altijd links uitgelijnd in hun kolommen en beslaan de volledige breedte van uw kolom. Uw afbeelding zal echter nooit groter zijn dan de oorspronkelijke grootte. De hoogte van de afbeelding wordt bepaald door de beeldverhouding van uw originele afbeelding.
Open in de kijker
Hier kunt u kiezen of uw afbeelding al dan niet in een viewer wordt geopend wanneer u erop klikt. Als deze optie is ingeschakeld, zal uw afbeelding "zoomen" naar de maximale grootte wanneer u in een modaal venster klikt. Het is een geweldige functie voor portemonnees.
Link-URL
Plaats een geldige web-URL in dit veld om van uw afbeelding een link te maken. Als u dit veld leeg laat, blijft uw afbeelding een statisch element.
De URL openen
U kunt hier kiezen of uw link in een nieuw venster wordt geopend.
Beheerderslabel
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 voor beeldmodule
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.
Afbeelding overlay
Als deze optie is ingeschakeld, worden een kleur en een overlay-pictogram weergegeven wanneer een bezoeker over de afbeelding beweegt.
Kleur pictogram overlay
Hier kunt u een aangepaste kleur instellen voor het overlay-pictogram
Bedek de overlay-kleur
Hier kunt u een aangepaste kleur voor de overlay definiëren.
Overvliegen pictogram
Hier kunt u een aangepast pictogram voor de overlay definiëren.
Verwijder ruimte onder afbeelding
Deze optie is alleen van invloed op afbeeldingen als ze de laatste module in een kolom zijn. Als deze optie is ingeschakeld, wordt de afstand tussen de onderkant van de afbeelding en de volgende sectie verwijderd, waardoor de afbeelding de bovenkant van de volgende sectie van de pagina kan omkaderen.
Afbeelding uitlijning
Hier kies je de richting waarin je afbeelding in de kolom zweeft. U kunt de afbeelding naar links of rechts laten zweven of gecentreerd houden.
Centreer de afbeelding altijd op de mobiel
Kleine afbeeldingen zijn vaak een lust voor het oog op mobiele apparaten wanneer ze gecentreerd zijn. Als de kolommen falen, worden afbeeldingen die links of rechts zijn uitgelijnd in kleinere kolommen, verweesd wanneer de kolommen falen en 100% breed worden. Deze kolom inschakelen met geforceerde afbeeldingen om uit te lijnen met het midden van de kolom op mobiele apparaten zonder de uitlijning van afbeeldingen op desktops te beïnvloeden.
Gebruik de rand
Als u deze optie inschakelt, wordt er een rand rond uw module geplaatst. Deze rand kan worden aangepast met behulp van de volgende voorwaardelijke parameters.
Kleur van de rand
Deze optie heeft invloed op de kleur van uw rand. Selecteer een aangepaste kleur uit de kleurkiezer om deze op uw rand toe te passen.
Breedte van de rand
Standaard zijn de randen 1 pixel breed. U kunt deze waarde verhogen door de bereikschuifregelaar te slepen of een aangepaste waarde in het invoerveld rechts van de schuifregelaar in te voeren. Aangepaste maateenheden worden ondersteund, wat betekent dat u de standaardeenheid kunt wijzigen van "px" in iets anders zoals em, vh, vw enz.
Randstijl
Randen ondersteunen acht verschillende stijlen: effen, gestippeld, gestippeld, dubbel, groef, rand, overlay en start. Selecteer de gewenste stijl in het vervolgkeuzemenu om deze op uw rand toe te passen.
Maximale afbeeldingsbreedte
Standaard is de maximale afbeeldingsbreedte ingesteld op 100%. Dit betekent dat de afbeelding op zijn natuurlijke breedte wordt weergegeven, tenzij de breedte van de afbeelding groter is dan de breedte van de bovenliggende kolom, in welk geval de afbeelding wordt beperkt tot 100% van de kolombreedte. Als u de maximale breedte van de afbeelding verder wilt beperken, kunt u dat doen door hier de gewenste maximale breedte in te voeren. Een waarde van 50% zou bijvoorbeeld de breedte van de afbeelding beperken tot 50% van de breedte van de bovenliggende kolom.
Forceer de volledige breedte
Standaard worden afbeeldingen op hun oorspronkelijke breedte weergegeven. U kunt er echter voor kiezen om de afbeelding de volledige breedte van de bovenliggende kolom te laten overspannen door deze optie in te schakelen.
Aangepaste marge
De marge is de ruimte die aan de buitenkant van uw module wordt toegevoegd, tussen de module en het volgende element erboven, eronder of links en rechts ervan. U kunt aangepaste margewaarden toevoegen aan elk van de vier zijden van de module. Om de aangepaste marge te verwijderen, verwijdert u de toegevoegde waarde uit het invoerveld. Standaard worden deze waarden gemeten in pixels, maar u kunt aangepaste maateenheden invoeren in de invoervelden.
Geavanceerde afbeeldingsmodule-opties
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.
Animatie
Gebruik dit vervolgkeuzemenu om de lazy loading-animatie voor uw afbeelding te specificeren. U kunt ervoor kiezen om uw afbeelding rechts, links, onder of boven te laten verschijnen.
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.
Alternatieve afbeeldingstekst
De alt-tekst biedt alle benodigde informatie als de afbeelding niet wordt geladen, niet correct wordt weergegeven of in een andere situatie waarin een gebruiker de afbeelding niet kan zien. Het maakt het ook mogelijk dat de afbeelding wordt gelezen en herkend door zoekmachines.
[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
- 5 websites voor restaurant gebruik Divi thema
- Tekst toevoegen aan een Divi WooCommerce-product
- Hoe de menukleur tussen Divi-pagina's te veranderen
- Hoe de rasters van een blog personaliseren met Divi
- Hoe de rol Divi editor op WordPress
- Een Divi-schuifregelaar op volledig scherm maken
- Hoe de kleur van menu's tussen Divi-pagina's te veranderen
- Functies die u waarschijnlijk niet kent over Divi
- Divi Builder gebruiken op WordPress
- Hoe de Divi-scrolmodule video te gebruiken
- Hoe de Divi Builder Flip-module te gebruiken
- Hoe een getuigenismodule op Divi Builder toe te voegen
- Hoe de Divi-tekstmodule te gebruiken
- Hoe maak je een schuifregelaar op Divi
- Hoe u een Divi-gebruikersrol kunt bewerken
- Hoe de Divi Social Media-module te gebruiken
- Hoe de shopmodule te gebruiken met het thema WordPress Divi
- Hoe de Divi zijbalkmodule te gebruiken
- Hoe de Divi Price Table-module te gebruiken
- Hoe de titelmodule van Divi-publicaties te gebruiken
- Hoe een videomodule van Divi toe te voegen
- Hoe de artikelnavigatiemodule te gebruiken
- Hoe de Divi-zoekmodule te gebruiken
- Hoe de Divi wallet-module te gebruiken
- Hoe de persoonsmodule op Divi Builder te gebruiken
- De walletmodule gebruiken met Divi-filter
- De schuifregelaarmodule op de volledige breedte gebruiken
- Hoe de Divi Builder-beeldmodule te gebruiken
- De navigatiemodule op de volledige breedte van Divi Builder gebruiken
- Hoe de afbeeldingengalerij-module te gebruiken
- Hoe de Divi Builder kaartmodule met volledige breedte te gebruiken
- Hoe de Divi Full Width Portfolio Module te gebruiken
- Hoe de Divi header-module over de volle breedte te gebruiken
- Hoe de Divi Counter-module te gebruiken
- De schuifregelaar voor artikelen gebruiken in Divi Builder
- Hoe de Divi Email Optin-module te gebruiken