Të kesh një thirrje për veprim në faqen tuaj është një nga mënyrat më pak ndërhyrëse për të tërhequr vëmendjen tuaj vizitorët. Shumicën e kohës ata thjesht do të injorojnë CTA ose do ta mbyllin atë për të vazhduar shfletimin e faqes, por ndonjëherë ju do t'i fitoni ata. Një rrëshqitje e thirrjes për veprim do të funksionojë mirë promovojë pothuajse çdo gjë në një faqe uljeje.

Në këtë tutorial, ne do të krijojmë një thirrje për veprim të mbyllur që mund të shtohet në çdo cep të një faqeje duke përdorur Divi Theme Builder. Pasi të bëhet kjo, ju do të keni mundësinë për të promovojë produktet dhe ofertat tuaja speciale kudo në faqe pa pasur nevojë të përdorni një shtesë.

Le të fillojmë!

studim

Këtu keni një vështrim të shpejtë në katër CTA të futura që do t'i shtojmë në të katër cepat e modelit të faqes. Sigurisht, nuk do të duhet të vendosni të katër në të njëjtën kohë. Vini re se si secili mund të mbyllet duke klikuar në ikonën "x", atëherë mund të zgjidhni të riaktivizoni CTA duke klikuar në ikonën "plus".

Çfarë duhet të filloni

Për të filluar, do t'ju duhet për të instaluar dhe aktivizuar temën Divi . Sigurohuni që keni versionin më të fundit të Divi.

Do t'ju duhet gjithashtu të paktën një faqe e krijuar me Divi Builder për qëllime testimi në mënyrë që të caktoni modelin e ri në këtë faqe për të shfaqur rezultatin.

Krijimi i një thirrjeje veprimi rrëshqitëse, me një shabllon faqe në Divi

Krijimi i një modeli të ri

Nga paneli i WordPress, shkoni te Divi> Krijuesi i temave. Pastaj klikoni në kutinë "Shto një model të ri" për të krijuar një model të ri.

Caktoni modelin në faqen ose faqet në të cilat dëshironi të shfaqni shiritin promovues.

Në modelin e ri, kliko në zonën "Shto një trup të personalizuar" dhe më pas zgjidh "Krijo një trup të personalizuar".

Pastaj zgjidhni opsionin "Ndërto nga gërvishtja".

Krijimi i seksionit të përmbajtjes së botimit

Seksioni i përmbajtje postimi është një pjesë e nevojshme e çdo shablloni të faqes në mënyrë që të shfaqet përmbajtje faqe ose postim i vërtetë i ngulitur në Divi ose WordPress. Ne do ta shtojmë këtë në shabllonin tonë përpara se të krijojmë thirrjen tonë të parë për veprim për të futur.

Shtoni një rresht në një kolonë

Për të filluar, shtoni një rresht të një kolone në seksionin e rregullt.

Shtoni një modul të përmbajtjes botuese

Pastaj shtoni një modul përmbajtje publikim në linjë.

Cilësimet e linjës

Pas kësaj azhurnoni parametrat e linjës si më poshtë:

• Gjerësia: 100%
• Gjerësia maksimale: 100%
• Mbushje: 0px e lartë, e ulët 0px

Krijimi i thirrjes për veprim lart majtas

Tani që kemi modulin tonë të përmbajtjes së postimit, ne jemi gati të fillojmë të shtojmë thirrjen tonë të parë për veprim për ta futur në këndin e sipërm të majtë të modelit të faqes.

Shtoni një seksion

Çdo thirrje e re për veprim do të krijohet me një seksion krejt të ri. Kjo do t'ju lejojë të shtoni çdo plan urbanistik ose modul të nevojshëm për të hartuar thirrjen për veprim.

Shtoni një seksion të ri të rregullt në paraqitjen e modelit.

Shtoni një rresht në një kolonë

Pastaj jepi seksionit një rresht të një kolone.

Cilësimet e seksionit

