Det er enkelt å utvide e-postlisten din ved å bruke modulen for abonnement på nyhetsbrevet som tilbys av WordPress tema Divi. Denne modulen støtter integrasjon MailChimp , Aweber et Feedburner.

integrasjon mailchimp divi.png

Hvordan legge til et abonnementsmodul for nyhetsbrev på siden din

Før du kan legge til en e-postmodul på siden din, må du først hoppe inn i Divi Builder. Først når Divi-tema installert på nettstedet ditt, vil du legge merke til en knapp Bruk Divi Builder over innleggsredaktøren når du oppretter en ny side. Klikk på denne knappen for å aktivere Divi Builder og få tilgang til alle Divi Builder-modulene. Klikk deretter på knappen Bruk Visual Builder for å starte generatoren i visuell modus. Du kan også klikke på knappen Aktiver Visual Builder når du surfer på nettstedet ditt i forgrunnen hvis du er koblet til WordPress-dashbordet.

bruk divi byggmester

Når du har angitt Visual Builder, kan du klikke på den grå pluss-knappen for å legge til en ny modul på siden din. Nye moduler kan bare legges til innenfor rader. Hvis du starter en ny side, husk å legge til en rad på siden din først. Vi har gode veiledninger om bruk av Divis linje- og seksjonselementer.

epost optin.png

Finn optin e-postmodulen i listen over moduler, og klikk på den for å legge den til siden din. Listen over moduler er søkbar, noe som betyr at du også kan skrive ordet "email optin" og deretter klikke "Enter" for automatisk å søke og legge til optin-modulen! Når modulen er lagt til, vil du bli møtt av modulalternativlisten. Disse alternativene er delt inn i tre hovedgrupper: Innhold , Conception et avansert .

Konfigurere e-postkontoer

Før du kan bruke optin e-postmodulen, må du først koble den til en e-postleverandør. Disse leverandørene kan legges til og administreres i modulinnstillingene. Når du har lagt til en ny e-postleverandør, vil den vises i modulinnstillingene hver gang du redigerer en e-postmodul på nettstedet ditt.

email optin configuration.png

For å legge til en ny e-postleverandør, velg først e-postleverandøren din fra listen Velg en leverandør . Klikk deretter på knappen Legg On for å koble modulen til e-postkontoen din. Divi støtter for tiden tre leverandører: MailChimp, AWeber og Feedburner.

Koble din AWeber-konto

Før du kan bruke denne modulen med AWeber, må du først koble AWeber-kontoen din. For å gjøre dette, velg AWeber fra listen over leverandører, og klikk deretter på Legg til-knappen for å starte prosessen. Etter å ha klikket på Legg til-knappen, vil du bli ført til en side der du blir bedt om å logge på AWeber-kontoen din. Logg inn for å generere API-nøkkelen.

logg inn aweber divi.png

Kopier og lim inn nøkkelen i feltet API-nøkkel i modulinnstillingene, og klikk deretter på knappen sende .

Kontoen din er nå koblet til, og du kan velge e-postlisten din fra rullegardinmenyen AWeber Lists .

Koble din MailChimp-konto

Før du kan bruke modulen med MailChimp, må du først koble MailChimp-kontoen din. For å gjøre dette, velg MailChimp fra listen over leverandører, og klikk deretter Legg til. Etter å ha klikket på Legg til-knappen, et felt API-nøkkel vil dukke opp. Kopier og lim inn API-nøkkelen i feltet, og trykk deretter på knappen sende . Kontoen din er nå koblet til, og du kan velge e-postlisten din fra rullegardinmenyen MailChimp Lister .

Du finner din MailChimp API-nøkkel i MailChimp.com-kontoen din. Logg inn og gå til profilsiden din. Se i kategorien Ekstra og finn lenken API-nøkkel . her er det noe tilleggsinformasjon om hvordan du finner API-nøkkelen din.

api mailchimp divi.png

Eksempel på brukstilfelle: Legge til et abonnementsinnlegg nederst i et blogginnlegg

Et vanlig sted å legge til en skjema e-postvalg er rett under innholdet i meldingen.
For dette raske eksemplet vil jeg vise deg hvor enkelt det er å sette inn og style en Optin e-postmodul under et blogginnlegg ved hjelp av Visual Builder.

visuell byggmester divi example.jpg

Bruk Visual Builder til å legge til standarddelen med en 1/2 kolonne (2 kolonner) rad under seksjonen som inneholder innholdet på innlegget.

