Het hebben van een call-to-action op uw site is een van de minst opdringerige manieren om de aandacht van uw site te trekken bezoekers. Meestal negeren ze de CTA gewoon of sluiten ze deze om verder te bladeren op de pagina, maar soms zul je ze voor je winnen. Een call-to-action-dia werkt prima bevorderen zo ongeveer alles op een landingspagina.
In deze tutorial ontwerpen we een afsluitbare call-to-action die met Divi Theme Builder aan elke hoek van een pagina kan worden toegevoegd. Zodra dit is gebeurd, heeft u de mogelijkheid om dit te doen bevorderen uw producten en speciale aanbiedingen overal op de pagina zonder dat u een plug-in hoeft te gebruiken.
Laten we beginnen!
overzicht
Hier is een korte blik op de vier ingevoegde CTA's die we zullen toevoegen aan de vier hoeken van de paginasjabloon. U hoeft ze natuurlijk niet alle vier tegelijk in te zetten. Merk op hoe elk kan worden gesloten door op het "x" -pictogram te klikken, dan kunt u ervoor kiezen om de CTA opnieuw in te schakelen door op het "plus" -pictogram te klikken.
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 laatste versie van Divi heeft.
U hebt ook ten minste één pagina nodig die met Divi Builder is gemaakt voor testdoeleinden om de nieuwe sjabloon aan deze pagina toe te wijzen om het resultaat weer te geven.
Creëren van een glijdende call-to-action, met een paginasjabloon in Divi
Creatie van een nieuw model
Ga vanuit het WordPress-dashboard naar Divi> Themagenerator. Klik vervolgens op het vak "Een nieuwe sjabloon toevoegen" om een nieuwe sjabloon te maken.
Wijs de sjabloon toe aan de pagina of pagina's waarop u de promotiebalk wilt weergeven.
Op het nieuwe model, klik op het gebied "Een aangepaste body toevoegen" en selecteer vervolgens "Een aangepaste body maken".
Selecteer vervolgens de optie "Build From Scratch".
Creatie van het publicatie-inhoudsgedeelte
Gedeelte van inhoud post is een noodzakelijk onderdeel van elke paginasjabloon om de inhoud echte pagina of bericht ingebed in Divi of WordPress. We voegen dit toe aan onze sjabloon voordat we onze eerste call-to-action maken om in te voegen.
Voeg een rij toe aan een kolom
Voeg om te beginnen een rij met een kolom toe aan de normale sectie.
Voeg een publicatie-inhoudsmodule toe
Voeg dan een module toe inhoud publicatie op de lijn.
Lijn instellingen
Werk daarna de lijnparameters als volgt bij:
- Breedte: 100%
- Max breedte: 100%
- Vulling: 0 px hoog, 0 px laag
De call-to-action creëren linksboven
Nu we onze module voor berichtinhoud hebben geïnstalleerd, zijn we klaar om onze eerste call-to-action toe te voegen in de linkerbovenhoek van de paginasjabloon.
Voeg een sectie toe
Elke nieuwe call-to-action wordt gemaakt met een geheel nieuwe sectie. Hiermee kunt u elke lay-out of module toevoegen die nodig is om de call-to-action te ontwerpen.
Voeg een nieuw normaal gedeelte toe aan de sjabloonlay-out.
Voeg een rij toe aan een kolom
Geef de sectie vervolgens een rij van een kolom.
Sectie-instellingen
Sleep (of verplaats) het gedeelte boven het gedeelte met berichtinhoud en werk de sectie-instellingen als volgt bij:
- Linkerkleur achtergrondverloop:
- Achtergrondverloop rechts:
- Geef het verloop boven de afbeelding weer: JA
- Achtergrondafbeelding: [voeg afbeelding in]
- Breedte: 320px
- Marge: 320 px over
- Vulling: 0 px hoog, 0 px laag
- Animatiestijl: dia
- Animatierichting: rechts
- Animatievertraging: 2000 ms
Spring dan naar het geavanceerde tabblad en voeg de volgende CSS-klasse en Z-index toe:
- CSS-klasse: slide-in-cta
- Z Index: 999
En voeg het aangepaste CSS-fragment toe volgens het hoofdelement:
position: fixed;top: 80px;left: -320px;
De CSS-klasse is nodig zodat we de sectie later met code kunnen targeten. Aangepaste CSS plaatst het gedeelte linksboven van de paginasjabloon op een vaste (of plakkerige) positie. De positie "links: -320 pixels" zou de hele sectie (die 320 pixels breed is) buiten het browservenster moeten verplaatsen (dus buiten ons zicht). Maar we hebben de linkermarge van 320 pixels om het weer zichtbaar te maken. De reden dat het op deze manier is geconstrueerd, is dat we de margewaarde kunnen in- of uitschakelen wanneer u op het "x" -pictogram klikt. Hierdoor schuift de CTA in en uit het zicht.
Lijn instellingen
Werk nu de lijnparameters als volgt bij:
- Gebruik een aangepaste gootbreedte: JA
- Dakgootbreedte: 1
- Breedte: 100%
- Vulling: 0 px hoog, 0 px laag
Voeg een call-to-action-module toe
Voeg binnen de rij een Call-to-Action-module toe.
Call-to-action-instellingen
Werk vervolgens de instellingen voor call-to-action bij.
Inhoud
- Titel: [voer de tekst van uw keuze in]
- Knop: [voer de tekst van uw keuze in]
- Hoofdgedeelte: [voer de tekst van uw keuze in]
- Knoplink-URL: [voer werkelijke URL in of #]
Verwijder vervolgens de standaard achtergrondkleur om de achtergrond weer te geven van de sectie die we eerder hebben toegevoegd.
Ontwerpparameters (tekst, knop en opvulling)
Werk op het tabblad Ontwerp het volgende bij:
- Titellettertype: Lato
- Titel lettertype Gewicht: zwaar
- Hoogte van de titellijn: 1,3 em
- Lichaamspolitie: Lato
- Gewicht lettertype lichaam: vetgedrukt
- Gebruik aangepaste stijlen voor de knop: JA
- Knoptekstgrootte: 15px
- Knoprandbreedte: 0 px
- Afstand tussen knopletters: 1 px
- Knooplettertype: Lato
- Gewicht lettertype knop: zwaar
- Knopletterstijl: TT
- Knopvulling: 12 pixels bovenaan, 12 pixels onderaan, 32 pixels links, 32 pixels rechts
- opvulling: 40 pixels bovenaan, 40 pixels onderaan, 40 pixels links, 40 pixels rechts
Voeg een pictogram voor openen en sluiten toe met een Blurb-module
Zodra de oproep tot actie is voltooid, moeten we de pictogramknop maken die wordt gebruikt om de glijdende oproep tot actie te openen en te sluiten. Om dit te maken, voegt u een blurb-module toe onder de call-to-action-module.
Instellingen voor presentatietekst
Werk de volgende ontwerpparameters bij.
Inhoud
- standaardtitel en hoofdtekst verwijderen
- Gebruik het pictogram: JA
- Icoon: meer (zie screenshot)
Ontwerpfase
- Pictogramkleur: # 000000
- Gebruik de lettergrootte van het pictogram: JA
- Lettergrootte pictogram: 40 pixels
- Breedte: 40px
- Hoogte: 40px
- Afgeronde hoeken: 50%
- Transformeren Z-as rotatie: 135 graden
Geavanceerde instellingen
Voeg op het tabblad Geavanceerd de volgende CSS-klasse toe:
- CSS-klasse: slide-in_target
Voeg vervolgens deze aangepaste CSS toe aan het hoofdelement.
position: absolute;bottom: 0px;right: -40px;
Voeg de volgende aangepaste CSS toe aan de Blurb-afbeelding.
margin-bottom: 0px;
Resultaat
Hier is het resultaat tot nu toe.
Houd er rekening mee dat we nog steeds code moeten toevoegen om de functie voor sluiten en openen toe te voegen wanneer u op het pictogram "x" klikt. We zullen de code toevoegen nadat we een oproep tot actie hebben gemaakt in elk van de vier hoeken van het model.
Creëren van de call-to-action rechtsboven
Met de eerste ingebouwde call-to-action kunnen we het proces van het maken van de rest van de CTA's versnellen door de reeds gemaakte sectie te dupliceren. Vervolgens gaan we een dia-call-to-action maken voor de rechterbovenhoek.
Dubbele sectie
Implementeer de wireframe-weergavemodus en dupliceer vervolgens het CTA-gedeelte linksboven.
Sectie-instellingen bijwerken
Werk vervolgens de nieuwe sectieparameters als volgt bij:
- marge: 320 px rechts
- animatierichting: links
Werk vervolgens de aangepaste CSS in het hoofdelement bij door "left" te vervangen door "right". Hier is het volledige fragment:
position: fixed;top: 80px;right: -320px;
Werk de parameters van de Blurb-module bij
Open vervolgens de instellingen van de Blurb-module en werk het aangepaste CSS-fragment in het hoofdelement bij door "rechts" te vervangen door "links". Hier is het volledige fragment:
position: absolute;bottom: 0px;left: -40px;
Resultaat
U ziet nu een call-to-action als een dia rechtsboven in het paginasjabloon.
Voer dezelfde handelingen uit voor de rest van de secties "Rechtsonder" en "Linksonder". U moet ook de CSS-code voor elk van de modules aanpassen om een resultaat te krijgen dat lijkt op het volgende.
Aangepaste jQuery- en CSS-fragmenten toevoegen met behulp van een codemodule
Voor de laatste stap moeten we wat aangepaste jQuery en CSS toevoegen, zodat we de functionaliteit kunnen krijgen om elk van de dia-CTA's te openen en te sluiten.
Voeg een codemodule toe
Voeg een codemodule toe aan een van de secties van de presentatie.
Plak de code
Open vervolgens de code-instellingen en plak de volgende code in het codegebied.
<style>.slide-in-cta, .slide-in_target, .slide-in-toggle-active {transition: all 400ms ease-in-out;} .slide-in-toggle-active {margin: 0px 0px 0px 0px !important;}.slide-in-toggle-active .slide-in_target {transform: none !important;background: rgba(0,0,0,0.2);} .slide-in_target {cursor: pointer;}</style><script>(function($) {$(document).ready(function(){$('.slide-in_target').click(function(){$(event.target).closest('.slide-in-cta').toggleClass('slide-in-toggle-active'); }); });})( jQuery ); </script>
Final gedachten
Met Divi is het helemaal niet moeilijk om een oproep tot actie te creëren. En aangezien u de themabouwer kunt gebruiken om een call-to-action aan een paginasjabloon toe te voegen, heeft u meer controle over welke pagina's die CTA's weergeven.
Geweldig, dit artikel! Dit is precies wat ik zoek!
Heel erg bedankt.
Kleine ondergeschikte vraag, is het mogelijk dat deze CTA alleen automatisch op een bepaalde plaats opent bij het scrollen op de pagina?
Goede dag!