Moduł logowania (zaloguj się) wyświetla a forma Logowanie WordPress, w stylu Divi, w dowolnym miejscu na Twojej stronie. Jeśli używasz WordPressa z obszarem członkowskim, dodaj plik forma bezpośrednie połączenie ze stroną może być bardzo przydatne (zamiast przekierowywać ludzi do forma Logowanie do WordPressa, które używa innego stylu niż Twój motyw).

Jak dodać moduł logowania do swojej strony

Zanim będziesz mógł dodać moduł logowania do swojej strony, musisz najpierw przejść do Divi Builder. Kiedyś Motyw Divi zainstalowany na Twojej stronie, zauważysz przycisk Użyj Divi Builder nad edytorem postów za każdym razem, gdy tworzysz nową stronę. Kliknij ten przycisk, aby aktywować Divi Builder i uzyskać dostęp do wszystkich modułów Divi Builder. Następnie kliknij przycisk Użyj Visual Builder aby uruchomić generator w trybie wizualnym. Możesz także kliknąć przycisk Użyj Visual Builder podczas przeglądania witryny na pierwszym planie, jeśli jesteś podłączony do pulpitu nawigacyjnego WordPress.

Po wejściu do programu Visual Builder możesz kliknąć szary przycisk plus, aby dodać nowy moduł do swojej strony. Nowe moduły można dodawać tylko w wierszach. Jeśli zaczynasz nową stronę, pamiętaj, aby najpierw dodać wiersz do swojej strony.

Znajdź moduł logowania na liście modułów i kliknij go, aby dodać go do swojej strony. Listę modułów można przeszukiwać, co oznacza, że ​​możesz również wpisać słowo „Połącz”, a następnie kliknąć „Enter”, aby automatycznie znaleźć i dodać moduł połączenia! Po dodaniu modułu zostaniesz przywitany przez listę opcji modułu. Te opcje są podzielone na trzy główne grupy: Treść , Koncepcja et zaawansowany .

Przykład zastosowania: Dodaj niestandardowy formularz logowania do strony logowania obszaru członka

Ponieważ witryny członkostwa wymagają od użytkownika zalogowania się do części lub całości treści, moduł logowania ułatwia dodanie formularza logowania do własnej strony logowania. Możesz także przekierować użytkowników do tego formularza zamiast do domyślnej strony logowania WordPress.

Oto prosta strona logowania z modułem logowania Pokażę ci, jak utworzyć:

Korzystając z programu Visual Builder, dodaj nową sekcję standardową do strony logowania członkostwa z wierszem o pełnej szerokości (1 kolumna). Następnie włóż moduł przyłączeniowy do przewodu.

Zaktualizuj ustawienia połączenia w następujący sposób:

Opcje zawartości

Tytuł: Połączenie
Treść: [wpisz krótki opis kursu lub instrukcję logowania]
Przekieruj do bieżącej strony: TAK

Opcje projektowania

Kolor tła pola: # f0f0f0 Kolor tekstu: Ciemny Czcionka nagłówka: 35 pikseli Kolor nagłówka: # 888888 Rozmiar czcionki głównej: 16 pikseli Obramowanie: Tak Kolor obramowania: # 0c71c3 Szerokość obramowania: 1px Wypełnienie niestandardowe: 50px góra, 50px prawa, 50px dół, 50px lewo Użyj niestandardowych stylów dla przycisku: TAK Rozmiar tekstu przycisku: 26px Kolor tekstu przycisku: #ffffff Kolor przycisku: # 0c71c3 przycisk: 0px Przycisk czcionki: domyślny, wielkie litery Ikona przycisku Dodaj: TAK Ikona przycisku: Wyświetla tylko ikonę po najechaniu na przycisk: NIE

To wszystko. Witryna strefy członkowskiej ma teraz spersonalizowany formularz logowania, w którym użytkownicy będą przekierowywani, gdy będą musieli zalogować się do kursu. Nie musisz zadowalać się domyślnym formularzem logowania WordPress.

