Jak poziomo nakładać się na granice wierszy za pomocą Divi

Tworzenie projektów stron, które wchodzą w interakcje, nie zawsze jest łatwym zadaniem. Oprócz skupienia się na doświadczeniu użytkownika, zasadach projektowania i trendach projektowych, musisz także stworzyć coś, co pasuje do marki Twojej firmy i na pierwszy rzut oka fascynuje odwiedzających.

Jeśli przeszukujesz nasz blog, znajdziesz mnóstwo kreatywnych sposobów podejścia do projektowania stron internetowych, korzystając z wszechstronnych wbudowanych opcji Divi i Divi. Dzisiaj dodajemy do tej listy kolejne kreatywne podejście. Pokażemy Ci, jak twórczo nakładać granice wierszy, aby stworzyć oszałamiający projekt. Dbamy o to, by na wszystkich rozmiarach ekranów był taki sam projekt.

Weźmy się za to!

Subskrybuj nasz kanał YouTube

Zapowiedź

Stworzymy przykład od podstaw, ale zanim zagłębimy się w to, spójrzmy na efekt końcowy na różnych rozmiarach ekranu.

Pobierz bezpłatną czcionkę Mighttype

Pierwszą rzeczą, którą musisz zrobić, to pobrać bezpłatną czcionkę odręczną Mighttype autorstwa AF studio. Przejdź do poniższego linku i włącz bezpłatne pobieranie za pośrednictwem poczty e-mail.

Dodaj nową sekcję

Rozstaw

Po pobraniu darmowej czcionki wymienionej w poprzednim kroku możesz przejść do tworzenia nowej strony. Po wykonaniu tej czynności włącz program Visual Builder, otwórz pierwszą sekcję nowej strony i dodaj niestandardowe wypełnienie:

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

Dodaj nowy wiersz

Struktura kolumny

Potrzebujemy w sumie dwóch rzędów. Zaczniemy od pierwszego, a potem sklonujemy go po zakończeniu. Dodaj nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Kolumna 1 Tło gradientowe

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i dodaj następujące tło gradientowe kolumny 1:

• Kolor 1: #ffffff
• Kolor 2: rgba (0,255,233,0,25)
• Typ gradientu kolumny: promieniowy
• Kierunek promieniowy kolumny: w lewo
• Pozycja początkowa kolumny: 59%
• Pozycja końcowa kolumny: 59%
• Kolumna Umieść gradient nad obrazem tła: Tak

Wzór tła kolumny 1

Kontynuuj, zapisując następujący wzór na komputerze i przesyłając go jako obraz tła kolumny 1:

Po przesłaniu wzoru użyj następujących ustawień obrazu tła:

• Rozmiar obrazu tła kolumny: rzeczywisty rozmiar
• Powtarzanie obrazu tła kolumny: spacja

Wyrównanie wierszy

Włącz również wyrównanie do prawego wiersza.

Rozmiary

Używamy również niestandardowych ustawień rozmiaru dla tego wiersza:

• Użyj niestandardowej szerokości: Tak
• Szerokość niestandardowa: 950px

Rozstaw

Oto wartości odstępów, które musisz dodać dalej:

• Margines dolny: 100px
• Prawy margines: -30px (tablet i telefon)
• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Granica

Na koniec dodaj obramowanie u góry, po lewej iu dołu wiersza:

• Szerokość obramowania: 14px
• Kolor obramowania: #000000
• Styl lewej obramowania: podwójny

Dodaj moduł tekstu tytułu

Dodaj kopię H2

Teraz możemy zacząć dodawać nasze moduły! Dodaj tytułowy moduł tekstowy i upewnij się, że twoja kopia to H2.

Kolor tła

Przerwiemy lewą krawędź naszego wiersza, dodając białe tło do modułu tekstowego.

Prześlij czcionkę Mighttype

Następnie znajdź czcionkę Mighttype na swoim komputerze i prześlij ją do biblioteki czcionek, klikając przycisk przesyłania na liście czcionek.

Wybierz plik czcionki Mighttype, nadaj czcionce nazwę i prześlij ją do swojej biblioteki czcionek.