Tërhiqni (ose lëvizni) seksionin sipër seksionit të përmbajtjes së postimit dhe azhurnoni cilësimet e seksionit si më poshtë:

• Gradienti i sfondit me ngjyrën e majtë:
• Gradienti i sfondit të djathtë:
• Shfaq gradientin sipër figurës: PO
• Imazhi i sfondit: [fut imazhin]
• Gjerësia: 320px
• Margjina: 320px majtas
• Mbushje: 0px e lartë, e ulët 0px
• Stili i animacionit: Slide
• Drejtimi i animacionit: djathtas
• Vonesa e animacionit: 2000 ms

Pastaj hidhni te skeda e përparuar dhe shtoni klasën e mëposhtme CSS dhe indeksin Z:

• Klasa CSS: rrëshqitje-në-cta
• Indeksi Z: 999

Dhe shtoni fragmentin e personalizuar të CSS duke ndjekur elementin kryesor:

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

Klasa CSS është e nevojshme në mënyrë që të mund të synojmë seksionin me kod më vonë. Custom CSS do të pozicionojë pjesën e sipërme të majtë të shabllonit të faqes në një pozicion fiks (ose ngjitës). Pozicioni "majtas: -320 piksel" duhet të lëvizë të gjithë seksionin (i cili është 320 pixel i gjerë) jashtë dritares së shfletuesit (prandaj jashtë shikimit tonë). Por ne kemi kufijtë e majtë prej 320 pikselësh për ta rikthyer atë për të parë. Arsyeja që është ndërtuar në këtë mënyrë është se ne mund ta kthejmë ose çaktivizojmë vlerën e marzhit kur ju klikoni në ikonën "x". Kjo do të bëjë që CTA të rrëshqasë brenda dhe larg syve.

Cilësimet e linjës

Tani, azhurnoni parametrat e linjës si më poshtë:

• Përdorni një gjerësi hekuri me porosi: PO
• Gjerësia e zorrës së trashë: 1
• Gjerësia: 100%
• Mbushje: 0px e lartë, e ulët 0px

Shtoni një modul thirrje për veprim

Brenda rreshtit, shtoni një modul Thirrje për Veprim.

Cilësimet e thirrjes për veprim

Pastaj azhurnoni cilësimet e thirrjes për veprim.

Përmbajtje

