Jak stać się kreatywnym z tłem ikony Blurb w Divi

Moduły Blurb to jedne z najbardziej wszechstronnych elementów, jakie można znaleźć w Divi. W tym poście pokażemy Ci, jak pójść o krok dalej i wykazać się kreatywnością z tłem ikony blurb. Będziemy używać kombinacji modułów notatek, modułów tekstowych i modułów wezwania do działania. Te unikalne projekty są idealne na strony usług i strony kategorii produktów. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki wszystkich trzech przykładów na różnych rozmiarach ekranu.

Przykład 1

Pulpit

mobilny

Przykład #2

Pulpit

mobilny

Przykład #3

Pulpit

mobilny

Pobierz przykłady tła ikony Blurb za DARMO

Aby położyć ręce na darmowych przykładach tła ikony notki, musisz je najpierw 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!

Subskrybuj nasz kanał YouTube

Ogólne kroki

Dodaj nową sekcję

Tło

Aby odtworzyć te kreatywne projekty tła notatek, otwórz nową stronę lub dodaj nową sekcję do istniejącej strony. Przed dodaniem wiersza dodaj kolor tła do sekcji.

• Kolor tła: #f7f7f7

Rozstaw

Dodaj również niestandardową górną i dolną wyściółkę do sekcji.

• Górna i dolna wyściółka: 120px

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

Przed dodaniem jakichkolwiek modułów dostosuj rozmiar rzędu.

• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Następnie dostosuj dopełnienie w ustawieniach odstępów.

• Górna wyściółka: 8vw
• Dolna wyściółka: 15vw
• Wyściółka lewa i prawa: 12vw

Kolumna 1

Po zakończeniu modyfikowania ustawień wierszy wprowadź zmiany w pierwszej kolumnie.

Tło

Najpierw dodaj białe tło.

• Kolor tła: biały #ffffff

Granica

Następnie dodaj promień obramowania.

• Zaokrąglone rogi: 2vw wszystkie cztery rogi

Cień Pudełka

Na koniec dodaj cień do pudełka.

• Box-Shadow: Pierwsza opcja
• Siła rozmycia box-shadow: 47px

Klonuj rząd dwa razy

Pozostał jeszcze ostatni krok, zanim zaczniemy dodawać moduły. Dwukrotnie sklonuj rząd.

Odtwórz przykład nr 1

Dodaj moduł Blurb do kolumny 1

Wymaż domyślną zawartość

Teraz, gdy mamy już skonfigurowane wiersze i kolumny, możemy zacząć dodawać moduły do ​​kolumny 1 pierwszego wiersza. Najpierw dodaj moduł notki i usuń cały domyślny tytuł i treść.

Wybierz ikonę

Następnie wybierz ikonę zamiast obrazu.

• Ikona: Link

Tło

Dodaj czarny kolor tła do modułu notki.

• Kolor tła: Czarny #000000

Ustawienia ikon

Następnie zmień ustawienia ikony.

• Kolor ikony: żółty #edf000
• Umieszczenie ikon: góra
• Rozmiar czcionki ikony:
  • Komputer stacjonarny: 3vw
  • Tablet: 11vw
  • Telefon: 13vw

Rozmiary

Kontynuuj, dostosowując rozmiar modułu.

• Szerokość treści: 100%
• Szerokość:
  • Komputer stacjonarny: 11vw
  • Tablet: 19vw
  • Telefon: 22vw

Rozstaw

Dodaj również kilka wartości odstępów.

• Górny margines: -5vw
• Dolny margines: 0vw
• Lewy margines: -1vw
• Wyściółka górna i wyściółka dolna: 4vw

Granica

Aby nadać ikonie unikalny kształt, dodaj trochę promienia obramowania do każdego z rogów, z wyjątkiem lewego dolnego.

• Zaokrąglone rogi: 50vw, 0vw w lewym dolnym rogu.

Cień Pudełka

Na koniec dodaj cień pudełkowy.

• Box-Shadow: Pierwsza opcja
• Siła rozmycia cienia pudełkowego: 50px

niestandardowe CSS

Ikona ma domyślnie dołączony dolny margines. Aby się tego pozbyć, dodamy jeden wiersz kodu CSS do niestandardowego pola CSS blurb image.

• Blurb Image: margines-dolny: 0px;

margin-bottom: 0px;

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość H3

Poniżej ikony dodaj moduł tekstowy z wybraną zawartością H3.

Tło

Przejdź do ustawień tła i dodaj tło gradientowe.

