Ulepsz swoją stronę bloga Divi z tłem zaprojektowanym dla układu siatki

Stworzenie układu siatki na blogu to świetny sposób na uporządkowanie postów. Divi sprawia, że ​​jest to niezwykle łatwe dzięki modułowi Blog. W ciągu kilku sekund możesz wdrożyć na swojej stronie działający układ siatki bloga. Możesz nawet wykorzystać wiele ustawień projektowych, aby na wiele sposobów dostosować wygląd siatki bloga. Ale dzisiaj przenoszę sprawy na inny poziom.

W tym samouczku pokażę Ci, jak stworzyć wiele warstw tła, aby otoczyć trzykolumnową siatkę bloga pięknym i symetrycznym projektem. Mamy nadzieję, że możesz użyć tych technik projektowania, aby stworzyć stronę bloga, która z pewnością zrobi wrażenie.

Zacznijmy.

Subskrybuj nasz kanał YouTube

Sneak Peak projektu układu siatki

Oto zajawka projektu.

Pierwsze kroki

Wszystko czego potrzebujesz to Divi do tego samouczka. Po zainstalowaniu i aktywacji motywu Divi utwórz nową stronę i nadaj jej tytuł. Następnie wdróż program Visual Builder. Wybierz "Wybierz gotowy układ", a następnie prześlij układ strony bloga terapeuty na swoją stronę i opublikuj go.

Upewnij się, że masz co najmniej 6 postów na blogu z treścią i polecanymi obrazami. Jeśli tego nie zrobisz, posty z bloga nie pojawią się na stronie.

Teraz możesz rozpocząć edycję.

Dodaj pierwszą warstwę tła do sekcji

Niestandardowy projekt zostanie dodany do drugiej sekcji układu, w której znajduje się moduł bloga. Aby utworzyć naszą pierwszą warstwę tła, zmienimy styl ustawień sekcji w następujący sposób:

Kolor tła: #5873dd
Niestandardowe wypełnienie (komputer): 4vw Top, 4vw Bottom, 7vw Left
Niestandardowa wyściółka (tablet): 0vw w lewo

Niestandardowe lewe dopełnienie 7vw zasadniczo przesuwa zawartość sekcji (rzędu), aby uzyskać niepowtarzalny wygląd. Jeśli chcesz, aby wszystko było ładne i skoncentrowane na twoim projekcie, możesz to pominąć.

Dodaj drugą i trzecią warstwę tła do rzędu

Druga i trzecia warstwa tła zostaną utworzone przez dodanie koloru tła do całego wiersza, a następnie gradientu tła do kolumny w wierszu.

Otwórz ustawienia wiersza i zaktualizuj następujące elementy:

Kolor tła: rgba (255,255,255,0.3)
Kolor tła kolumny 1 po lewej stronie: rgba (255,255,255,0.0)
Kolor tła kolumny 1 po prawej stronie: rgba (255,255,255,0.3)
Kierunek gradientu kolumny: 90deg
Pozycja początkowa kolumny: Pozycja początkowa kolumny: 33,3%
Pozycja końcowa kolumny: 0%

Zwróć uwagę, że używam koloru białego z kryciem 30%, aby uzyskać spójny stopień białych kolorów nakładki, które umożliwiają prześwitywanie niebieskiego tła sekcji. Ponieważ każdy kolor nakłada się na siebie, użytkownik widzi o 30% jaśniejszą wersję niebieskiego tła sekcji. W ten sposób, jeśli kiedykolwiek będziesz chciał zmienić schemat kolorów układu, wystarczy zmienić kolor tła sekcji.

Ustawienie początkowej pozycji gradientu kolumny na 33,3% zapewnia, że ​​gradient zostanie podzielony między pierwszą a drugą kolumnę siatki mojego bloga. Ale początkowo nie będzie to wyglądać poprawnie, ponieważ nadal musimy nadać naszemu wierszowi niestandardową szerokość między innymi 100%.

Szerokość niestandardowa: 100%
Szerokość rynny: 4
Niestandardowa wyściółka: 4% u góry, 4% u dołu

Niestandardowe wypełnienie eksponuje warstwy w pionie, aby dodać do ogólnego projektu.

Zapisz ustawienia.

Dodawanie czwartej warstwy tła do naszego modułu bloga

