Dzięki Divi nawet blogi są modułem, a Twój „blog” może zostać umieszczony w dowolnym miejscu na Twoim blogu Witryna internetowa i w różnych formatach. Możesz łączyć moduły bloga i paska bocznego, aby tworzyć klasyczne projekty blogów. Za pomocą modułu bloga i paska bocznego można utworzyć 1 kolumnę, 2 kolumny lub 3 kolumny.
Jak dodać moduł blogu do swojej strony
Zanim będziesz mógł dodać moduł bloga do swojej strony, musisz najpierw uzyskać dostęp 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ę. Klikając ten przycisk, będziesz mógł aktywować Divi Builder, który da ci 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 upstream, jeśli jesteś zalogowany do pulpitu 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ę, nie zapomnij najpierw dodać wiersza do swojej strony. Mamy świetne samouczki na temat korzystania z elementów lignes i działy przez Divi.
Znajdź moduł bloga 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 „blog”, a następnie kliknąć Enter, aby automatycznie znaleźć i dodać moduł blogu! Po dodaniu modułu zostaniesz powitany listą opcji modułu. Te opcje są podzielone na trzy główne grupy: Treść , Koncepcja et zaawansowany .
Przykład zastosowania modułu bloga z układem siatki w wyspecjalizowanej sekcji z prawym paskiem bocznym
W tym przykładzie dodam moduł bloga do strony bloga. Ta strona bloga ma pełny nagłówek z modułem wyszukiwania poniżej. Pod modułem wyszukiwania dodam specjalną sekcję z modułem blogu po lewej stronie i sekcją paska bocznego po prawej. Pasek boczny po prawej stronie zawiera widżet ostatnich postów, moduł zgody na wysyłanie wiadomości e-mail i moduł osoby.
Tak wygląda przykładowa strona.
Pamiętaj, że moduł blogu znajduje się w układzie siatki po lewej stronie sekcji specjalnej.
Zacznijmy.
Użyj kreatora wizualnego, aby dodać specjalną sekcję o następującym układzie:
Zostaniesz poproszony o dodanie kolumny lub wiersza z dwiema kolumnami po lewej stronie. Wybierz kolumnę wiersza 1.
Następnie dodaj moduł blogu do wiersza.
Zaktualizuj ustawienia bloga w następujący sposób:
Opcje zawartości
Liczba postów: 6
Dowiedz się więcej Przycisk: WŁ
Pokaż podział na strony: NIE
Kolor tła siatki: #ffffff
Opcje projektowania
Układ: siatka
Użyj Dropshadow: ON
Kolor ikony nakładki: #ffffff
Kolor nakładki unoszącej: nagłówek rgba (224,153,0,0.51)
policja:
Rozmiar czcionki nagłówka: 21px
Kolor tekstu nagłówka: # 333333
Odstępy między literami: 1px
Wysokość rzędu nagłówka: 1.2 em
Granica: TAK
Kolor obramowania: # f0f0f0
Szerokość obramowania: 1px
Styl obramowania: Solidny
Zaawansowane opcje
Niestandardowy CSS (przycisk Czytaj więcej):
kolor: # e09900;
blok przeglądania;
text-align: center;
margin-top: 10px;
border: 1px solid #ccc;
dopełnienie: 5px;
Transformacja tekstu: wielkie litery;
odstępy między literami: 1px;
Zaawansowany niestandardowy przycisk CSS dla przycisku Czytaj więcej tworzy niestandardowy wygląd pasujący do projektu.
W prawej sekcji paska bocznego układu sekcji specjalistycznej musisz dodać moduł paska bocznego, który wstawia widżet ostatnich postów. Poniżej musisz dodać moduł Email Optin. Następnie w opcji Email Optin musisz dodać moduł Person z informacjami o autorze.
To wszystko!
Opcje treści blogu
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 na tej karcie.
Numer pozycji (Liczba pozycji)
Ustaw liczbę wiadomości, które chcesz wyświetlić. Będziesz musiał mieć wiadomości dla wszystkiego, co pojawia się w tym module.
Wybierz kategorie, które chcesz uwzględnić w kanale postów. Tutaj pojawią się wszystkie utworzone przez Ciebie kategorie wiadomości, które możesz zaznaczyć / odznaczyć.
Kategorie zawarte
Wybierz kategorie, które chcesz uwzględnić w kanale.
Format meta-daty
Tutaj ustaw format daty, który chcesz wyświetlać w swoich postach na blogu. Domyślny układ to M j, format Y (6 stycznia 2014 r.) Zobacz Kodeks WordPress w formatach daty, aby uzyskać więcej opcji.
Treść
Wyświetlanie pełnej treści nie spowoduje obcięcia Twoich postów na stronie indeksu. Pokaż fragment spowoduje wyświetlenie tylko tekstu fragmentu.
Numer przesunięcia
Wybierz liczbę wiadomości, które chcesz przesunąć. Jeśli na przykład zrekompensujesz 3 posty, pierwsze trzy posty w kanale bloga nie będą wyświetlane.
Pokaż wyróżniony obraz
Ta opcja pozwala wybrać, czy chcesz, aby miniatury pojawiały się w Twoim blogu.
Czytaj więcej przycisk
Tutaj możesz ustawić, czy wyświetlać link „Czytaj więcej” po fragmencie, czy nie.
Pokaż autora
Wybierz, czy chcesz wyświetlać autora każdego posta na blogu w polu meta posta pod tytułem posta.
Pokaż datę
Wybierz, czy chcesz wyświetlać datę utworzenia każdego artykułu w polu Meta pozycji poniżej tytułu wiadomości.
Pokaż kategorie
Wybierz, czy wyświetlać kategorie postów w obszarze meta postów poniżej tytułu publikacji.
Pokaż liczbę komentarzy
Wybierz, czy chcesz wyświetlać liczbę komentarzy w polu meta postu pod tytułem postu.
Wyświetl paginację
Wybierz, czy chcesz wyświetlać paginację tego kanału. Aby włączyć stronicowanie numerowane, musisz zainstalować wtyczkę WP Page Navi .
Etykieta administracyjna
Spowoduje to zmianę etykiety modułu w generatorze w celu łatwej identyfikacji. Podczas korzystania z widoku WireFrame w programie Visual Builder etykiety te pojawią się w bloku modułu interfejsu Divi Builder.
Opcje projektowania blogów
Na karcie Projekt znajdziesz wszystkie opcje stylu modułu, takie jak czcionki, kolory, rozmiar i odstępy. Ta zakładka pozwala na modyfikację wyglądu Twojego modułu. Każdy moduł Divi ma długą listę ustawień projektowych, których można użyć do dostosowania prawie wszystkiego.
Usposobienie
Możesz wybrać wyświetlanie swoich postów na blogu w układzie siatki lub o pełnej szerokości.
Nałożony obraz
Jeśli ta opcja jest włączona, kolor i ikona nakładki są wyświetlane, gdy odwiedzający najedzie kursorem na wybrany obraz wiadomości.
Kolor ikony nakładki
Tutaj możesz ustawić niestandardowy kolor ikony nakładki.
Zakrycie koloru pokrywy
Tutaj możesz zdefiniować niestandardowy kolor nakładki.
Przenieś ikonę selektora
Tutaj możesz zdefiniować niestandardową ikonę dla nakładki.
Kolor tekstu
Si Twój blog jest umieszczony na jasnym tle, należy ustawić kolor tekstu na „Ciemny”. Wiza, tak Twój blog jest umieszczony na ciemnym tle, należy ustawić kolor tekstu na „Jasny”.
Czcionka nagłówka
Możesz zmienić czcionkę nagłówka, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki niesamowitych 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 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 interwału, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub możesz bezpośrednio wprowadzić żądaną wartość 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 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 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 interwału, aby dostosować odstęp, lub wprowadź żądany rozmiar 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 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 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 niesamowitych 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 opcji pogrubienia, kursywy, wielkich liter i podkreślenia.
Rozmiar czcionki ciała
Tutaj możesz dostosować rozmiar swojego tekstu podstawowego. Możesz przeciągnąć suwak interwału, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub możesz bezpośrednio wprowadzić żądaną wartość 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 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 podstawowego, 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 podstawowym, użyj suwaka zakresu, aby dostosować odstęp, lub wprowadź żądaną wielkość 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 rozmiaru, aby zmienić typ jednostki.
Wysokość linii ciała
Wysokość linii wpływa na odstępy między poszczególnymi wierszami tekstu podstawowego. Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka odstępu, 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 rozmiaru, aby zmienić typ jednostki.
Czcionka Metas
Możesz zmienić czcionkę swojego metatekstu, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki niesamowitych 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 opcji pogrubienia, kursywy, wielkich liter i podkreślenia.
Rozmiar czcionki Metas
Tutaj możesz dostosować rozmiar swojego metatekstu. Możesz przeciągnąć suwak interwału, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub możesz bezpośrednio wprowadzić żądaną wartość 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 rozmiaru, aby zmienić typ jednostki.
Kolor tekstu dla meta
Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor swojego metatekstu, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.
Odstępy między meta literami
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ą swojego metatekstu, użyj suwaka interwału, 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 rozmiaru, aby zmienić typ jednostki.
Wysokość Meta Line
Wysokość linii wpływa na odległość między każdą linią w meta-tekście.Jeśli chcesz zwiększyć odstęp między każdą linią, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu 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 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 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, w tym: jednolity, kropkowany, kropkowany, podwójny, rowek, grzbiet, wstawka i początek. Wybierz żądany styl z menu rozwijanego, aby zastosować go do obramowania.
Zaawansowane opcje blogu
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, które będą używane w tym module. Klasa CSS może służyć do tworzenia niestandardowych stylów CSS. Możesz dodać wiele klas oddzielonych spacją. Te zajęcia mogą być używane w twoim Motyw Divi Dziecko 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żna również zastosować do modułu i dowolnych elementów wewnętrznych modułu. W sekcji Custom CSS znajdziesz pole tekstowe, w którym możesz dodać CSS bezpośrednio do każdego elementu. Wpisy CSS w tych ustawieniach są już osadzone ze znacznikami stylu. Musisz więc tylko wprowadzić 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, eliminując pewne elementy ze strony.
To wszystko w tym samouczku.
Witam,
Czy wiesz, jak odwrócić kierunek paginacji? Chciałbym przedstawić moje artykuły od najnowszych do najstarszych.
Dziękuję za odpowiedź.
Manolita