Pobierz 5 żywych stylów tła dla swoich postów na blogu Divi

Jesteśmy tutaj z kolejnym darmowym pobraniem Divi! Tym razem przedstawiamy przedsmak 5 różnych stylów tła, których możesz użyć do postów na blogu w swojej witrynie. Możesz łatwo łączyć te style tła w tej samej witrynie, aby nadać inny wygląd różnym publikowanym postom na blogu. Oprócz oferowania wszystkich tych żywych stylów tła za darmo, poprowadzimy Cię również przez tworzenie szablonu postu na blogu, który możesz ponownie wykorzystać do dowolnego postu na blogu, który utworzysz i publikujesz w swojej witrynie.

Weźmy się za to!

Zapowiedź

Zacznijmy od przyjrzenia się 5 różnym wynikom i widokowi na różnych rozmiarach ekranu.

Pobierz żywe style tła ZA DARMO

Aby położyć ręce na żywych stylach tła, najpierw musisz je pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Palety kolorów

Poniżej znajdziesz paletę kolorów dla każdego ze stylów tła. W tym samouczku będziemy odwoływać się do numeru koloru, więc wybierz styl tła i paletę, które chcesz utworzyć, i przejdź od tego miejsca.

Paleta #1

• Kolor #1: #886DFC
• Kolor #2: #7C56BD
• Kolor #3: #372C66

Paleta #2

• Kolor #1: #42bcb2
• Kolor #2: #9CFEF0
• Kolor #3: #a8baf7

Paleta #3

• Kolor #1: #96b2ff
• Kolor #2: #d999ff
• Kolor #3: #357ff4

Paleta #4

• Kolor #1: #B981FF
• Kolor #2: #24EEFA
• Kolor #3: #be7bf2

Paleta nr 5

• Kolor #1: #e02b20
• Kolor #2: #f6ff56
• Kolor #3: #db241e

Utwórz nowy post

Dodaj szczegóły i włącz Divi Builder

Zacznijmy od początku! Dodaj nową stronę do swojej witryny WordPress, dodaj tytuł strony, prześlij polecany obraz i włącz Divi Builder.

Ustawienia strony Divi

Przed przełączeniem na Visual Builder wprowadź pewne zmiany w polu Ustawienia strony Divi w prawym górnym rogu strony, na której się znajdujesz. Zapewni to całkowitą współpracę z Divi przy tworzeniu układu postów na blogu. Jeśli planujesz ponowne użycie szablonu w swojej witrynie, musisz pamiętać o modyfikowaniu tych ustawień za każdym razem, gdy tworzysz nowy post na blogu.

• Układ strony: Pełna szerokość
• Tytuł posta: Ukryj

Przełącz się na Visual Builder

Możesz teraz przełączyć się na Visual Builder.

Gdy to zrobisz, na ekranie pojawią się trzy opcje. Kliknij niebieski przycisk, aby rozpocząć budowanie od zera.

Utwórz projekt postu na blogu

Dodaj sekcję #1

Zdjęcie w tle

Zacznijmy tworzyć szablon! Zacznij od pustej sekcji na górze. Otwórz ustawienia sekcji, przejdź do ustawień tła i prześlij wybrany styl tła. Możesz znaleźć wszystkie 5 odmian, przechodząc do pobranego folderu > Bohater .

• Rozmiar obrazu tła: okładka
• Pozycja obrazu tła: górny środek

Rozstaw

Aby obraz tła był widoczny w całości, pobaw się górną wyściółką sekcji.

• Górna wyściółka: 660px

Dodaj sekcję #2

Rozstaw

Tuż pod właśnie dodaną sekcją przejdź dalej i dodaj kolejną. Otwórz ustawienia, przejdź do ustawień odstępów i usuń wszystkie domyślne niestandardowe dopełnienie.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozstaw

Usuń wszystkie domyślne dopełnienie na dole następnej sekcji.

• Dolna wyściółka: 0px

Dodaj moduł tytułu posta

Elementy

Czas zacząć dodawać moduły! W tym wierszu będziemy potrzebować tylko modułu tytułu posta. Po dodaniu wybierz elementy, które chcesz pokazać.

Ustawienia tekstu tytułu

Następnie przejdź do ustawień tekstu tytułu i wprowadź pewne zmiany.

• Czcionka tytułu: Abril Fatface
• Wyrównanie tekstu tytułu: do środka
• Rozmiar tekstu tytułu: 73px (komputer), 50px (tablet), 40px (telefon)

Ustawienia metatekstu

Ustawienia meta tekstu również muszą zostać zmodyfikowane.

• Meta wyrównanie tekstu: do środka
• Meta Kolor tekstu: Kolor nr 1 (Znajdź w palecie)
• Rozmiar tekstu meta: 18px
• Wysokość linii Meta: 3em

Dodaj sekcję #3

Zdjęcie w tle

