Sticky sidebars er ekstremt effektive for å tiltrekke seg oppmerksomheten til Besøkende uten å være påtrengende eller distraherende. Trikset er å inkludere ett eller to elementer i sidefeltet som "blir synlige" eller festet til siden av innhold av innlegget når brukeren ruller siden. Dette er et forfriskende alternativ til det tradisjonelle sidefeltoppsettet, da det gir inntrykk av et moderne oppsett i full bredde (uten sidefelt), med fordelen ved å presentere handlingsfremmende oppfordringer som er viktige på siden av siden når det er nødvendig.

I denne opplæringen viser vi deg hvordan du legger til klissete handlingsfremmende til en blogginnleggsmal ved hjelp av Divi Theme Builder. Anvendelsen av dette oppsettet er betydelig. Det vil fungere for nesten alle sider eller alle innleggsmaler. I tillegg trenger du ikke å begrense deg til CTA-er; du kan velge å legge til Divi-modulen (e) du ønsker.

Hva du trenger for å komme i gang

For å begynne, må du å installere og aktivere Divi-temaet . Forsikre deg om at du har den nyeste versjonen av Divi.

Du vil også trenge minst en melding opprettet med Divi Builder for testing for å vise ønsket resultat.

Etter det er du klar til å dra.

undersøkelsen

Her er en rask oversikt over klebrig ACTs som er lagt til en blogginnleggsmal i Divi.

Legg til divi klebrige sidefelt

Slik legger du til faste anrop til handling i blogginnleggsmalen din i Divi

Legger til temabyggermalen

Det første trinnet er å importere vår forhåndsdefinerte mal på nettstedet vårt. Vi skal bruke Divi Theme Builder Pack # 1 publikasjonsmal.

For å komme i gang, naviger til Divi > Generator temaer. Klikk på portabilitetsikonet øverst til høyre på siden. I portabilitetsmodalen velger du importfanen og velger filen divi-theme-builder-pack-1-post-template.json fra mappen. Hvis du har maler installert på nettstedet ditt, sørg for å fjerne merket for alle alternativer som kan overskrive gjeldende maler. Klikk deretter på importknappen.

Importer en divi-layout

Bygg blogginnleggsmalen

Når malen er importert, er vi klare til å legge til de nye CTA-ene våre i sidefeltet som er klissete i maloppsettet. For å gjøre dette, klikk på redigeringsikonet for det egendefinerte kroppsområdet.

Legg til en egendefinert divi-kropp

Lagt til dobbelt sidelinjelayout for å holde sidefeltets CTAer

Finn raden som inneholder Publiser-modulen i Model Layout Editor. innhold og erstatte kolonneoppsettet med en en femtedel av tre femtedeler av en femtedel (1/5 3/5 1/5) kolonnestruktur. Dette vil tillate oss å holde kolonnen sentrert for innhold av innlegget samtidig som det gir to seksjoner på hver side for våre klebrige CTAer.

Legg til en divi-layout

Etter å ha endret kolonnestrukturen, drar du innholdspubliseringsmodulen til midtkolonnen.

Oppdater linjeparametere

Åpne linjeinnstillingene og oppdater følgende designalternativer:

  • Bruk en tilpasset rennebredde: JA
  • Rennesteinsbredde: 2
  • Bredde: 100% (stasjonær), 90% (nettbrett)
  • Maksimal bredde: 1500px
Legg til en fix divi-seksjon

Dette vil gi oss rommet vi trenger for vår doble sidefeltkonfigurasjon.

Oppdater 1 kolonneinnstillinger

Åpne deretter innstillingene for 1-kolonne og gi denne kolonnen en tilpasset CSS-klasse:

  • CSS-klasse: klebrig-cta
Tilpass kolonne 1 css divi

Legge til et CTA-sidefelt i venstre kolonne

Vi er nå klare for den første handlingen. Legg til et anrop til handlingsmodulen i venstre kolonne.

Legg til moduloppfordring til handling

Styliser CTA-sidefeltet

Oppdater innstillingene som følger:

Innhold
  • Knapp: «Klikk her»
  • Kropp: “Innholdet ditt kommer hit. Rediger eller slett denne teksten online eller i modulens innholdsinnstillinger. ”
  • URL til lenken til knappen: #
