Jak tworzyć projekty dla urządzeń mobilnych z Divi

Wiele stron internetowych przyciąga mnóstwo odwiedzających z urządzeń mobilnych. Prowadzi to do pytania, czy Twoje projekty są wystarczająco zoptymalizowane pod kątem mniejszych rozmiarów ekranu. Dzięki Divi projekt stworzony z myślą o komputerach stacjonarnych również natychmiast reaguje. Ale to, że coś jest responsywne, nie oznacza, że ​​jest również zoptymalizowane.

Jeśli telefony komórkowe są głównym źródłem odwiedzających, rozpoczęcie projektowania i budowania z perspektywy mobilnej, a nie stacjonarnej, może naprawdę pomóc. W tym poście pokażemy Ci dokładnie, jak to zrobić. Po zapoznaniu się z kilkoma wskazówkami i poradami, o których należy pamiętać, odtworzymy również od podstaw przykład uwzględniający te wskazówki.

Weźmy się za to!

Zapowiedź

Jak wspomniano wcześniej, zaczniemy od omówienia kilku wskazówek i trików. Następnie odtworzymy od podstaw przykład, w którym wykorzystamy te wskazówki. Przyjrzyjmy się wynikowi.

mobilny

Pulpit

Zbliżać się

Subskrybuj nasz kanał YouTube

1. Przełącz się na widok mobilny zaraz po dodaniu nowej strony

Pierwszą rzeczą, którą musisz zrobić po dodaniu nowej strony, jest natychmiastowe przejście do widoku mobilnego. Umożliwi to stworzenie projektu zorientowanego na urządzenia mobilne i dokładnego.

2. Włącz opcje responsywne dla każdego elementu projektu i najpierw zmodyfikuj wartości mobilne

Gdy zaczniesz projektować dowolny projekt, zechcesz włączyć opcje responsywne dla elementów projektu. Obejmuje to między innymi rozmiar tekstu, dopełnienie i margines. Pierwsze wartości, które dodasz, będą wartościami mobilnymi (zamiast komputerowych), aby upewnić się, że projekt jest najpierw zoptymalizowany pod kątem urządzeń mobilnych.

3. W razie potrzeby usuń domyślną przestrzeń między kolumnami i ręcznie dodaj dopełnienie

Aby uzyskać więcej miejsca w poziomie, zaleca się również usunięcie całego domyślnego niestandardowego dopełnienia między kolumnami. W razie potrzeby zawsze możesz ręcznie dodać dopełnienie do każdej kolumny lub elementu projektu i sam wybrać, jaka odległość ma być.

4. Umieść 2 lub 3 kolumny obok siebie, aby utworzyć poziomy projekt

Responsywna struktura w Divi jest zorientowana pionowo. Oznacza to, że moduły i kolumny pojawiają się pod sobą. Wymaga to jednak większego przewijania w pionie. W zależności od projektu, nad którym pracujesz, stworzenie bardziej poziomego przepływu może naprawdę zrobić różnicę.

5. Modyfikuj widoki pulpitu i tabletu po drodze lub później

Nawet jeśli projektujesz z myślą o urządzeniach mobilnych, ważne jest, aby zachować porządek w innych widokach. Pomogą Ci w tym responsywne opcje zawarte w każdym elemencie projektu. Możesz zmienić te wartości później lub w trakcie procesu projektowania.

Zacznijmy odtwarzać przykład!

Dodaj nową sekcję

Otwórz nową stronę, przełącz się na widok mobilny i dodaj nową sekcję, aby rozpocząć.

Dodaj wiersz nr 1

Struktura kolumny

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

Dodaj moduł tekstowy do wiersza

Dodaj zawartość H2

Dodaj moduł tekstowy do kolumny w wierszu i wprowadź treść tytułu H2.

Ustawienia tekstu H2

Następnie przejdź do ustawień tekstu nagłówka i zmień wygląd tytułu.

• Czcionka nagłówka 2: Dydaktyka gotycka
• Nagłówek 2 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 2: #333333
• Rozmiar tekstu nagłówka 2: 5.5vw (telefon), 5vw (tablet), 2vw (komputer)

Dodaj moduł dzielnika do rzędu

Widoczność

Tuż pod dodanym modułem tekstowym, śmiało dodaj 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: #333333

