5 kreatywnych projektów modułów Divi Blurb

W tym poście zamierzamy zbadać jedną z najpopularniejszych funkcji Divi, moduł Blurb. Choć z pozoru jest prosty, ma wiele konfigurowalnych funkcji, które mogą ożywić elementy Twojej witryny. Ogólnie rzecz biorąc, moduł Blurb jest używany do takich rzeczy, jak usługi, korzyści, informacje kontaktowe itp., ale dzięki Divi możliwości są nieograniczone.

Zabawmy się!

zapowiedź

Oto zapowiedź 5 stylów modułów notatek, które będę tworzyć w tym samouczku.

5 kreatywnych projektów modułów Divi Blurb

Subskrybuj nasz kanał YouTube

Pierwsze kroki

Aby rozpocząć, musisz utworzyć nową stronę. Z pulpitu nawigacyjnego WordPress przejdź do Strony> Dodaj nowy. Następnie nadaj swojej stronie tytuł i wdróż konstruktor wizualny. Wybierz opcję „Buduj od podstaw”. Po załadowaniu konstruktora wizualnego na stronie możesz rozpocząć projektowanie.

Ten samouczek ma na celu ułatwienie indywidualnego tworzenia każdego z tych projektów w stylu notatek, więc możesz swobodnie przejść do projektu, który chcesz zbudować. Innymi słowy, nie musisz zaczynać od pierwszego.

1. Wyskakujące uwagi z listami funkcji

W tym pierwszym przykładzie będziemy mieć trochę zabawy z rozwijaniem notatek poza wiersz, aby stworzyć efekt wyskakującego okienka. Następnie możemy użyć sąsiednich kolumn obok każdej z nich, aby dodać kilka notatek z ikonami wyrównanymi do lewej, które będą służyć jako polecane elementy listy.

Na początek utwórz nową sekcję i wiersz o strukturze czterokolumnowej.

Następnie przejdź dalej i zaktualizuj ustawienia wiersza w następujący sposób:

Kolor tła: #2e3858
Ustaw pełną szerokość tego wiersza: TAK
Użyj niestandardowej szerokości rynny: TAK
Szerokość rynny: 1
Wyrównaj wysokości kolumn: TAK
Margines niestandardowy: 5vw góra, 5vw dół
Niestandardowe wypełnienie: 0px na górze, 0px na dole

Zapisz ustawienia.

Następnie w pierwszej kolumnie dodaj swój pierwszy moduł notki.

Usuń ostatnie zdanie w polu treści, aby nieco skrócić tekst. Następnie wybierz ikonę zamiast obrazu i wybierz ikonę (każdy to zrobi).

Następnie zaktualizuj następujące elementy:

Kolor tła: #df4570
Kolor ikony: #ffffff
Orientacja tekstu: Środek
Czcionka tytułu: Encode Sans Semi Condensed
Styl czcionki tytułu: TT
Odstępy między literami tytułu: 2px
Margines niestandardowy (komputer): -5vw Top, -5vw Bottom
Margines niestandardowy (tablet): 0px góra, 0px dół
Niestandardowe wypełnienie: 5vw góra, 5vw dół, 3vw lewo, 3vw prawo
Cień pudełka: patrz zrzut ekranu
Pole Rozmycie cieni Siła: 80px

Korzystając z opcji menu prawego przycisku myszy lub skrótów klawiszowych cmd+c i cmd+v, skopiuj właśnie utworzony moduł i wklej go do kolumny 3. Następnie zaktualizuj nowe ustawienia modułu notki o innym jasnym (ale komplementarnym) kolorze tła:

Kolor tła: #24c4a3

Teraz nadszedł czas, aby dodać notki elementów listy obok wyskakujących notek, które właśnie stworzyliśmy.

Aby to zrobić, dodaj nową notkę w kolumnie 2. Następnie usuń próbny tekst w polu treści, aby pozostał tylko tekst tytułu. Następnie dodaj ikonę, aby zastąpić obraz, tak jak poprzednio. Następnie zaktualizuj ustawienia projektu w następujący sposób:

Kolor ikony: #df4570
Umieszczenie obrazu/ikony: po lewej
Czcionka tytułu: Encode Sans Semi Condensed
Niestandardowe wypełnienie: 20px góra, 20px dół, 3vw lewo, 3vw prawo

Dwukrotnie zduplikuj notkę, aby uzyskać w kolumnie trzy notki z całej listy. Następnie użyj funkcji Multiselect Divi, aby wybrać wszystkie trzy notki, a następnie skopiuj i wklej je do kolumny 4.

Możesz także użyć wielokrotnego wyboru, aby wybrać wszystkie trzy notki w kolumnie 4 i zbiorczo edytować ustawienia elementów, aby zmienić kolor wszystkich trzech ikon na #24c4a3.

Otóż ​​to! Tworzenie wyskakujących notatek to fajny sposób na wyróżnienie notatek, a posiadanie sąsiadujących notatek z listami z boku daje dodatkowe opcje dla bardziej kreatywnych projektów.

Oto ostateczny wynik.

2. Blurba promocyjna z niestandardowym obrazem tła.

Ten styl notatek doskonale nadaje się do prezentowania treści i ofert promocyjnych, takich jak bezpłatna książka. Podstawową ideą jest umieszczenie treści notatek po lewej stronie modułu, aby zrobić miejsce na niestandardowy obraz tła. Weźmy się za to.

Najpierw dodaj zwykłą sekcję o dwukolumnowej strukturze wierszy. W lewej kolumnie dodaj nowy moduł notki.

Zaktualizuj tekst tytułu i usuń ostatnie zdanie z pozorowanej treści, aby zmniejszyć ilość tekstu. Następnie zaktualizuj swój obraz obrazem książki (lub obrazem swojego produktu). Ikona książki lub coś takiego też się sprawdzi.

Korzystam z zasobów graficznych z pakietu Travel Blog Layout Pack, więc możesz szybko rozpocząć projektowanie, chwytając te obrazy.

WSKAZÓWKA: Możesz również dodać adres URL łącza modułu do tego modułu, aby cały moduł był klikalny, ponieważ może służyć jako promocja.

Następnie dodaj obraz tła do modułu. Upewnij się, że obraz tła jest nagłówkiem, takim jak obraz, z centralnym punktem obrazu po prawej stronie, dzięki czemu możesz dodać treść po lewej stronie obrazu, a tło odwraca uwagę od tekstu.

Następnie dodaj gradient tła, który będzie służył jako częściowa nakładka, która znajduje się za treścią i nakłada obraz tła, aby tekst był bardziej czytelny. Aby dodać gradient tła, zaktualizuj następujące elementy:

Kolor lewego gradientu tła: rgba (255,255,255,0.8)
Prawy gradient tła: rgba (255,255,255,0)
Kierunek gradientu: 90 stopni
Pozycja startowa: 40%
Pozycja końcowa: 70%
Umieść gradient nad obrazem tła: TAK

Następnie zaktualizuj następujące elementy:

Cień pola obrazu: patrz zrzut ekranu
Czcionka tytułu: Noto Serif
Rozmiar tekstu tytułu: 26px
Czcionka ciała: Noto Sans
Rozmiar tekstu ciała: 16px
Szerokość obrazu: 150px
Szerokość treści (komputer stacjonarny): 60%
Szerokość treści: (smartfon): 80%
Niestandardowa wyściółka: 2vw na dole, 2vw w lewo, 2vw w prawo

Kluczową techniką projektowania tutaj jest nadanie zarówno obrazowi, jak i zawartości niestandardowej szerokości, aby zawartość mogła być później umieszczona po lewej stronie.

Teraz musimy dodać cień w górnej części notki, aby stworzyć wrażenie, że obraz książki rozciąga się nad modułem, aby uzyskać ładny efekt nakładania się. Aby to zrobić, zaktualizuj następujące elementy:

Cień pudełka: Zobacz zrzut ekranu
Pozycja pozioma cienia pudełka: 0px
Pozycja pionowa cienia pudełka: 50px
Kolor cienia: #ffffff

