Hoe een geheim heldensectie-afbeeldingsraster in Divi . bloot te leggen

Rifat T Oct 17, 2021

Hero-secties worden altijd beschouwd als een geweldig hulpmiddel om de aandacht van bezoekers te trekken. Ook zette het onbewust een toon voor de website in hun geest. Dus het hebben van een creatieve heldensectie is een zegen voor het bedrijf. Divi is een prachtig WordPress-thema en paginabuilder en het biedt veel mogelijkheden om de heldensectie van uw website mooi te maken. Eerder hebben we gezien hoe we een sticky hero-sectie over scrollen kunnen ontwerpen en vandaag zullen we zien hoe we een hero-sectie kunnen ontwerpen waar een geheim afbeeldingsraster zal zijn dat door scrollen zal worden onthuld. Klinkt spannend, toch?

Laten we meteen naar de tutorial springen.

Sneak Peak

Dit wordt het ontwerp dat we vandaag zullen maken en dit zal volledig responsive zijn.

Bureaubladweergave

Mobiele weergave

Heldensectie ontwerpen

Open een nieuwe pagina vanuit uw WordPress-dashboard. Geef het een naam zoals je wilt en open het met Divi builder.

Maak geweldige websites

Met de beste gratis paginabuilder Elementor

Begin nu

Toevoegen: Nieuwe sectie

Achtergrond kleur

We zullen een achtergrondkleur toevoegen aan onze eerste sectie. Open instellingen voor de sectie en voeg de achtergrondkleur toe.

  • Achtergrondkleur: #111111

Spatiëring

Ga nu naar het tabblad Ontwerp van de sectie en voer enkele aanpassingen uit in de onderste opvulling, omdat dit ons meer ruimte geeft om een betere scrollervaring te hebben.

  • Bodemvulling: 120vh

Toevoegen: Rij één

Kolomstructuur

Nu voegen we een nieuwe rij toe aan de voorbereide sectie. Volg de getoonde kolomstructuur.

Maatvoering

Voordat we nog meer modules toevoegen, opent u de rij-instelling en wijzigt u de volgende waarden op het ontwerptabblad.

  • Aangepaste gootbreedte gebruiken: Ja
  • Gootbreedte: 2 "
  • Breedte: 100%
  • Maximale breedte: 2580px

Spatiëring

Voeg nu wat marge toe aan de bovenkant.

  • Bovenmarge: Desktop: 10vh, tablet en telefoon: 5vh

Z-index

Om onze ontwerpvolgorde te behouden, moeten we deze rij onder de tweede rij houden. Daarom zullen we enkele Z-indexwaarden toevoegen.

  • Z-index: 10

Alle kolominstellingen

Omdat we klaar zijn met de instellingen van rij één, opent u nu de instellingen voor elke kolom en brengt u wijzigingen aan die hieronder worden uitgelegd.

Hoofdelement CSS

Deze CSS-code is alleen voor mobiele apparaten. Zorg ervoor dat u ze afzonderlijk aan elke kolom toevoegt.

width: 50% !important;
margin: 0 !important;

Kolom 2 Instellingen

Z-index

Open vervolgens de instellingen van kolom 2 en voeg de Z-indexwaarde eraan toe. Dit zal de kolom naar de volgende brengen.

  • Z-index: 12

Toevoegen: Afbeeldingsmodule aan kolom 1

Afbeelding uploaden

Nu voegen we een afbeeldingsmodule toe aan kolom 1 en uploaden we een afbeelding naar keuze.

Spatiëring

Vanaf het ontwerptabblad van de module en wijzig de afstandsinstellingen.

  • Ondermarge: tablet en telefoon: 10px
  • Rechtermarge: tablet en telefoon: 2%

Afbeeldingsmodule klonen en resterende kolommen vullen

Omdat we net klaar zijn met de module-instellingen, laten we de hele module driemaal dupliceren en op de resterende kolommen plaatsen.

Verander nu de afbeeldingen van de rest van de kolommen.

Wijzig de afstandsinstellingen voor afbeelding 2 en 4

Open vervolgens de instellingen van de afbeeldingsmodules in kolom 2 en 4 en pas de volgende afstandswaarden daarop toe:

  • Ondermarge: tablet en telefoon: 10px
  • Linkermarge: tablet en telefoon: 2%
  • Rechtermarge: /

Toevoegen: rij twee

Kolomstructuur

Voeg nu een nieuwe rij toe aan ons hoofdgedeelte.

Achtergrond met kleurovergang

Nu zullen we een verloopachtergrond toepassen op deze nieuw gemaakte rij. Dus, open de instelling en pas de achtergrond toe

  • Kleur 1: #111111
  • Kleur 2: rgba(255,255,255,0)

Maatvoering

Wijzig vervolgens de maatinstellingen.

  • Breedte: 100%
  • Maximale breedte: 2580px

Spatiëring

Voeg vervolgens wat opvulling toe aan de boven- en onderkant.

  • Top vulling: 20vh
  • Bodemvulling: 20vh

Positie

Omdat we nu de tweede rij over de eerste willen plaatsen, moeten we de positie-instellingen dienovereenkomstig instellen.

  • Positie: Absoluut
  • Locatie: Midden boven
  • Z-index: 12

Toevoegen: Tekstmodule aan kolom

