Ljepljive bočne trake izuzetno su učinkovite u privlačenju pozornosti posjetitelji a da ne bude nametljiv ili ometajući. Trik je uključiti jedan ili dva elementa u bočnu traku koji "ostaju vidljivi" ili fiksirani sa strane sadržaj objave kada korisnik skrola po stranici. Ovo je osvježavajuća alternativa tradicionalnom izgledu bočne trake, budući da daje dojam modernog izgleda pune širine (bez bočne trake), uz prednost predstavljanja poziva na radnju važnih za bočni dio stranice kada je to potrebno.
U ovom vodiču pokazat ćemo vam kako dodati ljepljive pozive na akciju predlošku bloga pomoću Divi Theme Builder. Primjena ovog izgleda je značajna. Učinit će gotovo za bilo koju stranicu ili bilo koji predložak posta. Osim toga, ne morate se ograničiti na CTA-ove; možete dodati Divi modul (e) po vašem izboru.
Što trebate za početak
Za početak morate za instaliranje i aktiviranje teme Divi . Provjerite imate li najnoviju verziju Divi.
Za testiranje željenog rezultata trebat će vam barem jedna poruka stvorena s Divi Builder-om.
Nakon toga, spremni ste otići.
pregled
Evo kratkog pregleda ljepljivih ACT-ova koji su dodani u predložak posta na blogu u Divi.
Kako dodati fiksne pozive na akciju u predlošku posta na blogu u Divi
Dodavanje predloška alata za izradu tema
Prvi korak je uvoz našeg unaprijed definiranog predloška na naše web mjesto. Koristit ćemo predložak publikacije Divi Theme Builder Pack 1.
Za početak idite na Divi > Generator teme. Kliknite ikonu prenosivosti u gornjem desnom kutu stranice. U načinu prijenosa odaberite karticu uvoza i odaberite datoteku divi-theme-builder-pack-1-post-template.json iz mape. Ako imate predloške koji su trenutačno instalirani na vašem web-mjestu, svakako poništite sve opcije koje bi mogle prebrisati vaše trenutne predloške. Zatim kliknite gumb za uvoz.
Izradite predložak posta na blogu
Nakon uvoza predloška, spremni smo dodati nove CTA-ove na bočnu traku ljepljivu za izgled predloška. Da biste to učinili, kliknite ikonu za uređivanje prilagođenog područja tijela.
Dodan je izgled dvostruke bočne trake za zadržavanje CTA-ova bočne trake
U uređivaču izgleda modela pronađite redak koji sadrži modul Objavi. sadržaj i zamijenite raspored stupaca strukturom stupaca jedna petina puta tri petine puta jedna petina (1/5 3/5 1/5). To će nam omogućiti da zadržimo središte stupca za sadržaj postova, istovremeno pružajući dva odjeljka s obje strane za naše ljepljive CTA-ove.
Nakon promjene strukture stupaca, povucite modul za objavljivanje sadržaja u središnji stupac.
Ažuriranje parametara linije
Otvorite postavke linije i ažurirajte sljedeće mogućnosti dizajna:
- Koristite prilagođenu širinu oluka: DA
- Širina oluka: 2
- Širina: 100% (desktop), 90% (tablet)
- Maksimalna širina: 1500px
Ovo će nam pružiti sobu potrebnu za dvostruku konfiguraciju bočne trake.
Ažurirajte postavke stupaca 1
Zatim otvorite postavke stupca 1 i dodijelite tom stupcu prilagođenu CSS klasu:
- CSS klasa: sticky-cta
Dodavanje CTA bočne trake u lijevi stupac
Sada smo spremni za prvi poziv na akciju. Dodajte poziv akcijskom modulu u lijevom stupcu.
Stilizirajte CTA bočnu traku
Ažurirajte postavke na sljedeći način:
Sadržaj
- Gumb: «Kliknite ovdje»
- Body: „Vaš sadržaj ide ovdje. Uredite ili izbrišite ovaj tekst na mreži ili u postavkama sadržaja modula. "
- URL veze gumba: #
Dizajn teksta tijela
- Krstionica za tijelo: Montserrat
- Težina slova: polusjeda
- Tekst tijela: Poravnavanje udesno
- Boja tijela teksta: # 444444
- Veličina teksta tijela: 22px (desktop), 18px (tablet)
- Visina tijela: 1.3em
dugme
- Veličina teksta gumba: 14px
- Boja teksta gumba: #ffffff
- Boja pozadine gumba: # 6148df
- Širina obruba gumba: 0px
- Polumjer gumba: 80px
- Težina slova: podebljana
- Stil fonta gumba: TT
- Pad gumba: 12px na vrhu, 12px na dnu, 22px na lijevoj strani, 22px na desnoj strani
Širina, poravnavanje, obloga i pločice
- Širina: 100%
- Maksimalna širina: 320px
- Usklađivanje modula: desno
- Padding: 10px s lijeve strane, 10px s desne strane
- Širina gornje granice: 10px
- Boja gornje obrube: #eeeeee
- Širina donje granice: 10px
- Boja donje granice: #eeeeee
Dodavanje bočne trake CTA u desni stupac
Da biste stvorili CTA za desni stupac, kopirajte upravo stvoreni i zalijepite ga u krajnji desni stupac. Zatim ažurirajte postavke za duplikat na sljedeći način:
- Poravnavanje tijela teksta: lijevo
- Poravnanje modula: lijevo
Ažurirajte postavke stupca 3
Za ovaj CTA u desnom stupcu ćemo dodati gornju marginu u stupac da bismo uspostavili početni položaj bočne trake CTA na donjoj točki stranice.
Započnite otvaranjem parametara stupca 3 i dodajte istu CSS klasu koju smo dodali u stupac 1:
- CSS klasa: sticky-cta
Zatim dodajte sljedeći prilagođeni CSS glavnom elementu:
Biro
margin-top: 50%
tableta
margin-top: 0%
To će nam dati različitu polaznu točku za ljepljivi CTA na desnom stupcu, što je 50% širine retka. Slobodno prilagodite ovu vrijednost prema potrebi za vlastiti post na blogu.
Dodajte prilagođeni CSS u predložak s modulom koda
Da bismo dobili "ljepljivo" pozicioniranje za naše CTA-ove bočne trake, moramo dodati prilagođeni CSS. Da biste to učinili, stvorite novi modul koda ispod modula za objavljivanje sadržaja (ili bilo gdje na stranici).
Zatim u okvir koda zalijepite sljedeći CSS:
<style> @media only screen and (min-width: 980px) {#page-container { overflow-y:visible !important; } .sticky-cta {position: sticky !important;position: -webkit-sticky !important;top: calc(50vh - 130px) !important;}}</style>
Gornji pomak u ovom kodu je izračun kojim se CTA postavlja pomicanjem okomito na stranicu tijekom pomicanja. 50vh je polovina visine prozora preglednika, a 130px polovica visine CTA-a. Ako je vaš CTA veći ili niži, morat ćete prilagoditi 130 piksela gore ili dolje.
Spremite postavke
Nakon što završite, spremite izgled predloška.
Zatim spremite postavke alata za izradu tema
Konačni rezultat
Da biste pogledali krajnji rezultat, posjetite članak bloga pomoću predloška.
I ovako će ljepljivi CTA-ovi ostati zaglavljeni na pomicanju. Možete vidjeti kako bi to najbolje funkcioniralo za dulji sadržaj.
Završne misli
Ovi pozivi na akciju s ljepljive strane osvježavajuća su alternativa tradicionalnoj bočnoj traci. Dobro funkcioniraju za minimalistički dizajn jer su manje nametljivi i ne čine post pretrpanim. Dodatno, CTA možete postaviti niže na stranici tako da se pojavljuje postupno i lijepi na pomicanje, čineći ga ljudima vidljivijim. posjetitelji. I ne zaboravite. CTA možete zamijeniti bilo kojim Divi modulom ili kombinacijom modula kako biste stvorili gotovo sve što želite. Također možete odabrati zadržati samo jedan CTA na jednoj strani. Čini se da ima mnogo primjena.
