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.
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.
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.
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.
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
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
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.
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: #
Hoofdtekstontwerp
- Lichaamslettertype: Montserrat
- Lettergewicht: semi-vetgedrukt
- Hoofdtekst: Rechts uitlijnen
- De hoofdkleur van de tekst: # 444444
- Grootte hoofdtekst: 22px (desktop), 18px (tablet)
- Lichaamslengte: 1.3em
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
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
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
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%
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.
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).
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>
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.
En sla vervolgens de instellingen van de themabouwer op
Eindresultaat
Ga naar een blogartikel met behulp van de sjabloon om het eindresultaat te bekijken.
En zo blijven plakkerige CTA's bij het scrollen vastzitten. U kunt zien hoe het het beste zou werken voor langere inhoud.
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.