Gå til hovedindhold

Sådan føjes klistrede CTA'er til en artikelskabelon med Divi Builder

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]

Klæbende sidebjælker er ekstremt effektive til at fange besøgende opmærksomhed uden at være anmassende eller distraheret. Tricket er at inkludere et eller to sidebjælkeelementer, der "forbliver synlige" eller er fastgjort til siden af ​​indlægets indhold, når brugeren ruller gennem siden. Dette er et forfriskende alternativ til det traditionelle sidelinjelayout, da det giver indtryk af et moderne layout i fuld bredde (ingen sidebjælke) med fordelen ved at præsentere opfordringer til handling. vigtigt på siden af ​​siden, når det er nødvendigt.

I denne vejledning viser vi dig, hvordan du tilføjer klæbende opfordringer til handling til en blogindlægskabelon ved hjælp af Divi Theme Builder. Anvendelsen af ​​dette layout er betydelig. Det fungerer på næsten enhver side eller enhver postskabelon. Plus, du behøver ikke at begrænse dig til CTA'er; du kan vælge at tilføje Divi-modul (er) efter eget valg.

Hvad du behøver for at komme i gang

For at begynde, skal du at installere og aktivere Divi-temaet . Sørg for, at du har den nyeste version af Divi.

Du har også brug for mindst en meddelelse oprettet med Divi Builder til test for at få vist det ønskede resultat.

Derefter er du klar til at forlade.

undersøgelse

Her er en hurtig oversigt over klistrede ACTs, der er føjet til en blogpostskabelon i Divi.

Sådan tilføjes faste opfordringer til handling i din blogindlægskabelon i Divi

Tilføjelse af skabelon til temabygger

Det første trin er at importere vores foruddefinerede skabelon på vores websted. Vi vil bruge Divi Theme Builder Pack # 1 publikationsskabelon.

For at komme i gang skal du gå til Divi> Temagenerator. Klik på bærbarhedsikonet øverst til højre på siden. I portabilitetsmodalet skal du vælge importfanen og vælge filen divi-theme-builder-pack-1-post-template.json i mappen. Hvis der i øjeblikket er installeret nogen skabeloner på dit websted, skal du fjerne markeringen i eventuelle indstillinger, der kan tilsidesætte dine nuværende skabeloner. Klik derefter på importknappen.

Importer et divi-layout

Opbyg skabelonen til blogindlæg

Når skabelonen er importeret, er vi klar til at tilføje vores nye CTA'er til sidepanelet, der er klæbrig til skabelonlayoutet. For at gøre dette skal du klikke på redigeringsikonet for det brugerdefinerede kropsområde.

Tilføj en tilpasset divi-krop

Tilføjet dobbelt sidelinjelayout for at holde sidebar-CTA'er

I skabelonlayouteditoren skal du finde rækken, der indeholder indholdsudgivelsesmodulet, og ændre kolonnelayoutet til en femtedel med tre femtedele ved en femtedel kolonnestruktur (1/5 3/5 1/5 ). Dette giver os mulighed for at holde kolonnen centreret for postindholdet, mens vi leverer to sektioner på hver side til vores klæbrige CTA'er.

Tilføj et divi-layout

Når du har ændret kolonnestrukturen, skal du trække indholdsudgivelsesmodulet til midtkolonnen.

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]

Opdater linjeparametre

Åbn linjeindstillingerne, og opdater følgende designindstillinger:

  • Brug en brugerdefineret tagrendebredde: YES
  • Tagrendebredde: 2
  • Bredde: 100% (desktop), 90% (tablet)
  • Maksimal bredde: 1500px
Tilføj et fix divi afsnit

Dette giver os det rum, vi har brug for til vores dobbelt sidepanelkonfiguration.

Opdater 1 kolonneindstillinger

Åbn derefter indstillingerne for 1-kolonne, og giv denne kolonne en tilpasset CSS-klasse:

  • CSS klasse: sticky-cta
Tilpas kolonne 1 css divi

Tilføjelse af et CTA-sidebjælke til venstre kolonne

Vi er nu klar til den første opfordring til handling. Føj et opkald til handlingsmodulet i venstre kolonne.

Tilføj modulopfordring til handling

Stil CTA Sidebar

Opdater indstillingerne som følger:

Indhold
  • Knap: «Klik her»
  • Body: “Dit indhold går her. Rediger eller slet denne tekst online eller i modulets indholdsindstillinger. ”
  • URL til knapets link: #
