Hoe maak je een overlay op afbeeldingen met Divi Builder

Blair Jersyer WordPress-zelfstudies Oct 28, 2021

Afbeeldingsoverlays zijn een van de geweldige manieren om bezoekers te betrekken door extra informatie aan uw bezoekers te tonen. Meestal gebeurt dit wanneer de muis over een element of afbeelding zweeft. Omdat dat behoorlijk populair is, heb je misschien al veel WordPress-plug-ins opgemerkt die je helpen om dat te bereiken. Als je net als ik van Divi houdt , vraag je je misschien af hoe je dat met Divi kunt doen? Daar gaan we het vandaag over hebben.

In deze zelfstudie laten we u zien hoe u aangepaste afbeeldingsoverlays kunt ontwerpen in Divi Builder . Deze overlays wisselen en onthullen elementen wanneer de muis erover beweegt. Wat u misschien interessant vindt, is dat u alleen betere controle over het ontwerp kunt hebben met behulp van de ingebouwde Divi-opties. We kunnen uiteindelijk wat CSS-code gebruiken, waardoor de zaken er nog beter uitzien.

verwacht resultaat

Hier is een korte blik op wat u aan het einde van deze zelfstudie kunt krijgen.

Vereiste componenten voordat u aan de slag gaat

Voordat je aan de tutorial begint, moet je aan een aantal vereisten voldoen, omdat deze nodig zijn om deze tutorial te kunnen reproduceren. Je hebt daarom nodig:

Maak geweldige websites

Met de beste gratis paginabuilder Elementor

Begin nu

Als je daarna een blanco pagina hebt, ben je klaar om te gaan.

Aangepaste afbeeldingsoverlays maken in Divi

De sectie, rij en kolommen maken

We beginnen met het selecteren van een rij met drie kolommen in de standaardsectie.

Open de sectie-instellingen en gebruik de volgende achtergrondkleur:

  • Achtergrondkleur: #3a0ca3

Ga vervolgens naar de instellingen voor kolom 1 en wijzig de volgende opties:

  • CSS-klasse: et-overflow-container
  • Horizontale overloop: verborgen
  • Verticale overloop: verborgen

De CSS-klasse is nodig om de zweefeffecten te activeren van de overlay-items die we gaan bouwen. De verborgen overloop is nodig omdat we een zweefeffect krijgen dat de afbeelding buiten de kolomcontainer schaalt.

De afbeelding toevoegen

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

Upload een afbeelding die in een portret staat. Ik gebruik er een van ongeveer 1280 px bij 1920 px. Zorg ervoor dat deze breed genoeg is om de volledige breedte van de kolom te beslaan in alle browserformaten.

Wijzig het volgende op het tabblad Ontwerpen:

  • Marge: 0px onder

Voeg op het tabblad Geavanceerd de volgende CSS-klasse toe:

  • CSS-klasse: et-overlay-image

De afbeeldingsoverlay-kleur kiezen met behulp van een scheidingsmodule

Om de afbeeldingsoverlay-kleur te maken, gaan we een scheidingsmodule gebruiken. Het idee is om een dekking over de afbeelding te creëren door de scheidingslijn in volledige hoogte en breedte te definiëren die de kolom bedekt, zodat deze perfect over de afbeelding past. Eenmaal ingesteld, kunt u de achtergrondkleur van de scheidingsmodule aanpassen om de overlaykleur naar wens te krijgen.

Laten we dus eerst een scheidingsmodule onder de afbeelding toevoegen.

Plaats vervolgens de scheidingslijn als absoluut zodat deze bovenop de afbeelding verschijnt:

  • Positie: Absoluut

Werk het volgende bij op het tabblad Inhoud:

  • Show Divider: NEE
  • Achtergrondkleur: rgba (247,37,133,0.8)

Wijzig vervolgens de hoogte en breedte van de scheidingslijn:

  • Breedte: 100%
  • Hoogte: 100%

Nadat het ontwerp is gedefinieerd, voegt u de volgende CSS-klasse toe aan de scheidingslijn:

  • et-overlay-item

Waarschuwing : deze klasse moet worden toegevoegd aan alle overlay-ontwerpcomponenten die u alleen bij het aanwijzen wilt weergeven. Als u niet wilt dat het element in eerste instantie wordt verborgen, gebruik het dan niet.

Optioneel kunt u de scheidingslijn die is veranderd in een overlay labelen met een duidelijk herkenbare naam. Dat kan van de laag worden gemaakt en je kunt "Overlay" gebruiken.

De koptekst van de overlay toevoegen