Ostatnia sekcja na tej stronie będzie zawierała treść posta na blogu i wezwanie do działania. Zacznij od przesłania wybranego stylu tła. Odmiany można znaleźć, przechodząc do pobranego folderu > Body . Po przesłaniu obrazu tła wprowadź pewne zmiany w ustawieniach tła.

• Rozmiar obrazu tła: rzeczywisty rozmiar
• Pozycja obrazu tła: górny środek
• Powtarzanie obrazu tła: spacja

Rozstaw

Usuń wszystkie domyślne górne dopełnienie tej sekcji, aby pozbyć się wszystkich białych znaków między tą sekcją a poprzednią.

• Górna wyściółka: 0px

Dodaj wiersz nr 1

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Kolor tła

Dodaj lekko przezroczysty kolor tła do następnego wiersza.

• Kolor tła: rgba (255,255,255,0.86)

Rozstaw

Usuń tutaj również domyślne niestandardowe dopełnienie.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj moduł tekstowy

Dodaj zawartość

Kontynuuj, dodając moduł tekstowy do dodanego wiersza. Tutaj możesz dodać wszystkie żądane treści na blogu i użyć różnych stylów tekstu, aby uzyskać pożądany efekt. Na poniższym zrzucie wydruku używamy nagłówków i akapitów.

Ustawienia tekstu

Przejdź do ustawień tekstu i wprowadź tam pewne zmiany.

• Rozmiar tekstu: 21px (komputer), 18px (tablet), 15px (telefon)
• Wysokość linii tekstu: 2em

Ustawienia nagłówka

Należy również zmodyfikować ustawienia tekstu nagłówka.

• Czcionka nagłówka: Abril Fatface
• Rozmiar tekstu nagłówka: 46px (komputer), 40px (tablet), 30px (telefon)
• Wysokość linii nagłówka: 1,5 em

Rozstaw

Następnie dodaj kilka niestandardowych wartości dopełnienia.

• Górna wyściółka: 80px
• Dolna wyściółka: 80px
• Lewe wypełnienie: 80px (komputer), 40px (tablet), 30px (telefon)
• Prawe dopełnienie: 80px (komputer), 40px (tablet), 30px (telefon)

Cień Pudełka

Aby zakończyć, dodaj subtelny cień pudełkowy do modułu tekstowego. To wprowadzi trochę głębi do szablonu posta na blogu.

• Siła rozmycia cieni w pudełku: 80px
• Siła rozprzestrzeniania się cieni w pudełku: -14px

Dodaj wiersz nr 2

Struktura kolumny

Kontynuuj, dodając nowy wiersz tuż pod poprzednim, używając jednej kolumny.

Rozstaw

Usuń również wszystkie domyślne niestandardowe dopełnienie tego wiersza.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj moduł e-mail Optin

Dodaj zawartość

Następnie dodaj swoje wezwanie do działania. Używamy modułu Email Optin. Po dodaniu zmodyfikuj zawartość.

Pola

W tym module używamy tylko adresu e-mail, więc śmiało wyłącz imię i nazwisko w ustawieniach pól.

Tło gradientowe

Kontynuuj, dodając gradientowe tło do modułu Email Optin.

• Kolor 1: Kolor #2 (Znajdź w palecie)
• Kolor 2: Kolor #3 (Znajdź w palecie)
• Kierunek gradientu: 144 stopni

Układ

Następnie zmień układ modułu.

• Układ: korpus na górze, formularz na dole

Ustawienia tekstu

Zmień również ustawienia tekstu.

• Orientacja tekstu: Środek
• Kolor tekstu: jasny

Ustawienia tekstu tytułu

Następnie otwórz ustawienia tekstu tytułu i wprowadź zmiany.

• Czcionka tytułu: Abril Fatface
• Rozmiar tekstu tytułu: 54px (komputer), 40px (tablet), 35px (telefon)

Ustawienia przycisków

Zmodyfikuj również wygląd przycisku.

• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 0px
• Styl czcionki: podkreślenie
• Styl podkreślenia: Podwójny

Rozstaw

Na koniec użyj różnych niestandardowych wartości dopełnienia w ustawieniach odstępów modułu Email Optin.

• Górna wyściółka: 100px
• Dolna wyściółka: 100px
• Lewe wypełnienie: 300px (komputer), 50px (tablet i telefon)
• Prawe dopełnienie: 300px (komputer), 50px (tablet i telefon)

Zapisz układ w bibliotece Divi do ponownego użycia

Jedyne, co pozostało do zrobienia, to zapisanie układu w Bibliotece Divi. W ten sposób możesz wykorzystać go również na innych stronach! Możesz również uzyskać dostęp do postów w blogu jako istniejących stron podczas tworzenia nowej strony.

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi, który stworzyliśmy.

Końcowe przemyślenia

W tym poście udostępniliśmy Ci kilka wspaniałych i żywych stylów tła, które możesz pobrać za darmo. Ponadto poprowadziliśmy Cię również przez tworzenie od podstaw szablonu posta na blogu. Możesz swobodnie używać tych stylów tła w projektowanych przez siebie szablonach postów na blogu. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!