Divi Builder Plugin Documentation

Jak dodać, skonfigurować i dostosować moduł Divi blog.

W Divi, nawet blogi są modułem, a Twój „blog” może być umieszczony w dowolnym miejscu na Twojej stronie i w różnych formatach. Możesz łączyć moduły blogów i pasków bocznych, aby tworzyć klasyczne projekty blogów. Blogi 1-kolumnowe, 2-kolumnowe lub 3-kolumnowe mogą być zbudowane przy użyciu modułów blogów i pasków bocznych.

View A Live Demo Of This Module

How To Add A Blog Module To Your Page

Zanim będziesz mógł dodać moduł blogowy do swojej strony, będziesz musiał najpierw wskoczyć do Divi Builder. Kiedy motyw Divi zostanie zainstalowany na twojej stronie, zauważysz przycisk Użyj Divi Builder nad edytorem postów za każdym razem, kiedy budujesz nową stronę. Kliknięcie tego przycisku włączy Divi Builder, dając ci dostęp do wszystkich jego modułów. Następnie kliknij przycisk Użyj Visual Builder, aby uruchomić kreator w trybie wizualnym. Możesz również kliknąć przycisk Użyj wizualnego konstruktora podczas przeglądania swojej witryny na front-end, jeśli jesteś zalogowany do pulpitu nawigacyjnego WordPress.

Po wejściu do Visual Builder, możesz kliknąć szary przycisk plus, aby dodać nowy moduł do swojej strony. Nowe moduły mogą być dodawane tylko wewnątrz wierszy. Jeśli zaczynasz nową stronę, nie zapomnij dodać wiersz do swojej strony pierwszy. Mamy kilka świetnych tutoriali o tym, jak używać elementów wiersza i sekcji w Divi.

Znajdź moduł bloga na liście modułów i kliknij go, aby dodać go do swojej strony. Lista modułów jest przeszukiwalna, co oznacza, że możesz również wpisać słowo „blog”, a następnie kliknąć enter, aby automatycznie znaleźć i dodać moduł blogowy! Gdy moduł został dodany, zostaniesz przywitany z listą opcji modułu. Opcje te są podzielone na trzy główne grupy: Content, Design i Advanced.

Use Case Example: Adding Blog Module with A Grid Layout in a Specialty Section with a Right Sidebar

Dla tego przykładu zamierzam dodać moduł Blog do strony bloga. Ten blog strona mieć pełny szerokość nagłówek z moduł wyszukiwania pod ono. Pod modułem wyszukiwania, zamierzam dodać sekcję specjalną z modułem Blog po lewej stronie i sekcją paska bocznego po prawej stronie. Pasek boczny po prawej stronie ma ostatnie posty widget, Email Optin Module, i Person Module.

Tutaj jest to, co przykładowa strona wygląda jak.

Zauważ, że moduł bloga jest w układzie siatki po lewej stronie sekcji specjalistycznej.

Zacznijmy.

Użyj kreatora wizualnego, aby dodać Sekcję specjalną z następującym układem:

Zostaniesz poproszony o dodanie 1 kolumny lub 2 kolumn po lewej stronie. Wybierz 1-kolumnowy wiersz.

Następnie dodaj moduł Blog do wiersza.

Uaktualnij ustawienia Bloga w następujący sposób:

Opcje treści

Liczba postów: 6
Przycisk Czytaj więcej: ON
Show Pagination: NO
Grid Tile Background Color: #ffffff

Opcje projektowe

Layout: Grid
Use Dropshadow: ON
Overlay Icon Color: #ffffff
Hover Overlay Color: rgba(224,153,0,0.51)
Header Font: Default
Header Font Size: 21px
Header Text Color: #333333
Header Letter Spacing: 1px
Wysokość linii nagłówka: 1.2em
Use Border: YES
Kolor obramowania: #f0f0f0
Border Width: 1px
Border Style: Solid

Opcje zaawansowane

Custom CSS (Read More Button):

Zaawansowany Custom CSS dla przycisku czytaj więcej tworzy niestandardowy wygląd, który dobrze pasuje do projektu.

W prawej sekcji paska bocznego układu Sekcji Specjalności będziesz musiał dodać moduł paska bocznego, który ściąga widżet ostatnich postów. Poniżej tego będziesz musiał dodać moduł Email Optin. A następnie poniżej Email Optin musisz dodać moduł Osoby z informacją o autorze.

To wszystko!

Opcje zawartości bloga

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

Liczba postów

Zdefiniuj liczbę postów, które chcesz wyświetlić. Będziesz musiał mieć posty zrobione, aby cokolwiek pokazało się wewnątrz tego modułu.

Wybierz kategorie, które chciałbyś zawrzeć w poście feed. Wszelkie kategorie postów, które utworzyłeś, pojawią się tutaj, abyś mógł wybrać / odznaczyć.

Zawarte kategorie

Wybierz kategorie, które chciałbyś uwzględnić w paszy.

Meta Date Format

