Jak zaprojektować unikalne wielokolumnowe sekcje bohaterów z sekcją specjalistyczną Divi?

We wszystkich trendach projektowych sposób, w jaki projektujesz sekcje bohaterów, pozostaje niezwykle ważny. Dzięki Divi możesz przyjąć różne podejścia i stworzyć sekcję bohaterów, która wyróżnia się i zachęca ludzi do przedłużenia pobytu na Twojej stronie. Aby pomóc Ci zainspirować się do nadchodzących projektów Divi, pokażemy Ci, jak zaprojektować unikalne wielokolumnowe sekcje bohaterów, korzystając tylko z wbudowanych opcji Divi. Wielokolumnowe sekcje bohaterów nie tylko świetnie wyglądają, ale także pomagają strategicznie umieścić więcej treści w sekcji bohaterów bez przytłaczania odwiedzających.

Weźmy się za to!

Zapowiedź

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

Pobierz układ wielokolumnowej sekcji bohatera ZA DARMO

Aby położyć swoje ręce na wielokolumnowym układzie sekcji bohaterów, musisz najpierw pobrać go 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ć!

Dodaj nową sekcję specjalistyczną

Struktura kolumny

Aby stworzyć bezproblemową, wielokolumnową sekcję bohatera, użyjemy jednej z sekcji specjalnych Divi, do których masz dostęp w programie Visual Builder. Wybranie sekcji specjalnej pozwala lepiej uchwycić strukturę siatki, którą wybierasz, gdy projektujesz wielokolumnową sekcję bohatera. W tym konkretnym przykładzie wybieramy następującą strukturę kolumn:

Kolor tła

Otwórz ustawienia sekcji i dodaj biały kolor tła.

• Kolor tła: #ffffff

Rozmiary

Upewniamy się, że między kolumnami sekcji nie ma przerwy, zmieniając ustawienia rozmiaru.

• Wyrównaj wysokości kolumn: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%
• Szerokość wewnętrzna: 100%
• Maksymalna szerokość wewnętrzna: 100%

Rozstaw

Usuwamy również wszystkie domyślne górne i dolne dopełnienie wiersza i kolumn.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px
• Górna wyściółka kolumny 1: 0px
• Dolna wyściółka kolumny 1: 0px
• Górna wyściółka kolumny 2: 0px
• Dolna wyściółka kolumny 2: 0px
• Kolumna 3 Górna wyściółka: 0px
• Dolna wyściółka kolumny 3: 0px

Dodaj wiersz nr 1

Struktura kolumny

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

Rozstaw

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i usuń wszystkie domyślne górne i dolne dopełnienie.

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

Dodaj moduł tekstowy do kolumny

Dodaj akapit i treść H1

Czas zacząć dodawać moduły! Dodaj nowy moduł tekstowy z wybranymi paragrafami i treścią H1.

Ustawienia tekstu

Przejdź do zakładki projektu i zmień ustawienia tekstu.

• Czcionka tekstu: Otwórz Sans
• Rozmiar tekstu: 0,9vw (komputer), 1,6vw (tablet), 2,2vw (telefon)

Ustawienia tekstu H1

Zmodyfikuj również ustawienia tekstu H1.

• Czcionka nagłówka: Open Sans
• Grubość czcionki nagłówka: pół pogrubiona
• Styl czcionki nagłówka: wielkie litery
• Kolor tekstu nagłówka: #000000
• Rozmiar tekstu nagłówka: 4vw
• Wysokość linii nagłówka: 1,1 em

Rozstaw

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

• Górna wyściółka: 10.8vw
• Lewa wyściółka: 4vw
• Prawa wyściółka: 4vw

Dodaj wiersz nr 2

Struktura kolumny

Drugi wiersz, którego potrzebujemy w pierwszej kolumnie sekcji, wykorzystuje następującą strukturę kolumn:

Rozstaw

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmodyfikuj wartości dopełnienia.

• Górna wyściółka: 3vw
• Lewa wyściółka: 4vw
• Prawa wyściółka: 4vw

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość H3

Gdy skończysz z ustawieniami wiersza, możesz dodać nowy moduł tekstowy do pierwszej kolumny. Wprowadź wybrane przez siebie treści H3.

Ustawienia tekstu H3

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

