Sticky sidebars zijn uiterst effectief in het trekken van de aandacht van bezoekers zonder opdringerig of afleidend te zijn. De truc is om een ​​of twee elementen in de zijbalk op te nemen die “zichtbaar blijven” of vastzitten aan de zijkant van de zijbalk inhoud van het bericht wanneer de gebruiker door de pagina scrollt. Dit is een verfrissend alternatief voor de traditionele lay-out van de zijbalk, omdat het de indruk wekt van een moderne lay-out over de volledige breedte (zonder zijbalk), met het voordeel dat belangrijke call-to-actions aan de zijkant van de pagina worden weergegeven wanneer dat nodig is.

In deze zelfstudie laten we u zien hoe u met Divi Theme Builder sticky call-to-action toevoegt aan een blogpostsjabloon. De toepassing van deze lay-out is aanzienlijk. Het werkt voor bijna elke pagina of elk berichtsjabloon. Bovendien hoeft u zich niet te beperken tot CTA's; u kunt ervoor kiezen om de Divi-module (s) van uw keuze toe te voegen.

Wat je nodig hebt om te beginnen

Om te beginnen, moet je om het Divi-thema te installeren en activeren . Zorg ervoor dat u de nieuwste versie van Divi heeft.

U hebt ook minstens één bericht nodig dat met Divi Builder is gemaakt om te testen om het gewenste resultaat weer te geven.

Daarna ben je klaar om te vertrekken.

overzicht

Hier is een snel overzicht van plakkerige ACT's die zijn toegevoegd aan een blogpostsjabloon in Divi.

Voeg divi kleverige zijbalken toe

Hoe u vaste call-to-action toevoegt aan uw blogpostsjabloon in Divi

De sjabloon voor het maken van thema's toevoegen

De eerste stap is om onze voorgedefinieerde sjabloon op onze site te importeren. We gaan de publicatiesjabloon Divi Theme Builder Pack # 1 gebruiken.

Navigeer om te beginnen naar Divi > Generator thema's. Klik op het draagbaarheidspictogram rechtsboven op de pagina. Selecteer in de portabiliteitsmodaliteit het tabblad Importeren en kies het bestand divi-theme-builder-pack-1-post-template.json uit de map. Als je momenteel sjablonen op je site hebt geïnstalleerd, zorg er dan voor dat je alle opties uitvinkt die je huidige sjablonen kunnen overschrijven. Klik vervolgens op de importknop.

Importeer een divi-indeling

Bouw de blogpostsjabloon

Zodra de sjabloon is geïmporteerd, zijn we klaar om onze nieuwe CTA's toe te voegen aan de zijbalk die vastzit aan de sjabloonlay-out. Om dit te doen, klikt u op het bewerkingspictogram voor het aangepaste lichaamsgebied.

Voeg een aangepaste divi-tekst toe

Dubbele zijbalklay-out toegevoegd om zijbalk-CTA's vast te houden

Zoek in de Model Layout Editor de rij met de publicatiemodule. inhoud en vervang de kolomindeling door een kolomstructuur van een vijfde bij drie vijfde bij een vijfde (1/5 3/5 1/5). Hierdoor kunnen we de kolom gecentreerd houden voor de inhoud van de post, terwijl er aan weerszijden twee secties zijn voor onze sticky CTA's.

Voeg een divi-indeling toe

Nadat u de kolomstructuur hebt gewijzigd, sleept u de inhoudpublicatiemodule naar de middelste kolom.

Werk lijnparameters bij

Open de lijninstellingen en update de volgende ontwerpopties:

  • Gebruik een aangepaste gootbreedte: JA
  • Dakgootbreedte: 2
  • Breedte: 100% (desktop), 90% (tablet)
  • Maximale breedte: 1500px
Voeg een fix divi-sectie toe

Dit geeft ons de ruimte die we nodig hebben voor onze dubbele zijbalkconfiguratie.

Update 1 kolominstellingen

Open vervolgens de 1-kolominstellingen en geef deze kolom een ​​aangepaste CSS-klasse:

  • CSS-klasse: sticky-cta
Pas kolom 1 CSS divi

Een CTA-zijbalk toevoegen aan de linkerkolom

We zijn nu klaar voor de eerste call-to-action. Voeg een oproep toe aan de actiemodule in de linkerkolom.

Voeg een call-to-action-module toe

Stileer de CTA-zijbalk

Werk de instellingen als volgt bij:

Inhoud
  • Knop: «Klik hier»
  • Body: “Uw inhoud komt hier. Bewerk of verwijder deze tekst online of in de inhoudsinstellingen van de module. "
  • URL van de link van de knop: #
