7 technik tworzenia odważnych i kolorowych stron internetowych za pomocą Divi

Używanie odważnego i kolorowego stylu projektowania witryny to świetny sposób na to, aby Twoja witryna była popularna. Pomoże Ci to wprowadzić pozytywną atmosferę do Twojej witryny i chociaż nie pasuje do żadnej witryny, zdecydowanie pasuje do wielu z nich.

W tym poście pokażemy Ci 7 różnych technik Divi, jak stworzyć odważne i kolorowe projektowanie stron internetowych, korzystając tylko z wbudowanych opcji Divi. Najpierw omówimy różne techniki, a następnie odtworzymy przykład pasujący do opisu.

To jest ostatni post z serii postów, w której zajęliśmy się 4 różnymi stylami stron internetowych i jak je osiągnąć za pomocą Divi:

1. Czyste i abstrakcyjne
2. Minimalny
3. Mieszkanie
4. Odważne i kolorowe

Weźmy się za to!

Subskrybuj nasz kanał YouTube

1. „Zamień” wiersze w sekcje z kolumnami

Pierwszą techniką, której możesz użyć do tworzenia odważnych i kolorowych projektów internetowych, jest przekształcenie wierszy w sekcje. Usuwając całe domyślne dopełnienie między sekcją a wierszem, nie pozostawisz żadnej widocznej różnicy między nimi. To, w połączeniu z usunięciem szerokości rynny, pozwala mieć dwie kolumny, które są do siebie ściśnięte.

2. Gradienty + tekstury tła

Korzystanie z gradientowego tła na swojej stronie internetowej może zapewnić oszałamiające rezultaty. Ale to, co jeszcze bardziej pomaga wzmocnić te kolory, to połączenie ich z teksturowanym tłem. Aby zachować równowagę, użyj tej kombinacji tylko dla jednej kolumny. Utrzymuj drugą kolumnę w czystości i lekkości, aby uzyskać nowoczesny akcent.

3. Półprzezroczyste kolory gradientu + przegrody od spodu

Po przekształceniu wiersza w sekcję możesz również dodać separatory sekcji do tła kolumny. Aby upewnić się, że dzielniki prześwitują, ale nie nakładają się na zawartość, użyj lekko przezroczystych kolorów gradientu dla swojej kolumny.

4. Nakładanie się poziomych kolumn modułów

Często widzisz, że witryny używają pionowego nakładania się. Z drugiej strony nakładanie poziome jest rzadziej stosowane, chociaż może przynieść absolutnie oszałamiające rezultaty. Aby osiągnąć taki wynik, ważne jest, aby wiedzieć, że elementy w prawej kolumnie mają hierarchiczną przewagę nad elementami w lewej kolumnie. Nie możesz osiągnąć tego samego wyniku, jeśli umieścisz swoje elementy w lewej kolumnie.

5. Podziel kopię dla idealnego wyrównania

Nie ma nic bardziej satysfakcjonującego niż idealne dopasowanie. Jest to jedna z podstawowych zasad projektowania, która odróżnia dobry projekt od złego projektu. Aby upewnić się, że to wyrównanie jest idealne, gdy nakładają się dwie kolumny, spróbuj podzielić kopię na różne moduły tekstowe. Umożliwi to stworzenie idealnego wyrównania poprzez dopasowanie ujemnego lewego marginesu w szczególności do tego słowa lub zdania.

6. Połącz czarne i półprzezroczyste kolory tekstu

Aby dodać pogrubienie do swojej witryny, użyj dużego rozmiaru czcionki dla udostępnianej kopii oraz bardzo pogrubionej grubości czcionki tekstu. Aby zrównoważyć pogrubienie, możesz przełączać się między używaniem czarnego koloru tekstu i półprzezroczystego. Pomoże Ci to stworzyć wystarczającą głębię i różnorodność w Twojej witrynie.

7. Unikaj cienia pola na górze lub na dole, aby połączyć sekcje

