Elke week bieden we je nieuwe ontwerpideeën die je kunt gebruiken voor je verschillende projecten Divi. Deze tutorials bevatten meestal gebruiksscenario's die u zullen helpen om uw Site web op het bovenste niveau.

Deze week, als onderdeel van ons ontwerpinitiatief Divi In uitvoering laten we u zien hoe u een prachtig zwevend overzichtsmenu maakt dat uitvouwt zodra u de muisaanwijzer erop houdt of erop klikt. Laten we beginnen met enkele algemene stappen. We gaan verder door menu-items toe te voegen met behulp van Blurb-modules en we eindigen door je te laten kiezen tussen een zweef- of klikeffect.

Laten we gaan!

overzicht

Laten we, voordat we in de tutorial duiken, even kijken naar het resultaat dat we kunnen krijgen. Maar dit kan anders zijn, omdat je waarschijnlijk wilt aanpassen wat je leert.

1. Maak een lege pagina en gebruik de Sightseeing-paginasjabloon

Voeg een nieuwe lege pagina toe en activeer Divi Builder

Het eerste dat u moet doen, is een nieuwe lege pagina maken. Geef uw pagina een titel en ga verder met Divi Bouwer.

Download een toeristische bestemmingspagina

Nadat u Divi Builder hebt ingeschakeld, downloadt u de lay-out van de Sightseeing Layout Pack-bestemmingspagina.

2. Voeg een nieuw normaal gedeelte onder aan de pagina toe

Zodra de hoofdmenubalk is verborgen, kunnen we beginnen met het toevoegen van het overzichtsmenu. Om dit te doen, zullen we onderaan onze pagina een nieuwe reguliere sectie toevoegen.

Achtergrondkleur

Open de sectie-instellingen en voeg een enigszins transparante witte achtergrondkleur toe.

• Achtergrondkleur: rgba (255,255,255,0.98)

tussenruimte

Schakel over naar het tabblad Ontwerpen en verwijder alle standaard boven- en ondervulling uit de sectie.

• Topvulling: 0px
• Vulling onderkant: 0px

Standaard schaduw

Voeg een schaduwvak toe aan de volgende sectie.

• Box Shadow Blur Force: 18px
• Schaduwkleur: #383838

Hover Box Shadow

En verander de vervagingssterkte van de zwevende doosschaduw.

• Box Shadow Blur Force: 1000px

Verberg sectie-overschrijdingen en verhoog de Z-index

We gaan de instellingen voor sectie-afmetingen gebruiken om deze techniek te laten werken, maar om ervoor te zorgen dat niets verder gaat dan de sectiecontainer, moeten we de overlopen verbergen. We verhogen ook de Z-index om ervoor te zorgen dat de sectie bovenaan de rest van de pagina blijft.

• Horizontale overloop: verborgen
• Verticale overloop: verborgen
• Z-index: 9999

3. Configureer het menugrootte zodat het overeenkomt met alle schermformaten

Rij 1 toevoegen

Kolomstructuur

Zodra je de basisparameters van de sectie hebt ingesteld, is het tijd om alle secties toe te voegen inhoud die u in het menu wilt weergeven. U kunt elk gewenst ontwerp maken met de ontwerpelementen en ingebouwde opties van Divi, maar u moet er wel voor zorgen dat het perfect schaalt op een hoogte van “100px” voor alle schermformaten. Om dit te doen, zullen we tijdens het hele bouwproces de viewport-breedte-eenheid gebruiken en de waarden op verschillende schermformaten aanpassen. Begin door een nieuwe rij aan uw sectie toe te voegen met behulp van de volgende kolomstructuur:

sizing

Open de rij-instellingen zonder nog modules toe te voegen en zorg ervoor dat ze de volledige breedte van de sectie vullen.

• Gebruik een aangepaste gootbreedte: Ja
• Dakgootbreedte: 1
• Breedte: 100%
• Maximale breedte: 100%

tussenruimte

Ga naar de afstandsinstellingen en verwijder alle standaard boven- en ondervulling.

• Topvulling: 0px
• Vulling onderkant: 0px

Voeg een tekstmodule toe aan een kolom

Voeg een symbool toe

