Jak przełączyć się na ciemny układ w 5 krokach za pomocą funkcji wydajności Divi

Projektując stronę internetową, jedną z pierwszych decyzji, które świadomie lub nieświadomie podejmujesz, jest styl kolorystyczny, który zamierzasz nadać swojej witrynie. Odważni z nas odważyliby się wybrać pełną, żywą paletę kolorów, ale bądźmy szczerzy, jest to niezwykle trudne do wykonania. Dlatego zwykle bezpieczniej jest wybrać jasny lub ciemny układ. W sekcji Premade Layouts Biblioteki Divi możesz znaleźć mnóstwo jasnych i ciemnych układów, z których możesz swobodnie korzystać podczas tworzenia dowolnego typu witryny. Ale co, jeśli podoba Ci się układ, ale wolisz ciemniejszą paletę kolorów lub odwrotnie?

Dzięki funkcjom wydajności Divi przejście od jasnego do ciemnego pakietu układów i na odwrót jest łatwiejsze niż kiedykolwiek. W tym poście pokażemy, jak zamienić jasny układ w ciemny w zaledwie 5 krokach. Ilość czasu potrzebna na to przejście jest szalenie mała, jeśli używasz odpowiednich technik. Wiedz, że liczba kroków, które musisz wykonać, zawsze będzie zależeć od układu, nad którym pracujesz, ale gdy uzyskasz ogólne podejście, będziesz w stanie sprawić, że będzie działać dla dowolnego układu, z którym masz do czynienia.

Weźmy się za to!

Zapowiedź

Tylko w 5 krokach zmienimy jasną stronę docelową pakietu Web Freelancer Layout Pack na ciemną.

Prześlij stronę docelową freelancera w sieci

Dodaj nową stronę i włącz Visual Builder

Zacznij od dodania nowej strony, nadając jej tytuł i przełączając się na Visual Builder.

Prześlij pakiet układów freelancera internetowego

Spośród trzech opcji, które pojawiają się na ekranie, wybierz gotowy układ.

Znajdź stronę docelową pakietu Web Freelancer Layout Pack na liście bezpłatnych pakietów układów i prześlij ją, klikając zielony przycisk z napisem „Użyj tego układu”.

Krok 1: Zmień ogólny kolor tła

Zmień kolor tła sekcji pierwszej sekcji

Czas zacząć! Pierwszym krokiem, który zalecamy wykonać, jest zmiana koloru tła wszystkich sekcji na stronie. Gdy to zrobisz, szybko zauważysz, które elementy projektu należy zmienić, aby pasowały do ​​ciemnego koloru tła. Otwórz pierwszą sekcję strony i wybierz „#0c0c0c” jako kolor tła sekcji.

Rozszerz styl na wszystkie sekcje

Jak tylko dodasz kolor tła, kliknij go prawym przyciskiem myszy i kliknij opcję „Rozszerz kolor tła”.

Gdy to zrobisz, wybierz rozszerzenie koloru tła na wszystkie sekcje na stronie.

Krok 2: Zmień kolory tekstu

Otwórz moduł nagłówka o pełnej szerokości i zmień kolor tekstu

Następnym krokiem, który musisz wykonać, jest zmiana używanych kolorów tekstu. Jak możesz wiedzieć lub nie, w Divi istnieje domyślna opcja, która pozwala wybrać jasną lub ciemną paletę kolorów tekstu na twojej stronie. Jednak po wybraniu koloru niestandardowego ta opcja zostanie zastąpiona wybranym przez Ciebie kolorem niestandardowym. Zamiast sprawdzać każdy z elementów, aby sprawdzić, czy jest tam niestandardowy kolor, wybierz „Jasny” jako kolor tekstu w module nagłówka o pełnej szerokości.

Rozszerz styl na wszystkie moduły

Następnie rozszerz ten jasny kolor tekstu, klikając prawym przyciskiem myszy i wybierając opcję „Rozszerz kolor tekstu”.

Rozszerz ten nowy kolor na wszystkie moduły na całej stronie.

Zmień niestandardowe kolory za pomocą funkcji wielokrotnego wyboru

Jak wspomniano wcześniej, poprzedni krok nie dotyczy kolorów, które zostały wcześniej wybrane. Na przykład moduły przełączania mają niestandardowy kolor tekstu tytułu. Zamiast modyfikować każdy z przełączników osobno, wybierz je wszystkie naraz, używając klawisza Ctrl/Command na klawiaturze i klikając każdy z modułów z osobna. Po wybraniu wszystkich kliknij ikonę ustawień.

