Treci la conținutul principal

Cum se creează un carusel care face scroll cu un membru al echipei cu Divi

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

Când vă creați pagina Despre, probabil că veți dori să prezentați și membrii echipei. Procedând astfel, le permiteți vizitatorilor să interacționeze cu oamenii din spatele afacerii dvs. Dacă sunteți în căutarea unei modalități de a înveseli secțiunea membrilor echipei din pergament, acest tutorial poate fi pentru dvs. Vom crea un carusel de membru al echipei care se deplasează automat, care se deplasează pe măsură ce vizitatorii dvs. parcurg pagina. 

Demonstrație

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

Derulați membru al echipei divi

Începutul concepției

Adăugați o secțiune nouă

spaţierea

Începeți prin adăugarea unei noi secțiuni obișnuite la pagina la care lucrați. Deschideți setările secțiunii și adăugați umplutură personalizată pe diferite dimensiuni de ecran.

  • Căptușeală superioară: 200px (birou), 100px (tabletă și telefon)
  • Garnitură de jos: 200px (birou), 100px (tabletă și telefon)
Configurarea parametrilor

revarsarile

Pentru a ne asigura că nu apare nicio bară de defilare orizontală în designul nostru, vom ascunde deversările de secțiuni în fila avansată.

  • Debord de orizontală: ascuns
  • Debord vertical: ascuns
Configurare overflow

Adăugați linia # 1

Structura coloanei

Continuați să adăugați o nouă linie la secțiune utilizând următoarea structură a coloanei:

Alegeți aspectul divi

dimensionarea

Fără a adăuga încă module, deschideți setările rândurilor, treceți la fila de proiectare și modificați lățimea și lățimea maximă în setările de dimensionare.

  • Lățime: 90%
  • Lățime maximă: 1580px
Parametru linie Divi

spaţierea

De asemenea, adăugăm umplutură personalizată superioară și inferioară.

  • Garnitură superioară: 100px
  • Garnitura de jos: 100px
Configurarea divi a spațiului de linie

Adăugați un modul text la coloană

Adăugați conținut H2

Este timpul să adăugați module, începând cu un prim modul de text. Introduceți conținutul H2 la alegere.

Fa cunostinta cu echipa

Setări text H2

Accesați fila de proiectare a modulului și modificați setările de text H2 după cum urmează:

  • Titlul fontului 2: Quicksand
  • Titlul fontului 2: semi-îndrăzneț
  • Culoarea textului articolului 2: # 000000
  • Antetul 2 Dimensiunea textului: 70px (desktop), 50px (tabletă), 40px (telefon)
Spațiere text Divi

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

vizibilitate

Apoi adăugați un modul de separare. Asigurați-vă că este activată opțiunea „Afișați separatorul”.

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

  • Afișare separator: Da
Afișați separatorul divi

Ligne

Apoi faceți unele modificări la setările liniei.

  • Culoarea liniei: # edf000
  • Stil de linie: solid
  • Poziția liniei: sus
Stilul de distanțare Divi

dimensionarea

Și completați parametrii modulului modificând parametrii de dimensionare în consecință:

  • Greutatea separatorului: 20px
  • Lățime: 11%
  • Alinierea modulului: stânga
  • Înălțime: 20px
Dimensionare modul linie divi

Adăugați o linie # 2

Structura coloanei

La rândul următor! Utilizați următoarea structură de coloane:

Configurarea coloanei Divi

dimensionarea

Fără a adăuga mai multe module, deschideți parametrii liniei și modificați parametrii de dimensionare după cum urmează:

  • Utilizați o lățime personalizată de jgheab: Da
  • Lățimea jgheabului: 2
  • Lățime: 100%
  • Lățime maximă: 100%
Configurarea lățimii jgheabului

spaţierea

Apoi adăugați captură stânga și dreapta doar pe ecranele mai mici.

  • Căptușire stânga: 5% (numai tabletă și telefon)
  • Căptușire dreapta: 5% (numai tabletă și telefon)
Configurarea stilului de spațiere a liniilor

Parametrii coloanei (5x)

Acum, în următorii trei pași ai acestui tutorial, vom face câteva modificări coloanelor. Aplicați cei trei pași la fiecare dintre coloanele din rândul dvs.

Configurarea liniei parametrilor Divi

Fundal gradient