Pas de call-to-action-module aan
Hoofdtekstontwerp
  • Lichaamslettertype: Montserrat
  • Lettergewicht: semi-vetgedrukt
  • Hoofdtekst: Rechts uitlijnen
  • De hoofdkleur van de tekst: # 444444
  • Grootte hoofdtekst: 22px (desktop), 18px (tablet)
  • Lichaamslengte: 1.3em
CTA-panty
knoop
  • Knoptekstgrootte: 14px
  • Knoptekstkleur: #ffffff
  • Achtergrondkleur knop: # 6148df
  • Breedte van de knoprand: 0px
  • Straal van de knop: 80px
  • Lettergewicht: vetgedrukt
  • Knopletterstijl: TT
  • Opvulling van knoppen: 12px bovenaan, 12px onderaan, 22px links, 22px rechts
Divi module sectie
Breedte, uitlijning, opvulling en stoepranden
  • Breedte: 100%
  • Maximale breedte: 320px
  • Uitlijning van de module: rechts
  • Vulling: 10px links, 10px rechts
  • Breedte van de bovenrand: 10px
  • Kleur van de bovenste rand: #eeeeee
  • Breedte van de onderste rand: 10px
  • Kleur van de onderste rand: #eeeeee
Divi call-to-action-configuratie

De CTA-zijbalk toevoegen aan de rechterkolom

Om de CTA voor de rechterkolom te maken, kopieert u degene die we zojuist hebben gemaakt en plakt u deze in de meest rechtse kolom. Werk vervolgens de instellingen voor het duplicaat als volgt bij:

  • Uitlijning van de hoofdtekst: links
  • Uitlijning van de module: links
Voeg ct a toe aan de rechterkant

Werk de 3-kolominstellingen bij

Voor deze CTA in de rechterkolom voegen we een bovenste marge aan de kolom toe om een ​​startpositie van de CTA-zijbalk op een lager punt van de pagina te bepalen.

Begin met het openen van de parameters van de 3-kolom en voeg dezelfde CSS-klasse toe die we aan de 1-kolom hebben toegevoegd:

  • CSS-klasse: sticky-cta

Voeg vervolgens de volgende aangepaste CSS toe aan het hoofdelement:

Bureau

margin-top: 50%

tablet

margin-top: 0%

Pas de stijl van de divi-kolom aan

Dit geeft ons een ander startpunt voor de plakkerige CTA in de rechterkolom, die 50% van de rijbreedte is. Voel je vrij om deze waarde zo nodig aan te passen voor je eigen blogpost.

Dupliceer een cta divi-module

Voeg aangepaste CSS toe aan sjabloon met een codemodule

Om onze "plakkerige" positionering voor onze zijbalk-CTA's te krijgen, moeten we aangepaste CSS toevoegen. Maak hiervoor een nieuwe codemodule aan onder de module voor het publiceren van inhoud (of ergens op de pagina).

Plaats een module van het type divi-code

Plak vervolgens de volgende CSS in het codevak:

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

Parametercode van de Divi-module

De bovenste offset in deze code is een berekening die de CTA verticaal gecentreerd op de pagina positioneert tijdens het scrollen. De 50vh is de helft van de hoogte van het browservenster en de 130px is de helft van de hoogte van de CTA. Als uw CTA hoger of lager is, moet u de 130 pixels omhoog of omlaag aanpassen.

Instellingen opslaan

Sla de lay-out van de sjabloon op als u klaar bent.

Sla de parameters van de cta divi-module op

En sla vervolgens de instellingen van de themabouwer op

Sla theme builder divi

Eindresultaat

Ga naar een blogartikel met behulp van de sjabloon om het eindresultaat te bekijken.

CTA-panty

En zo blijven plakkerige CTA's bij het scrollen vastzitten. U kunt zien hoe het het beste zou werken voor langere inhoud.

Animatie cta divi

Final gedachten

Deze plakkerige oproepen tot actie zijn een verfrissend alternatief voor de traditionele zijbalk. Ze werken goed voor een minimalistisch ontwerp omdat ze minder opdringerig zijn en de post niet rommelig maken. Bovendien kunt u de CTA lager op de pagina plaatsen, zodat deze geleidelijk verschijnt en aan de scroll blijft plakken, waardoor deze beter zichtbaar wordt voor mensen. bezoekers. En vergeet niet. U kunt de CTA vervangen door elke Divi-module of combinatie van modules om zo ongeveer alles te creëren wat u maar wilt. Je kunt er ook voor kiezen om slechts één CTA aan één kant te houden. Het lijkt veel toepassingen te hebben.