Jak zmaksymalizować mobilne rzutnie Divi za pomocą kopii obróconej?

Projektując stronę internetową, na samym początku masz ważny wybór: „Na jakie urządzenie mam zamiar zaprojektować w pierwszej kolejności?” Często odpowiedzią jest komputer stacjonarny. Ale to, że najpierw projektujesz na komputery, nie oznacza, że ​​Twój projekt na urządzenia mobilne nie może być tak dokładny. Korzystając na przykład z obróconej kopii, możesz zmaksymalizować mobilne rzutnie Divi i zmieścić więcej treści w mobilnych rzutniach bez przeciążania odwiedzających lub projektu. W tym samouczku pokażemy dokładnie, jak to zrobić w Divi. Będziesz mógł również pobrać plik JSON za darmo!

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 maksymalizacji mobilnych rzutni za DARMO

Aby położyć swoje ręce na darmowym, maksymalizującym układ mobilnych rzutni, najpierw musisz go pobrać za pomocą poniższego przycisku. 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ę

Rozstaw

Zacznij od dodania nowej sekcji do strony, nad którą pracujesz. Otwórz ustawienia sekcji i usuń wszystkie domyślne górne i dolne wyściółki.

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

Dodaj wiersz nr 1

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 w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Szerokość: 100%
• Maksymalna szerokość: 50% (komputer stacjonarny), 100% (tablet i telefon)
• Wyrównanie wierszy: do lewej

Rozstaw

Następnie usuń wszystkie domyślne górne i dolne wyściółki.

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

Główny element CSS

Aby upewnić się, że wszystkie kolumny pozostaną obok siebie, dodamy również jeden wiersz kodu CSS do głównego elementu wiersza.

display: flex;

Ustawienia kolumny 1

Animacja

Następnie otworzymy ustawienia kolumny 1 i dodamy następującą animację:

• Styl animacji: zanikanie

Główny element CSS

Zachowamy rozmiar kolumny na mniejszych ekranach, dodając następujący wiersz kodu CSS do głównego elementu kolumny:

width: 40% !important;

Ustawienia kolumny 2

Animacja

Następnie otworzymy ustawienia kolumny 2 i zastosujemy następującą animację:

• Styl animacji: zanikanie
• Opóźnienie animacji: 200 ms

Główny element CSS

Zachowujemy rozmiar kolumny na mniejszych ekranach, dodając następujący wiersz kodu CSS:

width: 60% !important;

Dodaj moduł obrazu do kolumny 2

Załaduj obrazek

Czas dodać moduły. Dodaj moduł obrazu do kolumny 2 i prześlij wybrany obraz portretowy.

Rozmiary

Przejdź do zakładki projektu modułu i wymuś pełną szerokość modułu.

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

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość H2

W kolumnie 1 pierwszym potrzebnym modułem jest moduł tekstowy zawierający zawartość H2.

Ustawienia tekstu H2

Przejdź do zakładki projektu modułu i zmodyfikuj ustawienia tekstu H2 w następujący sposób:

• Czcionka nagłówka 2: Montserrat
• Grubość czcionki nagłówka 2: Lekka
• Wyrównanie tekstu nagłówka 2: środek (tylko tablet i telefon)
• Kolor tekstu nagłówka 2: #000000
• Rozmiar tekstu nagłówka 2: 3vw (komputer), 50px (tablet), 40px (telefon)
• Nagłówek 2 Odstępy między literami: -3px

Rozmiary

Następnie zmodyfikujemy szerokość w ustawieniach rozmiaru.

• Szerokość: 89% (komputer stacjonarny), 150% (tablet i telefon)

Przekształć Obróć

Aby obrócić nasz moduł na mniejszych rozmiarach ekranu, użyjemy ustawień obracania transformacji.

• Po lewej: 270 stopni (tylko tablet i telefon)

Pozycja

Zmieniamy również położenie modułu na różnych rozmiarach ekranu.

• Pozycja: bezwzględna
• Lokalizacja: dolny środek (komputer), środek (tablet i telefon)
• Przesunięcie w pionie: 50px

Dodaj moduł rozdzielacza do kolumny 1

Widoczność

Następnym i ostatnim modułem, którego potrzebujemy w kolumnie 1, jest moduł dzielnika. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Linia

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

• Kolor linii: #000000

Rozmiary

Zmodyfikuj również ustawienia rozmiaru.

• Szerokość: 50% (komputer stacjonarny), 30% (tablet i telefon)

Pozycja

I uzupełnij ustawienia modułu, odpowiednio zmieniając jego położenie:

• Pozycja: bezwzględna
• Lokalizacja: środek po prawej

Dodaj wiersz nr 2

Struktura kolumny

W następnym wierszu użyj następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmodyfikuj ustawienia rozmiaru w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Szerokość: 100%
• Maksymalna szerokość: 50% (komputer stacjonarny), 100% (tablet i telefon)
• Wyrównanie wierszy: w prawo

Rozstaw

