Jak tworzyć stylizowane pola treści w Divi, aby uzyskać porady, informacje, ostrzeżenia i inne informacje (DARMOWE pobieranie)

Stylizowane pola treści zawierające wskazówki, ostrzeżenia i inne ważne informacje to przydatne zasoby dla każdej witryny internetowej lub bloga. Są skutecznym i wygodnym sposobem na zaprezentowanie ważnych treści z zachowaniem spójnego projektu, który docenią użytkownicy. Na przykład możesz potrzebować projektu pudełka treści, aby wyróżnić kluczową wskazówkę w samouczku lub ostrzec użytkowników o potencjalnym problemie.

W tym samouczku pokażemy, jak zbudować 3 projekty skrzynek treści w Divi. Te projekty pudełek zawartości można łatwo modyfikować za pomocą nowych ikon, schematów kolorów i/lub zawartości, aby dopasować je do wszelkich potrzeb. Gdy pokażemy Ci, jak zaprojektować pudełka, pokażemy Ci, jak możesz użyć globalnych ustawień Divi, aby ułatwić wdrożenie nowego, wstępnie zaprojektowanego pudełka z zawartością za pomocą zaledwie kilku kliknięć. Nie jest potrzebna żadna wtyczka!

Zacznijmy!

zapowiedź

Dzisiaj zamierzamy zbudować te 3 główne projekty pudełek z zawartością w Divi.

Dzięki tym trzem głównym projektom pudełek z zawartością będziesz mógł łatwo dostosowywać (takie jak ikony, kolor i tekst), aby tworzyć nieskończone projekty pudełek z zawartością na każdą okazję.

Oto 36 przykładów, które zamieszczamy w naszym DARMOWYM pobraniu poniżej.

Pobierz układ za DARMO

Aby położyć swoje ręce na wszystkich 36 projektach pudeł z treścią, musisz najpierw pobrać układ za pomocą poniższego przycisku. 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!

Aby zaimportować układ sekcji do Biblioteki Divi, przejdź do Biblioteki Divi.

Kliknij przycisk Importuj.

W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

Po zakończeniu układ sekcji będzie dostępny w Divi Builder.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Buduj od podstaw”.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Tworzenie projektów skrzynek zawartości w Divi

Zanim zaczniemy projektować nasze pola zawartości, dodajmy nowy jednokolumnowy wiersz do sekcji domyślnej w Divi Builder.

Projekt pudełka na zawartość #1

Aby utworzyć pierwsze pole treści, dodaj do kolumny moduł notki.

Na karcie treści zaktualizuj następujące informacje:

• Użyj ikony: TAK
• Ikona: zobacz zrzut ekranu
• Kolor tła: #ffffff
• Kolor lewego gradientu tła: #00529b
• Prawy gradient tła: #bde5f8
• Kierunek gradientu: 90 stopni
• Pozycja początkowa: 3em
• Pozycja końcowa: 0%

Na karcie projektu zaktualizuj styl ikony w następujący sposób:

• Kolor ikony: #ffffff
• Wyrównanie obrazu/ikony: do lewej
• Użyj rozmiaru czcionki ikony: TAK
• Rozmiar czcionki ikony: 2em

Następnie zaktualizuj style tekstu w następujący sposób:

• Kolor tekstu tytułu: #00529b
• Rozmiar tekstu tytułu: 1,5 em
• Wysokość wiersza tytułu: 2em
• Kolor tekstu ciała: #bde5f8
• Rozmiar tekstu ciała: 1 em
• Wysokość linii ciała: 2em

Po wprowadzeniu stylów tekstu zaktualizuj rozmiar i dopełnienie w następujący sposób:

• Szerokość treści: 100%
• Maksymalna szerokość: 700px
• Wyrównanie modułu: Środek
• Wypełnienie: 2em na górze, 2em na dole, 5em w lewo, 2em w prawo

Następnie dodaj subtelny box-shadow do notki w następujący sposób:

• Cień pudełka: patrz zrzut ekranu
• Pozycja pionowa cienia pudełka: 0px
• Siła rozmycia cieni w pudełku: 88px
• Siła rozprzestrzeniania się cieni w pudełku: -10px
• Kolor cienia: rgba(0,0,0,0.17)

W zakładce Zaawansowane nadamy ikonie notki niestandardowy styl, tak aby miała kształt koła z kolorami tła i obramowania, które pasują do używanego wcześniej lewego koloru gradientu tła. Zamierzamy również ustawić ikonę z pozycją bezwzględną, abyśmy mogli umieścić ją dokładnie tam, gdzie chcemy, bez zajmowania rzeczywistego miejsca w dokumencie.

Aby dodać styl niestandardowy, wklej następujący kod CSS w polu Blurb Image CSS:

position:absolute;
margin-bottom: 0px;
border: 0.5em solid #00529b !important;
border-radius:50%;
background: #00529b;
transform: translateX(-3.75em);

UWAGA: Zmieniając schemat kolorów pola treści (lub modułu notatek), będziemy również musieli zaktualizować kolory używane w CSS Blurb Image dla obramowania i tła ikony.

Sprawdźmy efekt końcowy.

Projekt pudełka na zawartość #2

Aby stworzyć nasz drugi projekt pudełka z treścią, skopiuj poprzedni moduł notki, aby szybko rozpocząć projekt, abyśmy mogli wprowadzić kilka modyfikacji.

W tym projekcie zamierzamy wyśrodkować w pionie ikonę po lewej stronie notki za pomocą właściwości siatki CSS.

Na karcie projektu zastąp kod CSS Blurb Image następującym:

margin-bottom: 0px;

Następnie dodaj następujący kod CSS do pola CSS Blurb Content:

display: grid;
align-items: center;
justify-content: center;
grid-template-columns: 5em auto;
grid-gap: 2em;

Szerokość lewej kolumny w siatce (tej, w której znajduje się ikona) jest ustawiona na 5em , a prawa kolumna zawierająca tytuł i treść jest ustawiona na auto . Musimy dopasować szerokość lewego koloru gradientu do kolumny siatki o szerokości 5 em, w której znajduje się ikona. Aby to zrobić, zaktualizuj następujące elementy:

• Pozycja początkowa: 5em

Na karcie projektu zaktualizuj wyrównanie i rozmiar ikon:

• Wyrównanie obrazu/ikony: środek
• Rozmiar czcionki ikony: 3em

Teraz nie potrzebujemy lewej wyściółki, więc wyjmij ją.

Teraz wszystko powinno być ładnie ustawione. Sprawdź efekt końcowy.

Projekt Pudełka Treści #3

Aby stworzyć trzeci projekt pudełka z treścią, skopiuj drugi moduł notki (pole treści), który właśnie skończyliśmy.

Po zduplikowaniu drugiej notki otwórz ustawienia duplikatów notek.

Na karcie Projekt zmień kolor ikony:

• Kolor ikony: rgba (255,255,255,0.3)

Następnie dodamy pionowy tekst etykiety nad ikoną, dodając niestandardowy kod CSS do pseudoelementu before (co zasadniczo pozwala na dołączenie dodatkowego projektu i/lub treści przed elementem modułu blurb).

Aby dodać etykietę, wklej następujący kod CSS w polu Przed CSS:

content: 'key tip';
bottom:50%;
font-size: 1em;
line-height: 1em;
letter-spacing: 0.4em;
position:absolute;
transform: rotatez(-90deg) translateX(-50%) translateY(3em) !important;
transform-origin: bottom left;
color: #fff;
font-family: inherit;
font-weight: bold;
text-transform: uppercase;
z-index:1;

Obrócimy również ikonę, aby dopasować ją do obróconego tekstu pionowego. Aby to zrobić, dodaj następujący kod CSS do pola CSS Blurb Image:

margin-bottom: 0px;
transform: rotateZ(-90deg);

Oto ostateczny wynik.

Aktualizacja projektu

Zaktualizuj rozmiar elementów pola treści, zmieniając rozmiar tekstu podstawowego

Każdy z zawartości pudełka jest zbudowany przy użyciu głównie jednostkę długości em (em jest w stosunku do korpusu głównego rozmiaru czcionki tego elementu). Z tego powodu pola treści będą się bezproblemowo skalować podczas dostosowywania rozmiaru tekstu podstawowego we wbudowanych ustawieniach projektowych Divi.

Zaktualizuj niestandardowe kolory CSS

W przypadku projektu pudełka treści nr 1 dodaliśmy niestandardowy kolor tła i obramowania ikony za pomocą niestandardowego kodu CSS. Pamiętaj, aby zaktualizować kolory używane we właściwościach obramowania i tła, aby pasowały do ​​schematu kolorów Twojego projektu.

Aktualizacja tekstu etykiety

W przypadku projektu trzeciego pola treści dodaliśmy etykietę z niestandardowym kodem CSS na pseudoelemencie before . Aby zaktualizować tekst, po prostu zmień wartość właściwości content w polu Przed CSS.

Możliwość ponownego wykorzystania skrzynek zawartości w Divi

Zapisz moduł w bibliotece Divi

Istnieją dwa główne sposoby na ponowne wykorzystanie modułów w Divi. Pierwszym sposobem jest zapisanie modułu (lub dowolnego elementu) w Bibliotece Divi.

Po zapisaniu elementu w bibliotece można go znaleźć w bibliotece Divi podczas dodawania nowego elementu do strony.

Użyj globalnych ustawień wstępnych

Drugim głównym sposobem uczynienia modułu wielokrotnego użytku w Divi jest utworzenie globalnego ustawienia wstępnego dla tego modułu. Po zapisaniu projektu modułu jako globalnego ustawienia wstępnego możesz łatwo dodać to globalne ustawienie wstępne do dowolnej innej instancji tego samego modułu.

W takim przypadku możemy otworzyć ustawienia dla każdego z naszych pól treści (lub modułów notatek) i utworzyć nowe globalne ustawienie wstępne dla każdego z nich. Aby to zrobić, otwórz ustawienia modułu Blurb i kliknij opcję ustawień wstępnych u góry. Następnie zamień ustawienia modułu w nowe ustawienie z niestandardowych stylów.

Nazwij nowe ustawienie, jak chcesz i zapisz je.

Powtórz te kroki dla każdego ustawienia wstępnego modułu notatek, które chcesz utworzyć.

Aby w przyszłości utworzyć więcej skrzynek treści, po prostu dodaj nowy moduł notki i wybierz ikonę, której chcesz użyć. Następnie aktywuj dowolne z przesłanych ustawień wstępnych, klikając listę rozwijaną ustawień wstępnych u góry i wybierając żądane ustawienie wstępne.

Ostateczne rezultaty

Oto ostatnie spojrzenie na 3 główne projekty pudeł z zawartością, które zbudowaliśmy.

A oto 36 projektów, które będziesz mógł wykonać za pomocą kilku łatwych dostosowań, które dołączamy do naszego DARMOWEGO pobrania powyżej.

Końcowe przemyślenia

Stworzone przez nas stylizowane pola treści mogą być przydatnym zasobem projektowym dla dowolnej witryny internetowej lub bloga. Możesz skorzystać z zaawansowanych opcji projektowania w Divi, aby dostosować pola treści do dowolnego projektu. Dodatkowo, dzięki możliwości zapisywania i przesyłania ich do biblioteki Divi i / lub tworzenia globalnych ustawień wstępnych, będziesz mógł wdrażać te pola zawartości w dowolnym momencie za pomocą zaledwie kilku kliknięć. Miejmy nadzieję, że przydadzą się.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!