• Titulli: [shkruani tekstin e zgjedhjes suaj]
• Butoni: [shkruani tekstin e zgjedhjes suaj]
• Trupi: [shkruani tekstin e zgjedhjes suaj]
• URL e lidhjes së butonit: [shkruani URL aktuale ose #]

Pastaj hiqni ngjyrën e paracaktuar të sfondit për të zbuluar sfondin e seksionit që kemi shtuar më parë.

Parametrat e projektimit (teksti, butoni dhe mbushja)

Në skedën Design, azhurnoni sa vijon:

• Shkronja e titullit: Lato
• Pesha e shkronjave të titullit: E rëndë
• Lartësia e rreshtit të titullit: 1,3 em
• Policia e Trupit: Lato
• Pesha e fontit të trupit: e guximshme
• Përdorni stilet e personalizuara për butonin: PO
• Madhësia e tekstit të butonit: 15px
• Gjerësia e kufirit të butonit: 0px
• Hapësira e shkronjave të butonave: 1px
• Tipi i butonit: Lato
• Pesha e shkronjave të butonit: e rëndë
• Stili i shkronjave të butonit: TT
• Mbushja e butonave: 12 piksele në krye, 12 pixel në fund, 32 piksele në të majtë, 32 piksele në të djathtë
• mbushje: 40 pixel në krye, 40 pixel në fund, 40 pixel në të majtë, 40 pixel në të djathtë

Shtoni një ikonë të hapur dhe të mbyllur me një modul Blurb

Pasi të bëhet thirrja për veprim, duhet të krijojmë butonin e ikonës që përdoret për të hapur dhe mbyllur thirrjen për veprim rrëshqitës. Për ta krijuar këtë, shtoni një modul blurb nën modulin thirrje për veprim.

Cilësimet e tekstit të prezantimit

Përditësoni parametrat e mëposhtëm të projektimit.

Përmbajtje

• hiqni titullin e paracaktuar dhe tekstin e trupit
• Përdorni ikonën: PO
• Ikona: më shumë (shih screenshot)

Konceptim

• Ngjyra e ikonës: # 000000
• Përdorni madhësinë e shkronjave të ikonës: PO
• Madhësia e shkronjës së ikonës: 40 pixel
• Gjerësia: 40px
• Lartësia: 40px
• Qoshet e rrumbullakosura: 50%
• Transformimi i rrotullimit të boshtit Z: 135 gradë

Cilësimet e përparuara

Nën skedën e përparuar, shtoni klasën vijuese CSS:

• Klasa CSS: rrëshqitje-në shënjestër

Pastaj shtoni këtë CSS të personalizuar në elementin kryesor.

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

Shtoni CSS-në e mëposhtme të personalizuar në imazhin Blurb.

margin-bottom: 0px;

Rezultat

Këtu është rezultati i deritanishëm.

Mbani në mend se ne ende duhet të shtojmë disa kode për të shtuar funksionimin e mbyllur dhe të hapur kur klikoni në ikonën "x". Ne do të shtojmë kodin pasi të krijojmë një thirrje për veprim në secilin prej katër këndeve të modelit.

Krijimi i thirrjes për veprim lart djathtas

Me thirrjen e parë për veprim të integruar, ne mund të përshpejtojmë procesin e krijimit të pjesës tjetër të CTA duke kopjuar seksionin e krijuar tashmë. Tjetra, ne do të krijojmë një thirrje veprimi për këndin sipër djathtas.

Seksioni i kopjuar

Vendosni mënyrën e shfaqjes së telit dhe pastaj kopjoni pjesën CTA në të majtë lart.

Përditësoni cilësimet e seksionit

Pastaj azhurnoni parametrat e seksionit të ri si më poshtë:

• marzhi: 320px djathtas
• drejtimi i animacionit: majtas

Pastaj azhurnoni CSS të personalizuar në elementin kryesor duke zëvendësuar "majtas" me "djathtas". Ja pjesa e plotë:

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

Përditësoni parametrat e modulit Blurb

Tjetra, hapni cilësimet e modulit Blurb dhe azhurnoni copën e personalizuar të CSS në elementin kryesor duke zëvendësuar "djathtas" me "majtas". Ja pjesa e plotë:

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

Rezultat

Tani do të shihni një thirrje për veprim si një diapozitivë në pjesën e sipërme të djathtë të modelit të faqes.

Kryeni të njëjtat operacione për pjesën tjetër të seksioneve "E Djathta e Ulët", "E majta e poshtme". Ju gjithashtu do të duhet të rregulloni kodin CSS për secilin prej moduleve që të keni një rezultat të ngjashëm me më poshtë.

Shtimi i fragmenteve të personalizuara të jQuery dhe CSS duke përdorur një modul kodi

Për hapin e fundit duhet të shtojmë disa jQuery dhe CSS të personalizuar në mënyrë që të mund të marrim funksionalitetin e hapjes dhe mbylljes së secilës prej CTA-ve të rrëshqitjes.

Shtoni një modul kodi

Shtoni një modul kodi në një nga seksionet e prezantimit.

Vendosni kodin

Pastaj hapni cilësimet e kodit dhe ngjitni kodin e mëposhtëm në zonën e kodit.

<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>

Mendimet e fundit

Me Divi, nuk është aspak e vështirë të krijosh një thirrje për veprim. Dhe meqenëse mund të përdorni krijuesin e temave për të shtuar një thirrje për veprim në një shabllon faqeje, do të keni më shumë kontroll se në cilat faqe shfaqen ato CTA.