Następnie usuń wszystkie domyślne górne i dolne wyściółki.

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

Główny element CSS

Aby mieć pewność, że obie kolumny pozostaną obok siebie na mniejszych ekranach, dodamy jeden wiersz kodu CSS do głównego elementu wiersza.

display: flex;

Ustawienia kolumny 1

Tło gradientowe

Następnie otworzymy ustawienia kolumny 1 i zastosujemy tło gradientowe.

• Kolor 1: #1a9970
• Kolor 2: #000000
• Typ gradientu: liniowy
• Kierunek gradientu: 153 stopni

Animacja

W tej kolumnie również stosujemy opóźnioną animację.

• Styl animacji: zanikanie
• Opóźnienie animacji: 400 ms

Główny element CSS

Następnie upewnimy się, że zachowujemy rozmiar kolumny na mniejszych ekranach, dodając następujący wiersz kodu CSS do głównego elementu kolumny:

width: 25% !important;

Widoczność

Na koniec ukryjemy przepełnienia kolumny, aby upewnić się, że nic nie przekroczy kontenera.

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Ustawienia kolumny 2

Kolor tła

Przejdź do ustawień w kolumnie 2. Użyj do tego następującego koloru tła:

• Kolor tła: #f4f4f4

Animacja

Zastosuj również opóźnioną animację.

• Styl animacji: zanikanie
• Opóźnienie animacji: 600 ms

Główny element CSS

I uzupełnij ustawienia kolumny, dodając jeden wiersz kodu CSS do głównego elementu kolumny. Dzięki temu kolumna zachowa swój rozmiar na mniejszych ekranach.

width: 75% !important;

Dodaj moduł tekstowy do kolumny 2

Dodaj zawartość

Czas dodać moduły. Dodaj moduł tekstowy do kolumny 2 z wybraną zawartością opisu.

Ustawienia tekstu

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

• Czcionka tekstu: Otwórz Sans
• Rozmiar tekstu: 15px (komputer), 14px (tablet), 13px (telefon)
• Wysokość linii tekstu: 2,4 em

Rozmiary

Następnie zmienimy ustawienia rozmiaru.

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

Rozstaw

Uzupełnimy ustawienia modułu, dodając kilka niestandardowych wartości dopełnienia do ustawień odstępów.

• Górna wyściółka: 15%
• Dolna wyściółka: 15%

Dodaj moduł przycisku do kolumny 2

Dodaj kopię

Następnym i ostatnim modułem, którego potrzebujemy w kolumnie 2, jest moduł przycisku. Dodaj wybraną kopię.

Wyrównanie

Przejdź do zakładki projektu modułu i zmień wyrównanie przycisków.

• Wyrównanie przycisków: środek

Ustawienia przycisków

Nadaj styl przyciskowi dalej.

• Użyj niestandardowych stylów dla przycisku: Tak
• Kolor tekstu przycisku: #000000
• Kolor tła przycisku: #ffffff
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 0px

• Czcionka przycisku: Montserrat
• Pokaż ikonę przycisku: Tak
• Umieszczenie ikony przycisku: w lewo
• Pokaż tylko ikonę po najechaniu na przycisk: Nie

Rozstaw

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

• Górna wyściółka: 2%
• Dolna wyściółka: 2%
• Lewa wyściółka: 10%
• Prawa wyściółka: 10%

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość

W kolumnie 1 jedynym potrzebnym modułem jest moduł tekstowy. Dodaj następującą treść do pola treści: '— 01'.

Ustawienia tekstu

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

• Czcionka tekstu: Montserrat
• Grubość czcionki tekstu: Cienka
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 50px (komputer), 40px (tablet), 35px (telefon)
• Wyrównanie tekstu: do środka

Rozmiary

Następnie zwiększ szerokość modułu.

• Szerokość: 150%

Przekształć Tłumacz

Następnie przejdź do ustawień transformacji i zmień położenie modułu, modyfikując ustawienia tłumaczenia transformacji:

• Dół: -50% (tylko tablet i telefon)

Przekształć Obróć

Obracamy moduł również na mniejszych ekranach.

• Po lewej: 270 stopni (tylko tablet i telefon)

Pozycja

A my uzupełnimy ustawienia modułu, zmieniając położenie modułu w zakładce Zaawansowane.

• Pozycja: bezwzględna
• Lokalizacja: Centrum

Sekcja klonowania do ponownego wykorzystania

Po ukończeniu pierwszej sekcji możesz ją sklonować dowolną liczbę razy.

Zmień wszystkie kopie i linki

Upewnij się, że zmieniłeś wszystkie kopie i linki.

Zmień obraz

Wraz z obrazem portretowym i gotowe!

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 zmaksymalizować swoje mobilne rzutnie w Divi. Mówiąc dokładniej, użyliśmy obróconej kopii, aby zmieścić więcej treści w naszych oknach roboczych bez tworzenia przytłaczającego doświadczenia projektowego. Udało Ci się również pobrać plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, możesz zostawić 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.