Musisz utworzyć globalny nagłówek za pomocą forma połączenie w DIVI?
Stworzenie forma login w nagłówku może być świetnym impulsem dla doświadczenie użytkownika.
Idealnie sprawdzają się w witrynach z subskrypcją i sklepach internetowych, ponieważ umożliwiają użytkownikom zalogowanie się w dowolnym momencie na dowolnej stronie strona internetowa.
W tym samouczku pokażemy, jak zaprojektować plik forma logowanie online dla użytkowników w niestandardowym nagłówku. Zacznijmy!
badanie
Oto szybki podgląd niestandardowego nagłówka z formularzem logowania, który stworzymy w tym samouczku.
Oto komunikat „wyloguj” i link, który będzie wyświetlany, gdy użytkownicy są zalogowani.
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 kliknij „Zbuduj globalny nagłówek”.
Projekt globalnego nagłówka Divi z poziomym formularzem logowania
Dostosuj sekcję
W edytorze globalnego układu nagłówka możesz utworzyć spersonalizowany nagłówek swojego strona internetowa Zaczynając od niczego. Aby rozpocząć, otwórz ustawienia w normalnej sekcji i zaktualizuj następujące elementy:
- Kolor gradientu lewego tła:
- Prawy kolor gradientu tła:
- Kierunek gradientu: 48 stopni
- Margines wewnętrzny: 10px góra, 10px dół, 20px lewo, 20px prawo
Aby nasz 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;
Dodanie logo nagłówka do pierwszej linii
Teraz, gdy sekcja jest gotowa, możemy dodać pierwszy wiersz.
Dodaj linię
Dodaj wiersz do kolumny w sekcji.
Dodaj moduł obrazu z obrazem logo
W jednokolumnowym wierszu dodaj moduł obrazu. Tutaj dodamy logo nagłówka.
Zaktualizuj obraz i margines modułu obrazu
Zaktualizuj ustawienia obrazu w następujący sposób:
- Obraz: [dodaj logo (ok. 64 x 64 px)]
- Margines: 20px w prawo
Zaktualizuj parametry linii
Zanim przejdziesz dalej, otwórz ustawienia linii i zaktualizuj następujące elementy:
- Użyj niestandardowej szerokości rynny: TAK
- Rozstaw kolumn: 1
- Maksymalna szerokość: 25%
- Wyrównanie: lewe
- Margines wewnętrzny: 0px góra, 0px dół
Dodano poziomy formularz logowania do drugiego rzędu
Dodaj linię
Teraz, gdy pierwszy wiersz jest gotowy, zauważysz w edytorze, że pierwszy wiersz zajmie 25% lewej sekcji. Będzie to w zasadzie linia przeznaczona dla naszego logo nagłówka. Musimy stworzyć wiersz sekcji dla formularza logowania i menu po prawej stronie.
Dodaj drugi wiersz ze strukturą do kolumny w sekcji.
Dodaj formularz logowania
W jednokolumnowym wierszu dodaj moduł „Połącz”.
Usuń domyślną treść
W ustawieniach modułu logowania usuń fałszywy tytuł i treść.
Dodaj niestandardową klasę dla formularza logowania i CSS
Zanim przejdziemy za daleko w projektowaniu formularza logowania, najpierw dodajmy klasę CSS i niestandardowy CSS do modułu Login. Spowoduje to utworzenie podstawowej struktury online formularza przed wprowadzeniem ostatecznych poprawek do projektu formularza z wbudowanymi opcjami Divi.
Zobacz także nasz przewodnik na temat Jak stworzyć przesuwane i responsywne menu boczne w DIVI
Na karcie Zaawansowane dodaj następującą klasę CSS:
- Klasa CSS: nagłówek-formularz-logowania
Dodaj następujący niestandardowy kod CSS do pola 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 kod CSS do obszaru CSS pola logowania:
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.
Przeczytaj także nasz samouczek na temat Jak stworzyć stronę bloga za pomocą modułu Blog z DIVI
Otwórz ustawienie układu nagłówka i dodaj następujący niestandardowy kod 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świetlać się w linii (w poziomie), komunikat „Nie pamiętasz hasła?” zostanie ukryty i zostanie dodany niewielki margines między polami.
Ustawienia linii
Zanim dodamy ostatnie szlify w formularzu logowania, zaktualizujmy parametry linii w następujący sposób:
- Użyj niestandardowej szerokości rynny: TAK
- Rozstaw kolumn: 1
- Wyrównanie: w prawo
- Margines wewnętrzny: 0px góra, 0px dół
Zaprojektuj ustawienia formularza logowania
Jesteśmy teraz gotowi do zaktualizowania ustawień formularza logowania. Otwórz ustawienia modułu Connect i zaktualizuj następujące elementy:
- Użyj koloru tła: NIE
Pole i tekst linku
- Pola koloru tła: rgba (255,255,255,0.2)
- Pola koloru tekstu: #ffffff
- Pola Czcionka: Lato
- Pola rozmiaru tekstu: 14px
- Wyrównanie tekstu: do prawej
Projekt przycisku
- Użyj niestandardowych stylów dla przycisku: NIE
- Rozmiar tekstu przycisku: 15px
- Przycisk tła: #ff3190
- Przycisk szerokości obramowania: 0 pikseli
- Czcionka przycisku: Lato
- Przycisk marginesu: 2px Góra, 2px Dół
- Przycisk dopełnienia: 15px dół
- Margines wewnętrzny: 0px góra, 0px dół, 0px lewo, 0px prawo
Dodanie menu do drugiej linii
Moduł menu
Mając nasz formularz logowania, możemy dodać menu bezpośrednio poniżej.
Dodaj moduł Menu w module Logowanie.
Ustawienia modułu menu
Zaktualizuj ustawienia menu w następujący sposób:
- Tło: rgba(0,0,0,0)
- Menu czcionek: Lato
- Menu miękkiego światła: pogrubienie
- Kolor tekstu menu: #ffffff
- Rozmiar tekstu menu: 16px
- Wyrównanie tekstu: do prawej
- Kolor tła menu rozwijanego: #ffffff
- Kolor wiersza rozwijanego: rgba(0,0,0,0)
- Kolor tekstu menu rozwijanego: #000000
- Kolor tła menu mobilnego: #ffffff
- Kolor tekstu w menu mobilnym: #000000
- Kolor ikony koszyka: #ffffff
- Kolor ikony wyszukiwania: #ffffff
- Kolor ikony menu Hamburger: #ffffff
Zapisanie nagłówka formularza logowania
Pamiętaj, aby zapisać układ przed wyjściem z edytora nagłówków.
Następnie zapisz również ustawienia Theme Buildera.
Ostateczne wyniki
Zrobione !
Zobaczmy teraz efekt końcowy. Aby zobaczyć efekt końcowy, wystarczy odwiedzić stronę w swojej witrynie.
I to właśnie zobaczy użytkownik po zalogowaniu.
Pobierz DIVI teraz !!!
Wnioski
Ten niestandardowy globalny nagłówek z formularzem logowania z pewnością przyda się w każdej witrynie z subskrypcją lub sklepie internetowym.
Dzięki odrobinie niestandardowego CSS byliśmy w stanie przekonwertować moduł Divi's Login do eleganckiego formularza logowania, który będzie idealnie pasował do nagłówka dowolnej witryny.
Mam nadzieję, że przyda się to w twoim następnym projekcie. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie 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.
...
