behoefte om een ​​transparant zwevend menu te maken in Divi ?
Bent u op zoek naar een manier om uw algemene koptekst boven de hoofdsecties van uw pagina's te plaatsen? In de tutorial Divi Vandaag laten we je precies zien hoe je dat doet.
We gaan vanaf het begin een verbluffende globale kop maken (met behulp van de constructor van thema's de Divi) en we passen een zwevend effect toe op de menubalk.
Laten we gaan.
overzicht
Laten we, voordat we in deze tutorial duiken, even kijken naar het resultaat dat we willen bereiken.
Ga naar Divi's Theme Builder en voeg een nieuwe sjabloon toe
Allez op Divi > Themabouwer.
De globale kop maken met Divi Theme Builder
Klik op 'Add Global Header' en ga verder door 'Build Global Header' te selecteren.
Sectie-instellingen
Achtergrond kleur
Eenmaal in de sjablooneditor ziet u een sectie op de pagina. Open dit gedeelte en verander de achtergrondkleur in een volledig transparante kleur. Hierdoor kan alles onder de sectie worden weergegeven.
- Achtergrond: rgba(0,0,0,0)
sizing
Ga vervolgens naar het tabblad Sectiestijl en wijzig de maximale breedte.
- Maximale breedte (Zie screenshot): 100%
tussenruimte
Verwijder ook alle standaard interne marges boven en onder.
- Binnenste marge Vertex: 0px
- Onderste interne marge: 0px
Z-index
En om ervoor te zorgen dat de sectie overal bovenop blijft inhoud Vanuit het heldengedeelte moeten we de z-index in de zichtbaarheidsinstellingen verhogen.
- Z-index: 99999
Voeg een nieuwe regel toe
Structuur van de kolom
Nadat u de sectie-instellingen hebt voltooid, kunt u een nieuwe rij toevoegen met behulp van de volgende kolomstructuur:
sizing
Zonder modules toe te voegen, opent u de rij-instellingen en wijzigt u de formaatinstellingen als volgt:
- Kolomhoogten harmoniseren: Ja
- Maximale breedte: 100%
- Maximale breedte: 100%
tussenruimte
Voeg vervolgens aangepaste interne marges toe (boven en onder).
- Piek interne marge: 2vw
- Onderste binnenmarge: 0vw
Hoofdelement
Ga vervolgens naar het tabblad Geavanceerd en zorg ervoor dat de kolommen naast elkaar blijven op kleinere schermformaten door een enkele regel CSS-code toe te voegen aan het hoofdrij-element.
display: flex;
Kolom 2
Achtergrond kleur
Ga verder door de instellingen van kolom 2 te openen en verander de achtergrondkleur in een semi-transparante kleur.
- Achtergrondkleur: rgba (255,255,255,0.71)
grens
Voeg ook een onderrand toe aan de kolom.
- Breedte onderste rand: 2px
- Kleur knop en onderste rand: #f4583f
Schaduw doos
En creëer een zwevend effect door een subtiele doosschaduw toe te voegen.
- Shadow Box: [Bekijk opname]
- Startpositie: 20px
- Bow Shadow Blur-sterkte: 50px
- Box Shadow Spread-sterkte: -20px
- Letterkleur ondertitel: rgba(0,0,0,0.23)
Voeg een afbeeldingsmodule toe aan kolom 1
Logo downloaden
Nadat je de rij- en kolominstellingen hebt voltooid, is het tijd om de modules toe te voegen, te beginnen met een afbeeldingsmodule in kolom 1. Upload een logo met een transparante achtergrond.
alignement
Schakel over naar het tabblad Modulestijl en wijzig de uitlijning.
- Beelduitlijning: gecentreerd
sizing
Wijzig ook de breedte van de module in de formaatinstellingen.
- Maximale breedte: 8 vw (desktop), 14 vw (tablet), 21 vw (telefoon)
Menumodule toevoegen aan kolom 2
Selecteer een menu
Laten we naar de volgende kolom gaan. Daar is de enige module die we nodig hebben een menumodule. Selecteer een menu naar keuze.
Achtergrondkleur verwijderen
Ga dan naar achtergrondinstellingen en verwijder de achtergrondkleur.
Aanleg
Schakel over naar het tabblad Modulestijl en wijzig de lay-out.
- Stijl: Gecentreerd
- Vervolgkeuzemenu: omlaag
Menutekst
Stijl ook de instellingen van de menutekst.
- Menu Lettertype: Mulish
- Kleur menutekst: #6f6666
- Menu Tekstgrootte: 1vw (desktop), 2vw (tablet), 3vw (telefoon)
Drop-down menu
Wijzig vervolgens de instellingen in het vervolgkeuzemenu.
- Kleur vervolgkeuzelijst: #f4583f
pictogrammen
Gebruik dezelfde kleur voor de pictogramkleur van het hamburgermenu in de pictograminstellingen.
- Hamburger Menu Pictogram Kleur: #f4583f
tussenruimte
Voltooi de module-instellingen door opvulling boven en onder toe te voegen in de instellingen voor Afstand.
- Piek interne marge: 1,5 vw
- Onderste interne marge: 1,5 vw
Voeg de knopmodule toe aan kolom 3
Tekst toevoegen aan knop
Laten we verder gaan met de volgende en laatste kolom. Voeg een Button module toe met een tekst naar keuze.
alignement
Wijzig vervolgens de uitlijning van de module.
- Knop uitlijning: gecentreerd
Knop instellingen
Ga verder door de knop dienovereenkomstig aan te passen:
- Gebruik aangepaste stijlen voor Knop: Ja
- Tekstgrootte knop: 0,9 vw (desktop), 1,5 vw (tablet), 2,5 vw (telefoon)
- Tekstkleur knop: #ffffff
- Achtergrondknop: #f4583f
- Breedte knoprand: 0 pixels
- Kleur knoprand: #f4583f
- Rand Radius-knop: 0 pixels
- Lettertype knop: Mulish
- Dim Light-knop: vetgedrukte tekst
tussenruimte
Voltooi module-instellingen door aangepaste opvulling toe te voegen aan verschillende schermformaten.
- Bovenste en onderste interne marge: 1vw (desktop), 2vw (tablet), 3vw (telefoon)
- Linker en rechter interne marge: 2vw (desktop), 3vw (tablet), 4vw (telefoon)
Aanvullende sectieparameters
Standaard hoofditem
Zodra u de algemene aanpassing heeft voltooid, moet u nog één ding doen; plaats het gedeelte boven de inhoud van uw pagina. Om dit te doen, moeten we twee regels CSS-code toevoegen aan het hoofdelement van de sectie.
position: absolute;
top: 0;
Hoofdelement bij zweven
Zorg ervoor dat u dezelfde regels CSS-code toevoegt aan de zweefoptie van het hoofdelement. Dit voorkomt dat het gedeelte flikkert als u er met de muis overheen gaat.
position: absolute;
top: 0;
Constructorwijzigingen opslaan en resultaat bekijken
Nadat u de sectie hebt voltooid, kunt u de algemene koptekst opslaan en het resultaat op uw site weergeven!
overzicht
Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer naar het resultaat kijken.
Download DIVI nu!!!
Conclusie
Alstublieft ! Dat was het voor dit artikel. We hebben je laten zien hoe je een zwevende en transparante menubalk kunt maken met Divi's Theme Builder. De koptekst wordt boven het eerste gedeelte van uw pagina of bericht geplaatst.
Om vertrouwd te raken met Divi's Theme Builder, kun je ook ons ​​artikel lezen over: Een globale kop maken met Divi's Theme Builder
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.
...
