5 sposobów na kreatywność z modułem Divi's Person

Wszystkie nowe aktualizacje funkcji Divi, które miały miejsce w ciągu ostatnich kilku miesięcy, niezaprzeczalnie rozszerzyły zakres możliwości, jakie masz podczas projektowania stron internetowych. W tym samouczku stworzyliśmy 5 różnych sposobów na kreatywność za pomocą modułu Divi Person bez użycia dodatkowego kodu CSS. Głównym celem tego posta jest zainspirowanie Cię przed rozpoczęciem kolejnego projektu Divi. Moduł Osoba jest często używany do dzielenia się dodatkowymi informacjami o członkach zespołu lub dzielenia się opiniami. Dzięki tym 5 różnym przykładom jesteś gotowy, aby poprawić wygląd swoich stron.

Weźmy się za to!

Zapowiedź

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

Pulpit

mobilny

Subskrybuj nasz kanał YouTube

Odtwórz przykład nr 1

Dodaj nową sekcję

Zacznijmy tworzyć pierwszy przykład! Otwórz nową lub istniejącą stronę i dodaj zwykłą sekcję.

Dodaj nowy wiersz

Struktura kolumny

Bez modyfikowania ustawień przekroju dodaj nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Otwórz ustawienia wiersza i wprowadź zmiany w ustawieniach rozmiaru.

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

Rozstaw

Następnie otwórz ustawienia odstępów i dodaj niestandardowe wartości dopełnienia.

• Górna wyściółka: 100px (komputer stacjonarny), 80px (tablet i telefon)
• Dolna wyściółka: 100px (komputer stacjonarny), 80px (tablet i telefon)
• Lewe wypełnienie: 100px (komputer), 30px (tablet), 25px (telefon)
• Prawe dopełnienie: 100px (komputer), 30px (tablet), 25px (telefon)

Dodaj moduł obrazu do kolumny 1

Załaduj obrazek

Czas zacząć dodawać moduły! Dodaj moduł obrazu do pierwszej kolumny i prześlij wybrany kwadratowy obraz.

Cień Pudełka

Kontynuuj, przechodząc do zakładki projektowania i stosując subtelny cień pudełkowy.

Filtry

Możesz także pobawić się ustawieniami filtrów, aby dodać efekt do swojego obrazu.

• Nasycenie: 40%
• Kontrast: 130%

Dodaj moduł osoby nr 1 do kolumny 2

Dodaj zawartość

Następnym modułem, którego będziemy potrzebować, jest moduł Person. Śmiało dodaj jeden do drugiej kolumny i wypełnij pola nazwy i pozycji.

Tło gradientowe

Dodaj gradientowe tło do tego modułu.

• Kolor 1: rgba (11,15,229,0.41)
• Kolor 2: rgba(45,237,255,0.87)
• Kierunek gradientu: 150 stopni

Ustawienia tekstu tytułu

Następnie zmień ustawienia tekstu tytułu na karcie projektu.

• Czcionka tytułu: Baloo
• Kolor tekstu tytułu: #ffffff
• Rozmiar tekstu tytułu: 20px

Ustawienia tekstu podstawowego

Zmodyfikuj również ustawienia tekstu podstawowego.

• Waga czcionki ciała: lekka
• Kolor tekstu ciała: #ffffff

Rozstaw

I dodaj niestandardowe wartości marginesów i dopełnienia w ustawieniach odstępów.

• Lewy margines: -4vw (komputer stacjonarny i tablet), 0vw (telefon)
• Prawy margines: 8vw (komputer stacjonarny i tablet), 0vw (telefon)
• Górna wyściółka: 25px
• Dolna wyściółka: 25px
• Lewa wyściółka: 20px

Granica

Do modułu dodajemy również subtelną lewą ramkę.

• Szerokość lewej krawędzi: 3px
• Kolor lewej krawędzi: #ffffff

Cień Pudełka

Wraz z cieniem w kształcie pudełka, który pomoże Ci stworzyć głębię na stronie.

• Siła rozmycia cieni w pudełku: 80px

Dodaj moduł osoby nr 2 do kolumny 2

Dodaj zawartość

Dodaj kolejny moduł Osoba tuż pod poprzednim. Używamy tego modułu, aby pokazać profile mediów społecznościowych i opis.

Ustawienia ikon

Przejdź do zakładki projekt i zmień kolor ikony w ustawieniach ikony.

• Kolor ikony: #50e8fe

Rozstaw

Na koniec otwórz ustawienia odstępów i dodaj niestandardowe wartości dopełnienia.

• Górna wyściółka: 30px
• Lewe wypełnienie: 30px (komputer i tablet), 0px (telefon)

Odtwórz przykład nr 2

Dodaj nową sekcję