Możesz łatwo połączyć dwie sekcje na swojej stronie, bawiąc się opcjami cienia pola. Po pierwsze, użyj bardzo subtelnego cienia pudełkowego. Oznacza to użycie wystarczającej siły rozmycia, ujemnej siły rozproszenia i bardzo jasnego koloru cienia. Po utworzeniu subtelnego cienia pudełkowego baw się z pozycją pionową. W przypadku pierwszej sekcji na stronie upewnij się, że przesuwasz pozycję pionową, aż cień pola zniknie u dołu sekcji. To samo dotyczy ostatniej sekcji, ale zamiast tego upewnij się, że nie pojawia się na górze.

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie różne techniki, nadszedł czas, aby wprowadzić to w życie. Odtworzymy następujący projekt:

Zacznijmy tworzyć: dodaj sekcję standardową nr 1

Ustawienia sekcji

Górny rozdzielacz

Dodaj nową stronę ze standardową sekcją i od razu otwórz ustawienia sekcji. Pierwszą rzeczą, której będziemy potrzebować, jest górna przegroda:

• Styl dzielnika: Znajdź na liście
• Kolor dzielnika: rgba (0,0,0,0.13)
• Wysokość dzielnika: 900px
• Przerzucanie dzielnika: Pionowy
• Układ rozdzielaczy: pod treścią sekcji

Dolny rozdzielacz

Kontynuuj, dodając również podobną dolną przegrodę.

• Styl dzielnika: Znajdź na liście
• Kolor dzielnika: rgba (0,0,0,0.13)
• Wysokość dzielnika: 900px
• Układ rozdzielaczy: pod treścią sekcji

Rozstaw

Następnie nadaj sekcji margines i usuń domyślne dopełnienie.

• Margines górny i dolny: 50px
• Margines lewy i prawy: 50px
• Górna i dolna wyściółka: 0px
• Wypełnienie lewego i prawego: 0px

Zaokrąglone rogi

Następnie otwórz ustawienia obramowania i dodaj zaokrąglone rogi.

• Górny lewy: 20px
• U góry po prawej: 20px

Cień Pudełka

Używamy subtelnego cienia pudełkowego w górnej części naszej sekcji, wprowadzając następujące zmiany:

• Pozycja pionowa cienia pudełka: -23px
• Siła rozmycia cieni w pudełku: 37px
• Siła rozprzestrzeniania się cieni w pudełku: -29px
• Kolor cienia: rgba(0,0,0,0.22)
• Pozycja cienia pudełka: cień zewnętrzny

Dodaj nowy wiersz

Struktura kolumny

Nie, że skończyliśmy modyfikować ustawienia sekcji, możemy kontynuować, dodając wiersz z dwiema kolumnami.

Kolumna 1 Tło gradientowe

Nie dodając jeszcze żadnych modułów, otworzymy ustawienia wierszy. Pierwszą rzeczą, którą musimy tam zrobić, jest dodanie gradientowego tła do naszej pierwszej kolumny.

• Kolor 1: rgba(255,191,0,0,76)
• Kolor 2: rgba (153,0,255,0.87)

Obraz tła tekstury kolumny 1

Połączymy to gradientowe tło z teksturowanym tłem. Obraz, którego używam, jest częścią pakietu Divi's Meetup Layout Pack. Zapisz następujący obraz na pulpicie, klikając go prawym przyciskiem myszy i zapisując (jest to plik png z białymi teksturami, nie będziesz mógł zobaczyć, jak wygląda, dopóki nie otworzysz go na swoim komputerze i/lub nie użyjesz go na swojej stronie internetowej ):

Po przesłaniu obrazu do Biblioteki multimediów upewnij się, że jako rozmiar obrazu tła w kolumnie 1 również wybrałeś opcję „Dopasuj”.

Kolor tła kolumny 2

Następnie nadaj drugiej kolumnie kolor tła „#F7F7F7”.

Rozmiary

Zamierzamy „zmienić” nasz wiersz w sekcję, tak aby zajmował całą szerokość sekcji.

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

Rozstaw

