Jak stworzyć nagłówek trybu dzielonego mieszania za pomocą Divi

Nie jest tajemnicą, że tryby mieszania mogą pomóc w zwróceniu większej uwagi na estetykę projektu, nad którym pracujesz. W przeszłości omówiliśmy wskazówki i triki dotyczące trybu mieszania, które pomogą Ci stworzyć wyjątkowe i wspaniałe projekty. Teraz, odkąd pojawiła się aktualizacja kolumny, jest kilka dodatkowych rzeczy, które możesz zrobić z tymi trybami mieszania. Jedną z tych rzeczy jest tworzenie nagłówka trybu dzielonego mieszania. W tym poście pokażemy, jak można osiągnąć oszałamiający efekt, łącząc tryby mieszania modułów i kolumn, kolory tła kolumn i ujemne marginesy. 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 sekcję bohaterów trybu Split Blend za DARMO

Aby położyć ręce na sekcji bohatera trybu darmowego mieszania, najpierw musisz ją 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

Dodaj nową zwykłą sekcję do strony, nad którą pracujesz, i usuń wszystkie domyślne górne i dolne dopełnienie.

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

Cień Pudełka

Przejdź do opcji cienia pudełkowego i dodaj subtelny cień pudełkowy.

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

Dodaj nowy wiersz

Struktura kolumny

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

Tło gradientowe

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zastosuj tło gradientowe. W następnym kroku tego posta połączymy tło gradientowe z obrazem tła za pomocą trybu mieszania.

• Kolor 1: #00cbff
• Kolor 2: #bf35ff
• Kierunek gradientu: 96 stopni

Zdjęcie w tle

Dodaj obraz tła do wiersza i używaj go w połączeniu z następującymi ustawieniami obrazu tła:

• Rozmiar obrazu tła: okładka
• Pozycja obrazu tła: środek
• Powtarzanie obrazu tła: bez powtórzeń
• Mieszanie obrazu tła: ekran

Rozmiary

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

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

Rozstaw

Usuń wszystkie domyślne górne i dolne wyściółki następnego rzędu. Dzięki temu kolor tła kolumny 2, który dodamy później w tym poście, będzie dotykał górnej i dolnej krawędzi kontenerów wierszy i sekcji.

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

Wyświetlacz

Aby upewnić się, że obie kolumny pojawiają się obok siebie na mniejszych ekranach, dodamy jeden wiersz kodu CSS do głównego elementu wiersza.

display: flex;

Ustawienia kolumny 2

Kolor tła

Po zakończeniu ogólnych ustawień wiersza przejdź dalej i otwórz ustawienia drugiej kolumny. Zacznij od dodania białego koloru tła.

• Kolor tła: #FFFFFF

Filtry

Przejdź do karty projektu i dodaj tryb mieszania do całej kolumny.

• Tryb mieszania: ekran

Dodaj moduł rozdzielacza do kolumny 1

Widoczność

Czas zacząć dodawać moduły! Jedyny moduł, którego potrzebujemy w pierwszej kolumnie, to moduł dzielnika. Ten moduł pomoże nam stworzyć miejsce w pierwszej kolumnie bez pojawiania się modułu. Upewnij się, że opcja dzielnika „Pokaż dzielnik” jest wyłączona.

• Pokaż dzielnik: Nie

Rozstaw

Przejdź do ustawień odstępów i dodaj trochę dolnego marginesu, aby utworzyć miejsce w pierwszej kolumnie.

• Dolny margines: 50vw

Dodaj moduł tekstowy #1 do kolumny 2

Dodaj nagłówek H1

Do drugiej kolumny! Tutaj zaczniemy od modułu tekstowego nagłówka. Wprowadź wybrane przez siebie treści H1.

Ustawienia tekstu H1

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

• Czcionka nagłówka: Poppins
• Grubość czcionki nagłówka: pogrubiona
• Kolor tekstu nagłówka: #FFFFFF
• Rozmiar tekstu nagłówka: 12vw
• Odstęp między literami nagłówka: -0,2vw

Rozstaw

Tworzymy również trochę miejsca wokół modułu i przesuwamy go w lewo, stosując kilka niestandardowych wartości marginesów. Ujemny lewy margines odgrywa ważną rolę w tworzeniu podzielonego trybu mieszania. Umożliwia to wyświetlenie części kopii poniżej pierwszej kolumny, która nie zawiera żadnego koloru tła.

• Górny margines: 18vw
• Dolny margines: 2vw
• Lewy margines: -27.3vw

Filtry

Teraz, w kolejnym kroku, wydarzy się magia! Łączymy tryb mieszania modułów i kolumn, aby umożliwić prześwitywanie tła wiersza. Upewnij się, że wybrałeś następujący tryb mieszania dla modułu tekstowego:

• Tryb mieszania: różnica

Dodaj moduł tekstowy nr 2 do kolumny 2

Dodaj zawartość

Do drugiego modułu! Dodaj wybrane przez siebie treści.

Ustawienia tekstu

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

• Czcionka tekstu: Poppins
• Wyrównanie tekstu: wyjustuj
• Kolor tekstu: #000000
• Rozmiar tekstu: 0,8vw (komputer), 1,5vw (tablet), 2,3vw (telefon)
• Wysokość linii tekstu: 2,5 em (komputer stacjonarny i tablet), 2,2 em (telefon)

Rozstaw

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

• Dolny margines: 1vw
• Lewy margines: 5vw
• Prawy margines: 14vw (komputer stacjonarny), 4vw (tablet), 5vw (telefon)

Dodaj moduł rozdzielający do kolumny 2

Widoczność

Przejdźmy do następnego modułu, którym jest moduł rozdzielający. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Linia

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

• Kolor linii: #FFFFFF
• Styl linii: Jednolity
• Pozycja linii: górna

Rozmiary

Zmodyfikuj również ustawienia rozmiaru dzielnika.

• Waga rozdzielacza: 0,7vw
• Szerokość: 9%
• Wysokość: 0px

Rozstaw

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

• Górny margines: 2vw (komputer stacjonarny), 5vw (tablet i telefon)
• Margines dolny: 3vw (komputer stacjonarny), 6vw (tablet i telefon)
• Lewy margines: 5vw

Filtry

Na koniec zastosuj tryb mieszania, aby umożliwić prześwitywanie obrazu tła i gradientu wiersza.

• Tryb mieszania: różnica

Dodaj moduł przycisku do kolumny 2

Dodaj kopię

Przejdź do następnego i ostatniego modułu, którym jest moduł przycisku. Wprowadź wybraną kopię.

Wyrównanie

Przejdź do karty projektu i upewnij się, że wyrównanie przycisku jest ustawione w lewo.

• Wyrównanie przycisków: w lewo

Ustawienia przycisków

Zmodyfikuj również ustawienia przycisków.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Kolor tekstu przycisku: #000000
• Promień obramowania przycisku: 0px
• Czcionka przycisku: Poppins

Rozstaw

I na koniec dodaj kilka niestandardowych wartości marginesów i dopełnienia do ustawień odstępów.

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

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 korzystać z nowych opcji kolumn Divi, aby tworzyć oszałamiające nagłówki w trybie dzielonego mieszania. Ten samouczek pokazuje tylko, jak wszechstronne są wbudowane opcje Divi i jak przy każdej aktualizacji Divi oprogramowanie do projektowania innych firm staje się niepotrzebne. 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.