Czy chcesz stworzyć stronę bloga z modułem Blog? de Divi?
Zwykle każdy pakiet układu Divi opublikowany w eleganckie tematy oferuje układ bloga, który pomaga w tworzeniu Twój blog wystarczająco szybko. Ale czy kiedykolwiek chciałeś zobaczyć, jak samodzielnie stworzyć jedną z tych stron bloga?
W tym artykule zobaczymy, jak stworzyć stronę bloga za pomocą modułu Divi's Blog. Przejdziemy krok po kroku przez każde ustawienie.
Zacznijmy!
badanie
Zanim zaczniemy, zobaczmy najpierw, co zamierzamy stworzyć.
Utwórz nową stronę bloga
Utwórz nową stronę
Najpierw stworzymy naszą stronę. W panelu WordPressa kliknij O Nas > Dodaj dniu.
Nadaj stronie tytuł, który ma dla Ciebie sens.
- Tytuł strony: Blog na Divi
Przełącz na Divi Builder
Kliknij fioletowy przycisk na środku strony: Użyj Divi Builder .
Dodaj sekcję dla tytułu strony bloga
Dostosuj sekcję
Zaczniemy od pierwszej sekcji. Otwórz je parametry sekcji .
Przewiń do Tło i zmień kolor na #f9f3fd. Wpisz Blog jako etykietę administratora. Zamknij ustawienia sekcji.
- Tło: #f9f3fd
- Etykieta administratora: Blog
Utwórz tytuł strony bloga
Następnie dodamy linia za tytuł. Wybierz zieloną ikonę i wybierz wiersz z pojedynczą kolumną.
Następnie dodaj moduł tekstowy na linii.
Dostosuj moduł tekstu tytułu bloga
Otwórz je Ustawienia modułu tekstowego i wybierz H1. Dodaj tytuł Nasz blog.
- Czcionka: Tytuł 1
- Tekst: Nasz blog
Następnie przejdź doKarta Styl Style i ustaw wyrównanie na Wyśrodkowane. W przypadku tekstu tytułu H1 wybierz czcionkę Cormorant Infant i pogrub ją.
- Wyrównanie tekstu: wyśrodkowane
- Tekst nagłówka: H1
- Czcionka nagłówka: Kormoran niemowlę
- Miękkie światło nagłówek: pogrubiony tekst
Ustaw kolor na #442854, rozmiar na 130 pikseli i wysokość linii na 0,8 em.
- Kolor: #442854
- Rozmiar tekstu na pulpicie: 130px
- Wysokość linii: 0,8 em
Utwórz najnowszy artykuł i sekcję Wezwania do działania
Nasza sekcja składa się z najnowszego artykułu i e-maila opt-in.
Dodaj nową linię pod naszym pierwszym wierszem i wybierz projekt kolumny 2/3 po lewej i 1/3 po prawej.
Otwórz je parametry linii klikając ikonę koła zębatego.
WybierzKarta Styl Style, przewiń do rozstaw i dodaj 0px do dolnego marginesu wewnętrznego. Zamknij Ustawienia.
- Dolny margines wewnętrzny: 0px
Dodaj i dostosuj polecany moduł postów na blogu
Następnie dodamy moduł-blogu . To będzie zawierało nasz ostatni artykuł. Kliknij szarą ikonę plusa w lewej kolumnie naszego nowego wiersza i dodaj moduł Blog.
Treść
Sous Treść , wpisz 1 jako liczbę postów.
- Liczba pozycji: 1
Elementy
Przewiń do Elementy i odznacz Autor i Paginacja. Resztę pozostawimy bez zmian.
- Pokaż autora: nie
- Pokaż paginację: Nie
Usposobienie
Następnie wybierz Karta Styl Style i wybierz Pełny ekran dla układu i wyłącz nakładkę polecanego obrazu.
- Model: Pełny ekran
- Wybrana nakładka obrazu: Wyłączona
Tekst tytułu
Przewiń do Tekst tytułu . Wybierz H2 i wybierz Cormoran Infant. Wybierz Pogrubienie i zmień kolor na #442854.
- Wstaw nagłówek trzeci: H2
- Tytuł czcionki: Kormoran Niemowlę
- Tytuł miękkiego światła: pogrubiony tekst
- Kolor tekstu tytułu: #442854
Ustaw rozmiar czcionki na 30 pikseli. Zmień wysokość linii na 1.1em.
- Rozmiar: 30 pikseli na komputer, 20 pikseli na tablet, 18 pikseli na telefon
- Wysokość wiersza tytułu: 1,1 em
Ciało tekstu
Następnie przewiń w dół do Treść tekstu . Wybierz czcionkę Cabin, zmień kolor na #442854 i zmień wysokość linii na 1,8em.
- Korpus policyjny: Kabina
- Kolor tekstu: #442854
- Wysokość linii ciała: 1,8 em
Metadane tekstowe
Następnie przewiń w dół do Metadane tekstowe . Ustaw parametry w następujący sposób:
- Czcionka metadanych: Kormoran niemowlę
- Metadane Dim Light: Regularne
- Styl kopiowania metadanych: Brak
- Kolor tekstu metadanych: #442854
- Rozmiar tekstu metadanych: pulpit 16 pikseli, tablet 15 pikseli, telefon 14 pikseli
- Wysokość wiersza metadanych: 1,8 em
rozstaw
Następnie przewiń w dół do rozstaw i zmień górny margines na 0vw.
- Górny margines: 0vw
Pole cienia
Na koniec przewiń w dół do Pole cienia i wyłącz go.
- Pudełko Cienia: Wyłącz
Dodaj i dostosuj moduł tekstowy wiadomości e-mail w blogu
Teraz przejdziemy do prawej kolumny i utwórz wezwanie do działania przez e-mail . Najpierw dodaj moduł Tekst w prawej kolumnie. Kliknij szarą ikonę plusa i wyszukaj tekst.
Treść
Wybierz Nagłówek 2 i wpisz tekst Subskrybuj nasze oferty.
- Czcionka: nagłówek 2
- Tekst: Zapisz się do naszych ofert
Tekst nagłówka
dla Teksty tytułu, wybierz Center Alignment, wybierz H2, wybierz Cormorant Infant i ustaw go na Bold.
- Wyrównanie tekstu: wyśrodkowane
- Tekst nagłówka: H2
- Czcionka nagłówka: Kormoran niemowlę
- Miękki nagłówek światła: pogrubiony
Zmień kolor na #442854, rozmiar na 32px, a wysokość linii na 0,95em.
- Kolor tekstu nagłówka: #442854
- Rozmiar tekstu nagłówka: 32 piksele
- Wysokość linii nagłówka: 0,95 em
rozstaw
Na koniec przewiń w dół do rozstaw i dodaj 10 pikseli do dolnego marginesu. Zamknij ustawienia modułu Tekst.
- Margines dolny: 10px
Dodaj i dostosuj moduł Blog Email Optin
Następnie idziemy stworzyć forma e-mail . Dodaj moduł Email Optin poniżej modułu Tekst w prawej kolumnie.
Treść
Najpierw usuń tytuł i treść.
- Tytuł: Brak
- Treść: brak
Przewiń do Konto e-mail i dodaj dostawcę usług.
Następnie przewiń w dół do Tło i odznacz kolor tła.
- Użyj koloru tła: nie
Pola
Przejdź do Karta Styl Style i zmień kolor tła pól na rgba(255,255,255,0) i kolor tekstu na #442854.
- Pola koloru tła: rgba (255,255,255,0)
- Pola koloru tekstu: #442854
Przewiń w dół do opcje czcionek i zmień czcionkę na kabinę, rozmiar na 16px i wysokość linii na 1,8em.
- Pola czcionek: Kabina
- Pola rozmiaru tekstu: 16 pikseli
- Wysokość rzędu pola: 1,8 em
Następnie dostosuj zaokrąglony róg pól na 32px, szerokość obramowania na 2px i zmień kolor obramowania na #442854.
- Kontrolki zaokrąglonego prostokąta: 32px
- Pola szerokości obramowania: 2px
- Pola kolorów obramowania: #442854
przycisk
Przewiń do przycisku i wybierz Użyj niestandardowych stylów dla przycisku . Zmień rozmiar na 18ps, kolor przycisku na biały, a kolor tła przycisku na #442854.
- Użyj niestandardowych stylów dla przycisku: Tak
- Rozmiar tekstu przycisku: 18 pikseli
- Kolor tekstu przycisku: #ffffff
- Przycisk tła: #442854
Zmień promień obramowania na 50 pikseli, czcionkę na Cormorant Infant i pogrubienie grubości.
- Przycisk promienia obramowania: 50px
- Przycisk czcionki: Kormoran niemowlę
- Przycisk miękkiego światła: pogrubiony tekst
Na koniec dodajmy marginesy. Wprowadź 20 pikseli dla marginesu górnego, 12 pikseli dla dopełnienia górnego i dolnego oraz 32 pikseli dla dopełnienia lewego i prawego. Zamknij ustawienia poczty e-mail Optin.
- Przycisk marginesu górnego: 20 pikseli
- Górny i dolny przycisk wyściółki: 12 pikseli
- Dopełnienie lewego i prawego przycisku: 32px
Dodaj nową linię do listy postów na blogu
Teraz idziemy utwórz listę przedmiotów strony. Najpierw dodaj nowy wiersz z jedną kolumną poniżej naszej poprzedniej sekcji.
Ustawienia linii
Przejdź do Karta Styl Style i dodaj 0px do marginesu wewnętrznego wierzchołka. Zamknij ustawienia linii.
- Wierzchołek marginesu wewnętrznego: 0px
Dodaj moduł Blog do swojej linii
Dodać moduł-blogu do nowej linii, klikając szarą ikonę plusa i klikając Blog.
Stylizowanie kanału postów na blogu
Zmieńmy kanał strony bloga.
Treść na blogu
Otwórz je Ustawienia modułu bloga i wpisz 3 jako liczbę postów. Pozwala to wybrać liczbę postów wyświetlanych na ekranie.
Niższa liczba, na przykład 3, pozwala nam skoncentrować się na ostatnich postach i zmniejszyć rozmiar strony. To dobry wybór, jeśli nie publikujesz zbyt często lub chcesz zachować czystszą stronę. Pokazywanie większej liczby postów, takich jak 6-9, to dobry pomysł, jeśli chcesz skupić się na przepływie bloga.
- Liczba postów: 3
Wpisz 1 dla odsunięcia. To mówi Divi, aby zaczął od drugiego wpisu na blogu, co uniemożliwia nam wyświetlanie tego samego artykułu, który był już wyświetlany w poście na blogu pokazanym powyżej.
- Numer zaksięgowania offsetu: 1
Elementy
Przewiń do Elementy . Włącz polecany obraz, datę, fragment kategorii i paginację. Wyłącz resztę.
- Pokaż wyróżniony obraz: Tak
- Dane: Tak
- Kategorie: Tak
- Fragment: Tak
- Paginacja: Tak
Tło
Dostęp do Tło i ustaw kolor tła kafelka siatki na rgba (255,255,255,0)
- Kolor tła kafelka siatki siatki: rgba (255,255,255,0)
Układ i nakładka
Następnie przejdź do Karta Styl Style . Pozostaw układ ustawiony na Grid. Wybraliśmy układ o pełnej szerokości dla posta na blogu przedstawionego powyżej. Będziemy używać układu siatki dla tego kanału bloga, który jest opcją domyślną. Wyłącz polecaną nakładkę obrazu.
- Układ: Siatka
- Wybrana nakładka obrazu: Wyłączona
Tekst tytułu
dla tekst tytułu , wybierz H2. Wybierz Cormorant Infant, ustaw go na Bold i wpisz #442854 jako kolor.
- Wstaw nagłówek trzeci: H2
- Tytuł czcionki: Kormoran Niemowlę
- Tytuł miękkiego światła: pogrubiony tekst
- Kolor tekstu tytułu: #442854
Wybierz 20px jako rozmiar tekstu. Ustaw wysokość linii na 1,1 em.
- Rozmiar tekstu tytułu: Pulpit 20px
- Wysokość wiersza tytułu: 1,1 em
Ciało tekstu
Przewiń do Tekst główny i wybierz Kabinę. Ustaw kolor na #442854.
- Korpus policji: kabina
- Kolor tekstu: #442854
Ustaw wysokość linii na 1,8 em.
- Wysokość linii: 1,8 em
Metadane tekstowe
Przewiń do Metadane tekstowe i wybierz Kormoran Niemowlę. Ustaw wagę na normalną, styl na brak, a kolor na #442854.
- Czcionka metadanych: Kormoran niemowlę
- Metadane Dim Light: Regularne
- Styl kopiowania metadanych: Brak
- Kolor tekstu metadanych: #442854
- Rozmiar tekstu metadanych: komputer 16px, tablet 15px, telefon 14px
- Wysokość wiersza metadanych: 1,8 em
Tekst paginacji
Przejdźmy teraz do Paginacja . Jako czcionkę wybierz Cormorant Infant, wybierz Bold i zmień kolor na #442854.
- Czcionka Pokaż paginację: Kormoran niemowlę
- Pokaż miękkie światło stronicowania: pogrubienie
- Kolor tekstu Pokaż paginację: #442854
rozstaw
Następnie przejdziemy do rozstaw i dodaj margines 0vw u góry. Zapobiega to nakładaniu się naszego modułu na poprzedni.
- Górny margines: 0vw
Granica
Przewiń do Granica i wpisz 0px dla wszystkich czterech rogów. To daje nam nasz kwadratowy kształt karty.
- Zaokrąglony układ siatki prostokątów: 0px
Pole cienia
Na koniec przewiń w dół do Cień Pudełka i wyłącz go. Zamknij ustawienia bloga. Sekcja bloga jest gotowa.
- Pudełko cieni: brak
Dodaj nową sekcję „Wezwanie do działania” na stronie bloga
Następnie idziemy utwórz sekcję „Wezwanie do działania” strony. Ta sekcja zawiera pełnoekranowy obraz tła paralaksy, skontaktuj się i społecznościowe następujące linki.
Dodaj nową sekcję
Kliknij niebieską ikonę, aby dodaj nową zwykłą sekcję na dole strony.
- Sekcja: Regularna
Stylizuj sekcję Wezwanie do działania
Otwórz je parametry sekcji klikając jego ikonę koła zębatego.
Tło
Przewiń do Tło i wybierz zakładkę Obraz. Kliknij szarą ikonę oznaczoną Obraz tła.
Wybierz obraz pełnoekranowy z biblioteki multimediów. Wybierz Użyj efektu paralaksy, a następnie wybierz CSS dla metody paralaksy.
- Obraz tła
- Użyj efektu paralaksy: Tak
- Metoda paralaksy: CSS
Przewiń w dół do etykiety administratora i wpisz w polu „Stopka”. Pomoże Ci to śledzić sekcje.
- Tag administratora: stopka
Następnie przejdź do Karta Styl Style.
- Margines wewnętrzny: 10vw (górny i dolny)
Dodaj nową linię
Kliknij zieloną ikonę plusa i dodać wiersz do jednej kolumny dla naszych treści.
zaklejania
Otwórz je parametry linii i przejdź do zakładki Styl.
- Maksymalna szerokość: 320 pikseli
Moduł tekstu tytułu
Nasza sekcja Call to Action jest opatrzona tytułem. Aby to stworzyć, dodaj moduł tekstowy na linii.
Dostosuj tekst tytułu
Dodaj swój tytuł i zmień czcionkę na Nagłówek 3.
- Czcionka: nagłówek 3
- Tekst: Wszystko o Divi
Tekst nagłówka
Przejdź do Karta Styl Style i przewiń do Tekst napisów . Wybierz środek do wyrównania, wybierz H3, wybierz Cormorant Infant, ustaw go na Bold i wybierz biały jako kolor.
- Wyrównanie tekstu: do środka
- Tekst nagłówka: H3
- Czcionka nagłówka: Kormoran niemowlę
- Miękki nagłówek światła: pogrubiony
- Kolor tekstu nagłówka: #ffffff
- Rozmiar tekstu nagłówka: 42 piksele na pulpicie, 20 pikseli na tablecie, 16 pikseli na telefonie
- Wysokość linii nagłówka: 1,1 em
rozstaw
Na koniec przewiń w dół do rozstaw i dodaj 10 pikseli do dolnego marginesu. Zamknij ustawienia modułu.
- Margines dolny: 10px
Moduł tekstowy dla adresu
Dodaj kolejny moduł tekstowy na Twój adres fizyczny.
Stylizacja modułu tekstu adresu fizycznego
Tekst adresu
Dodaj swój adres jako tekst akapitu.
- Styl: akapit
- Tekst: twój adres
Tekst akapitu
Następnie przejdź do Tekst w Karta Styl Style i wybierz Cormorant Infant, pół pogrubiony, i ustaw go na biały.
- Czcionka: Kormoran Niemowlę
- Miękki jasny tekst: pół pogrubiony
- Kolor tekstu Tekst: #ffffff
- Tekst Rozmiar tekstu: 28px na komputer, 20px na tablet, 16px na telefon
- Wysokość wiersza tekstu: 1,2 em
Dodaj moduł śledź nas w sieciach społecznościowych
Naszym ostatnim modułem jest moduł Śledź nas na portalach społecznościowych . Dodaj go na dole wiersza.
Stylizuj Moduł śledź nas w mediach społecznościowych
Zaczniemy od Karta Styl Style tym razem. Wybierz Center for Module Alignment i zmień kolor ikony na #442854.
- Wyrównanie modułu: Środek
- Kolor ikony: #442854
Przewiń do Bordure i dodaj 23 piksele dla zaokrąglonych rogów.
- Zaokrąglony prostokąt: 32px
Dodaj i dostosuj swoje sieci społecznościowe
Teraz wróć do Zakładka Treść i dodaj dowolne sieci społecznościowe, które chcesz uwzględnić. Kliknij szarą ikonę plusa.
Otwórz je ustawienia dla każdej z twoich sieci społecznościowych , wybierz sieć i dodaj link do swojego konta. Ustaw kolor tła na #f9f3fd. Zamknij ustawienia podmodułu.
- Sieć społecznościowa: Twój wybór
- Adres URL linku do konta: Twój link
- Kolor tła: #f9f3fd
Zapisz stronę bloga i wyjdź z kreatora wizualnego
Wreszcie zapisz stronę w prawym dolnym rogu i wybierz Wyjdź z programu Visual Builder na górze strony. Jesteś gotowy, aby zobaczyć swoją pracę.
Podgląd strony bloga
Oto nasze wyniki.
Pobierz DIVI teraz !!!
Wnioski
Więc ! Oto nasze spojrzenie na to, jak stworzyć stronę bloga za pomocą Divi.
Divi Builder ułatwia tworzenie ciekawych układów, a każdy z modułów można wykorzystać na wiele sposobów. Jak wyjaśniono w tym samouczku, możliwe jest używanie wielu wersji modułu Blog na tej samej stronie, aby wyświetlać kanał blogu na różne sposoby.
Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