Zdefiniuj format daty, który chciałbyś wyświetlić na swoich postach na blogu tutaj. Domyślnym układem jest format M j, Y (6 stycznia 2014 r.) Zobacz WordPress Codex na temat formatów daty, aby uzyskać więcej opcji.

Content

Pokazanie pełnej treści nie spowoduje przycięcia twoich postów na stronie indeksu. Pokazywanie fragmentu spowoduje wyświetlenie tylko twojego tekstu fragmentu.

Offset Number

Wybierz, o ile postów chcesz się przesunąć. Jeśli przesuniesz o 3 posty, na przykład, pierwsze trzy posty w twoim blogu nie będą wyświetlane.

Show Featured Image

Ta opcja pozwala wybrać, czy chcesz, aby miniatury obrazów pojawiały się w twoim module bloga.

Przycisk Czytaj Więcej

Tutaj możesz zdefiniować, czy pokazać link „czytaj więcej” po fragmencie czy nie.

Pokaż Autora

Zdecyduj, czy chcesz wyświetlać autora każdego postu na blogu w obszarze meta postu poniżej tytułu postu.

Pokaż datę

Zdecyduj, czy chcesz wyświetlać datę utworzenia każdego postu w obszarze meta postu poniżej tytułu postu.

Pokaż kategorie

Zdecyduj, czy chcesz wyświetlać kategorie postów w obszarze meta postu poniżej tytułu postu.

Pokaż liczbę komentarzy

Zdecyduj, czy chcesz wyświetlić liczbę komentarzy w obszarze meta postu poniżej tytułu postu.

Pokaż paginację

Zdecyduj, czy chcesz wyświetlić paginację dla tego kanału. Aby włączyć numerowaną paginację, będziesz musiał zainstalować wtyczkę WP Page Navi.

Admin Label

To zmieni etykietę modułu w konstruktorze dla łatwej identyfikacji. Podczas korzystania z widoku WireFrame w Visual Builder, te etykiety pojawią się wewnątrz bloku modułu w interfejsie Divi Builder.

Opcje projektowania bloga

W zakładce projektowania znajdziesz wszystkie opcje stylizacji modułu, takie jak czcionki, kolory, rozmiar i odstępy. Jest to zakładka, której będziesz używał, aby zmienić wygląd swojego modułu. Każdy moduł Divi ma długą listę ustawień projektowania, których możesz użyć, aby zmienić prawie wszystko.

Układ

Możesz wybrać wyświetlanie postów na blogu w siatce lub w układzie pełnej szerokości.

Nakładka wyróżnionego obrazu

Jeśli jest włączona, kolor nakładki i ikona będą wyświetlane, gdy odwiedzający najedzie na wyróżniony obraz postu.

Kolor ikony nakładki

Tutaj możesz zdefiniować niestandardowy kolor dla ikony nakładki.

Kolor nakładki najechania

Tutaj możesz zdefiniować niestandardowy kolor dla nakładki.

Hover Icon Picker

Tutaj możesz zdefiniować niestandardową ikonę dla nakładki.

Text Color

Jeśli twój blog jest umieszczony na jasnym tle, kolor tekstu powinien być ustawiony na 'Ciemny’. Visa versa, jeśli twój blog jest umieszczony na ciemnym tle, Kolor tekstu powinien być ustawiony na 'Jasny’.

Czcionka nagłówka

Możesz zmienić czcionkę tekstu nagłówka, wybierając żądaną czcionkę z rozwijanego menu. Divi jest wyposażony w dziesiątki świetnych czcionek dostarczanych przez Google Fonts. Domyślnie, Divi używa czcionki Open Sans dla całego tekstu na stronie. Możesz również dostosować styl swojego tekstu używając opcji pogrubienia, kursywy, wielkich liter i podkreślenia.

Rozmiar czcionki nagłówka

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

Kolor tekstu nagłówka

Domyślnie wszystkie kolory tekstu w Divi będą wyświetlane jako białe lub ciemnoszare. Jeśli chcesz zmienić kolor tekstu nagłówka, wybierz żądany kolor z selektora kolorów za pomocą tej opcji.

Header Letter Spacing

Odstępy między literami wpływają na przestrzeń 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 wejściowym po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wprowadzić „px” lub „em” po wartości rozmiaru, aby zmienić jego typ jednostki.

Wysokość linii nagłówka

Wysokość linii wpływa na przestrzeń między każdą linią twojego tekstu nagłówka Jeśli chcesz zwiększyć przestrzeń między każdą linią, użyj suwaka zakresu, aby dostosować przestrzeń lub wprowadź swój żądany rozmiar odstępu w polu wejściowym po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wprowadzić „px” lub „em” po wartości rozmiaru, aby zmienić jego typ jednostki.

Czcionka ciała