Opcje zawartości modułu połączenia

W zakładce Treść znajdziesz wszystkie elementy treści modułu, takie jak tekst, obrazy i ikony. Wszystko to kontroluje co pojawi się w module zawsze będzie można znaleźć w tej zakładce.

Tytuł

Tytuł pojawi się w polu logowania nad formularzem logowania.

Treść

Treść zostanie wyświetlona w polu logowania pod tytułem. Jeśli chcesz dodać dodatkowy opis, możesz skorzystać z pola. W przeciwnym razie pozostaw to pole puste.

Przekieruj do bieżącej strony

Tutaj możesz wybrać, czy użytkownik ma zostać przekierowany na bieżącą stronę.

Użyj koloru tła

Jeśli chcesz nadać formularzowi logowania jednolity kolor tła, wybierz „tak” dla tej opcji, a zostanie użyty kolor tła wybrany w następnej opcji.

Kolor tła

Wybierz kolor tła, który będzie wyświetlany jako tło Twojego pola logowania. Jeśli zdecydujesz się wyłączyć kolory tła w poprzedniej opcji, ten kolor nie przyniesie żadnego efektu.

Etykieta administratora

Spowoduje to zmianę etykiety modułu w konstruktorze w celu łatwej identyfikacji. Podczas korzystania z widoku WireFrame w programie Visual Builder etykiety te pojawiają się w bloku modułu interfejsu Divi Builder.

Opcje stylu dla modułu logowania

Na karcie Projekt znajdziesz wszystkie opcje stylizacji modułu, takie jak czcionki, kolory, rozmiar i odstępy. To jest zakładka, której użyjesz do zmiany wyglądu modułu. Każdy moduł Divi ma długą listę ustawień projektu, których możesz użyć do zmiany czegokolwiek.

Kolor tła pola formularza

Formularz logowania zawiera dwa pola wprowadzania nazwy użytkownika i hasła. Możesz użyć tego ustawienia, aby dostosować kolor tła tych pól.

Kolor tekstu pola formularza

Formularz logowania zawiera dwa pola wprowadzania nazwy użytkownika i hasła. Możesz użyć tego ustawienia, aby dostosować kolor tekstu w tych polach. Jeśli dostosowałeś kolor tła pola formularza, możesz również dostosować kolor tekstu, aby zapewnić harmonijną relację kolorów.

Kolor tła

Gdy pole wprowadzania jest skupione za pomocą myszy gościa, kolory zmieniają się, aby wyraźnie wskazać, które pole jest aktywne. Tutaj możesz zdefiniować kolor tła wybranych pól.

Ustaw kolor tekstu

Gdy pole wprowadzania jest skupione za pomocą myszy gościa, kolory zmieniają się, aby wyraźnie wskazać, które pole jest aktywne. Tutaj możesz zdefiniować kolor tekstu zaznaczonych pól.

Użyj koloru ramki ostrości

Jeśli chcesz dodać obramowanie do pól wejściowych, gdy są one aktywne, możesz włączyć tę opcję.

Kolor obramowania ostrości

Korzystając z tego ustawienia, możesz zmienić kolor obramowania pojawiającego się na skupionych polach wejściowych.

Kolor tekstu

Tutaj możesz wybrać, czy tekst ma być jasny, czy ciemny. Jeśli pracujesz na ciemnym tle, tekst powinien być jasny. Jeśli tło jest jasne, tekst powinien być ciemny.

Orientacja tekstu

Tutaj możesz dostosować wyrównanie tekstu.

Czcionka nagłówka

Możesz zmienić czcionkę tekstu nagłówka, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.

Rozmiar czcionki nagłówka

Tutaj możesz dostosować rozmiar tekstu nagłówka. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu lub bezpośrednio wprowadzić wartość żądanego rozmiaru tekstu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Kolor tekstu nagłówka

Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu nagłówka, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.

