Przejdź do głównej treści

Jak korzystać z modułu blogu w Divi Builder

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]

Dzięki 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 blogu i paska bocznego, aby tworzyć klasyczne projekty blogów. Kolumny 1, kolumny 2 lub kolumny 3 można utworzyć za pomocą modułu blogu i modułu paska bocznego.

Podgląd blogu divi module blog.png

Jak dodać moduł blogu do swojej strony

Aby dodać moduł blogu do swojej strony, musisz najpierw uzyskać dostęp 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ę. 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 podczas przeglądania strony internetowej, jeśli jesteś zalogowany do pulpitu nawigacyjnego WordPress.

button divi builder module blog divi.png

Po wprowadzeniu do Visual Builder, możesz kliknąć szary przycisk plus, 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. Mamy świetne samouczki na temat korzystania z elementów lignes i działy Divi.

dodaj moduł blogu divi builder.png

Znajdź moduł blogu 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 wyszukać i automatycznie dodać moduł blogu! Po dodaniu modułu zostanie wyświetlona lista opcji modułu. Te opcje są podzielone na trzy główne grupy: Treść , Koncepcja et zaawansowany .

Przykład użycia modułu blogu z układem siatki w specjalnej sekcji z prawym paskiem bocznym

W tym przykładzie dodam moduł blogu do strony blogu. Ta strona blogu ma pełny nagłówek z modułem wyszukiwania poniżej. W module wyszukiwania dodam specjalną sekcję z modułem blogu po lewej stronie i sekcją paska bocznego po prawej stronie. Pasek boczny po prawej zawiera ostatni widget publikowania, moduł poczty e-mail Optin i moduł Person.

Tak wygląda strona przykładowa.

przykład strony divi.jpg

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:

layout speciality divi.png

Zostaniesz poproszony o dodanie kolumny lub wiersza do dwóch kolumn po lewej stronie. Wybierz kolumnę wiersza 1.

strefa seletion divi builder.png

Następnie dodaj moduł blogu do wiersza.

użyj modułu blog.png

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ść linii 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;

ustawienia blogów divi.png

Zaawansowany niestandardowy przycisk CSS dla przycisku Czytaj więcej tworzy niestandardowy wygląd pasujący do projektu.

Ł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]

artykuły do ​​projektowania bloków divi.jpg

W sekcji prawego paska bocznego układu sekcji Specjalistycznej musisz dodać moduł paska bocznego, który wstawia widżet najnowszych publikacji. Poniżej musisz dodać moduł Optin Email. A następnie, w sekcji Optin of Email, musisz dodać moduł Person z informacjami o autorze.

To wszystko!

Opcje treści blogu

Na karcie 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.

moduł blogu divi.png

Liczba pozycji (liczba przedmiotów)

Ustaw liczbę wiadomości, które chcesz wyświetlić. Musisz mieć wiadomości dotyczące wszystkiego, co pojawia się w tym module.

Wybierz kategorie, które chcesz uwzględnić w strumieniu publikacji. Wszystkie kategorie wiadomości, które utworzyłeś, pojawią się tutaj, abyś mógł je 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 blogach. Domyślny układ to format M j, Y (6 styczeń 2014) Sprawdź Kodeks WordPress w formatach daty, aby uzyskać więcej opcji.

Treść

Wyświetlenie pełnej zawartości nie spowoduje obcięcia Twoich wpisów na stronie indeksu. Pokaż podgląd wyświetli tylko tekst wyciągu.

Numer przesunięcia

Wybierz liczbę wiadomości, które chcesz zrekompensować. Jeśli na przykład kompensujesz wiadomości 3, pierwsze trzy posty w Twoim blogu nie będą wyświetlane.

Pokaż polecany obraz

Ta opcja pozwala wybrać, czy chcesz, aby miniatury pojawiały się w Twoim blogu.

Czytaj więcej przycisk

Tutaj możesz określić, czy wyświetlać link „czytaj więcej” po wypakowaniu, czy nie.

Zobacz autora

Wybierz, czy wyświetlać autora każdego posta na blogu w polu meta postu pod tytułem artykułu.

Pokaż datę