Przejdźmy do następnego przykładu! Dodaj nową sekcję do swojej strony.

Dodaj nowy wiersz

Struktura kolumny

Dodaj nowy wiersz do tej sekcji, korzystając z następującej struktury kolumn.

Kolor tła kolumny 2

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i dodaj kolor tła kolumny 2.

• Kolor tła kolumny 2: #f4f4f4

Rozmiary

Następnie przejdź do zakładki projekt i wprowadź zmiany w ustawieniach rozmiaru.

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

Rozstaw

Dodaj również niestandardowe wartości dopełnienia w ustawieniach odstępów.

• Górna wyściółka: 100px (komputer stacjonarny), 80px (tablet i telefon)
• Dolna wyściółka: 100px (komputer stacjonarny), 80px (tablet i telefon)
• Lewe wypełnienie: 100px (komputer), 30px (tablet), 25px (telefon)
• Prawe dopełnienie: 100px (komputer), 30px (tablet), 25px (telefon)

Dodaj moduł obrazu do kolumny 1

Załaduj obrazek

Czas zacząć dodawać moduły! Pierwszym modułem, którego będziemy potrzebować, jest moduł obrazu w kolumnie 1. Prześlij wybrany obraz.

Cień Pudełka

Następnie dodaj do obrazu cień pudełka.

• Siła rozmycia cieni w pudełku: 160px

Filtry

Możesz także pobawić się ustawieniami filtrów.

• Nasycenie: 40%
• Kontrast: 130%

Dodaj moduł osoby nr 1 do kolumny 2

Dodaj zawartość

W drugiej kolumnie pierwszym modułem, którego będziemy potrzebować, jest moduł Person. Wypełnij pola nazwiska i stanowiska.

Kolor tła

Przejdź do ustawień tła i dodaj przezroczysty kolor tła.

• Kolor tła: rgba (255,255,255,0.7)

Ustawienia tekstu

Następnie zmień orientację tekstu w ustawieniach tekstu.

• Orientacja tekstu: Środek

Ustawienia tekstu tytułu

Zmień również ustawienia tekstu tytułu.

• Czcionka tytułu: Abril Fatface
• Kolor tekstu tytułu: #000000
• Rozmiar tekstu tytułu: 40px

Ustawienia tekstu podstawowego

Wraz z ustawieniami tekstu podstawowego.

• Waga czcionki ciała: lekka
• Kolor tekstu ciała: #000000
• Rozmiar tekstu ciała: 15px

Rozstaw

Tworzymy nakładanie się, używając ujemnego lewego marginesu w ustawieniach odstępów.

• Lewy margines: -21.64vw (komputer), -46.1vw (tablet), 0vw (telefon)
• Górna wyściółka: 30px
• Dolna wyściółka: 30px

Cień Pudełka

Stosujemy również subtelny cień pudełkowy.

• Siła rozmycia cieni w pudełku: 80px

Dodaj moduł osoby nr 2 do kolumny 2

Dodaj zawartość

Drugim modułem, którego potrzebujemy w kolumnie 2, jest kolejny moduł Osoba. Tutaj dodajemy linki do mediów społecznościowych i opis.

Ustawienia ikon

Kontynuuj, przechodząc do zakładki projektowania i zmieniając kolor ikony w ustawieniach ikony.

• Kolor ikony: #000000

Rozstaw

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

• Górny margines: 3vw
• Górna wyściółka: 30px
• Dolna wyściółka: 30px
• Lewa wyściółka: 30px
• Prawe wypełnienie: 30px

Odtwórz przykład nr 3

Dodaj nową sekcję

Przejdźmy do trzeciego przykładu! Dodaj nową sekcję do swojej strony.

Dodaj nowy wiersz

Struktura kolumny

Następnie dodaj nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Otwórz ustawienia wiersza i zmień ustawienia rozmiaru.

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

Rozstaw

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

• Górna wyściółka: 100px (komputer stacjonarny), 80px (tablet i telefon)
• Dolna wyściółka: 100px (komputer stacjonarny), 80px (tablet i telefon)
• Lewe wypełnienie: 100px (komputer), 30px (tablet), 25px (telefon)
• Prawe dopełnienie: 100px (komputer), 30px (tablet), 25px (telefon)

Dodaj moduł osoby nr 1 do kolumny 1

Dodaj zawartość

Czas zacząć dodawać moduły! Dodaj pierwszy moduł osoby do kolumny 1 i wypełnij pola nazwiska i stanowiska.

Kolor tła

Następnie dodaj kolor tła do modułu.

• Kolor tła: #ffffff

Ustawienia tekstu tytułu

Zmodyfikuj również ustawienia tekstu tytułu.

