Divi pozwala na tworzenie nieograniczonej liczby gotowych do użycia obszarów w locie. Paski boczne można następnie dodać do dowolnej strony, co pozwala na tworzenie unikalnych pasków bocznych dla różnych sekcji Witryna internetowa.
Jak dodać moduł widgetu Zonde z Divi
Zanim będziesz mógł dodać moduł paska bocznego do swojej strony, musisz najpierw przejść do Divi Builder. Kiedyś Motyw Divi zainstalowany na twoim Witryna internetowa, 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 kiedy przeglądasz swoje Witryna internetowa na pierwszym planie, jeśli jesteś zalogowany do pulpitu WordPress.
Gdy używasz programu Visual Builder, możesz kliknąć szary przycisk (+), 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ł 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: dodanie paska bocznego do strony bloga
Moduł paska bocznego umożliwia wstawienie paska bocznego (i wszystkich jego wbudowanych widżetów) w dowolnym miejscu na stronie. Właściwie możesz dodać dowolny obszar widżetów za pomocą modułu paska bocznego. W tym przykładzie pokażę, jak wstawić niestandardowy pasek boczny na stronę swojego bloga za pomocą wyspecjalizowanej sekcji, aby wyświetlić widżet wyszukiwania i ostatnich postów na WordPress.
Ta strona blogu ma nagłówek o pełnej szerokości, który wyświetla tytuł bloga u góry strony. Poniżej modułu nagłówka o pełnej szerokości znajduje się specjalny układ z modułem blogu po lewej stronie i pionowym paskiem bocznym po prawej stronie.
Korzystanie ze specjalistycznej sekcji umożliwia dodawanie złożonych odmian kolumn obok pionowych pasków bocznych bez dodawania niechcianych przerw na stronie. Jest to idealne rozwiązanie dla bloga z paskiem bocznym.
Najpierw upewnij się, że masz skonfigurowane widżety na stronie Widżety na pulpicie nawigacyjnym WordPress. W tym przykładzie dodam widżet Wyszukiwanie i widżet Ostatnie artykuły do widżetu Pasek boczny.
Następnie wdróż program Visual Builder, aby edytować stronę bloga. Dodaj wyspecjalizowaną sekcję do swojej strony (tuż pod nagłówkiem) o następującym układzie:
Po dodaniu wyspecjalizowanej sekcji do strony zauważysz, że obszar (po lewej) ma przycisk „Dodaj moduł”. W tym przykładzie jest to miejsce, w którym moduł Blog z układem siatki został dodany do wyświetlania postów na blogu.
Drugi (po prawej) ma przycisk „Wstaw wiersz”. Obszar „Wstaw moduł” reprezentuje pionowy pasek boczny. Tutaj wejdziesz do modułu paska bocznego. Możesz dodać tutaj dowolną liczbę modułów w jednym rzędzie, które będą obejmowały pionową szerokość przekroju, przylegając do struktury kolumn, którą zbudujesz obok niego. W rzeczywistości w tym przykładzie strona bloga ma już moduł Email Optin i moduł Person w tym obszarze pionowego paska bocznego układu Specjalność.
Teraz dodaj moduł paska bocznego na górze innych modułów w obszarze pionowego paska bocznego.
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
header: 3px Wysokość wiersza nagłówka: 1.1em
Karta Zaawansowane
W sekcji Custom CSS dodaj następujący CSS do pola tekstowego Widget. Dzięki temu wygląd widżetów paska bocznego będzie pasował 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);
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.
Opcje zawartości paska bocznego
W zakładce Treść 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.
Obszar widżetów
Moduł paska bocznego wykorzystuje obszary tworzenia widgetów, które można tworzyć na karcie Wyglądy> Widżety. Z tego menu rozwijanego możesz wybrać jeden z niestandardowych obszarów widżetów.
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 projektowania paska bocznego
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.
Orientacja
Tutaj możesz wybrać, po której stronie będzie wyświetlany pasek boczny. Ten parametr 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ć jasny. Jeśli tło jest jasne, tekst powinien być ciemny.
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ść linii wpływa na odstępy między poszczególnymi 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. wpis znajdujący się 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 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, 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.
Zaawansowane opcje paska bocznego
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
Halo
W przeciwieństwie do Ciebie próbuję usunąć pasek boczny ze stron z artykułami na moim blogu i nie wiem, jak to zrobić w nowej wersji Divi 4
Czy masz napiwek?
dziękuję
Aurélie
Witam i dziękuję za te tutoriale.
W tym przykładzie zaczynasz od strony o pełnej szerokości, czy od szablonu z oryginalnym paskiem bocznym?
Cześć Cess, naprawdę nie pamiętam.