At have en opfordring til handling på dit websted er en af ​​de mindst påtrængende måder at fange din opmærksomhed besøgende. Det meste af tiden vil de bare ignorere CTA'en eller lukke den for at fortsætte med at browse på siden, men nogle gange vil du vinde dem. En opfordring til handling-dias vil fungere godt til fremme næsten alt på en landingsside.

I denne vejledning vil vi designe en opfordring til handling, der kan lukkes, som kan tilføjes til ethvert hjørne af en side ved hjælp af Divi Theme Builder. Når dette er gjort, vil du have mulighed for at fremme dine produkter og specialtilbud hvor som helst på siden uden at skulle bruge et plugin.

Lad os starte!

undersøgelse

Her er et hurtigt kig på de fire indsatte CTA'er, som vi tilføjer til de fire hjørner af sideskabelonen. Selvfølgelig behøver du ikke implementere alle fire på samme tid. Læg mærke til, hvordan hver enkelt kan lukkes ved at klikke på "x" -ikonet, så kan du vælge at genaktivere CTA ved at klikke på "plus" -ikonet.

opfordring til handling divi 1

Hvad du behøver for at komme i gang

For at komme i gang skal du gøre det at installere og aktivere Divi-temaet . Sørg for, at du har den nyeste version af Divi.

Du skal også have mindst en side oprettet med Divi Builder til testformål for at tildele den nye skabelon til denne side for at vise resultatet.

Oprettelse af en glidende opfordring til handling med en sideskabelon i Divi

Oprettelse af en ny model

Fra WordPress-dashboardet skal du gå til Divi> Tema-generator. Klik derefter på feltet "Tilføj en ny skabelon" for at oprette en ny skabelon.

Opret en sideskabelon

Tildel skabelonen til den eller de sider, som du vil vise reklamebjælken på.

Tildel sider til en sideskabelon

På den nye model skal du klikke på området "Tilføj en brugerdefineret krop" og derefter vælge "Opret en tilpasset krop".

Tilføj tilpasset krop

Vælg derefter indstillingen "Byg fra bunden".

Bygger fra bunden

Oprettelse af afsnittet med publikationsindhold

Afsnittet af indhold indlæg er en nødvendig del af enhver sideskabelon for at vise indhold ægte side eller indlæg indlejret i Divi eller WordPress. Vi tilføjer dette til vores skabelon, før vi opretter vores første opfordring til handling at indsætte.

Føj en række til en kolonne

For at begynde skal du tilføje en række af en kolonne til det almindelige afsnit.

Enkelt linjesektion

Tilføj et udgivelsesindholdsmodul

Tilføj derefter et modul indhold udgivelse til linjen.

Varens indhold

Linieindstillinger

Efter denne opdatering af linjeparametrene som følger:

  • Bredde: 100%
  • Maks bredde: 100%
  • Polstring: 0px høj, 0px lav
Divi line konfiguration

Oprettelse af opfordringen til handling øverst til venstre

Nu hvor vi har vores indlægsmodul på plads, er vi klar til at begynde at tilføje vores første opfordring til handling, der skal indsættes i øverste venstre hjørne af sideskabelonen.

Tilføj et afsnit

Hver nye opfordring til handling oprettes med en helt ny sektion. Dette giver dig mulighed for at tilføje ethvert layout eller modul, der er nødvendigt for at designe opfordringen til handling.

Føj et nyt regelmæssigt afsnit til skabelonlayoutet.

Valg af en ny divisektion

Føj en række til en kolonne

Giv derefter sektionen en række af en kolonne.

Vælg en divikolonne

Sektionsindstillinger

Træk (eller flyt) sektionen over indholdet af indhold, og opdater sektionsindstillingerne som følger:

  • Venstre farve baggrundsgradient:
  • Højre baggrundshældning:
  • Vis gradienten over billedet: YES
  • Baggrundsbillede: [indsæt billede]
  • Bredde: 320px
  • Marginal: 320px tilbage
  • Polstring: 0px høj, 0px lav
  • Animationsstil: Slide
  • Animationsretning: højre
  • Animationsforsinkelse: 2000 ms

Spring så til den avancerede fane, og tilføj følgende CSS-klasse og Z-indeks:

  • CSS-klasse: slide-in-cta
  • Z-indeks: 999

Og tilføj det tilpassede CSS-uddrag efter hovedelementet:

position: fixed;top: 80px;left: -320px;

Tilpas sektion

CSS-klassen er nødvendig, så vi senere kan målrette mod sektionen med kode. Brugerdefineret CSS placerer det øverste venstre afsnit af sideskabelonen i en fast (eller klæbrig) position. Positionen "venstre: -320 pixels" skal flytte hele sektionen (som er 320 pixels bred) uden for browservinduet (derfor uden for vores synspunkt). Men vi har den venstre margen på 320 pixels for at bringe den tilbage til visning. Årsagen til, at den er konstrueret på denne måde, er, at vi kan slå margenværdien til eller fra, når du klikker på "x" -ikonet. Dette får CTA til at glide ind og ude af syne.

Linieindstillinger

Opdater nu linjeparametrene som følger:

  • Brug en brugerdefineret tagrendebredde: YES
  • Tagrendebredde: 1
  • Bredde: 100%
  • Polstring: 0px høj, 0px lav
Divi line parameter

Tilføj et opfordring til handlingsmodul