• Grubość czcionki tytułu: Ultra Bold
• Kolor tekstu tytułu: #000000
• Rozmiar tekstu tytułu: 40px
• Odstępy między literami tytułu: -4px

Ustawienia tekstu podstawowego

Zrób to samo dla ustawień tekstu podstawowego.

• Waga czcionki ciała: lekka
• Kolor tekstu ciała: #000000
• Rozmiar tekstu ciała: 15px

Rozstaw

Kontynuuj, przechodząc do ustawień odstępów i dodaj niestandardowe wartości marginesów i dopełnienia.

• Margines górny: 40px (komputer), 0px (tablet i telefon)
• Górna wyściółka: 30px
• Dolna wyściółka: 30px
• Lewa wyściółka: 30px
• Prawe wypełnienie: 30px

Granica

Dodaj „20px” również w lewym górnym rogu w ustawieniach obramowania.

Cień Pudełka

I nadaj modułowi kolorowy cień pudełka.

• Siła rozmycia cieni w pudełku: 140px
• Kolor cienia: rgba (31,15,255,0.66)

Dodaj moduł osoby nr 2 do kolumny 1

Dodaj zawartość

Przejdź do modułu drugiej osoby w kolumnie 1! Użyj tego modułu, aby wyświetlić linki do mediów społecznościowych i opis.

Kolor tła

Następnie przejdź do ustawień tła i dodaj biały kolor tła.

• Kolor tła: #ffffff

Ustawienia ikon

Zmień również kolor ikony.

• Kolor ikony: #000000

Rozstaw

Kontynuuj, dodając kilka niestandardowych wartości odstępów w ustawieniach odstępów.

Granica

I dodaj „20px” w lewym dolnym rogu.

Cień Pudełka

Na koniec dodaj cień do pudełka.

• Pozycja pionowa cienia pudełka: 50px
• Siła rozmycia cieni w pudełku: 140px
• Siła rozprzestrzeniania się cieni w pudełku: -10px
• Kolor cienia: rgba (2 219 219 0,26)

Dodaj moduł obrazu do kolumny 2

Załaduj obrazek

Następnym modułem, którego będziemy potrzebować, jest moduł obrazu. Śmiało dodaj jeden do drugiej kolumny i prześlij wybrany obraz.

Granica

Daj temu modułowi "20px" zaokrąglonych rogów w ustawieniach obramowania.

Cień Pudełka

I dodaj subtelny cień w pudełku.

Filtry

Ponownie możesz pobawić się ustawieniami filtrów, aby zmienić wygląd obrazu.

Odtwórz przykład nr 4

Dodaj nową sekcję

Przejdźmy do czwartego przykładu! Dodaj nową sekcję do swojej strony.

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmodyfikuj ustawienia rozmiaru.

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

Rozstaw

Zmień również ustawienia odstępów.

• Górna wyściółka: 100px (komputer stacjonarny), 80px (tablet i telefon)
• Dolna wyściółka: 100px (komputer stacjonarny), 80px (tablet i telefon)
• Lewe wypełnienie: 100px (komputer), 30px (tablet), 25px (telefon)
• Prawe dopełnienie: 100px (komputer), 30px (tablet), 25px (telefon)

Dodaj moduł Osoba do kolumny 1

Dodaj zawartość

Czas zacząć dodawać moduły! Dodaj moduł Osoba do kolumny 1 i wypełnij wszystkie pola.

Ustawienia ikon

Następnie przejdź do ustawień ikony i zmień kolor ikony.

• Kolor ikony: #000000

Ustawienia tekstu

Zmień orientację tekstu również w ustawieniach tekstu.

• Orientacja tekstu: Środek

Ustawienia tekstu tytułu

Następnie otwórz ustawienia tekstu tytułu i wprowadź zmiany.

• Grubość czcionki tytułu: Ultra Bold
• Kolor tekstu tytułu: #000000
• Rozmiar tekstu tytułu: 40px
• Odstępy między literami tytułu: -4px

Ustawienia tekstu podstawowego

Zmodyfikuj również ustawienia tekstu podstawowego.

• Waga czcionki ciała: lekka
• Kolor tekstu ciała: #000000
• Rozmiar tekstu ciała: 15px
• Wysokość linii ciała: 2em

Rozstaw

I utwórz kształt, używając niestandardowych wartości dopełnienia w ustawieniach odstępów.

• Górna wyściółka: 280px (komputer), 200px (tablet), 50px (telefon)
• Dolna wyściółka: 280px (komputer), 200px (tablet), 50px (telefon)
• Lewe wypełnienie: 200px (komputer), 150px (tablet), 20px (telefon)
• Prawe dopełnienie: 200px (komputer), 150px (tablet), 20px (telefon)

Granica

Utwórz okrąg, dodając „700px” do każdego z rogów w ustawieniach obramowania, a także dodaj subtelną ramkę.

