Jak pięknie prezentować usługi na urządzeniach mobilnych za pomocą Divi (bezpłatne pobieranie!)

Jeśli skupiasz się na projektach zorientowanych na urządzenia mobilne, ten post może ci pomóc. Stworzyliśmy dwa piękne przykłady prezentacji usług, które świetnie wyglądają na mniejszych ekranach. Co więcej, zostały specjalnie zaprojektowane tak, aby wyglądały jak najlepiej na urządzeniach mobilnych, zachowując jednocześnie dobry wygląd na komputerze. W tym poście pokażemy Ci krok po kroku, jak odtworzyć je od podstaw. Mamy nadzieję, że ten samouczek zainspiruje Cię do uwolnienia kreatywności podczas projektowania sekcji usług dla dowolnej tworzonej witryny. Na końcu samouczka będzie można również pobrać pliki JSON obu sekcji.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, przyjrzyjmy się dwóm przykładom mobilnym, które odtworzymy.

Przykład 1

Przykład #2

Zacznijmy odtwarzać przykład #1

Subskrybuj nasz kanał YouTube

Dodaj nową sekcję

Tło gradientowe

Utwórz nową stronę i dodaj do niej zwykłą sekcję. Otwórz ustawienia sekcji i dodaj tło gradientowe.

• Kolor 1: #ff0f83
• Kolor 2: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: w lewo
• Pozycja startowa: 20%
• Pozycja końcowa: 20%

Dodaj wiersz nr 1

Struktura kolumny

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

Dodaj moduł tekstowy nr 1

Dodaj zawartość

Pierwszym modułem, którego będziemy potrzebować, jest moduł tekstowy. Dodaj zawartość do pola zawartości.

Ustawienia tekstu

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

• Czcionka tekstu: Poppins
• Grubość czcionki tekstu: Ciężka
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 20vw
• Wysokość linii tekstu: 1em

• Siła rozmycia cienia tekstu: 0,95 em
• Kolor cienia tekstu: rgba(0,0,0,0.13)
• Orientacja tekstu: Środek

Dodaj moduł tekstowy nr 2

Dodaj zawartość H2

Dodaj kolejny moduł tekstowy tuż pod poprzednim. Wprowadź wybrane przez siebie treści H2.

Ustawienia tekstu H2

Następnie przejdź do zakładki projekt i zmodyfikuj ustawienia tekstu H2.

• Czcionka nagłówka 2: Poppins
• Grubość czcionki nagłówka 2: pogrubiona
• Nagłówek 2 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 2: #000000
• Rozmiar tekstu nagłówka 2: 10vw (telefon i tablet), 10vw (komputer)

Rozstaw

Utwórz zakładkę między obydwoma modułami tekstowymi, używając pewnego ujemnego górnego marginesu.

• Górny margines: -12vw (telefon), -10vw (tablet), -8vw (komputer)

Dodaj wiersz nr 2

Struktura kolumny

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

Tło gradientowe

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i dodaj tło gradientowe.

• Kolor 1: #3239ff
• Kolor 2: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: w prawo
• Pozycja startowa: 30%
• Pozycja końcowa: 30%

Rozmiary

Przejdź do ustawień rozmiaru i pozwól wierszowi zająć całą szerokość ekranu.

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

Rozstaw

Dodaj też kilka wartości odstępów. Te wartości sprawią, że wszystko będzie dobrze wyglądać na wszystkich rozmiarach ekranu.

• Lewa wyściółka: 0vw (telefon i tablet), 15vw (komputer)
• Prawa wyściółka: 0vw (telefon i tablet), 15vw (komputer stacjonarny)

niestandardowe CSS

Umieszczamy również dwie kolumny tuż obok siebie, dodając jeden wiersz kodu CSS w zakładce Zaawansowane.

display: flex;

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość H3 i linków

Teraz możemy zacząć dodawać moduły! Dodaj moduł tekstowy do pierwszej kolumny z kopią H3 i linkiem.

Kolor tła

Następnie przejdź do ustawień tła modułu i dodaj kolor tła.

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

Ustawienia tekstu