Oprócz tego, że rząd zajmuje całą szerokość sekcji, musimy również usunąć górną i dolną wyściółkę naszej sekcji.

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

Dodaj moduł rozdzielacza do kolumny 1

Ukryj rozdzielacz

Zacznijmy dodawać moduły! Pierwszą rzeczą, której będziemy potrzebować, jest moduł dzielnika w pierwszej kolumnie. Używamy tego modułu tylko do stworzenia miejsca, którego potrzebujemy w pierwszej kolumnie. Właściwie nie chcemy, żeby to się pojawiło. Po dodaniu modułu upewnij się, że wyłączyłeś opcję „Pokaż dzielnik”.

Rozstaw

Przejdź do ustawień odstępów dalej i dodaj następujące niestandardowe wypełnienie do przegrody:

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

Dodaj moduł tekstowy #1 do kolumny 2

Dodaj kopię

Możemy teraz przejść do drugiej kolumny. Tutaj usuniemy nasze trzy różne moduły tekstowe i sprawimy, że będą nakładać się na obie kolumny. Jeśli chcesz, aby moduł nakładał się na dwie lub więcej kolumn, zawsze musisz umieścić go w kolumnie po prawej stronie. Tak właśnie działa struktura hierarchiczna. Dodaj swój pierwszy moduł tekstowy i dodaj kopię.

Ustawienia tekstu

Otwórz ustawienia tekstu dalej i zastosuj następujące zmiany:

• Grubość czcionki tekstu: Ultra Bold
• Styl czcionki tekstu: wielkie litery
• Kolor tekstu: #000000
• Rozmiar tekstu: 250px (komputer), 200px (tablet), 100px (telefon)
• Wysokość linii tekstu: 0,75 em

Rozstaw

Potrzebny nam też margines. Ujemny lewy margines, którego używamy, pasuje do wybranej kopii. Jeśli chcesz, aby to działało również z innym tekstem, musisz pobawić się tą wartością. Zmieniaj go, aż zobaczysz, że początek znaku jest wyrównany z przejściem kolumn.

• Górny margines: 200px (komputer), -250px (tablet), -120px (telefon)
• Lewy margines: -279px (komputer), 5% (tablet i telefon)

Klonuj moduł tekstowy dwa razy

Klon #1

Zmień tekst

Stworzyliśmy nasz pierwszy moduł tekstowy i aby zaoszczędzić sobie trochę czasu, sklonujemy go dwukrotnie i wprowadzimy kilka zmian. Pierwszą rzeczą, którą musisz zmienić w drugim module tekstowym, jest kopia.

Zmień odstępy

Kopia, której tutaj używamy, jest inna, co oznacza, że ​​musimy zmienić lewy margines. Zwróć uwagę, że używamy również liczb dziesiętnych, aby idealnie wyrównać moduł tekstowy. Pozbądź się również górnego marginesu.

• Lewy margines: -360.7px (komputer), 5% (tablet i telefon)

Klon #2

Zmień tekst

Zmień również kopię trzeciego modułu tekstowego.

Zmień kolor tekstu

Aby projekt wyróżniał się jeszcze bardziej, zmienimy kolor tekstu tego modułu na „rgba(0,0,0,0.19)”.

Zmień odstępy

Usuwamy górny margines tego modułu i zamiast tego dodajemy dolny margines. Inny jest również ujemny lewy margines.

• Margines dolny: 200px
• Lewy margines: -410px (komputer), 5% (tablet i telefon)

Dodaj sekcję standardową nr 2

Ustawienia sekcji

Rozstaw

Skończyliśmy z pierwszą sekcją, czas przejść do następnej! Po dodaniu nowej sekcji standardowej otwórz ustawienia Odstępy i wprowadź następujące zmiany:

• Margines górny i dolny: 50px
• Margines lewy i prawy: 50px
• Górna i dolna wyściółka: 0px
• Wypełnienie lewego i prawego: 0px

Zaokrąglone rogi

Kontynuuj, dodając kilka zaokrąglonych dolnych rogów:

