Divi: Jak utworzyć wyskakujący formularz logowania

Czy chciałbyś stworzyć forma wyskakujące okienko logowania w Divi za pomocą przycisków logowania/wylogowania?

Stworzenie forma wyskakujące okienko logowania Divi może być skutecznym sposobem na ulepszenie wyglądu witryny i doświadczeń użytkownika podczas logowania/wylogowania. 

Pomysł jest taki, aby stworzyć forma login, który wyświetla się w wyskakującym okienku za każdym razem, gdy użytkownik kliknie przycisk logowania w nagłówku strony. 

Jest to wygodniejsze niż przekierowanie użytkownika na niestandardową stronę logowania.

W tym samouczku utworzymy wyskakujący formularz logowania z niestandardowymi przyciskami logowania i wylogowania w Divi. 

Korzystając z modułu Divi Login i kilku modułów przycisków, stworzymy bezproblemowe wyskakujące logowanie w interfejsie użytkownika, umożliwiając użytkownikom logowanie i wylogowanie bez przekierowywania na inną stronę.

Zacznijmy!

badanie

Oto krótkie spojrzenie na projekt, który będziemy tworzyć w tym samouczku.

Zwróć uwagę, jak zmieniają się odpowiednio przyciski logowania i wylogowania. A gdy użytkownik się zaloguje, pozostaje na bieżącej stronie. 

Dodatkowo wyskakujący formularz logowania wyświetla inną treść „ostrzeżenia” za każdym razem, gdy użytkownik próbuje się wylogować.

To, czego potrzebujesz, aby zacząć

Chociaż możesz dodać ten wyskakujący formularz logowania i niestandardowe przyciski logowania/wylogowania do dowolnego niestandardowego nagłówka, użyjemy gotowego nagłówka, aby przyspieszyć proces i szybko rozpocząć projektowanie.

Zaimportuj szablon nagłówka „Crowdfunding Layout Pack” do kreatora Divi

Aby rozpocząć, pobierz Nagłówek i stopka pakietu Divi Crowdfunding Layout Pack za darmo . Aby to zrobić, przejdź do wpis na blogu .

Następnie wprowadź swój adres e-mail, aby pobrać plik zip.

Następnie rozpakuj plik, aby był gotowy do importu.

Aby zaimportować plik do edytora motywów, wykonaj następujące kroki:

1. Przejdź do Divi > Kreator motywów.
2. Kliknij ikonę przenoszenia.
3. W wyskakującym oknie Przenośność wybierz kartę importu.
4. Wybierz poprzednio pobrany rozpakowany plik do zaimportowania.
5. Cliquer sur Importuj narzędzie do tworzenia motywów Divi Szablony.
6. Kliknij ikonę edycji, aby edytować zaimportowany nagłówek.

Tworzenie wyskakującego formularza logowania w Divi

Część 1: Tworzenie przycisków logowania i wylogowania

W edytorze globalnego układu nagłówka otwórz widok warstwy dzięki czemu możesz łatwo zobaczyć wszystkie elementy.

W górnym wierszu sekcji nagłówka usuń moduł Obserwuj media społecznościowe obok przycisku Zaloguj w kolumnie 3.

Czytaj także: Divi: Porównanie różnych rodzajów gradientów

Tworzenie przycisku logowania

Aby utworzyć nasz przycisk logowania, otwórz ustawienia modułu przycisku w kolumnie 3 w górnym wierszu.

Zaktualizuj następujące elementy w zakładce projekt:

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

Pod zakładką Zaawansowane, przypisz przyciskowi dwie niestandardowe klasy CSS w następujący sposób:

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

Tworzenie przycisku wylogowania

Aby utworzyć nasz przycisk wylogowania, zduplikuj istniejący przycisk logowania w kolumnie 3.

Aby ułatwić rozróżnienie tych dwóch przycisków, możesz odpowiednio zaktualizować etykietę każdego z nich. Następnie otwórz ustawienia modułu Duplikat przycisku w kolumnie 3.

Zmień tekst przycisku na „Wyloguj”.

Zaktualizuj następujące elementy w zakładce projekt:

• Ikona przycisku: ikona odblokowania (patrz zrzut ekranu)

Pod zakładką Zaawansowane, zaktualizuj przycisk Klasy CSS w następujący sposób:

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

Pierwsza klasa pozostanie taka sama, ale druga klasa będzie inna.

Część 2: Tworzenie wyskakującej sekcji

Gdy przyciski są gotowe, jesteśmy gotowi do utworzenia sekcji wyskakującej, która będzie służyć jako nasze wyskakujące okienko zawierające formularze połączenie.

Poniżej sekcji nagłówka dodaj nową zwykłą sekcję.