Rozmiary

Zmodyfikuj również ustawienia rozmiaru.

• Szerokość: 48%
• Wyrównanie modułu: Środek

Dodaj wiersz nr 2

Struktura kolumny

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

Kolor tła

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

• Kolor tła: #ffe69e

Kolor tła kolumny 2

Dodaj kolor tła również do drugiej kolumny wiersza.

• Kolor tła kolumny 2: #ffd65b

Wyrównanie

Następnie zmień wyrównanie wierszy.

• Wyrównanie wierszy: do lewej

Rozmiary

Następnie otwórz ustawienia rozmiaru. Tutaj będziemy chcieli usunąć wszystkie domyślne odstępy między kolumnami. Używamy również niestandardowej szerokości kolumny, aby dobrze wyglądała na komputerze.

• Użyj niestandardowej szerokości: Tak
• Jednostka: PX
• Szerokość niestandardowa: 700px
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak

Rozstaw

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

• Górny margines: 5vw
• Dolny margines: 5vw
• Górna wyściółka: 0px
• Dolna wyściółka: 0px
• Kolumna 1 Górna wyściółka: 10vw (telefon), 8vw (tablet), 4vw (komputer stacjonarny)
• Kolumna 1 Dolna wyściółka: 10vw (telefon), 8vw (tablet), 4vw (komputer stacjonarny)

Granica

Dodaj również zaokrąglone rogi do rzędu.

• U góry po prawej: 10 pikseli
• Dolny prawy: 10px

Cień Pudełka

I nadaj mu również subtelny cień w pudełku.

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

niestandardowe CSS

Na koniec umieścimy kolumny obok siebie na mniejszych ekranach, aby upewnić się, że w pełni wykorzystujemy przestrzeń poziomą, którą dysponujemy. Przejdź do zakładki zaawansowane i dodaj pojedynczą linię kodu CSS do głównego elementu.

display: flex;

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość H3

Czas zacząć dodawać moduły! Dodaj tytułowy moduł tekstowy do pierwszej kolumny i wprowadź zawartość H3.

Ustawienia tekstu H3

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

• Czcionka nagłówka 3: Dydaktyka gotycka
• Grubość czcionki nagłówka 3: pogrubiona
• Nagłówek 3 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 3: #ee6f49
• Rozmiar tekstu nagłówka 3: 4vw (telefon), 3vw (tablet), 1,5vw (komputer)

Dodaj moduł rozdzielacza do kolumny 1

Widoczność

Następnie dodaj moduł rozdzielający. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Kolor

Następnie zmień kolor separatora.

• Kolor: #ffffff

Rozmiary

Wraz z ustawieniami rozmiaru.

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

Rozstaw

Dodaj również niestandardowy górny margines do modułu.

• Górny margines: 4vw (telefon), 2vw (tablet), 1,5vw (telefon)

Dodaj moduł przycisku do kolumny 1

Dodaj kopię

Następnym i ostatnim modułem potrzebnym w pierwszej kolumnie jest moduł przycisku. Wprowadź jakąś kopię.

Wyrównanie

Następnie przejdź do zakładki projekt i zmień wyrównanie przycisków.

• Wyrównanie przycisków: środek

Ustawienia przycisków

Zmodyfikuj również wygląd przycisku w ustawieniach przycisku.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 3vw (telefon), 2vw (tablet), 1,5vw (komputer stacjonarny)
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #ee6f49
• Szerokość obramowania przycisku: 0px
• Czcionka przycisku: Didact Gothic
• Waga czcionki: pogrubiona

Dodaj moduł obrazu do kolumny 2

Ikona przesyłania

Jedyny moduł, którego będziemy potrzebować w kolumnie 2, to moduł obrazu. Możesz użyć dowolnego wybranego obrazu, ale jeśli chcesz użyć dokładnie tych samych ikon, które zostały użyte w tym przykładzie, możesz przejść do pakietu układów sklepu z meblami i pobrać je na końcu posta.

Wyrównanie

Następnie przejdź do zakładki projekt i zmień wyrównanie obrazu.

• Wyrównanie obrazu: Środek

Klonuj rząd nr 2

Po zakończeniu modyfikowania wiersza możesz go sklonować.

