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.
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.
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.
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.
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
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
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.
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: #
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
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
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
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
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%
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.
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).
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>
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.
Og lagre deretter temabyggerinnstillingene
Endelig resultat
For å se sluttresultatet, besøk en bloggartikkel ved hjelp av malen.
Og det er slik klebrig CTA vil holde seg fast på bla. Du kan se hvordan det fungerer best for lengre innhold.
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.