Divi: aangepaste afbeeldingsoverlays maken

Wilt u leren hoe u aangepaste afbeeldingsoverlays kunt ontwerpen met? Divi ?

Beeldoverlays bestaan ​​al heel lang in webdesign. Ze zijn perfect om mee te doen bezoekers door te onthullen inhoud Extra en ontwerpelementen wanneer u over de afbeelding beweegt. 

In deze zelfstudie laten we u zien hoe u aangepaste afbeeldingsoverlays ontwerpt in Divi. Deze overlays veranderen en onthullen elementen wanneer u de muisaanwijzer over de afbeelding beweegt. 

Er zijn geen plug-ins nodig.

Laten we beginnen!

overzicht

Hier is een korte blik op het ontwerp dat we in deze zelfstudie gaan maken.

Maak een nieuwe pagina met Divi Builder

Ga vanuit het WordPress-dashboard naar Pagina's> Nieuwe toevoegen om een ​​nieuwe pagina te maken.

Geef het een titel die voor jou logisch is en klik op Te gebruiken Divi Bouwer

klik vervolgens op Begin met bouwen (Bouw vanaf het begin)

Daarna heb je een leeg canvas om te beginnen met ontwerpen in Divi.

Aangepaste afbeeldingsoverlays maken in Divi

Ontwerp de sectie, rij en kolommen

Maak om te beginnen een rij met drie kolommen in de standaardsectie.

Open sectie-instellingen en voeg de volgende achtergrondkleur toe:

• Achtergrond: #3a0ca3

Open vervolgens de instellingen van kolom 1 en werk het volgende bij:

• CSS-klasse: et-overlay-container

• Horizontale overloop: verborgen
• Verticale overloop: verborgen

Voeg afbeelding toe

Nu de sectie, rij en kolom gereed zijn, voegt u een nieuwe afbeeldingsmodule toe aan kolom 1. Dit wordt de hoofdafbeelding achter onze overlay-ontwerpen.

Upload een afbeelding die meer op een portret dan op een landschap lijkt. Zorg ervoor dat het breed genoeg is om de volledige kolombreedte te beslaan in alle browserformaten.

OPMERKING: U kunt liggende afbeeldingen gebruiken, maar het kan zijn dat u de positionering van de overlay-elementen dienovereenkomstig moet aanpassen, zodat ze elkaar niet overlappen.

Onder het tabblad Design, werk het volgende bij:

• Marge (onder): 0px

Onder het tabblad Geavanceerd, voeg de volgende CSS-klasse toe:

• CSS-klasse: et-overlay-image

Afbeelding overlay-kleur toevoegen met behulp van een "Divider" -module

Om de afbeeldingsoverlay-kleur te maken, gebruiken we een Divider-module.

Voeg eerst een Divider-module toe onder de afbeelding.

Plaats vervolgens het scheidingsteken in absoluut zodat het boven de afbeelding wordt geplaatst:

• Positie: Absoluut

Onder het tabblad Content, werk het volgende bij:

• Show Divider: NEE

• Achtergrondkleur: rgba (247,37,133,0.8)

Werk vervolgens de hoogte en breedte van het scheidingsteken bij:

• Breedte: 100%
• Hoogte: 100%

Voeg met het ontwerp op zijn plaats de volgende CSS-klasse toe aan de splitter:

• en-overlay-item

OPMERKING: Deze klasse moet worden toegevoegd aan alle overlay-ontwerpelementen die u alleen bij het aanwijzen wilt weergeven. Als u niet wilt dat het element in eerste instantie wordt verborgen, laat het dan weg.

Om u te helpen bij het bijhouden van ontwerpelementen/modules, opent u de lagen modal en labelt u de module Divider ("Overlay Color").

Overlay koptekst toegevoegd

Voeg onder de module Divider een nieuwe tekstmodule toe. Dit zal dienen als de overlay-koptekst die bij de muisaanwijzer boven aan de afbeelding wordt weergegeven.

Update de inhoud met een H2-titel:

<h2>Coaching</h2>

Werk vervolgens het label van de tekstmodule bij voor toekomstig gebruik.

Onder het tabblad Design, werk het volgende bij:

• Tekstuitlijning: gecentreerd
• Tekstkleur: Licht

• Lettertype: Aalscholver Garamond
• Lettergewicht: Vet
• Tekstgrootte: 40px

• Breedte: 100%
• Maximale breedte: 85%

Onder het tabblad Geavanceerd, werk de positie als volgt bij:

• Positie: Absoluut
• Locatie: midden boven
• Verticale verschuiving: 10%

