Przejdź do głównej treści

Samouczek Divi: Jak korzystać z modułu Zone Widget

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Divi pozwala tworzyć nieograniczoną liczbę gotowych do użycia obszarów w locie. Paski boczne można następnie dodawać do dowolnej strony, umożliwiając tworzenie unikalnych pasków bocznych dla różnych sekcji witryny.

Jak dodać moduł widgetu Zonde z Divi

Aby dodać moduł paska bocznego do swojej strony, musisz najpierw przejść do Divi Builder. Po zainstalowaniu motywu Divi na swojej stronie internetowej zauważysz przycisk Użyj Divi Builder nad wydawcą 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.

divi budowniczy

Po użyciu programu Visual Builder możesz kliknąć szary przycisk (+), aby dodać nowy moduł do swojej strony. Nowe moduły można dodawać tylko wewnątrz linii. Jeśli zaczynasz nową stronę, nie zapomnij najpierw dodać do niej linii.

sidebar divi plugin wordpress.png

Znajdź moduł paska bocznego 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 także wpisać słowo „pasek boczny”, a następnie kliknąć „Enter”, aby automatycznie znaleźć i dodać moduł paska bocznego! 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: dodawanie paska bocznego do strony bloga

Moduł paska bocznego pozwala wstawiać pasek boczny (i wszystkie jego wbudowane widżety) w dowolnym miejscu na stronie. W rzeczywistości możesz dodać dowolny obszar widżetu za pomocą modułu paska bocznego. W tym przykładzie pokażę, jak wstawić niestandardowy pasek boczny do strony bloga, korzystając ze specjalnej sekcji, aby wyświetlić widżet wyszukiwania i najnowsze posty w WordPress.

pasek boczny do artykułu na WordPress.jpg

Ta strona blogu ma nagłówek o pełnej szerokości, aby wyświetlić tytuł bloga u góry strony. Pod modułem nagłówka pełnej szerokości znajduje się specjalny układ z modułem blogu po lewej stronie i pionowym prawym paskiem bocznym po prawej stronie.

Korzystanie z sekcji specjalistycznej pozwala dodawać złożone warianty kolumn obok pionowych pasków bocznych, bez dodawania niepożądanych przerw na stronie. Jest idealny do bloga z paskiem bocznym.

Najpierw upewnij się, że masz ustawione widżety na stronie Widżety na pulpicie nawigacyjnym WordPress. W tym przykładzie dodaję widżet wyszukiwania i widżet Najnowsze artykuły do ​​widżetu paska bocznego.

widżet paska bocznego wordpress.png

Następnie wdróż Visual Builder, aby edytować stronę blogu. Dodaj do swojej strony specjalną sekcję (tuż pod nagłówkiem) w następującym układzie:

utwórz niestandardową sekcję divi.png

wstaw kolumny divi.png

Po dodaniu do strony specjalistycznej sekcji zauważysz, że obszar (po lewej) ma przycisk „Dodaj moduł”. W tym przykładzie dodano moduł Blog z układem siatki w celu wyświetlania postów na blogu.
przykładowy artykuł układ blogu grid.png

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

Drugi (po prawej) ma przycisk „Wstaw linię”. Obszar „Wstaw moduł” przedstawia pionowy pasek boczny. Tutaj wejdziesz do modułu paska bocznego. Możesz dodać tutaj tyle modułów w jednym wierszu, a będą one rozciągać się na pionowej szerokości sekcji, w sąsiedztwie budowanej obok niej struktury kolumny. W rzeczywistości w tym przykładzie strona blogu ma już moduł poczty e-mail Optin i moduł Person w tym obszarze pionowego paska bocznego układu specjalizacji.

Teraz dodaj moduł paska bocznego na górze innych modułów w obszarze pionowego paska bocznego.

dodaj moduły do ​​sidebar.jpg

W ustawieniu modułu paska bocznego zaktualizuj następujące elementy:

Karta Zawartość

Obszar widżetów: wybierz Pasek boczny

Karta Projekt

Orientacja: w prawo (ponieważ pasek boczny jest po prawej stronie)
Usuń separator obramowania: TAK
Kolor tekstu:
Rozmiar czcionki ciemnego nagłówka: 26px
Rozstaw listów
Głowa: 3px Wysokość linii nagłówka: 1.1em

Karta Zaawansowane

W sekcji Niestandardowy CSS dodaj następujący CSS do pola tekstowego Widżet. Spowoduje to dopasowanie projektu widżetów paska bocznego do projektu witryny:

tło: #fff; dopełnienie: 20px; -webkit-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1) -moz-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1); box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1);

utwórz pasek boczny divi.jpg

Zapisz ustawienia

Teraz możesz zobaczyć, że moduł paska bocznego wyświetla elementy widgetu Pasek boczny (Wyszukaj i najnowsze artykuły) i wyświetla je w pionowym obszarze paska bocznego sekcji specjalizacji.

przykład paska bocznego divi.jpg

Opcje zawartości paska bocznego

W zakładce treści znajdziesz wszystkie elementy treści modułu, takie jak tekst, obrazy i ikony. Wszystko, co kontroluje to, co pojawia się w twoim module, zawsze znajdzie się w tej zakładce.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

sidebar.png ustawienia

Obszar widżetów