Ostatni krok obejmuje krótki fragment niestandardowego kodu CSS potrzebnego do wyrównania treści notatek do lewej strony modułu. Aby to zrobić, przejdź do zakładki Zaawansowane i dodaj następujący niestandardowy kod CSS w polu wprowadzania treści Blurb:

margin-left: 0;

Teraz sprawdź wynik!

WSKAZÓWKA: Nie zapomnij o dostępnych opcjach najechania kursorem. Spróbuj nadać obrazowi książki obramowanie po najechaniu kursorem, aby rzeczy ożyły!

3. Okrągły styl rozmycia za pomocą gradientu tła

Ten prosty styl notatek wykorzystuje gradienty tła, które służą jako okrągłe tło dla treści notatek. To fajna alternatywa dla przekształcenia całego modułu notki w okrąg za pomocą niestandardowego CSS.

Zacznij od dodania nowej zwykłej sekcji o strukturze trzech kolumn.

Następnie dodaj moduł notki do lewej kolumny.

Następnie usuń ostatnie zdanie treści, aby zmniejszyć ilość tekstu. Dla tego projektu ważne jest, aby ilość tekstu była nieco mała, ponieważ będziesz go zmieścił w okręgu.

Następnie dodaj gradient tła, aby utworzyć tło koła w następujący sposób:

Kolor lewego gradientu tła: #fa7f28
Prawy gradient tła: rgba (255,255,255,0)
Typ gradientu: promieniowy
Pozycja startowa: 60%
Pozycja końcowa: 0%
Umieść gradient nad obrazem tła: TAK

Następnie zaktualizuj pozostałe ustawienia projektu w następujący sposób:

Orientacja tekstu: Środek
Czcionka tytułu: Oswald
Styl czcionki tytułu: TT
Odstępy między literami tytułu: 1px
Czcionka ciała: Robot
Waga czcionki ciała: lekka
Rozmiar tekstu ciała: 16px
Szerokość (tablet): 80%
Wyrównanie modułu: Środek
Niestandardowe wypełnienie (komputer): 20% góra, 25% dół, 20% lewo, 20% prawo
Niestandardowe wypełnienie (smartfon): 20% góra, 25% dół, 10% lewo, 10% prawo

Kluczem jest tutaj prawidłowe dostosowanie niestandardowego dopełnienia, tak aby okrąg tła był wyrównany z treścią w środku. Może być konieczne dostosowanie tych ustawień w zależności od ilości posiadanej zawartości.

Teraz możesz skopiować i wkleić moduł do pozostałych kolumn.

Następnie zaktualizuj ustawienia wiersza tak, aby miał niestandardową szerokość 80% i szerokość rynny 1.

Aby ukończyć projekt, możesz dodać obraz tła i gradient do swojej sekcji w następujący sposób:

Dodaj obraz tła
Kolor lewego gradientu tła: rgba (2,0,76,0,51)
Prawy gradient tła: rgba (2,0,76,0.84)
Umieść gradient nad obrazem tła: TAK

Otóż ​​to! Sprawdź ostateczny projekt!

Aby uzyskać dodatkowe miejsce, zawsze możesz zmniejszyć rozmiar ikony notki do około 50 pikseli, aby uniknąć kolizji kręgów na mniejszych szerokościach przeglądarki. Podczas wprowadzania zmian nie zapomnij skorzystać z funkcji Multiselect Divi, aby dokonać zbiorczej edycji wszystkich modułów jednocześnie.

Dodatkowa wskazówka: Zamień cały moduł Blurb w okrąg z niestandardowym kodem CSS

Jeśli chcesz zamienić cały moduł w okrąg (zamiast używać gradientu tła), zastąp gradient zwykłym kolorem tła i dodaj ten niestandardowy kod CSS w zakładce Zaawansowane w ustawieniach modułu notatek:

W polu Element główny:

height: 300px;
width: 300px;
border-radius: 100%;
border: 5px solid #ffffff;
padding: 5% !important;
display: flex;

W polu Treść Blurba:

margin: auto;

