Cum să creați un meniu Blurb pe Hover / Click pentru pagina dvs. cu Divi

În fiecare săptămână, vă punem la dispoziție pachete de layout Divi noi și gratuite pe care le puteți utiliza pentru următorul dvs. proiect. Pentru unul dintre pachetele de aspect, împărtășim și un caz de utilizare care vă va ajuta să duceți site-ul web la nivelul următor.

Săptămâna aceasta, ca parte a inițiativei noastre continue de proiectare Divi, vă vom arăta cum să creați un meniu uimitor de blurb care se extinde odată ce ați plasat sau faceți clic pe el. Mai întâi vom începe parcurgând câțiva pași generali. Vom continua prin adăugarea de elemente de meniu folosind Blurb Modules și vom finaliza permițându-vă să alegeți între un efect de hover sau clic.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Hover Modus

Desktop

Mobil

Faceți clic pe Modus

Desktop

Mobil

1. Creați o pagină goală și încărcați pagina de destinație a obiectivelor turistice

Adăugați o pagină goală nouă și activați Divi Builder

Primul lucru pe care va trebui să-l faceți este să creați o nouă pagină goală. Dați titlului paginii dvs. și treceți la Divi Builder.

Încărcați pagina de destinație a obiectivelor turistice

După ce ați activat Divi Builder, încărcați aspectul paginii de destinație a Sightseeing Layout Pack.

2. Adăugați o nouă secțiune regulată în partea de jos a paginii

Odată ce bara de meniu principală este ascunsă, putem începe să adăugăm meniul blurb. Pentru a face acest lucru, vom adăuga o nouă secțiune obișnuită în partea de jos a paginii noastre.

Culoare de fundal

Deschideți setările secțiunii și adăugați o culoare de fundal albă ușor transparentă.

• Culoare fundal: rgba (255.255.255,0.98)

Spațiere

Treceți la fila de proiectare și eliminați toate umpluturile implicite de sus și de jos ale secțiunii.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Default Box Shadow

Adăugați o umbră de casetă la secțiunea următoare.

• Puterea neclarității umbrei cutiei: 18 px
• Culoare umbră: # 383838

Hover Box Shadow

Și schimbați forța de estompare a umbrei casetei la plimbare.

• Puterea neclarității umbrei cutiei: 1000 px

Ascundeți deversările secțiunii și creșteți indexul Z

Vom folosi setările de dimensionare a secțiunii pentru ca această tehnică să funcționeze, dar pentru a ne asigura că nimic nu depășește containerul secțiunii, va trebui să ascundem revărsările. De asemenea, mărim indexul Z pentru a ne asigura că secțiunea rămâne în partea de sus a restului paginii.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns
• Indicele Z: 9999

3. Asigurați-vă că conținutul meniului din toate secțiunile este creat folosind Vw și se potrivește în 100 de înălțimi ale ecranului pe toate dimensiunile ecranului

Adăugați rândul # 1

Structura coloanei

După ce ați completat setările de bază ale secțiunii, este timpul să adăugați tot conținutul pe care doriți să îl afișați în meniu. Puteți crea orice design doriți folosind elementele de design și opțiunile încorporate ale Divi, dar trebuie să vă asigurați că totul se potrivește la o înălțime „100vh” pe toate dimensiunile ecranului. Pentru a realiza acest lucru, vom folosi unitatea de lățime a ecranului pe tot parcursul procesului de construcție și vom modifica valorile pe diferite dimensiuni ale ecranului. Începeți prin adăugarea unui rând nou în secțiunea dvs. utilizând următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândurilor și asigurați-vă că ocupă întreaga lățime a secțiunii.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Treceți la setările de spațiere și eliminați toate umpluturile implicite de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați un modul de text în coloană

Adăugați un simbol

Continuați adăugând un modul de text în coloana rândului. Adăugați simbolul „=” în caseta de conținut sau nu ezitați să utilizați orice alt simbol la alegere.

Culoare de fundal

Schimbați apoi culoarea de fundal a modulului.

• Culoare fundal: # 000000

Setări text

Treceți la fila de proiectare și modificați și setările de text.

• Font text: Deschideți Sans
• Aliniere text: centru
• Culoarea textului: #ffffff
• Dimensiune text: 3vw (desktop), 5vw (tabletă), 7vw (telefon)
• Înălțimea liniei de text: 1em

Spațiere

De asemenea, adăugăm spațiu în partea de sus și de jos a modulului folosind următoarele valori de umplere personalizate:

• Căptușeală superioară: 2,5vw (desktop), 3,5vw (tabletă), 5vw (telefon)
• Căptușeală inferioară: 2,5vw (desktop), 3,5vw (tabletă), 5vw (telefon)

Adăugați rândul # 2

Structura coloanei

Continuați adăugând un al doilea rând folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și permiteți rândului să ocupe întreaga lățime a ecranului.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Treceți la setările de spațiere și adăugați câteva umpluturi personalizate în partea de sus și de jos.

• Căptușeală superioară: 2vw (desktop), 4vw (tabletă), 6vw (telefon)
• Căptușeală inferioară: 2vw (desktop), 4vw (tabletă), 6vw (telefon)

Afişa

Pentru a ne asigura că ambele coloane rămân unele lângă altele pe dimensiuni de ecran mai mici, vom adăuga o singură linie de cod CSS la elementul principal al rândului.

display: flex;

Adăugați Blurb Module la coloana 1

Adauga continut

