8 teme pentru copii Divi excelente pentru fotografi

8 teme pentru copii Divi excelente pentru fotografi

Divi este o temă WordPress excelentă pentru construirea unui site de fotografie. Arătați-vă abilitățile de fotografie cu o galerie, prezentați exemple de lucru cu un portofoliu, oferiți informații despre prețuri, rezervați clienții printr-un formular de contact și multe altele. 

Desigur, nu trebuie să vă construiți site-ul de fotografie de la zero. Există o mulțime de teme de fotografie pentru copii disponibile pentru a vă ajuta să începeți. În acest articol, vom arunca o privire asupra a 10 teme pentru copii Divi, care sunt perfecte pentru fotografi.

8 teme Divi pentru copii Perfecte pentru fotografi

1. înrudire

înrudire

Kindred a fost conceput pentru fotografi, videografi și artiști creativi. Oferă 16 planuri de pagini cu 2 pagini de pornire, 3 stiluri de antet, 3 stiluri de galerie, pagină cu broșură de preț, mai multe pagini de blog și multe altele. 

Paginile includ servicii, întrebări frecvente, mărturii, prețuri, mai multe aspecte de e-mail și multe altele. Paginile de pornire prezintă exemple de lucru într-un glisor pe ecran complet. Blogul include o bară laterală stilizată.

Creați-vă rețeaua socială cu fluxul Instagram integrat. Are culori moi, un design elegant și grafică desenată manual, care sunt ideale pentru fotografia de nuntă, dar funcționează excelent și pentru alte tipuri de fotografie.

Mai multe informatii | demonstrație | web hosting

2. Fototezarea

Hotelo

Photelo este o temă versatilă pentru copii, care a fost concepută pentru orice tip de activitate de fotografie. Are 8 pagini principale care includ pagini pentru serviciile dvs. și o galerie foto. 

Pagina de pornire are un glisor pe ecran complet pentru a afișa exemple de muncă, mai multe CTA-uri pentru a vă vedea serviciile, mărturii, un slogan elegant pe o fotografie cu o margine stilizată, o galerie stilizată care prezintă categorii și În plus.

 Paginile blogului includ o bară laterală stilizată. Include și un stil pentru Bloom. Stilul și culorile îl fac foarte potrivit pentru fotografii de portret, familie și nunți.

Mai multe informatii | demonstrație | web hosting

3. Iosua

Joshua

Joshua a fost conceput pentru fotografi profesioniști și studiouri de fotografie. Acesta include 3 pagini de pornire diferite, care oferă moduri diferite de a vă arăta fotografia și serviciile. 

De asemenea, include 2 pagini Despre mine, 2 pagini de servicii cu o singură pagină de servicii, 5 pagini de portofoliu care includ o pagină de categorie și 2 pagini de proiect unice, mai multe pagini de blog, o pagină de prețuri etc. Există 19 subpagini de utilizat. 

Blogul are o singură pagină de postare. Paginile de pornire includ o mulțime de CTA-uri stilizate, cu imagini pentru a vă arăta categoriile și pentru a oferi servicii. Imaginile se înclină în zbor planant. Este ideal pentru fotografii independenți de tot felul.

Mai multe informatii | demonstrație | web hosting

4. Parker

Parker

Parker a fost conceput pentru fotografi, videografi, planificatori de evenimente, artiști creativi și antrenori. Acesta vine cu 13 pagini, 3 stiluri de antet, 3 stiluri de galerie, o pagină de broșură cu un preț, 4 pagini de blog și multe altele.

Paginile includ Despre, Portofoliu, Informații, Prețuri, Laudă, Blog și Contact. Pagina de pornire afișează o imagine cu informații care se suprapun pe fundal, CTA-uri, linkuri către portofolii, blog, ofertă etc. Culorile moi sunt ideale pentru fotografiile de familie și de nuntă.

Mai multe informatii | demonstrație | web hosting

5. Sala

Halle

Halle a fost conceput pentru ca fotografele și creativele să își vândă fotografiile, serviciile și alte produse. Acesta vine cu 14 pagini, inclusiv pagina de destinație, pagina de pornire, 3 galerii, prețuri, Instagram, blog cu mai multe machete, pagina magazinului etc. 

Pagina de destinație este un CTA cu un formular de abonament. Îmi place pagina de galerii care arată imagini alternante. Are mai multe opțiuni de navigare și un pre-încărcător care afișează o animație în timp ce site-ul se încarcă. Designul și culorile feminine sunt perfecte pentru fotografia de nuntă.

Mai multe informatii | demonstrație| web hosting

6. Portofoliu de fotografie

Portofoliu de fotografie

Photo Portfolio a fost conceput pentru a crea un portofoliu pentru fotografi. Acesta vine cu 4 pagini principale și include pagini de categorii care prezintă galerii pentru fiecare dintre subiecte. Pagina Rezervă acum include un calendar încorporat și un formular pentru a rezerva o sesiune foto. 

Pagina de pornire afișează CTA de rezervare în secțiunea eroi. Aspectul include imagini pentru linkuri către fotografii de achiziționat. Bara laterală include linkuri către fiecare dintre categorii. Este o alegere bună pentru a vă arăta galeriile foto.

Mai multe informatii | demonstrație | web hosting

7. Fotografie Divi

Divi Photography

Divi Photography a fost conceput pentru fotografii care doresc să își prezinte serviciile, să vândă fotografii, să creeze evenimente și să creeze cursuri online. Are o versiune ușoară și o versiune întunecată. Fiecare versiune are zeci de pagini, inclusiv toate paginile magazinului pentru WooCommerce și toate paginile cursului pentru LifterLMS. 

De asemenea, include mai multe pagini de portofoliu pentru a vă arăta munca, mai multe pagini de blog, mai multe pagini de evenimente, rezervări, servicii etc. Este inclus pluginul Divi Icon Expansion Pack cu 50 de pictograme personalizate pentru fotografie. Este o alegere deosebit de bună pentru oricine dorește să vândă produse sau să ofere cursuri prin intermediul site-ului web.

Mai multe informatii | demonstrație | web hosting

8. Birdie Jones

Birdie jones

