Gå til hovedindhold

Sådan tilføjes en genlukkelig glidende opfordring til handling på Divi

Divi: Det nemmeste WordPress tema at bruge

Divi: Det bedste WordPress tema hele tiden!

mere 901.000 downloads, Divi er det mest populære WordPress tema i verden. Den er komplet, nem at bruge og leveres med mere end 62 gratis skabeloner. [Anbefalet]

At have en opfordring til handling på dit websted er en af ​​de mindst påtrængende måder at få dine besøgende opmærksom på. Det meste af tiden ignorerer de bare CTA'en eller lukker den for at fortsætte med at gennemgå siden, men nogle gange tjener du dem. En slide-opfordring til handling fungerer godt til at promovere næsten alt på en destinationsside.

I denne vejledning skal vi designe en lukkende opfordring til handling, der kan føjes til ethvert hjørne af en side ved hjælp af Divi Theme Builder. Når du er færdig, vil du være i stand til at promovere dine produkter og tilbud overalt 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.

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

Oprettelse af afsnittet med publikationsindhold

Afsnittet om indlægsindhold er en nødvendig del af en hvilken som helst sideskabelon for at få vist det faktiske indhold på siden eller indlægget indlejret i Divi eller WordPress. Vi tilføjer det til vores model, inden vi opretter vores første opfordring til handling, der skal indsættes.

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

Føj derefter et modul til publiceringsindhold 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.

Opret nemt dit websted med Elementor

Elementor giver dig mulighed for nemt at oprette ethvert webstedsdesign med et professionelt look. Stop med at betale dyre for hvad du selv kan gøre. [Gratis]

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;

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

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.

Leder du efter de bedste WordPress-temaer og plugins?

Download de bedste plugins og WordPress-temaer på Envato og nemt oprette dit websted. Allerede mere end 49.720.000 downloads. [EXCLUSIVE]

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.

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.

Opret nemt din online butik

Download gratis WooCommerce, de bedste e-handels-plugins til at sælge dine fysiske og digitale produkter på WordPress. [Anbefalet]

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. 

Denne artikel indeholder 1 kommentar

  1. Fantastisk, denne artikel! Dette er præcis hvad jeg leder efter!
    Merci beaucoup.

    Lille datterspørgsmål, er det muligt, at denne CTA kun åbnes automatisk et bestemt sted, når du ruller på siden?

    God dag!

Skriv en kommentar

Din e-mail-adresse vil ikke blive offentliggjort. Påkrævede felter er markeret med *

Dette websted bruger Akismet til at reducere uønskede. Få flere oplysninger om, hvordan dine kommentarer data bruges.

Tilbage til toppen
4 aktier
andel4
tweet
Tilmeld