Używanie konturów kolumn do podkreślenia siatki projektu Divi

Wbudowana struktura elementów Divi może być używana w tradycyjny sposób do definiowania i stylizowania różnych sekcji, wierszy, kolumn i modułów. Ale można je również wykorzystać kreatywnie, aby ulepszyć struktury projektowe na Twojej stronie. W tym samouczku pokażemy, jak używać konturów kolumn, aby podkreślić swoją siatkę projektu Divi. Poświęcimy wiersz o pozycji bezwzględnej, aby utworzyć piękne kontury kolumn tła i połączyć je z innymi wierszami w naszej sekcji. 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 konturów kolumn ZA DARMO

Aby położyć ręce na układzie wolnych konturów kolumn, 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!

Zacznijmy odtwarzać!

Dodaj nową sekcję

Przepełnienia

Zacznij od dodania nowej sekcji do strony, nad którą pracujesz. Otwórz ustawienia sekcji i ustaw przepełnienia na ukryte. Pomoże to upewnić się, że nic nie wykracza poza kontener sekcji, w szczególności kontury kolumn, które dodamy później w samouczku.

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

Dodaj wiersz nr 1

Struktura kolumny

Kontynuuj, dodając nowy wiersz, 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:

• Szerokość: 100%
• Maksymalna szerokość: 100%
• Wyrównanie wierszy: w prawo

Rozstaw

Następnie przesuniemy wiersz na prawą stronę strony na komputerze, korzystając z niestandardowych ustawień rozmiaru.

• Górny margines: 200px
• Lewa wyściółka: 47% (komputer), 6% (tablet), 10% (telefon)
• Prawa wyściółka: 6% (tablet), 10% (telefon)

Granica

Uzupełnimy ogólne ustawienia wierszy, dodając górną i dolną ramkę.

• Szerokość górnej i dolnej granicy: 4px
• Kolor górnej i dolnej krawędzi: #bdffed

Ustawienia kolumny 1

Rozstaw

Po wprowadzeniu ogólnych ustawień wiersza otwórz ustawienia pierwszej kolumny i dodaj kilka niestandardowych wartości odstępów.

• Górna wyściółka: 12%
• Dolna wyściółka: 12%
• Lewa wyściółka: 3%
• Prawa wyściółka: 3%

Ustawienia kolumny 2

Rozstaw

Otwórz następnie ustawienia drugiej kolumny i użyj dla niej następujących ustawień odstępów:

• Górna wyściółka: 12%
• Dolna wyściółka: 12%
• Lewa wyściółka: 5% (komputer), 20% (tablet), 15% (telefon)
• Prawa wyściółka: 5% (komputer stacjonarny), 20% (tablet), 15% (telefon)

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość H2

Czas na dodanie modułów, zaczynając od modułu tekstowego zawierającego zawartość H2 w kolumnie 1.

Ustawienia tekstu H2

Przejdź do zakładki projektu modułu i odpowiednio zmodyfikuj ustawienia tekstu H2:

• Czcionka nagłówka 2: Kod źródłowy Pro
• Grubość czcionki nagłówka 2: pogrubiona
• Kolor tekstu nagłówka 2: rgba (35,38,211,046)
• Rozmiar tekstu nagłówka 2: 4vw (komputer), 60px (tablet), 50px (telefon)
• Nagłówek 2 Odstępy między literami: 5px

• Tekst nagłówka 2 Długość pozioma cienia: 0,05 em
• Tekst nagłówka 2 Długość pionowa cienia: 0,07 em
• Kolor cienia tekstu nagłówka 2: #bdffed

Ruch pionowy

Dodamy też trochę ruchu w pionie.

• Włącz ruch w pionie: Tak
• Przesunięcie początkowe: 2
• Przesunięcie środkowe: 0
• Przesunięcie końcowe: -2
• Wyzwalacz efektu ruchu: środek elementu

Dodaj moduł tekstowy nr 2 do kolumny 2

Dodaj zawartość

Dodaj kolejny moduł tekstowy tuż pod poprzednim i wstaw dowolną treść opisu.

Ustawienia tekstu

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

• Czcionka tekstu: kod źródłowy Pro
• Kolor tekstu: rgba (35,38,211,0.76)
• Rozmiar tekstu: 15px
• Wysokość linii tekstu: 2em

Ruch pionowy

W tym module użyjemy również ruchu pionowego.

• Włącz ruch w pionie: Tak
• Przesunięcie początkowe: 2
• Przesunięcie środkowe: 0
• Przesunięcie końcowe: -2
• Wyzwalacz efektu ruchu: środek elementu

Dodaj moduł przycisku do kolumny 1

Dodaj kopię

Ostatnim modułem, którego potrzebujemy w kolumnie 1, jest moduł przycisku. Dodaj wybraną kopię.

Ustawienia przycisków

Przejdź do karty projektu modułu i zmień styl przycisku w następujący sposób:

• Użyj niestandardowych stylów dla przycisku: Tak
• Kolor tekstu przycisku: #2326d3
• Promień obramowania przycisku: 0px

• Czcionka przycisku: kod źródłowy Pro
• Pokaż ikonę przycisku: Tak
• Umieszczenie ikony przycisku: w lewo
• Pokaż tylko ikonę po najechaniu na przycisk: Nie

Rozstaw

Następnie dodaj kilka niestandardowych wartości dopełnienia.

• Górna wyściółka: 20px
• Dolna wyściółka: 20px
• Lewa wyściółka: 50px
• Prawe wypełnienie: 50px

Ruch pionowy

I uzupełnij ustawienia modułu, dodając trochę ruchu w pionie.