Birdie Jones a fost conceput pentru fotografii de nuntă. Are 6 pagini principale și include 3 aspecte diferite ale galeriei. Pagina de pornire afișează fotografiile într-un glisor pentru secțiunea eroi. De asemenea, include o secțiune cu un link către informații dintr-un set de imagini. 

Secțiunea portofoliu afișează imagini ca linkuri către categorii de fotografii. Pagina Informații oferă informații despre pachetele dvs. ca CTA într-un aspect alternativ. De asemenea, include un subsol personalizat cu un feed Instagram încorporat pentru a vă construi rețeaua socială. Este perfect pentru orice afacere legată de nunți.

Mai multe informatii | demonstrație | web hosting

Gata pentru această listă de teme pentru copii Divi. Dacă nu aveți Divi, dar doriți să găsiți o temă excelentă pe care să o puteți folosi pentru a crea un blog de fotograf, vă recomandăm următoarea listă.

Cum se creează contoare de cercuri care prind viață în timp ce defilați cu Divi

Cum se creează contoare de cercuri care prind viață în timp ce defilați cu Divi

Contoare de cercuri animate sunt un mod popular de a prezenta informații (cum ar fi statistici sau valori) pe o pagină web cu interacțiune distractivă. De fapt, este posibil să fiți deja familiarizat cu modulul contorului de cercuri Divi, ceea ce face ca adăugarea contoarelor de cercuri pe site-ul dvs. Divi să fie rapidă și ușoară. 

Cu toate acestea, în acest tutorial, vă vom arăta cum să creați contoare de cercuri complet personalizate care se animă în timp ce derulați! Nu vom avea nevoie de CSS personalizat extern pentru a le crea. Trucul este să profitați de funcția Straturi a Divi pentru a gestiona mai multe module suprapuse și animate cu precizie.

Rezultat posibil

Iată o prezentare rapidă a divizorilor de cercuri animate pe care le vom crea în acest tutorial.

contoare de cercuri animate pe defilare

Crearea celor patru contoare de cercuri care prind viață atunci când derulați cu Divi

Configurația secțiunii și a liniei

Mai întâi, adăugați un rând cu patru coloane la secțiunea implicită.

contoare de cercuri animate pe defilare

Apoi, deschideți setările secțiunii și adăugați o marjă de sus și de jos, astfel încât să avem suficient spațiu pentru a testa efectele de derulare ale contoarelor de cercuri pe care le vom crea.

  • Marja: 85vh înaltă, 85vh mică
contoare de cercuri animate pe defilare

Apoi, deschideți setările liniei și actualizați următoarele:

  • Lățimea jgheabului: 1
  • Lățime: 100%
  • Lățime maximă: 1200px
contoare de cercuri animate pe defilare

Utilizarea vizualizării Straturi

Înainte de a începe să creați contoare de cercuri animate, asigurați-vă că implementați funcția Divi Layers. Puteți face acest lucru făcând clic pe pictograma straturilor gri din meniul de setări de jos.

contoare de cercuri animate pe defilare

Deoarece vom crea o mulțime de elemente (sau straturi) suprapuse, caseta de straturi va fi cu siguranță utilă pentru gestionarea straturilor noastre în viitor.

Crearea contorului de cerc animat nr. 1 (25%)

Acest prim contor de cercuri animate va anima până la 25% din cercul de pe scroll și va avea textul procentual corespunzător centrului care se va amesteca în scroll. Pentru a construi proiectarea completă a contorului de cercuri, vom folosi mai multe divizoare de text și module suprapuse. Iată cum să o faci.

Cercul din spate

Pentru a crea cercul din spate vom folosi un modul separator pe care îl vom forma ca un cerc și îi vom da o culoare de fundal.

Adăugați un modul de separare
contoare de cercuri animate pe defilare

Trageți separatorul în sus în vizualizarea stratului și schimbați eticheta pentru a citi „cerc înapoi”. Apoi deschideți setările modulului de separare și actualizați următoarele:

  • Afișare divizor: NU
  • Culoarea fundalului: # c3e0e5
contoare de cercuri animate pe defilare

Actualizați parametrii de proiectare după cum urmează:

  • Latime: 250px
  • Înălțime: 250px
  • Marja: 25 pixeli în partea de sus, 25 pixeli în partea de jos, 25 pixeli în stânga
  • Colțuri rotunjite: 50%
contoare de cercuri animate pe defilare

Bara rotativă de culoare

Următoarea parte a contorului de cerc va fi bara de culoare rotativă. Duplicați divizorul anterior (cercul din spate) pentru a relansa designul. Apoi actualizați noul separator cu eticheta „colorbar”.

contoare de cercuri animate pe defilare

Pentru a crea efectul rotativ al barei de culoare, trebuie să transformăm acest divizor într-un semicerc cu culoarea pe care dorim să o folosim pentru bară.

Deschideți setările separatorului de bare de culori și actualizați următoarele:

  • Culoarea fundalului: niciuna
  • Fundal gradient de culoare stânga: # 121b55
  • Culoarea de fundal a gradientului pe partea dreaptă: rgba (255,255,255,0)
  • Direcția gradientului: 90deg
  • Poziția de pornire: 50%
  • Poziția finală: 0%
contoare de cercuri animate pe defilare

În unele browsere există o mică problemă care se suprapune, care arată culoarea nedorită prin straturi. Pentru a evita acest lucru, vom face acest semicerc puțin mai mic și vom ajusta decalajul în consecință.

  • Lățime: 248px
  • Înălțime: 248px
contoare de cercuri animate pe defilare

Pentru ca cercul barei de culori să se suprapună cercului din spate, dați divizorului o poziție absolută după cum urmează:

  • Poziție: absolută
  • Offset vertical: 26 pixeli
  • Offset orizontal: 26 pixeli
contoare de cercuri animate pe defilare

Apoi adăugați următorul efect de derulare pentru a roti bara circulară cu 90 de grade (sau 25% din cerc).

Sub fila Efecte rotative ...

  • Rotirea de pornire: 0deg (la 15% din fereastră)
  • Rotație medie: 90 de grade (la 20% -25% din vizualizare)
  • Sfârșitul rotației: 90 de grade (la 30% din vizualizare)