Zmień kolor tła wiersza

Musimy wprowadzić pewne zmiany w tym duplikacie, zaczynając od koloru tła wiersza.

• Kolor tła: #8ee5cf

Usuń kolor tła kolumny 2

Kontynuuj, usuwając kolor tła kolumny 2.

Dodaj kolor tła kolumny 1

Zamiast tego dodajemy kolor tła do pierwszej kolumny.

• Kolor tła kolumny 1: #47e5bd

Zmień moduły w kolumnach

Zmieniamy również kolumny modułów.

Zmień ikonę w module obrazu

Następnie zmień ikonę w module obrazu.

Dodaj filtr do modułu obrazu

I dopasuj go do nowych kolorów tła wierszy i kolumn, zmieniając odcień w ustawieniach filtrów.

• Odcień: 65 stopni

Zmień wyrównanie wierszy

Następnie zmień wyrównanie wiersza.

• Wyrównanie wierszy: w prawo

Zmień granicę wiersza

Wraz z zaokrąglonymi rogami.

• U góry po lewej: 10 pikseli
• Dolny lewy: 10px

Zmień kolor tekstu modułu tekstowego w kolumnie 2

Używamy również innego koloru tekstu dla modułu tekstowego w kolumnie 2.

• Kolor tekstu nagłówka 3: #7b9710

Zmień kolor tła przycisku

Używamy tego samego koloru jako tła przycisku.

• Kolor tła przycisku: #7b9710

Klonuj oba rzędy

Teraz, gdy mamy obie strony rzędu, możemy je sklonować tyle razy, ile potrzebujemy, i ułożyć je w kolejności.

Modyfikuj Duplikat #1

Zmień kolor tła wiersza

Zaczniemy od zmiany koloru tła wiersza pierwszego duplikatu.

• Kolor tła: #ffc9cf

Zmień kolor kolumny

Następnie zmodyfikujemy również kolor tła kolumny 2.

• Kolor tła kolumny 2: #ffadb6

Zmień ikonę w module obrazu

Zmień ikonę w module obrazu na inną wybraną przez siebie.

Dodaj filtr do modułu obrazu

I zmień odcień w ustawieniach filtrów, aby dopasować go do nowych kolorów tła wierszy i kolumn.

• Odcień: 309 stopni

Zmień kolor tekstu

Zmieniamy też kolor tekstu.

• Kolor tekstu nagłówka 3: #f862b0

Zmień kolor tła przycisku

Używamy tego samego koloru jako tła przycisku.

• Kolor tła przycisku: #f862b0

Modyfikuj duplikat #2

Zmień kolor tła wiersza

Do następnego i ostatniego duplikatu! Zmień kolor tła wiersza.

• Kolor tła: #b2c4ff

Zmień kolor kolumny

Zrób to samo dla koloru tła kolumny 1.

• Kolor tła kolumny 1: #9eb4ff

Zmień ikonę w module obrazu

Następnie zmień używaną ikonę.

Dodaj filtr do modułu obrazu

Wraz z odcieniem w ustawieniach filtrów modułu obrazu.

• Odcień: 221 stopni

Zmień kolor tekstu

Następnie zmodyfikuj kolor tekstu modułu obrazu.

• Kolor tekstu nagłówka 3: #6287f9

Zmień kolor tła przycisku

I użyj tego samego koloru dla tła przycisku.

• Kolor tła przycisku: #6287f9

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi.

mobilny

Pulpit

Końcowe przemyślenia

Jeśli głównym źródłem odwiedzających są urządzenia mobilne, ważne jest, aby zoptymalizować wszystko pod kątem tego konkretnego rozmiaru ekranu. Dzięki Divi wszystko staje się natychmiast responsywne. Ale tylko dlatego, że coś jest responsywne, nie oznacza to, że jest zoptymalizowane również pod kątem tego konkretnego rozmiaru ekranu. Innym sposobem podejścia do projektowania dla telefonów komórkowych jest rozpoczęcie projektowania z perspektywy mobilnej. W tym poście podzieliliśmy się kilkoma wskazówkami i sztuczkami, jak to zrobić. Następnie odtworzyliśmy przykład, który spełnia te zasady i pozwala nam uzyskać oszałamiający wynik. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!