Å ha en oppfordring til handling på nettstedet ditt er en av de minst påtrengende måtene å fange oppmerksomheten til Besøkende. Mesteparten av tiden vil de bare ignorere CTA eller lukke den for å fortsette å surfe på siden, men noen ganger vil du vinne dem. En oppfordring til handling-lysbilde vil fungere utmerket for fremme omtrent alt på en landingsside.

I denne opplæringen vil vi utforme en lukkbar handlingsfremmende oppfordring som kan legges til ethvert hjørne av en side ved hjelp av Divi Theme Builder. Når dette er gjort, vil du ha muligheten til å fremme dine produkter og spesialtilbud hvor som helst på siden uten å måtte bruke en plugin.

La oss begynne!

undersøkelsen

Her ser du raskt på de fire innsatte CTA-ene som vi legger til i de fire hjørnene på sidemalen. Selvfølgelig trenger du ikke distribuere alle fire samtidig. Legg merke til hvordan hver kan lukkes ved å klikke på "x" -ikonet, så kan du velge å aktivere CTA på nytt ved å klikke på "pluss" -ikonet.

Hva du trenger for å komme i gang

For å komme i gang, må du gjøre det å installere og aktivere Divi-temaet . Forsikre deg om at du har den nyeste versjonen av Divi.

Du trenger også minst én side opprettet med Divi Builder for testformål for å tilordne den nye malen til denne siden for å vise resultatet.

Opprettelse av en glidende oppfordring til handling, med en sidemal i Divi

Opprettelse av en ny modell

Gå til WordPress-dashbordet, gå til Divi> Temegenerator. Klikk deretter på "Legg til en ny mal" for å opprette en ny mal.

Tildel malen til siden eller sidene du vil vise salgsfremmende felt.

På den nye modellen klikker du på "Legg til en egendefinert kropp" og deretter velger du "Opprett en tilpasset kropp".

Velg deretter alternativet "Bygg fra riper".

Opprettelse av seksjonen for publikasjonsinnhold

Seksjonen av innhold innlegg er en nødvendig del av enhver sidemal for å vise innhold ekte side eller innlegg innebygd i Divi eller WordPress. Vi legger dette til i malen vår før vi oppretter vår første handlingsfremmende oppfordring til å sette inn.

Legg til en rad i en kolonne

For å begynne, legger du til en rad med en kolonne i den vanlige delen.

Legg til en modul for publiseringsinnhold

Legg deretter til en modul innhold publisering til linjen.

Linjeinnstillinger

Etter det oppdaterer linjeparametrene som følger:

• Bredde: 100%
• Maks bredde: 100%
• Polstring: 0px høy, 0px lav

Opprette handlingsfremmende oppe til venstre

Nå som vi har innleggsmodulen vår på plass, er vi klare til å begynne å legge til vår første handlingsfremmende oppfordring for å sette inn øverst til venstre på sidemalen.

Legg til en seksjon

Hver nye oppfordring til handling vil bli opprettet med en helt ny seksjon. Dette vil tillate deg å legge til en hvilken som helst layout eller modul som trengs for å utforme oppfordringen til handling.

Legg til en ny vanlig seksjon i maloppsettet.

Legg til en rad i en kolonne

Gi deretter seksjonen en rad med en kolonne.

Seksjonsinnstillinger

Dra (eller flytt) delen over innholdet i innlegget, og oppdater seksjonsinnstillingene som følger:

• Venstre bakgrunnsgradient i farge:
• Høyre bakgrunnsgradient:
• Vis gradienten over bildet: YES
• Bakgrunnsbilde: [sett inn bilde]
• Bredde: 320px
• Marginen: 320px igjen
• Polstring: 0px høy, 0px lav
• Animasjonsstil: Lysbilde
• Animasjonsretning: høyre
• Animasjonsforsinkelse: 2000 ms

Gå deretter til den avanserte kategorien og legg til følgende CSS-klasse og Z-indeks:

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

Og legg til den tilpassede CSS-kodebiten etter hovedelementet:

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

CSS-klassen er nødvendig slik at vi kan målrette seksjonen med kode senere. Tilpasset CSS plasserer den øverste venstre delen av sidemalen i en fast (eller klissete) posisjon. "Venstre: -320 piksler" -posisjonen skal flytte hele seksjonen (som er 320 piksler bredt) utenfor nettleservinduet (derfor utenfor vårt syn). Men vi har venstre marg på 320 piksler for å bringe den tilbake til visning. Grunnen til at den er konstruert på denne måten er at vi kan slå marginverdien av eller på når du klikker på "x" -ikonet. Dette vil føre til at CTA glir inn og ut av syne.

Linjeinnstillinger

Nå oppdaterer du linjeparametrene som følger:

• Bruk en tilpasset rennebredde: JA
• Rennesteinsbredde: 1
• Bredde: 100%
• Polstring: 0px høy, 0px lav