contoare de cercuri animate pe defilare

Procentele și valorile de rotație aici pot să nu pară să aibă un sens complet în acest moment. Facilităm actualizarea rotației mai târziu atunci când construim următorul contor al cercului care se termină la 180 de grade (50% din cerc). Important în acest moment este că rotația se termină la 90 de grade (sau 25%).

Scutul

Următorul element al contorului nostru de cercuri este ceea ce eu numesc scut, care este un alt semicerc care ascunde partea stângă a cercului barei de culoare în timp ce se rotește.

 Pentru a crea scutul, copiați primul modul divizor de cerc înapoi pe care l-am creat mai devreme. Apoi trageți-l sub modulul de separare „Color Bar” și actualizați eticheta la „shield” pentru o referință ușoară.

contoare de cercuri animate pe defilare

Deschideți setările divizorului scutului și actualizați următoarele:

  • Culoarea fundalului: niciuna
  • Culoarea de fundal a gradientului stâng: # c3e0e5 (la fel ca cercul din spate)
  • Culoarea de fundal a gradientului pe partea dreaptă: rgba (255,255,255,0)
  • Direcția gradientului: 90deg
  • Poziția de pornire: 50%
  • Poziția finală: 0%
contoare de cercuri animate pe defilare

Acum acordați modulului o poziție absolută după cum urmează:

  • Poziție: absolută
  • Offset vertical: 25px
  • Offset orizontal: 25 pixeli
contoare de cercuri animate pe defilare

Cercul frontal

Următoarea parte a contorului de cerc este cercul frontal, care va ascunde partea de mijloc a straturilor anterioare și va expune marginea exterioară.

Pentru a-l crea, copiați divizorul cercului din spate, lăsați-l sub modulul divizorului scutului și actualizați eticheta în „cercul frontal”.

contoare de cercuri animate pe defilare

Deschideți setările modulului de separare a cercului frontal și actualizați următoarele:

  • Culoare fundal: #ffffff
  • Lățime: 200px
  • Înălțime: 200px
contoare de cercuri animate pe defilare

Apoi adăugați poziția absolută după cum urmează:

  • Poziție: absolută
  • Offset vertical: 50px
  • Offset orizontal: 50px
contoare de cercuri animate pe defilare

Numărul decolorării

Ultima piesă a acestui prim contor de cerc este numărul de decolorare care corespunde valorii indicate de bara rotativă.

Pentru a-l construi, adăugați un nou modul text sub modulul de separare a cercului frontal.

contoare de cercuri animate pe defilare

În caseta Straturi, denumiți noul modul de text „num1”. Apoi deschideți setările și actualizați corpul pentru a citi „25%”.

contoare de cercuri animate pe defilare

Sub setările de proiectare, actualizați următoarele:

  • Greutatea fontului textului: bold
  • Dimensiunea textului: 25px
  • Înălțimea liniei de text: 2em
  • Alinierea textului: centru
contoare de cercuri animate pe defilare
  • Lățime: 200px
  • Înălțime: 200px
  • Colțuri rotunjite: 50%
contoare de cercuri animate pe defilare
  • Garnitură: peste 75px
  • Poziție: absolută
  • Offset vertical: 50px
  • Offset orizontal: 50px
contoare de cercuri animate pe defilare

Acum textul ar trebui să fie perfect centrat în contorul de cercuri.

Pentru a adăuga efectul de estompare, actualizați următoarele efecte de derulare:

Sub fila Fade In și Fade Out ...

  • Activați decolorarea și intrarea: DA
  • Opacitate inițială: 0% (la 10% din fereastră)
  • Opacitate medie: 100% (la 20% din fereastră)
  • Opacitate finală: 100% (la 100% din vizualizare)
contoare de cercuri animate pe defilare

Asta e pentru contorul circular. Descoperiți rezultatul.

contoare de cercuri animate pe defilare

Tot ce trebuie să faceți acum este să copiați ceea ce am făcut până acum pe celelalte coloane și să modificați diferitele valori pentru a face contorul unic.

8 teme pentru copii Divi pentru antrenori personali

8 teme pentru copii Divi pentru antrenori personali

Mulți antrenori personali au apelat la Divi pentru a-și construi platforma online. Desigur, are sens de ce ar folosi Divi: acesta din urmă oferă tot ce aveți nevoie pentru a vă afișa serviciile, mărturiile, blogul pe domeniul dvs. și pentru a comunica cu potențialii clienți. 

Din fericire, nu trebuie să-ți construiești site-ul de coaching de viață de la zero. În această listă, ne vom uita la 8 teme pentru copii Divi pentru antrenori personali, care vă vor ajuta să începeți următorul dvs. proiect Divi. Rămâneți până la final pentru un pachet de aspect bonus.

1. Quimper

Quimper

Quimper a fost conceput pentru antrenori de viață, terapeuți, vindecători și profesioniști în domeniul sănătății. Vine cu 8 pagini personalizate. Pagina Detalii pachet conține o mulțime de informații despre pachet și include un CTA. 

Quimper oferă detalii despre evenimente, inclusiv un CTA și un program orar. Pagina Podcast include podcast-uri încorporate. Include, de asemenea, mai multe machete de blog, o pagină de mărturie, 3 înscrieri, o opțiune Bloom pentru subsol, un feed Instagram încorporat și un personalizator de conectare WP și o pagină de autentificare. Stilul include un design feminin cu culori moi și fundaluri florale.

Pret: 170 € | Mai multe informatii | cazare

2. Antrenor de viață

Antrenor de viață

Life Coach a fost conceput pentru antrenorii de viață care susțin conferințe la fața locului și audio. Este un design de o singură pagină, care include un fundal alb minimalist, cu evidențieri albastru închis peste tot. O secțiune pentru conferințe include playere audio integrate. O secțiune pentru calendarul lunar al conferinței este gestionată cu file stilizate. 

Acolo veți găsi, de asemenea, blurbs, contoare de numere, mărturii, un CTA, tabele de prețuri, hartă, opt-in slim pentru e-mailuri și multe altele. Designul curat are o senzație corporativă profesională, care va atrage directorii.

