Hoe de Elementor Cloud-aanmeldingspagina aan te passen?

Blair Jersyer E Jul 27, 2022

Als je Elementor Cloud al een tijdje gebruikt, heb je misschien een inlogpagina gezien die er " eenvoudig " uitziet. Hoewel we van eenvoud houden, hebben we liever een origineel en uniek item. Als het gaat om de inlogpagina die werkt als de ingang van een huis, moet deze anders zijn dan de toegangsdeuren van andere huizen.

In deze zelfstudie laten we u zien hoe u de inlogpagina van een Elementor Cloud-website kunt aanpassen. Maar laten we eerst eens kijken of je dit echt nodig hebt.

Waarom een ​​aangepaste inlogpagina maken?

Waarom inderdaad! Welnu, zoals ik hierboven heb vermeld, willen we allemaal iets unieks hebben dat opvalt. Laten we ons voorstellen dat u een eCommerce-website maakt die behoorlijk succesvol is met lidmaatschap. Vind je het goed om een ​​inlogpagina te hebben die lijkt op andere Elementor Cloud-inlogpagina's? Absoluut niet.

Een van de voordelen van het hebben van een op maat gemaakte startpagina is om uw merk in het oog van de klant te versterken, wat natuurlijk een goed punt is. Laten we nu beginnen met de manier waarop u uw inlogpagina kunt aanpassen.

Maak geweldige websites

Met de beste gratis paginabuilder Elementor

Begin nu

InloggenDruk

LoginPress is een gratis WordPress -plug-in waarmee u uw WordPress-inlogpagina kunt aanpassen en niet alleen. Dankzij deze module kunt u uw achtergrond, uw inlogformulier wijzigen en andere authenticatiemechanismen (pro) toevoegen. U kunt uw gebruiker bijvoorbeeld toestaan ​​om in te loggen via Google, Twitter, Linkedin, etc.

Deze plug-in is gratis in de WordPress-repository, maar heeft ook een premiumversie met verschillende functies en is beschikbaar voor $ 49 per jaar.

Belangrijkste kenmerken:

  • Aangepaste aanmeldingsachtergronden
  • Aangepast logo
  • Sociaal inloggen
  • Voettekst inlogpagina toevoegen
  • Mooie Knopen
  • Diverse stijlen voor aanmeldingsformulieren
  • Niet geautoriseerde pagina
  • Aangepaste welkomstberichten

Achtergrond van Elementor Cloud-aanmeldingspagina wijzigen

We beginnen met het wijzigen van de Elementor Cloud-pagina die grotendeels wit is. Nadat u de plug-in hebt gedownload (zelfs de gratis versie), ziet u een menu met de naam " LoginPress ". Vanaf daar klikken we op " Aanpasser ".

Hiermee wordt een aanpasser geopend die lijkt op de thema-aanpasser. Vanaf daar klikt u op " Achtergrond ".

Standaard worden de plug-ins geleverd met een vooraf gedefinieerde achtergrond die u kunt gebruiken. Maar je kunt ook je eigen achtergrond uploaden als je wilt.

Sla uw wijzigingen op als u klaar bent.

Hoe de Elementor-aanmeldingsknop te verbergen

Met de inlogknop kan iedereen met een Elementor-account inloggen (terwijl ze toestemming moeten krijgen om toegang te krijgen tot de website). Mogelijk vindt u deze optie niet nodig, vooral als u wilt dat uw klant altijd inlogt met het account dat u voor hem heeft aangemaakt.

Hier gebruiken we de CSS-optie om de sectie met de login-knop van Elementor te verbergen.

U moet de volgende code in het CSS-tekstgebied plakken:

.lwe-button-container {
    display: none !important;
}

Vanaf dit moment zou u een inlogpagina moeten hebben die er als volgt uitziet.

Hoe de Elementor-beheerbalk te verbergen

Boven de inlogpagina ziet u een beheerdersbalk met links naar Elementor en het merk Elementor, samen met uw websitenaam. Als je dit wilt verbergen, kun je in dezelfde CSS-sectie het volgende CSS-fragment toevoegen:

.e-admin-bar {
    display:none!important;
}

Als je dit doet, wordt het formulier dicht bij de top geplaatst, wat niet echt mooi is. Wat we vervolgens willen, is het formulier zo centreren dat het er op mobiel en desktop aantrekkelijker uitziet.

Daarvoor moeten we de volgende code ook in de CSS-sectie plakken.

body.login {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

Een aangepast logo toevoegen

Helaas voor ons werken de logo-opties niet op de inlogpagina van Elementor Cloud . De reden hiervoor is dat het niet door WordPress is gemaakt, maar door Elementor. Dus de plug-in werkt dat logo niet effectief bij.

Om het logo te wijzigen, moeten we eerst het WordPress-pictogram verbergen en ons logo invoegen. De volgende code verbergt het standaard WordPress-pictogram.


#wp-logo i.dashicons {
    display:none !important;
}

Nu we JavaScript gebruiken, injecteren we ons logo. Het eerste dat u hier moet doen, is uw logo uploaden op de media en de URL naar uw logo kopiëren.

Nu is er in dezelfde sectie een CSS, we zullen de volgende JavaScript-code injecteren.

// we'll create the image
let image = document.createElement( 'img' );
image.src = 'https://codewatchers.elementor.cloud/wp-content/uploads/2022/07/site-logo-1.png';

// we'll give some style but this is optional
image.style.cssText="background:#333;margin: 15px 0;";

// we'll add the image to the logo section
document.querySelector( '#wp-logo' ).appendChild( image );

// we'll disable the default logo height
document.querySelector( '#wp-logo' ).style.cssText="height:auto";

Aan het einde heb je een inlogpagina die er als volgt uitziet:

Probleemoplossen

Het bewerken van de achtergrond werkt mogelijk niet. U moet de achtergrond bewerken met een CSS-code. Eerst, zoals eerder, moet je de achtergrond uploaden die je wilt gebruiken en deze toevoegen aan het CSS-fragment:

body.login {
    background-image: url(https://codewatchers.elementor.cloud/wp-content/plugins/loginpress/img/gallery/img-3.jpg) !important;
    position: relative;
}

Zorg ervoor dat u de tekst "ttps://codewatchers.elementor..../gallery/img-3.jpg" vervangt door uw werkelijke achtergrond en sla uw instellingen op.

We hopen dat u aan het einde van deze tutorial uw Elementor Cloud -inlogpagina kunt aanpassen.

Divi WordPress Theme