Doriți să utilizați efectele de umbră și de hover Divi a crea cuprins interactiv și ieși în evidență site-ul web ?
Asigurați-vă că dvs site-ul web ieșirea în evidență de pe site-uri similare poate fi dificil. Dar odată ce ajungi acolo, aproape întotdeauna merită efortul și gândul care a fost implicat.
Vă vom arăta cum să creați cuprins interactiv la crearea site-urilor web cu Divi.
Să mergem!
studiu
Înainte de a merge în acest tutorial, să aruncăm o privire rapidă la rezultatul la care vă puteți aștepta.
Calculator desktop
Mobil
Să începem realizarea cu Divi!
Vezi si: Divi: Cum se creează un meniu cu roată rotativă la hoverl
Adăugați o secțiune nouă
Culoare de fundal
Creați o pagină nouă sau deschideți una existentă și adăugați o secțiune obișnuită. Deschideți setările secțiunii și schimbați culoarea de fundal.
- Fundal: #03006d
spaţierea
Apoi accesați setările de spațiere a secțiunilor și modificați după cum urmează:
- Umplutură (sus și jos): 50px
Adăugați o linie nouă
Structura coloanei
Continuați prin adăugarea unui nou rând la secțiune folosind următoarea structură de coloană.
dimensionarea
Apoi accesați setările de dimensionare și lăsați linia să umple toată lățimea ecranului.
- Utilizați lățimea jgheab personalizată: DA
- Lățimea jgheabului: 1
- Latime: 100%
spaţierea
Să modificăm, de asemenea, următoarele setări de spațiere:
- Căptușeală (dreapta): 9vw (desktop), 5vw (tabletă și telefon)
- Captuseala (dreapta): 5vw (tableta si telefon)
Adăugați un modul Text la coloana 1
Adăugați conținut
După ce ați terminat de editat setările rândului, adăugați primul modul Text în coloana 1.
Adăugați primul caracter ca text de paragraf. Apoi, cuprins pe care doriți să apară ca text de listă.
Setări text (desktop)
Apoi accesați fila Amenajăriși modificați setările implicite ale textului de paragraf. Asigurați-vă că utilizați aceeași culoare pentru textul și fundalul secțiunii.
- Greutatea fontului: Ultra Bold
- Culoare text: #03006d
- Dimensiune text: 27vw (desktop), 0vw (tabletă și telefon)
- Înălțimea liniei: 1,1 em
- Text Shadow: vezi captura
- Intensitatea estomparii umbrei: 0,01 em
- Culoare umbră: #ffffff
- Alinierea textului: stânga
Treceți cu mouse-ul pe setările de text
Pentru a crea efectul de trecere cu mouse-ul, va trebui să modificăm aceste setări ale textului de paragraf de hover.
- Culoare text (Hover): #ffffff
- Culoare umbră (Hover): rgba(255,255,255,0)
Setări listă (desktop)
Continuați accesând setările înregistrării.
- Greutatea fontului: ușoară
- Culoarea textului listei: #ffffff
- Dimensiunea textului listei: 0px (desktop), 18px (tabletă și telefon)
- Poziția stilului: cerc
- Poziție stil listă neordonată: în exterior
- Element neordonat din listă Indentare: 0px
Listează setările de text la trecerea cursorului (Hover)
Dorim ca textul listei să apară la trecerea cursorului. Acesta este motivul pentru care vom schimba dimensiunea textului la trecerea cursorului.
- Dimensiunea textului listei neordonate (Hover): 18px
spaţierea
Continuați accesând setările de spațiere a modulelor și faceți câteva modificări și acolo.
- Marja (jos): 50px (tabletă și telefon)
- Marja (dreapta): -4vw (desktop), 0vw (tabletă și telefon)
Clonează modulul de text de 4 ori și plasează duplicatele în coloanele rămase
Acum că am terminat de modificat primul modul din coloana 1, clonează modulul de patru ori. Apoi plasați fiecare dintre duplicatele în coloanele rămase. Vom modifica fiecare dintre duplicatele pentru a se potrivi cu ceea ce dorim.
Schimbați modulul Text din coloana 2
Editare conținut
Deschideți duplicatul din coloana 2 și editați conținutul.
Schimbați spațierea
Apoi, accesați setările de spațiere și modificați valorile marjelor personalizate.
- Marja (jos): 50px (tabletă și telefon)
- Marja (stânga și dreapta): -2vw (desktop), 0vw (tabletă și telefon)
- Marja dreaptă: -2vw (desktop), 0vw (tabletă și telefon)
Schimbați modulul Text din coloana 3
Editare conținut
Modificați, de asemenea, conținutul duplicatului din coloana 3.
Schimbați spațierea
Cu setări de spațiere în fila design.
- Marja (stânga): 2,5 vw
- Marja (dreapta): 1,5 vw
Modificați modulul Text din coloana 4
Editare conținut
Continuați prin deschiderea setărilor modulului Text în coloana 4 și editați conținutul și acolo.
Schimbați spațierea
Apoi, accesați fila Design și modificați valorile marjelor personalizate în setările de spațiere.
- Marja (stânga): -6vw
- Marja (dreapta): 2vw
Modificați modulul Text din coloana 5
Conținut
Faceți loc ultimului duplicat. Editați conținutul în zona de conținut.
Schimbați spațierea
Cu setări de spațiere personalizate.
- Marja (stânga): -7vw
- Marja (dreapta): 3vw
studiu
Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra modului în care arată pe diferite dimensiuni de ecran.
Citiți și: Divi : Cum să personalizați coșul de cumpărături și pictogramele de căutare ale modulului „Fullwidth Menu”.
Birou
Mobil
Descărcați DIVI acum!!!
Concluzie
Știm cât de important este să ne asigurăm că dvs site-ul web iese în evidență față de alte site-uri web. Cu opțiunile încorporate ale Divi, puteți fi atât de creativ pe cât doriți.
Acest articol este un exemplu despre modul în care puteți crea conținut interactiv de tip hover.
Sperăm că acest tutorial vă va inspira pentru următoarele proiecte Divi. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