Preț: 29 $ | Mai multe informatii | cazare

3. Viu

viu

Vivid a fost conceput pentru antrenori, mentori și educatori. Vine cu 10 pagini principale, inclusiv mai multe pagini Work With Me pentru coaching privat, coaching de grup, programe online, abonare VIP.

 Include, de asemenea, Pagini de vânzare Starter și Long Form, 2 formulare Bloom, 2 pagini de politici, pagini de arhivă, pagini de postare unică, pagină 404, stil monarh, integrarea pictogramelor sociale etc. 

Un meniu dual afișează meniul principal și un meniu hamburger cu mai multe legături. Serviciile sunt afișate cu o animație de revelare personalizată. Are un design feminin care poate fi schimbat cu ușurință în foaia de stil.

Pret: 120,00 £ | Mai multe informatii | cazare

4. Antrenor Divi

Divi antrenor

Divi Coach a fost conceput având în vedere antrenorii de viață, mentorii, vorbitorii, terapeuții și formatorii. Vine cu 4 pagini pentru a vă arăta serviciile, evenimentele, mărturiile, postările de blog, informațiile și formularul de contact. Pagina de pornire include o secțiune de portofoliu personalizată. 

Postările de pe blog sunt afișate într-un carusel personalizat și într-un blog personalizat recent. De asemenea, include un stil personalizat pentru pagina blogului. Are o schemă de culori feminină, dar culorile sunt ușor de schimbat pentru orice tip de design profesional doriți.

Preț: 39 $ | Mai multe informatii | cazare

5. Fata Divi

Divi fata

Divi Girl a fost concepută pentru antrenori de viață, bloggeri, difuzori, formatori, autori, furnizori de servicii etc. Acesta vine cu 12 pagini de pornire, inclusiv una numită Life Coach, pentru a vă afișa serviciile, informațiile, mărturiile etc.

 De asemenea, include un blog cu mai multe machete pentru postări unice, integrarea WooCommerce cu toate paginile magazinului, pagina cu întrebări frecvente și pagina de contact. 

Pagina de pornire afișează un CTA în secțiunea eroi, mai multe stiluri de blurb și mai multe secțiuni cu lățime completă pentru o ofertă și un CTA de contact. Culorile moi sunt perfecte pentru designul feminin.

Preț: 49 $ | Mai multe informatii | cazare

6. Prospera

Prospera

Thrive a fost conceput având în vedere antrenori, mentori și consultanți. Vine cu 6 pagini principale, inclusiv Lucrați cu mine pentru a vă arăta serviciile și Cuvinte amabile pentru a vă arăta mărturiile. Acesta include un magnet principal pentru Divi și Bloom, un subsol personalizat global, fonturi personalizate și un îndemn la acțiune. 

Secțiunea eroi și blurb, inclusiv text cu suprapuneri albastru deschis și chenare albe. Fonturile de titlu sunt aurii. Celelalte pagini au un stil similar. Culorile pot fi schimbate cu ușurință în foaia de stil.

Pret: 79,00 £ | Mai multe informatii | cazare

7. Feminin Lil

Lil feminin

Lil Feminine a fost conceput pentru antrenori de viață, antrenori de afaceri și multe altele. Vine cu 6 pagini principale, inclusiv servicii, pentru a arăta tipurile de servicii și cursuri pe care le oferiți. Serviciile de pe pagina principală sunt prezentate în mai multe secțiuni cu descrieri care includ o suprapunere pentru secțiune. 

De asemenea, oferă CTA-uri grozave, o secțiune de blog personalizată, mai multe machete de blog cu bare laterale personalizate, pagini de arhivă și categorie, un subsol personalizat și un feed Instagram încorporat. Culorile moi sunt ideale pentru antrenorii de viață pentru femei.

Pret: 99,99 € | Mai multe informatii | cazare

8. Tema copilului Divi Coach

Tema copilului Divi coach

Tema Divi Coach Child a fost concepută pentru mai multe tipuri de site-uri de coaching, inclusiv antrenori de viață. Acesta vine cu 5 pagini pentru a vă arăta serviciile și informațiile. Serviciile sunt afișate în machete care includ animații personalizate și suprapuneri care afișează informații de zbor. 

O secțiune personalizată a echipei include un design similar, care este excelent pentru companiile cu mai mulți antrenori de viață. Suprapunerile Divi, barele Divi și Divi Mega Pro sunt încorporate și includ șabloane proiectate profesional. Meniul afișează un CTA. Evidențierea și stilul verde sunt minunate atât pentru antrenorii de viață, atât pentru bărbați, cât și pentru femei.

Preț: 49 $ | Mai multe informatii | cazare

Bonus: pachet de pregătire a antrenorului de salvare

Pachet de machete Life coach

Pachetul de aspecte pentru antrenorii de viață Elegant Themes vine cu 6 pagini, inclusiv Acasă, Blog, Coaching pentru a vă arăta serviciile de coaching, Contact, Despre și o pagină de destinație. 

Aspectele includ evidențieri portocalii, fundaluri gri, separatoare unghiulare și o mulțime de module de styling, cum ar fi blurb, blog, mărturii, formular de contact, formular de înscriere, urmărire rețele sociale, flip flops etc. 

Aspectul este disponibil în Divi Builder și include fotografii gratuite pe care le puteți folosi cu proiectele dvs. Structura diagonală și culorile conferă aspectului un design unic care iese în evidență.

Pret: gratuit | Mai multe informatii | cazare

Gândiți sfârșit

Aceasta este privirea noastră la 8 teme pentru copii Divi pentru antrenori personali. Am adăugat, de asemenea, un pachet de aspect bonus de teme elegante, doar în cazul în care nu căutați o temă pentru copii. 

Aceste teme pentru copii sunt alegeri excelente pentru a vă arăta serviciile de coaching de viață, mărturii, pachete disponibile, instrumente, construirea suitei dvs., comunicarea cu clienții și multe altele. Acestea sunt proiectate profesional și vă vor oferi cu siguranță un început bun pe următorul dvs. site web Divi.

Resurse suplimentare

În plus, puteți opta oricând pentru o altă temă WordPress care nu folosește neapărat Divi. Iată o listă de colecții de teme care vă pot ajuta să vă construiți noul site web.