Legg til en handlingsmodul

På rad, legg til en Call to Action-modul.

Innstillinger for oppfordring til handling

Oppdater deretter innstillingene for handlingsfremmende handlinger.

Innhold

• Tittel: [skriv inn ønsket tekst]
• Knapp: [skriv inn ønsket tekst]
• Kropp: [skriv inn ønsket tekst]
• URL for knappekobling: [skriv inn faktisk URL eller #]

Fjern deretter standard bakgrunnsfarge for å avsløre bakgrunnen til delen vi la til tidligere.

Designparametere (tekst, knapp og fyll)

I kategorien Design oppdaterer du følgende:

• Tittel font: Lato
• Tittel Font Weight: Heavy
• Tittellinjehøyde: 1,3 em
• Kroppspoliti: Lato
• Vekt på kroppen: fet skrift
• Bruk egendefinerte stiler for knappen: JA
• Knapptekststørrelse: 15px
• Knappens bredde: 0px
• Avstand på knappebrev: 1px
• Knapp skrifttype: Lato
• Knappens skriftvekt: tung
• Knapp font stil: TT
• Knappepolstring: 12 piksler øverst, 12 piksler nederst, 32 piksler til venstre, 32 piksler til høyre
• polstring: 40 piksler øverst, 40 piksler nederst, 40 piksler til venstre, 40 piksler til høyre

Legg til et åpent og lukk-ikon med en Blurb-modul

Når oppfordringen til handling er ferdig, må vi opprette ikonknappen som brukes til å åpne og lukke skyveoppfordringen til handling. For å opprette dette, legg til en blurb-modul under call to action-modulen.

Innstillinger for presentasjonstekst

Oppdater følgende designparametere.

Innhold

• fjerne standardtittel og brødtekst
• Bruk ikonet: JA
• Ikon: mer (se skjermbilde)

Conception

• Ikonfarge: # 000000
• Bruk ikonstørrelse på ikonet: JA
• Ikonets skriftstørrelse: 40 piksler
• Bredde: 40px
• Høyde: 40px
• Avrundede hjørner: 50%
• Transformer Z-aksens rotasjon: 135 grader

Avanserte innstillinger

Under den avanserte fanen legger du til følgende CSS-klasse:

• CSS-klasse: slide-in_target

Deretter legger du til denne tilpassede CSS i hovedelementet.

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

Legg til følgende tilpassede CSS i Blurb-bildet.

margin-bottom: 0px;

Resultat

Her er resultatet så langt.

Husk at vi fortsatt trenger å legge til litt kode for å legge til lukk og åpen funksjonalitet når du klikker på "x" -ikonet. Vi legger til koden etter å ha opprettet en oppfordring til handling i hvert av de fire hjørnene av modellen.

Opprettelse av oppfordringen til handling øverst til høyre

Med den første innebygde handlingsoppfordringen kan vi øke hastigheten på prosessen med å opprette resten av CTA-ene ved å duplisere delen som allerede er opprettet. Deretter skal vi lage en lysbildeanrop til handling øverst til høyre.

Dupliser seksjonen

Distribuer wireframe-visningsmodus, og dupliser deretter CTA-delen øverst til venstre.

Oppdater seksjonsinnstillinger

Oppdater deretter de nye seksjonsparametrene som følger:

• margin: 320px høyre
• animasjonsretning: venstre

Oppdater deretter den tilpassede CSS i hovedelementet ved å erstatte "venstre" med "høyre". Her er hele utdraget:

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

Oppdater parameterne for Blurb-modulen

Deretter åpner du Blurb-modulinnstillingene og oppdaterer den tilpassede CSS-kodebiten i hovedelementet ved å erstatte "høyre" med "venstre". Her er hele utdraget:

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

Resultat

Du vil nå se en oppfordring til handling som et lysbilde øverst til høyre i sidemalen.

Utfør de samme operasjonene for resten av seksjonene "Nedre høyre", "Nedre venstre". Du må også justere CSS-koden for hver av modulene for å få et resultat som ligner på det følgende.

Legge til egendefinerte jQuery- og CSS-utdrag ved hjelp av en kodemodul

For det siste trinnet må vi legge til noen tilpassede jQuery og CSS, slik at vi kan få funksjonaliteten til å åpne og lukke hver av lysbildet CTAer.

Legg til en kodemodul

Legg til en kodemodul i en av seksjonene i presentasjonen.

Lim inn koden

Åpne deretter kodeinnstillingene og lim inn 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>

avslutt~~POS=TRUNC tanker

Med Divi er det slett ikke vanskelig å opprette en oppfordring til handling. Og siden du kan bruke temabyggeren til å legge til en oppfordring til handling i en sidemal, vil du ha mer kontroll over hvilke sider som viser disse CTA-ene.