Wyprzedaż urodzinowa Elementora

Enjoy 60% Off on new purchases, renewal and upgrades.

00 Dni
:
00 godziny
:
00 Minuty
:
00 sekundy

Kup Teraz

Jak zaprojektować kreatywny wyskakujący formularz logowania w Divi

Rifat Divi Tutorials Oct 15, 2021

Przyjemny formularz logowania pomaga zwiększyć komfort korzystania z Twojej witryny. Ideą naszego dzisiejszego samouczka jest stworzenie formularza logowania za pomocą Divi Builder, który pojawi się po kliknięciu przycisku logowania na stronie głównej. W większości przypadków po kliknięciu przycisku logowania jesteśmy przekierowywani na stronę logowania, podczas gdy prosty formularz pop-up jest o wiele wygodniejszy i odświeżający. Dlatego dzisiaj nauczymy się projektować kreatywny wyskakujący formularz logowania. Stworzymy to za pomocą modułu logowania Divi i niektórych modułów przycisków. Więc zacznijmy dzisiejszy samouczek bez zwłoki.

Uwaga: będziemy pracować tylko z projektem front-end. Jeśli ktoś ma problem z zalogowaniem, np. ktoś musi zresetować hasło, musimy przejść do tradycyjnej strony logowania. Dla osób, które są zakochane w niestandardowych stronach logowania, ten samouczek jest idealnym rozwiązaniem.

Zapowiedź

Oto dzisiejszy podgląd projektu. Widzimy, że kliknięcie przycisku logowania powoduje pojawienie się formularzy logowania, a po kliknięciu wylogowania pojawia się wyskakujące okienko z ostrzeżeniem przed wylogowaniem.

Wyskakujący formularz logowania z przyciskami logowania/wylogowania

Aby rozpocząć projektowanie, najpierw musisz przejść do Divi

Niesamowite oferty

Elementor 6 urodziny z do 60% zniżki

Zacząć teraz

Teraz musimy pobrać nagłówek i stopkę pakietów układu Divi's Crowdfunding z tej strony . Wprowadź swój identyfikator e-mail i kliknij pobierz.

Następnie zobaczysz opcję ponownego pobrania i kliknij ją. Teraz rozpakuj plik po zakończeniu pobierania i wróć do kreatora Divi i kliknij opcję przenoszenia.

Teraz postępuj zgodnie z dalszą procedurą opisaną poniżej.

  • Wybierz kartę importu z wyskakującego okienka przenoszenia.
  • Prześlij pobrany plik Json z rozpakowanego folderu.
  • Kliknij przycisk importu.
  • Następnie kliknij edytuj, aby dokonać zmian w nagłówku.

Część 1: Tworzenie przycisku logowania/wylogowania

Najpierw otwórz warstwy, abyśmy mogli łatwo zobaczyć wszystkie elementy. Z górnego rzędu sekcji nagłówka usuń moduły mediów społecznościowych.

Tworzenie przycisku logowania

Istnieje już przycisk logowania w górnym wierszu czwartej kolumny. Zmodyfikujemy to.

Zaktualizuj następujące elementy na karcie projektu:

  • Ikona przycisku: ikona kłódki (patrz zrzut ekranu)
  • Umieszczenie ikony przycisku: w lewo
  • Pokaż tylko ikonę po najechaniu na przycisk: NIE
  • Wypełnienie: 0,5 em góra, 0,5 em dół, 2 em po lewej, 0,7 em w prawo

Dodaj dwie niestandardowe klasy CSS do przycisku z zakładki Zaawansowane w następujący sposób:

  • Klasa CSS: et-toggle-popup et-popup-login-button

Przycisk wylogowania

Aby utworzyć nasz przycisk wylogowania, sklonuj istniejący przycisk logowania w kolumnie 4. Ponadto oznacz je w celu dalszej identyfikacji.

Zmień tekst sklonowanego przycisku na „Wyloguj”.

Zmień ikonę przycisku z zakładki projektu, jak zaznaczono poniżej.

Na koniec zmień klasę CSS na karcie Zaawansowane.

  • Klasa CSS: et-toggle-popup et-popup-logout-button

Część 2: Tworzenie wyskakującej strony

Z powodzeniem stworzyliśmy przyciski. Nie, zaprojektujemy sekcję wyskakującą, która będzie działać jako formularz. Aby to stworzyć, dodaj zwykłą sekcję pod sekcją nagłówka.

Dodawanie sekcji i ustawienia

Dajmy tej sekcji białe tło.

  • Kolor tła: #ffffff