• Czcionka nagłówka 3: Otwórz Sans
• Grubość czcionki nagłówka 3: pół pogrubiona
• Styl czcionki nagłówka 3: Wielkie litery
• Kolor tekstu nagłówka 3: #000000
• Rozmiar tekstu nagłówka 3: 1.5vw (komputer), 2vw (tablet), 2.5vw (telefon)

Rozstaw

Kontynuuj, dodając górny margines na telefon.

• Górny margines: 2vw (tylko telefon)

Dodaj moduł rozdzielacza do kolumny 1

Widoczność

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

• Pokaż dzielnik: tak

Linia

Następnie zmień kolor linii.

• Kolor linii: #000000

Rozstaw

Dodaj kilka niestandardowych wartości marginesów, aby zrobić miejsce wokół przegrody.

• Górny margines: 2vw
• Dolny margines: 2vw
• Prawy margines: 2vw

Dodaj moduł tekstowy #2 do kolumny 1

Dodaj zawartość

Następnym i ostatnim modułem, którego potrzebujemy w tej kolumnie, jest kolejny moduł tekstowy. Wprowadź dowolną treść akapitu.

Ustawienia tekstu

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

• Czcionka tekstu: Otwórz Sans
• Rozmiar tekstu: 0,6vw (komputer), 1,1vw (tablet), 2vw (telefon)
• Wysokość linii tekstu: 2em

Rozstaw

Dodaj również dolną i prawą wyściółkę.

• Margines dolny: 5vw (tylko telefon)
• Prawy margines: 2vw

Sklonuj wszystkie moduły w kolumnie 1 dwukrotnie i umieść duplikaty w pozostałych kolumnach

Po ukończeniu wszystkich modułów w kolumnie 1 możesz sklonować każdy z nich dwukrotnie. Umieść duplikaty w dwóch pozostałych kolumnach wiersza.

Zmień zawartość

Upewnij się, że zmieniłeś całą zawartość w modułach tekstowych.

Dodaj wiersz nr 3

Struktura kolumny

Następny i ostatni wiersz, którego potrzebujemy w pierwszej kolumnie sekcji, wykorzystuje następującą strukturę kolumn:

Rozstaw

Otwórz ustawienia wiersza i zmień wartości odstępów.

• Górny margines: 2vw
• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość

Kontynuuj, dodając moduł tekstowy do pierwszej kolumny z wybraną kopią CTA.

Dodaj link

Dodaj również link do całego modułu.

Kolor tła

Zmieniamy również kolor tła modułu tekstowego.

• Kolor tła: #000000

Ustawienia tekstu

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

• Czcionka tekstu: Otwórz Sans
• Grubość czcionki tekstu: Ultra Bold
• Styl czcionki tekstu: wielkie litery
• Wyrównanie tekstu: do środka
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 1vw (komputer), 1,7vw (tablet), 2,5vw (telefon)

Rozstaw

I stwórz przestrzeń wokół modułu, używając niestandardowych wartości marginesów i dopełnienia.

• Górny margines: 4vw (komputer), 11vw (tablet), 0vw (telefon)
• Górna wyściółka: 4vw
• Dolna wyściółka: 4vw

Klonuj moduł tekstowy i umieść duplikat w kolumnie 2

Po wypełnieniu modułu tekstowego w kolumnie 1 możesz go sklonować i umieścić duplikat w drugiej kolumnie.

Zmień zawartość

Upewnij się, że zmieniłeś treść i link.

Zmień kolor tła

A także kolor tła.

• Kolor tła: #e5e5e5

Zmień kolor tekstu

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

• Kolor tekstu: #000000

Zmień odstępy

Na koniec upewnij się, że ustawienia odstępów zawierają tylko następujące wartości:

• Górna wyściółka: 4vw
• Dolna wyściółka: 4vw

Dodaj moduł obrazu do kolumny sekcji 2

Załaduj obrazek

Do następnej kolumny sekcji! Tutaj pierwszym modułem, którego będziemy potrzebować, jest moduł obrazu. Prześlij wybrany obraz lub użyj takiego, który znajdziesz w spakowanym folderze, który został udostępniony na początku tego posta.

Rozmiary

Przejdź do ustawień rozmiaru i upewnij się, że włączona jest opcja „Wymuś pełną szerokość”. Dzięki temu obraz zachowa swój rozmiar na wszystkich rozmiarach ekranu.

