Stworzenie forma Wbudowane logowanie do nagłówka może znacznie poprawić wrażenia użytkownika. Są idealne dla stron członkowskich i sklepów internetowych, ponieważ umożliwiają użytkownikom logowanie w dowolnym momencie i na dowolnej stronie serwisu.
W tym samouczku pokażemy, jak zaprojektować forma online, używając niestandardowego nagłówka w Divi Theme Builder. Aby to zrobić, utworzymy prosty, responsywny nagłówek globalny, a następnie zaprojektujemy plik forma kompaktowy login online w prawym górnym rogu nagłówka za pomocą modułu logowania Divi. Kompilacja wymaga trochę niestandardowego kodu CSS, ale gdy wszystko będzie gotowe, łatwo będzie dostosować formularz logowania online, aby łatwo pasował do dowolnego projektu nagłówka, korzystając z opcji projektowania zintegrowanych usług Divi.
Przegląd wyników
Oto krótki przegląd niestandardowego nagłówka z formularzem logowania online, który utworzymy w tym samouczku.
A oto formularz logowania online na ekranie tabletu i telefonu.
Oto komunikat wylogowania i łącze, które będą wyświetlane, gdy użytkownicy są zalogowani.
To, czego potrzebujesz, aby zacząć
Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi . To prawie wszystko, czego potrzebujesz, aby rozpocząć. Zamierzamy stworzyć nowy układ szablonu nagłówka od zera za pomocą Divi Theme Builder.
Dodanie nowego globalnego nagłówka
Aby wszystko działało, musimy utworzyć nowy globalny nagłówek dla naszego Witryna internetowa. Aby to zrobić, przejdź do pulpitu nawigacyjnego WordPress i przejdź do Divi> Theme Builder.
Na szablon strony internetowej domyślnie kliknij "Dodaj globalny nagłówek", a następnie "Utwórz globalny nagłówek".
Następnie wybierz opcję Buduj od podstaw.
Zaprojektuj globalny nagłówek Divi z formularzem logowania online
Dostosowywanie sekcji
Za pomocą globalnego edytora układu nagłówków będziesz mógł całkowicie utworzyć niestandardowy nagłówek swojej witryny. Aby rozpocząć, otwórz zwykłe ustawienia sekcji i zaktualizuj następujące elementy:
- Lewy gradient koloru tła:
- Prawy gradient tła:
- Kierunek gradientu: 48 stopni
- Wypełnienie: 10 pikseli u góry, 10 pikseli u dołu, 20 pikseli po lewej, 20 pikseli po prawej
Aby nasz niestandardowy nagłówek był bardziej responsywny, dodamy następujący niestandardowy CSS do głównego elementu sekcji.
display:flex;justify-content:center;align-items:center;
Dodanie logo nagłówka do pierwszej linii
Teraz, gdy sekcja jest gotowa, możemy dodać pierwszy wiersz.
Dodaj wiersz
Dodaj wiersz do kolumny w sekcji.
Dodaj moduł obrazu z obrazem logo
W wierszu z jedną kolumną dodaj moduł obrazu. W tym miejscu 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 64 piksele na 64 piksele)]
- Margines: 20px w prawo
Zaktualizuj parametry linii
Zanim przejdziesz 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 rzędu: w lewo
- Wypełnienie: 0px wysoki, 0px niski
Dodanie formularza logowania online do drugiego wiersza
Dodaj wiersz
Teraz, gdy pierwszy wiersz jest gotowy, zauważysz w edytorze, że pierwszy wiersz będzie zajmował 25% lewej sekcji. Zasadniczo będzie to wyznaczona linia dla naszego logo nagłówka. Musimy utworzyć linię sekcji dla formularza i menu logowania online po prawej stronie.
Dodaj drugi wiersz ze strukturą do kolumny w sekcji.
Dodaj formularz logowania
W wierszu kolumny dodaj moduł logowania.
Usuń domyślną treść
W ustawieniach logowania usuń fałszywy tytuł i treść.
Dodaj formularz logowania i niestandardową klasę CSS
Zanim zagłębimy się w projektowanie formularza logowania online, dodajmy najpierw niestandardowe klasy CSS i CSS do modułu logowania. Umożliwi nam to skonfigurowanie podstawowej struktury online formularza przed nadaniem ostatecznego wyglądu formularza za pomocą wbudowanych opcji Divi.
Na karcie Zaawansowane dodaj następującą klasę CSS:
- Klasa CSS: formularz logowania nagłówka
Dodaj następujący niestandardowy CSS w obszarze CSS opisu połączenia:
margin-bottom: 0px !important
Następnie dodaj następujący niestandardowy CSS w obszarze CSS formularza logowania:
width: 100%;
Dodaj następujący niestandardowy CSS do pola CSS pól połączeń:
padding: 5px 4% !important
Dodaj niestandardowy CSS do ustawień układu nagłówka
Ponieważ dodaliśmy naszą niestandardową klasę CSS do modułu formularza logowania, możemy dodać nasz niestandardowy CSS, który będzie kierowany 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 spowoduje, że pola logowania i przycisk będą wyświetlane w linii (poziomo), ukryj link „Nie pamiętasz hasła?”. »I dodaj mały margines między polami.
Ustawienia linii
Przed wprowadzeniem ostatnich poprawek do formularza logowania online zaktualizuj parametry linii w następujący sposób:
- Użyj niestandardowej szerokości rynny: TAK
- Szerokość rynny: 1
- Wyrównanie linii: proste
- Wypełnienie: 0px wysoki, 0px niski
Zaprojektuj ustawienia formularza logowania
Jesteśmy teraz gotowi do zaktualizowania ustawień formularza logowania. Otwórz ustawienia modułu formularza logowania i zaktualizuj następujące elementy:
- Użyj koloru tła: NIE
Pole i tekst linku
- Tło pola: Kolor: rgba (255,255,255,0.2)
- Kolor tekstu pola: #ffffff
- Policja polowa: Lato
- Rozmiar tekstu pola: 14px
- Wyrównanie tekstu: prawo
- Link font: Lato
- Styl czcionki łącza: podkreślony
- Kolor tekstu linku: # ff3190
Projekt przycisku
- Rozmiar tekstu przycisku: 15px
- Kolor tła przycisku: # ff3190
- Szerokość obramowania przycisku: 0px
- Czcionka przycisku: Lato
- Wypełnienie przycisku: 2 piksele u góry, 2 piksele u dołu
- Margines: 15 pikseli niski
- Wypełnienie: 0px u góry, 0px u dołu, 0px po lewej, 0px po prawej
Dodanie menu do drugiej linii
Moduł menu
Dzięki naszemu formularzowi logowania online możemy dodać menu bezpośrednio poniżej.
Dodaj moduł menu w module 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
- Waga czcionki menu: pogrubiona
- Kolor tekstu menu: #ffffff
- Rozmiar tekstu menu: 16px
- Wyrównanie tekstu: prawo
- Kolor tła menu rozwijanego: #ffffff
- Kolor linii w menu rozwijanym: rgba (0,0,0,0)
- Kolor tekstu menu rozwijanego: # 000000
- Kolor tła menu mobilnego: #ffffff
- Kolor tekstu menu mobilnego: # 000000
- Kolor ikony koszyka: #ffffff
- Kolor ikony wyszukiwania: #ffffff
- Kolor ikony menu hamburgera: #ffffff
Zapisanie nagłówka formularza logowania
Pamiętaj, aby zapisać układ przed wyjściem z edytora układu nagłówka.
Następnie zapisz również ustawienia generatora motywów.
Ostateczne wyniki
Otóż to!
Zobaczmy teraz efekt końcowy. Aby zobaczyć końcowy wynik, po prostu odwiedź stronę swojego Witryna internetowa.
Oto nagłówek na ekranie komputera.
Oto nagłówek formularza logowania online na ekranie tabletu.
A oto formularz logowania online na ekranie telefonu. Zwróć także uwagę na mobilne menu.
I to właśnie zobaczy użytkownik po zalogowaniu.
końcowe przemyślenia
Ten niestandardowy globalny nagłówek z formularzem logowania online z pewnością przyda się w każdej witrynie członkowskiej lub sklepie internetowym. Dzięki odrobinie niestandardowego CSS byliśmy w stanie przekonwertować moduł logowania Divi na elegancki formularz logowania online, który dobrze wyglądałby w nagłówku każdego Witryna internetowa. Mam nadzieję, że będzie to pomocne w Twoim następnym projekcie.
Nie mogę się doczekać, aby usłyszeć od Ciebie w komentarzach.
Do twojego zdrowia!