Tilpas call to action-modul
Tekstdesign
  • Body font: Montserrat
  • Skriftvægt: semi-fed
  • Tekst: Højre justering
  • Tekstens kropsfarve: # 444444
  • Størrelse på kropstekst: 22px (desktop), 18px (tablet)
  • Kropshøjde: 1.3em
CTA strømpebukser
knap
  • Knappen tekststørrelse: 14px
  • Knappen tekstfarve: #ffffff
  • Baggrundsfarve på knap: # 6148df
  • Bredde på knapgrænsen: 0px
  • Radius af knappen: 80px
  • Skriftvægt: Fed
  • Knap skrifttype: TT
  • Polstring af knapper: 12px øverst, 12px i bunden, 22px til venstre, 22px til højre
Divi-modul sektion
Bredde, justering, polstring og kantsten
  • Bredde: 100%
  • Maksimal bredde: 320px
  • Modulets justering: højre
  • Polstring: 10px til venstre, 10px til højre
  • Bredde på øverste kant: 10px
  • Farve på øverste kant: #eeeeee
  • Bredde på bundkanten: 10px
  • Farve på den nederste kant: #eeeeee

Tilføjelse af CTA-sidepanelet i højre kolonne

For at oprette CTA for den højre kolonne skal du kopiere den, vi lige har oprettet, og indsætte den i kolonnen yderst til højre. Opdater derefter indstillingerne for duplikatet som følger:

  • Justering af tekstlegemet: venstre
  • Justering af modulet: venstre
Tilføj ct a til højre

Opdater 3-kolonneindstillingerne

For denne CTA i højre kolonne tilføjer vi en øvre margen til kolonnen for at etablere en startposition for CTA-sidepanelet på et nedre punkt på siden.

Start med at åbne parametrene for 3-kolonnen, og tilføj den samme CSS-klasse, som vi tilføjede til 1-kolonnen:

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]

  • CSS klasse: sticky-cta

Føj derefter følgende tilpassede CSS til hovedelementet:

kontor

margin-top: 50%

tablet

margin-top: 0%

Tilpas divi-kolonnestil

Dette giver os et andet udgangspunkt for den klæbrige CTA i højre kolonne, som er 50% af rækkebredden. Du er velkommen til at justere denne værdi efter behov til dit eget blogindlæg.

Kopier et cta divi-modul

Føj tilpasset CSS til skabelonen med et kodemodul

For at få vores "klæbrige" positionering til vores sidebar CTA'er er vi nødt til at tilføje tilpasset CSS. For at gøre dette skal du oprette et nyt kodemodul under indholdsudgivelsesmodulet (eller hvor som helst på siden).

Indsæt et divi-kodetypemodul

Indsæt derefter følgende CSS i kodefeltet:

<style> @media only screen and (min-width: 980px) {#page-container { overflow-y:visible !important; } .sticky-cta {position: sticky !important;position: -webkit-sticky !important;top: calc(50vh - 130px) !important;}}</style>

Divi modul parameter kode

Den øverste forskydning i denne kode er en beregning, der placerer CTA lodret centreret på siden, når du ruller. 50vh er halvt så højt som browservinduet, og 130px er halvt så højt som CTA. Hvis din CTA er højere eller lavere, skal du justere 130 pixels op eller ned.

Gem indstillinger

Når du er færdig, skal du gemme skabelonets layout.

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]

Gem parametre for cta divi-modul

Og gem derefter indstillingerne for temabyggeren

Gem temabygger divi

Endelig resultat

Besøg en blogartikel ved hjælp af skabelonen for at se slutresultatet.

CTA strømpebukser

Og det er sådan, at klæbrige CTA'er forbliver fast på rulle. Du kan se, hvordan det fungerer bedst ved længere indhold.

endelige tanker

Disse klæbende sidebaropfordringer til handling er et forfriskende alternativ til det traditionelle sidebjælke. De passer godt til det minimalistiske design, da de er mindre påtrængende og ikke får posten til at føle sig rodet. Derudover kan du placere CTA lavere på siden, så den gradvist vises og forbliver fast på pergamentet, hvilket gør det mere synligt for besøgende. Og glem ikke. Du kan udskifte CTA med ethvert Divi-modul eller en kombination af moduler for at skabe næsten alt, hvad du vil. Du kan også vælge kun at holde en CTA på den ene side. Det ser ud til at have mange applikationer.

Denne artikel indeholder kommentarer 0

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
2 aktier
andel2
tweet
Tilmeld