Teraz możesz wprowadzać zmiany w każdym z wybranych modułów jednocześnie. W tym przypadku zmieniamy kolor tekstu tytułu na „#848484”.

Krok 3: Zmień przyciski

Otwórz przycisk jeden ustawienia nagłówka o pełnej szerokości

Ważne jest, aby upewnić się, że wezwania do działania na Twojej stronie są zgodne z paletą kolorów układu. W tym przypadku mamy moduł przycisku, który świetnie wygląda zarówno na jasnym, jak i ciemnym układzie. Dlatego zamierzamy rozszerzyć go również na inne przyciski na stronie. Śmiało i otwórz moduł nagłówka o pełnej szerokości i przejdź do ustawień przycisku pierwszego.

Rozszerz styl przycisku na wszystkie przyciski na stronie

Następnie kliknij prawym przyciskiem myszy ustawienia Button One i wybierz opcję „Rozszerz style Button One”.

Rozszerz styl przycisku na wszystkie przyciski na całej stronie.

Zmień kolor tekstu przycisku 2 w sekcji Hero

Funkcja rozszerzania nie dociera do drugiego przycisku modułu nagłówka o pełnej szerokości, ponieważ nie jest to samodzielny moduł. Dlatego zamierzamy otworzyć ustawienia przycisku drugiego i zmienić kolor tekstu na „#ffffff”.

Rozszerz style do wszystkich nagłówków o pełnej szerokości na stronie

Aby upewnić się, że ten kolor tekstu zostanie zastosowany do wszystkich modułów nagłówka o pełnej szerokości na stronie, rozszerzymy go również.

Po kliknięciu prawym przyciskiem myszy koloru tekstu i wybraniu opcji „Rozszerz przycisk o dwa kolory tekstu” zastosuj ją do wszystkich nagłówków o pełnej szerokości na całej stronie.

Krok 4: Usuń niestandardowy margines i zastąp niestandardowym dopełnieniem

Usuń niestandardowy margines

Podczas przełączania na ciemny układ ważne jest również, aby usunąć wszystkie niestandardowe wartości marginesów, które wprowadzają białe znaki na stronie.

Zamiast tego użyj niestandardowego dopełnienia

Możesz jednak zachować odległość, która była wcześniej, dodając niestandardowy margines jako niestandardowe wypełnienie.

Krok 5: Wyszukaj i zmień specjalne ustawienia projektu

Określ specjalne ustawienia projektu

Ostatni krok, który musisz wykonać, jest bardzo specyficzny dla każdego z układów. Należy również zmienić elementy projektu, które są unikalne dla układu. Może to obejmować między innymi niektóre z następujących ustawień:

• Cienie Pudełkowe
• Tła kolumn
• Kolory ikon
• Kolory dzielnika
• …

Użyj funkcji Znajdź i zamień w kolorze cienia pola wiersza

W przypadku tego konkretnego układu jedną z rzeczy, które musimy zmienić, jest używany kolor cienia pola wiersza. Otwórz ustawienia wiersza i kliknij prawym przyciskiem myszy cień pudełka bez jego zmiany. Następnie wybierz opcję „Znajdź i zamień”.

Korzystanie z funkcji Znajdź i zamień jest najlepszym sposobem, jeśli chcesz zmienić określony kod koloru na całej stronie. Możesz go łatwo zastąpić innym kodem koloru, w tym przypadku „#33302f”. Dzięki temu nie będziesz musiał eksplorować wszystkich elementów projektu, aby zobaczyć dokładnie, gdzie kolor został użyty.

Ręczna zmiana jednorazowych ustawień

Istnieją jednak również jednorazowe, powtarzające się ustawienia projektowe w układach. Aby to zmienić, musisz to zrobić ręcznie. Na przykład wiersz na poniższym zrzucie ekranu ma kolor cienia pudełka, który nie był używany nigdzie indziej na stronie. Dlatego ręcznie zmieniamy go na „#33302f”.

Zapowiedź

Przyjrzyjmy się końcowemu wynikowi po przejściu przez pięć kroków.

Końcowe przemyślenia

W tym poście przeprowadziliśmy Cię przez proces przekształcania pakietu z jasnym układem w ciemny w zaledwie 5 krokach. Liczba kroków, które musisz wykonać, zawsze będzie zależeć od układu, nad którym pracujesz, ale ogólnie podejście pozostaje takie samo. Jeśli masz jakieś pytania lub sugestie, daj nam znać w sekcji komentarzy poniżej!