Jak dodać rozwijany formularz logowania do nagłówka Divi?

Jeśli tworzysz witrynę internetową dla członków, bardzo potrzebne jest przemyślenie sposobu logowania. Oczywiście, możesz zezwolić odwiedzającym na korzystanie z domyślnej strony logowania WordPress, ale możesz też ułatwić im korzystanie, dołączając formularz logowania w nagłówku. W takim przypadku chcesz uruchomić formularz logowania po kliknięciu, aby zaoszczędzić miejsce w nagłówku. Dokładnie to pokażemy w dzisiejszym samouczku Divi. Zbudujemy od podstaw globalny nagłówek i dodamy rozwijany formularz logowania. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz szablon globalnego nagłówka ZA DARMO

Aby położyć swoje ręce na darmowym szablonie globalnego nagłówka, 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 „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

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!

1. Utwórz nowy szablon globalnego nagłówka

Przejdź do kreatora motywów Divi

Zacznij od przejścia do Divi Theme Builder na zapleczu swojej witryny WordPress. Tam kliknij „Dodaj globalny nagłówek”.

Dodaj nowy globalny nagłówek

Pojawi się menu rozwijane. Aby rozpocząć budowanie od zera, kontynuuj, wybierając „Buduj globalny nagłówek”.

2. Zbuduj projekt nagłówka

Dodaj sekcję #1

Zdjęcie w tle

W edytorze szablonów zauważysz już sekcję. Otwórz ustawienia sekcji i prześlij obraz tła lub użyj koloru tła.

Rozstaw

Przejdź do zakładki projektu przekroju i następnie zmodyfikuj górną i dolną wyściółkę.

• Górna wyściółka: 10px
• Dolna wyściółka: 10px

Dodaj wiersz do sekcji

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Bez dodawania modułów otwórz ustawienia wiersza i zmodyfikuj ustawienia rozmiaru w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Szerokość:
  • Komputer stacjonarny: 80%
  • Tablet i telefon: 95%
• Maksymalna szerokość: 2580 pikseli

Rozstaw

Następnie zmodyfikuj wartości dopełnienia.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px
• Lewa wyściółka: 1%
• Prawa wyściółka: 1%

Główny element CSS

Aby automatycznie wyrównać kolumny w pionie, dodamy następujące wiersze kodu CSS do głównego elementu wiersza na karcie Zaawansowane:

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

Dodaj moduł śledzenia mediów społecznościowych do kolumny 1

Dodaj sieci społecznościowe

Czas dodać moduły, zaczynając od modułu Social Media Follow w kolumnie 1. Dodaj wybrane przez siebie sieci społecznościowe.

Zmień kolor tła każdej sieci społecznościowej indywidualnie

Następnie zmień kolor tła każdej sieci społecznościowej na biały.

• Kolor tła: #ffffff

Ustawienia ikon

Wróć do ogólnych ustawień modułu i zmień kolor ikony w zakładce projekt.

• Kolor ikony: #141414

Granica

Zastosuj kilka ustawień zaokrąglonych narożników w ustawieniach obramowania.

• Wszystkie rogi: 100px

Dodaj moduł przycisku do kolumny 2

Dodaj kopię

W kolumnie 2 jedynym modułem, którego potrzebujemy, jest moduł przycisku. Dodaj wybraną kopię.

Wyrównanie przycisków

Następnie zmień wyrównanie modułu.

• Wyrównanie przycisków: w prawo

Ustawienia przycisków

Następnie nadaj styl przyciskowi.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 12px
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #ff4700
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 0px
• Odstępy między przyciskami: 2px

• Czcionka przycisku: Prata
• Styl czcionki przycisku: wielkie litery

Rozstaw

I uzupełnij ustawienia przycisków, stosując następujące wartości dopełnienia do ustawień odstępów:

• Górna wyściółka: 16px
• Dolna wyściółka: 16px
• Lewa wyściółka: 24px
• Prawe wypełnienie: 24px

Dodaj sekcję #2

Kolor tła

Dodaj kolejną sekcję tuż pod poprzednią i użyj dla niej następującego koloru tła:

• Kolor tła: #fff4ef

Rozstaw