• Tło: Gradient
• Kolor jeden: przezroczysty
• Kolor drugi: żółty #edf000
• Kierunek gradientu: 180 stopni
• Pozycja początkowa i końcowa: 74%

Tekst tytułu

Następnie nadaj styl tekstowi H3.

• Poziom nagłówka tekstu tytułu: H3
• Czcionka H3: Josefin Sans
• Wyrównanie H3: Środek
• Kolor czcionki H3: czarny #oooooo
• Rozmiar tekstu H3:
  • Komputer stacjonarny: 2.4vw
  • Tablet: 3.4vw
  • Telefon: 4,8vw
• Odstępy między literami H3: 0em

Rozmiary

W ustawieniach rozmiaru dostosuj szerokość tabletu i telefonu.

• Szerokość:
  • Tablet: 50%
  • Telefon: 60%

Rozstaw

Kontynuuj, przechodząc do ustawień odstępów i dostosowując wartości marginesów.

• Lewy i prawy margines: 5vw
• Górna wyściółka: 1vw

Przekształcać

Na koniec obróć moduł za pomocą opcji transformacji.

• Przekształć Tłumacz:
  • oś x: -20vw
  • oś y: 13vw
• Obrót transformacji: pierwsza opcja, 280 stopni

Dodaj moduł wezwania do działania do kolumny 1

Usuń domyślną zawartość tytułu, dodaj przycisk i zawartość tekstową

Następny i ostatni moduł, którego potrzebujemy w kolumnie 1, to moduł wezwania do działania. Dodaj wybrane treści i usuń kopię tytułu.

Dodaj link

Dodaj odpowiedni link do przycisku.

Tło

Upewnij się, że tło nie ma koloru.

Tekst główny

Następnie przejdź do zakładki projektowania i zmień ustawienia tekstu podstawowego.

• Czcionka ciała: Szkarłatny tekst
• Wyrównanie tekstu podstawowego: do lewej
• Kolor tekstu ciała: Ciemnoszary #666666
• Rozmiar tekstu treści:
  • Komputer stacjonarny: 1.2vw
  • Tablet: 2,6vw
  • Telefon: 3.1vw
• Wysokość linii ciała: 1,8 em

Przycisk

Zmodyfikuj również style przycisków.

• Rozmiar tekstu przycisku:
  • Pulpit: 1vw
  • Tablet: 2vw
  • Telefon: 3vw
• Kolor tekstu przycisku: Bardzo ciemnoszary #3f3f3f
• Kolor obramowania przycisków: bardzo ciemnoszary #3f3f3f
• Czcionka przycisku: Josefin Sans
• Margines przycisku: 3vw
• Wyściółka górna i dolna przycisków: 1vw
• Wypełnienie lewego i prawego przycisku: 3vw

Rozstaw

Uzupełnij ustawienia modułu, dodając trochę lewego i prawego dopełnienia.

• Wyściółka lewa i prawa: 7vw

Usuń kolumnę drugą i sklonuj kolumnę 1

Dostosuj ustawienia w kolumnie 2

Teraz wróć do ustawień wiersza i usuń drugą kolumnę. Zaraz potem sklonuj pierwszą kolumnę. W kolejnych krokach dostosujemy kilka ustawień w kolumnie duplikatów.

Moduł Blurb

Zacznij od zmiany koloru ikony modułu notki.

• Kolor ikony: Aqua #00ffd4

Moduł tekstowy

Następnie zmień tło gradientowe i kopię modułu tekstowego.

• Kolor tła: Aqua #00ffd4
• Zmień zawartość

Odtwórz przykład nr 2

Dodaj moduł Blurb do kolumny 1

Usuń zawartość domyślną

Przejdźmy do drugiego przykładu! Dodaj moduł notki do kolumny 1 i usuń całą zawartość domyślną.

Wybierz ikonę

Następnie wybierz ikonę.

Tło

Teraz dodaj żółty kolor tła.

• Kolor tła: żółty #edf000

Ikona

Kontynuuj, modyfikując ustawienia ikony na karcie projektu.

• Kolor ikony: biały #ffffff
• Umieszczenie ikon: góra
• Rozmiar czcionki ikony:
  • Komputer stacjonarny: 3vw
  • Tablet: 11vw
  • Telefon: 12vw

Rozmiary

Po ustaleniu stylu koloru i tła dostosuj rozmiar modułu.

• Szerokość treści: 100%

Rozstaw

Zmodyfikuj również ustawienia odstępów.

• Dolny margines: 0vw
• Lewy i prawy margines: 3vw
• Wyściółka górna i dolna: 2vw

Granica

Dodaj trochę promienia obramowania do każdego rogu.