Mai întâi, adăugați un fundal de gradient în fiecare coloană.

  • 1 culoare: rgba (255,255,255,0)
  • 2 culoare: rgba (0,0,0,0,84)
  • Tipul gradientului: liniar
  • Poziția de pornire: 25%
  • Poziția finală: 86%
  • Plasați gradientul deasupra imaginii de fundal: Da
Configurația coloanei spate Divi

Imagine de fundal

Apoi încărcați o imagine de fundal la alegere. Această imagine de fundal reprezintă fiecare membru al echipei, deci utilizați o imagine diferită pentru fiecare coloană.

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

  • Dimensiunea imaginii de fundal: copertă
  • Poziția imaginii de fundal: Centru
Adăugați o imagine de fundal a coloanei Divi

Elementul principal

Completați setările coloanei adăugând CSS personalizat la elementul principal al tabletei din fiecare coloană. Aceste linii de cod CSS ne vor ajuta să plasăm coloanele una sub cealaltă pe tabletă, în loc să avem două una lângă alta.

latime: 100%! important; marja: 50px 0px 50px 0px! important;
Cod css coloana divi

Adăugați un modul persoană la coloană

Adăugați conținut

Pentru a partaja informații despre membrii echipei, vom folosi un modul Persoană. Adăugați modulul prima persoană în coloana 1 și utilizați orice conținut doriți.

Numele persoanei divi

Ștergeți imaginea

Apoi ștergeți imaginea. În schimb, folosim imaginea de fundal a coloanei.

Eliminați imaginea divi

Imagine de fundal

Vom adăuga apoi o suprapunere de imagine ca imagine de fundal a modulului. Puteți găsi pe cel pe care îl folosim descărcând folderul la începutul acestui tutorial.

  • Dimensiunea imaginii de fundal: copertă
  • Poziția imaginii de fundal: Centru
Configurarea fundalului modulului persoană

Setări text de titlu

Accesați fila de proiectare a modulului și modificați setările pentru textul titlului după cum urmează:

  • Nivelul titlului: H3
  • Titlul fontului: Quicksand
  • Greutatea fontului din titlu: îndrăzneț
  • Culoarea textului titlului: #ffffff
  • Mărimea textului titlului: 230%
Personalizarea titlului modulului Divi

Setări text corp

Modificați de asemenea setările textului corpului.

  • Fontul corpului: Open Sans
  • Culoarea textului corpului: #ffffff
  • Înălțimea liniei corpului: 2,2 em
Personalizare corp Divi

Setări de poziție text

Apoi faceți unele modificări la setările textului de poziție.

  • Poziția fontului: Sans Sans
  • Culoarea textului poziției: # edf000
Poziția Divi

spaţierea

Și completați setările modulului adăugând valori de umplere personalizate la setările de spațiere.

  • Înveliș superior: 70%
  • Înveliș inferior: 10%
  • Căptușire stânga: 10%
  • Căptușire dreapta: 10%
Spațierea modulului Divi person

Duplică modulul Persoană de 4 ori

După ce ați completat modulul Persoană, puteți clona întregul modul de patru ori.

Plasați duplicatele în coloanele rămase

Plasați module duplicat în cele patru coloane rămase ale rândului. Asigurați-vă că editați și conținutul.

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

Transformați rândul într-un carusel de defilare automată

Schimbați dimensiunea liniei # 2

Acum, pentru a transforma acest rând într-un carusel de membru al echipei cu defilare automată, trebuie să redeschidem setările de rând și să schimbăm lățimea și lățimea maximă în setările de dimensionare.

  • Lățime: 180%
  • Lățimea maximă: 220% (birou), 100% (tabletă și telefon)
Distanța de modificare a liniei divi

Adăugați mișcarea orizontală a liniei # 2

Completați setările liniei adăugând mișcare orizontală la setările efectului de derulare în fila avansată și ați terminat!

  • Activați mișcarea orizontală: Da
  • Start offset:
    • Birou: 2,5
    • Tabletă și telefon: 0
  • Offset mediu: 0 (la 40%)
  • Decalaj final:
    • Birou: -25 (la 62%)
    • Tabletă și telefon: 0
  • Efect de declanșare a mișcării: mijlocul elementului
Configurarea animației cu defilare Divi

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.

Birou

Derulați membru al echipei divi

Ultimele gânduri

În acest tutorial, ți-am arătat cum să devii creativ cu efectele de defilare încorporate ale Divi. Mai exact, am recreat un carusel frumos, cu defilare automată, membru al echipei. Pe măsură ce vizitatorii derulează pagina, apare o altă parte a caruselului.

Acest articol conține comentarii 0

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top