Usuń całą domyślną górną i dolną wyściółkę na karcie projektu obok.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj wiersz nr 1

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Bez dodawania modułów otwórz ustawienia wiersza i zmień ustawienia rozmiaru w następujący sposób:

• Wyrównaj wysokości kolumn: Tak
• Szerokość:
  • Komputer stacjonarny: 80%
  • Tablet i telefon: 95%
• Maksymalna szerokość: 2580 pikseli

Rozstaw

Zmodyfikuj również wartości dopełnienia w ustawieniach odstępów.

• Górna wyściółka: 5px
• Dolna wyściółka: 5px
• Lewa wyściółka: 2%
• Prawa wyściółka: 2%

Ustawienia kolumny 2

Kolor tła

Następnie otwórz ustawienia kolumny 2 i zastosuj kolor tła tylko na tablecie i telefonie.

• Pulpit: /
• Tablet i telefon: #f2e8e3

Rozstaw

Dodajemy również górną i dolną wyściółkę na mniejszych ekranach.

• Górna wyściółka:
  • Tablet i telefon: 25px
• Dolna wyściółka:
  • Tablet i telefon: 25px

Dodaj moduł menu do kolumny 1

Wybierz menu

Następnie dodamy do wiersza moduł menu. Wybierz wybrane menu.

Prześlij logo

Prześlij logo do swojego modułu menu.

Usuń kolor tła

Następnie usuń kolor tła menu.

Ustawienia tekstu menu

Przejdź do karty projektu modułu i stylizuj tekst menu w następujący sposób:

• Czcionka menu: Prata
• Kolor tekstu menu: #111821
• Rozmiar tekstu menu: 18px
• Wysokość linii menu: 1.4em
• Wyrównanie tekstu: do prawej

Rozwijane ustawienia menu

Zmień także ustawienia menu rozwijanego.

• Kolor tła menu rozwijanego: #fff4ef
• Kolor linii menu rozwijanego: #191919
• Kolor tekstu menu rozwijanego: #191919
• Kolor tła menu mobilnego: #fff4ef
• Kolor tekstu w menu mobilnym: #191919

Ustawienia ikon

Następnie zmień kolory ikon w ustawieniach ikon.

• Kolor ikony koszyka na zakupy: #191919
• Kolor ikony wyszukiwania: #191919
• Kolor ikony menu Hamburger: #191919

Rozmiary

I uzupełnij ustawienia modułu, stosując następujące ustawienia rozmiaru:

• Maksymalna szerokość logo: 50px
• Szerokość: 100%

3. Dodaj rozwijany formularz logowania i kliknij funkcjonalność

Dodaj moduł Blurb do kolumny 2

Dodaj tytuł

Teraz, gdy podstawa naszego nagłówka została zbudowana, możemy skupić się na tworzeniu wyzwalacza i formularza logowania. Pierwszą rzeczą, której będziemy potrzebować, jest moduł Blurb w kolumnie 2 naszego wiersza. Tutaj dodamy tytuł.

Wybierz ikonę

Następnie wybierzemy ikonę.

Ustawienia ikon

Przejdź do zakładki projektowania modułu i zmień ustawienia ikon w następujący sposób:

• Kolor ikony: #ffffff
• Ikona koła: Tak
• Kolor koła: #ff4700
• Umieszczenie obrazu/ikony: po lewej

Ustawienia tekstu tytułu

Następnie dostosuj styl tekstu tytułu.

• Czcionka tytułu: Lato
• Grubość czcionki tytułu: Ciężka
• Styl czcionki tytułu: wielkie litery
• Rozmiar tekstu tytułu: 12px
• Odstępy między literami tytułu: 3px

Animacja

Usuwamy również domyślną animację tego modułu w ustawieniach animacji.

• Animacja obrazu/ikony: brak animacji

CSS tytułu plamy

I dodamy górny margines do tytułu notki na karcie Zaawansowane.

margin-top: 10px;

Pozycja

Na koniec zmienimy położenie modułu w ustawieniach pozycji.

• Pozycja: bezwzględna
• Lokalizacja: Centrum

Dodaj wiersz nr 2 do sekcji nr 2

Struktura kolumny

Aby dodać formularz logowania, użyjemy nowego wiersza poniżej poprzedniego, z następującą strukturą kolumn:

Rozmiary