Cum se creează efecte de defilare a divizării secțiunilor în Divi

Cum se creează efecte de defilare a divizării secțiunilor în Divi

Crearea efectelor de derulare folosind divizorul de secțiuni este o tehnică ușoară și distractivă care poate adăuga viață site-ului dvs. web utilizând tema Divi WordPress. Un separator de secțiuni continuă să fie un element de design versatil, util pentru a adăuga o notă de creativitate tranzițiilor de conținut ale paginii. 

Dar cu efectele de derulare ale Divi, divizoarele de secțiuni devin și mai interesante! Trucul este de a izola o secțiune dedicată stilului de împărțire la alegere. Apoi, puteți adăuga tot felul de mișcări generate de derulare în secțiune pentru a crea efecte de derulare frumoase ca fundal pentru conținutul paginii.

Să începem!

Rezultat posibil

Iată o prezentare generală a proiectelor pe care le vom putea realiza după finalizarea acestui tutorial.

Cum se creează divizoare de secțiune animată cu defilare cu Divi

Crearea celor două secțiuni de conținut

Adăugați un rând

Pentru a începe, creați un rând cu o coloană în secțiunea implicită.

Adăugați secțiunea divi

Marja secțiunii (pentru teste)

În scopuri de testare, adăugați o marjă superioară la secțiune, astfel încât să putem avea loc pentru derulare. Deschideți setările secțiunii și adăugați următoarele:

  • Marja de sus: 80vh
Configurați distanța dintre secțiunile Divi

Adăugați un modul de text

În rândul unei coloane, adăugați un nou modul de text.

Modul text Divi

Conținutul modulului text

În interiorul conținutului corpului, adăugați următorul titlu H2:

<h2>Section Avec Séparateurs</h2>

Secțiune cu separator

Proiectarea modulului text

Sub setările de proiectare, actualizați următoarele:

  • Font text: Roboto
  • Alinierea textului: centru
  • Articolul 2 Culoarea textului: # bae0d8
  • Antetul 2 Dimensiunea textului: 80px (desktop), 50px (tabletă), 30px (telefon)
Configurarea fontului Divi

Adăugați o a doua secțiune de conținut

În secțiunea anterioară, adăugați o nouă secțiune obișnuită.

divider section section divider effects scrolling

Adăugați un rând

În noua secțiune, adăugați un rând la o coloană.

Adăugați secțiunea divi 1

Adăugați un modul de text

Apoi adăugați un nou modul text la linie.

Adăugați un modul de text divi

Proiectarea modulului text

Pentru moment, putem păstra conținutul de umplere implicit în interiorul corpului. Să trecem la fila de proiectare și să actualizăm următoarele:

  • Font text: Roboto
  • Culoarea textului text: #dddddd
  • Dimensiunea textului: 16px
  • Înălțimea liniei de text: 1,5 em
  • Aliniere text: stânga
  • Lățimea maximă: 400 px
  • Alinierea modulului: centru
Personalizați modulul divi stil stil

Setări secțiune

Asigurați-vă că eliminați culoarea de fundal implicită a secțiunii, dar acordați-i un fundal complet transparent. Apoi, putem elimina căptușeala superioară și putem adăuga o marjă inferioară în scopul testării defilării.

Pentru a face acest lucru, deschideți setările secțiunii și actualizați următoarele:

  • Culoare fundal: rgba (0,0,0,0)
  • Marja de jos: 80vh
  • Plăcuire: 0px
Configurarea secțiunii spațierii Divi

Crearea separatorului de secțiune animat

După ce două secțiuni de conținut sunt finalizate, suntem gata să adăugăm secțiunea pentru divizoarele noastre de secțiune animată.

Adăugați o secțiune nouă

Continuați și creați o nouă secțiune regulată în mijlocul celor două secțiuni de conținut.

Adăugați secțiunea regulată divi

Contextul secțiunii

Și din nou, eliminați culoarea de fundal implicită a secțiunii, dar actualizați următoarele:

  • Culoare fundal: rgba (0,0,0,0)
Secțiunea de fundal personală divi

Proiectare divizor secțiune

Nu vă faceți griji, vom crea culoarea de fundal cu separatoarele de secțiuni. Pentru a face acest lucru, faceți clic pe fila de proiectare și adăugați un separator superior și inferior în secțiune, după cum urmează:

Design superior divizorului

  • Stilul divizorului superior: vezi captura de ecran
  • Culoarea divizorului superior: # 524fbf
  • Înălțimea divizorului superior: 20vw
  • Repetarea orizontală a divizorului superior: 0,6x
  • Răsturnarea divizorului superior: orizontală
Configurarea marginii secțiunii Divi

Design inferior divizorului

  • Stil divizor inferior: vezi captura de ecran
  • Culoarea inferioară a separatorului: # 524fbf
  • Înălțimea divizorului inferior: 20vw
  • Repetarea orizontală a divizorului inferior: 0,5x
  • Înclinarea inferioară a divizorului: orizontală și verticală
Selector divi inferior
Înălțimea secțiunii și umplutură

Deoarece această secțiune este destinată exclusiv designului divizorului, putem scăpa de înălțime și de umplutură astfel încât să fie afișat doar stilul divizorului și să nu existe spațiu inutil între cele două secțiuni de conținut. Actualizați următoarele:

  • Înălțime: 0px
  • Garnitură: 0px înaltă, 0px mică
Secțiune divizor redus divi
Secțiune Efecte de derulare a separatorului

Apoi dați secțiunea următoarele efecte de derulare:

Sub filă Mișcare orizontală ...

  • Activați mișcarea orizontală: DA

Putem păstra setările implicite pentru aceasta în vizualizarea birou .

Divi de defilare orizontală

Apoi actualizați parametrii de mișcare orizontală pe Tablette :

  • Start offset: 3 (la 0% din fereastră)
  • Decalaj mediu: 0 (la 50% din vizualizare)
  • Decalaj final: -3 (la 100% din vizualizare)
Masa orizontală de defilare divi