H1-inhoud toevoegen

Voeg nu een tekstmodule en wat inhoud naar keuze toe aan de kolom.

H1 Tekstinstellingen

Ga naar het ontwerptabblad van de module en wijzig de H1-tekstinstellingen dienovereenkomstig:

  • Koplettertype: Kumbh Sans
  • Kop Lettergewicht: Vet
  • Koptekst Lettertype: Hoofdletters
  • Uitlijning van koptekst: Midden
  • Koptekstkleur: #ffdbaa
  • Koptekst Grootte: Desktop: 120px, Tablet: 60px En Telefoon: 40px
  • Kop Letterafstand: Desktop: -3px, Tablet en telefoon: 0px
  • Koptekst Schaduw: Selecteer: Derde optie en Koptekst Schaduwkleur: rgba(0,0,0,0.4)

Maatvoering

Pas nu de uitlijning van de module en de maximale breedte aan vanuit de maatinstellingen.

  • Maximale breedte: 1070px
  • Module-uitlijning: midden

Toevoegen:; Knopmodule

Kopie toevoegen

De laatste module die we in deze rij zullen toevoegen, is een utton-module. Schrijf iets op basis van uw behoefte.

Knop uitlijning

Vanaf het ontwerptabblad en verander de knopuitlijning.

  • Knop Uitlijning: Midden

Knop Instellingen

Style vervolgens de knop.

  • Gebruik aangepaste stijlen voor knop: Ja
  • Knop Tekstgrootte: Desktop: 20px, Tablet: 16px En Telefoon: 14px
  • Tekstgrootte knop: #111111
  • Achtergrondkleur knop: #ffffff
  • Breedte knoprand: 0px
  • Knoprandstraal: 100px
  • Lettertype knop: Kumbh Sans
  • Gewicht knoplettertype: vet

Spatiëring

Voeg opvulwaarden toe vanuit de afstandsinstellingen.

  • Top vulling: desktop en tablet: 20px, telefoon: 15px.
  • Bodemvulling: desktop en tablet: 20px, telefoon: 15px.
  • Linkervulling: desktop en tablet: 50px, telefoon: 40px.
  • Rechter vulling: desktop en tablet: 50px, telefoon: 40px.

Sticky-instellingen op Hero-sectie

Sticky-instellingen rij één

Nu is ons ontwerp klaar en is het tijd om ons te concentreren op plakkerige instellingen. De volgende plakinstellingen worden toegepast op de eerste rij, dus open de instellingen voor de eerste rij.

  • Kleverige positie: blijf bij boven
  • Onderste plaklimiet: sectie
  • Offset van omringende plakkerige elementen: Ja
  • Overgang Standaard en Sticky Stijlen: Ja

Kleverige dekking

Wijzig vervolgens de dekking in de filterinstellingen.

  • Standaard: 20%
  • Kleverig: 100%

Afbeeldingsmodule Een plakkerige instelling

Spatiëring

Ga vanuit de instellingen van de afbeeldingsmodule naar het tabblad Ontwerpen en voeg wat plakkerige tussenruimte toe.

  • Kleverige bovenmarge: -20%
  • Kleverige rechtermarge: -20%

Overgang

Verhoog ook de duur van de overgang.

  • Overgangsduur: 700 ms

Afbeeldingsmodule Twee plakkerige instellingen

Spatiëring

Maak vanuit de instellingen van afbeeldingsmodule 2 ook enkele aanpassingen aan de afstand.

  • Kleverige bovenmarge: 20%
  • Kleverige linkermarge: -30%

Overgang

Verhoog ook hier de overgangsduur.

  • Overgangsduur: 1000ms

Afbeeldingsmodule Drie plakkerige afstanden

Spatiëring

Gebruik nu voor de derde afbeeldingsmodule de volgende waarden voor plakkerige afstanden:

  • Kleverige bovenmarge: -10%
  • Kleverige linkermarge: -25%
  • Kleverige rechtermarge: -25%

Overgang

Pas de overgangsduur dienovereenkomstig aan:

  • Overgangsduur: 700 ms

Afbeeldingsmodule Vier Sticky Spaties

Spatiëring

Open nu de laatste afbeeldingsmodule en breng de wijzigingen aan.

  • Kleverige bovenmarge: -20%
  • Kleverige linkermarge: -30%

Overgang

Beëindig nu de taak van vandaag door de overgangsduur voor de vierde afbeeldingsmodule te verlengen.

  • Overgangsduur: 1000ms

En we zijn klaar! Sla de pagina op en verlaat deze om het ontwerpresultaat van vandaag te zien.

Laatste blik

Dus hier is ons ontwerp van vandaag. De verloopachtergrond van de tweede rij gaat omhoog door te scrollen en de afbeeldingen van de eerste rij verschijnen terwijl we de waarden instellen. Op deze manier ziet het er interactiever uit.

Bureaubladweergave

Mobiele weergave

Conclusie

In de tutorial van vandaag hebben we geprobeerd je te laten zien hoe creatief je kunt innoveren in het heldengedeelte van een website met behulp van Divi 's sticky-opties. We hopen dat je de tutorial nuttig vindt. Je kunt het bericht delen zodat anderen er ook van kunnen profiteren. Bedankt voor het lezen van dit bericht.

Divi WordPress Theme