Kontynuuj, zmieniając orientację tekstu w ustawieniach tekstu modułu.

• Orientacja tekstu: Środek

Ustawienia tekstu łącza

Zmodyfikuj również ustawienia tekstu linku.

• Czcionka łącza: Poppins
• Grubość czcionki Linke: pogrubiona
• Styl czcionki łącza: podkreślenie
• Kolor podkreślenia łącza: #000000
• Kolor tekstu łącza: #000000
• Rozmiar tekstu łącza: 3vw (telefon), 2vw (tablet), 1vw (komputer)

Ustawienia tekstu H3

Wraz z ustawieniami tekstu H3.

• Czcionka nagłówka 3: Poppins
• Grubość czcionki nagłówka 3: Ultra Light
• Kolor tekstu nagłówka 3: #000000
• Rozmiar tekstu nagłówka 3: 4vw (telefon), 3vw (tablet), 2vw (komputer)
• Nagłówek 3 Wysokość linii tekstu: 1,9 em dla kształtu koła lub 3 em dla owalnego

Rozstaw

Aby utworzyć kształt z tego modułu, dodamy kilka niestandardowych wartości marginesów i dopełnienia w ustawieniach odstępów.

• Lewy margines: 5vw
• Prawy margines: -5vw
• Górna wyściółka: 17vw (telefon), 20vw (tablet), 15vw (komputer stacjonarny)
• Dolna wyściółka: 17vw (telefon), 20vw (tablet), 15vw (komputer stacjonarny)

Granica

Zamieniamy kwadrat w okrąg, używając zaokrąglonych rogów, dodając „100vw” do każdego z rogów.

Cień Pudełka

Aby nadać głębi, dodamy subtelny cień pudełkowy.

• Siła rozmycia cieni w pudełku: 100px
• Kolor cienia: rgba(0,0,0,0.12)

Klonuj moduł tekstowy 4 razy

Teraz, gdy skończyliśmy modyfikować pierwszy moduł tekstowy, możemy śmiało sklonować go cztery razy. Umieść dwa duplikaty w drugiej kolumnie.

Modyfikuj Duplikat #1

Rozstaw

Kontynuuj, modyfikując ustawienia odstępów pierwszego duplikatu.

• Górny margines: 20vw
• Lewy margines: -5vw
• Prawy margines: 5vw

Modyfikuj duplikat #2

Kolor tła

Otwórz drugi duplikat i zmień kolor tła.

• Kolor tła: rgba (255,248,209,0.92)

Rozstaw

Zmodyfikuj również ustawienia odstępów.

• Górny margines: -5vw

Zmodyfikuj duplikat #3

Kolor tła

Następnie otwórz trzeci duplikat i zmień kolor tła.

• Kolor tła: rgba (219 255 223,0,95)

Rozstaw

Następnie zmodyfikuj ustawienia odstępów.

• Górny margines: -5vw
• Lewy margines: -5vw
• Prawy margines: 5vw

Modyfikuj duplikat #4

Rozstaw

Otwórz również ostatni duplikat i dodaj ujemny górny margines, aby zakończyć projekt.

• Górny margines: -5vw

Zacznijmy odtwarzać przykład nr 2

Dodaj nową sekcję

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

Dodaj wiersz nr 1

Struktura kolumny

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

Dodaj moduł tekstowy

Dodaj zawartość H2

Pierwszym modułem, którego będziemy potrzebować, jest moduł tekstowy. Wprowadź wybrane przez siebie treści H2.

Ustawienia tekstu H2

Następnie przejdź do zakładki projekt i zmodyfikuj ustawienia tekstu H2.

• Czcionka nagłówka 2: Poppins
• Nagłówek 2 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 2: #333333
• Rozmiar tekstu nagłówka 2: 7vw (telefon i tablet), 4vw (komputer)

Dodaj moduł dzielnika

Widoczność

Dodaj moduł dzielnika tuż pod modułem tekstowym. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

Kolor

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

• Kolor: #333333

Rozmiary

Pobaw się również ustawieniami rozmiaru.

• Waga dzielnika: 5px
• Szerokość: 12%
• Wyrównanie modułu: Środek

Dodaj wiersz nr 2

