Układ wielokrotnego użytku do tworzenia unikalnych projektów ramek z Divi
Opublikowany: 2018-09-27Tworzenie unikalnych projektów ramek dla wierszy za pomocą Divi może być użytecznym (i zabawnym) sposobem kreatywnego prezentowania zawartości strony. Łącząc rozdzielacze sekcji Divi z kompaktową strukturą rzędów, możesz odkrywać niezliczone możliwości projektowania ramek treści. Być może widziałeś już tę technikę opisaną w poprzednich samouczkach lub w niektórych z naszych gotowych układów. Ale dzisiaj pomyślałem, że pokażę ci łatwy sposób na samodzielne poznanie tej techniki projektowania. W tym samouczku pokażę, jak szybko zbudować układ sekcji wielokrotnego użytku, który można zapisać w swojej bibliotece. Następnie możesz użyć tego układu do odkrywania nowych projektów ramek i schematów kolorów. Układ działa poprzez obramowanie wiersza unikalnym projektem, dzięki czemu wszystkie struktury kolumn i moduły mogą być używane wewnątrz wiersza.
Zacznijmy.
Tworzenie układu projektu ramy wielokrotnego użytku
Na początek utwórzmy nową sekcję z układem jednokolumnowym. W tym momencie nie musimy dodawać żadnych modułów. Zamiast tego najpierw zaprojektujemy nasz wiersz i sekcję, abyśmy mogli później wypełnić nasz wiersz dowolną zawartością.
Zaprojektuj rząd
Zaktualizuj ustawienia wiersza w następujący sposób:
Kolor tła: #333333
Wyrównanie wierszy: Środek
Szerokość niestandardowa: 775 pikseli
Szerokość rynny: 2
Niestandardowe dopełnienie: 130px góra, 130px dół, 50px lewo, 50px prawo
Margines niestandardowy: 0px góra, 0px dół
Zaprojektuj sekcję
Zaktualizuj ustawienia sekcji w następujący sposób:
Kolor tła: #ffffff
Styl Top Divider: patrz zrzut ekranu
Kolor górnego dzielnika: #ffffff
Styl dolnego rozdzielacza: patrz zrzut ekranu
Kolor dolnej przegrody: #ffffff
Następnie ustawisz górne i dolne dopełnienie na 0px i utworzysz górną i dolną przestrzeń za pomocą obramowania w następujący sposób:
Niestandardowe dopełnienie: 0px góra, 0px dół
Szerokość górnej granicy: 5vw
Kolor górnej krawędzi: #ffffff
Szerokość dolnej granicy: 5vw
Kolor dolnej krawędzi: #ffffff
Tworzenie odstępów dla sekcji za pomocą górnej i dolnej granicy zmaksymalizuje przestrzeń dostępną dla dzielnika sekcji, który będzie nachodził na wiersz. W ten sposób możesz wybrać dowolną wysokość przegrody do swojego projektu.
Zapisz układ w swojej bibliotece
To tyle, jeśli chodzi o podstawową strukturę układu twojego projektu wiersza w ramkach. W tym momencie chcemy zapisać tę sekcję w bibliotece Divi, aby wykorzystać układ sekcji w przyszłych projektach.
Kliknij ikonę Zapisz w bibliotece w menu sekcji.
Następnie wprowadź nazwę układu (na przykład „Układ ramki wiersza”) i kliknij przycisk Zapisz w bibliotece.
Ukończenie projektu ramy nr 1
Teraz, gdy mamy zapisany układ sekcji dla przyszłych przedsięwzięć, dodajmy trochę zawartości do naszego wiersza, aby ukończyć pierwszy przykład projektu.
Zmiana struktury kolumn
Myślę, że w przypadku tego projektu dodanie sześciokolumnowej galerii obrazów będzie miłe. Mała struktura kolumn pozwoli nam stworzyć małą grupę obrazów, które są ładnie obramowane w wąskim rzędzie.
Aby to zrobić, najpierw zmień strukturę wierszy na układ sześciu kolumn.
Dodawanie treści do wiersza
Następnie dodaj trzy moduły obrazów (z obrazami) do każdej kolumny. Używam obrazów o orientacji bardziej pionowej (zamiast poziomej) o różnych rozmiarach/wymiarach.
Oto ostateczny projekt.
Dodatkowa wskazówka dotycząca projektowania
Zanim przejdziemy dalej do odkrywania kolejnych możliwości projektowania ramek, chciałem wskazać prosty trik na rozszerzenie ramki na jedną stronę strony. Aby to zrobić, przejdź do ustawień sekcji i dodaj gradient tła w następujący sposób:
Kolor gradientu tła w lewo: #333333
Prawy kolor gradientu tła: #ffffff
Kierunek gradientu: 90 stopni
Pozycja startowa: 50%
Pozycja końcowa: 0%
Sprawdź ten projekt.
Dostosowywanie układu do różnych projektów ramek i treści
Ekscytujące możliwości tego prostego układu są co najmniej liczne. Dostosowując schemat kolorów, styl dzielników, układ kolumn i zawartość modułu, możesz tworzyć różnego rodzaju projekty układów. Dodatkowo możesz użyć tych fajnych funkcji Divi, takich jak "Znajdź i zamień", aby za pomocą kilku kliknięć wprowadzić szerokie zmiany schematu kolorów.
Oto podstawowy proces aktualizacji układu:
- Załaduj zapisany układ sekcji na stronę
- Zaktualizuj schemat kolorów sekcji za pomocą „Znajdź i zamień”.
- Zmień styl dzielnika
- Dostosuj wiersz z nowym tłem i strukturą kolumn.
- Dodaj moduły do swoich kolumn
Dzięki temu procesowi odkrywanie nowych projektów powinno być całkiem zabawne! Kontynuujmy.
Konstrukcja ramy nr 2
W następnym projekcie użyjemy zapisanego układu sekcji, który stworzyliśmy wcześniej. Aby to zrobić, kliknij, aby dodać nową sekcję w konstruktorze wizualnym. Następnie wybierz kartę Dodaj z biblioteki i kliknij układ sekcji z listy.
Teraz jesteśmy gotowi dostosować sekcję do nowego projektu.
Aby zmienić schemat kolorów używany w tym układzie, możemy przywołać niektóre moce projektowe Divi za pomocą funkcji Znajdź i zamień. Przejdź do ustawień sekcji zduplikowanej sekcji i kliknij prawym przyciskiem myszy kolor tła i wybierz „Znajdź i zamień”.
W trybie Znajdź i zamień zaktualizuj następujące elementy:
W ramach: Ta sekcja
Zamień na: #443850
Wybierz opcję Zamień wszystko
Spowoduje to zastąpienie białego koloru tła, obramowania i dzielników sekcji nowym kolorem.
Teraz zaktualizuj ustawienia sekcji o nowy styl dzielnika:
Następnie zaktualizuj ustawienia wiersza za pomocą białego koloru tła i cienia prostokątnego, aby uzupełnić nowy projekt ramki dla wiersza.
Jeśli chodzi o treść, wypróbujmy układ pięciokolumnowy z kilkoma uwagami. Śmiało i zaktualizuj układ kolumn dla swojego wiersza do układu pięciu kolumn.
Następnie dodaj notkę do pierwszej kolumny. Usuń domyślny tekst treści i pozostaw tylko tekst tytułu. Następnie zastąp obraz notki ikoną gwiazdki. Zaktualizuj ustawienia projektu w następujący sposób:
Kolor ikony: #7d8491
Ikona Rozmiar czcionki: 80px
Orientacja tekstu: Środek
Powiel moduł notki i zaktualizuj ustawienia w następujący sposób:
Kolor ikony: #8cd845
Rozmiar czcionki ikony: 50px
Teraz zduplikuj lub skopiuj i wklej te dwa moduły we wzór w pięciu kolumnach, z trzema modułami w każdej kolumnie.
Oto ostateczny projekt.
Projekt ramy nr 3
W przypadku trzeciego projektu ramy najpierw musimy załadować nasz zapisany układ sekcji, tak jak robiliśmy to wcześniej w przypadku drugiego projektu.
Następnie możemy użyć funkcji Znajdź i zamień w kolorze tła sekcji (tak jak w poprzednim projekcie), aby zastąpić biały kolor tła sekcji, przegrody i obramowania ładnym niebieskim kolorem. Aby to zrobić, przejdź do ustawień sekcji, kliknij prawym przyciskiem myszy kolor tła i wybierz znajdź i zamień. Następnie zaktualizuj następujące elementy:
W ramach: Ta sekcja
Zamień na: #1e3888
Wybierz opcję Zamień wszystko
Następnie zaktualizuj dzielnik sekcji o nowy styl górnego i dolnego dzielnika (chmury):
Następnie przejdź do ustawień wiersza. Daj rzędowi tło gradientowe w następujący sposób:
Kolor lewego gradientu tła: domyślny (#2b87da)
Prawy kolor gradientu tła: #1E3888 (ten sam kolor co tło sekcji)
Typ gradientu: Promieniowy (aby nadać rzędowi zaokrąglone wrażenie „chmurki”)
Pozycja końcowa: 83% (aby nieco ukryć krawędzie rzędu)
Teraz wszystko, co musimy zrobić, to dodać trochę treści do naszego wiersza w ramce. Dodajmy do wiersza moduł Call To Action i zaktualizujmy ustawienia w następujący sposób:
Dodaj „#” do pola wprowadzania linku, aby wyświetlić przycisk
Użyj koloru tła: NIE
Kolor tekstu tytułu: #ffc338
Kolor tekstu przycisku: #ffc338
Oto ostateczny projekt.
A co z urządzeniami mobilnymi?
Na wypadek, gdybyś się zastanawiał. Oto jak projekty będą wyglądały na urządzeniach mobilnych.
Końcowe przemyślenia
Projekty ramek utworzone w tym samouczku mają na celu podkreślenie możliwości projektowych, a nie pokazanie całkowicie dopracowanych elementów projektu. Z tego powodu skoncentrowałem się na projektach ram i wykorzystałem podstawowe przykłady treści. Mamy nadzieję, że przynajmniej zainspirują Cię do odkrywania nowych projektów, bawiąc się różnymi podziałami sekcji, schematami kolorów i treściami.
czekam na wiadomość od Ciebie w komentarzach.
Pozdrawiam!