Cum să creați un CTA „în expansiune”, precum teme elegante

Publicat: 2017-05-14

Teme elegante au schimbat recent designul site-ului lor web pentru a include câteva caracteristici demne de imitat. În postările anterioare, am scris despre cum să implementez designul blogului Elegant Theme și să copiez meniul principal. Dar, pentru această postare, vă voi arăta cum să duplicați apelul la acțiune Elegant Themes (CTA). Acest CTA este situat în partea de jos, lângă subsolul site-ului web Elegant Themes. Ceea ce este special la acest CTA este funcționalitatea adăugată care declanșează animația odată ce utilizatorul parcurge elementul.

Astăzi, vă voi arăta cum să copiați nu numai stilul acestui CTA, ci și funcționalitatea de animație. Acest lucru se realizează folosind modulul de cod al lui Divi cu unele CSS personalizate și câteva linii de JavaScript. Cu toate acestea, puteți extinde cu ușurință aceeași funcționalitate animată pe oricare dintre modulele Divi.

Să începem.

Implementarea proiectării cu Divi

Construirea apelului la acțiune utilizând modulul de cod

Folosind Visual Builder, adăugați o nouă secțiune obișnuită cu o coloană de rând cu lățime completă.

Apoi adăugați modulul de cod la rândul dvs.

Sub Setări cod general, adăugați următorul html la secțiunea de conținut.

<div class="cta-info">

<h3>401,632 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web</h3>

<p>We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!</p>

<a href="ENTER URL HERE" id="sign">Sign Up Today</a>

</div>

Acest html va servi drept conținut pentru CTA. Veți observa că titlul principal al CTA este înfășurat într-o etichetă h3. Sub-titlul este înfășurat într-o etichetă p standard. Și linkul (care va fi în curând buton) are un ID CSS numit „semn”.

De asemenea, o divizare cu clasa „cta-info” este înfășurată în jurul conținutului. Acest lucru este important în scopuri de styling ulterior.

Salvează modificările

Acum trebuie să adăugăm un nou ID CSS la noua secțiune. Faceți clic pe pictograma setărilor secțiunii pentru a deschide setările secțiunii.

Sub fila CSS din secțiunea Setări, adăugați ID-ul CSS „secțiune cta” și salvați modificările modificărilor.

În continuare, trebuie să adăugăm un ID CSS la rândul dvs. Faceți clic pe pictograma setărilor rândului.

Sub fila CSS, actualizați setările rândului cu un nou ID CSS numit „cta-row”.

Salvează modificările

Asta este tot ce avem nevoie pentru aspectul CTA. Cu conținutul nostru în loc și ID-urile noastre CSS, suntem gata să adăugăm câteva CSS personalizate.

Adăugarea CSS personalizat

Accesați Divi → Personalizator temă → CSS suplimentar (sau puteți actualiza direct fișierul style.css al temei copilului). În caseta de cod, adăugați următorul CSS:

/* Animated Call To Action */

/*** style CTA section and row when waypoint is not triggered ***/
#cta-section {
    padding: 0 80px;
    transition: all .8s ease;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;
}
#cta-row {
    margin: 80px auto 0 auto;
    padding: 80px 0;
    max-width: 100%;
    background-color: #6c17dc;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0px 10px 50px #939fa9;
    transition: all .8s ease;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;

}
/*** Style CTA section and row once waypoint toggles animate-cta class ***/
#cta-section.animate-cta {
    padding: 46px 0 66px 0;
    overflow: hidden;
}
.animate-cta #cta-row {
    margin: 0 auto 0 auto;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    background-color: #4843d2;
    width: inherit;
}
/*** style button ***/

#sign {
    display: inline-block;
    width: 246px;   
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    background-color: #f92c8b;
    padding: 20px 40px;
    margin-top: 30px;
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    transition: all .8s ease;
    -webkit-transition: all .8s ease;
    -webkit-transition: all .8s ease;
    box-shadow: 0px 5px 20px #231f92;
    -moz-box-shadow: 0px 5px 20px #231f92;
    -webkit-box-shadow: 0px 10px 50px #231f92;
}
#sign:hover {
    background-color: #2cc2e6;
    box-shadow: 0px 20px 80px #1b1867;
    -moz-box-shadow: 0px 20px 80px #1b1867;
    -webkit-box-shadow: 0px 20px 80px #1b1867;
}