Struktura kolumny

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

Kolor tła

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i dodaj biały kolor tła.

• Kolor tła: #ffffff

Rozmiary

Przejdź do ustawień rozmiaru i pozwól wierszowi zająć całą szerokość ekranu.

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

Rozstaw

Dodaj niestandardowe wartości marginesów i dopełnienia obok, aby zoptymalizować projekt dla wszystkich rozmiarów ekranu.

• Górny margines: 2vw
• Dolny margines: 2vw
• Górna wyściółka: 10vw (telefon i tablet), 5vw (komputer stacjonarny)
• Dolna wyściółka: 10vw (telefon i tablet), 5vw (komputer stacjonarny)
• Lewa wyściółka: 2vw (telefon i tablet), 20vw (komputer stacjonarny)
• Prawa wyściółka: 2vw (telefon i tablet), 20vw (komputer)

Cień Pudełka

Używamy również subtelnego cienia pudełkowego.

• Siła rozmycia cieni w pudełku: 50px
• Kolor cienia: rgba (0,0,0,0,07)

niestandardowe CSS

Na koniec umieść obie kolumny obok siebie, dodając pojedynczą linię kodu CSS do głównego elementu w zakładce Zaawansowane.

display: flex;

Dodaj moduł Blurb do kolumny 1

Wybierz ikonę

Teraz możemy zacząć dodawać moduły! Jedyny moduł, którego potrzebujemy w kolumnie 1, to moduł Blurb. Wybierz wybraną ikonę.

Tło gradientowe

Następnie dodaj tło gradientowe.

• Kolor 1: #7b28ef
• Kolor 2: #29b6e5
• Kierunek gradientu: 142 stopni

Ustawienia ikon

Następnie zmodyfikuj ustawienia ikon.

• Kolor ikony: #ffffff
• Umieszczenie ikon: góra
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 5vw (telefon i tablet), 4vw (komputer)

Rozmiary

I zmień ustawienia rozmiaru.

• Szerokość: 48% (telefon i tablet), 78% (komputer stacjonarny)

Rozstaw

Dodajemy również kilka niestandardowych wartości marginesów i dopełnienia, aby zoptymalizować projekt na wszystkich rozmiarach ekranu.

• Górny margines: 2vw (telefon)
• Górna wyściółka: 8,5vw (telefon), 9vw (tablet), 6vw (komputer stacjonarny)
• Dolna wyściółka: 3vw (telefon), 5vw (tablet), 4vw (komputer stacjonarny)

Granica

Następnie zamień moduł w okrąg, dodając „100vw” do każdego z rogów w ustawieniach obramowania.

Cień Pudełka

Dodajemy też cień pudełka.

• Pozycja pionowa cienia pudełka: 10px
• Siła rozprzestrzeniania się cieni w pudełku: 5px
• Kolor cienia: rgba (2 185 252 0,35)

Dodaj moduł tekstowy #1 do kolumny 2

Dodaj zawartość H3

Do drugiej kolumny! Pierwszym modułem, którego potrzebujemy, jest tytułowy moduł tekstowy. Dodaj trochę treści H3.

Ustawienia tekstu H3

Następnie przejdź do zakładki projekt i zmodyfikuj ustawienia tekstu H3.

• Czcionka nagłówka 3: Poppins
• Rozmiar tekstu nagłówka 3: 4vw (telefon), 3vw (tablet), 2vw (komputer)

Rozstaw

Następnie dodaj kilka niestandardowych wartości odstępów.

• Górny margines: 0vw (telefon), 3vw (tablet i komputer stacjonarny)
• Lewy margines: -20vw (telefon i tablet), 0vw (komputer)
• Prawy margines: 0vw
• Dolna wyściółka: 2vw (telefon i tablet), 1vw (komputer stacjonarny)
• Lewa wyściółka: 5vw (telefon i tablet), 2vw (komputer stacjonarny)

Granica

Wraz z lewą ramką.

• Szerokość lewej krawędzi: 5px
• Kolor lewej krawędzi: #f4f4f4
• Styl lewej obramowania: podwójny

Dodaj moduł rozdzielający do kolumny 2