• Wymuś pełną szerokość: tak

Filtry

Następnie zmodyfikuj ustawienia filtrów.

• Nasycenie: 0%
• Jasność: 50%

Dodaj moduł tekstowy do kolumny sekcji 2

Dodaj akapit i treść H3

Drugim modułem, którego potrzebujemy w tej kolumnie, jest moduł tekstowy. Wprowadź wybrany paragraf i treść H3.

Kolor tła

Dodaj kolor tła do modułu.

• Kolor tła: #000000

Ustawienia tekstu

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

• Czcionka tekstu: Otwórz Sans
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 0,9vw (komputer), 1,6vw (tablet), 2,2vw (telefon)

Ustawienia tekstu H3

Zmodyfikuj również ustawienia tekstu H3.

• Czcionka nagłówka 3: Otwórz Sans
• Grubość czcionki nagłówka 3: pół pogrubiona
• Styl czcionki nagłówka 3: Wielkie litery
• Kolor tekstu nagłówka 3: #ffffff
• Rozmiar tekstu nagłówka 3: 1,5vw (komputer), 2,5vw (tablet), 3vw (telefon)

Rozstaw

I dodaj kilka niestandardowych wartości dopełnienia w ustawieniach odstępów.

• Górna wyściółka: 3vw
• Dolna wyściółka: 3vw
• Lewa wyściółka: 2vw
• Prawa wyściółka: 2vw

Sklonuj oba moduły i umieść duplikaty w kolumnie 3 sekcji (kolejność odwrócona)

Po ukończeniu obu modułów możesz je sklonować. Umieść duplikaty w pozostałej kolumnie sekcji w odwrotnej kolejności.

Zmień moduł tekstowy

Zmień kolor tła

Otwórz zduplikowany moduł tekstowy w trzeciej kolumnie sekcji i zmień kolor tła.

• Kolor tła: #ffffff

Zmień kolor tekstu

Następnie zmień kolor tekstu.

• Kolor tekstu: #000000

Zmień kolor tekstu H3

Wraz z kolorem tekstu H3.

• Kolor tekstu nagłówka 3: #000000

Zmień moduł obrazu

Zmień obraz

Następnie prześlij inny obraz do zduplikowanego modułu obrazu.

Zmień filtry

I zmień ustawienia filtrów.

• Nasycenie: 0%
• Jasność: 147%

Dodaj moduł rozdzielający do kolumny sekcji 2

Pozycja

Dodajemy również kilka przekształconych przegródek, aby dodać szczegółu do naszego projektu. Umieść pierwszy moduł rozdzielający właśnie tutaj:

Widoczność

Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Linia

Następnie dodaj kolor linii.

• Kolor linii: #ffffff

Przekształć Obróć

I przekształć dzielnik poziomy w pionowy, modyfikując lewą wartość obrotu transformacji.

• Lewo: 270 stopni

Przekształć Tłumacz

Zmień położenie modułu dzielnika, używając jednostki szerokości rzutni w ustawieniach translacji transformacji.

• Po prawej: -19vw (komputer stacjonarny)
• Dół: -11vw (komputer), -24vw (tablet)

Widoczność

I ukryj cały moduł na telefonie.

Dodaj moduł rozdzielający do kolumny sekcji 3

Pozycja

Tutaj należy dodać kolejny i ostatni moduł rozdzielacza:

Widoczność

Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Linia

Przejdź do zakładki projektu i zmień kolor linii.

• Kolor linii: #000000

Przekształć Obróć

Następnie przekształć przegrodę poziomą w pionową.

• Lewo: 270 stopni

Przekształć Tłumacz

Zmień położenie dzielnika za pomocą ustawień tłumaczenia transformacji.

• Po prawej: 2vw
• Dół: -11vw (komputer), -24vw (tablet)

Widoczność

Aby upewnić się, że dzielnik pojawia się na górze modułu obrazu pod nim, zwiększymy indeks Z w ustawieniach widoczności. Ukryjemy też cały moduł na telefonie.

• Indeks Z: 2

Zapowiedź

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

Końcowe przemyślenia

W tym poście pokazaliśmy, jak tworzyć piękne i unikalne wielokolumnowe sekcje bohaterów tylko z wbudowanymi opcjami Divi. To świetna technika, którą można wykorzystać na różnego rodzaju stronach internetowych. 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.