Następnie wstaw jednokolumnowy wiersz wewnątrz sekcji.

Ustawienia sekcji

Przed aktualizacją wiersza otwórz ustawienia sekcji.

Pod zakładką Treść, nadaj sekcji biały kolor tła:

• Tło: #ffffff

Pod zakładką Wnętrze, zaktualizuj następujące informacje:

• Szerokość: 100%
• Maksymalna szerokość: 800px (komputer), 80% (tablet), 100% (telefon)
• Wyrównanie sekcji: Środek
• Wysokość: auto (komputer stacjonarny i tablet), 100% (telefon)
• Maksymalna wysokość: 100%
• Wypełnienie: 0px (góra i dół)

• Zaokrąglone rogi: 10px
• Cień pudełka: patrz zrzut ekranu
• Pozycja pionowa cienia pudełka: 0px
• Siła rozmycia: 100 pikseli
• Rozprzestrzenianie siły: 50px

Pod zakładką Zaawansowane, zaktualizuj następujące informacje:

Dodaj niestandardową klasę CSS.

• Klasa CSS: et-popup-login

Dodaj niestandardowy fragment kodu CSS do głównego elementu:

overscroll-behavior: contain;

Zaktualizuj opcje Widoczność i Pozycja.

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

Ustawienia linii

Po wprowadzeniu ustawień przekroju otwórz ustawienia linii i zaktualizuj następujące ustawienia projektu:

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

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

Aby utworzyć ikonę zamykania wyskakującego okienka, która zamknie/ukryje wyskakujące okienko po kliknięciu, użyjemy modułu Blurb.

Dodaj nowy moduł Blurb do wiersza.

Otwórz ustawienie modułu i usuń tytuł i treść.

Następnie dodaj ikonę w następujący sposób:

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

Pod zakładką Wnętrze, zaktualizuj następujące informacje:

• Kolor ikony: #004e43
• Wyrównanie obrazu/ikony: wyśrodkowane
• Użyj rozmiaru czcionki ikony: TAK
• Rozmiar czcionki ikony: 50px
• Szerokość: 50px
• Moduł wyrównania: prawy
• Wysokość: 50px

Pod zakładką Zaawansowane, dodaj klasę CSS do modułu Blurb w następujący sposób:

• Klasa CSS: et-toggle-popup

Część 4: Tworzenie formularzy logowania „Zalogowany” i „Wylogowany”

Aby mieć różną treść i wygląd formularza logowania przy logowaniu i wylogowaniu, stworzymy dwa różne moduły formularza logowania. 

Pierwszym będzie formularz logowania, który będzie się wyświetlał przy każdym „wylogowaniu” użytkownika. Drugim będzie formularz logowania, który będzie się wyświetlał przy każdym „zalogowaniu” użytkownika.

Utworzenie formularza „Wylogowany”

Aby utworzyć formularz logowania „Wylogowany”, dodaj nowy moduł logowania poniżej ikony modułu Blurb w wierszu.

Otwórz ustawienia modułu i zmień następujące ustawienia:

Zakładka Treść

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

Zakładka Projekt

• Kolor tła pól: rgba (0,78,67,0.05)
• Kolor tła ostrości pola: rgba (0,78,67,0,15)
• Wyrównanie tekstu: wyśrodkowane
• Kolor tekstu: ciemny

• Czcionka tytułu: Poppins
• Grubość czcionki tytułu: pół pogrubiona
• Kolor tekstu: #000000
• Wysokość wiersza tytułu: 1,3 em
• Czcionka ciała: Work Sans

Aby zaktualizować style przycisków, skopiuj style przycisków z przycisku logowania, który utworzyliśmy, do trzeciej kolumny w wierszu sekcji Nagłówek.

Następnie wklej style przycisków do grupy opcji przycisku w ustawieniach połączenia na karcie Projekt.

Następnie zaktualizuj style przycisków formularza logowania w następujący sposób:

• Przycisk
  • Kolor tekstu: #ffffff
  • Tło: #004e43
  • Tło (najechanie): #00683c
  • Szerokość obramowania: 0 pikseli
  • Padding: 15px (góra i dół)

Następnie zaktualizuj opcje zmiany rozmiaru w następujący sposób:

• Szerokość: 100%
• Maksymalna szerokość: 80% (komputer stacjonarny), 90% (tablet), 95% (telefon)
• Moduł wyrównania: Środek

Zakładka Zaawansowane

Pod zakładką Zaawansowane, zaktualizuj klasę CSS i niestandardowy CSS w następujący sposób:

• Klasa CSS: et-logged-out-form

Niestandardowy CSS dla opisu połączenia:

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