Dokonaj następujących zmian na karcie projektu przekroju.

  • Szerokość: 100%
  • Maksymalna szerokość: 800px (komputer), 80% (tablet), 100% (telefon)
  • Wyrównanie sekcji: Środek
  • Wysokość: auto (komputer i tablet), 100% (telefon)
  • Maksymalna wysokość: 100%
  • Padding: 0px na górze, 0px na dole
  • Zaokrąglone rogi: 10px
  • Cień pudełka: patrz zrzut ekranu
  • Pozycja pionowa cienia pudełka: 0px
  • Siła rozmycia cieni w pudełku: 100px
  • Siła rozprzestrzeniania się cieni w pudełku: 50px

Dodajmy klasę CSS z zakładki Zaawansowane.

  • Klasa CSS: et-popup-login

Następnie dodaj następujący kod CSS w głównym elemencie.

overscroll-behavior: contain;

Następnie dokonaj pewnych zmian w widoczności i pozycji.

  • Przepełnienie poziome: ukryte
  • Przepełnienie pionowe: auto
  • Pozycja: Naprawiono
  • Lokalizacja: Centrum Centrum
  • Indeks Z: 999999

Dodawanie i ustawienia wierszy

Dodajmy wiersz z jedną kolumną do nowej sekcji.

Otwórz ustawienia wiersza i dokonaj następujących zmian.

  • Użyj niestandardowej szerokości rynny: TAK
  • Szerokość rynny: 1
  • Szerokość: 100%
  • Maksymalna szerokość: 100%
  • Wypełnienie: góra 0px, dół 5vh

Część 3: Tworzenie ikony zamykania wyskakującego okienka

Użyjemy modułu notki, aby utworzyć ikonę zamykającą wyskakujące okienko.

Usuń teksty modułów z ustawień i dodaj następującą ikonę.

  • Użyj ikony: TAK
  • Ikona: ikona „x” (patrz zrzut ekranu)

Zastosuj następujące ustawienia z karty projektu.

  • Kolor ikony: #004e43
  • Wyrównanie obrazu/ikony: wyśrodkowane
  • Użyj rozmiaru czcionki ikony: TAK
  • Rozmiar czcionki ikony: 50px
  • Szerokość: 50px
  • Wyrównanie modułu: w prawo
  • Wysokość: 50px

Dodaj klasę CSS do modułu notki z zakładki Zaawansowane.

  • Klasa CSS: et-toggle-popup

Część 4: Tworzenie formy

Nasz formularz logowania ma dwa projekty, jeden do logowania, a drugi do wylogowania. Będą więc dwa różne moduły formularzy logowania. Pierwszy pojawi się, gdy użytkownik jest wylogowany i musi się zalogować, a drugi, gdy użytkownik jest zalogowany i chce się wylogować. Prosta koncepcja, wracajmy do pracy.

Tworzenie formularza wylogowania

Dodajmy moduł logowania, aby utworzyć nasz formularz wylogowania.

Teraz otwórz ustawienia modułu formularza i zmodyfikuj na karcie treści.

  • Przekieruj do bieżącej strony: TAK
  • Użyj koloru tła: NIE

Karta projektu

  • Kolor tła pól: rgba (0,78,67,0,05)
  • Kolor tła pola ostrości: rgba (0,78,67,0.15)
  • Wyrównanie tekstu: do środka
  • Kolor tekstu: ciemny
  • Czcionka tytułu: Poppins
  • Grubość czcionki tytułu: pół pogrubiona
  • Kolor tekstu tytułu: #000000
  • Wysokość wiersza tytułu: 1,3 em
  • Czcionka ciała: Work Sans

Wróćmy teraz do sekcji nagłówka z warstw. Następnie otwórz ustawienia z przycisku for z czwartej kolumny pierwszego rzędu. Przejdź do zakładki projektu i otwórz opcję przycisku. Następnie kliknij opcję z trzema kropkami i wybierz „kopiuj styl przycisku”.

Teraz wklej go do utworzonego przez nas formularza logowania.

Zaktualizujemy styl przycisku dla naszego formularza logowania.

  • Użyj niestandardowych stylów dla przycisku: TAK
  • Kolor tekstu przycisku: #ffffff
  • Kolor tła przycisku: #004e43
  • Kolor tła przycisku (najechanie): #00683c
  • Szerokość obramowania przycisku: 0px
  • Wypełnienie przycisków: 15px góra, 15px dół

