Pobierz i używaj 6 BEZPŁATNYCH dzielników modułów dla Divi

Do tej pory wszyscy przyzwyczailiśmy się do dzielników sekcji, które są zawarte w Divi. W poprzednich samouczkach pokazaliśmy również, jak można zastosować te dzielniki sekcji do modułów i wierszy. Ale jeśli chcesz użyć przegród modułowych, które są połączone tylko z modułami, a nie z innymi elementami projektu, ten post jest dla Ciebie. Udostępnimy 6 DARMOWYCH dzielników modułów, których możesz użyć do dowolnego rodzaju witryny Divi, którą zbudujesz. Te dzielniki modułów zostaną zawarte w pliku programu Illustrator, który będzie można pobrać w dalszej części tego postu. Ten samouczek pomoże Ci również stworzyć własny rodzaj dzielników modułów.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na 6 różnych dzielników modułów, które będziesz mógł pobrać, i jak wyglądają na różnych rozmiarach ekranu.

Pulpit

Telefon

Pobierz dzielniki modułów ZA DARMO

Aby położyć ręce na przekładkach modułów, musisz je najpierw 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 i piątek! 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!

Subskrybuj nasz kanał YouTube

Zmień kolory dzielników w programie Illustrator

Otwórz plik programu Illustrator w pobranym folderze

W pierwszej części tego samouczka przygotujemy potrzebne dzielniki modułów. W folderze do pobrania można znaleźć przekładki modułów dla jednej konkretnej palety kolorów. Jeśli jednak chcesz użyć innej palety kolorów, musisz utworzyć potrzebne dzielniki modułów, korzystając z pliku programu Illustrator, który znajdziesz w folderze pobierania.

Wybierz styl dzielnika modułów, odblokuj warstwę i włącz widoczność

Po otwarciu pliku programu Illustrator przejdź dalej i wybierz wybrany rozdzielacz na karcie warstw. Odblokuj warstwę i włącz opcję widoczności, aby od razu zacząć.

Kliknij dzielnik modułów i zmień kolor

Teraz, w zależności od tego, dla ilu modułów chcesz utworzyć przegrodę, liczba potrzebnych przegródek może się różnić. Na przykład, aby odtworzyć przykład, który pokazaliśmy na początku postu, będziemy potrzebować dzielnika modułów w czterech różnych kolorach. Zacznij od pierwszego, zmieniając kolor przegrody na biały.

• Kolor dzielnika: #ffffff

Eksportuj dzielnik modułu PNG dla Internetu

Po zmianie koloru możesz kontynuować, zapisując moduł obrazu jako plik obrazu PNG do Internetu.

Powtórz kroki dla każdego potrzebnego koloru (x4)

Jak wspomniano wcześniej, będziesz potrzebować różnych dzielników modułów. Powtórz poprzednie kroki dla każdego z kolorów.

• Kolor 1: #ffffff
• Kolor 2: #2759f6
• Kolor 3: #97adf4
• Kolor 4: #b2ceff

Utwórz projekt Divi

Podgląd zaplecza

Po zapisaniu wszystkich dzielników modułów nadszedł czas, aby przejść na Divi! Wynik końcowy, który tworzymy, będzie wyglądał tak na zapleczu:

Dodaj nową sekcję

Dodaj nową stronę lub otwórz istniejącą i dodaj do niej zwykłą sekcję.

Dodaj nowy wiersz

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 wierszy i wprowadź zmiany w ustawieniach rozmiaru.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Dodaj moduł obrazu do kolumny 1

Prześlij biały rozdzielacz modułu

Pierwszym modułem, którego będziemy potrzebować, w kolumnie 1, jest moduł obrazu. Prześlij pierwszy rozdzielacz modułów, który możesz znaleźć w folderze pobierania lub wybierz ten, który zmodyfikowałeś do własnej palety kolorów.

Kolor tła

Następnie dodaj kolor tła do modułu obrazu. Ten kolor musi pasować do koloru tła dowolnego modułu, który jest następny.

• Kolor tła: #2759f6

Rozmiary

Następnie przejdź do ustawień rozmiaru i włącz opcję „Wymuś pełną szerokość”.

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

Dodaj moduł Blurb do kolumny 2

Dodaj zawartość

Drugim modułem, którego potrzebujemy w kolumnie 1, jest moduł Blurb. Zacznij od dodania wybranej treści.

Wybierz ikonę

Następnie wybierz wybraną ikonę.

Kolor tła

Kontynuuj, dodając ten sam kolor tła, którego użyłeś dla modułu rozdzielającego moduł Image Module.

• Kolor tła: #2759f6

Ustawienia ikon

Następnie przejdź do ustawień ikony i wprowadź pewne zmiany.

• Kolor ikony: #ffffff
• Umieszczenie obrazu/ikony: góra
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 50px

Ustawienia tekstu

Zmodyfikuj również ustawienia tekstu.

• Orientacja tekstu: Środek
• Kolor tekstu: jasny

Ustawienia tekstu tytułu

Zmień również wygląd tekstu tytułu.

• Grubość czcionki tytułu: Ultra Bold
• Styl czcionki tytułu: wielkie litery

Rozstaw

I stwórz trochę miejsca dla modułu, używając niestandardowego dopełnienia.

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

Moduł klonowania obrazu 3 razy i moduł Blurb dwa razy

Po zakończeniu modyfikowania pierwszego modułu obrazu (zawierającego dzielnik modułu) i modułu Blurb, możesz sklonować moduł obrazu trzy razy, a moduł Blurb dwa razy. Da to następujący wynik w backendzie:

Umieść duplikaty we właściwej kolejności

Zmień kolejność duplikatów, aby upewnić się, że zaczynasz od modułu obrazu, po którym następuje moduł Blurb, jak pokazano poniżej:

Zmień kolory tła duplikatów modułu Blurb

Następnie zmień kolory tła modułów Blurb.

• Blurb Moduł #2: #97adf4
• Blurb Moduł #3: #b2ceff

Zmień dzielnik modułu w module obrazu

Otwórz pierwszy duplikat modułu obrazu i prześlij drugi utworzony rozdzielacz modułów (lub wybierz taki, który znajdziesz w folderze pobierania).

Zmień kolor tła modułu obrazu dzielnika modułu (dopasuj kolor tła modułu następnego Blurb)

Po przesłaniu nowego rozdzielacza modułów musisz również zmienić kolor tła tego modułu obrazu. Upewnij się, że pasujesz do koloru tła Modułu Blurb, który pojawi się w następnej kolejności.

• Rozdzielacz modułu nr 2: #2759f6

Powtórz kroki dla dwóch pozostałych modułów rozdzielających

Powtórz poprzednie kroki dla dwóch pozostałych dzielników modułów w kolumnie i gotowe!

• Przegroda modułu #3 Kolor tła: #97adf4
• Przegroda modułu #4 Kolor tła: #b2ceff

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się jeszcze 6 różnym dzielnikom modułów, które można było pobrać na początku tego postu!

Pulpit

Telefon

Końcowe przemyślenia

W tym poście udostępniliśmy 6 darmowych dzielników modułów, których możesz użyć dla każdego rodzaju witryny, którą tworzysz. Te przegrody modułowe pomogą Ci stworzyć bardziej zabawny projekt i stworzyć unikalne i zabawne moduły. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!