Det er nemt at udvide din mailingliste ved hjælp af nyhedsbrevsabonnementsmodulet, der tilbydes af WordPress tema Divi. Dette modul understøtter integration MailChimp , AWeber et Feedburner.

integration mailchimp divi.png

Sådan tilføjes et abonnementsmodul til nyhedsbreve til din side

Før du kan tilføje et e-mail-modul til din side, skal du først hoppe ind i Divi Builder. En gang Divi-tema installeret på din hjemmeside, vil du bemærke en knap Brug Divi Builder over indlægseditoren, når du opretter en ny side. Klik på denne knap for at aktivere Divi Builder og få adgang til alle Divi Builder-modulerne. Klik derefter på knappen Brug Visual Builder for at starte generatoren i visuel tilstand. Du kan også klikke på knappen Aktivér Visual Builder når du gennemser dit websted i forgrunden, hvis du er tilsluttet dit WordPress-dashboard.

brug divi builder

Når du har indtastet Visual Builder, kan du klikke på den grå plus-knap for at tilføje et nyt modul til din side. Nye moduler kan kun tilføjes inden for rækker. Hvis du starter en ny side, skal du huske at føje en række til din side først. Vi har gode tutorials om brug af Divis linje- og sektionselementer.

email optin.png

Find optin-e-mail-modulet på listen over moduler, og klik på det for at tilføje det til din side. Listen over moduler er søgbar, hvilket betyder at du også kan skrive ordet "e-mail-optin" og derefter klikke på "Enter" for automatisk at søge og tilføje optin-modulet! Når modulet er tilføjet, vil du blive mødt af listen over modulindstillinger. Disse muligheder er opdelt i tre hovedgrupper: Indhold , Conception et avanceret .

Konfiguration af e-mail-konti

Før du kan bruge optin-e-mail-modulet, skal du først oprette forbindelse til en e-mail-udbyder. Disse udbydere kan tilføjes og administreres i modulindstillingerne. Når du har tilføjet en ny e-mail-udbyder, vises den i modulindstillingerne hver gang du redigerer et e-mail-modul på dit websted.

email optin configuration.png

For at tilføje en ny e-mail-udbyder skal du først vælge din e-mail-udbyder fra listen Vælg en udbyder . Klik derefter på knappen Add On for at linke modulet til din e-mail-konto. Divi understøtter i øjeblikket tre udbydere: MailChimp, AWeber og Feedburner.

Link din AWeber-konto

Før du kan bruge dette modul med AWeber, skal du først oprette forbindelse til din AWeber-konto. For at gøre dette skal du vælge AWeber fra listen over udbydere og derefter klikke på knappen Tilføj for at starte processen. Når du har klikket på knappen Tilføj, føres du til en side, hvor du bliver bedt om at logge ind på din AWeber-konto. Log ind for at generere din API-nøgle.

log ind aweber divi.png

Kopier og indsæt derefter nøglen i feltet API-nøgle i modulindstillingerne, og klik derefter på knappen sende .

Din konto er nu blevet linket, og du kan vælge din e-mail-liste i rullemenuen AWeber lister .

Link din MailChimp-konto

Før du kan bruge modulet med MailChimp, skal du først oprette forbindelse til din MailChimp-konto. For at gøre dette skal du vælge MailChimp fra listen over udbydere og derefter klikke på Tilføj. Efter at have klikket på knappen Tilføj, et felt API-nøgle vises. Kopier og indsæt din API-nøgle i feltet, og tryk derefter på knappen sende . Din konto er nu blevet linket, og du kan vælge din e-mail-liste i rullemenuen MailChimp Lister .

Du kan finde din MailChimp API-nøgle på din MailChimp.com-konto. Log ind og gå til din profilside. Se i kategorien ekstrakt og find linket API nøgler . her er nogle yderligere oplysninger om, hvordan du finder din API-nøgle.

api mailchimp divi.png

Eksempel på brugssag: Tilføjelse af et abonnementsindlæg i bunden af ​​et blogindlæg

Et fælles sted at tilføje en formular e-mail optin er lige under indholdet af din besked.
For dette hurtige eksempel viser jeg dig, hvor let det er at indsætte og style et Optin-e-mail-modul under et blogindlæg ved hjælp af Visual Builder.

visuel bygherre divi example.jpg

Brug Visual Builder til at tilføje standardsektionen med en række i 1/2 kolonne (2 kolonner) under sektionen, der indeholder postindholdet.