Wybierz, czy chcesz wyświetlać datę utworzenia każdego artykułu w polu Meta pozycji poniżej tytułu wiadomości.

elementy do wyświetlenia divi module blog.png

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ę dla tego kanału. Aby włączyć numerowanie stron, musisz zainstalować wtyczkę WP Page Navi .

Etykieta administracji

Spowoduje to zmianę etykiety modułu w generatorze w celu łatwej identyfikacji. Podczas korzystania z widoku WireFrame w Visual Builder, te etykiety 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 zmienić wygląd twojego modułu. Każdy moduł Divi ma długą listę parametrów projektowych, których można użyć do edycji niemal wszystkiego.

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]

opcja projektowania divi builder module blog.png

Usposobienie

Możesz wyświetlać posty na blogu w siatce lub w układzie o pełnej szerokości.

Nałożony obraz

Jeśli ta opcja jest włączona, kolor i ikona nakładki pojawiają się, 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

Jeśli blog jest umieszczony na jasnym tle, kolor tekstu powinien być ustawiony na „Ciemny”. Visa, jeśli blog jest umieszczony na ciemnym tle, kolor tekstu powinien być ustawiony na „Jasny”.

Czcionka nagłówka

Możesz zmienić czcionkę nagłówka, wybierając czcionkę z rozwijanego menu. Divi zawiera dziesiątki świetnych 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 interwału, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub wpisać żądaną wartość 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 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 ten 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 interwału, aby dostosować odstęp lub wprowadź rozmiar żądanego 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.

odstęp między konfiguracjami nagłówek divi.png

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 interwału, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w pole wejściowe 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ć czcionkę swojego ciała, wybierając wybraną czcionkę z menu rozwijanego. Divi zawiera dziesiątki świetnych 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 tekstu. Możesz przeciągnąć suwak interwału, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub wpisać żądaną wartość 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 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, 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 każdą literą tekstu, użyj suwaka interwału, aby dostosować odstęp lub wprowadź żądany odstęp 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ęp między każdą linią tekstu podstawowego. Jeśli chcesz zwiększyć odstęp między wierszami, 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.

Czcionka Metas

Możesz zmienić czcionkę swojego meta-tekstu, wybierając czcionkę z menu rozwijanego. Divi zawiera dziesiątki świetnych 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.

section meta data diiv builder.png

Rozmiar czcionki Metas

Tutaj możesz dostosować rozmiar swojego meta tekstu. Możesz przeciągnąć suwak interwału, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub wpisać żądaną wartość 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 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 meta-tekstu, wybierz ten kolor w próbniku kolorów za pomocą tej opcji.

Odstępy między meta literami

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ą tekstu, użyj suwaka interwału, aby dostosować odstęp lub wprowadź żądany odstęp 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 odstęp między każdą linią meta-tekstu Jeśli chcesz zwiększyć odstęp między każdą linią, użyj suwaka interwału, aby dostosować odstęp lub wprowadź rozmiar żądanego odstępu w polu wejście 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ół twojego modułu. Tę granicę można dostosować za pomocą następujących parametrów warunkowych.

Kolor obramowania

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

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]

Szerokość granicy

Domyślnie ramki mają szerokość piksela 1. Możesz zwiększyć tę wartość, przeciągając suwak w zakresie 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ę „px” na coś innego, na przykład em, vh, vw itp.

Styl graniczny

Obramowania obsługują osiem różnych stylów, w tym: bryłowy, 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 przydatne bardziej doświadczonym projektantom 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 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.

sekcja zaawansowana modułu blog.png

Identyfikator CSS

Wprowadź opcjonalny identyfikator CSS, który będzie używany dla tego modułu. Identyfikator może służyć do tworzenia niestandardowego stylu CSS lub tworzenia linków do poszczególnych 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 Divi Child lub w niestandardowym CSS dodawanym do 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 niestandardowej sekcji 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 w znacznikach stylu. Musisz tylko wprowadzić 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 używać różnych modułów na różnych urządzeniach lub jeśli chcesz uprościć projektowanie mobilne poprzez wyeliminowanie niektórych elementów strony.

To wszystko na ten samouczek.

Ten artykuł zawiera komentarze 0

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
10 akcji
udział4
ćwierkanie2
Enregistrer4