Siden dette eksemplet skal være et e-boktilbud med optin, legg til en bildemodul i venstre kolonne og last opp et bilde av boken. Sett bildejusteringen til "Center" og sett maksimal bildebredde til 300px.

legg til en optin email modul divi.jpg

Legg deretter Optin Email-modulen til høyre kolonne.

eksempel e-post-opplæring divi.png

Oppdater e-postinnstillingene for Optin som følger:

Innholdsalternativer

Tittel: "Nye abonnenter får en GRATIS kopi av min e-bok" Knapptekst: "Abonner" Innhold: "En overbevisende historie som lar deg sitte på kanten av setet ditt." Tjenesteleverandør: [velg tjenesteleverandør] 
Velg Liste eller Stream tittel

Designalternativer

Feltets bakgrunnsfarge: # f1f1f1 Bakgrunnsfarge: #ffffff Fokus kantfarge: JA Kantfarge: # 02b875 Tekstfarge: Mørk Tekstorientering: Midt overskrift Skrift: PT Uten topptekst Skriftstørrelse: 35 px Hodehøyde: 1.3 em Skriftstørrelse på kropp: 18 px Tilpasset polstring: 20 px Høyre, 20 px Venstre stil Bruk egendefinert til knapp: JA Tekststørrelse-knapp: 26 px Tekstknappfarge: #ffffff Knapp Bakgrunnsfarge: # 02b875 Knapp Kantbredde: 2 Knappekant Farge: # 02b875 Knappbokstavavstand: 1px Legg til knappikon: Ja Knappikon: [legg til ikon]

e-post ebook eksempel divi configuration.png

Det er alt. Hvis du vil forbedre abonnementsskjemaene dine, kan du bruke Bloom, Divi-e-postalternativet og pluggen for leadgenerering spesielt designet for å hjelpe deg med å utvide adresselisten din.

Optin e-postmodul innholdsalternativ

I Innhold-fanen finner du alle innholdselementene i modulen, for eksempel tekst, bilder og ikoner. Alt som styrer hva vises i modulen din, vil du alltid finne i denne fanen.

alternativ for e-postalternativer content.png

Tittel

Sett inn tittelen på din skjema registrering her.

Knapptekst

Spesifiser registreringstekstteksten her.

Innhold

Dette feltet er der du kan legge inn innholdet i SignUp-modulen.

Tjenesteyter

Her kan du velge hvilken leverandør av adresselister du bruker. Modulen støtter for tiden integrasjoner MailChimp , Aweber et Feedburner. Velg leverandøren din fra listen, og fortsett til følgende alternativer.

MailChimp Lister

Hvis du valgte MailChimp som leverandør, vil dette alternativet vises. Her kan du velge MailChimp-listen for å legge til kunder. Hvis du ikke ser en liste her, må du sørge for at MailChimp API-nøkkelen er angitt i ePanel, og at du har minst en liste på en MailChimp-konto. Hvis du har lagt til en ny liste, men den ikke vises her, aktiverer du alternativet 'Regenerer MailChimp-lister' i ePanel. Ikke glem å deaktivere den når listen er regenerert.

Aweber sine oppføringer

Hvis du har valgt Aweber som leverandør, vil dette alternativet vises. Her kan du velge Aweber-listen for å legge til kunder. Hvis du ikke ser noen liste her, må du sørge for at Aweber er konfigurert riktig i ePanel, og at du har minst en liste på en Aweber-konto. Hvis du har lagt til en ny liste, men den ikke vises her, aktiverer du alternativet 'Regenerer Aweber-lister' i ePanel. Ikke glem å deaktivere den når listen er regenerert.

Feedburner Tittel

Hvis du har valgt Feedburner som leverandør, vil dette alternativet vises. Slik identifiserer du Feedburner-kontoen din. Du må skrive inn feedtittelen din, hvilken finner du her .

Bruk bakgrunnsfargen

Hvis aktivert, vil en bakgrunnsfarge bli brukt på modulen. Hvis en bakgrunnsfarge er aktivert, legges det til ekstra fyll inne i modulen for å skille tekstinnholdet fra den synlige kanten av modulen. Hvis en bakgrunnsfarge ikke er slått på, blir modulbakgrunnen gjennomsiktig og den ekstra fyllingen fjernes.

Bakgrunnsfarge