Możesz zmienić czcionkę swojego tekstu ciała, wybierając żądaną czcionkę z rozwijanego menu. Divi jest wyposażony w dziesiątki świetnych czcionek dostarczanych przez Google Fonts. Domyślnie, Divi używa czcionki Open Sans dla całego tekstu na stronie. Możesz również dostosować styl swojego 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 zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub możesz wprowadzić żądaną wartość rozmiaru tekstu bezpośrednio w polu wejściowym po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wprowadzić „px” lub „em” po wartości rozmiaru, aby zmienić jego typ jednostki.

Kolor tekstu ciała

Domyślnie wszystkie kolory tekstu w Divi będą wyświetlane jako białe lub ciemnoszare. Jeśli chcesz zmienić kolor tekstu ciała, wybierz żądany kolor z selektora kolorów za pomocą tej opcji.

Body Letter Spacing

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

Wysokość linii ciała

Wysokość linii wpływa na przestrzeń między każdą linią twojego tekstu ciała Jeśli chcesz zwiększyć przestrzeń między każdą linią, użyj suwaka zakresu, aby dostosować przestrzeń lub wprowadź swój żądany rozmiar odstępu w polu wejściowym po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wprowadzić „px” lub „em” po wartości rozmiaru, aby zmienić jego typ jednostki.

Czcionka meta

Możesz zmienić czcionkę swojego meta tekstu, wybierając żądaną czcionkę z rozwijanego menu. Divi jest wyposażony w dziesiątki świetnych czcionek dostarczanych przez Google Fonts. Domyślnie, Divi używa czcionki Open Sans dla całego tekstu na stronie. Możesz również dostosować styl swojego tekstu używając opcji pogrubienia, kursywy, wielkich liter i podkreślenia.

Rozmiar czcionki meta

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

Kolor tekstu meta

Domyślnie wszystkie kolory tekstu w Divi będą wyświetlane jako białe lub ciemnoszare. Jeśli chcesz zmienić kolor meta tekstu, wybierz żądany kolor z selektora kolorów za pomocą tej opcji.

Meta Letter Spacing

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

Wysokość linii meta

Wysokość linii wpływa na przestrzeń między każdą linią twojego tekstu meta Jeśli chcesz zwiększyć przestrzeń między każdą linią, użyj suwaka zakresu, aby dostosować przestrzeń lub wprowadź swój żądany rozmiar odstępu w polu wejściowym po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wprowadzić „px” lub „em” po wartości rozmiaru, aby zmienić jego typ jednostki.

Użyj obramowania

Włączenie tej opcji spowoduje umieszczenie obramowania wokół twojego modułu. Tę granicę można dostosować za pomocą następujących ustawień warunkowych.

Kolor granicy

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

Szerokość obramowania

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

Styl obramowania

Obramowania obsługują osiem różnych stylów, w tym: jednolity, kropkowany, przerywany, podwójny, rowek, grzbiet, wstawienie i wyjście. Wybierz swój pożądany styl z rozwijanego menu, aby zastosować go do swojej granicy.

Opcje zaawansowane bloga

W zakładce zaawansowane znajdziesz opcje, które bardziej doświadczeni projektanci stron internetowych mogą uznać za przydatne, takie jak niestandardowe CSS i atrybuty HTML. Tutaj możesz zastosować niestandardowy CSS do każdego z wielu elementów modułu. Możesz także zastosować niestandardowe klasy CSS i identyfikatory do modułu, które mogą być użyte do dostosowania modułu w pliku style.css motywu potomnego.

CSS ID

Wprowadź opcjonalny identyfikator CSS, który ma być użyty dla tego modułu. Identyfikator może być użyty do tworzenia niestandardowych stylizacji CSS lub do tworzenia linków do poszczególnych sekcji strony.

Klasa CSS

Wprowadź opcjonalne klasy CSS, które mają być użyte w tym module. Klasa CSS może być używana do tworzenia niestandardowych stylizacji CSS. Możesz dodać wiele klas, oddzielonych spacją. Te klasy mogą być użyte w twoim Motywach Dziecięcych Divi lub w niestandardowym CSS, który dodajesz do swojej strony lub witryny za pomocą Opcji Motywu Divi lub Ustawień Strony Divi Builder.

Niestandardowy CSS

Niestandardowy CSS może być również zastosowany do modułu i każdego z jego wewnętrznych elementów. W sekcji Custom CSS, znajdziesz pole tekstowe, gdzie możesz dodać własny CSS bezpośrednio do każdego elementu. CSS wprowadzony do tych ustawień jest już zawinięty w znaczniki stylów, więc musisz tylko wprowadzić reguły CSS oddzielone średnikami.

Widoczność

Ta opcja pozwala ci kontrolować, na których urządzeniach pojawia się twój moduł. Możesz wybrać, aby wyłączyć swój moduł na tabletach, smartfonach lub komputerach stacjonarnych indywidualnie. Jest to przydatne, jeśli chcesz używać różnych modułów na różnych urządzeniach, lub jeśli chcesz uprościć projekt mobilny poprzez wyeliminowanie pewnych elementów ze strony.

.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.