Tworzenie „karteczek samoprzylepnych” z rozwijaną zawartością za pomocą Divi

Dzięki wbudowanym opcjom Divi istnieje wiele sposobów na prezentowanie usług i/lub przetwarzanie etapów na Twojej stronie internetowej. Aby pomóc Ci się zainspirować, pokażemy Ci, jak tworzyć karteczki samoprzylepne z rozszerzalną zawartością, korzystając tylko z wbudowanych opcji Divi. To świetny sposób na udostępnianie dodatkowych treści, gdy tylko odwiedzający wywoła interakcję. Możesz użyć tego projektu na dowolnej stronie internetowej, nad którą pracujesz, a także będziesz mógł pobrać plik JSON za darmo!

Weźmy się za to!

Zapowiedź

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

Pulpit

mobilny

Pobierz układ karteczek samoprzylepnych ZA DARMO

Aby położyć ręce na darmowym układzie karteczek samoprzylepnych, najpierw musisz go 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!

Zacznijmy odtwarzać!

Subskrybuj nasz kanał YouTube

Dodaj nową zwykłą sekcję

Pierwszą rzeczą, którą musisz zrobić, to dodać nową zwykłą sekcję do strony, nad którą pracujesz.

Dodaj nowy wiersz

Struktura kolumny

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

Czas trwania przejścia

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza. Tworzymy natychmiastowe przejście, zmieniając czas trwania przejścia w zakładce Zaawansowane.

• Czas trwania przejścia: 0 ms

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość

Czas zacząć dodawać moduły! Dodaj nowy moduł tekstowy do pierwszej kolumny wiersza i wprowadź zawartość H2, która ma się pojawić w projekcie karteczki samoprzylepnej.

Kolor tła

Następnie przejdź do ustawień tła i odpowiednio zmień kolor tła:

• Kolor tła: #ffd800

Ustawienia tekstu H2

Przejdź do ustawień tekstu H2 i wprowadź tam również pewne zmiany:

• Czcionka nagłówka 2: Niezależny kwiat
• Nagłówek 2 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 2: #3a0cf2
• Rozmiar tekstu nagłówka 2: 40px

Rozstaw

Aby stworzyć wygląd i działanie karteczki samoprzylepnej, dodamy do modułu kilka niestandardowych wartości wypełnienia:

• Górna wyściółka: 150px
• Dolna wyściółka: 150px
• Lewa wyściółka: 20px
• Prawe wypełnienie: 20px

Granica

Dodajemy również górną ramkę, korzystając z następujących ustawień:

• Szerokość górnej krawędzi: 20px
• Kolor górnej krawędzi: #ffc300

Dodaj moduł rozdzielacza do kolumny 1

Widoczność

Następnym modułem, którego potrzebujemy w pierwszej kolumnie, jest moduł dzielnika. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Kolor

Następnie przejdź do zakładki projekt i zmień kolor przekładki.

• Kolor: #ffc300

Style

Zmodyfikuj również ustawienia stylów dzielnika.

• Styl dzielnika: przerywany

Rozmiary

I zmień też ustawienia rozmiaru.

• Waga dzielnika: 5px
• Wysokość: 0px

Rozstaw

Aby zrobić trochę miejsca między poprzednim a obecnym modułem, dodajemy górny margines.

• Górny margines: 150px

Przekształć Obróć

Jak widać na podglądzie tego posta, chcemy stworzyć pionową przegrodę zamiast poziomej. Aby to osiągnąć, zmienimy lewą wartość w ustawieniach obracania transformacji modułu dzielnika:

• Lewo: 270 stopni

Widoczność

Chcemy również upewnić się, że moduł dzielnika pojawi się poniżej modułu tekstowego. Aby to zrobić, zmniejszymy indeks z dzielnika w zakładce Zaawansowane.

• Indeks Z: -99

Dodaj moduł tekstowy #2 do kolumny 1

Dodaj symbol do pola zawartości

Następnym i ostatnim modułem, którego potrzebujemy w pierwszej kolumnie, jest kolejny moduł tekstowy. Dodaj znak „●” do pola treści.

Ustawienia tekstu

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

• Czcionka tekstu: Otwórz Sans
• Kolor tekstu: #3a0cf2
• Rozmiar tekstu: 100px
• Wysokość linii tekstu: 1em
• Orientacja tekstu: Środek

Rozstaw

Utwórz żądane nakładanie się, dodając następnie ujemny górny margines.

• Górny margines: -50px

Dodaj moduł tekstowy #3 do kolumny 2

Dodaj zawartość H3

