Jak zaprojektować wbudowany formularz logowania dla niestandardowego globalnego nagłówka w Divi

Utworzenie wbudowanego formularza logowania dla nagłówka może być wspaniałym zwiększeniem komfortu użytkownika. Są idealne dla witryn członkowskich i sklepów internetowych, ponieważ bardzo ułatwiają użytkownikom logowanie w dowolnym momencie lub na dowolnej stronie witryny. W tym samouczku pokażemy, jak zaprojektować wbudowany formularz logowania dla niestandardowego użytkownika nagłówka Divi Theme Builder. Aby to zrobić, zbudujemy prosty responsywny globalny nagłówek, a następnie zaprojektujemy kompaktowy wbudowany formularz logowania w prawym górnym rogu nagłówka za pomocą modułu logowania Divi. Ta kompilacja wymaga trochę niestandardowego CSS, ale gdy wszystko będzie gotowe, łatwo będzie dostosować wbudowany formularz logowania, aby dopasować go do dowolnego projektu nagłówka, korzystając z wbudowanych opcji projektowania Divi.

Zacznijmy!

zapowiedź

Oto krótki rzut oka na niestandardowy nagłówek z wbudowanym formularzem logowania, który zbudujemy w tym samouczku.

A oto wbudowany formularz logowania na wyświetlaczu tabletu i telefonu.

Oto komunikat i link „wyloguj”, który pokaże się, gdy użytkownicy są zalogowani.

Pobierz układ nagłówka formularza logowania inline za DARMO

Aby położyć swoje ręce na układzie z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz iresubscribedi ani otrzymywać dodatkowych e-maili.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować układ do swojej strony, po prostu rozpakuj plik zip i dodaj jeden z plików json do Divi Theme Builder za pomocą opcji Theme Builder Portability.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi. To prawie wszystko, czego potrzebujesz, aby zacząć. Będziemy tworzyć nowy układ szablonu nagłówka od podstaw za pomocą Divi Theme Builder.

Dodawanie nowego globalnego nagłówka

Aby wszystko się potoczyło, musimy stworzyć nowy globalny nagłówek dla naszej strony internetowej. Aby to zrobić, przejdź do pulpitu nawigacyjnego WordPress i przejdź do Divi> Theme Builder.

W domyślnym szablonie witryny kliknij „Dodaj globalny nagłówek”, a następnie „Zbuduj globalny nagłówek”.

Następnie wybierz opcję Buduj od podstaw.

Projektowanie globalnego nagłówka Divi za pomocą wbudowanego formularza logowania

Dostosowywanie sekcji

Korzystając z edytora Global Header Layout, będziesz mógł zbudować niestandardowy nagłówek dla swojej witryny całkowicie od podstaw. Aby rozpocząć, otwórz ustawienia dla zwykłej sekcji i zaktualizuj następujące elementy:

• Kolor lewego gradientu tła:
• Prawy kolor gradientu tła:
• Kierunek gradientu: 48 stopni
• Padding: 10px góra, 10px dół, 20px lewo, 20px prawo

Aby nasz niestandardowy nagłówek był bardziej responsywny, dodamy następujący niestandardowy kod CSS do głównego elementu sekcji.

display:flex;
justify-content:center;
align-items:center;

Dodawanie logo nagłówka do pierwszego rzędu

Teraz, gdy sekcja jest gotowa, możemy dodać pierwszy wiersz.

Dodaj wiersz

Dodaj jednokolumnowy wiersz do sekcji.

Dodaj moduł obrazu z obrazem logo

W jednokolumnowym wierszu dodaj moduł obrazu. Tutaj dodamy logo do nagłówka.

Zaktualizuj obraz i margines modułu obrazu

Zaktualizuj ustawienia obrazu w następujący sposób:

• Obraz: [dodaj logo (około 64px na 64px)]

• Margines: 20px w prawo

Aktualizuj ustawienia wiersza

Zanim przejdziemy dalej, otwórz ustawienia wiersza i zaktualizuj następujące elementy:

• Użyj niestandardowej szerokości rynny: TAK
• Szerokość rynny: 1
• Szerokość: 25%
• Wyrównanie wierszy: w lewo
• Padding: 0px na górze, 0px na dole

Dodawanie wbudowanego formularza logowania do drugiego rzędu

Dodaj wiersz

Teraz, gdy pierwszy wiersz jest gotowy, zauważysz w edytorze, że pierwszy wiersz zajmie 25% sekcji po lewej stronie. Zasadniczo będzie to wyznaczony wiersz na logo naszego nagłówka. Musimy utworzyć wiersz sekcji dla wbudowanego formularza logowania i menu po prawej stronie.

Dodaj do sekcji drugi wiersz o strukturze jednokolumnowej.

Dodaj formularz logowania

W jednokolumnowym wierszu dodaj moduł logowania.

Usuń zawartość domyślną

W ustawieniach logowania usuń fałszywy tytuł i treść.

Dodaj niestandardową klasę formularza logowania i CSS

