Poziv na radnju na vašoj web stranici jedan je od najmanje nametljivih načina da privučete svoju pozornost posjetitelji. Većinu vremena samo će ignorirati CTA ili ga zatvoriti kako bi nastavili pregledavati stranicu, ali ponekad ćete ih pridobiti. Slajd s pozivom na akciju izvrsno će funkcionirati unaprijediti gotovo sve na odredišnoj stranici.

U ovom vodiču dizajnirat ćemo poziv na radnju koji se može zatvoriti i koji se može dodati u bilo koji kut stranice pomoću Divi Theme Buildera. Nakon što to učinite, imat ćete mogućnost unaprijediti svoje proizvode i posebne ponude bilo gdje na stranici bez potrebe za korištenjem dodatka.

Krenimo!

pregled

Evo kratkog pregleda četiri umetnuta CTA-a koja ćemo dodati u četiri kuta predloška stranice. Naravno, nećete trebati rasporediti sve četiri istovremeno. Primijetite kako se svaki može zatvoriti klikom na ikonu "x", a zatim možete odabrati ponovno omogućavanje CTA-a klikom na ikonu "plus".

Što trebate za početak

Za početak, morat ćete za instaliranje i aktiviranje teme Divi . Provjerite imate li najnoviju verziju Divi.

Također će vam trebati barem jedna stranica kreirana pomoću Divi Builder-a radi testiranja kako biste ovoj stranici dodijelili novi predložak za prikaz rezultata.

Izrada kliznog poziva na akciju, s predloškom stranice u Diviju

Stvaranje novog modela

Na nadzornoj ploči WordPressa idite na Divi> Generator tema. Zatim kliknite okvir "Dodaj novi predložak" da biste stvorili novi predložak.

Dodijelite predložak stranici ili stranicama na kojima želite prikazati promotivnu traku.

Na novom modelu kliknite područje "Dodaj prilagođeno tijelo", a zatim odaberite "Izradi prilagođeno tijelo".

Zatim odaberite opciju "Build From Scratch".

Stvaranje odjeljka o sadržaju publikacije

Odjeljak za sadržaj post je nužan dio bilo kojeg predloška stranice kako bi se prikazao sadržaj prava stranica ili post ugrađen u Divi ili WordPress. Ovo ćemo dodati u naš predložak prije stvaranja prvog poziva na radnju za umetanje.

Dodajte redak stupcu

Za početak dodajte redak stupca u uobičajeni odjeljak.

Dodajte modul za objavljivanje sadržaja

Zatim dodajte modul od sadržaj objava do retka.

Postavke linije

Nakon toga ažurirajte parametre retka na sljedeći način:

• Širina: 100%
• Maks. Širina: 100%
• Padding: 0px visoko, 0px low

Izrada poziva na akciju gore lijevo

Sad kad imamo postavljeni modul za sadržaj posta, spremni smo početi dodavati svoj prvi poziv na akciju koji ćemo umetnuti u gornji lijevi kut predloška stranice.

Dodajte odjeljak

Svaki novi poziv na akciju stvorit će se s potpuno novim odjeljkom. To će vam omogućiti da dodate bilo koji izgled ili modul potreban za dizajniranje poziva na akciju.

Dodajte novi redovan odjeljak u izgled predloška.

Dodajte redak stupcu

Zatim odjeljku dajte red stupca.

Postavke odjeljka

Povucite (ili premjestite) odjeljak iznad odjeljka sa sadržajem posta i ažurirajte postavke odjeljka na sljedeći način:

• Lijevi gradijent pozadine boje:
• Desni gradijent pozadine:
• Prikažite gradijent iznad slike: DA
• Pozadinska slika: [ubaci sliku]
• Širina: 320px
• Margina: preostalo 320 px
• Padding: 0px visoko, 0px low
• Stil animacije: dijapozitiv
• Smjer animacije: desno
• Kašnjenje animacije: 2000 ms

Zatim prijeđite na naprednu karticu i dodajte sljedeću CSS klasu i Z indeks:

• CSS klasa: slide-in-cta
• Z indeks: 999

I dodajte prilagođeni CSS isječak slijedeći glavni element:

position: fixed;top: 80px;left: -320px;

Potrebna je CSS klasa kako bismo kasnije mogli ciljati odjeljak s kodom. Prilagođeni CSS postavit će gornji lijevi dio predloška stranice u fiksni (ili ljepljivi) položaj. Položaj "lijevo: -320 piksela" trebao bi pomaknuti cijeli odjeljak (koji je širok 320 piksela) izvan prozora preglednika (dakle izvan našeg pogleda). Ali imamo lijevu marginu od 320 piksela da bismo je vratili na pregled. Razlog zašto je konstruirana na ovaj način je taj što možemo uključiti ili isključiti vrijednost margine kada kliknete na ikonu "x". To će uzrokovati da CTA klizi i ulazi iz vidokruga.

Postavke linije

Ažurirajte parametre retka na sljedeći način:

• Koristite prilagođenu širinu oluka: DA
• Širina oluka: 1
• Širina: 100%
• Padding: 0px visoko, 0px low

Dodajte modul poziva na akciju

Unutar retka dodajte modul Poziv na akciju.

Postavke poziva na akciju

Zatim ažurirajte postavke poziva na radnju.

Sadržaj