Pokaż dzielnik

Drugim modułem, którego potrzebujemy, jest moduł rozdzielający. 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: #f4f4f4

Style

Zmień styl dzielnika w ustawieniach stylów.

• Styl dzielnika: podwójny

Rozmiary

Kontynuuj, modyfikując różne opcje w ustawieniach rozmiaru.

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

Rozstaw

Baw się też wartościami odstępów.

• Lewy margines: -20vw (telefon i tablet), 0vw (komputer)

Dodaj moduł tekstowy nr 2 do kolumny 2

Dodaj zawartość

Następnym modułem, którego potrzebujemy w drugiej kolumnie, jest kolejny moduł tekstowy. Dodaj wybraną treść treści.

Ustawienia tekstu

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

• Rozmiar tekstu: 2vw (telefon), 1,7vw (tablet), 0,8vw (komputer)
• Orientacja tekstu: w lewo

Rozstaw

Pobaw się również wartościami odstępów.

• Górny margines: 0vw
• Lewy margines: -20vw (telefon i tablet), 0vw (komputer)
• Prawy margines: 0vw
• Górna wyściółka: 3vw (telefon i tablet), 2vw (komputer stacjonarny)
• Lewa wyściółka: 5vw (telefon i tablet), 2vw (komputer stacjonarny)

Granica

I dodaj lewą ramkę.

• Szerokość lewej krawędzi: 5px
• Kolor lewej krawędzi: #f4f4f4
• Styl lewej obramowania: podwójny

Dodaj moduł przycisku do kolumny 2

Dodaj kopię

Następnym i ostatnim modułem, który potrzebujemy w drugiej kolumnie, jest moduł przycisku. Dodaj kopię.

Ustawienia przycisków

Następnie przejdź do zakładki design i zmień ustawienia przycisków.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 2.5vw (telefon), 2vw (tablet), 1vw (komputer stacjonarny)
• Kolor tekstu przycisku: #4f77e8
• Szerokość obramowania przycisku: 1px
• Kolor obramowania przycisku: #4f77e8

• Promień obramowania przycisku: 1px
• Czcionka przycisku: Poppins

Rozstaw

Zmodyfikuj również wartości odstępów.

• Górny margines: 4vw (telefon i tablet), 2vw (komputer)
• Lewy margines: -20vw (telefon i tablet), 0vw (komputer)

Klonuj rząd dwa razy

Teraz, gdy skończyliśmy modyfikować wiersz i wszystkie jego moduły, możemy go sklonować dwa razy.

Zmień ikony

Upewnij się, że zmieniłeś ikony dla obu modułów Blurb.

Zmień tło gradientowe

Zmodyfikuj również tła gradientowe.

• Kolor 1: #ff2885
• Kolor 2: #d6ac24

• Kolor 1: #70ff1e
• Kolor 2: #2699ff

Zmień kolory cieni pola

Dopasuj kolor cienia pudełka do nowego gradientowego tła.

• Kolor cienia: rgba (255,208,2,0,37)

• Kolor cienia: rgba (42,255,0,0,37)

Zmień obramowanie przycisku i kolory tekstu

Dokończ projekt, zmieniając obramowanie przycisku i kolory tekstu.

• Kolor tekstu przycisku: #e96c54
• Kolor obramowania przycisku: #e96c54

• Kolor tekstu przycisku: #4dcb93
• Kolor obramowania przycisku: #4dcb93

Pobierz sekcje usług mobilnych ZA DARMO

Aby położyć ręce na sekcjach bezpłatnych usług mobilnych, najpierw musisz je 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!

Zapowiedź

Teraz, gdy wykonaliśmy już wszystkie kroki, przyjrzyjmy się końcowemu wynikowi obu przykładów na urządzenia mobilne.

Przykład 1

Przykład #2

Końcowe przemyślenia

W tym poście pokazaliśmy Ci dwa kreatywne sposoby prezentowania usług na urządzeniach mobilnych tylko za pomocą wbudowanych opcji Divi. Mamy nadzieję, że to podejście zorientowane na urządzenia mobilne zainspiruje Cię również do kreatywności. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!