Tutaj wszystko się układa. Czwartą i ostatnią warstwą będzie gradient tła dodany do naszego modułu bloga. Następnie po dodaniu dokładnych odstępów moduł bloga będzie idealnie dopasowany do naszych warstw tła. Dodam też kilka poprawek stylu do kart bloga, aby dodać ostatnie szlify.

Przejdź do ustawień modułu bloga i zaktualizuj następujące elementy:

Kolor tła płytki siatki: rgba (255,255,255,0.7)

Aby dodać gradient tła, możesz przejść do ustawień wiersza i skopiować gradient tła kolumny 1, a następnie wrócić do ustawień bloga i wkleić go za pomocą opcji kliknięcia prawym przyciskiem myszy.

Następnie zaktualizuj następujące elementy:

Pozycja startowa: 66,6%

Margines niestandardowy: 4% górny, 4% dolny
Niestandardowa wyściółka: 4% góra, 4% dół, 4% lewo, 4% prawo

Jak widać, w całym tekście użyto wartości 4% długości, aby zapewnić równe odstępy naszemu projektowi. A w tej wartości 4% jest więcej niż na pierwszy rzut oka. Jeśli pamiętasz, ustawiliśmy nasz wiersz na niestandardową szerokość rynny 4. W Divi, jeśli dodasz moduł bloga z układem siatki do wiersza o szerokości rynny 4, kolumny siatki Twojego bloga zostaną rozdzielone poziomo o 8% marży. Tak więc dodanie 4% lewego i prawego dopełnienia do modułu stworzy dokładnie taki odstęp, jakiego potrzebujemy.

W tym momencie skończyliśmy z projektem tła. Sprawdź, co mamy do tej pory.

Teraz wszystko, co musimy zrobić, to dodać kilka ostatnich poprawek do modułu bloga.

Ostatnie poprawki

Na karcie projektu w ustawieniach modułu bloga zaktualizuj następujące elementy:

Kolor tekstu ciała: rgba (0,0,0,08)
Kolor tekstu meta: rgba (0,0,0,0,5)
Styl czcionki paginacji: podkreślenie
Kolor podkreślenia stronicowania: rgba(166,221,217,39)
Kolor tekstu paginacji: #ffffff
Rozmiar tekstu paginacji: 3vw (komputer), 40px (tablet), 30px (smartfon)

Jeśli chcesz nadać swojemu projektowi nieco więcej tekstury, możesz dodać do sekcji tła rozdzielające.

Górna część rozdzielacza: Zobacz zrzut ekranu
Kolor dzielnika: rgba (88 115 221, 0,5)
Wysokość dzielnika: 32vw
Powtarzanie poziome dzielnika: 0,3X

Przegroda dolna: patrz zrzut ekranu
Kolor dzielnika: rgba (88 115 221, 0,5)
Wysokość dzielnika: 43vw
Powtarzanie poziome dzielnika: 0,3X

Teraz sprawdź efekt końcowy…

Elastyczny projekt

Warstwy, które otaczają kolumny siatki, idealnie skalują się we wszystkich rozmiarach przeglądarek komputerowych.

Chociaż warstwy tła nie dostosowują się do dwóch kolumn na tablecie i jednej na smartfonie, wynik jest nadal bardzo symetryczny i zapewnia subtelną, połamaną siatkę, która działa dobrze.

Oto, jak będzie wyglądać na telefonie komórkowym…

Końcowe przemyślenia

Ta technika warstwowego tła jest tak naprawdę sposobem na stworzenie wrażenia posiadania trzech kolumn tła, podczas gdy w rzeczywistości jest tylko jedna kolumna (ponieważ moduł bloga znajduje się w jednej kolumnie). Jasne, że można to zrobić w niestandardowym CSS na poziomie modułu bloga, ale pomyślałem, że bardziej pomocne będzie dostarczenie kreatywnego rozwiązania za pomocą Divi Builder. Odmiany projektu mogą być również wykorzystywane jako tło dla innych treści.

Próbowałem wyjaśnić rozumowanie niektórych stylów użytych w tym samouczku, ale jeśli masz pytania, wszyscy jestem uszami. A dla tych z was, którzy mają nadzieję urozmaicić układ siatki swojego bloga, mam nadzieję, że ten post da wam przynajmniej kilka wskazówek projektowych, aby to zrobić.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!