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.

oproep tot actie deel 1

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.

Maak een paginasjabloon

Wijs de sjabloon toe aan de pagina of pagina's waarop u de promotiebalk wilt weergeven.

Wijs een paginasjabloon toe aan pagina's

Op het nieuwe model, klik op het gebied "Een aangepaste body toevoegen" en selecteer vervolgens "Een aangepaste body maken".

Voeg een aangepaste body toe

Selecteer vervolgens de optie "Build From Scratch".

Bouwen vanaf nul

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.

Enkele lijnsectie

Voeg een publicatie-inhoudsmodule toe

Voeg dan een module toe inhoud publicatie op de lijn.

Item inhoud

Lijn instellingen

Werk daarna de lijnparameters als volgt bij:

  • Breedte: 100%
  • Max breedte: 100%
  • Vulling: 0 px hoog, 0 px laag
Divi line configuratie

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.

Selectie van een nieuwe divi-sectie

Voeg een rij toe aan een kolom

Geef de sectie vervolgens een rij van een kolom.

Kies een divi-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;

Sectie aanpassen

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

Voeg een call-to-action-module toe

Voeg binnen de rij een Call-to-Action-module toe.

Voeg 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 #]
Pas het aanbod van de divi-module aan

Verwijder vervolgens de standaard achtergrondkleur om de achtergrond weer te geven van de sectie die we eerder hebben toegevoegd.

Achtergrondkleur verwijderen
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
Pas de call-to-action-divisie van de lettertypemodule aan

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.

Divi-tooltip-module

Instellingen voor presentatietekst

Werk de volgende ontwerpparameters bij.

Inhoud
  • standaardtitel en hoofdtekst verwijderen
  • Gebruik het pictogram: JA
  • Icoon: meer (zie screenshot)
Voeg een divi-pictogram toe
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
Pas een divi-pictogram aan
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;

Pas de stijl css divi-module aan

Resultaat

Hier is het resultaat tot nu toe.

Resultaat nu behaald

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.

Maak dubbele divi secties

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;

Wijzig de uitlijning van de divi-sectie

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;

Voeg een divi-code toe

Resultaat

U ziet nu een call-to-action als een dia rechtsboven in het paginasjabloon.

Schuifregelaar rechtsboven

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.

Eindresultaat divi

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.

Voeg een js divi-code toe

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>

Voeg jQuery-code toe

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.