Wil je een mooie transparante en plakkerige header maken met Divi?
Als het gaat om het opzetten van een globale header voor uw Site web, er zijn veel manieren om het te benaderen. Een van de subtielere benaderingen is een transparante header.
Als je besluit om met een transparante koptekst te gaan, maar deze plakkerig moet zijn tijdens het scrollen, zul je deze tutorial geweldig vinden. De overgang tussen transparant en plakkerig is moeiteloos!
Laten we gaan.
overzicht
Laten we, voordat we in de tutorial duiken, even naar het resultaat kijken.
Een nieuwe globale kopsjabloon maken
Ga naar Divi > Themabouwer.
Sectie #1 Instellingen
Achtergrond kleur
Eenmaal in de sjablooneditor ziet u een sectie. Dit gedeelte is gewijd aan de bovenste kopbalk die u kunt opmerken in het voorbeeld van dit artikel. Open de sectie-instellingen en voeg een zwarte achtergrondkleur toe.
- Achtergrond: #000000
tussenruimte
Schakel over naar het tabblad Sectiestijl en verwijder standaard alle binnenmarges (boven en onder).
- Binnenste marge Vertex: 0px
- Onderste interne marge: 0px
Voeg een nieuwe regel toe
Structuur van de kolom
Ga verder door een nieuwe rij toe te voegen met behulp van de volgende kolomstructuur:
Voeg een tekstmodule toe aan de kolom
Voeg een tekstmodule toe aan de rijkolom en voer een bericht naar keuze in.
Tekst instellingen
Schakel over naar het tabblad Modulestijl en wijzig de tekstinstellingen dienovereenkomstig:
- Tekstlettertype: Oswald
- Tekstkopieerstijl: TT
- Tekstkleur Tekst: #ffffff
- Tekst Tekstgrootte:
- Bureaublad: 19px
- Tablet: 18px
- Telefoon: 16px
- Tekstuitlijning: gecentreerd
Voeg sectie # 2 toe
tussenruimte
Voeg net onder het eerste gedeelte nog een normaal gedeelte toe. Dit gedeelte is gewijd aan ons transparante menu dat plakkerig wordt tijdens het scrollen.
Open de sectie-instellingen en verwijder standaard alle interne marges (Boven en Onder) op het tabblad Stijl.
- Binnenste marge Vertex: 0px
- Onderste interne marge: 0px
Voeg een nieuwe regel toe
Structuur van de kolom
Ga verder door een nieuwe rij toe te voegen met behulp van de volgende kolomstructuur:
Transparante achtergrondkleur
Open de lijninstellingen en pas een volledig transparante achtergrondkleur toe op de lijn.
- Achtergrond: rgba (255,255,255,0)
sizing
Schakel over naar het tabblad Lijnstijl en wijzig de formaatinstellingen.
- Aangepaste gootbreedte gebruiken: Ja
- Kolomafstand: 1
- Maximale breedte: 100%
- Maximale breedte: 100%
tussenruimte
Voeg vervolgens aangepaste interne (links en rechts) marges toe.
- Linker binnenmarge: 10%
- Interne marge Wet: 10%
Schaduw doos
Breng vervolgens een transparante doosschaduw aan. Later in de tutorial zullen we deze boxschaduw gebruiken in een plakkerige staat met een andere schaduwkleur.
- Doos Schaduwvervaging Sterkte: 50px
- Ondertitel Letterkleur: rgba (0,0,0,0)
Positie
Om ervoor te zorgen dat de lijn bovenaan verschijnt inhoud van de pagina, met een transparante achtergrond, gebruiken we een absolute positie voor onze rij op het geavanceerde tabblad.
- Positie: Absoluut
- Locatie: Linksboven
Kolom 2 Zichtbaarheid
We verbergen ook de tweede kolom van onze rij op tablet en telefoon om een minder complex koptekstontwerp te hebben op kleinere schermformaten.
Menumodule toevoegen aan kolom 1
Selecteer een menu
Nu onze rij-instellingen aanwezig zijn, is het tijd om modules toe te voegen, te beginnen met een menumodule in kolom 1. Selecteer het menu van uw keuze.
Logo downloaden
Upload vervolgens een logo.
Achtergrondkleur verwijderen
Verwijder ook de achtergrondkleur van de module.
Menu tekst instellingen
Schakel over naar het tabblad Stijl van de module en wijzig de instellingen voor menutekst dienovereenkomstig:
- Lettertypemenu: Oswald
- Zacht lichtmenu: vet
- Kopieerstijlmenu: TT
- Kleur menutekst: #efefef
- Grootte menutekst: 18px
- Tekstuitlijning: rechts
Vervolgkeuzemenu-instellingen
Wijzig ook de instellingen van het vervolgkeuzemenu.
- Kleur vervolgkeuzelijst: rgba(0,0,0,0)
- Mobiel menu Achtergrondkleur: rgba (0,0,0,0,95)
Pictogram instellingen
Wijzig vervolgens de pictogramkleuren in de pictograminstellingen.
- Kleur winkelwagenpictogram: #ffffff
- Kleur van zoekpictogram: #ffffff
- Hamburger Menu Pictogram Kleur: #ffffff
Logo-instellingen
We veranderen ook de kleur van ons logo in de logo-instellingen door het beeldinversiefilter te wijzigen.
- Afbeelding omkeren: 90%
sizing
Vervolgens zullen we een maximale hoogte aan ons logo toekennen.
- Logo Max. breedte: 40 pixels
tussenruimte
Vervolgens voegen we Top- en Bottom-padding toe aan kleine schermformaten.
- Piek interne marge:
- Tablet en telefoon: 10px
- Onderste interne marge:
- Tablet en telefoon: 10px
Voeg de knopmodule toe aan kolom 2
Voeg tekst toe naar knop
In kolom 2 is de enige module die we nodig hebben een Button-module. Voeg een tekst naar keuze toe.
Uitlijning van knoppen
Schakel over naar het tabblad Modulestijl en wijzig de uitlijning van de knoppen.
- Knop uitlijning: rechts
Knop instellingen
Pas vervolgens de knop aan.
- Gebruik aangepaste stijlen voor Knop: Ja
- Tekstgrootte knop: 16px
- Tekstkleur knop: #ffffff
- Achtergrondknop: #ed4441
- Kleur knoprand: #ed4441
- Rand Radius-knop: 0 pixels
- Knop Letterafstand: 4px
- Lettertype knop: Oswald
- Soft Light-knop: vetgedrukte tekst
- Kopieerstijlknop: TT
- Knoppictogram weergeven: Ja
- Kleur knoppictogram: #1a1a1a
tussenruimte
En voltooi de moduleparameters door aangepaste afstandswaarden toe te voegen.
- Bovenmarge: -70px
- Bovenste en onderste interne marge: 25 px
Aangepaste plakeffecten toepassen
Maak sectie #2 plakkerig
Nu we de basis hebben gelegd voor onze header, is het tijd om het plakkerige effect toe te passen! Om dit te doen, begint u met het openen van de instellingen in het tweede gedeelte en past u de volgende plakinstellingen toe op het tabblad Geavanceerd:
- Kleverige positie: blijf bij boven
- Stick Top Offset: 0px
- Bodem Sticky Mimit: Geen
- Offset van omringende plakkerige elementen: JA
- Overgang Standaard en Sticky Stijlen: JA
Plak lijn achtergrondkleur
Nu de kleverige optie is ingeschakeld, kunnen we kleverige optiewijzigingen aanbrengen in alle elementen in de sectie. We beginnen met het openen van de rij met ons menu en het toepassen van een witte achtergrondkleur op de plakkerige optie.
- Achtergrondkleur: #FFFFFF
Kleverige rijafstand
Vervolgens gaan we de afstandswaarden van de plakfunctie van de regel wijzigen.
- Binnenste marge Vertex: 0px
- Onderste interne marge: 0px
Sticky Row Shadow Box
We veranderen ook de kleur van de doosschaduw in een plakkerige staat.
- Ondertitel Letterkleur: rgba(0,0,0,0.08)
Kleverige lijn positionering
Vervolgens keren we de rijpositionering terug naar relatief in een plakkerige staat.
- Positie: Relatief
- Offset Oorsprong: linksboven
Instellingen menutekst plakkerige status
Vervolgens veranderen we de kleur van de menutekst in de plakkerige staat.
- Kleur menutekst: #000000
Instellingen voor vervolgkeuzemenu's in plakkerige toestand
Met de achtergrondkleur van het mobiele menu in de instellingen van het vervolgkeuzemenu.
- Mobiel menu, achtergrondkleur: #ffffff
Menupictogramkleuren in plakkerige toestand
Verander ook pictogramkleuren in een plakkerige staat.
- Kleur winkelwagenpictogram: #000000
- Kleur van zoekpictogram: #000000
- Hamburger Menu Pictogram Kleur: #000000
Logofilter in plakkerige toestand
Verwijder vervolgens het invertfilter van de logo-afbeelding in een plakkerige staat.
- Afbeelding inversie: 0%
Knopafstand in plakkerige toestand
En voltooi de tutorial door de negatieve bovenmarge van de knop te verwijderen wanneer deze in plakkerige staat is.
- Bovenmarge: 0px
overzicht
Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer kijken naar het eindresultaat.
Download DIVI nu!!!
Conclusie
In dit artikel hebben we je laten zien hoe je de constructor van kunt combineren thema's van Divi met de nieuwe plakkerige opties. We hebben u met name laten zien hoe u tijdens het scrollen kunt overschakelen van een transparante koptekst naar een plakkerige koptekst met een andere stijl.
Met deze aanpak kun je je pagina-ontwerp samenvoegen met je menu terwijl je nog steeds een mooie plakkerige kop behoudt tijdens het scrollen.
Wilt u meer weten over Divi, bezoek dan gerust onze catalogus van Divi-tutorials. Raadpleeg ook Hoe de Blog-pagina te maken met de Divi Blog-module
Als u vragen of suggesties heeft, kunt u een reactie achterlaten in de opmerkingen hieronder.
U kunt echter ook overleggen onze middelen, Als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleegt u onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar ondertussen, deel dit artikel op uw verschillende sociale netwerken.
...