Sub filă Efect de scalare în sus și în jos , actualizați următoarele în secțiunea birou ...

  • Scara de pornire: 200% (la 0% din fereastră)
  • Scala medie: 150% (la 45% -65% din vizualizare)
  • Scara finală: 150% (la 100% din vizualizare)
Configurarea aspectului

Apoi actualizați efectul Scaling Up and Down pe Tablette după cum urmează:

  • Scara de pornire: 400% (la 0% din fereastră)
  • Scala medie: 300% (la 45% -65% din vizualizare)
  • Scara finală: 400% (la 100% din vizualizare)

Principalul motiv pentru care trebuie să ajustăm efectele de mișcare pe tabletă (și telefon) se datorează valorilor de mișcare orizontală folosind unități de lungime a pixelilor (adică 3 = 300 pixeli), absolut și nu se ajustează la lățimea browserului.

Acum să vedem rezultatul final al divizorului nostru de secțiuni animate.

Ultimele gânduri

Animarea divizoarelor de secțiuni de pe scroll este o modalitate distractivă și eficientă de a da viață unei pagini web. Sper că acest lucru vă oferă o sursă de inspirație pentru a vă declanșa designuri și mai creative.

Cum să dezvăluiți galeria de imagini cu un efect de derulare pe Divi

Cum să dezvăluiți galeria de imagini cu un efect de derulare pe Divi

Galeriile de imagini sunt o destinație preferată pe majoritatea site-urilor web. Și, în multe cazuri, poate fi cel mai bine să păstrezi acele galerii de imagini fericite și statice, lăsând imaginile să-și lucreze magia.

 Dar, adăugați un efect de derulare a puzzle-ului glisant la o galerie de imagini (așa cum vom face în acest tutorial), poate da o notă răcoritoare unui clasic atemporal.

În acest tutorial, vă vom arăta cum să construiți un aspect simplu care dezvăluie o galerie de imagini cu un efect de derulare a puzzle-ului glisant pe Divi. 

Cheia este de a înțelege modul în care dimensiunea imaginilor se referă la valorile de decalare verticale și orizontale ale fiecărui efect de derulare pentru a muta imaginea exact cu un punct. Dar, când este finalizat, efectul de mișcare rezultat este clar și precis, deoarece asamblează treptat și dezvăluie o galerie de imagini într-un mod unic.

Rezultat posibil

Iată o prezentare generală a aspectului galeriei de imagini cu efectul de derulare a puzzle-ului glisant pe care îl vom crea în acest tutorial.

Rezultat posibil divi

Crearea secțiunii antet

Pentru a începe, să construim o secțiune rapidă de antet care îi va spune utilizatorului să deruleze pagina pentru a vizualiza galeria și cu efectele de derulare minunate.

Adăugați un rând

Adăugați un rând dintr-o coloană la secțiunea implicită.

Un singur rând de coloană

Adăugați un modul de text

În interiorul coloanei / rândului adăugați un nou modul de text.

În setările de text, actualizați conținutul corpului cu următoarele:

<h1>Image Gallery</h1>

Adăugați un modul text

Setările modulului text

În fila Proiectare, actualizați designul textului după cum urmează:

  • Fontul titlului: Roboto
  • Greutatea fontului din titlu: bold
  • Stilul fontului de titlu: TT
  • Aliniere text antet: centru
  • Dimensiunea textului antetului: 50 px (desktop), 40 px (tabletă și telefon)
  • Spațiu litere titlu: 4px
Stil text modificat

Adăugați pictograma modulului Blurb

Odată ce textul este la locul său, adăugați un nou modul de blurb sub modulul de text.

Modul rezumat selectie Divi

Apoi eliminați toate titlurile și corpurile din conținutul implicit și selectați pentru a utiliza pictograma săgeată în jos.

Modul rezumat Divi

Setări text prezentare

Apoi actualizați setările de blurb cu o nouă culoare și repetând animația de diapozitive.

  • Culoare pictogramă: # ffb500
  • Stil de animație: Slide
  • Direcția animației: în jos
  • Intensitatea animației: 20%
  • Repetați animația: buclă
Modul rezumat animație Divi

Căptușeală de secțiune

Pentru a oferi secțiunii spațiu pentru derulare, actualizați umplutura după cum urmează:

  • Garnitura: 20vh în partea de sus, 50vh în partea de jos

Aici folosim unitatea de lungime vh, care este relativă la înălțimea ferestrei browserului, astfel încât spațiul să se potrivească în mod constant pe toate dimensiunile browserului.

Configurați spațiul modulului divi

Crearea galeriei de imagini cu efecte de derulare

Acum că secțiunea noastră de antet este completă, suntem gata să construim galeria de imagini cu efectele de derulare a puzzle-ului glisant. Întreaga galerie va fi formată din trei rânduri de 4 imagini / coloane în fiecare rând pentru a face un total de 12 imagini. Cu toate acestea, puteți adăuga cu ușurință mai multe linii și imagini la aspect după finalizarea acestuia.

Crearea secțiunii și a liniei

Adăugați o secțiune nouă

Să începem adăugând o nouă secțiune obișnuită sub secțiunea titlu.

Secțiunea de selecție divi

Adăugați un rând

Apoi adăugați un rând cu patru coloane în secțiune.

Secțiunea are 4 coloane divi

Setări de linie

Sub Setări rând, actualizați următoarele:

  • Lățimea jgheabului: 1
  • Lățime: 100%
  • Lățime maximă: 1200 px (desktop), 600 px (tabletă), 300 px (telefon)
Parametrul liniei Divi
Modul în care lățimea liniei determină dimensiunea imaginii

Lățimea rândului este foarte importantă pentru acest design, deoarece va dicta lățimea fiecăreia dintre cele patru coloane. Odată ce am setat lățimea jgheabului la 1, nu va mai exista marjă între imagini. 

Și când vom seta lățimea maximă la 1200px, cele patru coloane vor face ca fiecare dintre coloane / imagini să fie exact 300px lățime (1200px / 4 = 300px). 

De asemenea, deoarece fiecare dintre imagini este pătrată, știm că înălțimea fiecărei imagini va fi, de asemenea, de 300 de pixeli. Nu trebuie să o păstrăm așa dacă nu vrem. 