Tilpass call to action-modulen
Tekstdesign
  • Body font: Montserrat
  • Fontvekt: halvfet
  • Brødtekst: Høyre justering
  • Tekstens kroppsfarge: # 444444
  • Tekststørrelse på kroppen: 22px (stasjonær), 18px (nettbrett)
  • Kroppshøyde: 1.3em
CTA strømpebukser
knapp
  • Knapptekststørrelse: 14px
  • Knapptekstfarge: #ffffff
  • Bakgrunnsfarge på knappen: # 6148df
  • Bredde på knappens kantlinje: 0px
  • Radius av knappen: 80px
  • Skriftvekt: Fet
  • Knapp font stil: TT
  • Polstring av knapper: 12px øverst, 12px nederst, 22px til venstre, 22px til høyre
Divi modul seksjon
Bredde, justering, polstring og fortauskanter
  • Bredde: 100%
  • Maksimal bredde: 320px
  • Justering av modulen: høyre
  • Polstring: 10px til venstre, 10px til høyre
  • Bredde på øverste kant: 10px
  • Farge på øverste kant: #eeeeee
  • Bredde på nederste kant: 10px
  • Farge på bunnen: #eeeeee
Divi oppfordring til handling-konfigurasjon

Legge til CTA-sidefeltet i høyre kolonne

For å opprette CTA for høyre kolonne, kopier den vi nettopp opprettet, og lim den inn i kolonnen lengst til høyre. Oppdater deretter innstillingene for duplikatet som følger:

  • Justering av tekstdelen: venstre
  • Justering av modulen: venstre
Legg til ct til høyre

Oppdater 3-kolonneinnstillingene

For denne CTA i høyre kolonne, vil vi legge en øvre margin til kolonnen for å etablere en startposisjon for CTA-sidefeltet på et nedre punkt på siden.

Begynn med å åpne parametrene til 3-kolonnen og legg til den samme CSS-klassen som vi la til i 1-kolonnen:

  • CSS-klasse: klebrig-cta

Deretter legger du til følgende tilpassede CSS til hovedelementet:

kontor

margin-top: 50%

tablett

margin-top: 0%

Tilpass divi kolonnestil

Dette vil gi oss et annet utgangspunkt for den klissete CTA i høyre kolonne, som er 50% av radbredden. Juster gjerne denne verdien etter behov for ditt eget blogginnlegg.

Dupliser en cta divi-modul

Legg til tilpasset CSS i malen med en kodemodul

For å få vår "klissete" posisjonering for CTA-er i sidefeltet, må vi legge til tilpasset CSS. For å gjøre dette, opprett en ny kodemodul under innholdspubliseringsmodulen (eller hvor som helst på siden).

Sett inn en modul for divi-kode

Lim deretter inn følgende CSS i kodeboksen:

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

Divi modul parameter kode

Toppforskyvningen i denne koden er en beregning som plasserer CTA vertikalt sentrert på siden når du blar. 50vh er halvparten av nettleservinduet og 130px er halvparten av høyden på CTA. Hvis CTA er høyere eller lavere, må du justere 130 piksler opp eller ned.

Lagre innstillinger

Når du er ferdig, lagrer du malen.

Lagre parametere for cta divi-modul

Og lagre deretter temabyggerinnstillingene

Lagre divisjon temabygger

Endelig resultat

For å se sluttresultatet, besøk en bloggartikkel ved hjelp av malen.

CTA strømpebukser

Og det er slik klebrig CTA vil holde seg fast på bla. Du kan se hvordan det fungerer best for lengre innhold.

Animasjon cta divi

avslutt~~POS=TRUNC tanker

Disse klissete sideoppfordringene til handling er et forfriskende alternativ til den tradisjonelle sidelinjen. De fungerer godt for minimalistisk design fordi de er mindre påtrengende og ikke får innlegget til å føles rotete. I tillegg kan du plassere CTA lavere på siden slik at den vises gradvis og holder seg til rullen, noe som gjør den mer synlig for folk. Besøkende. Og ikke glem. Du kan erstatte CTA med hvilken som helst Divi-modul eller kombinasjon av moduler for å lage omtrent hva du vil. Du kan også velge å beholde bare én CTA på den ene siden. Det ser ut til å ha mange applikasjoner.