Prześlijmy też ustawienia rozmiaru.

  • Szerokość: 100%
  • Maksymalna szerokość: 80% (komputer), 90% (tablet), 95% (telefon)
  • Wyrównanie modułu: Środek

Teraz przejdź do zakładki zaawansowane i dodaj klasę CSS i niestandardowy CSS, jak napisano poniżej.

  • Klasa CSS: et-logged-out-form

Dodaj następujący kod do pola Opis logowania.

width: 100% !important;
float: none !important;

Następnie dodaj ten kod do pola Formularz logowania.

width: 100% !important;
padding: 0px !important;

To sprawia, że formularz logowania jest podobny do tego.

Tworzenie formularza „Zalogowanyâ€

Skończyliśmy z formularzem „Wylogowanie” i teraz utwórzmy formularz „Zalogowany” z inną zawartością, aby rozszerzyć wrażenia użytkownika. Aby to zrobić, sklonujmy istniejący formularz logowania.

Teraz zaktualizuj nazwy dla każdego formularza. Następnie otwórz formularz "Zalogowany" z ustawienia otwartego tekstu karty treści. Następnie z pola tytułowego po prawej stronie pojawi się menu rozwijane. Otwórz go i wybierz „Tytuł witryny”.

Otwórz ustawienia dynamicznego tytułu witryny i zaktualizuj je w następujący sposób.

  • Wcześniej: „Próbujesz wylogować się z”
  • Po: „. „

Teraz edytuj ustawienia opisu zgodnie z własnym wyborem, ale umieść opis jako Nagłówek 3.

W wielu formularzach logowania do witryn internetowych widzieliśmy niestandardową wiadomość dołączoną do linku „wyloguj”. Aby to utworzyć, dostosujemy opcję tekstu podstawowego na karcie Zaawansowane.

  • Wybierz kartę łącza w opcjach tekstu treści.
  • Czcionka łącza: Work Sans
  • Grubość czcionki łącza: pół pogrubiona
  • Styl czcionki łącza: TT
  • Wyrównanie tekstu łącza: do środka
  • Kolor tekstu linku: #ffffff

Przejdź do zakładki Zaawansowane i dodaj klasę CSS oraz Niestandardowy CSS.

  • Klasa CSS: et-logged-in-form

Niestandardowy CSS dla formularza logowania:

display:none;

Część 5: Kody niestandardowe

Musimy dodać moduł kodu, aby dodać niestandardowe kody. Dodajmy moduł kodu pod ostatnim modułem logowania.

Kod CSS

Dodaj podany kod CSS w module w obrębie znaczników stylu .

/* hide popup section */
.et-popup-login {
  display: none;
}
 
/* hide login button when logged in */
.logged-in .et-popup-login-button {
  display: none !important;
}
 
/* hide logout button when logged out */
.et-popup-logout-button {
  display: none !important;
}
 
/* show logout button when logged in */
.logged-in .et-popup-logout-button {
  display: inline-block !important;
}
 
/* hide logged out form when logged in */
.logged-in .et-logged-out-form {
  display: none !important;
}
 
/* hide logged in form when logged out */
.et-logged-in-form {
  display: none !important;
}
 
/* show logged in form when logged in */
.logged-in .et-logged-in-form {
  display: block !important;
}
 
/* style logout link within logged in form */
.et-logged-in-form a {
  display: block;
  padding: 15px 1em;
  border-radius: 8px;
  background: #004e43;
  max-width: 400px;
  margin: 20px auto 0px;
}
.et-toggle-popup {
  cursor: pointer;
}
 
/* show hidden elements in visual builder */
body.et-fb .et-popup-login,
body.et-fb .et-logged-out-form {
  display: block !important;
}
body.et-fb .et-popup-login-button {
  display: inline-block !important;
}

Kod JQuery

Teraz przypisz następujący kod JQuery w module w tagach skryptu .

(function ($) {
  $(document).ready(function () {
    $(".et-toggle-popup").click(function (e) {
      e.preventDefault();
      $(".et-popup-login").fadeToggle(500);
    });
  });
})(jQuery);

Wynik projektu

Oto wynik naszego projektu. Wszystko jest na swoim miejscu i działa idealnie.

Ostatnie słowa

Dzisiaj widziałeś, jak zaprojektować kreatywny, niestandardowy formularz logowania z modułem logowania Divi . W ten sposób możesz dopasować estetykę strony na niestandardowym panelu logowania. Mam nadzieję, że ten samouczek okaże się przydatny, a jeśli tak, udostępnienie będzie wspaniałe!