Galerij-afbeeldingsinfo weergeven met naar beneden schuivend effect op Divi

Rifat T Oct 16, 2021

Afbeeldingen hebben altijd een enorme impact op het ontwerp en misschien heeft uw website een hele galerij. Divi ontketent veel kracht door zijn modules en de Divi-galerijmodule is perfect voor elke beeldpresentatie. Het is overzichtelijk en u kunt afbeeldingen rechtstreeks uit de mediabibliotheek weergeven. Vandaag leren we hoe we beeldinformatie kunnen maken met een onthullend schuifeffect op Divi door met de muis over de afbeelding te bewegen. Het is een effectief ontwerp voor fotografen, evenementenbeheer, onroerendgoedbedrijven, enz. Dit is een responsief ontwerp, maar we zullen tijdens het ontwerp enkele aanpassingen doen voor kleinere apparaten. Laten we dus naar de sneak peek gaan en dan zullen we leren hoe we zo'n ontwerp kunnen maken.

Voorproefje

Laten we eens kijken naar ons ontwerp van vandaag voordat we verder gaan.

Deel 1: Afbeeldingen uploaden

Mediatheek

Om te beginnen met ontwerpen, moeten we afbeeldingen aan onze bibliotheek toevoegen. Ga daarvoor naar Bibliotheek vanuit Media.

Klik nu op Nieuwe toevoegen om nieuwe afbeeldingen te uploaden.

Maak geweldige websites

Met de beste gratis paginabuilder Elementor

Begin nu

Voeg nu bijschriften en titels toe aan de afbeeldingen. Probeer de woordlimiet voor alle afbeeldingen hetzelfde te maken.

Deel 2: Ontwerpen

Sectie een

Achtergrond kleur

Open nu een pagina of maak een nieuwe om het ontwerp te maken. Open vervolgens de pagina met Divi builder en selecteer "build from scratch". Vervolgens voegen we een achtergrondkleur toe aan het eerste gedeelte van de pagina.

  • Achtergrondkleur: #ed7171

Rij toevoegen

Kolomstructuur

Laten we een rij toevoegen met de volgende structuur.

Spatiëring

Voordat we een module aan de kolom toevoegen, moeten we afstandswaarden instellen.

  • Bovenmarge: 5%
  • Ondermarge: 5%

Kolom 1: Tekstmodule

H2-inhoud

Nu zullen we een tekstmodule toevoegen aan de eerste kolom en wat H2-inhoud toevoegen.

H2 Tekstinstellingen

Ga naar het tabblad Ontwerpen en wijzig de H2-stijl.

  • Kop 2 Lettertype: Montserrat
  • Kop 2 Tekstgrootte: Desktop: 62px, Tablet: 48px En Telefoon: 32px
  • Kop 2 Regelhoogte: 1.3em

Maatvoering

Pas ook de maximale breedte van de module aan voor verschillende schermformaten.

  • Max. Breedte: Desktop: 500px, Tablet: 400px En Telefoon: 250px

Kolom 1: Verdeelmodule

Zichtbaarheid

Ten slotte voegen we een scheidingsmodule toe aan kolom 1. Schakel de zichtbaarheidsopties in.

  • Show Divider: Ja

Lijn

De lijnkleur van het ontwerptabblad.

  • Lijnkleur: #333333

Maatvoering

Vervolgens zullen we de formaatinstellingen van de scheidingsmodule wijzigen.

  • scheidingsgewicht: 5px
  • Maximale breedte: 100px
  • Hoogte: 5px

Kolom 2: Tekstmodule

Tekstinhoud

Nu zullen we een tekstmodule toevoegen aan de tweede kolom en enkele kopieën toevoegen

Tekstinstellingen

We werken de instellingen van de tekstmodule bij.

  • Tekstlettertype: Lato
  • Hoogte tekstregel: 2.2em

Spatiëring

Laten we wat toevoegen aan de marge van onze tekst.

  • Bovenmarge: 50px

Sectie twee

Nu voegen we nog een sectie toe onder de eerste.

Achtergrond met kleurovergang

Laten we een verloopachtergrondkleur toepassen op onze nieuw gemaakte sectie.

  • Kleur 1: # ed7171
  • Kleur 2: #ffffff
  • Gradiënttype: Lineair
  • Startpositie: 20%
  • Eindpositie: 20%

Spatiëring

Wijzig de opvulwaarden op het ontwerptabblad van de sectie.

  • Top vulling: 0px
  • Bodemvulling: 0px

Rij toevoegen

Kolomstructuur

Laten we een rij met gemarkeerde kolomstructuur toevoegen aan onze sectie twee.

Achtergrond kleur