Da dette eksempel vil være et e-bogstilbud med optin, skal du tilføje et billedmodul til venstre kolonne og uploade et billede af bogen. Indstil billedjusteringen til "Center", og indstil den maksimale billedbredde til 300 pixel.

Tilføj et optin email modul divi.jpg

Tilføj derefter Optin Email-modulet i højre kolonne.

eksempel email optin tutorial divi.png

Opdater Optin-e-mail-indstillingerne som følger:

Indholdsindstillinger

Titel: "Nye abonnenter Få en GRATIS kopi af min e-bog" Knaptekst: "Abonner" Indhold: "En overbevisende historie, der efterlader dig på kanten af ​​dit sæde." Tjenesteudbyder: [vælg tjenesteudbyder] 
Vælg Liste eller Stream titel

Design muligheder

Feltets baggrundsfarve: # f1f1f1 Baggrundsfarve: #ffffff Fokus kantfarve: JA Kantfarve: # 02b875 Tekstfarve: Mørk Tekstorientering: Centerhoved Skrifttype: PT uden overskrift Skriftstørrelse: 35 pix Hovedhøjde: 1.3 em Krops skriftstørrelse: 18 px Brugerdefineret polstring: 20 px højre, 20 px venstre stil Brug brugerdefineret til knap: JA Tekststørrelsesknap: 26 pix Tekstfarve: #ffffff Knap Baggrundsfarve: # 02b875 Knap Kantbredde: 2 Knapkant Farve: # 02b875 Mellemrum mellem knapbogstaver: 1 px Tilføj knapikon: Ja Knapikon: [tilføj ikon]

email ebook eksempel divi configuration.png

Det er alt. Hvis du vil forbedre dine abonnementsformularer, kan du bruge Bloom, Divi-e-mail-indstillingen og leadgenerations-pluginet, der er specielt designet til at hjælpe dig med at udvide din mailingliste.

Optin e-mail-modul indholdsindstilling

I fanen indhold finder du alle modulets indholdselementer, såsom tekst, billeder og ikoner. Alt det der styrer hvad vises i dit modul vil altid findes på denne fane.

Indstillinger for indstillinger for e-mail-indstillinger content.png

titel

Indsæt titlen på din formular tilmelding her.

Knappen tekst

Angiv teksten til registreringsknappen her.

Indhold

Dette felt er hvor du kan indtaste indholdet af SignUp-modulet.

Tjenesteudbyder

Her kan du vælge, hvilken udbyder af postlister du bruger. Modulet understøtter i øjeblikket integrationer MailChimp , AWeber et Feedburner. Vælg din udbyder fra listen, og fortsæt derefter til følgende muligheder.

MailChimp Lister

Hvis du har valgt MailChimp som udbyder vises denne mulighed. Her kan du vælge MailChimp-listen for at tilføje kunder. Hvis du ikke kan se nogen liste her, skal du sørge for, at MailChimp API-nøglen er indstillet i ePanel, og at du har mindst en liste på en MailChimp-konto. Hvis du har tilføjet en ny liste, men den ikke vises her, skal du aktivere indstillingen 'Regenerer MailChimp-lister' i ePanel. Glem ikke at deaktivere den, når listen er regenereret.

Aweber's Listings

Hvis du har valgt AWeber som udbyder vises denne mulighed. Her kan du vælge Aweber-listen for at tilføje kunder. Hvis du ikke kan se nogen liste her, skal du sørge for, at Aweber er konfigureret korrekt i ePanel, og at du har mindst en liste på en Aweber-konto. Hvis du har tilføjet en ny liste, men den ikke vises her, skal du aktivere indstillingen 'Genopret Aweber-lister' i ePanel. Glem ikke at deaktivere den, når listen er regenereret.

Feedburner Titel

Hvis du har valgt Feedburner som udbyder vises denne mulighed. Sådan identificerer du din Feedburner-konto. Du bliver nødt til at indtaste din feedtitel, hvilken kan findes her .

Brug baggrundsfarven

Hvis det er aktiveret, vil en baggrundsfarve blive anvendt på modulet. Hvis en baggrundsfarve er blevet aktiveret, tilføjes yderligere fyldning inde i modulet for at adskille tekstindholdet fra den synlige kant af modulet. Hvis en baggrundsfarve ikke er tændt, bliver modulbaggrunden gennemsigtig, og den ekstra fyldning fjernes.

