Cum să comutați între imagini într-un design uimitor al secțiunii divizate

Publicat: 2019-10-31

Design-urile interactive pot face orice site web să strălucească. În acest tutorial, vă vom arăta cum să comutați între imagini într-un design uimitor al secțiunii divizate. Când deplasați o imagine, aceasta va veni în față în timp ce o acoperă pe cealaltă. Urmați pașii de mai jos pentru a recrea designul sau descărcați fișierul JSON prin linkul de înscriere. Asigurați-vă că utilizați imagini cu fundal transparent, astfel încât să puteți controla culorile de fundal ale fiecărei coloane.

Să ajungem la asta!

previzualizare

Să aruncăm o privire asupra designului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați gratuit Toggle Image Design

Pentru a pune mâna pe designul de imagine de comutare gratuită, va trebui mai întâi să o descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Să începem să recreăm

Adăugați o secțiune nouă

Spațiere

Creați o pagină nouă sau deschideți una existentă. Adăugați o secțiune obișnuită, deschideți setările secțiunii și eliminați toate umpluturile implicite de sus și de jos.

Căptușeală sus + jos: 0vw

Vizibilitate

Apoi, setați revărsările secțiunii la ascuns.

Orizontal + Vertical Overflow: Ascuns

Adăugați un rând nou

Structura coloanei

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

Dimensionare

Înainte de a adăuga module, reglați dimensiunea rândului.

Lățimea jgheabului: 1
Lățime: 100%
Lățime maximă: 100%

Spațiere

Eliminați și umplutura implicită de sus și de jos a rândului.

Căptușeală superioară și inferioară: 0vw

Setări coloana 1

fundal

Deschideți apoi setările coloanei 1 și adăugați o culoare de fundal.

Culoare: Pale Rose # E7BAC6

Frontieră

Apoi, ajustați setările de margine ale coloanei pe diferite dimensiuni ale ecranului.

Colțuri rotunjite: sus dreapta + jos dreapta
- Desktop: 10vw
- Tabletă și telefon: 0vw

Vizibilitate

Treceți la fila avansată și reglați setările de vizibilitate după cum urmează:

Orizontal + Vertical Overflow
- Desktop: implicit
- Plasați cursorul: vizibil
Z-Index:
- Desktop: 10
- Plasați cursorul: 11

Setări coloana 2

fundal

Acum, adăugați fundalul de culoare în coloana 2.

Culoare: Verde pal # bfd5a5

Frontieră

Modificați setările de margine ale celei de-a doua coloane după cum urmează:

Colțuri rotunjite: sus stânga + jos stânga
- Desktop: 10vw
- Tabletă și telefon: 0vw

Vizibilitate

Nu în ultimul rând, modificați setările de vizibilitate în consecință:

Orizontal + Vertical Overflow
- Desktop: implicit
- Plasați cursorul: vizibil
Z-Index:
- Desktop: 9
- Plasați cursorul: 11

Adăugați modulul de imagine în coloana 1

Adauga imagine

E timpul să începeți să adăugați module! Adăugați un modul de imagine în coloana 1 și încărcați o imagine semi-transparentă la alegere.

fundal

Folosiți culoarea de fundal a coloanei ca culoare de fundal a imaginii.

Culoare: Pale Rose # E7BAC6

Dimensionare

Apoi, în fila de proiectare, ajustați setările de dimensionare.

Forțează lățimea completă: Da

Spațiere

Adăugați și o umplutură personalizată.

Garnitura dreapta:
- Tabletă: 18vw
- Telefon: 20vw

Transforma

Nu în ultimul rând, ajustați setările de traducere a transformării modulului.

Transformă Transform: axa x 19vw

Adăugați un modul de text în coloana 1

Adauga continut

Treceți la modulul următor, care este un modul text. Adăugați conținut H2 și paragraf la alegere.

Text

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

Font: Verdana
Culoare: alb #ffffff
Mărimea:
- Desktop: 2vw
- Tabletă: 3vw
- Telefon: 3.5vw
Spațierea literelor: 1 px
Aliniere: centrată

Text de antet

Stilează textul antetului în continuare.

Nivel de titlu: H2
Font: Verdana
Greutate: îndrăzneț
Aliniere: centru
Culoare: Magenta # 9d3056
Mărimea:
- Desktop: 6vw
- Tabletă + telefon: 8vw

Dimensionare

Apoi, ajustați dimensiunea modulului.

Lăţime:
- Desktop: 56%
- Tabletă + telefon: 43%

Spațiere

Completați setările modulului modificând setările de spațiere pe diferite dimensiuni ale ecranului.

Marja superioară:
- Desktop: -55vw
- Tabletă: -70vw
- Telefon: -90vw
Căptușeală inferioară:
- Desktop + Tabletă: 0vw
Garnitura stânga: 2vw

Adăugați modulul Contoare de bare în coloana 1

Setările contorului de bare 1-4

Titluri

Următorul și ultimul modul de care avem nevoie în coloana 1 este modulul contoare de bare. Adăugați titluri la ghișeele de bare.

Căpșune
Afine
Mure
Zmeura

Procente

Alături de procente.

Dimensionare

Faceți clic pe prima bară și setați înălțimea. Repetați acest pas pentru toate cele patru bare.

Înălțime: 1,5vw

Setări generale pentru contoare de bare

Elemente

În setările generale ale contorului de bare, deschideți setările elementelor. Comutați procentajul la „Nu”.

Afișați procentajul: nu

fundal

Acum, adăugați un fundal semi-transparent.

Culoare: Trandafir pal cu transparență rgba (157,48,86,0.18)

Bar