De exemplu, am putea alege, de asemenea, să avem un aspect cu trei coloane cu imagini de 400 x 400 pixeli. Cunoașterea lățimii imaginii (300px) și a înălțimii (de asemenea, 300px) va fi cheia pentru crearea efectului de derulare ulterior.

Adăugarea de imagini

Adăugați imaginea 1

Adăugați un modul de imagine div

Imaginea 1 Efecte de derulare

Efect de defilare Divi
Relația dintre dimensiunea imaginii și compensarea efectului de derulare

Când utilizați efectul de derulare verticală și orizontală, este important să înțelegeți ce reprezintă valoarea numerică introdusă. În acest exemplu, avem o deplasare verticală de -3. Acest -3 este de fapt -300px (sau 300px în jos), care este lățimea imaginii. 

Decalajul atinge apoi 0 (poziția de pornire) atunci când utilizatorul derulează. Aceasta creează efectul de derulare care mută imaginea exact la un bloc / cadru. Mișcarea orizontală începe de la 3 (300 pixeli din dreapta) și se oprește în poziția sa implicită. Aceste două efecte se combină pentru a crea un efect unic de derulare în două părți.

Adăugați imaginea 2

După adăugarea efectelor de derulare la imaginea 1. Adăugați o imagine nouă în coloana 2.

Vom lăsa această imagine statică fără niciun efect de derulare.

Adăugați imaginea 3

Apoi adăugați un alt modul de imagine în coloana 3 și actualizați modulul cu o imagine nouă.

Imaginea 3 Efecte de derulare

Sub Setări imagine, actualizați următoarele efecte de derulare:

Sub fila Mișcare orizontală ...

  • Activați mișcarea orizontală: DA
  • Start offset: -3 (la 0% din fereastră)
  • Decalaj mediu: 0 (la 15% din vizualizare)
  • Decalaj final: 0 (la 100% din vizualizare)
Modul de imagine efect de defilare divi

Adăugați imaginea 4

Pentru a crea ultima imagine, copiați imaginea 1 și lipiți-o în coloana 4.

Încărcați o imagine nouă în setările imaginii.

Încărcați o nouă imagine divi

Imaginea 4 Efecte de derulare

Apoi actualizați următoarele efecte de derulare:

Sub fila Mișcare verticală ...

  • Activați mișcarea verticală: DA
  • Start offset: 3 (la 0% din fereastră)
  • Decalaj mediu: 0 (la 15% -28% din vizualizare)
  • Decalaj final: 0 (la 40% din vizualizare)

Sub fila Mișcare orizontală ...

  • Activați mișcarea orizontală: DA
  • Start offset: 3 (la 0% din fereastră)
  • Decalaj mediu: 3 (la 28% din vizualizare)
  • Decalaj final: 0 (la 40% din vizualizare)
Opțiunea Divi scroll

Linie duplicată

Acum că efectele de derulare a imaginii sunt efectuate pentru primul rând, tot ce trebuie să facem este să dublăm rândul pentru a crea mai multe imagini și efectele de derulare corespunzătoare. Pentru acest exemplu, să duplicăm rândul de două ori pentru a crea un total de trei rânduri.

Înlocuiți și rearanjați imaginile după cum este necesar

Apoi putem muta imaginile folosind funcția drag and drop oriunde dorim. Aici puteți fi creativi și puteți vedea cum se deplasează imaginile. Și odată ce imaginile sunt la locul lor, puteți înlocui conținutul modulului de imagini cu imagini noi care să răspundă nevoilor site-ului web.

Imagine totală div

Răspunsuri finale

Vizibilitatea secțiunii

Deoarece imaginile noastre se vor extinde probabil în afara secțiunii / ferestrei, să ascundem preaplinul pentru a-l curăța puțin. Deschideți setările secțiunii și actualizați următoarele:

  • Debord de orizontală: ascuns
  • Debord vertical: ascuns
Vizibilitate divi

Căptușeală de secțiune

Vrem ca efectul de derulare verticală a imaginii de sus (care se extinde deasupra secțiunii) să fie vizibil în ciuda revărsării ascunse. Deci, să adăugăm umplutura de sus și de jos egală cu înălțimea imaginii (300 pixeli).

Căptușeală Divi

Rezultatul de până acum

Chiar acum ne putem opri aici dacă doriți să păstrați designul galeriei fără spații între imagini. Iată cum arată rezultatul până acum. Observați cum se deplasează imaginile pe verticală și orizontală exact un bloc / cadru.

Adăugarea de spațiu între imagini

Deoarece setăm lățimea jgheabului la 1, nu mai avem o marjă între coloane sau imagini. Pentru a recrea spații similare, putem adăuga umplere la fiecare cadru.

 Acest lucru ne va permite să creăm spațiul de care avem nevoie fără a compromite funcționalitatea efectelor de derulare. Acest lucru este posibil deoarece adăugarea căptușelii la imagine nu va crește lățimea sau înălțimea containerului de imagine. De asemenea, puteți avea un efect similar folosind și chenarele.

Imagine 1 Căptușire

Deschideți setările pentru imaginea 1 și actualizați următoarele:

  • Padding: 10 pixeli în partea de sus, 10 pixeli în partea de jos, 10 pixeli în stânga, 10 pixeli în dreapta
Adăugați marjă Divi

Extindeți umplerea la toate imaginile

Înainte de salvare, faceți clic dreapta pe opțiunea de umplere și selectați „Extindeți umplerea”. În fereastra pop-up de extindere a stilurilor, faceți clic pe butonul de extindere pentru a extinde această umplere la toate imaginile de pe pagină.

Extindeți marjele divi

Rezultat final

Iată rezultatul tuturor lucrărilor pe care le-am făcut până acum.

Rezultatul final al desktopului Divi

Ultimele gânduri

Efectul derulant al puzzle-ului alunecat prezentat în acest articol nu ne oferă decât un design unic pentru o galerie de imagini. De asemenea, subliniază că deplasările orizontale și verticale pot fi utilizate pentru efecte de defilare mai precise.

 Simțiți-vă liber să explorați diferite variante ale acestui aspect schimbând compensările și amestecând locațiile imaginilor. 