Du kan lage inskripsjonen til den fargen du vil bruke, ved å bruke fargevelgeren. Velg den samme fargen som bakgrunnen til seksjonen for å skape en bred eller effektfri kant.

Administrasjonsmerke

Dette vil endre moduletiketten i konstruktøren for enkel identifisering. Når du bruker WireFrame-visningen i Visual Builder, vises disse etikettene i modulblokken i Divi Builder-grensesnittet.

Email Optin seksjon design

I kategorien Design finner du alle alternativene for modulstil, for eksempel skrifter, farger, størrelse og avstand. Dette er fanen du vil bruke til å endre utseendet til modulen din. Hver Divi-modul har en lang liste over designinnstillinger som du kan bruke til å endre hva som helst.

alternativ delen design e-postmodul optin.png

Formfelt bakgrunnsfarge

Le skjema optin email inneholder to inntastingsfelt for brukernavn og passord. Du kan bruke denne innstillingen til å justere bakgrunnsfargen til disse feltene.

Tekstfarge på skjemafeltet

Optin e-postskjemaet inneholder to inndatafelt for brukernavn og passord. Du kan bruke denne innstillingen til å justere tekstfargen på disse feltene. Hvis du har justert bakgrunnsfargen til skjemafeltet, kan du også justere tekstfargen for å sikre et jevnt fargeforhold.

Bakgrunnsfarge

Når et inndatafelt er fokusert med en besøkendes mus, endres fargene for å tydelig indikere hvilket felt som er aktivt. Her kan du definere bakgrunnsfargen til de fokuserte feltene.

Tekstfarge i fokus

Når et inndatafelt er fokusert med en besøkendes mus, endres fargene for å tydelig indikere hvilket felt som er aktivt. Her kan du definere tekstfargen til de fokuserte feltene.

Bruk fokusgrensefargen

Hvis du vil legge til kantlinjer i inndatafelt når de er i fokus, kan du aktivere dette alternativet.

Farge på fokusgrensen

Ved å bruke denne innstillingen, kan du endre fargen på grensen som vises i de fokuserte inputfeltene.

Tekstfarge

Hvis bakgrunnsfargen er mørk, bør tekstfargen settes til “Lys”. Imidlertid, hvis bakgrunnsfargen er lys, bør tekstfargen være satt til "Mørk".

Tekstorientering

Denne rullegardinmenyen lar deg spesifisere retningen til teksten som skal rettferdiggjøres, sentreres eller rettferdiggjøres.

Header Font

Du kan endre skrifttypen til overskriftsteksten ved å velge ønsket skrift fra rullegardinmenyen. Divi kommer med dusinvis av flotte skrifttyper drevet av Google Fonts. Som standard bruker Divi Open Sans-skrift for all teksten på siden din. Du kan også tilpasse stilen på teksten din med fet, kursiv, stor bokstav og understrekingsalternativer.

Topptekststørrelse

Her kan du justere størrelsen på overskriftsteksten. Du kan dra områdeglidebryteren for å øke eller redusere størrelsen på teksten, eller angi ønsket tekststørrelsesverdi direkte i inntastingsfeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Topptekstfarge

Som standard vises alle tekstfargene i Divi i hvitt eller mørkegrått. Hvis du vil endre fargen på toppteksten, velger du ønsket farge fra fargevelgeren ved hjelp av dette alternativet.

Avstand mellom topptekster

Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke avstanden mellom hver bokstav i overskriftsteksten, bruker du skyvekontrollen for å justere mellomrom eller angir ønsket avstandsstørrelse i inntastingsfeltet til høyre for skyveknappen. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Toppradens høyde

Radhøyde påvirker mellomrommet mellom hver rad i overskriftsteksten. Hvis du vil øke avstanden mellom hver rad, bruker du glidebryteren for å justere mellomrom eller angir ønsket avstandsstørrelse i inntastingsfelt til høyre for markøren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Kropps skrifttype

Du kan endre kroppsfonten din ved å velge ønsket skrift fra rullegardinmenyen. Divi kommer med dusinvis av flotte skrifttyper drevet av Google Fonts. Som standard bruker Divi Open Sans-skrift for all teksten på siden din. Du kan også tilpasse stilen på teksten din med fet, kursiv, stor bokstav og understrekingsalternativer.

Kropp skriftstørrelse

Her kan du justere kroppens tekststørrelse. Du kan dra områdeglidebryteren for å øke eller redusere størrelsen på teksten, eller angi ønsket tekststørrelsesverdi direkte i inntastingsfeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Kropps tekstfarge

