Jak stworzyć piękną sekcję bohaterów dla swojej osobistej strony internetowej z Divi

Tworzenie osobistej strony internetowej jest zarówno zabawne, jak i trudne. Chcesz, aby Twoja strona internetowa wyglądała wystarczająco angażująco i osobowo, aby opowiedzieć swoją historię. A jednocześnie chcesz mieć piękną i autentyczną stronę internetową, która pokazuje, że wiesz, co robisz.

Aby pomóc Ci w kreatywnym procesie tworzenia takiej osobistej strony internetowej, stworzyliśmy piękną sekcję bohaterów, która z pewnością wyróżni Twoją witrynę. W tym poście pokażemy Ci krok po kroku, jak utworzyć ten wynik, używając niczego poza wbudowanymi ustawieniami Divi dla każdego z kroków. Zanim zagłębimy się w samouczek, spójrzmy na wynik.

Wynik na pulpicie

Wynik na komputerze wygląda tak:

Wynik na urządzeniu mobilnym

A odwiedzający witrynę na urządzeniach mobilnych zobaczą następujący wynik:

Jak stworzyć piękną sekcję bohaterów dla swojej osobistej strony internetowej z Divi

Subskrybuj nasz kanał YouTube

Utwórz sekcję

Zacznij od utworzenia nowej strony w witrynie WordPress, włączając Divi Builder, przełączając się na Visual Builder i dodając do niego nową sekcję.

Tło gradientowe

Jedyną rzeczą, którą musisz zmienić w tej sekcji, jest tło. To tło będzie dotyczyć wszystkich wierszy, które dodamy w kolejnych krokach tego posta. Otwórz podkategorię Tło i dodaj do niej następujące tło gradientowe:

• Pierwszy kolor: #c2c6f3
• Drugi kolor: #cea5b9
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek
• Pozycja startowa: 45%
• Pozycja końcowa: 45%

Dodaj pierwszy wiersz

Następnie śmiało dodaj pierwszy wiersz do sekcji. Ten wiersz będzie zawierał tylko moduł tekstowy, który możesz zobaczyć u góry układu.

Struktura kolumny

Następnie wybierz strukturę kolumn z jedną kolumną.

Rozmiary

Przejdź do karty Projekt w ustawieniach wiersza i użyj następujących ustawień dla podkategorii Rozmiar:

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Moduł tekstowy

Jak wspomniano wcześniej, ten wiersz będzie wymagał tylko modułu tekstowego.

Ustawienia tekstu

Po wprowadzeniu tekstu, który ma się pojawiać na karcie Treść, przejdź do karty Projekt i wprowadź następujące ustawienia w podkategorii Tekst:

• Czcionka tekstu: Arizona
• Grubość czcionki tekstu: Regularna
• Rozmiar tekstu: 150 (komputer), 80 (tablet), 70 (telefon)
• Kolor tekstu: rgba (255,255,255,0.39)
• Orientacja tekstu: Środek

Dodaj drugi wiersz

Po wypełnieniu pierwszego wiersza dodaj drugi wiersz do tej samej sekcji.

Struktura kolumny

Podobnie jak poprzedni wiersz, ten wiersz również będzie miał tylko jedną kolumnę.

Zdjęcie w tle

Otwórz ustawienia wiersza i dodaj osobisty obraz, którego chcesz użyć jako obrazu tła dla pierwszej kolumny. Upewnij się, że pozycja obrazu jest również ustawiona na „Centrum”.

Rozmiary

Następnie otwórz podkategorię Sizing i wprowadź następujące zmiany:

• Użyj niestandardowej szerokości: Tak
• Szerokość niestandardowa: 557px

Rozstaw

Następnie użyj „0px” jako dopełnienia górnego, dolnego, prawego i lewego wiersza.

Cień Pudełka

Na koniec zastosuj następujący Box Shadow:

• Pozycja pozioma cienia pudełka: 0px
• Pozycja pionowa cienia pudełka: 2px
• Siła rozmycia cieni w pudełku: 53px
• Siła rozprzestrzeniania się cieni w pudełku: 10px
• Kolor cienia: rgba(0,0,0,0.3)
• Pozycja cienia: cień zewnętrzny

Moduł tekstowy

Po zakończeniu ustawień wiersza dodaj do kolumny moduł tekstowy.

Kolor tła

Po pierwsze, ten moduł tekstowy będzie wymagał koloru tła w kolorze 'rgba(0,0,0,0.66)'.

Ustawienia tekstu

Następnie przejdź do karty Projekt i wprowadź następujące zmiany w podkategorii Tekst:

• Czcionka tekstu: Andika
• Grubość czcionki tekstu: pogrubiona
• Styl czcionki tekstu: wielkie litery
• Rozmiar tekstu: 78px (komputer), 70px (tablet), 50px (telefon)
• Kolor tekstu: #c2c6f3
• Wysokość linii tekstu: 1em
• Orientacja tekstu: Środek

Granica

Następnie otwórz podkategorię Border i użyj następującego obramowania:

• Użyj obramowania: tak
• Kolor obramowania: #c2c6f3
• Szerokość obramowania: 8px
• Styl obramowania: Solidny

Rozstaw

Idąc dalej, dodaj następujący margines i dopełnienie:

• Margines górny, prawy, dolny i lewy: 50px
• Górna wyściółka: 200px
• Dolna wyściółka: 200px

Cień Pudełka

Na koniec użyj następującego modułu Box Shadow to the Text:

• Pozycja pozioma cienia pudełka: 0px
• Pozycja pionowa cienia pudełka: 0px
• Siła rozmycia cieni w pudełku: 0px
• Siła rozprzestrzeniania się cieni w pudełku: 50px
• Kolor cienia: rgba (206.165.185,0.41)
• Pozycja cienia pudełka: cień zewnętrzny

Dodaj trzeci wiersz

Jak wspomniano wcześniej, w tym samouczku używamy tylko jednej sekcji. Powodem tego jest to, że chcemy, aby gradientowe tło sekcji było rozłożone na wszystkie udostępniane treści. Śmiało i dodaj nowy wiersz.

Struktura kolumny

Wybierz dwie kolumny dla tego wiersza.

Rozmiary

Następnie włącz opcję „Użyj niestandardowej szerokości” i zastosuj szerokość „663px”.

Rozstaw

Na koniec dodaj górny i dolny margines „50px”.

Pierwszy moduł tekstowy

Dodaj pierwszy moduł tekstowy do pierwszej kolumny wiersza.

Ustawienia tekstu

Następnie przejdź do zakładki Projekt, użyj „Andika” jako czcionki tekstu i „Zwykły” jako grubość czcionki tekstu.

Klonuj moduł tekstowy i umieść go w drugiej kolumnie

Moduł tekstowy w drugiej kolumnie ma dokładnie te same ustawienia, więc sklonuj moduł tekstowy i umieść go w drugiej kolumnie.

Dodaj czwarty rząd

Pozostał jeszcze jeden wiersz do dodania do sekcji przed zakończeniem projektowania.

Struktura kolumny

Ten nowy wiersz również ma dwie kolumny.

Rozmiary

Otwórz Ustawienia wiersza i wprowadź następujące ustawienia dla podkategorii Rozmiar:

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Następnie dodaj górną wyściółkę o wielkości 20 pikseli.

Moduł pierwszego obrazu

Śmiało i dodaj pierwszy moduł obrazu do pierwszej kolumny tego ostatniego wiersza.

Cień Pudełka

I dodaj do niego następujący Box Shadow:

• Pozycja pozioma cienia pudełka: -6px
• Pozycja pionowa cienia pudełka: 2px
• Siła rozmycia cieni w pudełku: 53px
• Siła rozprzestrzeniania się cieni w pudełku: 10px
• Kolor cienia: rgba(0,0,0,0.3)
• Pozycja cienia pudełka: cień zewnętrzny

Klonuj moduł obrazu i umieść go w drugiej kolumnie

I na koniec sklonuj ten moduł obrazu i umieść go również w drugiej kolumnie, aby uzupełnić ten wiersz.

Wynik

Po wykonaniu wszystkich kroków, które dodaliśmy do tego posta, powinieneś być w stanie osiągnąć następujący wynik:

Na pulpicie

Na komórce

Końcowe przemyślenia

Możliwości, jakie masz z Divi, są nieograniczone. Możesz sprawić, by Twoja witryna wyglądała dokładnie tak, jak chcesz, korzystając z programu Visual Builder, który pokaże zmiany w czasie rzeczywistym. W szczególności w tym poście pokazaliśmy, jak można stworzyć piękną sekcję bohaterów na osobistą stronę internetową. Ten samouczek został wykonany przy użyciu niczego poza wbudowanymi opcjami Divi. Jeśli masz jakieś pytania lub sugestie; upewnij się, że zostawiłeś komentarz w sekcji komentarzy poniżej!

Pamiętaj, aby zapisać się do naszego biuletynu e-mail i kanału YouTube, aby nigdy nie przegapić ważnego ogłoszenia, przydatnej wskazówki lub gratisów Divi!