/*** style content within the code module ***/

.cta-info{
    color: #fff;
    text-align: center;
    margin: 0 auto !important;
    max-width: 1080px;
    padding: 50px;
}
.cta-info h3 {
    color: #fff;
    font-size: 35px;
    line-height: 1.3em;
}

Acum, CTA-ul dvs. începe să arate partea. Tot ce ne-a mai rămas este să adăugăm un scurt script pentru a oferi CTA acel efect de animație atrăgător odată ce CTA este vizibil în fereastra browserului dvs. după derulare.

Adăugarea scriptului Waypoint pentru a anima CTA când derulați la element

Una dintre cele mai simple modalități de a declanșa o funcție atunci când parcurgeți un element de pe pagina dvs. este utilizând biblioteca JavaScript numită Waypoints. Deoarece Divi vine deja cu Waypoints instalate (da!), Tot ce trebuie să facem este să includem un script care utilizează biblioteca.

Accesați Divi → Opțiuni teme → Integrare și lipiți următorul script în secțiunea „Adăugați cod în capul blogului dvs.”.

<script>
jQuery(document).ready(function(){
	jQuery('#cta-section').waypoint(function() {
		jQuery('#cta-section').toggleClass('animate-cta');
	}, {offset: '80%'});
});
</script>

Acest script adaugă o funcție care va comuta o clasă numită „animate-cta” atunci când derulați la secțiunea CTA (cu ID-ul CSS „cta-secțiune”). Observați partea din cod care desemnează compensarea ca 80%. Aceasta înseamnă că funcția va fi declanșată atunci când partea de sus a secțiunii CTA este la 80% din partea de sus a ferestrei browserului. Dacă doriți să întârziați funcția să se declanșeze atunci când CTA ajunge la mijlocul paginii, puteți schimba valoarea de offset la ceva de genul 50%. Cu toate acestea, dacă CTA-ul dvs. va fi chiar în partea de jos a paginii, ar trebui să rămâneți cu o valoare mai apropiată de 80% - 90%. Acest lucru se datorează faptului că CTA dvs. nu poate ajunge niciodată la mijlocul ferestrei browserului atunci când derulați și, prin urmare, nu va fi declanșat.

Asta e!

Acum să aruncăm o privire asupra proiectului finalizat.

Adăugarea funcționalității CTA la alte module

Dacă doriți să adăugați această funcționalitate CTA la alte module din Divi Builder, acest lucru este destul de ușor de făcut. Iată pașii pentru a începe:

Creați o secțiune standard cu un rând cu lățime completă (o singură coloană).
În secțiunea Setări, sub CSS, adăugați ID-ul CSS „cta-secțiune”.
În Setări rând, sub CSS, adăugați ID-ul CSS „cta-row” ȘI adăugați coloana CSS Class „cta-column”.
Introduceți următoarele CSS personalizate:

 .cta-column.et_pb_column:last-child {
 margin: 0 auto;
 margin-right: auto !important;
 max-width: 1080px;
 float: none;
}

Adăugați orice modul pe care îl doriți la rând (de exemplu, Modulul Call to Action) și stilizați-l în consecință. Poate doriți să adăugați fundaluri transparente la modulul dvs., astfel încât acesta să nu depășească culoarea de fundal a secțiunii CTA.

Notă importantă: Nu puteți adăuga mai multe CTA cu această funcție pe pagină.

Gânduri finale

Duplicarea CTA-ului Elegant Theme este o caracteristică utilă de adăugat la orice proiect viitor. Atrage atenția cititorului fără a fi prea stăpânitor. Utilizarea modulului de cod oferă dezvoltatorilor mai multă flexibilitate pentru a adăuga html personalizat în cadrul CTA. Și, funcționalitatea de animație a punctelor de cale nu se limitează la modulul de cod. De asemenea, puteți adăuga ID-urile CSS necesare în orice secțiune, rând și coloană pentru a crea CTA-uri cu orice modul care utilizează Divi Builder.

Aștept cu nerăbdare să aud de la dvs. în comentariile de mai jos.

Noroc!