Niestandardowy CSS dla formularza logowania:

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

Zapewni to, że moduł logowania obejmuje całą szerokość wiersza/kolumny, nawet na komputerze.

Utworzenie formularza „Zalogowany”

Teraz, gdy wersja formularza „Wylogowano” jest gotowa, musimy utworzyć wersję „Wylogowano”, która będzie miała inną treść i styl, aby zmaksymalizować wygodę użytkownika.

Aby utworzyć formularz logowania „Wylogowany”, zduplikuj istniejący formularz logowania.

Następnie zaktualizuj etykietę dla każdego z nich formularze odpowiednio połączenie.

Otwórz zduplikowane ustawienia (formularz „Zalogowany”) i dodaj tytuł strony jako treść dynamiczną do tytułu modułu formularza logowania.

Następnie otwórz ustawienia zawartości dynamicznej tytułu witryny i zaktualizuj zawartość przed i po w następujący sposób:

• Wcześniej: „Próbujesz wylogować się z eleganckich motywów”
• Później: ". " 

Stworzy to ładne dynamiczne powiadomienie dla użytkowników próbujących wylogować się z witryny.

Następnie dodaj następujący nagłówek H3 do treści:

<h3>Are you sure?</h3>

Jeśli kiedykolwiek widziałeś zawartość modułu logowania po zalogowaniu, wiesz, że istnieje spersonalizowana wiadomość zawierająca spersonalizowany link „wyloguj”. Aby ten link wyglądał jak przycisk, musimy dostosować ustawienia czcionki/tekstu linku treści w następujący sposób:

• Wybierz zakładkę Połączyć pod opcją tekst-treść.
• Czcionka łącza: Work Sans
• Grubość czcionki łącza: pół pogrubiona
• Styl czcionki: TT
• Wyrównanie tekstu łącza: wyśrodkowane
• Kolor tekstu linku: #ffffff

UWAGA: Podgląd tych wyników nie będzie możliwy, dopóki formularz nie zostanie wyświetlony na aktywnej stronie.

Pod zakładką Zaawansowane, zaktualizuj klasę CSS i niestandardowy CSS w następujący sposób:

• Klasa CSS: et-logged-in-form

Niestandardowy CSS dla formularza logowania:

display:none;

Część 5: Dodaj niestandardowy kod

Aby dodać niestandardowe CSS i JQuery potrzebne do funkcji wyskakującego formularza logowania, utwórz nowy moduł kodu w ostatnim module logowania.

CSS

Otwórz ustawienia modułu Kod i wklej następujący kod CSS w polu kodu, upewniając się, że kod CSS jest zawinięty w niezbędne tagi 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;
}

Należy pamiętać, że CSS używa klasy „connected” wbudowanej w WordPress w celu ukrycia/pokazania odpowiednich przycisków logowania/wylogowania oraz formularze Zalogowany/Wylogowany za każdym razem, gdy użytkownik jest zalogowany lub wylogowany.

JQuery

Poniżej tagu end style wklej następujący kod JQuery, upewniając się, że kod jest owinięty w niezbędne tagi skryptu.

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

Ten fragment kodu po prostu przełącza sekcję wyskakującą za każdym razem, gdy użytkownik kliknie jeden z trzech elementów z klasą „ i-przełącz-popup (przyciski logowania i wylogowania oraz ikona prezentacji „x”).

Zobacz też: Divi: jak korzystać z ustawień maski tła i opcji przekształcania wzoru

Zrobione !

Nie zapomnij zapisać zmian wprowadzonych w szablonie w kreatorze motywów. Po zapisaniu możesz wyświetlić wyniki na aktywnej stronie.

Ostateczny wynik

Oto ostateczne wyniki na komputerze, tablecie i telefonie.

Zwróć uwagę, jak zmieniają się przycisk logowania i przycisk wylogowania. A gdy użytkownik się zaloguje, pozostaje na bieżącej stronie. 

Dodatkowo wyskakujący formularz logowania wyświetla inną treść „ostrzeżenia” za każdym razem, gdy użytkownik próbuje się wylogować.

Pobierz DIVI teraz !!!

Wnioski

Mamy nadzieję, że utworzenie tego wyskakującego formularza logowania i niestandardowych przycisków logowania/wylogowania da ci pewien wgląd w to, jak kreatywnie korzystać z formularza logowania Divi. 

Możesz dostosować projekt i treść każdego formularza logowania (lub przycisków), aby stworzyć unikalne doświadczenie logowania na własnej stronie internetowej.

Mamy również nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.

Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji swoich projektów tworzenia stron internetowych.

Nie wahaj się również skonsultować z naszym przewodnikiem na temat Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...