Det är enkelt att utöka din e-postlista med hjälp av prenumerationsmodulen för nyhetsbrev som erbjuds av Wordpress tema Divi. Denna modul stöder integration MailChimp , Aweber et Feedburner.
Så här lägger du till en prenumerationsmodul för nyhetsbrev på din sida
Innan du kan lägga till en e-postmodul på din sida måste du först hoppa in i Divi Builder. När Divi-tema installerat på din webbplats kommer du att märka en knapp Använd Divi Builder ovanför inläggsredigeraren när du skapar en ny sida. Klicka på den här knappen för att aktivera Divi Builder och få tillgång till alla Divi Builder-moduler. Klicka sedan på knappen Använd Visual Builder för att starta generatorn i visuellt läge. Du kan också klicka på knappen Aktivera Visual Builder när du surfar på din webbplats i förgrunden om du är ansluten till din WordPress-instrumentpanel.
När du har angett Visual Builder kan du klicka på den grå plusknappen för att lägga till en ny modul på din sida. Nya moduler kan bara läggas till inom rader. Om du börjar en ny sida, kom ihåg att lägga till en rad på din sida först. Vi har bra handledning om hur Divis linje- och sektionselement används.
Leta upp e-postmodulen för optin i listan över moduler och klicka på den för att lägga till den på din sida. Listan över moduler är sökbar, vilket innebär att du också kan skriva ordet "e-postoptin" och sedan klicka på "Enter" för att automatiskt söka och lägga till optin-modulen! När modulen har lagts till hälsas du av listan över modulalternativ. Dessa alternativ är uppdelade i tre huvudgrupper: Innehåll , Design et advanced .
Konfigurera e-postkonton
Innan du kan använda e-postmodulen för optin måste du först ansluta den till en e-postleverantör. Dessa leverantörer kan läggas till och hanteras i modulinställningarna. När du väl har lagt till en ny e-postleverantör visas den i modulinställningarna när du redigerar en e-postmodul på din webbplats.
För att lägga till en ny e-postleverantör, välj först din e-postleverantör från listan Välj en leverantör . Klicka sedan på knappen Add On för att länka modulen till ditt e-postkonto. Divi stöder för närvarande tre leverantörer: MailChimp, AWeber och Feedburner.
Länk ditt AWeber-konto
Innan du kan använda den här modulen med AWeber måste du först ansluta ditt AWeber-konto. För att göra detta, välj AWeber från listan över leverantörer och klicka sedan på knappen Lägg till för att starta processen. När du har klickat på knappen Lägg till kommer du till en sida där du uppmanas att logga in på ditt AWeber-konto. Logga in för att skapa din API-nyckel.
Kopiera och klistra in nyckeln i fältet API-nyckel i modulinställningarna och klicka sedan på knappen skicka .
Ditt konto har nu länkats och du kan välja din e-postlista i rullgardinsmenyn AWeber listor .
Länk ditt MailChimp-konto
Innan du kan använda modulen med MailChimp måste du först ansluta ditt MailChimp-konto. För att göra detta, välj MailChimp från listan över leverantörer och klicka sedan på Lägg till. Efter att ha klickat på knappen Lägg till, ett fält API-nyckel Kommer komma. Kopiera och klistra in din API-nyckel i fältet och tryck sedan på knappen skicka . Ditt konto har nu länkats och du kan välja din e-postlista i rullgardinsmenyn MailChimp Listor .
Du hittar din MailChimp API-nyckel i ditt MailChimp.com-konto. Logga in och gå till din profilsida. Titta i kategorin Extra och hitta länken API-Keys . här är några ytterligare information om hur du hittar din API-nyckel.
Exempel på användningsfall: Lägga till ett prenumerationsinlägg längst ner i ett blogginlägg
En vanlig plats att lägga till ett e-postformulär är precis under innehållet i ditt meddelande.
För det här snabba exemplet ska jag visa dig hur enkelt det är att infoga och utforma en Optin-e-postmodul under ett blogginlägg med Visual Builder.
Lägg till standardavsnittet med Visual Builder med en 1/2 kolumn (2 kolumner) under avsnittet som innehåller postinnehållet.
Eftersom detta exempel kommer att vara ett e-bokserbjudande med optin, lägg till en bildmodul till vänster kolumn och ladda upp en bild av boken. Ställ in bildjusteringen på "Center" och ställ in den maximala bildbredden till 300 pixlar.
Lägg sedan till Optin Email-modulen i den högra kolumnen.
Uppdatera e-postinställningarna för Optin enligt följande:
Innehållsalternativ
Titel: "Nya prenumeranter får en GRATIS kopia av min e-bok" Knapptext: "Prenumerera" Innehåll: "En övertygande berättelse som lämnar dig på kanten av din plats." Tjänsteleverantör: [välj tjänsteleverantör] Välj Lista eller Stream titel
Designalternativ
Fältets bakgrundsfärg: # f1f1f1 Bakgrundsfärg: #ffffff Fokusramens färg: JA Kantfärg: # 02b875 Textfärg: Mörk Textorientering: Mittrubrik Teckensnitt: PT Utan rubrik Teckenstorlek: 35 px Huvudhöjd: 1.3 em Kroppsstorlek: 18 pixlar Anpassad vaddering: 20 pixlar Höger, 20 pixlar Vänster stilar Använd Anpassad för knapp: JA Textstorlek Knapp: 26 pixlar Textknapp Färg: #ffffff Knapp Bakgrundsfärg: # 02b875 Knapp Kantbredd: 2 Knappkant Färg: # 02b875 Knappbokstavsavstånd: 1 bild Lägg till knappikon: Ja Knappikon: [lägg till ikon]
Det är allt. Om du vill förbättra dina prenumerationsformulär kan du använda Bloom, Divi-e-postalternativet och plugin för leadgenerering speciellt utformad för att hjälpa dig att öka din e-postlista.
Optin e-postmodul innehåll alternativ
På fliken innehåll hittar du alla innehållselement i modulen, till exempel text, bilder och ikoner. Allt som styr vad visas i din modul hittas alltid på den här fliken.
Titel
Ange titeln på ditt registreringsformulär här.
Knapptext
Ange texten för registreringsknappen här.
Innehåll
I det här fältet kan du ange innehållet i SignUp-modulen.
Tjänsteleverantör
Här kan du välja vilken e-postleverantör du använder. Modulen stöder för närvarande integrationer MailChimp , Aweber et Feedburner. Välj din leverantör från listan och fortsätt sedan till följande alternativ.
MailChimp Listor
Om du har valt MailChimp som leverantör visas detta alternativ. Här kan du välja MailChimp-listan för att lägga till kunder. Om du inte ser en lista här måste du se till att MailChimp API-nyckel är inställd i ePanel och att du har minst en lista på ett MailChimp-konto. Om du har lagt till en ny lista, men den inte visas här, aktiverar du alternativet 'Regenerera MailChimp-listor' i ePanel. Glöm inte att inaktivera den när listan har återskapats.
Aweber's Annonser
Om du har valt Aweber som leverantör visas detta alternativ. Här kan du välja Aweber-listan för att lägga till kunder. Om du inte ser en lista här måste du se till att Aweber är korrekt konfigurerad i ePanel och att du har minst en lista på ett Aweber-konto. Om du har lagt till en ny lista, men den inte visas här, aktiverar du alternativet "Regenerera Aweber-listor" i ePanel. Glöm inte att inaktivera den när listan har återskapats.
Feedburner Titel
Om du har valt Feedburner som leverantör visas detta alternativ. Så här identifierar du ditt Feedburner-konto. Du måste ange din flödestitel, vilken kan hittas här .
Använd bakgrundsfärgen
Om den är aktiverad kommer en bakgrundsfärg att appliceras på modulen. Om en bakgrundsfärg har aktiverats läggs ytterligare vaddering in i modulen för att separera textinnehållet från den synliga kanten på modulen. Om en bakgrundsfärg inte är aktiverad blir modulbakgrunden transparent och extra fyllning tas bort.
Bakgrundsfärg
Du kan göra din inskription till den färg du vill ha med hjälp av färgväljaren. Välj samma färg som sektionens bakgrund för att skapa en bred eller kantlös effekt.
Administrationsetikett
Detta ändrar moduletiketten i konstruktorn för enkel identifiering. När du använder vyn WireFrame i Visual Builder visas dessa etiketter i modulblocket i Divi Builder-gränssnittet.
Email Optin avsnitt design
På fliken Design hittar du alla modulstylingsalternativ, som teckensnitt, färger, storlek och avstånd. Det här är fliken du använder för att ändra utseendet på din modul. Varje Divi-modul har en lång lista med designinställningar som du kan använda för att ändra vad som helst.
Formfältets bakgrundsfärg
E-postformuläret innehåller två inmatningsfält för användarnamn och lösenord. Du kan använda den här inställningen för att justera bakgrundsfärgen för dessa fält.
Textfärg i formulärfältet
Optin-e-postformuläret innehåller två inmatningsfält för användarnamn och lösenord. Du kan använda den här inställningen för att justera textfärgen i dessa fält. Om du har justerat bakgrundsfärgen i formulärfältet kan du också justera textfärgen för att säkerställa ett harmoniskt färgförhållande.
Bakgrundsfärg
När ett inmatningsfält fokuseras med en besökares mus ändras färgerna för att tydligt ange vilket fält som är aktivt. Här kan du definiera bakgrundsfärgen för de fokuserade fälten.
Textfärg i fokus
När ett inmatningsfält fokuseras med en besökares mus ändras färgerna för att tydligt ange vilket fält som är aktivt. Här kan du definiera textfärgen för de fokuserade fälten.
Använd fokusgränsfärgen
Om du vill lägga till kantlinjer i inmatningsfält när de är i fokus kan du aktivera det här alternativet.
Färgen på fokusgränsen
Genom att använda den här inställningen kan du ändra färgen på gränsen som visas i de inriktade inmatningsfälten.
Textfärg
Om bakgrundsfärgen är mörk bör textfärgen ställas in på "Ljus". Å andra sidan, om bakgrundsfärgen är ljus, bör textfärgen ställas in på "Mörk".
Textorientering
Den här rullgardinsmenyn låter dig ange riktningen för din text som ska lämnas motiverad, centrerad eller höger motiverad.
Rubrikrubrik
Du kan ändra typsnittet i rubriktexten genom att välja önskat typsnitt i rullgardinsmenyn. Divi levereras med dussintals fantastiska teckensnitt som drivs av Google-teckensnitt. Som standard använder Divi teckensnittet Open Sans för all text på din sida. Du kan också anpassa stilen på din text med fetstil, kursiv, versaler och understrukna alternativ.
Rubrikstorlek
Här kan du justera storleken på rubriktexten. Du kan dra avståndsreglaget för att öka eller minska storleken på din text eller direkt ange värdet för önskad textstorlek i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.
Rubriktextfärg
Som standard visas alla textfärger i Divi i vitt eller mörkgrått. Om du vill ändra färgen på rubriktexten väljer du önskad färg från färgväljaren med det här alternativet.
Rubrikbokstavsavstånd
Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i rubriktexten, använd avståndsreglaget för att justera utrymmet eller ange önskad avståndsstorlek i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på ditt storlek för att ändra enhetstyp.
Rubrikrad Höjd
Radhöjden påverkar utrymmet mellan varje rad i rubriktexten. Om du vill öka utrymmet mellan varje rad använder du skjutreglaget för att justera mellanslag eller anger önskad avståndsstorlek i inmatningsfält till höger om markören. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på ditt storlek för att ändra enhetstyp.
Kroppsfont
Du kan ändra ditt kroppsteckensnitt genom att välja önskat typsnitt i rullgardinsmenyn. Divi levereras med dussintals fantastiska teckensnitt som drivs av Google-teckensnitt. Som standard använder Divi Open Sans-teckensnittet för all text på din sida. Du kan också anpassa stilen på din text med fetstil, kursiv, versaler och understrukna alternativ.
Kroppstypstorlek
Här kan du justera din kroppsstorlek. Du kan dra avståndsreglaget för att öka eller minska storleken på din text eller direkt ange värdet för önskad textstorlek i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra dess enhetstyp.
Kroppstextfärg
Som standard visas alla textfärger i Divi i vitt eller mörkgrått. Om du vill ändra färgen på din text väljer du önskad färg från färgväljaren med det här alternativet.
Spacing av kropps bokstäver
Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din text, använd skjutreglaget för att justera mellanslag eller ange önskad avståndsstorlek i inmatningsfältet till höger om skjutreglaget. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra dess enhetstyp.
Höjd på kroppslinjen
Radhöjd påverkar utrymmet mellan varje textrad i din kropp Om du vill öka utrymmet mellan varje rad, använd avståndsreglaget för att justera mellanslag eller ange önskad avståndsstorlek i inmatningsfältet till höger om markören. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra dess enhetstyp.
Använd gränsen
Om du aktiverar det här alternativet placeras en kant runt din modul. Denna kant kan anpassas med följande villkorliga parametrar.
Färg på gränsen
Det här alternativet påverkar färgen på din kant. Välj en anpassad färg från färgväljaren för att tillämpa den på din kant.
Bredden av gränsen
Som standard är gränserna 1 pixel breda. Du kan öka detta värde genom att dra områdesreglaget eller ange ett anpassat värde i inmatningsfältet till höger om reglaget. Anpassade måttenheter stöds, vilket innebär att du kan ändra standardenheten från "px" till något annat som em, vh, vw etc.
Gränsstil
Gränser stöder åtta olika stilar: solid, prickad, prickad, dubbel, spår, ås, överlägg och start. Välj önskad stil i rullgardinsmenyn för att tillämpa den på din gräns.
Anpassad marginal
Marginalen är utrymmet som läggs till på utsidan av din modul, mellan modulen och nästa element ovanför, under eller till vänster och höger om den. Du kan lägga till anpassade marginalvärden till någon av modulens fyra sidor. Ta bort den anpassade marginalen genom att ta bort mervärdet från inmatningsfältet. Som standard mäts dessa värden i pixlar, men du kan ange anpassade måttenheter i inmatningsfälten.
Anpassad stoppning
Infill är utrymmet som läggs till i din modul, mellan modulens kant och dess interna element. Du kan lägga till anpassade utfyllnadsvärden till någon av modulens fyra sidor. Ta bort den anpassade marginalen genom att ta bort mervärdet från inmatningsfältet. Som standard mäts dessa värden i pixlar, men du kan ange anpassade måttenheter i inmatningsfälten.
Använd anpassade stilar för knappen
Om du aktiverar detta alternativ visas olika inställningar för knappanpassning som du kan använda för att ändra utseendet på modulens knapp.
Knapptextstorlek
Denna inställning kan användas för att öka eller minska storleken på texten i knappen. Knappen anpassar sig när textstorleken ökar och minskar.
Knapptextfärg
Som standard antar knapparna accentfärgen för ditt tema som definierats i Theme Customizer. Med det här alternativet kan du tilldela en anpassad textfärg till knappen i den här modulen. Välj din anpassade färg med hjälp av färgväljaren för att ändra knappfärg.
Knapp bakgrundsfärg
Som standard har knapparna en transparent bakgrundsfärg. Detta kan ändras genom att välja önskad bakgrundsfärg från färgväljaren.
Border Width-knappen
Alla Divi-knappar har en två pixlar kant som standard. Denna gräns kan ökas eller minskas med den här inställningen. Gränser kan tas bort genom att ange värdet 2.
Knapp kantfärg
Som standard antar knappgränserna ditt temas accentfärg enligt definitionen i Theme Customizer. Med det här alternativet kan du tilldela en anpassad kantfärg till knappen i den här modulen. Välj din anpassade färg med hjälp av färgväljaren för att ändra färgen på knappramen.
Knappen gränsradie
Gränsens radie påverkar rundan på hörnen på dina knappar. Som standard har knapparna i Divi en liten kantradie som avrundar hörnen med 3 pixlar. Du kan minska detta värde till 0 för att skapa en fyrkantig knapp eller öka det avsevärt för att skapa knappar med cirkulära kanter.
Spacing av knapp bokstäver
Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din knapptext använder du skjutreglaget för att justera mellanslag eller anger önskad avståndsstorlek i inmatningsfältet till höger om skjutreglaget. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.
Knapp typsnitt
Du kan ändra teckensnittet för din knapptext genom att välja önskat teckensnitt i rullgardinsmenyn. Divi levereras med dussintals fantastiska teckensnitt som drivs av Google-teckensnitt. Som standard använder Divi Open Sans-teckensnittet för all text på din sida. Du kan också anpassa stilen på din text med fetstil, kursiv, versaler och understrykningsalternativ.
Lägg till en knappikon
Inaktiverad, den här inställningen tar bort ikoner från din knapp. Som standard visar alla Divi-knappar en pilikon på svävaren.
Knappikon
Om ikoner är aktiverade kan du använda den här inställningen för att välja vilken ikon du vill använda i din knapp. Divi har olika ikoner att välja mellan.
Färgikonen knapp
Om du justerar den här inställningen ändras färgen på ikonen som visas på din knapp. Som standard är ikonfärgen densamma som knappens textfärg, men den här inställningen låter dig justera färgen oberoende av varandra.
Ikonplaceringsknapp
Du kan välja att visa ikonen för din knapp till vänster eller höger om din knapp.
Visa endast ikon när du svävar över knappen
Som standard visas knappikoner bara när du svävar. Om du vill att ikonen alltid ska visas stänger du av den här inställningen.
Knapphöjd Textfärg
När knappen hålls över en besökares mus kommer den här färgen att användas. Färgen ändras från basfärgen som definierades i tidigare inställningar.
Höger knapp bakgrundsfärg
När knappen hålls över en besökares mus kommer den här färgen att användas. Färgen ändras från basfärgen som definierades i tidigare inställningar.
Färghake Gränssnittsknapp
När knappen hålls över en besökares mus kommer den här färgen att användas. Färgen ändras från basfärgen som definierades i tidigare inställningar.
Höger Border Radius Button
När knappen hålls över en besökares mus kommer detta värde att användas. Värdet ändras från basvärdet som definierats i tidigare inställningar.
Pekskärmknapp
När knappen hålls över en besökares mus kommer detta värde att användas. Värdet ändras från basvärdet som definierats i tidigare inställningar.
E-post Optin Avancerade alternativ
På den avancerade fliken hittar du alternativ som mer erfarna webbdesigners kan hitta användbara, till exempel anpassade CSS- och HTML-attribut. Här kan du använda anpassad CSS på något av modulens många element. Du kan också tillämpa anpassade CSS-klasser och ID på modulen, som kan användas för att anpassa modulen i ditt barns temas style.css-fil.
CSS ID
Ange ett valfritt CSS-ID som ska användas för den här modulen. Ett ID kan användas för att skapa en anpassad CSS-stil eller för att länka till vissa delar av din sida.
CSS klass
Ange de valfria CSS-klasserna som ska användas för den här modulen. En CSS-klass kan användas för att skapa anpassad CSS-styling. Du kan lägga till flera klasser, åtskilda av ett mellanslag. Dessa klasser kan användas i ditt Divi-underordnade tema eller i det anpassade CSS-formatmallen som du lägger till på din sida eller webbplats med hjälp av temalternativ Divi eller parametrar på Divi Builder-sidan.
Anpassad CSS
Anpassad CSS kan också tillämpas på modulen och vilken modul som helst. I avsnittet Anpassad CSS hittar du ett textfält där du kan lägga till anpassade CSS-formatmallar direkt till varje element. CSS-poster i dessa inställningar är redan inslagna i stiltaggar. Så skriv bara in CSS-reglerna åtskilda av semikolon.
Synlighet
Med det här alternativet kan du styra enheterna där din modul visas. Du kan välja att inaktivera din modul på surfplattor, smartphones eller stationära datorer individuellt. Detta är användbart om du vill använda olika mods på olika enheter, eller om du vill förenkla mobildesignen genom att eliminera vissa element från sidan.
Andra handledning om WordPress Theme Divi
- 5 webbplatser för restaurang användning Divi tema
- Så här lägger du till text på en Divi WooCommerce-produkt
- Så här byter du menyfärg mellan Divi-sidor
- Hur du anpassar rutorna på en blogg med Divi
- Hur man använder roll Divi editor på Wordpress
- Hur man skapar en Divi-skjutreglage på full skärm
- Hur man ändrar menyens färg mellan Divi-sidor
- Funktioner du antagligen inte känner till Divi
- Så här använder du Divi Builder på WordPress
- Så här använder du Divi video-rullningsmodulen
- Så här använder du Divi Builder Flip-modulen
- Hur man lägger till en vittnesmodul om Divi Builder
- Så här använder du Divi-textmodulen
- Hur man skapar en reglage på Divi
- Hur man redigerar en Divi-användarroll
- Så här använder du Divi Social Media-modulen
- Hur man använder butikmodulen på temat WordPress Divi
- Så här använder du Divi sidebar-modulen
- Så här använder du Divi Price Table Module
- Hur man använder titelfodulen i Divi-publikationer
- Hur lägger jag till en videomodul av Divi
- Så här använder du artikelnavigationsmodulen
- Så här använder du Divi-sökmodulen
- Så här använder du Divi-plånboksmodulen
- Hur man använder personmodulen på Divi Builder
- Hur man använder plånboksmodulen med Divi-filter
- Hur man använder skjutreglaget med hela bredden
- Så här använder du Divi Builder Image Module
- Så här använder du Divi Builder med fullbredd navigationsmodul
- Hur man använder modulen för bildgalleri
- Så här använder du Divi Builder Full-Width Card Module
- Så här använder du Divi Full Width Portfolio Module
- Hur du använder Divi-modulen med full bredd
- Så här använder du Divi Counter Module
- Hur man använder artiklarna på Divi Builder
- Så här använder du Divi Email Optin-modulen
[vc_row center_row= »yes »][vc_column width= »1/2″][vcex_button target= »blank » layout= »expanded » align= »center » font_family= »Raleway » font_weight= »700″ stil= »platt » custom_background= »#18b69d » custom_hover_background= »#118d7a » custom_color= »#ffffff » custom_hover_color= »#ffffff » icon_right= »fa fa-nedladdning »]LADDA NED DET DIVI TEMA [/vcex_button][/vc_column][vc_column width= »1/2″][vcex_button url= »https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials » target= blank » layout= »expanderad » align= »center » font_family= »Raleway » font_weight= »700″ style= »platt » custom_background= »#c4226e » custom_hover_background= »#8d184f » custom_color= »#ffffff » custom_hover_color= »#ffffff » icon_right= »fa fa-ladda ner »]NEDLADDA MALL DIVI[/vcex_button][/vc_column][/vc_row]