OPMERKING: De verticale offset moet mogelijk worden aangepast, afhankelijk van de hoogte-breedteverhouding van de afbeelding. Voor een afbeelding van het landschapstype kan bijvoorbeeld minder offset nodig zijn

Voeg vervolgens de volgende CSS-klassen toe aan de tekstmodule:

• CSS-klasse: et-overlay-item verplaatsen-omlaag

Naast de les “en-overlay-item”, we voegen een extra klasse toe "Naar beneden verplaatsen" om de aangepaste CSS te gebruiken om de kop iets naar beneden te verplaatsen tijdens het zweven.

De overlappende hoofdtekst maken

Om de hoofdtekstoverlay te maken, kunnen we de tekstmodule dupliceren die wordt gebruikt voor de koptekstoverlay. Voordat u de dubbele parameters bijwerkt, wijzigt u het label in "Overlay Body".

Open de tekstinstellingen van de nieuwe Tekstmodule en update de inhoud van de hoofdtekst met een paar zinnen alineatekst.

Onder het tabblad Geavanceerd, verander de absolute locatie van de module naar het midden.

Aangezien we niet willen dat dit bij de hover (alleen weergegeven) wordt verplaatst, werkt u de CSS-klasse bij om alleen het volgende op te nemen:

• CSS-klasse: et-overlay-item

De overlay-knop maken

De laatste overlay op deze afbeelding is de knop. Om de knop te maken, voegt u een nieuwe knopmodule toe onder de tweede tekstmodule.

Werk de positie van de knop als volgt bij voordat u het ontwerp wijzigt:

• Positie: absoluut
• Verticale verschuiving: 10%

Nu moet de knop gecentreerd zijn op het onderste deel van de afbeelding.

In het tabblad Geavanceerd, werk de CSS-klasse bij en voeg als volgt een aangepast CSS-fragment toe aan het hoofdelement:

• CSS-klasse: et-overlay-item verplaatsen

• Belangrijkste CSS-element:

min-width: 15em;

Merk op dat er een extra klasse aan de knop is toegevoegd om deze iets naar boven te verplaatsen bij de muisaanwijzer. Dit is een aanvulling op de neerwaartse beweging van de koptekst bij het zweven.

Werk vervolgens de volgende ontwerpinstellingen bij:

• Knopuitlijning: gecentreerd
• Gebruik aangepaste stijlen voor knop: JA
• Tekstgrootte knop: 14px
• Achtergrondkleur: #4361ee

• Breedte knoprand: 0 pixels
• Knop Letterafstand: 0,1em
• Lettergewicht: Vet
• Knop Lettertypestijl: TT
• Vulling: 0,8em (boven en onder), 0px (links en rechts)

Aangepaste CSS toevoegen met de Code-module

Voeg een Code-module toe onder de knop.

Plak vervolgens de volgende CSS in de code-inhoud. Vergeet niet de code in de benodigde scripttags te plaatsen.

<style>
 @media all and (min-width: 981px) {
   
  .et-fb-root-ancestor .et-overlay-item {
    opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
  }
  .et-overlay-item {
    opacity: 0; /*hides overlay items by default*/
    margin-bottom: 0px;
  }
  .et-overlay-item, .et-overlay-image {
    transition: all 400ms !important; /*sets transition speed of all overlay items*/
  }
  .et-overlay-container:hover .et-overlay-item {
    opacity: 1; /*reveals hidden overlay items on hover*/
  }
  .et-overlay-container:hover .et-overlay-image {
    /*add new styles here to change image on hover*/
  }
  .et-overlay-container:hover .et-overlay-image.et-scale {
    transform: scale(1.2); /*adjust scale of image here*/
  }
  .et-overlay-container:hover .et-overlay-image.et-rotate {
    transform: scale(1.4)
    rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
  }  
  .et-overlay-container:hover .et-overlay-item.move-up {
    margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
  }
  .et-overlay-container:hover .et-overlay-item.move-down {
    margin-top: 10%; /*adjust how far you want the overlay item to move down*/
  }
 
}
</style>

De code is becommentarieerd, zodat u begrijpt waar u de CSS kunt aanpassen aan uw behoeften.

Dupliceer de kolom voor meer ontwerp

Open de modale laag, verwijder eerst de twee lege kolommen.

Dupliceer vervolgens de kolom met het afbeeldingsoverlayontwerp twee keer. U zou in totaal drie kolommen met identieke ontwerpen moeten hebben.

Afbeeldingsoverlay-ontwerp maken #2