În fila de proiectare, dați barelor o culoare a barei magenta.

Culoare fundal: Magenta # 9d3056

Textul titlului

Stilează apoi setările pentru textul titlului.

Font: Verdana
Culoare: alb #ffffff
Mărimea:
- Desktop: 1vw
- Tabletă: 2vw
- Telefon: 3vw

Dimensionare

Continuați ajustând setările de dimensionare ale modulului.

Lăţime:
- Desktop: 49%
- Tabletă + telefon: 33%

Spațiere

Modificați și setările de spațiere.

Marja superioară:
- Tabletă + Telefon: -3vw
Marja inferioară:
- Desktop: 21vw
- Tabletă + telefon: 28vw
Marginea stângă:
- Desktop: 3vw
- Tabletă + telefon: 6vw
Partea inferioară + Căptușeala stângă: 0vw

Frontieră

Modificați apoi setările de margine.

Colțuri rotunjite: 1vw toate cele patru colțuri

Vizibilitate

În cele din urmă, ajustați indexul și debordurile z în fila de vizibilitate.

Overflow orizontal: vizibil
Vertical Overflow: Ascuns
Z-Index: 11

Adăugați modulul de imagine în coloana 2

Adauga imagine

Trecem la a doua coloană! Adăugați un nou modul de imagine și încărcați o imagine semi-transparentă la alegere.

fundal

Utilizați următoarea culoare de fundal a coloanei 2 ca culoare de fundal a imaginii.

Culoare: Verde pal # bfd5a5

Dimensionare

În fila Proiectare, ajustați dimensiunea modulului.

Forțează lățimea completă: Da

Spațiere

Adăugați niște tampoane personalizate la stânga și pe dimensiuni mai mici ale ecranului.

Căptușeală stângă:
- Tabletă: 16vw
- Telefon: 18vw

Transforma

Nu în ultimul rând, modificați setările de traducere a transformării.

Transformă Transform: axa x -19,6vw

Adăugați un modul de text în coloana 2

Adauga continut

Continuați adăugând un modul de text în coloana 2 cu un conținut H2 și paragraf.

Text

Apoi, în fila Design, stilizați textul.

Font: Verdana
Culoare: alb #ffffff
Mărimea:
- Desktop: 2vw
- Tabletă: 3vw
- Telefon: 3.5vw
Spațierea literelor: 1 px
Aliniere: centru

Text de antet

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

Nivel de titlu: H2
Font: Verdana
Greutate: îndrăzneț
Aliniere: centru
Culoare: Verde # 2c5b00
Mărimea:
- Desktop: 6vw
- Tabletă + telefon: 8vw

Dimensionare

Și reglați setările de dimensionare ale modulului.

Lățime: 60%
Aliniere: Corect

Spațiere

Nu în ultimul rând, utilizați câteva valori de spațiere personalizate pe diferite dimensiuni ale ecranului.

Marja superioară:
- Desktop: -55vw
- Tabletă: -63vw
- Telefon: -90vw
Căptușeală inferioară:
- Desktop + Tabletă: 37vw
Căptușeală stângă:
- Desktop: 0vw
- Tabletă + telefon: 16vw
Garnitura dreapta:
- Tabletă + telefon: 2vw

Adăugați modulul Contoare de bare în coloana 2

Setările contorului de bare 1-4

Titluri

Ultimul modul de care avem nevoie în coloana 2 este modulul contoare de bare. Adăugați patru contoare de bare.

Brocoli
Țelină
Castravete
Kale

Procente

Alocați un procent pentru fiecare contor de bare.

Dimensionare

Deschideți setările individuale ale primei bare și modificați înălțimea în setările de dimensionare. Repetați acest pas pentru toate cele patru bare.

Înălțime: 1,5vw

Setări generale pentru contoare de bare

Elemente

În setările generale ale contorului de bare, modificați procentajul de comutare la „Nu”.

Afișați procentajul: nu

fundal

Apoi, adăugați o culoare de fundal semitransparentă.

Culoare: verde pal cu transparență rgba (17.119,3,0.18)

Bar

Apoi, în fila de proiectare, adăugați culoare la bara contorului.

Culoarea barei: verde # 9d3056

Textul titlului

Continuați cu stilul textului.

Font: Verdana
Culoare: alb #ffffff
Mărimea:
- Desktop: 1vw
- Tabletă: 2vw
- Telefon: 3vw

Dimensionare

Modificați și lățimea pe diferite dimensiuni ale ecranului.

Lăţime:
- Desktop: 49%
- Tabletă + telefon: 33%

Spațiere

Treceți la setările de spațiere și adăugați câteva valori de spațiere personalizate pe diferite dimensiuni de ecran.

Marja superioară:
- Desktop: -37vw
- Tabletă + telefon: -40vw
Marja inferioară:
- Desktop: 21vw
- Tabletă + telefon: 28vw
Marginea stângă:
- Desktop: 23vw
- Tabletă + telefon: 60vw
Partea de jos + Căptușeala stângă: 0vw

Frontieră

Adăugăm și câteva colțuri rotunjite.

Colțuri rotunjite: 1vw toate cele patru colțuri

Vizibilitate

Completați setările modulului ajustând depășirile și indexul z din fila de vizibilitate.

Overflow orizontal: vizibil
Vertical Overflow: Ascuns
Z-Index: 11

previzualizare

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

Desktop

Mobil

Este o folie!

În această postare, v-am arătat cum să comutați între imagini într-un design frumos. Aceasta este o modalitate excelentă de a crea design interactiv și de a utiliza indexul z încorporat Divi pentru a determina ce imagine apare. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!