• Zaokrąglone rogi: 2vw wszystkie cztery rogi

Cień Pudełka

Uzupełnij projekt modułu, dodając subtelny cień w kształcie pudełka.

• Box-Shadow: Pierwsza opcja

Usuń cień pudełka i kolor tła kolumny 1

Otwórz następnie ustawienia kolumny 1 i usuń kolor tła i cień pola.

niestandardowe CSS

Usuń domyślny dolny margines zastosowany do ikony notatek, dodając jeden wiersz kodu CSS na karcie Zaawansowane.

• Blurb Image: margines-dolny: 0px;

margin-bottom: 0px;

Dodaj moduł Call to Action do kolumny 1

Dodaj zawartość tytułu, zawartość treści i zawartość przycisku

Poniżej modułu notki dodaj moduł wezwania do działania i wstaw wybrane przez siebie treści.

Dodaj link

Dodaj link do przycisku obok.

Tło

Kontynuuj, dodając białe tło.

• Kolor tła: biały #ffffff

Tekst tytułu

Na karcie projektu dostosuj styl tekstu tytułu H3.

• Poziom nagłówka tytułu: H3
• Czcionka H3: Josefin Sans
• Kolor czcionki H3: Bardzo ciemnoszary #3f3f3f
• Rozmiar H3:
  • Komputer stacjonarny: 2vw
  • Tablet: 4vw
  • Telefon: 6vw
• Wysokość linii H3: 2,3 em

Tekst główny

Następnie dostosuj styl tekstu głównego.

• Czcionka ciała: Szkarłatny tekst
• Wyrównanie tekstu podstawowego: do lewej
• Kolor tekstu ciała: Ciemnoszary #666666
• Rozmiar tekstu treści:
  • Komputer stacjonarny: 1.1vw
  • Tablet: 2.2vw
  • Telefon: 3.1vw
• Wysokość linii ciała: 1,8 em

Przycisk

Przejdź do ustawień przycisku i stylizuj przycisk w następujący sposób:

• Rozmiar tekstu przycisku:
  • Pulpit: 1vw
  • Tablet: 2vw
  • Telefon: 3vw
• Kolor tekstu przycisku: Bardzo ciemnoszary #3f3f3f
• Czcionka przycisku: Josefin Sans
• Szerokość obramowania przycisku: 2-x
• Kolor obramowania przycisków: bardzo ciemnoszary #3f3f3f
• Przycisk górny i dolnyMargines: 3vw
• Wyściółka górna i dolna przycisków: 1vw
• Wypełnienie lewego i prawego przycisku: 3vw

Rozstaw

Teraz dostosuj odstępy.

• Dolny margines: -1vw
• Górna wyściółka: 6vw
• Wyściółka lewa i prawa: 7vw

Granica

Następnie zaokrąglij rogi w ustawieniach obramowania.

• Zaokrąglone rogi: 2vw

Cień Pudełka

Na koniec dodaj cień pudełkowy.

• Box-Shadow: Pierwsza opcja
• Siła rozmycia cienia pudełkowego: 50px

Usuń kolumnę drugą i sklonuj kolumnę 1

Dostosuj ustawienia w kolumnie 2

Podobnie jak w poprzednim przykładzie, przejdź do ustawień wiersza i usuń drugą kolumnę. Powiel pierwszą kolumnę i dostosuj kilka ustawień.

Moduł Blurb

Zmień tło modułu notki z żółtego na aqua.

• Kolor ikony tła: Aqua #00ffd4

Moduł wezwania do działania

Zmień także zawartość i link wezwania do działania.

• Zmień zawartość tytułu
• Zmień łącze

Odtwórz przykład nr 3

Dodaj moduł Blurb do kolumny 1

Usuń zawartość domyślną

Przejdźmy do następnego i ostatniego przykładu! Dodaj moduł notki do kolumny 1 i usuń domyślną zawartość.

Wybierz ikonę

Wybierz ikonę.

Tło

Dodaj jasnożółte tło do modułu.

• Kolor tła: żółty # f7f426

Ikona

Zmień kolor ikony na czarny i dostosuj jego położenie

• Kolor ikony: Czarny #000000
• Umieszczenie ikony: po lewej
• Rozmiar czcionki ikony:
  • Komputer stacjonarny: 3vw
  • Tablet + telefon: 8vw

Rozmiary

Kontynuuj, modyfikując szerokość i wysokość modułu.

• Szerokość treści: 100%
• Wzrost: 23vw

Rozstaw

Ponadto dostosuj ustawienia odstępów.

• Lewy margines: 3vw
• Prawy margines: 25vw
• Górna wyściółka: 2vw
• Lewa wyściółka: 1vw