Baggrundsfarve

Du kan gøre din inskription til den farve, du ønsker, ved hjælp af farvevælgeren. Vælg den samme farve som baggrunden for sektionen for at skabe udseendet af en bredde eller kantløs effekt.

Administration etiket

Dette vil ændre moduletiketten i konstruktøren for nem identifikation. Når du bruger WireFrame-visningen i Visual Builder, vises disse etiketter i modulblokken i Divi Builder-grænsefladen.

Email Optin sektion design

Under fanen Design finder du alle indstillingerne for modulstyling, såsom skrifttyper, farver, størrelse og afstand. Dette er den fane, du vil bruge til at ændre udseendet på dit modul. Hvert Divi-modul har en lang liste over designindstillinger, som du kan bruge til at ændre alt.

option sektion design email modul optin.png

Formularfelt baggrundsfarve

Le formular optin e-mail indeholder to inputfelter til brugernavn og adgangskode. Du kan bruge denne indstilling til at justere baggrundsfarven for disse felter.

Tekstfarve på formularfeltet

Optin-e-mail-formularen indeholder to indtastningsfelter til brugernavn og adgangskode. Du kan bruge denne indstilling til at justere tekstfarven på disse felter. Hvis du har justeret baggrundsfarven på formularfeltet, kan du også justere tekstfarven for at sikre et jævnt farveforhold.

Baggrundsfarve

Når et indtastningsfelt er fokuseret med en besøgendes mus, ændres farverne for tydeligt at angive, hvilket felt der er aktivt. Her kan du definere baggrundsfarven på de fokuserede felter.

Tekstfarve i fokus

Når et indtastningsfelt er fokuseret med en besøgendes mus, ændres farverne for tydeligt at angive, hvilket felt der er aktivt. Her kan du definere tekstfarven på de fokuserede felter.

Brug fokus grænsen farve

Hvis du vil tilføje kant til inputfelter, når de er i fokus, kan du aktivere denne mulighed.

Farve på fokusgrænsen

Ved at bruge denne indstilling kan du ændre farven på den kant, der vises i de fokuserede inputfelter.

Tekstfarve

Hvis baggrundsfarven er mørk, skal tekstfarven indstilles til "Lys". Men hvis baggrundsfarven er lys, skal tekstfarven indstilles til "Mørk".

Tekstorientering

Denne rullemenu giver dig mulighed for at angive retningen af ​​din tekst, der skal retfærdiggøres, centreres eller højrejusteres.

Hovedtekst

Du kan ændre skrifttypen på din overskriftstekst ved at vælge den ønskede skrifttype i rullemenuen. Divi leveres med snesevis af fantastiske skrifttyper, der drives af Google Fonts. Som standard bruger Divi Open Sans-skrifttypen til al teksten på din side. Du kan også tilpasse stilen på din tekst ved hjælp af fed, kursiv, hovedstad og understregningsmuligheder.

Overskrift skriftstørrelse

Her kan du justere størrelsen på din overskriftstekst. Du kan trække områdeskyderen for at øge eller formindske størrelsen på din tekst eller direkte indtaste den ønskede tekststørrelsesværdi i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.

Sidehovedtekstfarve

Som standard vises alle tekstfarver i Divi i hvid eller mørkegrå. Hvis du vil ændre farven på din overskriftstekst, skal du vælge den ønskede farve fra farvevælgeren ved hjælp af denne mulighed.

Mellemrum i overskrift

Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din overskriftstekst, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstandsstørrelse i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.

Overskrift rækkehøjde

Rækkehøjde påvirker mellemrummet mellem hver række i din overskriftstekst. Hvis du vil øge mellemrummet mellem hver række, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstandsstørrelse i indtastningsfelt til højre for markøren. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.

Body skrifttype

Du kan ændre din kropsskrifttype ved at vælge den ønskede skrifttype i rullemenuen. Divi leveres med snesevis af fantastiske skrifttyper, der drives af Google Fonts. Som standard bruger Divi Open Sans-skrifttypen til al teksten på din side. Du kan også tilpasse stilen på din tekst ved hjælp af fed, kursiv, hovedstad og understregningsmuligheder.

Krops skrifttypestørrelse

Her kan du justere din kropstekststørrelse. Du kan trække områdeskyderen for at øge eller formindske størrelsen på din tekst eller direkte indtaste den ønskede tekststørrelsesværdi i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.