Przejdźmy do drugiej kolumny. Tutaj pierwszym modułem, którego potrzebujemy, jest moduł tekstowy. Wprowadź wybrane przez siebie treści H3.

Ustawienia tekstu H3

Przejdź do zakładki projekt i odpowiednio zmień ustawienia tekstu H3:

• Czcionka nagłówka 3: kwiat niezależny
• Kolor tekstu nagłówka 3: #3a0cf2
• Rozmiar tekstu nagłówka 3: 30px

Rozstaw

Następnie dodaj niestandardowy górny margines:

• Margines górny: 400px (komputer), 200px (tablet), 150px (telefon)

Dodaj moduł tekstowy #4 do kolumny 2

Dodaj zawartość

Przejdźmy do następnego modułu, którym jest kolejny moduł tekstowy. Wprowadź dowolną treść akapitu.

Ustawienia tekstu

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

• Czcionka tekstu: Otwórz Sans
• Rozmiar tekstu: 13px
• Wysokość linii tekstu: 2em

Rozmiary

Następnie zmodyfikuj szerokość modułu.

• Szerokość: 78%

Rozstaw

I dodaj trochę górnego i dolnego marginesu.

• Górny margines: 10px
• Margines dolny: 50px

Dodaj moduł przycisku do kolumny 2

Dodaj kopię

Ostatnim modułem, którego potrzebujemy w drugiej kolumnie, jest moduł przycisku. Wprowadź wybraną kopię.

Ustawienia przycisków

Następnie przejdź do zakładki projektowania i stylizuj przycisk.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 20px
• Kolor tekstu przycisku: #3a0cf2
• Kolor tła przycisku: #ffd800
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 0px
• Czcionka przycisku: Abhaya Libre

Rozstaw

Dodaj również niestandardowe wartości dopełnienia.

• Górna wyściółka: 20px
• Dolna wyściółka: 20px
• Lewa wyściółka: 60px
• Prawe wypełnienie: 60px

Klonuj rząd dwa razy

Po zakończeniu dodawania wszystkich modułów możesz dwukrotnie sklonować wiersz.

Zmodyfikuj zduplikowany wiersz nr 1

Zmień kolor tła modułu tekstowego nr 1

Zmieniamy paletę kolorów obu duplikatów, zaczynając od pierwszego. Otwórz pierwszy moduł tekstowy w kolumnie 1 i zmień kolor tła.

• Kolor tła: #00ffee

Zmień kolor górnego obramowania modułu tekstowego nr 1

Zmodyfikuj również kolor górnej krawędzi.

• Kolor górnej krawędzi: #00e0c2

Zmień kolor dzielnika

Następnie użyj następującego kodu koloru przegrody:

• Kolor dzielnika: #00e0c2

Zmień kolor tła modułu przycisku

I zmień kolor tła przycisku.

• Kolor tła przycisku: #00ffee

Modyfikuj zduplikowany wiersz nr 2

Zmień kolor tła modułu tekstowego nr 1

Przejdź do drugiego zduplikowanego wiersza, otwórz pierwszy moduł tekstowy w kolumnie 1 i zmień kolor tła.

• Kolor tła: #42ff21

Zmień kolor górnego obramowania modułu tekstowego nr 1

Zmodyfikuj również kolor górnej krawędzi.

• Kolor górnej krawędzi: #1de524

Zmień kolor dzielnika

Następnie otwórz moduł rozdzielacza i użyj następującego koloru rozdzielacza:

• Kolor dzielnika: #1de524

Zmień kolor tła modułu przycisku

I na koniec zmień kolor tła przycisku:

• Kolor tła przycisku: #42ff21

Twórz rozwijaną zawartość

Dodaj domyślny rozmiar wiersza do wszystkich wierszy

Teraz, gdy dostosowaliśmy wszystkie wiersze w naszej sekcji, nadszedł czas na rozszerzenie zawartości. Aby to zrobić, otwórz każdy z wierszy i zastosuj następującą maksymalną wysokość:

• Maksymalna wysokość: 397px

Dodaj rozmiar wiersza Hover do wszystkich wierszy

Zmień maksymalną wysokość po najechaniu na „100%”. Dzięki temu rząd ponownie przyjmie swój początkowy rozmiar.

• Maksymalna wysokość: 100%

Zmień przepełnienie dla wszystkich wierszy

Upewnij się, że ukryłeś również przepełnienia każdego z wierszy i gotowe!

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Zapowiedź

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

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak tworzyć karteczki samoprzylepne z rozwijanymi notatkami, korzystając tylko z wbudowanych opcji Divi. To kreatywny i zabawny sposób na zaprezentowanie usług w Twojej witrynie. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.