Moduł paska bocznego używa obszarów tworzenia widżetów, które można utworzyć na karcie Wyglądy> Widżety. Z tego menu rozwijanego możesz wybrać jeden ze swoich niestandardowych obszarów widżetów.

Etykieta administratora

Spowoduje to zmianę etykiety modułu w konstruktorze w celu łatwej identyfikacji. Gdy używasz widoku WireFrame w Visual Builder, te etykiety pojawiają się w bloku modułu interfejsu Divi Builder.

Opcje projektowania paska bocznego

Na karcie Projektowanie znajdziesz wszystkie opcje stylu modułu, takie jak czcionki, kolory, rozmiar i odstępy. Jest to karta, której użyjesz do zmiany wyglądu swojego modułu. Każdy moduł Divi ma długą listę parametrów projektowych, których można użyć do zmiany czegokolwiek.

opcje projektowania divi.png

orientacja

Tutaj możesz wybrać, po której stronie ma być wyświetlany pasek boczny. To ustawienie kontroluje orientację tekstu i położenie obramowania.

Usuń separator obramowania

Tutaj możesz usunąć cienką szarą ramkę, która oddziela pasek boczny od zawartości strony.

Kolor tekstu

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

Nagłówek policji (czcionka nagłówka)

Możesz zmienić czcionkę tekstu nagłówka, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki dużych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na stronie. Możesz także dostosować styl tekstu, używając opcji pogrubienia, kursywy, wielkich liter i 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 wpisać wartość żądanego rozmiaru tekstu bezpośrednio w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wprowadzić „px” lub „em” w zależności od wartości swojego rozmiaru, aby zmienić typ jednostki.

Kolor tekstu nagłówka

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

Odstępy między papierami firmowymi

Odstępy między literami wpływają na odstęp między literami. 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 wprowadzić „px” lub „em” w zależności od wartości swojego rozmiaru, aby zmienić typ jednostki.

Wysokość linii nagłówka

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

Czcionka ciała

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

Rozmiar czcionki ciała

Tutaj możesz dostosować rozmiar swojego tekstu. Możesz przeciągnąć suwak, aby zwiększyć lub zmniejszyć rozmiar tekstu lub bezpośrednio wprowadzić wartość żądanego rozmiaru tekstu w polu wejściowym 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 swojego rozmiaru, aby zmienić typ jednostki.

Kolor tekstu w kolorze

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

Rozstawianie liter ciała

Odstępy między literami wpływają na odstęp między literami. Jeśli chcesz zwiększyć odstęp między literami 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 wprowadzić „px” lub „em” w zależności od wartości swojego rozmiaru, aby zmienić typ jednostki.

Wysokość linii ciała

Wysokość linii wpływa na odstęp między wierszami tekstu w 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 wejściowym znajduje się na prawo od kursora. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wprowadzić „px” lub „em” w zależności od wartości swojego rozmiaru, aby zmienić typ jednostki.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

Zaawansowane opcje paska bocznego

Na karcie Zaawansowane znajdziesz opcje, które mogą być przydatne bardziej doświadczonym projektantom stron internetowych, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do jednego z wielu elementów modułu. Możesz także zastosować niestandardowe klasy i identyfikatory CSS do modułu, których można użyć do dostosowania modułu w pliku style.css motywu podrzędnego.

przedni pasek boczny divi.png

Identyfikator CSS

Wprowadź opcjonalny identyfikator CSS, który będzie używany dla tego modułu. Identyfikatora można użyć do utworzenia niestandardowego stylu CSS lub do utworzenia linków do określonych sekcji strony.

Klasa CSS

Wprowadź opcjonalne klasy CSS, które będą używane dla tego modułu. Klasy CSS można użyć do utworzenia niestandardowego stylu CSS. Możesz dodać wiele klas oddzielonych spacją. Tych klas można używać w motywie podrzędnym Divi lub w niestandardowym arkuszu stylów CSS, który dodajesz do swojej strony lub witryny za pomocą opcji motywu Divi lub ustawień strony Divi Builder.

Niestandardowy CSS

Niestandardowy CSS można również zastosować do modułu i jednego z wewnętrznych elementów modułu. W sekcji Niestandardowy CSS znajdziesz pole tekstowe, w którym możesz dodać niestandardowe arkusze stylów CSS bezpośrednio do każdego elementu. Wpisy CSS w tych parametrach są już opakowane w znaczniki stylu. Wpisz reguły CSS oddzielone średnikami.

widoczność

Ta opcja pozwala kontrolować urządzenia, na których pojawia się moduł. Możesz wyłączyć moduł indywidualnie na tabletach, smartfonach lub komputerach stacjonarnych. Jest to przydatne, jeśli chcesz korzystać z różnych modułów na różnych urządzeniach lub chcesz uprościć projektowanie mobilne poprzez wyeliminowanie niektórych elementów strony.

Inne samouczki Divi

Ten artykuł zawiera komentarze 3
  1. Halo
    W przeciwieństwie do ciebie próbuję usunąć pasek boczny z moich stron artykułów na blogu i nie wiem, jak to zrobić w nowej wersji Divi 4
    Czy masz napiwek?
    dziękuję
    Aurélie

  2. Witam i dziękuję za te tutoriale.

    W tym przykładzie zacząłeś od strony pełnej szerokości lub szablonu z oryginalnym paskiem bocznym?

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
14 akcji
udział8
ćwierkanie2
Enregistrer4