Krops tekstfarve

Som standard vises alle tekstfarver i Divi i hvid eller mørkegrå. Hvis du vil ændre farven på din tekst, skal du vælge den ønskede farve fra farvevælgeren ved hjælp af denne mulighed.

Afstand mellem kropsbreve

Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din tekst, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstand i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.

Højde på kropslinjen

Linjehøjde påvirker mellemrummet mellem hver tekstlinje i din krop Hvis du vil øge afstanden mellem hver linje, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstand i indtastningsfeltet placeret til højre for markøren. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.

Brug grænsen

Aktivering af denne mulighed placerer en kant omkring dit modul. Denne kant kan tilpasses ved hjælp af følgende betingede parametre.

Farve på grænsen

Denne indstilling påvirker farven på din kant. Vælg en brugerdefineret farve fra farvevælgeren for at anvende den på din kant.

Bredden af ​​grænsen

Som standard er kanterne 1 pixel brede. Du kan øge denne værdi ved at trække områdeskyderen eller indtaste en brugerdefineret værdi i indtastningsfeltet til højre for skyderen. Understøttede brugerdefinerede måleenheder, hvilket betyder at du kan ændre standardenheden fra "px" til noget andet som em, vh, vw osv.

Grænsestil

Grænser understøtter otte forskellige stilarter: solidt, prikket, prikket, dobbelt, rille, ryg, overlay og start. Vælg din ønskede stil i rullemenuen for at anvende den på din kant.

Tilpasset margen

Margenen er det rum, der er tilføjet på ydersiden af ​​dit modul, mellem modulet og det næste element over, under eller til venstre og højre for det. Du kan tilføje tilpassede margenværdier til en af ​​de fire sider af modulet. For at fjerne den tilpassede margen skal du fjerne merværdien fra indtastningsfeltet. Som standard måles disse værdier i pixels, men du kan indtaste brugerdefinerede måleenheder i inputfelterne.

Tilpasset polstring

Infill er det rum, der tilføjes inde i dit modul, mellem kanten af ​​modulet og dets interne elementer. Du kan tilføje tilpassede polstringsværdier til en af ​​modulets fire sider. For at fjerne den tilpassede margen skal du fjerne merværdien fra indtastningsfeltet. Som standard måles disse værdier i pixels, men du kan indtaste brugerdefinerede måleenheder i inputfelterne.

Brug tilpassede stilarter til knappen

Aktivering af denne mulighed afslører forskellige indstillinger for tilpasning af knapper, som du kan bruge til at ændre udseendet på dit moduls knap.

Knappen tekststørrelse

Denne indstilling kan bruges til at øge eller formindske størrelsen på teksten i knappen. Knappen tilpasser sig, når tekststørrelsen øges og formindskes.

Knappen tekst farve

Som standard anvender knapperne accentfarven på dit tema som defineret i Theme Customizer. Denne mulighed giver dig mulighed for at tildele en brugerdefineret tekstfarve til knappen i dette modul. Vælg din brugerdefinerede farve ved hjælp af farvevælgeren for at ændre knapfarven.

Button baggrundsfarve

Som standard har knapperne en gennemsigtig baggrundsfarve. Dette kan ændres ved at vælge den ønskede baggrundsfarve fra farvevælgeren.

Border Width-knap

Alle Divi-knapper har en 2 pixers kant som standard. Denne kant kan øges eller formindskes ved hjælp af denne indstilling. Kanter kan fjernes ved at indtaste en værdi på 0.

Knappen kantfarve

Som standard vedtager knapgrænser dit temas accentfarve som defineret i Theme Customizer. Denne mulighed giver dig mulighed for at tildele en brugerdefineret kantfarve til knappen på dette modul. Vælg din brugerdefinerede farve ved hjælp af farvevælgeren for at ændre farven på knapgrænsen.

Knappen grænsen radius

Grænsens radius påvirker runden af ​​hjørnerne på dine knapper. Som standard har knapperne i Divi en lille kantradius, der afrunder hjørnerne med 3 pixels. Du kan reducere denne værdi til 0 for at oprette en firkantet knap eller øge den markant for at oprette knapper med cirkulære kanter.

Afstand mellem knapbogstaver

Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din knaptekst, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstand i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.

Button skrifttype