Pas een achtergrondkleur toe op de rij voordat u een module toevoegt.

  • Achtergrondkleur: #f4a1a1

Maatvoering

Pas de maatwaarden aan.

  • Aangepaste gootbreedte gebruiken: Ja
  • Gootbreedte: 2 "
  • Breedte: 90%
  • Maximale breedte: 1580px

Spatiëring

Wijzig de afstandswaarden als volgt.

  • Top vulling: 150px
  • Bodemvulling: 0px
  • Linker vulling: 5%
  • Rechter vulling: 5%

Toevoegen: Galerijmodule

Selecteer geüploade afbeeldingen

Laten we een galerijmodus op de rij krijgen en afbeeldingen toevoegen die we eerder hebben geüpload.

elementen

We zeiden eerder dat we tijdens het ontwerp wat aanpassingen zouden doen. Omdat de hover-effecten alleen op desktops werken. Voor kleinere apparaten zal de aanraking proberen als een lightbox-effect. Dit is een responsief ontwerp, maar de titel en het bijschrift worden weergegeven in de desktopmodus. We zullen ook de paginering van de elementinstellingen uitschakelen.

  • Titel en bijschrift weergeven: Desktop: Ja, Tablet en telefoon: Nee
  • Paginering tonen: Nee

Lay-out

Wijzig de lay-out van de modules op het ontwerptabblad.

  • Lay-out: raster
  • Miniatuuroriëntatie: Portret

Overlay

Wijzig ook de overlay-instellingen.

  • Kleur overlaypictogram: #ffffff
  • Achtergrondkleur overlay: rgba(0,0,0,0.25)

Tekstinstellingen

Ga naar tekstsectie om de kleur van de tekst te wijzigen.

  • Tekstkleur: Licht

Titel Tekst Instellingen

Stijl vervolgens de titeltekst.

  • Titel Kopniveau: H3
  • Titel Lettertype: Montserrat
  • Titel tekstgrootte: 20px

Instellingen voor bijschrifttekst

We gaan de instellingen voor ondertiteling wijzigen.

  • Lettertype bijschrift: Lato
  • Tekstkleur bijschrift: #ffffff
  • Afstand tussen bijschriftletters: 0,5 px
  • Hoogte onderschriftregel: 1.9em

Galerij-item CSS

Voeg op het tabblad Geavanceerd de volgende CSS-code toe aan het CSS-vak voor de titel van het galerij-item.

padding-top: 20px;
padding-left: 7%;
padding-right: 7%;

Galerij Item Bijschrift CSS

Voeg vervolgens de volgende code toe aan het CSS-vak van het bijschrift van het galerijitem.

Deel drie: Reveal-effect toepassen

CSS-ID van galerijmodule

We zijn klaar met ons ontwerp en nu is het tijd om het onthullingseffect op de galerij toe te passen. We voegen dus een CSS-ID toe aan onze galerijmodule.

  • CSS ID: divi-galerij

Codemodule toevoegen

Nu zullen we een codemodule direct onder de galerijmodule toevoegen. Vervolgens voegen we CSS-code toe.

CSS-code

Zorg ervoor dat u de CSS-code in de Style- tags plaatst.


#divi-gallery .et_pb_gallery_item h3, #divi-gallery .et_pb_gallery_item p {
visibility: hidden;
opacity: 0;
transform: translateY(-50px);
background-color: #705d65;
margin-bottom: 0px !important;
margin-top: 0px !important;
}
  
#divi-gallery .et_pb_gallery_item h3, #divi-gallery .et_pb_gallery_item p, #divi-gallery .et_pb_gallery_image {
-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1); 
}

#divi-gallery .et_pb_gallery_item:hover h3, #divi-gallery .et_pb_gallery_item:hover p {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
  
#divi-gallery .et_pb_gallery_item:hover div {
transform: translateY(-10px);
}

En we zijn klaar. Sla het ontwerp op en laat de uiteindelijke resultaten controleren.

Eindresultaat

We hebben alle stappen met succes doorlopen en dit is ons resultaat.

Gedachten beëindigen

Het is moeiteloos om elke advertentie met een Divi-thema te ontwerpen; je hoeft alleen maar goede kennis te hebben van Divi Builder en, in sommige gevallen, kennis van coderen. In de tutorial van vandaag heb je gezien hoe je een galerij ontwerpt waarbij de muisaanwijzer op de afbeelding de informatie naar beneden schuift. We hopen dat je geniet van het ontwerp dat wordt getoond in de tutorial van vandaag. Om meer tutorials over Divi te krijgen, abonneer je op onze website-nieuwsbrief en laat ons eventuele opmerkingen over de tutorial achter.

Divi WordPress Theme