Ten niestandardowy CSS zastępuje ustawienie dopełnienia w ustawieniach modułu notatek, więc może być konieczne usunięcie tego fragmentu, jeśli chcesz odzyskać kontrolę nad tymi ustawieniami. Ponadto, ten css wykorzystuje flex do wyśrodkowania treści notki w okręgu. To się przyda.

Będzie wyglądać mniej więcej tak, jeśli zostanie zastosowany do wszystkich trzech modułów.

4. Blurb w ramce z obramowaniem i cieniami w pudełku

Jedną z moich ulubionych funkcji Divi, którymi można się bawić, są cienie pudełkowe. W naszym projekcie notki promocyjnej przedstawiliśmy już kreatywne zastosowanie cieni skrzynkowych, w którym stworzyliśmy efekt nakładania się. Ale możesz również użyć cieni skrzynkowych jako kreatywnego sposobu na oprawienie treści za pomocą projektów uszkodzonych siatek. W tym projekcie pokażę, jak w wyjątkowy sposób łączyć obramowania i cienie pudełkowe.

Aby rozpocząć, dodaj nową zwykłą sekcję o strukturze trzech kolumn. Następnie dodaj moduł notki do pierwszej kolumny.

Dodaj obraz do notki. Następnie nadaj obrazowi rozmycia ramkę i cień, aktualizując ustawienia projektu w następujący sposób:

Szerokość górnej krawędzi obrazu: 8px
Kolor górnej krawędzi obrazu: #2f3854
Szerokość lewej krawędzi obrazu: 8px
Kolor lewej krawędzi obrazu: #2f3854

Cień pola obrazu: Zobacz zrzut ekranu
Pozycja pozioma cienia pudełka: -20px
Pozycja pionowa cienia pudełka: -30px
Kolor cienia: #f89da9

Następnie zaktualizuj czcionkę tytułu i treści oraz odstępy w następujący sposób:

Czcionka tytułu: Yeseva One
Czcionka ciała: Montserrat
Margines niestandardowy: dolny 50 pikseli
Niestandardowa wyściółka: 2vw na dole

Na koniec nadaj swojemu modułowi notki niestandardowe obramowanie i cień pudełka, aby zrównoważyć projekt ramki w następujący sposób:

Szerokość prawego obramowania: 15px
Kolor prawego obramowania: #2f3854
Szerokość dolnej krawędzi: 15px
Kolor dolnej krawędzi: #2f3854

Cień pola obrazu: Zobacz zrzut ekranu
Pozycja pozioma cienia pudełka: 20px
Pozycja pionowa cienia pudełka: 35px
Kolor cienia: #dddddd

Teraz skopiuj i wklej moduł w kolumnach 2 i 3 i zaktualizuj obrazy notek, aby dokończyć projekt.

Oto ostateczny wynik.

5. Stylizacja Blurbs jako zakrzywiona lista

Ten następny projekt to świetny sposób na tworzenie list za pomocą notek. Używając pewnych niestandardowych marginesów, możesz zakrzywić elementy listy notatek, aby zawijać elementy na stronie. W tym przykładzie zamierzam zakrzywić listę, aby zawinąć się wokół prawej strony dużej ikony notki. I możesz być trochę kreatywny

Najpierw dodaj nową zwykłą sekcję o strukturze dwukolumnowej.

Zanim dodasz jakiekolwiek moduły notatek, nadaj swojemu wierszowi niestandardową szerokość i szerokość rynny, aktualizując ustawienia wiersza w następujący sposób:

Szerokość niestandardowa: 700px
Szerokość rynny: 2

Teraz stwórzmy dużą ikonę notki, dodając moduł noty w lewej kolumnie. Następnie wyjmij tekst tytułu i treść. A następnie wybierz ikonę żarówki. Teraz powinna być widoczna tylko ikona. Następnie zaktualizuj kolor i rozmiar ikony w następujący sposób:

Kolor ikony: #96a6bd
Rozmiar czcionki ikony (komputer): 400px
Rozmiar czcionki ikony (smartfon): 200px