• Dolny lewy: 20px
• Dolny prawy: 20px

Cień Pudełka

Dodaj również Box Shadow na dole sekcji.

• Pozycja pionowa cienia pudełka: 47px
• Siła rozmycia cieni w pudełku: 37px
• Siła rozprzestrzeniania się cieni w pudełku: -29px
• Kolor cienia: rgba(0,0,0,0.22)
• Pozycja cienia pudełka: cień zewnętrzny

Dodaj nowy wiersz

Struktura kolumny

Następnie dodaj wiersz z trzema kolumnami do nowej sekcji.

Rozmiary

Ten wiersz również „zamieniamy” w sekcję:

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

Rozstaw

I usuniemy domyślną górną i dolną wyściółkę.

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

Dodaj Blurb Module #1 do kolumny 1

Wybierz ikonę

W sumie będziemy potrzebować trzech modułów Blurb. Po jednym na każdą kolumnę. Zaczniemy od dodania jednego w pierwszej kolumnie, a gdy skończymy, sklonujemy go i umieścimy w pozostałych kolumnach. Pomoże nam to zaoszczędzić czas. Po dodaniu treści do modułu Blurb wybierz odpowiednią ikonę w ustawieniach Obraz i ikona.

Tło gradientowe

Zamierzamy sprawić, by ikona nachodziła na górę modułu Blurb, używając dla niej gradientowego tła:

• Kolor 1: rgba (255,255,255,0)
• Kolor 2: #A21DF9
• Pozycja startowa: 20%
• Pozycja końcowa: 20%

Obraz tła tekstury

Łączymy gradientowe tło z tym samym teksturowanym tłem, którego używaliśmy w poprzedniej sekcji.

Ustawienia ikon

Następnie zmień ustawienia ikon:

• Kolor ikony: #000000
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 85px

Ustawienia tekstu

Kontynuuj, modyfikując ustawienie tekstu.

• Orientacja tekstu: Środek
• Kolor tekstu: jasny

Ustawienia tekstu tytułu

Następnie użyjemy następujących ustawień, aby wystylizować nasz tytuł notki:

• Grubość czcionki tytułu: Ultra Bold
• Styl czcionki tekstu: wielkie litery
• Rozmiar tekstu tytułu: 46px

Ustawienia tekstu podstawowego

Oraz następujące ustawienia tekstu podstawowego:

• Waga czcionki ciała: lekka
• Rozmiar tekstu ciała: 18px

Rozstaw

Na koniec zamierzamy dać naszemu modułowi Blurb trochę miejsca do oddychania, dodając niestandardowe wypełnienie:

• Górna wyściółka: 50px
• Dolna wyściółka: 100px
• Wypełnienie lewego i prawego: 50px

Clone Blurb Module dwa razy i umieść w pozostałych kolumnach

Klon #1

Zmień ikonę

Kiedy skończysz modyfikować moduł Blurb, sklonuj go dwukrotnie. Po wykonaniu tej czynności umieść duplikaty w pozostałych kolumnach. Następnie otwórz moduł Blurb w drugiej kolumnie i zmień używaną ikonę.

Zmień tło gradientowe

Kontynuuj, zmieniając drugi kolor tła gradientu na „#D47A9A”.

Klon #2

Zmień ikonę

Zrób to samo dla modułu Blurb w ostatniej kolumnie.

Zmień tło gradientowe

W tym module używamy zamiast tego „#F3BF3E” jako drugiego gradientowego koloru tła.

Zapowiedź

Jeśli wykonałeś każdy z powyższych kroków, powinieneś osiągnąć następujący wynik na różnych rozmiarach ekranu:

Końcowe przemyślenia

W tym poście pokazaliśmy, jak tworzyć odważne i kolorowe strony internetowe, korzystając tylko z wbudowanych opcji Divi. Najpierw omówiliśmy kilka technik Divi, z którymi możesz się uporać, a następnie odtworzyliśmy pasujący przykład od podstaw. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!