Crearea CTA-urilor cu diapozitive cu setările Divi’s Row Alignment & Animation

Î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. În această săptămână, ca parte a inițiativei noastre continue de proiectare Divi, vă vom arăta cum să creați diapozitive CTA-uri cu aliniere rânduri și setări de animație Divi folosind pachetul de machetare pentru compania de curățare.

Pentru a ajuta la eliminarea acestui lucru, vom începe prin eliminarea tuturor animațiilor care sunt deja acolo. În acest fel, putem evidenția apelurile la acțiune care glisează.

Să ajungem la asta!

previzualizare

Să aruncăm o privire la cele trei exemple diferite pe care le vom trata în această postare:

Încărcați pagina de destinație a companiei de curățenie

Adăugați o pagină nouă și comutați la Visual Builder

Așa cum am menționat anterior, vom folosi pachetul de aspect pentru compania de curățenie pentru a crea acest tutorial, dar nu ezitați să utilizați această abordare pentru orice site web pe care îl creați. Adăugați o pagină nouă, introduceți titlul paginii și comutați imediat la Visual Builder.

Încărcați pagina de destinație a companiei de curățenie

După ce o faceți, veți vedea trei opțiuni care apar pe ecran. Puteți începe să construiți de la zero, să alegeți un aspect premade sau să clonați o pagină existentă. Alegeți a doua opțiune.

Căutați pachetul de aspect al companiei de curățenie, selectați aspectul paginii de destinație și încărcați-l pe pagina dvs.

Eliminarea tuturor setărilor de animație de pe pagină

Găsiți secțiunea pe pagină

Odată ce aspectul este încărcat pe pagina dvs., continuați și găsiți următoarea secțiune.

Eliminați animația

Deschideți setările și eliminați animația care există deja.

Extindeți stilul la toate secțiunile

Pentru a economisi timp, vom extinde acest stil de animație la toate elementele de design de pe pagină. Vom începe cu secțiunile de pe pagina noastră făcând clic dreapta, selectând „Extindeți stilurile de animație”. Faceți-o să se aplice la toate secțiunile din întreaga pagină și faceți clic pe „Extindeți”.

Extindeți stilul la toate rândurile

Repetați aceiași pași, dar, în schimb, faceți-l să se aplice la toate rândurile din întreaga pagină.

Extindeți stilul la toate modulele

În cele din urmă, faceți ca acesta să se aplice și pentru toate modulele de pe pagină.

Se creează CTA # 1

Adăugați un rând nou

Locație

Să începem să creăm primul slide-in CTA! Adăugați un rând nou în partea de jos a următoarei secțiuni:

Structura coloanei

Alegeți următoarea structură de coloane pentru rândul pe care tocmai l-ați adăugat:

Alinierea rândurilor

Vom împinge rândul spre stânga pentru a ajuta la crearea efectului slide-in.

• Alinierea rândurilor: la stânga

Dimensionare

De asemenea, vom reduce lățimea rândului nostru.

• Utilizați lățimea personalizată: da
• Lățime personalizată: 500 px

Spațiere

Și pentru a scăpa de spațiul alb inutil, îndepărtați căptușeala superioară și inferioară a rândului.

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

Adăugați modulul Call to Action

Adăugați o copie

Acum putem adăuga modulul nostru de îndemn! Adăugați un conținut la alegere.

Adăugați un link

Adăugați un link către modulul CTA următor. Dacă nu aveți încă un link către care să vă redirecționați, puteți introduce pur și simplu „#”. Fără a adăuga ceva în această casetă, nu veți putea vedea butonul, deci asigurați-vă că nu îl lăsați gol.

Eliminați culoarea de fundal

Modulul CTA are în mod implicit o culoare de fundal. Continuați și eliminați-l în setările de fundal.

Copiați gradientul secțiunii

Deschideți secțiunea care conține fundalul de gradient albastru. Fără a schimba nimic, faceți clic dreapta și copiați setările.

Lipiți gradientul în modulul CTA

Lipiți acest fundal de gradient pe modulul CTA.

Setări text titlu

Deschideți din nou setările modulului CTA, accesați setările pentru textul titlului și efectuați câteva modificări pentru a se potrivi cu pachetul de aspect:

• Titlu Font: Ubuntu
• Greutatea fontului titlului: Bold
• Dimensiune text titlu: 24 px (desktop și tabletă), 16 px (telefon)
• Înălțimea liniei de titlu: 1.2em