Som standard vises alle tekstfargene i Divi i hvitt eller mørkegrått. Hvis du vil endre fargen på teksten, velger du ønsket farge fra fargevelgeren ved hjelp av dette alternativet.

Spacing av kropps bokstaver

Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke avstanden mellom hver bokstav i teksten, bruker du skyvekontrollen for å justere mellomrom eller skriver inn ønsket avstandsstørrelse i inntastingsfeltet til høyre for skyveknappen. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Høyde på kroppslinjen

Linjehøyde påvirker mellomrommet mellom hver tekstlinje i kroppen din. Hvis du vil øke mellomrommet mellom hver linje, kan du bruke skyveknappen for å justere mellomrom eller angi ønsket avstandsstørrelse i inndatafeltet plassert til høyre for markøren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Bruk grensen

Aktivering av dette alternativet vil plassere en kant rundt modulen din. Denne rammen kan tilpasses ved hjelp av følgende betingede parametere.

Farge på grensen

Dette alternativet påvirker fargen på grensen din. Velg en egendefinert farge fra fargevelgeren for å bruke den på grensen din.

Bredde av grensen

Som standard er kantene 1 piksel brede. Du kan øke denne verdien ved å dra områdeglidebryteren eller angi en egendefinert verdi i inndatafeltet til høyre for glidebryteren. Tilpassede målenheter støttes, noe som betyr at du kan endre standardenheten fra "px" til noe annet som em, vh, vw etc.

Border style

Kanter støtter åtte forskjellige stiler: solid, prikket, prikket, dobbelt, spor, møne, overlegg og start. Velg ønsket stil fra rullegardinmenyen for å bruke den på grensen din.

Tilpasset margin

Margen er plassen som legges til på utsiden av modulen din, mellom modulen og neste element over, under eller til venstre og høyre for den. Du kan legge til egendefinerte marginverdier til hvilken som helst av de fire sidene av modulen. For å fjerne den egendefinerte margen, fjern merverdien fra inndatafeltet. Som standard måles disse verdiene i piksler, men du kan angi egendefinerte måleenheter i inndatafeltene.

Tilpasset polstring

Påfyll er plassen som legges til inne i modulen din, mellom kanten av modulen og dens indre elementer. Du kan legge til tilpassede polstringsverdier til hvilken som helst av de fire sidene av modulen. For å fjerne den egendefinerte margen, fjern merverdien fra inndatafeltet. Som standard måles disse verdiene i piksler, men du kan angi egendefinerte måleenheter i inndatafeltene.

Bruk egendefinerte stiler for knappen

Aktivering av dette alternativet avslører forskjellige innstillinger for knappetilpasning som du kan bruke til å endre utseendet på modulens knapp.

Knapptekststørrelse

Denne innstillingen kan brukes til å øke eller redusere størrelsen på teksten i knappen. Knappen tilpasser seg når tekststørrelsen øker og avtar.

Knapptekstfarge

Som standard tar knappene aksentfargen på temaet ditt som definert i Theme Customizer. Dette alternativet lar deg tilordne en tilpasset tekstfarge til knappen i denne modulen. Velg din egendefinerte farge ved å bruke fargevelgeren for å endre knappens farge.

Knapp bakgrunnsfarge

Som standard har knappene en gjennomsiktig bakgrunnsfarge. Dette kan endres ved å velge ønsket bakgrunnsfarge fra fargevelgeren.

Border Width-knappen

Alle Divi-knapper har en 2px-kant som standard. Denne grensen kan økes eller reduseres ved hjelp av denne innstillingen. Kanter kan fjernes ved å angi verdien 0.

Knapp kantfarge

Som standard vedtar knappekanter temaets aksentfarge som definert i Theme Customizer. Dette alternativet lar deg tilordne en egendefinert kantfarge til knappen i denne modulen. Velg din egendefinerte farge ved å bruke fargevelgeren for å endre fargen på knappekanten.

Knappgrenseradius

Grenseradiusen påvirker runden på hjørnene på knappene dine. Som standard har knappene i Divi en liten kantradius som avrunder hjørnene med 3 piksler. Du kan redusere denne verdien til 0 for å lage en firkantet knapp, eller øke den betydelig for å lage knapper med sirkulære kanter.

Spacing av knapp bokstaver

Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke mellomrommet mellom hver bokstav i knappeteksten, bruker du glidebryteren for å justere mellomrommet eller skriver inn ønsket avstandsstørrelse i inntastingsfeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Knapp skrifttype