Du kan ændre skrifttypen på din knaptekst ved at vælge den ønskede skrifttype i rullemenuen. Divi leveres med snesevis af fantastiske skrifttyper, der drives af Google Fonts. Som standard bruger Divi Open Sans-skrifttypen til al teksten på din side. Du kan også tilpasse stilen på din tekst ved hjælp af fed, kursiv, hovedstad og understregningsmuligheder.

Tilføj et knapikon

Deaktiveret, denne indstilling fjerner ikoner fra din knap. Som standard viser alle Divi-knapper et pilikon på svævningen.

Knapikon

Hvis ikoner er aktiveret, kan du bruge denne indstilling til at vælge hvilket ikon der skal bruges i din knap. Divi har forskellige ikoner at vælge imellem.

Farveikoneknap

Hvis du justerer denne parameter, ændres farven på ikonet, der vises på din knap. Som standard er ikonfarven den samme som din knaptekstfarve, men denne indstilling giver dig mulighed for at justere farven uafhængigt.

Ikonplaceringsknap

Du kan vælge at vise ikonet for din knap til venstre eller højre for din knap.

Vis kun ikon, når du holder markøren over knappen

Som standard vises knapikoner kun, når du svæver. Hvis du vil have, at ikonet altid skal vises, skal du slå denne indstilling fra.

Button Hover Text Color

Når knappen holdes over en besøgendes mus, bruges denne farve. Farven skifter fra basisfarven defineret i de tidligere indstillinger.

Hover knap baggrundsfarve

Når knappen holdes over en besøgendes mus, bruges denne farve. Farven skifter fra basisfarven defineret i de tidligere indstillinger.

Farvebøjle Border Button

Når knappen holdes over en besøgendes mus, bruges denne farve. Farven skifter fra basisfarven defineret i de tidligere indstillinger.

Hover Border Radius Button

Når knappen holdes over en besøgendes mus, bruges denne værdi. Værdien skifter fra basisværdien defineret i de tidligere indstillinger.

Pegefunktionsafstandsknap

Når knappen holdes over en besøgendes mus, bruges denne værdi. Værdien skifter fra basisværdien defineret i de tidligere indstillinger.

Avancerede indstillinger via e-mail-optin

På den avancerede fane finder du muligheder, som mere erfarne webdesignere måske finder nyttige, såsom tilpassede CSS- og HTML-attributter. Her kan du anvende brugerdefineret CSS på ethvert af modulets mange elementer. Du kan også anvende tilpassede CSS-klasser og ID'er til modulet, som kan bruges til at tilpasse modulet i dit barns temas style.css-fil.

optin email modul

CSS ID

Indtast et valgfrit CSS-ID, der skal bruges til dette modul. Et ID kan bruges til at oprette en brugerdefineret CSS-stil eller til at linke til bestemte sektioner på din side.

CSS klasse

Indtast de valgfri CSS-klasser, der skal bruges til dette modul. En CSS-klasse kan bruges til at oprette brugerdefineret CSS-styling. Du kan tilføje flere klasser adskilt af et mellemrum. Disse klasser kan bruges i dit Divi-underordnede tema eller i det brugerdefinerede CSS-stilark, som du tilføjer til din side eller til dit websted ved hjælp af tema muligheder Divi eller parametre på Divi Builder-siden.

Tilpasset CSS

Brugerdefineret CSS kan også anvendes på modulet og ethvert af modulets interner. I sektionen Custom CSS finder du et tekstfelt, hvor du kan tilføje tilpassede CSS-stilark direkte til hvert element. CSS-poster i disse indstillinger er allerede pakket i typografikoder. Så indtast bare CSS-reglerne adskilt af semikolon.

synlighed

Denne mulighed giver dig mulighed for at kontrollere de enheder, som dit modul vises på. Du kan vælge at deaktivere dit modul på tablets, smartphones eller desktops individuelt. Dette er nyttigt, hvis du vil bruge forskellige mods på forskellige enheder, eller hvis du vil forenkle mobildesignet ved at fjerne visse elementer fra siden.

Andre tutorials om WordPress Theme Divi

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expanded "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flad" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DOWNLOAD DIVI-TEMAET [/ vcex_button] [/ width»_vc_column] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "udvidet" align = "center" font_family = "Raleway" font_weight = "700 ″ stil =" flad "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "icon_right =" faPL D fa-LOAD" DIVI [/ vcex_button] [/ vc_column] [/ vc_row]