Este timpul să începeți să adăugați elementele de meniu! Adăugați un nou modul Blurb la prima coloană a rândului și introduceți un conținut la alegere.

Selectați pictograma

Alegeți o pictogramă în continuare.

Adăugați un link

Și introduceți un link de pagină care se potrivește cu elementul de meniu.

• Adresă URL a titlului: #

Setări pictograme

Treceți la fila de proiectare și modificați setările pictogramei în consecință:

• Culoare pictogramă: # ff3314
• Plasarea pictogramelor: sus
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 2vw (desktop), 3vw (tabletă), 4vw (telefon)

Setări text titlu

Modificați și setările pentru textul titlului.

• Titlu Font: PT Serif
• Titlu Stil Font: Subliniat
• Culoare subliniere titlu: # ff3314
• Alinierea textului titlului: centru
• Dimensiune text titlu: 1,8vw (desktop), 2,3vw (tabletă), 3,3vw (telefon)

Setări text corp

Apoi, modificați setările pentru textul corpului.

• Font corp: Lato
• Alinierea textului corpului: centru
• Culoarea textului corpului: # c6c6c6
• Dimensiunea textului corpului: 0.9vw (desktop), 1.7vw (tabletă), 2.1vw (telefon)
• Înălțimea liniei corpului: 1,8em

Dimensionare

Și modificați lățimea modulului pe diferite dimensiuni ale ecranului folosind următoarele valori:

• Lățime: 60% (desktop), 65% (tabletă), 80% (telefon)

Animaţie

De asemenea, eliminăm animația pictogramei din setările animației.

• Animație pictogramă: fără animație

Clonați modulul Blurb și plasați duplicatul în coloana 2

După ce ați finalizat modulul Blurb, îl puteți clona și plasa duplicatul în a doua coloană a rândului.

Modificare copiere

Asigurați-vă că modificați copia.

Schimbă iconița

Împreună cu pictograma.

Schimbați legătura

Și linkul de pagină care se potrivește cu noul element de meniu.

Clone Row de două ori

După ce ați finalizat ambele module Blurb în rând, puteți clona întregul rând de două ori.

Schimbați copierea, pictograma și linkul pentru fiecare copie duplicat individual

Asigurați-vă că modificați copia, pictograma și linkul pentru fiecare dintre elementele de meniu blurb în mod individual.

4. Faceți secțiunea lipicioasă

Mod implicit

După ce ați adăugat toate elementele pe care doriți să le afișați în secțiunea dvs., puteți face ca secțiunea să rămână în partea stângă sus a paginii dvs. adăugând următoarele două linii de cod CSS la elementul principal al secțiunii:

position: fixed;
top: 0;

Plasați cursorul (Important!)

Activați opțiunea de deplasare pe elementul principal al secțiunii și asigurați-vă că secțiunea rămâne lipicioasă și în această stare.

position: fixed;

5. Alegeți o metodă: A) Menu On Hover sau B) Menu On Click

A) Meniu pe Hover

Dimensiune implicită a secțiunii

În următoarea parte a tutorialului, va trebui să alegeți o metodă preferată; un meniu deasupra sau faceți clic. Meniul de deplasare se va comporta ca un meniu de clic pe dispozitive mai mici. Dacă decideți să alegeți opțiunea de deplasare, deschideți din nou setările secțiunii, accesați setările de dimensionare și modificați lățimea și înălțimea meniului în consecință:

• Lățime: 8vw (desktop), 12vw (tabletă), 20vw (telefon)
• Înălțime: 7.4vw (desktop), 12vw (tabletă), 16vw (telefon)

Plasați cursorul pe dimensiunea secțiunii

Modificați valorile de pe mouse pentru a crea un meniu extins.

• Lățime: 80%
• Înălțime: 100vh

B) Meniu pe clic

Adăugați Clasa CSS la modulul Text

Dacă doriți un meniu care se deschide doar cu clic, va trebui să deschideți modulul text care conține simbolul meniului. Accesați fila avansată și adăugați o clasă CSS personalizată.

• Clasa CSS: fullwidth-open

Adăugați Clasa CSS la Secțiune

Deschideți apoi setările secțiunii și adăugați o altă clasă CSS.

• Clasa CSS: transformare lină

Secțiunea Dimensionare

În continuare modificăm lățimea și înălțimea secțiunii noastre.

• Lățime: 8vw (desktop), 12vw (tabletă), 20vw (telefon)
• Înălțime: 7.4vw (desktop), 12vw (tabletă), 16vw (telefon)

Adăugați cod la pagină

Adăugați un rând nou în partea de jos a secțiunii

Acum, pentru a crea efectul de comutare, vom avea nevoie de un pic de cod JQuery și CSS. Începeți prin adăugarea unui modul de cod la un rând nou din partea de jos a secțiunii.

Adăugați modulul de cod la secțiune și introduceți codul de comutare JQuery

Copiați următoarele linii de cod JQuery și lipiți-le în caseta de cod:

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

});
</script>

Adăugați cod CSS personalizat la Setările paginii

Nu în ultimul rând, deschideți apoi setările paginii și adăugați următoarele linii de cod CSS:

.smooth-transform-active {
height: 100vh;
width: 80%;
}

.smooth-transform {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Hover Modus

Desktop

Mobil

Faceți clic pe Modus

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să creați un modul de blurb frumos care se extinde la clic / hover (în funcție de preferințe). Aceasta este o modalitate excelentă de a adăuga interactivitate suplimentară meniului dvs., menținând în același timp un rezultat receptiv pe toate dimensiunile ecranului. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.