Sticky sidebars er ekstremt effektive til at tiltrække opmærksomhed besøgende uden at være påtrængende eller distraherende. Tricket er at inkludere et eller to elementer i sidebjælken, der "forbliver synlige" eller fastgjort til siden af indhold af indlægget, når brugeren ruller siden. Dette er et forfriskende alternativ til det traditionelle sidebjælkelayout, da det giver indtryk af et moderne layout i fuld bredde (uden sidebjælke), med fordelen ved at præsentere opfordringer til handling, der er vigtige til siden af siden, når det er nødvendigt.
I denne vejledning viser vi dig, hvordan du tilføjer klæbende opfordringer til handling til en blogindlægskabelon ved hjælp af Divi Theme Builder. Anvendelsen af dette layout er betydelig. Det fungerer på næsten enhver side eller enhver postskabelon. Plus, du behøver ikke at begrænse dig til CTA'er; du kan vælge at tilføje Divi-modul (er) efter eget valg.
Hvad du behøver for at komme i gang
For at begynde, skal du at installere og aktivere Divi-temaet . Sørg for, at du har den nyeste version af Divi.
Du har også brug for mindst en meddelelse oprettet med Divi Builder til test for at få vist det ønskede resultat.
Derefter er du klar til at forlade.
undersøgelse
Her er en hurtig oversigt over klistrede ACTs, der er føjet til en blogpostskabelon i Divi.
Sådan tilføjes faste opfordringer til handling i din blogindlægskabelon i Divi
Tilføjelse af skabelon til temabygger
Det første trin er at importere vores foruddefinerede skabelon på vores websted. Vi vil bruge Divi Theme Builder Pack # 1 publikationsskabelon.
For at komme i gang skal du navigere til Divi > Generator temaer. Klik på portabilitetsikonet øverst til højre på siden. I portabilitetsmodalen skal du vælge importfanen og vælge filen divi-theme-builder-pack-1-post-template.json fra mappen. Hvis du i øjeblikket har skabeloner installeret på dit websted, skal du sørge for at fjerne markeringen af alle muligheder, der kan overskrive dine nuværende skabeloner. Klik derefter på importknappen.
Opbyg skabelonen til blogindlæg
Når skabelonen er importeret, er vi klar til at tilføje vores nye CTA'er til sidepanelet, der er klæbrig til skabelonlayoutet. For at gøre dette skal du klikke på redigeringsikonet for det brugerdefinerede kropsområde.
Tilføjet dobbelt sidelinjelayout for at holde sidebar-CTA'er
Find den række, der indeholder modulet Udgiv, i Model Layout Editor. indhold og erstatte kolonnelayoutet med en en femtedel gange tre femtedele gange en femtedel (1/5 3/5 1/5) kolonnestruktur. Dette vil give os mulighed for at holde kolonnen centreret for indhold af posten, mens vi leverer to sektioner på hver side til vores klæbrige CTA'er.
Når du har ændret kolonnestrukturen, skal du trække indholdsudgivelsesmodulet til midtkolonnen.
Opdater linjeparametre
Åbn linjeindstillingerne, og opdater følgende designindstillinger:
- Brug en brugerdefineret tagrendebredde: YES
- Tagrendebredde: 2
- Bredde: 100% (desktop), 90% (tablet)
- Maksimal bredde: 1500px
Dette giver os det rum, vi har brug for til vores dobbelt sidepanelkonfiguration.
Opdater 1 kolonneindstillinger
Åbn derefter indstillingerne for 1-kolonne, og giv denne kolonne en tilpasset CSS-klasse:
- CSS klasse: sticky-cta
Tilføjelse af et CTA-sidebjælke til venstre kolonne
Vi er nu klar til den første opfordring til handling. Føj et opkald til handlingsmodulet i venstre kolonne.
Stil CTA Sidebar
Opdater indstillingerne som følger:
Indhold
- Knap: «Klik her»
- Body: “Dit indhold går her. Rediger eller slet denne tekst online eller i modulets indholdsindstillinger. ”
- URL til knapets link: #
Tekstdesign
- Body font: Montserrat
- Skriftvægt: semi-fed
- Tekst: Højre justering
- Tekstens kropsfarve: # 444444
- Størrelse på kropstekst: 22px (desktop), 18px (tablet)
- Kropshøjde: 1.3em
knap
- Knappen tekststørrelse: 14px
- Knappen tekstfarve: #ffffff
- Baggrundsfarve på knap: # 6148df
- Bredde på knapgrænsen: 0px
- Radius af knappen: 80px
- Skriftvægt: Fed
- Knap skrifttype: TT
- Polstring af knapper: 12px øverst, 12px i bunden, 22px til venstre, 22px til højre
Bredde, justering, polstring og kantsten
- Bredde: 100%
- Maksimal bredde: 320px
- Modulets justering: højre
- Polstring: 10px til venstre, 10px til højre
- Bredde på øverste kant: 10px
- Farve på øverste kant: #eeeeee
- Bredde på bundkanten: 10px
- Farve på den nederste kant: #eeeeee
Tilføjelse af CTA-sidepanelet i højre kolonne
For at oprette CTA for den højre kolonne skal du kopiere den, vi lige har oprettet, og indsætte den i kolonnen yderst til højre. Opdater derefter indstillingerne for duplikatet som følger:
- Justering af tekstlegemet: venstre
- Justering af modulet: venstre
Opdater 3-kolonneindstillingerne
For denne CTA i højre kolonne tilføjer vi en øvre margen til kolonnen for at etablere en startposition for CTA-sidepanelet på et nedre punkt på siden.
Start med at åbne parametrene for 3-kolonnen, og tilføj den samme CSS-klasse, som vi tilføjede til 1-kolonnen:
- CSS klasse: sticky-cta
Føj derefter følgende tilpassede CSS til hovedelementet:
kontor
margin-top: 50%
tablet
margin-top: 0%
Dette giver os et andet udgangspunkt for den klæbrige CTA i højre kolonne, som er 50% af rækkebredden. Du er velkommen til at justere denne værdi efter behov til dit eget blogindlæg.
Føj tilpasset CSS til skabelonen med et kodemodul
For at få vores "klæbrige" positionering til vores sidebar CTA'er er vi nødt til at tilføje tilpasset CSS. For at gøre dette skal du oprette et nyt kodemodul under indholdsudgivelsesmodulet (eller hvor som helst på siden).
Indsæt derefter følgende CSS i kodefeltet:
<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>
Den øverste forskydning i denne kode er en beregning, der placerer CTA lodret centreret på siden, når du ruller. 50vh er halvt så højt som browservinduet, og 130px er halvt så højt som CTA. Hvis din CTA er højere eller lavere, skal du justere 130 pixels op eller ned.
Gem indstillinger
Når du er færdig, skal du gemme skabelonets layout.
Og gem derefter indstillingerne for temabyggeren
Endelig resultat
Besøg en blogartikel ved hjælp af skabelonen for at se slutresultatet.
Og det er sådan, at klæbrige CTA'er forbliver fast på rulle. Du kan se, hvordan det fungerer bedst ved længere indhold.
endelige tanker
Disse klæbrige sideopfordringer til handling er et forfriskende alternativ til den traditionelle sidebjælke. De fungerer godt til minimalistisk design, fordi de er mindre påtrængende og ikke får indlægget til at føles rodet. Derudover kan du placere CTA lavere på siden, så den vises gradvist og klæber til rullen, hvilket gør den mere synlig for folk. besøgende. Og glem ikke. Du kan erstatte CTA'en med ethvert Divi-modul eller en kombination af moduler for at skabe næsten alt, hvad du ønsker. Du kan også vælge kun at beholde én CTA på den ene side. Det ser ud til at have mange applikationer.