• Szerokość obramowania: 1px
• Kolor obramowania: #333333

Dodaj moduł obrazu do kolumny 2

Załaduj obrazek

Kontynuuj, dodając moduł obrazu do drugiej kolumny i prześlij wybrany kwadratowy obraz.

Rozstaw

Zmodyfikuj ustawienia odstępów tego modułu.

• Górny margines: 7vw (komputer), -15vw (tablet), -5vw (telefon)
• Lewy margines: -5vw (komputer), 0vw (tablet i telefon)

Granica

Utwórz kształt koła z tego obrazu, dodając „1000px” do każdego z rogów modułu.

Cień Pudełka

Dodaj również subtelny cień w kształcie pudełka.

• Siła rozmycia cieni w pudełku: 160px
• Siła rozprzestrzeniania się cieni w pudełku: -10px

Filtry

I zakończ projekt, bawiąc się ustawieniami filtrów obrazu.

• Nasycenie: 0%
• Kontrast: 130%

Odtwórz przykład nr 5

Dodaj nową sekcję

Przejdźmy do następnego i ostatniego przykładu! Dodaj nową sekcję do swojej strony.

Dodaj nowy wiersz

Struktura kolumny

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

Kolumna 1 Tło gradientowe

Otwórz ustawienia wiersza i dodaj tło gradientowe kolumny 1.

• Kolor 1: #dddddd
• Kolor 2: #ffffff
• Kolumna 1 Kierunek gradientu: 90deg
• Pozycja początkowa kolumny 1: 40%
• Pozycja końcowa kolumny 1: 40%

Rozmiary

Następnie przejdź do ustawień rozmiaru i wprowadź zmiany.

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

Rozstaw

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

• Górna wyściółka: 100px (komputer stacjonarny), 80px (tablet i telefon)
• Dolna wyściółka: 100px (komputer stacjonarny), 80px (tablet i telefon)
• Lewe wypełnienie: 100px (komputer), 30px (tablet), 25px (telefon)
• Prawe dopełnienie: 100px (komputer), 30px (tablet), 25px (telefon)

Dodaj moduł Osoba do kolumny 1

Dodaj zawartość

Czas zacząć dodawać moduły! Dodaj moduł Osoba do kolumny 1 i wypełnij wszystkie pola.

Ustawienia ikon

Następnie zmień kolor ikony w ustawieniach ikony.

• Kolor ikony: #000000

Ustawienia tekstu

Zmień orientację tekstu również w ustawieniach tekstu.

• Orientacja tekstu: w prawo

Ustawienia tekstu tytułu

Następnie wprowadź zmiany w ustawieniach tekstu tytułu.

• Czcionka tytułu: Chenla
• Kolor tekstu tytułu: #000000
• Rozmiar tekstu tytułu: 50px
• Odstępy między literami tytułu: -1px

Ustawienia tekstu podstawowego

Zrób to samo dla ustawień tekstu podstawowego.

• Waga czcionki ciała: lekka
• Kolor tekstu ciała: #000000
• Rozmiar tekstu ciała: 15px
• Wysokość linii ciała: 2em

Rozstaw

Kontynuuj, dodając niestandardowe wartości dopełnienia do ustawień odstępów modułu.

• Górna wyściółka: 200px (komputer stacjonarny), 100px (tablet i telefon)
• Dolna wyściółka: 200px (komputer), 100px (tablet i telefon)
• Lewe wypełnienie: 500px (komputer), 250px (tablet), 50px (telefon)
• Prawe dopełnienie: 200px (komputer), 100px (tablet), 50px (telefon)

Granica

Na koniec dodaj obramowanie do modułu.

Dodaj moduł obrazu do kolumny 2

Załaduj obrazek

Następnym modułem, którego będziemy potrzebować, jest moduł obrazu w kolumnie 2. Śmiało i prześlij wybrany obraz w kwadracie.

Rozstaw

Następnie wprowadź zmiany w ustawieniach odstępów tego modułu.

• Górny margines: 7vw (komputer stacjonarny), -2vw (tablet i telefon)
• Lewy margines: -10vw (komputer stacjonarny), 0vw (tablet i telefon)

Cień Pudełka

Daj również modułowi obrazu cień pudełka.

• Siła rozmycia cieni w pudełku: 160px
• Siła rozprzestrzeniania się cieni w pudełku: -10px

Filtry

A na dodatek pobaw się ustawieniami filtrów.

• Nasycenie: 50%
• Kontrast: 130%

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 Ci 5 różnych sposobów na kreatywność z modułem Divi Person. Możesz użyć tych przykładów dla dowolnej tworzonej witryny internetowej i stworzyć własne alternatywne wersje, dostosowując ustawienia każdego elementu projektu. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!