Bez dodawania modułów otwórz ustawienia wiersza i zmień ustawienia rozmiaru w następujący sposób:

• Wyrównaj wysokości kolumn: Tak
• Maksymalna szerokość: 2580 pikseli

Rozstaw

Zmodyfikuj również wartości dopełnienia.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px
• Lewa wyściółka: 2%
• Prawa wyściółka: 2%

Dodaj moduł logowania do kolumny 2

Usuń zawartość

Dodaj moduł logowania do kolumny 2. Upewnij się, że pola zawartości są puste.

Kolor tła

Następnie zmień kolor tła.

• Kolor tła: #ff4700

Ustawienia pól

Przejdź do karty projektu i dostosuj pola.

• Kolor tła pól: rgba(0,0,0,0)
• Kolor tekstu pól: rgba (255,255,255,0.73)
• Lewe dopełnienie pól: 0px
• Prawe dopełnienie pól: 0px
• Pola Czcionka: Lato
• Rozmiar tekstu pól: 16px

• Wysokość linii pól: 1,8 em
• Wszystkie rogi: 0px
• Szerokość dolnego obramowania pól: 1px
• Kolor dolnego obramowania pól: #ffffff

Ustawienia przycisków

Następnie zmodyfikuj ustawienia przycisków w następujący sposób:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 12px
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #141414
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 0px
• Odstępy między przyciskami: 2px
• Czcionka przycisku: Prata

• Styl czcionki przycisku: wielkie litery
• Górna wyściółka przycisków: 16px
• Dolna wyściółka przycisku: 16px

Rozmiary

Upewnij się, że szerokość również wynosi „100%”.

• Szerokość: 100%

CSS przycisku logowania

Zastosuj górny margines do pola CSS przycisku logowania w zakładce Zaawansowane.

margin-top: 30px;

Pozycja

I odpowiednio zmień położenie modułu:

• Pozycja: bezwzględna
• Lokalizacja: u góry po prawej
• Przesunięcie pionowe: 1px

Dodaj identyfikator CSS do modułu Blurb w wierszu nr 1

Teraz, gdy mamy już wszystkie potrzebne nam elementy, możemy skupić się na funkcjonalności klikania. Najpierw otwórz moduł Blurb i dodaj następujący identyfikator CSS:

• Identyfikator CSS: divi-login-toggle

Dodaj identyfikator CSS do modułu logowania w wierszu nr 2

Otwórz następnie moduł logowania i zastosuj następujący identyfikator CSS:

• Identyfikator CSS: divi-login-formularz

Dodaj moduł kodu poniżej modułu logowania

Następnie dodaj moduł kodu tuż pod modułem logowania.

Dodaj tagi stylu i skryptu

Aby stworzyć funkcjonalność kliknięcia, użyjemy kodu CSS i JQuery. Aby przygotować się na ten kod, dodamy tagi stylu (dla kodu CSS) i tagi skryptu (dla kodu JQuery).

Wstaw kod CSS między tagami stylu

Umieść następujące wiersze kodu CSS między tagami stylu:

#divi-login-toggle {
cursor: pointer;    
}

#divi-login-form {
margin-top: -20px;
visibility: hidden;
opacity: 0;
  
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;
}
  
.show-login-form {
visibility: visible !important;
margin-top: 0px !important;
opacity: 1 !important;
}

Wstaw JQuery między tagami skryptu

I następujący kod między tagami skryptu:

jQuery(document).ready(function($){

var loginForm =  $('#divi-login-form');

$('#divi-login-toggle').click(function() {

loginForm.toggleClass('show-login-form');

});
});

4. Zapisz zmiany w kreatorze motywów Divi

Teraz, gdy wszystko jest na swoim miejscu, jedyną rzeczą do zrobienia jest zapisanie wszystkich zmian Divi Theme Builder i wyświetlenie wyniku!

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak wykazać się kreatywnością za pomocą nagłówka podczas tworzenia witryny internetowej dla członków. Mówiąc dokładniej, pokazaliśmy, jak dołączyć rozwijany formularz logowania, który umożliwia odwiedzającym zalogowanie się na swoje konta bez konieczności przechodzenia do strony logowania WordPress. Udało Ci się również bezpłatnie pobrać plik JSON szablonu nagłówka! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.