Voor dit volgende ontwerp plaatsen we de knop in het midden van de afbeelding (altijd zichtbaar). Vervolgens verplaatsen we de koptekst en hoofdtekst vanaf de boven- en onderkant van de afbeelding.

De plaatsing van de hoofdtekst en de CSS-klasse aanpassen

Open de instellingen van de overlay-hoofdtekstmodule in kolom 2 en werk de positie bij:

• Locatie: midden onder
• Verticale verschuiving: 5%

Werk vervolgens de CSS-klasse bij met het volgende:

• CSS-klasse: et-overlay-item omhoog

Knoplocatie en CSS-klasse aanpassen

Open vervolgens de knopinstellingen in kolom 2 en werk de volgende positielocatie bij:

• Locatie: Centrum

Verwijder vervolgens de CSS-klasse omdat we willen dat de knop altijd zichtbaar blijft.

Open de instellingen van de Divider (overlay-kleur) module en wijzig de achtergrond als volgt:

• Achtergrond: rgba(67,97,238,0.8)

Open vervolgens de knopinstellingen en wijzig de achtergrondkleur:

• Achtergrondkleur: #f72585

CSS-afbeelding en -klasse aanpassen

Open vervolgens de afbeeldingsinstellingen en upload een nieuwe afbeelding (indien gewenst).

Voeg vervolgens de volgende CSS-klasse toe aan de afbeelding:

• CSS-klasse: et-overlay-image et-scale

Merk op dat naast de "et-overlay-image" klasse, er een extra klasse is genaamd "et-scale" die de grootte van de afbeelding zal vergroten, waardoor een inzoomeffect ontstaat bij het zweven.

Afbeeldingsoverlay-ontwerp maken #3

Nu is het tijd om het derde afbeeldingsoverlay-ontwerp in kolom 3 te maken.

Overlay body-tekstinhoud en CSS-klasse aanpassen

Begin met het openen van de instellingen van de overlay-hoofdtekstmodule in kolom 3. Voeg vervolgens de H2-kop boven de alineatekst toe. Nu zullen beide in een module zitten.

Verwijder vervolgens de CSS-klasse zodat de tekst boven de afbeelding zichtbaar blijft.

Knopverschuiving en CSS-klasse aanpassen

Open de instellingen van de knopmodule en werk de verticale positie-offset bij:

• Verticale verschuiving: 5%

Overlay-header verwijderen

Verwijder vervolgens de Overlay Header Text-module.

Overlaykleur en CSS-klasse aanpassen

Open de instellingen van de module Divider (overlay-kleur) en werk de achtergrond bij naar het volgende:

• Linker achtergrondverloopkleur: rgba (67,97,238,0.8)
• Rechter achtergrondverloopkleur: rgba (247,37,133,0.8)
• Startpositie: 25%
• Eindstand: 75%

En aangezien we de verloopoverlay altijd zichtbaar willen houden, verwijdert u de CSS-klasse.

Pas de CSS-klasse van de afbeelding aan

Ten slotte zullen we een extra CSS-klasse ("et-rotate") aan de hoofdafbeelding toevoegen die de afbeelding zal verkleinen en roteren bij de muisaanwijzer.

• CSS-klasse: et-overlay-image et-rotate

Laatste hand

Voordat we onze definitieve resultaten kunnen controleren, moeten we enkele aanpassingen maken.

Standaard ondermarge voor alle modules verwijderen

Aangezien we de marge al hebben bijgewerkt met een ondermarge van 0px, kunnen we deze marge uitbreiden naar alle modules.

Klik met de rechtermuisknop op de marge-instelling en kies “Marges vergroten”.

Kies er dan voor om de marge uit te breiden naar Alle modules op de pagina.

Dubbele codemodules verwijderen

Zorg ervoor dat u de extra codemodules verwijdert die zijn overgenomen van de eerste kolomduplicatie. Je zou er maar één moeten hebben. U kunt dit eenvoudig doen vanuit de modale lagen.

Definitieve resultaten

Nu onze drie ontwerpen klaar zijn, gaan we eens kijken naar de uiteindelijke resultaten van onze afbeeldingen overlay-ontwerpen.

Download DIVI nu!!!

En hier is het ontwerp op mobiel. Overlay-hovereffecten zijn alleen van toepassing op desktop. Daarom zullen overlays nog steeds zichtbaar zijn op mobiel.

Download DIVI nu!!!

Conclusie

Het maken van aangepaste afbeeldingsoverlays is eigenlijk heel leuk. Er zijn talloze ontwerpen die je visueel kunt testen met de Divi Builder. 

We hopen dat deze tutorial je zal inspireren voor je volgende Divi-projecten. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.

U kunt ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.

Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.

...