Ustawienia tekstu H2

Po dodaniu nowej czcionki wprowadź kilka innych zmian w ustawieniach tekstu H2:

• Czcionka nagłówka 2: Mighttype
• Kolor tekstu nagłówka: #000000
• Rozmiar tekstu nagłówka 2: 150px (komputer), 100px (tablet), 60px (telefon)

Rozstaw

Dla każdego modułu, który chcesz nałożyć na granice wierszy, musisz dodać ujemny margines. Ten ujemny margines wpłynie tylko na dany moduł, a nie na wiersz, w którym został umieszczony. Ujemny margines, który musisz dodać, zależy od liczby znaków użytych w kopii.

• Górny margines: 200px
• Margines dolny: 100px
• Lewy margines: -35%
• Górna wyściółka: 50px
• Dolna wyściółka: 50px

Tryb mieszania

Aby upewnić się, że kolor tła modułu tekstowego dotyczy tylko krawędzi wiersza, a nie tła kolumny 1, włącz tryb mieszania „Pomnóż” w ustawieniach filtrów.

Dodaj moduł tekstu opisu

Kolor tła

Tuż pod tytułem Text Module, dodaj opis Text Module z białym tłem.

Ustawienia tekstu

Przejdź do ustawień tekstu i wprowadź zmiany:

• Rozmiar tekstu: 22px (komputer), 18px (tablet), 15px (telefon)
• Wysokość linii tekstu: 1,8 em
• Orientacja tekstu: Środek

Rozmiary

Następnie zmniejsz rozmiar tego modułu tekstowego do „96%”.

Rozstaw

Dodaj również odstępy:

• Margines dolny: 200px
• Lewy margines: -50%
• Górna wyściółka: 20px
• Dolna wyściółka: 20px

Tryb mieszania

I tutaj również użyj trybu mieszania „Pomnóż”.

Klonuj rząd

Skończyliśmy modyfikować pierwszy wiersz! Stwórzmy ten sam wynik, ale po drugiej stronie strony. Aby zaoszczędzić sobie trochę czasu, sklonujemy wiersz, który już mamy i wprowadzimy po drodze pewne zmiany.

Zmień ustawienia wiersza

Kolumna 1 Tło gradientowe

Pierwszą rzeczą, którą musisz zmienić, jest tło gradientowe kolumny 1:

• Kolor 2: rgba (255,187,0,0.33)
• Kierunek promieniowy kolumny: w prawo

Wyrównanie wierszy

Chcemy, aby wiersz pojawił się po drugiej stronie, dlatego wybierzemy wyrównanie wiersza do lewej.

Rozstaw

Dopasowujemy również ustawienia odstępów:

• Lewy margines: -25% (tablet i telefon)

Granica

Usuń lewą ramkę, która została zastosowana do wiersza i zamiast tego zastosuj ją po prawej stronie:

• Szerokość prawego obramowania: 14px
• Kolor prawego obramowania: #000000
• Styl prawego obramowania: podwójny

Zmień ustawienia modułu tekstu tytułu

Rozstaw

Zmień ustawienia odstępów w tytule Moduł tekstowy:

• Lewy margines: 52% (komputer stacjonarny i tablet), 58% (telefon)
• Prawy margines: -52% (komputer stacjonarny i tablet), 58% (telefon)

Zmień ustawienia tekstu opisu

Rozstaw

Last but not least, opis modułu tekstowego wymaga również kilku innych wartości odstępów:

• Lewy margines: 50%
• Prawy margines: -50%

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie różne kroki, przyjrzyjmy się końcowemu wynikowi na różnych rozmiarach ekranu.

Końcowe przemyślenia

Nakładające się granice wierszy za pomocą wbudowanych opcji Divi mogą zapewnić Twojej witrynie dostosowanie i personalizację, której mogłeś szukać. W tym poście pokazaliśmy dokładnie, jak to zrobić. Odtworzyliśmy piękny przykład od podstaw. Ten przykład wygląda świetnie na wszystkich rozmiarach ekranu, a my użyliśmy tylko wbudowanych opcji Divi! Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!