Wilt u een glijdend en responsief zijmenu maken in Divi?
Bij het maken van een Site web, vraag je je vaak af welk type header je moet maken. De meest gebruikte op het web is de horizontale menubalk bovenaan, maar er zijn ook andere opties, zoals een schuifmenu.
Schuifmenu's helpen u meestal om de ruimte die wordt ingenomen door de globale koptekst te beperken. Zo kun je een uitschuifmenu laten verschijnen wanneer je bezoekers klik op het hamburgerpictogram in de rechterbovenhoek.
Daarom helpt het gebruik van een uitschuifmenu u om extra interactie toe te voegen aan uw Site web.
In deze tutorial laten we je daarom zien hoe je er een kunt maken met Divi's Theme Builder.
Laten we beginnen!
overzicht
Voordat we in deze tutorial duiken, laten we eerst kijken naar het resultaat dat we gaan krijgen.
Ga naar Theme Builder en maak een globale koptekst
Ga naar Themabouwer
Ga om te beginnen naar Theme Builder vanuit het Divi-menu in uw WordPress-dashboard en klik op "Add Global Header".
De globale kop maken
Ga verder door 'Creëer globale koptekst' te selecteren.
Een kopstijl maken
Sectie-instellingen
Achtergrond kleur
Eenmaal in de sjablooneditor ziet u een sectie. Open dit gedeelte en maak de achtergrondkleur transparant.
- Achtergrond: rgba (255,255,255,0)
tussenruimte
Schakel over naar het tabblad Stijl en verwijder alle onder- en bovenmarges.
- Binnenste marge Vertex: 0px
- Onderste interne marge: 0px
Post
Vervolgens wijzigen we de positie van de sectie door naar het tabblad Geavanceerd te gaan en de positie-instellingen te wijzigen.
- Positie: Vast
- Locatie: Midden boven
Voeg de eerste regel toe
Structuur van de kolom
Nadat u de sectie-instellingen hebt voltooid, voegt u een nieuwe rij toe met behulp van de volgende kolomstructuur:
sizing
Open, zonder nog modules toe te voegen, de rij-instellingen en wijzig de formaatinstellingen als volgt:
- Maximale breedte: 97%
- Maximale breedte: 100%
tussenruimte
Wijzig de afstandsinstellingen.
- Piek interne marge: 1%
- Onderste interne marge: 0px
hoofdelement
Ga vervolgens naar het tabblad Geavanceerd en voeg twee regels CSS-code toe aan het hoofdelement van de regel. Dit zal ons helpen de verticale lijnen uit te lijnen inhoud van de kolom in onze rij.
display: flex;
align-items: center;
Voeg een afbeeldingsmodule toe aan kolom 1
Logo downloaden
Het is tijd om modules toe te voegen, te beginnen met een afbeeldingsmodule in kolom 1. Upload uw logo.
Voeg een tekstmodule toe aan kolom 3
Voeg 3 spaties toe aan het inhoudsgebied
<spanclass="line line-1"></span>
<spanclass="line line-2"></span>
<spanclass="line line-3"></span>
Achtergrond kleur
Wijzig de achtergrondkleur van de module.
- Achtergrond: rgba (0,0,0,0.04)
Tekst instellingen
Ga vervolgens naar het tabblad Stijl en verwijder de hoogte van de tekstregel. Hierdoor hebben we volledige controle over de scopes die we hebben toegevoegd.
- Hoogte tekstregel: 0em
sizing
We gaan de parameters van de modulegrootte wijzigen.
- Maximale breedte: 120 pixels
- Tekstuitlijning: rechts
tussenruimte
En we zullen de moduleparameters voltooien door de module in een vierkant te transformeren. Hiervoor zullen we aangepaste opvulwaarden gebruiken in de afstandsinstellingen.
- Binnenste marge Vertex: 40px
- Onderste interne marge: 60px
- Linker binnenmarge: 40px
- Binnenmarge rechts: 40px
Voeg de tweede regel toe
Structuur van de kolom
Volgende rij! We zullen deze lijn gebruiken om ons hele schuifmenu te ontwerpen. Gebruik de volgende kolomstructuur:
Achtergrond kleur
Open de rij-instellingen zonder modules toe te voegen en wijzig de achtergrondkleur als volgt:
- Achtergrond: #e7e0e2
Achtergrond afbeelding
We gebruiken ook een achtergrondafbeelding met patroon. U kunt een achtergrondpatroon naar keuze gebruiken.
- Grootte achtergrondafbeelding: werkelijke grootte
- Positie achtergrondafbeelding: midden
- Achtergrondafbeelding herhalen: herhalen
sizing
Schakel vervolgens over naar het tabblad Stijl en pas de instellingen voor het formaat dienovereenkomstig aan:
- Aangepaste gootbreedte gebruiken: Ja
- Kolomafstand: 1
- Maximale breedte: 20% (desktop), 40% (tablet), 60% (telefoon)
- Hoogte: 100vh
tussenruimte
Wijzig ook de afstandsinstellingen op verschillende schermformaten.
- Summit interne marge: 10 vw (desktop), 30 vw (tablet), 40 vw (telefoon)
grens
En voltooi de lijnparameters door een linkerrand toe te voegen.
- Breedte linkerrand: 10px
- Kleur linkerrand: #24394a
- Stijl linkerrand: dubbel
Voeg een tekstmodule toe aan de kolom
Voeg inhoud toe
Het is tijd om het eerste menu-item Tekstmodule toe te voegen! Voeg de kopie toe aan de doos inhoud.
Voeg een link toe
Ga verder door een relevante link toe te voegen aan het menu-item.
- Modulelink-URL: #
Achtergrond kleur
Verander dan de achtergrondkleur.
- Achtergrond: rgba (216,210,212,0.35)
Tekst instellingen
Ga vervolgens naar het tabblad Style'3 en wijzig de tekstinstellingen als volgt:
- Lettertype tekst: Domine
- Tekst met zacht licht: vetgedrukte tekst
- Tekst Kleur Tekst: #000000
- Tekst Tekstgrootte: 1vw (desktop), 2vw (tablet), 3vw (telefoon)
- Tekstuitlijning: gecentreerd
tussenruimte
Voltooi module-instellingen door aangepaste afstandswaarden toe te voegen aan verschillende schermformaten.
- Ondermarge: 1vw (desktop), 2vw (tablet), 3vw (telefoon)
- Piek interne marge: 1vw
- Onderste interne marge: 1vw
Tekstmodule klonen (1 module per menu-item)
Nadat u de tekstmodule van het eerste menu-item hebt voltooid, kunt u deze zo vaak klonen als nodig is. Zorg ervoor dat uw modules de hoogte van het venster niet overschrijden.
Bewerk dubbele tekst module inhoud en links
Wijzig de inhoud en de links van elke module Dubbele tekst.
Knopmodule aan kolom toevoegen
Voeg een kopie toe
De laatste module die we in deze rij nodig hebben, is een Button-module. Voeg een kopie naar keuze toe.
Voeg een link toe
Voeg ook een link toe.
- Knop Link-URL: #
alignement
Schakel over naar het tabblad Stijl en wijzig de uitlijning van de knoppen.
- Knop uitlijning: gecentreerd
Knop Instellingen
Ga verder door de knopmodule als volgt aan te passen:
- Gebruik aangepaste stijlen voor de knop: Ja
- Tekstgrootte knop: 0,7 vw (desktop), 1,5 vw (tablet), 2,5 vw (telefoon)
- Tekstkleur knop: #000000
- Achtergrondknop: rgba (0,0,0,0)
- Kleur knoprand: #24394a
- Rand Radius-knop: 0 pixels
- Knop Letterafstand: 4px
- Lettertype-knop: Geen openen
- Soft Light-knop: vetgedrukte tekst
- Kopieerstijlknop: TT
tussenruimte
En voltooi module-instellingen door aangepaste afstandswaarden toe te voegen aan verschillende schermformaten.
- Bovenmarge: 5vw
- Piek interne marge: 1vw (desktop), 2vw (tablet), 3vw (telefoon)
- Binnenmarge Onder: 1vw (desktop), 2vw (tablet), 3vw (telefoon)
- Interne marge links: 1,8 vw (desktop), 3 vw (tablet), 4 vw (telefoon)
- Rechter binnenmarge: 1,8 vw (desktop), 3 vw (tablet), 4 vw (telefoon)
Schuiffunctie toevoegen
CSS-ID toevoegen aan tekstmodule menupictogram
Nu we alle elementen op hun plaats hebben, is het tijd om het responsieve schuifmenu-effect te creëren! Open eerst de tekstmodule (met de scopes) in de derde kolom van uw eerste rij en gebruik een aangepaste CSS-ID op het tabblad Geavanceerd. We zullen deze CSS-ID gebruiken om een klikfunctie in onze code te maken.
- CSS-ID: openschuiven
CSS-klasse toevoegen aan regel #2
Open vervolgens de tweede regel, ga naar het tabblad geavanceerd en voeg een aangepaste CSS-klasse toe. Wanneer erop wordt geklikt, verschuift de lijn.
- CSS-klasse: slide-in-menu-container
Verander de positionering van lijn #2
We zullen deze lijn ook herpositioneren. Merk op hoe de horizontale offset overeenkomt met de lijnbreedte op verschillende schermformaten in de formaatinstellingen.
- Positie: Absoluut
- Locatie: Rechtsboven
- Horizontale offset: -20% (desktop), -40% (tablet), -60% (telefoon)
Verander de dekking van regel 2
En breng de dekking naar 0 in een standaardstatus.
opacity: 0;
Voeg de Code-module toe aan de tweede kolom van de eerste rij
CSS-code invoegen
Om het klikfunctie-effect te creëren en de notenbalken van ons hamburgerpictogram te stylen, hebben we wat CSS-code nodig. Voeg een codemodule toe aan de tweede kolom van uw eerste rij en plaats de volgende regels CSS-code tussen de stijltags, zoals je kunt zien in onderstaande printscreen:
#slide-in-open{
cursor: pointer;
}
.line{
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #24394A;
border-radius: 9px;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
.line-2{
top: 10px;
}
.line-3{
top: 20px;
}
#slide-in-open.open .line-1{
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#slide-in-open.open .line-2{
display: none;
}
#slide-in-open.open .line-3{
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.slide-in-menu {
right: 0!important;
opacity: 1!important;
}
.slide-in-menu-container {
-webkit-transition: all0.5s ease !important;
-moz-transition: all0.5s ease !important;
-o-transition: all0.5s ease !important;
-ms-transition: all0.5s ease !important;
transition: all0.5s ease !important;
}
JQuery-code invoegen
We zullen ook wat JQuery moeten toevoegen voor de klikfunctie. Zorg ervoor dat je plaats code tussen scripttags , zoals je kunt zien in onderstaand printscreen:
jQuery(function($){ $('#slide-in-open').click(function(){ $(this).toggleClass('open'); $('.slide-in-menu-container') .toggleClass('slide-in-menu'); }); });
Sla de wijzigingen in de themabouwer op en geef het resultaat weer op de website
Zodra u alle elementen van uw algemene koptekst hebt voltooid, hoeft u alleen maar alle wijzigingen op te slaan en het resultaat op uw site weer te geven!
overzicht
Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer naar het resultaat kijken.
Conclusie
Concluderend hebben we u in dit artikel laten zien hoe u Divi's themabouwer kunt gebruiken om een responsief schuifmenu te maken. Hiervoor hebben we het beste van Divi's ingebouwde elementen en opties gecombineerd met een aangepaste klikfunctiecode. U kunt zich dus concentreren op het ontwerpen van het uitschuifmenu en de code het functionele deel van de globale kop laten regelen!
Als u vragen of suggesties heeft, kunt u een reactie achterlaten in de opmerkingen hieronder.