• Włącz ruch w pionie: Tak
• Przesunięcie początkowe: 2
• Przesunięcie środkowe: 0
• Przesunięcie końcowe: -2
• Wyzwalacz efektu ruchu: środek elementu

Dodaj moduł obrazu do kolumny 2

Prześlij obraz w proporcji 1:1

W kolumnie 2 jedyny moduł, którego potrzebujemy, to moduł obrazu. Prześlij obraz w proporcji 1:1.

Rozmiary

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

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

Granica

Zamienimy obraz w okrąg, dodając następnie zaokrąglone rogi.

• Wszystkie rogi: 50vw

Cień Pudełka

Następnie dodamy cień pudełkowy.

• Pozycja pozioma cienia pudełka: 30px
• Pozycja pionowa cienia pudełka: 30px
• Kolor cienia: rgba (38 255 197, 0,3)

Ruch pionowy

A my uzupełnimy ustawienia modułu, dodając trochę ruchu w pionie.

• Włącz ruch w pionie: Tak
• Przesunięcie początkowe: -2
• Przesunięcie środkowe: 0
• Przesunięcie końcowe: 2
• Wyzwalacz efektu ruchu: środek elementu

Klonuj cały rząd dwa razy

Po ukończeniu pierwszego rzędu możesz go sklonować dwukrotnie.

Zmień całą zawartość i obrazy

Upewnij się, że zmieniłeś wszystkie zduplikowane treści i obrazy.

Dodaj dolny margines do ostatniego wiersza

I otwórz ustawienia ostatniego wiersza, przejdź do ustawień odstępów i dodaj trochę dolnego marginesu.

• Margines dolny: 200px

Poświęć nowy wiersz (u góry sekcji) na kontury kolumny

Struktura kolumny

Teraz, gdy mamy już ogólne wiersze, nadszedł czas, aby dodać kontury kolumn. Aby to zrobić, dodamy nowy wiersz na górze naszej sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Otwórz ustawienia wiersza, przejdź do zakładki projekt i zmień 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ść: 90%
• Maksymalna szerokość: 100%

Rozstaw

Usuwamy również wszystkie domyślne górne i dolne wyściółki.

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

Pozycja

Następnie przejdź do zakładki Zaawansowane i zmień położenie całego wiersza. Ustawiając pozycję na bezwzględną, usuniemy przestrzeń kontenera zajmowaną przez wiersz wewnątrz strony.

• Pozycja: bezwzględna
• Lokalizacja: górne centrum

Szerokość CSS wszystkich kolumn głównego elementu

Po wprowadzeniu ogólnych ustawień wierszy nadszedł czas, aby rozpocząć stylizowanie kolumn. Najpierw dodaj trochę niestandardowej szerokości do każdej kolumny, używając jednego wiersza kodu CSS wewnątrz głównego elementu wiersza. Pomoże nam to zachować strukturę kolumn na mniejszych ekranach.

width: 20% !important;

Ustawienia kolumny 1

Rozstaw

Następnie otwórz ustawienia kolumny 1 i zmodyfikuj wartości dopełnienia na różnych rozmiarach ekranu.

• Górna wyściółka: 150vh (komputer stacjonarny), 250vh (tablet i telefon)
• Dolna wyściółka: 150vh (komputer stacjonarny), 250vh (tablet i telefon)

Granica

Dodaj też lewą ramkę.

• Szerokość lewej krawędzi: 5px
• Kolor lewej krawędzi: #bdffed
• Styl lewej krawędzi: przerywany

Ustawienia kolumny 2

Kolor tła

Następnie otworzymy ustawienia kolumny 2 i dodamy kolor tła.

• Kolor tła: #b5fff1

Granica

Użyjemy też prawej granicy.

• Szerokość prawego obramowania: 4px
• Kolor prawego obramowania: #bdffed
• Styl prawego obramowania: Solidny

Kolumna 3 Ustawienia

Granica

W trzeciej kolumnie użyjemy prawego obramowania z następującymi ustawieniami:

• Szerokość prawego obramowania: 4px
• Kolor prawego obramowania: rgba (35,38,211,12)
• Styl prawej krawędzi: przerywany

Kolumna 4 Ustawienia

Granica

Następnie otworzymy ustawienia kolumny 4 i odpowiednio zmienimy ustawienia obramowania:

• Szerokość prawego obramowania: 4px
• Kolor prawego obramowania: #bdffed
• Styl prawego obramowania: Solidny

Kolumna 5 Ustawienia

Granica

Uzupełnimy ustawienia kolumn, dodając prawe obramowanie również do kolumny 5.

• Szerokość prawego obramowania: 4px
• Kolor prawego obramowania: rgba (35,38,211,12)
• Styl prawej krawędzi: przerywany

Dodaj moduł rozdzielający do kolumny 1 i 2

Widoczność

W podglądzie mobilnym na początku tego posta można było zauważyć nieco inny wynik niż na komputerze. Zezwalamy na wyświetlanie tylko konturów kolumn 1 i 2, dodając moduł dzielnika do tych konkretnych kolumn. Upewnij się, że ukryłeś obie dzielniki w ustawieniach widoczności i gotowe!

• Pokaż dzielnik: Nie

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 wykazać się kreatywnością dzięki wbudowanym kolumnom Divi. Mówiąc dokładniej, pokazaliśmy, jak używać konturów kolumn, aby podkreślić swoją siatkę projektu Divi. Takie podejście pomaga stworzyć niepowtarzalny projekt bez potrzeby korzystania z dodatkowego oprogramowania do edycji obrazu. 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.