Setări text corp

Schimbați și greutatea fontului corpului.

• Greutatea fontului corpului: Semi îndrăznețe

Setări buton

Schimbați apoi setările butoanelor.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 18 px
• Culoarea textului butonului: # 557df3
• Culoarea fundalului butonului: #FFFFFF
• Lățimea chenarului butonului: 10 px
• Culoarea chenarului butonului: #FFFFFF
• Raza chenarului butonului: 0 px
• Buton Font: Ubuntu
• Greutatea fontului: Bold

Spațiere

Măriți și căptușirea modulului.

• Căptușeală superioară: 80 px
• Căptușeală inferioară: 80 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

Frontieră

Apoi, adăugați o rază de margine sus și dreapta sus în setările de margine.

• În dreapta sus: 100 px
• Jos dreapta: 100 px

Box Shadow

Pentru a crea mai multă adâncime, vom adăuga o umbră de casetă subtilă.

• Puterea neclarității umbrei cutiei: 71 px
• Puterea răspândirii umbrei cutiei: -5 px

Animaţie

Nu în ultimul rând, acordați modulului CTA un efect de animație.

• Direcția animației: Corect
• Intensitate animație: 100%
• Animație Opacitate de pornire: 100%
• Curba de viteză a animației: liniară

Se creează CTA # 2

Clonați CTA # 1 rând și efectuați modificări

Clone Row

Pentru a crea al doilea exemplu, continuați și clonați primul rând.

Trageți în secțiune

Derulați pagina în jos și plasați duplicatul chiar aici:

Îndepărtați capitonajul superior al secțiunii

Deschideți setările secțiunii în care ați introdus rândul și eliminați căptușeala superioară.

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

Eliminați raza marginii din stânga sus a secțiunii

Accesați apoi setările Border și eliminați și raza de margine din stânga sus.

Eliminați zona CTA a marginii din dreapta sus

Apoi, deschideți modulul CTA și scoateți raza de margine din dreapta sus pentru a permite secțiunii și modulului să se amestece.

Schimbați animația

Pentru acest slide-in CTA, vom folosi o animație diferită. Simțiți-vă liber să jucați și cu alte opțiuni de animație.

• Regia de animație: Centru
• Animație Opacitate de pornire: 100%
• Curba de viteză a animației: liniară

Se creează CTA # 3

Clonați CTA # 1 rând și efectuați modificări

Clone Row

Pentru a crea ultimul exemplu, vom clona din nou rândul.

Trageți în secțiune

Plasați duplicatul în următoarea secțiune:

Schimbați alinierea rândurilor

Deschideți setările de rând ale modulului și schimbați alinierea la dreapta.

• Alinierea rândurilor: corect

Eliminați fundalul CTA Gradient

Eliminați și fundalul de gradient al modulului.

Folosiți în schimb culoarea de fundal

Folosiți în schimb o culoare de fundal.

• Culoare fundal: # f2835a

Schimbați culoarea textului butonului

Pentru a se potrivi cu culoarea de fundal, schimbați și culoarea textului butonului.

• Culoarea textului butonului: # f2835a

Eliminați CTA Border Radius

Transformăm modulul CTA într-un pătrat eliminând toată raza de margine pe care i-a fost dată.

Schimbați animația

Schimbați apoi setările animației.

• Direcția animației: Jos
• Intensitate animație: 100%
• Animație Opacitate de pornire: 100%
• Curba de viteză a animației: liniară

Îndepărtați căptușeala inferioară a secțiunii

Nu în ultimul rând, vom împinge modulul în partea de jos a secțiunii, eliminând căptușeala inferioară a secțiunii în care este plasată și am terminat!

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

previzualizare

Să aruncăm o ultimă privire asupra celor trei exemple de diapozitive CTA pe care le-am creat.

Gânduri finale

În această postare, v-am arătat cum să creați diapozitive CTA-uri folosind pachetul de layout al companiei de curățare Divi. Am început prin eliminarea animațiilor care sunt deja prezente pe pagină. După aceea, am creat trei CTA-uri pentru a atrage atenția. Această postare pe blog face parte din inițiativa noastră de proiectare Divi, în care încercăm să punem ceva în cutia de instrumente de proiectare în fiecare săptămână. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!