Voeg onder de scheidingsmodule een nieuwe tekstmodule toe. Dit wordt gebruikt als onze overlay-koptekst en verschijnt bij de muisaanwijzer bovenaan de afbeelding.

Wijzig de inhoud met een H2-kop:

>h2/h2



U kunt ook het label van de tekstmodule wijzigen om later naar te verwijzen.

Wijzig dit onder de instellingen voor tekstontwerp:

  • Tekstuitlijning: Midden
  • Tekstkleur: Licht
  • Kop 2 Lettertype: Aalscholver Garamond
  • Kop 2 Lettergewicht: Vet
  • Kop 2 Tekstgrootte: 40px
  • Breedte: 100%
  • Max-breedte: 85%

Wijzig de positie op het tabblad Geavanceerd als volgt:

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

Waarschuwing: de verticale offset moet mogelijk worden aangepast aan de grootte van de beeldverhouding van de afbeelding.

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

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

Naast de “et-overlay-item†klasse, voegen we een extra “verplaatsing-omlaag†klasse toe om aangepaste CSS te gebruiken om de kop iets naar beneden te verplaatsen tijdens het zweven.

De hoofdtekst van de overlay maken

Om de overlay-tekst te maken, kunnen we de tekstmodule dupliceren die wordt gebruikt voor de overlay-kop. Voordat we de instellingen wijzigen, geven we die module een ander label. Deze keer gebruiken we "Overlay Body".

Open de tekstinstellingen voor de nieuwe tekstmodule en werk de hoofdtekst bij met een paar zinnen alineatekst.

Wijzig op het tabblad Geavanceerd de absolute locatie van de module in het midden.

Aangezien we niet willen dat deze met de muisaanwijzer beweegt (alleen weergegeven), updatet u de CSS-klasse zodat deze alleen het volgende bevat:

  • CSS-klasse: et-overlay-item

De overlay-knop maken

Het laatste overlay-element op deze afbeelding is de knop. Om de knop te maken, voegt u een nieuwe knopmodule toe onder de tekstmodule 'hoofdtekst'.

Laten we, voordat we het ontwerp bijwerken, de positie van de knop als volgt wijzigen:

  • Positie: absoluut
  • Verticale verschuiving: 10%

Nu moet de knop gecentreerd zijn in het onderste gedeelte van de afbeelding.

Werk op het tabblad Geavanceerd de CSS-klasse bij en voeg als volgt een fragment van aangepaste CSS toe aan het hoofdelement:

  • CSS-klasse: et-overlay-item omhoog
  • Hoofdelement CSS: min-width: 15em

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

Werk vervolgens de volgende ontwerpinstellingen bij:

  • Knop Uitlijning: Midden
  • Tekstgrootte knop: 14px
  • knop Achtergrondkleur: #4361ee
  • knop Randbreedte: 0px
  • Knop Letterafstand: 0.1em
  • Gewicht knoplettertype: vet
  • Knop Lettertype: TT
  • Vulling: 0.8em boven, 0.8em onder, 0px links, 0px rechts

Aanvulling met aangepaste codemodule

Laten we, voordat we naar de andere versie gaan, wat CSS toevoegen om het zweefeffect toe te voegen. Voeg hiervoor een codemodule toe onder de knop.

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

>style 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 heeft een aantal opmerkingen, zodat u kunt begrijpen waar u de CSS indien nodig kunt aanpassen.

De kolom dupliceren voor andere secties

Hoewel we al twee extra lege kolommen hebben om mee te werken, is het gemakkelijker om alle modules en het ontwerp in de eerste kolom over te zetten naar een nieuwe kolom door de hele kolom te dupliceren. Open hiervoor de modale lagen, verwijder de twee lege kolommen en dupliceer vervolgens de kolom met het afbeeldingsoverlay-ontwerp twee keer. U zou in totaal drie kolommen met identieke ontwerpen moeten hebben.

Ik laat je beslissen welke kleuren je gaat toepassen op kolom 2 en 3. Laten we niet kijken wat het uiteindelijke resultaat is.

Eind resultaat

Nu onze drie ontwerpen klaar zijn (ik hoop dat je het ontwerp voor de 2 resterende kolommen hebt gewijzigd), laten we eens kijken naar de uiteindelijke resultaten van onze ontwerpen.

Samenvatting

Een beeldoverlay maken is met Divi wel degelijk mogelijk. Er zijn talloze ontwerpen die u visueel kunt maken met de Divi-builder en er is slechts een kleine hoeveelheid aangepaste CSS nodig om enkele zweefeffecten toe te passen.

Divi WordPress Theme