Ga verder door een tekstmodule toe te voegen aan de rijkolom. Voeg het '='-symbool toe aan het vak inhoud of voel je vrij om een ​​ander symbool naar keuze te gebruiken.

Achtergrondkleur

Wijzig daarna de achtergrondkleur van de module.

• Achtergrondkleur: #000000

Tekst instellingen

Schakel over naar het tabblad Ontwerpen en verander ook de tekstinstellingen.

• Tekstlettertype: Open Sans
• Uitlijning van de tekst: midden
• Tekstkleur: #ffffff
• Tekstgrootte: 3vw (desktop), 5vw (tablet), 7vw (telefoon)
• Hoogte van de regel tekst: 1em

tussenruimte

We voegen ook ruimte toe aan de boven- en onderkant van de module met behulp van de volgende aangepaste opvulwaarden:

• Bovenste vulling: 2.5vw (desktop), 3.5vw (tablet), 5vw (telefoon)
• Bekleding onderaan: 2.5vw (desktop), 3.5vw (tablet), 5vw (telefoon)

Voeg de 2-regel toe

Kolomstructuur

Blijf een tweede regel toevoegen met behulp van de volgende kolomstructuur:

sizing

Open, zonder nog modules toe te voegen, de rij-instellingen en laat deze de volledige breedte van het scherm vullen.

• Gebruik een aangepaste gootbreedte: Ja
• Dakgootbreedte: 1
• Breedte: 100%
• Maximale breedte: 100%

tussenruimte

Ga naar de afstandsinstellingen en voeg vervolgens een aangepaste vulling toe aan de boven- en onderkant.

• Bovenste vulling: 2vw (desktop), 4vw (tablet), 6vw (telefoon)
• Bekleding onderaan: 2vw (desktop), 4vw (tablet), 6vw (telefoon)

Tonen

Om ervoor te zorgen dat de twee kolommen naast elkaar blijven op kleinere schermformaten, gaan we een enkele regel CSS-code toevoegen aan het hoofdrijelement.

weergave: flex;

Voeg de Blurb-module toe aan de 1-kolom

Voeg inhoud toe

Het is tijd om de menu-items toe te voegen! Voeg een nieuwe Blurb-module toe aan de eerste kolom in de rij en voer het inhoud de votre choix.

Selecteer het icoon

Kies vervolgens een pictogram.

Voeg een link toe

En voer een paginalink in die overeenkomt met het menu-item.

• Link Titel URL: #

Pictogram instellingen

Schakel over naar het tabblad Ontwerpen en wijzig de pictograminstellingen dienovereenkomstig:

• Pictogramkleur: # ff3314
• Pictogram plaatsing: Top
• Gebruik de tekengrootte van het pictogram: Ja
• Lettergrootte pictogram: 2vw (desktop), 3vw (tablet), 4vw (telefoon)

Instellingen voor titeltekst

Wijzig ook de tekstinstellingen van de titel.

• Titel Politie: PT Serif
• Titel lettertypestijl: onderstrepen
• Onderstreep de kleur van de titel: # ff3314
• Teksttitel: Uitlijning midden
• Teksttitelgrootte: 1.8vw (desktop), 2.3vw (tablet), 3.3vw (telefoon)

Instellingen hoofdtekst

Wijzig vervolgens de instellingen voor de hoofdtekst.

• Lichaamslettertype: Lato
• Uitlijning van de hoofdtekst van de tekst: midden
• Tekstkleur hoofdtekst: # c6c6c6
• Grootte hoofdtekst: 0.9vw (desktop), 1.7vw (tablet), 2.1vw (telefoon)
• Lichaamslengte: 1.8em

sizing

En verander de modulebreedte op verschillende schermformaten met behulp van de volgende waarden:

• Breedte: 60% (desktop), 65% (tablet), 80% (telefoon)

Animatie

We verwijderen ook de pictogramanimatie in de animatie-instellingen.

• Pictogramanimatie: geen animatie

Kloon de module en plaats de kopie in de kolom 2

Nadat u de Blurb-module hebt voltooid, kunt u deze klonen en het duplicaat in de tweede kolom van de regel plaatsen.

Wijzig exemplaar