• Naslov: [unesite tekst po vašem izboru]
• Gumb: [unesite tekst po vašem izboru]
• Tijelo: [unesite tekst po vašem izboru]
• URL veze gumba: [unesite stvarni URL ili #]

Zatim uklonite zadanu boju pozadine da biste otkrili pozadinu odjeljka koji smo ranije dodali.

Dizajnerski parametri (tekst, gumb i ispuna)

Na kartici Dizajn ažurirajte sljedeće:

• Naslov naslova: Lato
• Težina naslova: Teška
• Visina naslovne linije: 1,3 em
• Tijelo policije: Lato
• Masa fonta tijela: podebljano
• Za tipku koristite prilagođene stilove: DA
• Veličina teksta gumba: 15px
• Širina obruba gumba: 0px
• Razmak između slova s ​​gumbom: 1 px
• Font gumba: Lato
• Težina slova gumba: težak
• Stil fonta gumba: TT
• Padding gumba: 12 piksela na vrhu, 12 piksela na dnu, 32 piksela slijeva, 32 piksela desno
• padding: 40 piksela na vrhu, 40 piksela na dnu, 40 piksela na lijevoj strani, 40 piksela s desne strane

Dodajte ikonu za otvaranje i zatvaranje pomoću modula Blurb

Kad je poziv na akciju gotov, moramo stvoriti gumb s ikonom koji se koristi za otvaranje i zatvaranje kliznog poziva na akciju. Da biste to stvorili, dodajte modul za zamućivanje ispod modula poziva na akciju.

Postavke teksta prezentacije

Ažurirajte sljedeće parametre dizajna.

Sadržaj

• uklonite zadani naslov i tekst tijela
• Upotrijebite ikonu: DA
• Ikona: više (pogledajte snimak zaslona)

Začeće

• Boja ikone: # 000000
• Koristite veličinu fonta ikone: DA
• Veličina fonta ikone: 40 piksela
• Širina: 40px
• Visina: 40px
• Zaobljeni uglovi: 50%
• Transformacija rotacije Z osi: 135 stupnjeva

Napredne postavke

Ispod napredne kartice dodajte sljedeću CSS klasu:

• CSS klasa: slide-in_target

Zatim dodajte ovaj prilagođeni CSS glavnom elementu.

position: absolute;bottom: 0px;right: -40px;

Dodajte sljedeći prilagođeni CSS na Blurb sliku.

margin-bottom: 0px;

rezultat

Evo dosadašnjeg rezultata.

Imajte na umu da ipak moramo dodati neki kôd da bismo dodali funkciju zatvaranja i otvaranja kada kliknemo ikonu "x". Kôd ćemo dodati nakon stvaranja poziva na akciju u svakom od četiri kuta modela.

Stvaranje poziva na akciju u gornjem desnom kutu

S prvim ugrađenim pozivom na akciju možemo ubrzati postupak stvaranja ostatka CTA-a dupliciranjem već stvorenog odjeljka. Dalje ćemo stvoriti slajd poziv na akciju za gornji desni kut.

Duplikat odjeljak

Postavite način prikaza žičanog okvira, a zatim duplicirajte CTA odjeljak u gornjem lijevom kutu.

Ažurirajte postavke odjeljka

Zatim ažurirajte nove parametre odjeljka na sljedeći način:

• margina: 320px desno
• smjer animacije: lijevo

Zatim ažurirajte prilagođeni CSS u glavnom elementu zamjenom "lijevo" s "desno". Evo cijelog izvatka:

position: fixed;top: 80px;right: -320px;

Ažurirajte parametre modula Blurb

Zatim otvorite postavke modula Blurb i ažurirajte prilagođeni CSS isječak u glavnom elementu zamjenom "desno" s "lijevo". Evo cijelog izvatka:

position: absolute;bottom: 0px;left: -40px;

rezultat

Poziv na akciju sada ćete vidjeti kao slajd u gornjem desnom dijelu predloška stranice.

Izvršite iste postupke za ostatak odjeljaka "Donji desni", "Donji lijevi". Također ćete morati prilagoditi CSS kôd za svaki od modula kako bi imao rezultat sličan sljedećem.

Dodavanje prilagođenih jQuery i CSS isječaka pomoću modula koda

Za posljednji korak moramo dodati neke prilagođene jQuery i CSS kako bismo mogli dobiti funkcionalnost otvaranja i zatvaranja svakog od CTA-ova slajda.

Dodajte modul koda

Dodajte modul koda u jedan od odjeljaka prezentacije.

Zalijepite kôd

Zatim otvorite postavke koda i zalijepite sljedeći kôd u područje koda.

<style>.slide-in-cta, .slide-in_target, .slide-in-toggle-active {transition: all 400ms ease-in-out;} .slide-in-toggle-active {margin: 0px 0px 0px 0px !important;}.slide-in-toggle-active .slide-in_target  {transform: none !important;background: rgba(0,0,0,0.2);}  .slide-in_target {cursor: pointer;}</style><script>(function($) {$(document).ready(function(){$('.slide-in_target').click(function(){$(event.target).closest('.slide-in-cta').toggleClass('slide-in-toggle-active'); });    });})( jQuery );   </script>

Završne misli

S Divijem uopće nije teško stvoriti poziv na akciju. A budući da pomoću alata za izgradnju tema možete dodati poziv na akciju predlošku stranice, imat ćete veću kontrolu nad stranicama koje prikazuju te CTA-ove.