De asemenea, puteți modifica numărul de coloane atâta timp cât înțelegeți cum se va schimba dimensiunea coloanei / imaginii și apoi cum să actualizați compensările efectului de derulare cu valoarea corespunzătoare.

Câteva resurse recomandate

Probabil că veți găsi aceste resurse interesante, deoarece vă vor permite, de asemenea, să creați galerii foto pe blogul dvs. WordPress.

5 teme pentru copii Divi pentru practica veterinară

5 teme pentru copii Divi pentru practica veterinară

Divi este o alegere excelentă pentru construirea de site-uri web de înaltă calitate pentru orice tip de îngrijire a animalelor. Divi vă permite să vă prezentați cu ușurință serviciile, produsele, mărturiile, informațiile de contact și multe altele. 

Din fericire, nu trebuie să construiți site-ul web de la zero. Există o mulțime de planuri și teme pentru copii pentru a vă oferi un punct de pornire. În această listă, vom analiza 5 teme pentru copii Divi pentru veterinari și servicii pentru animale de companie, pentru a vă ajuta cu următorul dvs. proiect Divi.

5 teme pentru copii Divi pentru veterinari și servicii pentru animale de companie

1. VetCare

Îngrijirea veterinară

Vetcare a fost conceput pentru medici veterinari, clinici de animale și alte tipuri de companii de îngrijire a animalelor de companie. Oferă 15 planuri de pagini care includ 2 pagini de pornire, servicii, 2 pagini de blog, 3 postări de blog unice, 3 pagini de servicii unice și multe altele. 

Alte personalizări includ un meniu animat cu un CTA, injector de subsol, Popup Maker, preîncărcare, 30 de pictograme personalizate și opțiuni de temă personalizate. Are un design curat și folosește o mulțime de culori pentru cele mai clare. 

Include o mulțime de stiluri și animații pentru moduri de blog, moduri personale, blurb, galerie, tabele de prețuri etc. Îmi plac culorile strălucitoare și animațiile.

Prix: 55 € | Mai multe informatii

2. Living pentru animale de companie răsfățate

Salon răsfățat

Pampered Pet Parlor a fost conceput pentru aproape orice tip de site web pentru animale de companie, inclusiv îngrijirea sănătății animalelor, îngrijirea, produsele etc. și se concentrează pe comerțul electronic. . 

Acesta vine cu o pagină de pornire, pagini de produse, o singură pagină de produs, Contacte și pagini WooCommerce. Are WooCommerce integrat și include mai multe pluginuri gratuite: WooCommerce Product Carousel Slider, NC Wishlist for WooCommerce și WooCommerce Product Navigation. 

Pagina de pornire afișează un antet personalizat, CTA, un formular de e-mail subțire, cele mai recente produse, mărturii și o zonă widget personalizată în subsol. Îmi place utilizarea culorii în aceasta.

Prix: $ 97 | Mai multe informatii

3. Pettz

Pettz

Pettz a fost conceput pentru medicii veterinari, îngrijirea animalelor, magazinele pentru animale de companie, îngrijirea animalelor, adăposturi pentru animale, antrenori de animale și alte afaceri legate de animale. Vine cu 6 pagini care includ Acasă, Servicii, Despre noi, Prețuri, Blog și Contact. 

Pagina principală afișează servicii cu blurbs, CTA-uri, tabele de prețuri, galerie, secțiunea echipei cu module de persoane, mărturii, secțiunea blog și secțiunea de contact. 

Fiecare secțiune include module elegante. Majoritatea au animații personalizate cu mouse-ul. Celelalte pagini au un design similar. Îmi plac în special culorile, grafica și fonturile din această temă pentru copii.

Prix: $ 44 | Mai multe informatii

4. Divi Nonprofit

Divi nonprofit

Divi Nonprofit a fost conceput pentru mai multe tipuri de organizații non-profit. Include mai multe pagini de pornire pentru aceste organizații, inclusiv una numită Animal Rescue. 

Această pagină de pornire are multe CTA-uri în mai multe machete și modele pentru adoptarea diferitelor animale. De asemenea, include un CTA pentru mai multe, o secțiune de blog și un CTA de donație încorporat care utilizează pluginul WP Give. 

Alte caracteristici includ evenimente cu un tip de post personalizat, tipul de postare a proiectelor deja configurate, paginile magazinului WooCommerce, 100 de pictograme personalizate desenate manual, pesmet, bara laterală de stil și o mulțime de acestea. mai multe pagini de informații. De asemenea, integrează Bloom și Monarch. Îmi plac grafica, aspectul clar și luminile roșii.

Prix: $ 39 | Mai multe informatii

5. Asistență socială: organizație caritabilă cu scop non-profit Divi Divi

Asistență socială non profit multi-scop caritate

Asistență socială: organizația de caritate multifuncțională nonprofit Divi a fost concepută pentru mai multe tipuri de organizații caritabile, inclusiv salvarea animalelor internaționale. Include mai multe pagini principale pentru diferite tipuri de organizații caritabile. 

Pagina de pornire International Animal Rescue afișează un CTA în secțiunea eroi cu 2 CTA-uri diferite, urmate de blocuri mari cu legături către diferitele moduri în care vizitatorii se pot implica. De asemenea, include 2 pagini despre noi, 2 evenimente, 2 galerii, 2 bloguri, 2 pagini de contact, subsol personalizat pentru constructorul de teme și multe altele. Are o schemă de culoare galbenă deosebită și un meniu CTA de donație albastru.

Prix: $ 25 | Mai multe informatii

Concluzie

Aceasta este privirea noastră la 5 teme pentru copii pentru Divi pentru veterinari și servicii pentru animale de companie pentru a vă ajuta cu următorul dvs. proiect Divi. Temele pentru copii includ multe pagini și module elegante. 

Mulți adaugă animații personalizate, tipuri de posturi personalizate, integrare WooCommerce pentru a vinde produsele dvs. și pagini pentru a vă arăta serviciile de îngrijire a animalelor. Indiferent ce fel de site de îngrijire a animalelor trebuie să creați, sunteți sigur că veți găsi ceva pe această listă pentru a vă începe.