Zorg ervoor dat u de kopie wijzigt. Vergeet niet het pictogram en de link te wijzigen.

Kloon de regel twee keer

Nadat u beide Blurb-modules in de rij hebt voltooid, kunt u de hele regel twee keer dupliceren.

Wijzig de kopie, het pictogram en de link voor elke blurb-duplicatie afzonderlijk

Zorg ervoor dat u de kopie, het pictogram en de link voor elk van de blurb-menu-items afzonderlijk wijzigt.

4. Maak de sectie plakkerig

Defect

Als je eenmaal alle elementen die je wilt weergeven aan je sectie hebt toegevoegd, kun je de sectie linksboven op je pagina houden door de volgende twee regels CSS-code toe te voegen aan het hoofdsectie-element. :

positie: vast; boven: 0;

Hover (belangrijk!)

Schakel de zweefoptie in op het hoofdelement van de sectie en zorg ervoor dat de sectie ook in die staat plakkerig blijft.

positie: vast;

5. Kies een methode: A) Menu Overvliegen of B) Klik op menu

A) Zweefmenu

Standaard sectieafmeting

In het volgende deel van de tutorial moet je een voorkeursmethode kiezen. een zweefmenu of klik op. Het zweefmenu gedraagt ​​zich als een klikmenu op kleinere apparaten. Als u besluit de zweefoptie te kiezen, opent u de sectie-instellingen opnieuw, gaat u naar de formaatinstellingen en wijzigt u uw menubreedte en -hoogte dienovereenkomstig:

• Breedte: 8vw (desktop), 12vw (tablet), 20vw (telefoon)
• Hoogte: 7.4vw (desktop), 12vw (tablet), 16vw (telefoon)

Zweef sectie

Wijzig de rollover-waarden om een ​​uitgebreid menu te maken.

• Breedte: 80%
• Hoogte: 100vh

B) Menu bij klikken

Voeg een CSS-klasse toe aan een sectie

Als u een menu wilt dat alleen wordt geopend door op te klikken, moet u de tekstmodule openen die het menusymbool bevat. Ga naar het tabblad Geavanceerd en voeg een aangepaste CSS-klasse toe.

• CSS-klasse: volledige breedte open

Voeg een CSS-klasse toe aan de tekstmodule

Open vervolgens de parameters van de sectie en voeg nog een CSS-klasse toe.

• CSS-klasse: soepel transformeren

Sectie grootte

Vervolgens passen we de breedte en hoogte van onze sectie aan.

• Breedte: 8vw (desktop), 12vw (tablet), 20vw (telefoon)
• Hoogte: 7.4vw (desktop), 12vw (tablet), 16vw (telefoon)

Voeg een code toe aan de pagina

Voeg een nieuwe regel toe onderaan de sectie

Om het flip-effect te creëren, hebben we een beetje JQuery- en CSS-code nodig. Begin met het toevoegen van een codemodule aan een nieuwe regel onder aan uw sectie.

Voeg een codemodule toe aan de sectie en voeg een JQuery-wisselcode in

Kopieer de volgende regels uit de JQuery-code en plak ze in het codevak:

jQuery(function($){
$("#fullwidth-open").click(function() {
 $('.smooth-transform').toggleClass('smooth-transform-active');
});
});

Voeg aangepaste CSS-code toe aan pagina-instellingen

Last but not least, open de volgende pagina-instellingen en voeg de volgende CSS-coderegels toe:

.smooth-transform-active {hoogte: 100vh; breedte: 80%; } .smooth-transform {-webkit-transition: alle 0.5s gemak; -moz-transitie: alle 0.5s gemak; -o-overgang: alle 0.5s gemak; -ms-transition: alle 0.5s gemak; overgang: alle 0.5s gemak; }

Final gedachten

In deze tutorial hebben we je laten zien hoe je een prachtige presentatiemodule kunt maken die je uitbreidt door te klikken / zweven (afhankelijk van je voorkeuren). Het is een geweldige manier om extra interactiviteit aan uw menu toe te voegen met behoud van een responsief resultaat voor alle schermformaten. Als je vragen of suggesties hebt, laat dan een reactie achter in het gereserveerde gedeelte hieronder.