Vill du veta hur du skapar en inloggningssida med Elementor ?

I WordPress kan du gå på dindomän.com/wp-login.php för att gå till din webbplats inloggningssida. Om du har en stor webbplats med flera författare / användare kanske du vill skapa en anpassad inloggningssida med din egen design för att förstärka din webbplats varumärkesidentitet.

med Elementor, kan du skapa en anpassad inloggningssida för din WordPress-webbplats utan ansträngning – utan att koda eller installera några ytterligare plugins.

Elementor har en widget – inloggningswidgeten – som du kan använda för att skapa en anpassad inloggningssida. Elementor erbjuder till och med mallar för inloggningssidor så att du kan skapa en inloggningssida på nolltid.

Hur man skapar en anpassad WordPress-inloggningssida med Elementor

Observera att inloggningswidgeten endast är tillgänglig på Elementor Pro. Så innan du kan skapa en anpassad inloggningssida måste du uppgradera Elementor till proversionen.

1. Hur man skapar en inloggningssida från en mall

Som nämnts tidigare erbjuder Elementor mallar så att du kan skapa en personlig inloggningssida på nolltid. För att använda en, börja med att skapa en ny sida (Sidor -> Lägg till) Och ändra det med Elementor.

I Elementor-redigeraren klickar du på mappikonen för att öppna modellbiblioteket.

Leta efter en anpassad mall för inloggningssida. Du kan använda sökrutan för att underlätta ditt arbete. När du väl har hittat den modell du gillar, håll musen över den och klicka på knappen FÖRA IN.

Vänta ett ögonblick tills Elementor har laddat in modellen. När modellen är laddad kan du klicka på publicera att publicera den.

Där.

För att visa sidan kan du klicka på ikonen med tre rader i det övre hörnet av den vänstra panelen och välja Visa sida.

Och här är slutresultatet om du väljer samma modell som oss.

Hur man skapar en inloggningssida med Elementor

2. Hur man skapar en anpassad inloggningssida från grunden

Om du vill ha din egen inloggningssidesdesign kan du också skapa din anpassade inloggningssida från grunden. För att komma igång, skapa en ny sida och redigera den med Elementor.

I Elementor-redigeraren lägger du till ett nytt avsnitt genom att klicka på plusikonen. Du kan välja en kolumnstruktur baserat på den design du vill skapa.

När din sektion är klar lägger du till anslutningswidgeten genom att dra den från vänster panel till dukområdet.

Hur man skapar en inloggningssida med Elementor

Gå till fliken Innehåll på vänster panel för att ställa in grundläggande alternativ. Det finns 3 alternativblock som du kan manipulera:

1. Formulärfält

Du kan öppna detta block för att aktivera / inaktivera taggen och ställa in inmatningsstorlek.

2. Knapp

Du kan öppna detta block för att ställa in knapptext, knappstorlek och knappjustering.

3. Ytterligare alternativ

Du kan öppna detta block för att aktivera / inaktivera delar av din inloggningssida, t.ex. länk MGlömt lösenord och alternativet Kom ihåg mig. Eftersom du vill skapa en inloggningssida, aktivera alternativet Omdirigera efter inloggning och klistra in webbadressen för WordPress-instrumentpanelen (din domän.com/wp-admin) i det tillgängliga fältet. Du kan också aktivera alternativet Omdirigera efter utloggning om du önskar det.

Du kan aktivera alternativet Anpassad etikett om du vill använda anpassade etiketter och anpassade platshållare på din formen förbindelse.

När definition grundläggande alternativ slutförda, gå till på fliken Style att anpassa formen förbindelse. Det finns 5 block med stilalternativ:

1. Form

Du kan öppna detta block för att definiera utrymmet mellan linjerna, färgen på länkarna och färgen på länkarnas pekande.

2. Märka

Du kan bara se detta block om du aktiverar etiketten för formen. Du kan öppna det här blocket för att ställa in avstånd mellan formuläretiketter, textfärg och typografi (teckensnittsfamilj, teckenstorlek, teckensnittsstil, etc.).

3. Fält

Du kan öppna detta block för att definiera textfälternas färg, typografi (typsnittsfamilj, teckenstorlek, typsnitt osv.), Bakgrunden på kontrollen, färgen på kontrollens kant, bredden på gränsen av fältet och radien av fältets kant.

4. Knapp

Du kan öppna detta block för att anpassa inloggningsknappen. Du kan ställa in saker som knapptextfärg, sväva textfärg, typografi, knappbakgrundsfärg, kantradie och knapptextfyllning.

5. Inloggat meddelande

Du kan öppna detta block för att anpassa meddelandet när dina användare har loggat in. Här är meddelandet:

Du kan ställa in textfärg och typografi för meddelandet.

När du har utformat inloggningswidgeten kan du anpassa andra widgets på din sida. När sidredigeringen är klar publicerar / uppdaterar du din sida och du har skapat den anpassade inloggningssidan.

Läs också: Hur man exporterar och importerar Elementor-modeller

En viktig sak att notera. Ta inte bort filen efter att du har skapat den anpassade inloggningssidan wp-login.php på din WordPress-webbplats. Din WordPress-webbplats behöver fortfarande den här filen för att hantera inloggningsprocessen.

Skaffa Elementor Pro nu!

Slutsats

Här är ! Det är det för den här artikeln som visar hur du skapar en inloggningssida med Elementor. Om du har några frågor om hur du kommer dit flåt oss veta i commentaires.

Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.