Gå till innehållet

Divi tutorial: Hur man använder anslutningsmodulen (Logga in)

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Inloggningsmodulen (inloggning) visar ett WordPress-inloggningsformulär, Divi-stil, var som helst på din sida. Om du använder WordPress med en medlems område kan det vara mycket användbart att lägga till ett inloggningsformulär direkt på en sida (istället för att omdirigera människor till WordPress-inloggningsformuläret som använder en annan stil för ditt tema).

inloggningssida divi wordpress.png handledning

Så lägger du till en inloggningsmodul på din sida

Innan du kan lägga till en anslutningsmodul till din sida måste du först hoppa in i Divi Builder. När Divi-temat har installerats 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 Använd Visual Builder när du surfar på din webbplats i förgrunden om du är ansluten till din WordPress-instrumentpanel.

divi byggare

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 först lägga till en rad på din sida.

anslut modul divi.png

Leta reda på inloggningsmodulen 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 "Connect" och sedan klicka på "Enter" för att automatiskt hitta och lägga till anslutningsmodulen! När modulen har lagts till hälsas du av listan över modulalternativ. Dessa alternativ är uppdelade i tre huvudgrupper: Innehåll , Conception et advanced .

Exempel på användningsfall: Lägg till ett anpassat inloggningsformulär till en medlems inloggningssida

Eftersom medlemswebbplatser kräver att användaren loggar in på något eller hela innehållet gör inloggningsmodulen det enkelt att lägga till ett inloggningsformulär till din egen inloggningssida. Du kan också välja att omdirigera användare till det här formuläret istället för WordPress-inloggningssidan.

Här är en enkel inloggningssida med inloggningsmodulen. Jag visar hur du skapar:

anslut till blogpascher.png

Med Visual Builder lägger du till ett nytt standardavsnitt på medlemskapets inloggningssida med en fullbreddrad (1 kolumn). Sätt sedan in anslutningsmodulen på linjen.

anslut modul divi.png

Uppdatera anslutningsinställningarna enligt följande:

Innehållsalternativ

Titel: Anslutning
Innehåll: [ange en kort kursbeskrivning eller instruktioner för inloggning] Omdirigera till aktuell sida: JA

Designalternativ

Fältets bakgrundsfärg: # f0f0f0 Textfärg: Dark Rubrikfont: 35px Rubrikfärg: # 888888 Kroppstypstorlek: 16px Kant: Ja Kantfärg: # 0c71c3 Kantbredd: 1 px Anpassad vaddering: 50 pixlar Upp, 50 pixlar Höger, 50 pixlar Nedre, 50 pixlar vänster Använd anpassade stilar för knapp: JA Knappens textstorlek: 26 pixlar Knappens textfärg: #ffffff Knappfärg: # 0c71c3 knapp: 0px Font-knapp: standard, versaler Lägg till knappikon: JA Knappikon: Visa endast ikonen när du svävar över knappen: NEJ

Exempel på inloggningssida divi.jpg

Det är allt. Medlemmens områdesajt har nu ett personligt inloggningsformulär där användarna omdirigeras när de behöver logga in på kursen. Du behöver inte nöja dig med standard WordPress-inloggningsformuläret.

bloggpascher login page.png

Alternativ för anslutningsmodulens innehåll

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.

innehållsalternativmodul connection.png

Titel

Titeln visas i inloggningsrutan ovanför inloggningsformuläret.

Innehåll

Innehållet visas i inloggningsrutan under titeln. Om du vill lägga till en ytterligare beskrivning kan du använda fältet. Låt det annars vara tomt.

Omdirigera till den aktuella sidan

Här kan du välja om användaren ska omdirigeras till den aktuella sidan.

Använd bakgrundsfärgen

Om du vill ge ditt inloggningsformulär en solid bakgrundsfärg, välj "ja" för det här alternativet och bakgrundsfärgen du väljer i nästa alternativ används.

Bakgrundsfärg

Välj en bakgrundsfärg som ska visas som bakgrund i din inloggningsruta. Om du valde att stänga av bakgrundsfärger i det föregående alternativet, har den färgen ingen effekt.

Administratörsetikett

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.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Stilalternativ för inloggningsmodulen

På fliken Design hittar du alla stilalternativ för modulen, 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.

option design module connection.png

Formfältets bakgrundsfärg

Inloggningsformulä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

Inloggningsformulä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 formulärfältets bakgrundsfärg kan du också justera textfärgen för att säkerställa en jämn 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.

Fokusera textfä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 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

Här kan du välja om din text ska vara ljus eller mörk. Om du arbetar med en mörk bakgrund bör din text vara ljus. Om din bakgrund är ljus bör din text vara mörk.

Textorientering

Här kan du justera textens inriktning.

Rubrik teckensnitt

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.

avsnitt header divi.png

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.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

gränsområdet modul divi.png

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 margin.png

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.

med knapparna divi-modul connection.png

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.

Avancerade alternativ för inloggningsmodulen

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.

inloggningsmodul

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-stilarket som du lägger till på din sida eller på din webbplats med hjälp av Divi-temalternativ eller Divi Builder-sidinställningarna.

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 Divi tutorials

Den här artikeln innehåller kommentarer 2

  1. God morgon.

    Utmärkt artikel.
    Ändå har jag ett problem på mitt inloggningsformulär som på din bild som jag ser: "Användarnamn" och jag skulle vilja anpassa det här fältet eftersom jag tycker att det förstör allt. Hur kan jag göra ?

    tack

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
12 aktier
del6
tweet1
Enregistrer5