Odstępy między literami w nagłówku

Odstępy między literami wpływają na odstępy między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście nagłówka, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Wysokość wiersza nagłówka

Wysokość wiersza wpływa na odstęp między każdym wierszem tekstu nagłówka.Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w pole wprowadzania po prawej stronie kursora. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Czcionka ciała

Możesz zmienić swoją czcionkę główną, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.

Rozmiar czcionki ciała

Tutaj możesz dostosować rozmiar tekstu. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu lub bezpośrednio wprowadzić wartość żądanego rozmiaru tekstu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Kolor tekstu w kolorze

Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.

Rozstawianie liter ciała

Odstępy między literami wpływają na odstępy między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Wysokość linii ciała

Wysokość linii wpływa na odstęp pomiędzy każdym wierszem tekstu w Twoim ciele Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania znajdujący się po prawej stronie kursora. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Użyj granicy

Włączenie tej opcji spowoduje umieszczenie ramki wokół modułu. To obramowanie można dostosować za pomocą następujących parametrów warunkowych.

Kolor obramowania

Ta opcja wpływa na kolor obramowania. Wybierz kolor niestandardowy z próbnika kolorów, aby zastosować go do obramowania.

Szerokość granicy

Domyślnie krawędzie mają szerokość 1 piksela. Możesz zwiększyć tę wartość, przeciągając suwak zakresu lub wprowadzając niestandardową wartość w polu wprowadzania po prawej stronie suwaka. Obsługiwane są niestandardowe jednostki miary, co oznacza, że ​​możesz zmienić domyślną jednostkę z „px” na inną, np. Em, vh, vw itp.

Styl graniczny

Krawędzie obsługują osiem różnych stylów: jednolity, kropkowany, kropkowany, podwójny, rowek, grzbiet, nakładka i początek. Wybierz żądany styl z menu rozwijanego, aby zastosować go do obramowania.

Margines niestandardowy

Margines to przestrzeń dodana na zewnątrz modułu, między modułem a następnym elementem powyżej, poniżej lub po lewej i prawej stronie. Możesz dodać niestandardowe wartości marginesów do dowolnej z czterech stron modułu. Aby usunąć niestandardowy margines, usuń wartość dodaną z pola wejściowego. Domyślnie wartości te są mierzone w pikselach, ale w polach wejściowych można wprowadzić niestandardowe jednostki miary.

Niestandardowe wypełnienie

Wypełnienie to przestrzeń dodana wewnątrz modułu, pomiędzy krawędzią modułu a jego elementami wewnętrznymi. Możesz dodać niestandardowe wartości dopełnienia do dowolnej z czterech stron modułu. Aby usunąć niestandardowy margines, usuń wartość dodaną z pola wejściowego. Domyślnie wartości te są mierzone w pikselach, ale w polach wejściowych można wprowadzić niestandardowe jednostki miary.

Użyj niestandardowych stylów dla przycisku

Włączenie tej opcji ujawnia różne ustawienia dostosowywania przycisków, których możesz użyć do zmiany wyglądu przycisku modułu.

Rozmiar tekstu przycisku

To ustawienie może służyć do zwiększania lub zmniejszania rozmiaru tekstu na przycisku. Przycisk dostosowuje się wraz ze wzrostem i zmniejszeniem rozmiaru tekstu.

Kolor tekstu przycisku

Domyślnie przyciski przyjmują kolor akcentów motywu, zgodnie z definicją w narzędziu Dostosowywanie motywu. Ta opcja umożliwia przypisanie niestandardowego koloru tekstu do przycisku tego modułu. Wybierz kolor niestandardowy za pomocą próbnika kolorów, aby zmienić kolor przycisku.

Kolor tła przycisku

Domyślnie przyciski mają przezroczysty kolor tła. Można to zmienić, wybierając żądany kolor tła z próbnika kolorów.