W prawej kolumnie dodaj nowy moduł notki. Będzie to pierwsza z pięciu wszystkich notek, które tworzą naszą listę. Następnie otwórz ustawienia modułu i wyjmij zawartość, pozostawiając tylko tekst tytułu. Następnie wybierz ikonę prawej strzałki dla notki.

Następnie zaktualizuj ustawienia projektu w następujący sposób:

Kolor tła: #bb7860
Kolor ikony: #ffffff
Umieszczenie obrazu/ikony: po lewej
Użyj rozmiaru czcionki ikony: TAK
Rozmiar czcionki ikony: 30px
Czcionka tytułu: Raleway
Kolor tekstu tytułu: #ffffff
Rozmiar tekstu tytułu: 20px
Wysokość wiersza tytułu: 1,5 em
Margines niestandardowy: 5% na dole
Niestandardowe wypełnienie: 3% u góry, 10% w lewo, 2% w prawo

Powiel moduł cztery razy, aż otrzymasz pięć notatek ułożonych w prawej kolumnie.

Następnie nadaj drugiej notce nowy kolor, niestandardowe marginesy, aby przesunąć ją w prawo i kreatywne zaokrąglone rogi w następujący sposób:

Kolor tła: #393e56
Margines niestandardowy (komputer): 10% lewy, -10% prawy
Margines niestandardowy (tablet): 0% lewy, 0% prawy
Zaokrąglone rogi: 50px w prawym górnym rogu, 50px w lewym dolnym rogu

Zanim opuścisz ten moduł, skopiuj zaokrąglone rogi, klikając prawym przyciskiem myszy opcję w ustawieniach notki.

Następnie zapisz ustawienia notki i kliknij prawym przyciskiem myszy pierwszy (górny) moduł, który utworzyłeś i wklej zaokrąglone rogi stylu modułu.

Teraz kontynuujmy aktualizację ostatnich trzech modułów o odpowiednie kolory, odstępy i projekty zaokrąglonych narożników.

W przypadku trzeciej notki w kolumnie zaktualizuj następujące informacje:

Kolor tła: #96a6bd
Margines niestandardowy (komputer): 20% po lewej, -20% po prawej
Margines niestandardowy (tablet): 0% lewy, 0% prawy
Zaokrąglone rogi: 50px w prawym górnym rogu, 50px w prawym dolnym rogu

W przypadku czwartej notki zaktualizuj następujące informacje:

Kolor tła: #393e56
Margines niestandardowy (komputer): 10% lewy, -10% prawy
Margines niestandardowy (tablet): 0% lewy, 0% prawy
Zaokrąglone rogi: 50px na górze po lewej, 50px na dole po prawej

W przypadku piątej notki po prostu skopiuj zaokrąglone rogi z czwartej notki i wklej je.

Otóż ​​to! Sprawdźmy ostateczny projekt.

Więcej inspiracji w stylu Blurb

Jeśli chcesz poznać więcej zabawnych projektów modułów z notatkami, sprawdź poniższe linki:

• W notatkach można używać asymetrycznie zakrzywionych teł.
• Możesz obramować swoje moduły notatek kreatywnymi projektami, korzystając z przegródek na sekcje.
• Możesz stworzyć własny kształt obrazu tła, aby zbudować geometryczny układ siatki.
• Dowiedz się, jak łączyć ikony notatek, aby utworzyć wyśrodkowany element graficzny dla swojej sekcji we wpisie na jednostronnych cieniach.
• I nie zapomnij zapoznać się z naszymi darmowymi gotowymi układami Divi dostępnymi w Divi Builder, aby uzyskać jeszcze bardziej inspirujące style notatek

Cóż, mam nadzieję, że te przykłady zainspirowały Cię do zobaczenia, co jest możliwe dzięki modułowi Divi Blurb! Niebo jest tutaj granicą. Ten moduł jest niezwykle popularny i prawdopodobnie będzie używany w prawie każdej witrynie, którą zbudujesz, więc dobrze jest mieć wszechstronny zestaw pomysłów, aby projekty nie wyglądały tak samo. Czasami sama zmiana kolorów i czcionek może nadać im zupełnie nowy wygląd, więc możesz wziąć te pomysły i dostosować je do swoich!

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!