Du kan endre skrifttypen til knappeteksten ved å velge ønsket skrift fra rullegardinmenyen. Divi kommer med dusinvis av flotte skrifttyper drevet av Google Fonts. Som standard bruker Divi Open Sans-skrift for all teksten på siden din. Du kan også tilpasse stilen på teksten din med fet, kursiv, stor bokstav og understrekingsalternativer.

Legg til et knappikon

Deaktivert, denne innstillingen fjerner ikoner fra knappen din. Som standard viser alle Divi-knappene et pilikon på sveveren.

Knappikon

Hvis ikoner er aktivert, kan du bruke denne innstillingen til å velge hvilket ikon du vil bruke i knappen din. Divi har forskjellige ikoner å velge mellom.

Fargeikon-knapp

Justering av denne parameteren vil endre fargen på ikonet som vises på knappen din. Som standard er ikonfargen den samme som knappetekstfargen din, men denne innstillingen lar deg justere fargen uavhengig.

Ikon plasseringsknapp

Du kan velge å vise ikonet til knappen til venstre eller høyre for knappen.

Vis bare ikonet når du holder markøren over knappen

Som standard vises knappikonene bare når du holder markøren. Hvis du vil at ikonet alltid skal vises, slå av denne innstillingen.

Knapphenger Tekstfarge

Når knappen er svevet over en besøkendes mus, vil denne fargen bli brukt. Fargen vil endres fra grunnfargen som ble definert i de forrige innstillingene.

Hover knappen bakgrunnsfargen

Når knappen er svevet over en besøkendes mus, vil denne fargen bli brukt. Fargen vil endres fra grunnfargen som ble definert i de forrige innstillingene.

Fargeknapp Border Button

Når knappen er svevet over en besøkendes mus, vil denne fargen bli brukt. Fargen vil endres fra grunnfargen som ble definert i de forrige innstillingene.

Hover Border Radius Button

Når knappen holdes over musen til en besøkende, vil denne verdien brukes. Verdien vil endres fra basisverdien som ble definert i de forrige innstillingene.

Pekende notatavstandsknapp

Når knappen holdes over musen til en besøkende, vil denne verdien brukes. Verdien vil endres fra basisverdien som ble definert i de forrige innstillingene.

Avanserte alternativer for Optin via e-post

I den avanserte fanen finner du alternativer som mer erfarne webdesignere kan finne nyttige, for eksempel tilpassede CSS- og HTML-attributter. Her kan du bruke tilpasset CSS på alle modulens mange elementer. Du kan også bruke tilpassede CSS-klasser og IDer til modulen, som kan brukes til å tilpasse modulen i barnets temas style.css-fil.

optin e-postmodul

CSS ID

Skriv inn en valgfri CSS-ID som skal brukes til denne modulen. En ID kan brukes til å lage en tilpasset CSS-stil eller for å koble til bestemte deler av siden din.

CSS klasse

Angi de valgfrie CSS-klassene som skal brukes til denne modulen. En CSS-klasse kan brukes til å lage tilpasset CSS-styling. Du kan legge til flere klasser, atskilt med et mellomrom. Disse klassene kan brukes i Divi-barnetemaet eller i det tilpassede CSS-stilarket du legger til på siden din eller på nettstedet ditt ved hjelp av temalternativer Divi eller parametere for Divi Builder-siden.

Tilpasset CSS

Tilpasset CSS kan også brukes på modulen og hvilken som helst av modulens interner. I Custom CSS-delen finner du et tekstfelt der du kan legge til tilpassede CSS-stilark direkte til hvert element. CSS-oppføringer i disse innstillingene er allerede pakket inn i stilkoder. Så bare skriv inn CSS-reglene atskilt med semikolon.

synlighet

Dette alternativet lar deg kontrollere enhetene som modulen din vises på. Du kan velge å deaktivere modulen din på nettbrett, smarttelefoner eller stasjonære datamaskiner hver for seg. Dette er nyttig hvis du vil bruke forskjellige mods på forskjellige enheter, eller hvis du vil forenkle mobildesignet ved å eliminere visse elementer fra siden.

Andre opplæringsprogrammer 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 = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-nedlasting"] LAST NED 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 = "expanded" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "icon_right =" faOW D fa-LOAD "] DIVI [/ vcex_button] [/ vc_column] [/ vc_row]