Zanim przejdziemy za daleko w projektowaniu wbudowanego formularza logowania, najpierw dodajmy niestandardową klasę CSS i CSS do modułu logowania. Umożliwi nam to uzyskanie podstawowej wbudowanej struktury formularza, zanim wprowadzimy ostateczne poprawki projektowe na formularzu za pomocą wbudowanych opcji Divi.

W zakładce Zaawansowane dodaj następującą klasę CSS:

• Klasa CSS: nagłówek-formularz-logowania

Dodaj następujący niestandardowy kod CSS do pola CSS opisu logowania:

margin-bottom: 0px !important

Następnie dodaj następujący niestandardowy kod CSS do pola CSS formularza logowania:

width: 100%;

Dodaj następujący niestandardowy kod CSS do pola CSS pola logowania:

padding: 5px 4% !important

Dodaj niestandardowy CSS do ustawień układu nagłówka

Ponieważ mamy naszą niestandardową klasę CSS dodaną do modułu formularza logowania, możemy dodać nasz niestandardowy CSS, który będzie ukierunkowany tylko na ten konkretny formularz logowania.

Otwórz ustawienie układu nagłówka i dodaj następujący niestandardowy CSS:

.header-login-form .et_pb_login_form form {
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-login-form .et_pb_login_form .et_pb_contact_form_field {
padding-bottom: 0px;
margin-right: 5px;
}
.header-login-form .et_pb_forgot_password {
display:none;
}

Ten CSS sprawi, że pola logowania i przycisk będą wyświetlane w linii (poziomo), ukryją „zapomniałeś hasła?” link i dodaj mały margines między polami.

Ustawienia wiersza

Zanim dodamy ostatnie poprawki do wbudowanego formularza logowania, zaktualizujmy ustawienia wierszy w następujący sposób:

• Użyj niestandardowej szerokości rynny: TAK
• Szerokość rynny: 1
• Wyrównanie wierszy: w prawo
• Padding: 0px na górze, 0px na dole

Ustawienia projektowania formularza logowania

Teraz jesteśmy gotowi do aktualizacji ustawień formularza logowania. Otwórz ustawienia modułu formularza logowania i zaktualizuj następujące elementy:

• Użyj koloru tła: NIE

Tekst pola i linku

• Tło pól: Kolor: rgba (255,255,255,0.2)
• Kolor tekstu pól: #ffffff
• Pola Czcionka: Lato
• Rozmiar tekstu pól: 14px
• Wyrównanie tekstu: prawo
• Czcionka łącza: Lato
• Styl czcionki łącza: podkreślenie
• Kolor tekstu linku: #ff3190

Projekt przycisku

• Rozmiar tekstu przycisku: 15px
• Kolor tła przycisku: #ff3190
• Szerokość obramowania przycisku: 0px
• Czcionka przycisku: Lato
• Wypełnienie przycisków: 2px góra, 2px dół
• Margines: dolny 15px
• Padding: 0px na górze, 0px na dole, 0px w lewo, 0px w prawo

Dodawanie menu do drugiego rzędu

Moduł menu

Dzięki naszemu wbudowanemu formularzowi logowania możemy dodać menu bezpośrednio pod nim.

Dodaj moduł menu pod modułem formularza logowania.

Ustawienia modułu menu

Zaktualizuj ustawienia menu w następujący sposób:

• Kolor tła: rgba(0,0,0,0)
• Czcionka menu: Lato
• Grubość czcionki menu: pogrubiona
• Kolor tekstu menu: #ffffff
• Rozmiar tekstu menu: 16px
• Wyrównanie tekstu: prawo
• Kolor tła menu rozwijanego: #ffffff
• Kolor linii menu rozwijanego: rgba(0,0,0,0)
• Kolor tekstu menu rozwijanego: #000000
• Kolor tła menu mobilnego: #ffffff
• Kolor tekstu menu mobilnego: #000000
• Kolor ikony koszyka na zakupy: #ffffff
• Kolor ikony wyszukiwania: #ffffff
• Kolor ikony menu Hamburger: #ffffff

Zapisywanie nagłówka formularza logowania inline

Pamiętaj, aby zapisać układ przed wyjściem z edytora układu nagłówka.

Następnie zapisz również ustawienia Theme Builder.

Ostateczne rezultaty

Otóż ​​to!

Sprawdźmy teraz efekt końcowy. Aby zobaczyć ostateczny wynik, po prostu odwiedź stronę w swojej witrynie.

Oto nagłówek na wyświetlaczu pulpitu.

Oto nagłówek wbudowanego formularza logowania na wyświetlaczu tabletu.

A oto wbudowany formularz logowania na wyświetlaczu telefonu. Zwróć także uwagę na menu mobilne.

A oto, co zobaczy użytkownik po zalogowaniu.

Końcowe przemyślenia

Ten niestandardowy globalny nagłówek z wbudowanym formularzem logowania z pewnością przyda się w każdej witrynie członkowskiej lub sklepie internetowym. Za pomocą odrobiny niestandardowego CSS byliśmy w stanie przekonwertować moduł logowania Divi w elegancki wbudowany formularz logowania, który będzie ładnie mieścił się w nagłówku dowolnej witryny. Mam nadzieję, że przyda się to w Twoim następnym projekcie.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!