Przycisk granicy szerokości

Wszystkie przyciski Divi mają domyślnie obramowanie 2px. Za pomocą tego ustawienia można zwiększyć lub zmniejszyć tę granicę. Obramowania można usunąć, wprowadzając wartość 0.

Kolor obramowania przycisku

Domyślnie obramowania przycisków przyjmują kolor akcentu motywu, zgodnie z definicją w narzędziu Dostosowywanie motywu. Ta opcja umożliwia przypisanie niestandardowego koloru obramowania do przycisku tego modułu. Wybierz swój kolor niestandardowy za pomocą próbnika kolorów, aby zmienić kolor obramowania przycisku.

Promień obramowania przycisku

Promień obramowania wpływa na zaokrąglenie rogów przycisków. Domyślnie przyciski w Divi mają mały promień obramowania, który zaokrągla rogi o 3 piksele. Możesz zmniejszyć tę wartość do 0, aby utworzyć kwadratowy przycisk, lub znacznie ją zwiększyć, aby utworzyć przyciski z okrągłymi krawędziami.

Rozstawianie liter przycisków

Odstępy między literami wpływają na odstępy między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście przycisku, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Czcionka przycisku

Możesz zmienić czcionkę tekstu przycisku, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.

Dodaj ikonę przycisku

Wyłączone, to ustawienie usunie ikony z przycisku. Domyślnie wszystkie przyciski Divi wyświetlają ikonę strzałki w dymku.

Ikona przycisku

Jeśli ikony są włączone, możesz użyć tego ustawienia, aby wybrać ikonę, która ma być używana na przycisku. Divi ma różne ikony do wyboru.

Kolor ikony przycisku

Dostosowanie tego ustawienia spowoduje zmianę koloru ikony wyświetlanej na przycisku. Domyślnie kolor ikony jest taki sam, jak kolor tekstu przycisku, ale to ustawienie umożliwia niezależną regulację koloru.

Przycisk umieszczania ikon

Możesz wybrać wyświetlanie ikony przycisku po lewej lub prawej stronie przycisku.

Pokaż ikonę tylko po najechaniu na przycisk

Domyślnie ikony przycisków są wyświetlane tylko po najechaniu kursorem. Jeśli chcesz, aby ikona była zawsze wyświetlana, wyłącz to ustawienie.

Przycisk Umieść kolor tekstu

Ten kolor zostanie użyty po najechaniu kursorem myszy na przycisk gościa. Kolor zmieni się z koloru podstawowego zdefiniowanego w poprzednich ustawieniach.

Najedź na kolor tła przycisku

Ten kolor zostanie użyty po najechaniu kursorem myszy na przycisk gościa. Kolor zmieni się z koloru podstawowego zdefiniowanego w poprzednich ustawieniach.

Przycisk Obramowania Koloru

Ten kolor zostanie użyty po najechaniu kursorem myszy na przycisk gościa. Kolor zmieni się z koloru podstawowego zdefiniowanego w poprzednich ustawieniach.

Przesuń kursor na obramowanie

Wartość ta zostanie użyta, gdy przycisk zostanie umieszczony nad przyciskiem myszy gościa. Wartość zmieni się od wartości bazowej zdefiniowanej w poprzednich ustawieniach.

Przycisk odstępu między nutami

Wartość ta zostanie użyta, gdy przycisk zostanie umieszczony nad przyciskiem myszy gościa. Wartość zmieni się od wartości bazowej zdefiniowanej w poprzednich ustawieniach.

Zaawansowane opcje modułu logowania

Na karcie Zaawansowane znajdziesz opcje, które mogą być przydatne dla bardziej doświadczonych projektantów stron internetowych, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do dowolnego z wielu elementów modułu. Możesz również zastosować niestandardowe klasy CSS i identyfikatory do modułu, których można użyć do dostosowania modułu w pliku style.css motywu potomnego.

