Używanie obramowań modułu o niskim indeksie Z jako tła z Divi

Kiedy próbujesz stworzyć unikalny projekt swojej witryny, myślenie nieszablonowe może Ci pomóc. W poprzednich samouczkach często używaliśmy elementu projektu dla jego wbudowanych opcji. Nie tylko pomaga w utrzymaniu widoku tworzonego projektu w czasie rzeczywistym, ale także pomaga sprawić, by wyglądał dokładnie tak, jak chcesz na różnych rozmiarach ekranu. W dzisiejszym samouczku Divi pokażemy, jak używać ramek o niskim indeksie z modułu, aby stworzyć oszałamiający projekt, który można wykorzystać do wielu celów. 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.

Pulpit

mobilny

Pobierz układ obramowań modułu o niskim indeksie Z za DARMO

Aby położyć ręce na darmowym układzie ramek modułu z niskim indeksem Z, najpierw musisz go 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!

Subskrybuj nasz kanał YouTube

Zacznijmy odtwarzać!

Dodaj nową sekcję

Rozstaw

Zacznij od dodania nowej sekcji do strony, nad którą pracujesz. Otwórz ustawienia sekcji i usuń domyślną górną i dolną wyściółkę.

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

Przepełnienia

Przejdź do zakładki Zaawansowane i zmień przepełnienia.

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

Dodaj nowy wiersz

Struktura kolumny

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

Kolor tła

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

• Kolor tła: #f3f3e6

Rozmiary

Przejdź do zakładki projektu i odpowiednio zmień ustawienia rozmiaru:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Usuń domyślną górną i dolną wyściółkę następnego rzędu.

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

Ustawienia kolumny 1

Po skonfigurowaniu ustawień wiersza możesz otworzyć ustawienia pierwszej kolumny i wprowadzić pewne zmiany.

Tło gradientowe

Dodaj tło gradientowe, korzystając z następujących ustawień:

• Kolor 1: rgba(0,0,0,0)
• Kolor 2: #2e2d3c
• Kierunek gradientu: 90 stopni
• Pozycja startowa: 54%
• Pozycja końcowa: 54%

Cień Pudełka

Dodaj też cień do pudełka.

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

Dodaj moduł tekstowy nr 1 do kolumny 1

Pozostaw puste pole zawartości

Czas zacząć dodawać moduły! Wstaw moduł tekstowy do pierwszej kolumny i pozostaw puste pole zawartości. Będziemy używać tego modułu tylko do jego ustawień wbudowanych. Ze względu na swoją pozycję (pierwszy moduł w pierwszej kolumnie) moduł ma niski indeks z i pojawi się pod wszystkim, co nastąpi.

Rozmiary

Przejdź na kartę projektu i zmień szerokość na różnych rozmiarach ekranu.

• Szerokość: 24vw (komputer stacjonarny), 50vw (tablet i telefon)

Rozstaw

Następnie przejdź do ustawień odstępów i zmień wartości w następujący sposób:

• Górny margines: 15vw
• Lewy margines: 12vw (komputer stacjonarny), 30vw (tablet i telefon)
• Górna wyściółka: 32vw (komputer stacjonarny), 67vw (tablet), 60vw (telefon)

Granica

Uzupełnij projekt modułu, dodając obramowanie.

• Szerokość obramowania: 2vw (komputer), 4vw (tablet), 5vw (telefon)
• Kolor obramowania: #00ffb2

Dodaj moduł tekstowy #2 do kolumny 1

Dodaj zawartość

Dodaj kolejny moduł tekstowy do kolumny 1 i wprowadź wybraną treść.

Kolor tła

Dopasuj kolor tła do drugiego koloru gradientu kolumny.

• Kolor tła: #2e2d3c

Ustawienia tekstu

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

• Czcionka tekstu: Montserrat
• Grubość czcionki tekstu: pogrubiona
• Styl czcionki tekstu: wielkie litery
• Wyrównanie tekstu: do środka
• Kolor tekstu: #f3f3e6
• Rozmiar tekstu: 4vw
• Odstępy między literami tekstu: -0,2vw

Rozmiary

Zmień też szerokość.

• Szerokość: 27vw

Rozstaw

Następnie przejdź do ustawień odstępów i baw się wartościami na różnych rozmiarach ekranu.

• Górny margines: -23,2vw (komputer stacjonarny), -46vw (tablet i telefon)
• Lewy margines: 21,5vw (komputer stacjonarny), 64,5vw (tablet), 64vw (telefon)
• Górna wyściółka: 4vw
• Dolna wyściółka: 4vw
• Lewa wyściółka: 2vw
• Prawa wyściółka: 2vw

Przekształć Obróć