Inde i rækken skal du tilføje et Call to Action-modul.

Tilføj opfordring til handlingsmodul

Indstillinger for opfordring til handling

Opdater derefter indstillingerne for opfordring til handling.

Indhold
  • Titel: [indtast den valgte tekst]
  • Knap: [indtast den valgte tekst]
  • Body: [indtast den valgte tekst]
  • Knaplink URL: [indtast faktisk URL eller #]
Tilpas divi-modulet

Fjern derefter standardbaggrundsfarven for at afsløre baggrunden for det afsnit, vi tilføjede tidligere.

Fjern baggrundsfarve
Designparametre (tekst, knap og udfyld)

Opdater følgende på fanen Design:

  • Titeltype: Lato
  • Titel Skriftvægt: Tung
  • Titelinjehøjde: 1,3 em
  • Body Police: Lato
  • Vægt på kropsskrift: fed
  • Brug brugerdefinerede stilarter til knappen: JA
  • Knappen tekststørrelse: 15px
  • Knapkantbredde: 0px
  • Afstand mellem knapbogstaver: 1px
  • Knappen skrifttype: Lato
  • Knappens fontvægt: tung
  • Knap skrifttype: TT
  • Knapepolstring: 12 pixels øverst, 12 pixels i bunden, 32 pixels til venstre, 32 pixels til højre
  • polstring: 40 pixels øverst, 40 pixels i bunden, 40 pixels til venstre, 40 pixels til højre
Tilpas fontmodul opfordring til handling divi

Tilføj et åbent og luk ikon med et Blurb-modul

Når opfordringen til handling er færdig, skal vi oprette ikonknappen, der bruges til at åbne og lukke den glidende opfordring til handling. For at oprette dette skal du tilføje et blurb-modul under call to action-modulet.

Divi boble info modul

Præsentationstekstindstillinger

Opdater følgende designparametre.

Indhold
  • fjern standardtitel og brødtekst
  • Brug ikonet: JA
  • Ikon: mere (se skærmbillede)
Tilføj et divi-ikon
Conception
  • Ikonfarve: # 000000
  • Brug ikonets skriftstørrelse: JA
  • Ikonets skriftstørrelse: 40 pixels
  • Bredde: 40px
  • Højde: 40px
  • Rundede hjørner: 50%
  • Transformer Z-aksens rotation: 135 grader
Tilpas et divi-ikon
Avancerede indstillinger

Under den avancerede fane skal du tilføje følgende CSS-klasse:

  • CSS-klasse: slide-in_target

Føj derefter denne brugerdefinerede CSS til hovedelementet.

position: absolute;bottom: 0px;right: -40px;

Føj følgende tilpassede CSS til Blurb-billedet.

margin-bottom: 0px;

Tilpas stil css modul divi

Resultat

Her er resultatet hidtil.

Resultat opnået nu

Husk, at vi stadig har brug for at tilføje noget kode for at tilføje tæt og åben funktionalitet, når du klikker på "x" -ikonet. Vi tilføjer koden efter oprettelse af en opfordring til handling i hvert af de fire hjørner af modellen.

Oprettelse af opfordringen til handling øverst til højre

Med den første indbyggede opfordring til handling kan vi fremskynde processen med at oprette resten af ​​CTA'erne ved at duplikere den allerede oprettede sektion. Dernæst opretter vi et diasopfordring til handling i øverste højre hjørne.

Dupliceret sektion

Implementér wireframe-visningstilstand, og dupliker derefter CTA-sektionen øverst til venstre.

Opret dobbelte divi-sektioner

Opdater sektionsindstillinger

Opdater derefter de nye sektionsparametre som følger:

  • margin: 320px højre
  • animationsretning: venstre

Opdater derefter den brugerdefinerede CSS i hovedelementet ved at erstatte "venstre" med "højre". Her er det fulde uddrag:

position: fixed;top: 80px;right: -320px;

Rediger justering af divisionssektion

Opdater parametrene for Blurb-modulet

Derefter skal du åbne indstillingerne for Blurb-modulet og opdatere det tilpassede CSS-uddrag i hovedelementet ved at erstatte "højre" med "venstre". Her er det fulde uddrag:

position: absolute;bottom: 0px;left: -40px;

Tilføj en divi-kode

Resultat

Du vil nu se et opfordring til handling som et dias øverst til højre på sideskabelonen.

Skyder øverst til højre

Udfør de samme handlinger for resten af ​​afsnittene "Nedre højre", "Nedre venstre". Du bliver også nødt til at justere CSS-koden for hvert af modulerne for at få et resultat svarende til det følgende.

Slutresultat divi

Tilføjelse af brugerdefinerede jQuery- og CSS-uddrag ved hjælp af et kodemodul

For det sidste trin skal vi tilføje nogle brugerdefinerede jQuery og CSS, så vi kan få funktionaliteten til at åbne og lukke hver af dias-CTA'erne.

Tilføj et kodemodul

Føj et kodemodul til en af ​​sektionerne i præsentationen.

Tilføj en js divi-kode

Indsæt koden

Åbn derefter kodeindstillingerne, og indsæt følgende kode i kodeområdet.

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

Tilføj jquery-kode

endelige tanker

Med Divi er det slet ikke svært at oprette en opfordring til handling. Og da du kan bruge temabyggeren til at føje en opfordring til handling til en sideskabelon, har du mere kontrol over, hvilke sider der viser disse CTA'er.