Identyfikator CSS

Wprowadź opcjonalny identyfikator CSS do użycia w tym module. Identyfikator może służyć do tworzenia niestandardowego stylu CSS lub do łączenia z określonymi sekcjami strony.

Klasa CSS

Wprowadź opcjonalne klasy CSS do użycia w tym module. Do tworzenia niestandardowych stylów CSS można użyć klasy CSS. Możesz dodać wiele klas oddzielonych spacją. Klasy te mogą być używane w motywie potomnym Divi lub w niestandardowym arkuszu stylów CSS, który dodajesz do swojej strony lub do witryny internetowej za pomocą opcji motywu Divi lub ustawień na stronie Divi Builder.

Niestandardowy CSS

Niestandardowy CSS można również zastosować do modułu i dowolnych elementów wewnętrznych modułu. W sekcji Niestandardowe CSS znajdziesz pole tekstowe, w którym możesz dodać własne arkusze stylów CSS bezpośrednio do każdego elementu. Wpisy CSS w tych ustawieniach są już opakowane w znaczniki stylu. Po prostu wprowadź reguły CSS oddzielone średnikami.

widoczność

Ta opcja umożliwia sterowanie urządzeniami, na których pojawia się Twój moduł. Możesz indywidualnie dezaktywować swój moduł na tabletach, smartfonach lub komputerach stacjonarnych. Jest to przydatne, jeśli chcesz używać różnych modów na różnych urządzeniach lub jeśli chcesz uprościć projekt mobilny, usuwając określone elementy ze strony.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]POBIERZ MOTYW DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”centrum” font_family = „Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]POBIERZ SZABLONY DIVI[/vcex_button][/vc_column][/vc_row]

Inne samouczki Divi

• strony internetowe 5 dotyczące stosowania restauracja Divi tematu
• Jak dodać tekst do produktu Divi WooCommerce
• Jak zmienić kolor menu między stronami Divi
• Jak spersonalizować siatki bloga za pomocą Divi
• Jak korzystać z roli Divi edytor na WordPressie
• Jak utworzyć pełnoekranowy suwak Divi
• Jak zmienić kolor menu między stronami Divi
• Funkcje, których prawdopodobnie nie wiesz o Divi
• Jak korzystać z Divi Builder na WordPress
• Jak korzystać z modułu przewijania wideo Divi
• Jak korzystać z modułu Divi Builder Flip
• Jak dodać moduł referencji w Divi Builder
• Jak korzystać z modułu tekstowego Divi
• Jak utworzyć suwak na Divi
• Jak edytować rolę użytkownika Divi
• Jak korzystać z modułu Divi Social Media
• Jak korzystać z modułu sklepu na temat WordPress Divi
• Jak korzystać z modułu paska bocznego Divi
• Jak korzystać z modułu tabeli cen Divi
• Jak korzystać z modułu tytułowego publikacji Divi
• Jak dodać moduł wideo Divi
• Jak korzystać z modułu nawigacji artykułów
• Jak korzystać z modułu wyszukiwania Divi
• Jak korzystać z modułu portfela Divi
• Jak korzystać z modułu person w Divi Builder
• Jak korzystać z modułu portfela z filtrem Divi
• Jak korzystać z modułu suwaka o pełnej szerokości
• Jak korzystać z modułu obrazu Divi Builder
• Jak korzystać z modułu nawigacji pełnej szerokości Divi Builder
• Jak korzystać z modułu galerii obrazów
• Jak korzystać z pełnego modułu karty Divi Builder
• Jak korzystać z modułu portfela o pełnej szerokości Divi
• Jak korzystać z modułu nagłówka Divi o pełnej szerokości
• Jak korzystać z modułu licznika Divi
• Jak korzystać z suwaka artykułów w Divi Builder
• Jak korzystać z modułu Divi Email Optin