Granica

Dodaj też promień obramowania.

• Zaokrąglone rogi: 2vw na wszystkich rogach

Cień Pudełka

Następnie dodaj cień pudełkowy.

• Box-Shadow: Pierwsza opcja

Przekształcać

Na koniec zmień położenie modułu, używając niestandardowych wartości translacji transformacji.

• oś x: -6vw
• oś y: 1vw

Usuń kolor tła i cień pola z kolumny 1

Przejdź do ustawień kolumny 1 i usuń kolor tła i cień pudełka.

Dodaj moduł wezwania do działania do kolumny 1

Dodaj tytuł, treść i zawartość przycisku

Poniżej modułu notki dodaj moduł wezwania do działania. Dodaj wybrane przez siebie treści.

Dodaj link

Następnie dodaj link do przycisku.

Tło

Aby wystylizować moduł wezwania do działania, zacznij od dodania czarnego koloru tła.

• Kolor tła: czarny #oooooo

Tekst tytułu

Następnie dostosuj ustawienia tekstu H3.

• Poziom nagłówka tytułu: H3
• Czcionka H3: Josefin Sans
• Kolor czcionki H3: Jasnożółty #f7f426
• Rozmiar czcionki H3:
  • Komputer stacjonarny: 2vw
  • Tablet: 4vw
  • Telefon: 6vw
• Wysokość linii H3: 2,3 em

Tekst główny

Zmień też ustawienia tekstu podstawowego.

• Czcionka ciała: Szkarłatny tekst
• Wyrównanie tekstu podstawowego: do lewej
• Kolor tekstu ciała: biały #000000
• Rozmiar tekstu treści:
  • Komputer stacjonarny: 1.2vw
  • Tablet: 2.2vw
  • Telefon: 3.1vw
• Wysokość linii ciała: 1,8 em

Przycisk

Następnie zmień styl przycisku w następujący sposób.

• Rozmiar tekstu przycisku:
  • Pulpit: 1vw
  • Tablet: 2vw
  • Telefon: 3vw
• Kolor tekstu przycisku: Aqua #00ffd4
• Kolor obramowania przycisku: Aqua #00ffd4
• Czcionka przycisku: Josefin Sans
• Margines górny i dolny przycisku: 3vw
• Wyściółka górna i dolna przycisków: 1vw
• Wypełnienie lewego i prawego przycisku: 3vw

Rozmiary

Przejdź do ustawień rozmiaru i wprowadź pewne zmiany.

• Szerokość: 90%
• Wyrównanie modułu: Środek

Rozstaw

Zmodyfikuj również ustawienia odstępów.

• Górny margines: -9vw
• Górna wyściółka: 5vw
• Wyściółka lewa i prawa: 7vw

Granica

Otwórz następnie ustawienia obramowania i dodaj trochę promienia obramowania do każdego z rogów.

• Zaokrąglone rogi: 2vw

Cień Pudełka

Używamy również subtelnego cienia pudełkowego.

• Cień pudełka: pierwsza opcja

Przekształć Tłumacz

Na koniec zmień położenie modułu wywołania akcji, modyfikując ustawienia tłumaczenia transformacji.

• oś y: -18vw

Usuń kolumnę drugą i sklonuj kolumnę 1

Dostosuj ustawienia w kolumnie 2

Teraz, gdy pierwsza kolumna jest gotowa, usuniemy drugą i zduplikujemy pierwszą. Później dostosujemy niektóre szczegóły dotyczące zawartości i kolorów.

Moduł Blurb

W ustawieniach modułu notatek zmień tło z żółtego na aqua.

• Kolor ikony tła: Aqua #00ffd4

Moduł wezwania do działania

W ustawieniach modułu wezwania do działania zmień zawartość tytułu, kolor tytułu i kolor przycisku. Nie zapomnij również zmienić linku przycisku i gotowe!

• Kolor tekstu tytułu: Aqua #00ffd4
• Zadowolony
• Kolor przycisku: #00ffd4

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Przykład 1

Pulpit

mobilny

Przykład #2

Pulpit

mobilny

Przykład #3

Pulpit

mobilny

Wniosek

Jak widzieliście w tym poście, tła ikon blurbów mogą sprawić, że projekty blurbów będą o wiele ciekawsze. Korzystanie z modułów notatek w połączeniu z modułami z wezwaniem do działania i tekstem daje wiele kreatywnych możliwości. Ten styl wzorów jest idealny do witryn usługowych lub sekcji produktów. Co myślisz? Powiedz nam w komentarzach.