Uzupełnij ustawienia modułu, obracając moduł w ustawieniach transformacji.

• Lewo: 270 stopni

Dodaj moduł obrazu do kolumny

Załaduj obrazek

Następnym i ostatnim modułem, którego potrzebujemy w kolumnie 1, jest moduł obrazu. Prześlij wybrany przez siebie półprzezroczysty obraz.

Rozmiary

Przejdź do zakładki projektowania i włącz opcję „Wymuś pełną szerokość”. Pomoże nam to sprawić, że obraz będzie reagował na różne rozmiary ekranu.

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

Rozstaw

Następnie otwórz ustawienia odstępów i zmień wartości w następujący sposób:

• Pokaż przestrzeń pod obrazem: Nie
• Górny margines: -6vw
• Lewy margines: 3vw
• Prawa wyściółka: 22vw (komputer stacjonarny), 47vw (tablet i telefon)

Filtry

Zmniejszamy również nasycenie obrazu w ustawieniach filtrów.

• Nasycenie: 43%

Dodaj moduł tekstowy nr 2 do kolumny 2

Dodaj zawartość

Do następnej kolumny! Wprowadź wybraną treść.

Ustawienia tekstu

Przejdź do zakładki projektu i zmień ustawienia tekstu w następujący sposób:

• Czcionka tekstu: Montserrat
• Wyrównanie tekstu: wyjustuj
• Kolor tekstu: #2e2d3c
• Rozmiar tekstu: 0,9vw (komputer), 2,2vw (tablet), 2,5vw (telefon)
• Wysokość linii tekstu: 2,5 em

Rozstaw

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

• Górny margines: 10vw (komputer stacjonarny), 15vw (tablet i telefon)
• Lewa wyściółka: 8vw
• Prawa wyściółka: 8vw

Klonuj moduł tekstowy

Po ukończeniu modułu tekstowego sklonuj go raz.

Usuń górny margines

Usuń górny margines duplikatu.

Umieść nowy moduł tekstowy między obydwoma modułami tekstowymi w kolumnie 2

Dodaj zawartość

Dodaj kolejny moduł tekstowy pomiędzy obydwoma istniejącymi modułami tekstowymi w kolumnie i wprowadź wybraną treść.

Ustawienia tekstu

Zmień ustawienia tekstu w następujący sposób:

• Czcionka tekstu: Montserrat
• Grubość czcionki tekstu: pół pogrubiona
• Kolor tekstu: #2e2d3c
• Rozmiar tekstu: 2vw (komputer), 5vw (tablet i telefon)
• Wysokość linii tekstu: 1.4em

Rozstaw

Zmień również wartości dopełnienia.

• Górna wyściółka: 4vw (komputer stacjonarny), 8vw (tablet), 10vw (telefon)
• Dolna wyściółka: 4vw (komputer stacjonarny), 8vw (tablet), 10vw (telefon)
• Lewa wyściółka: 4vw
• Prawa wyściółka: 4vw

Dodaj moduł przycisku do kolumny 2

Dodaj kopię

Przejdź do następnego i ostatniego modułu przycisków. Wstaw wybraną kopię.

Ustawienia przycisków

Przejdź do zakładki projektu i zmień ustawienia przycisków.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 0,9vw (komputer stacjonarny), 2,5vw (tablet), 3vw (telefon)
• Kolor tekstu przycisku: #f3f3e6
• Kolor tła przycisku: #2e2d3c
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 0px
• Czcionka przycisku: Montserrat

Rozstaw

Uzupełnij projekt modułu przycisku, dodając kilka niestandardowych wartości odstępów i gotowe!

• Górny margines: 2vw (komputer stacjonarny), 8vw (tablet i telefon)
• Margines dolny: 10vw (komputer stacjonarny), 15vw (tablet i telefon)
• Lewy margines: 8vw
• Górna wyściółka: 1,5vw (komputer stacjonarny), 2,5vw (tablet), 3vw (telefon)
• Dolna wyściółka: 1,5vw (komputer stacjonarny), 2,5vw (tablet), 3vw (telefon)
• Lewa wyściółka: 4vw (komputer), 8vw (tablet), 10vw (telefon)
• Prawa wyściółka: 4vw (komputer), 8vw (tablet), 10vw (telefon)

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, jak kreatywnie wykorzystać ustawienia obramowania niskiego indeksu z pustego modułu, aby uzyskać oszałamiający efekt. W naszym projekcie uwzględniliśmy również odwróconą kopię. Ten samouczek pokazuje, jak wszechstronne są wbudowane opcje Divi i jak możesz dostosować ustawienia każdego elementu, aby pasował do różnych rozmiarów ekranu. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw 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.