Kompletny przewodnik po konfiguratorze motywów Divi

Konfigurator motywu Divi to potężne i wygodne narzędzie do dostosowywania motywu Divi. Podobnie jak Visual Builder, Divi Theme Customizer umożliwia wizualne dostosowywanie front-endu i zmiany projektowe, które usuwają zgadywanie z procesu dostosowywania. Efektywne wykorzystanie tego narzędzia może być świetnym sposobem na zaoszczędzenie czasu i przyspieszeniem przyszłych projektów.

Dzisiejszy post ma na celu pomóc Ci lepiej zrozumieć, jak działa Konfigurator motywów, dzięki czemu możesz go używać do zwiększania produktywności w przyszłych projektach. Omówię prawie wszystkie opcje dostępne w konfiguratorze motywów, z naciskiem na te opcje, które są specyficzne dla Divi. W pewnym sensie ten post służy jako dokumentacja, która po drodze oferuje szczegółowe wyjaśnienia i wskazówki dotyczące projektowania. Pokażę Ci również, jak wyeksportować ustawienia Customizer, aby użyć ich w następnym projekcie.

Mamy dużo do omówienia, więc zacznijmy od początku.

Zbudowany z myślą o WordPressie

Motyw Customizer został wprowadzony w WordPress 3.4. Ta wygodna funkcja umożliwia użytkownikom WordPressa podgląd zmian, które wprowadzają w swoich motywach w czasie rzeczywistym, a następnie zapisanie tych zmian jednym kliknięciem. To, co kiedyś zajmowało wiele okien i niezliczone odświeżenia, teraz można zrobić szybko w jednym oknie przeglądarki.

Oto przykład opcji dostosowywania motywu w motywie TwentySeventeen:

Jak widać, wiele funkcji WordPressa, które znajdowały się na różnych stronach zaplecza WordPressa (tożsamość witryny, menu, widżety itp.), można teraz uzyskać w tym konfiguratorze frontonu w jednym miejscu.

Z drugiej strony, Konfigurator motywu Divi został zbudowany jako ulepszona wersja tego Konfiguratora motywu ze wszystkimi rodzajami opcji specyficznych dla Divi. Dla użytkowników znacznie ułatwia to proces dostosowywania Divi. A fakt, że możesz zobaczyć dostosowania podczas edycji (jednocześnie), sprawia, że ​​jest to wygodne narzędzie do projektowania.

Konfigurator motywu Divi nadal ma wiele standardowych opcji dostosowywania WordPressa, ale ma też o wiele więcej.

Jak widać, do Konfiguratora motywu Divi dodano o wiele więcej ustawień. Teraz zacznijmy je dokładniej badać.

Ustawienia główne

Kiedy zaczynasz dostosowywać swój motyw, myślę, że najlepiej zacząć od góry z Ustawieniami ogólnymi i schodzić w dół.

Tożsamość witryny

Ta sekcja nie jest unikalna dla Divi. Jest to wygodne miejsce do zmiany tytułu i sloganu witryny. Możesz także wprowadzić ikonę witryny używaną w przeglądarkach i aplikacjach, inną niż ikona favicon, którą możesz dodać w opcjach motywu Divi.

Ustawienia układu

Ustawienia układu pozwalają dostosować strukturę motywu, określając, ile miejsca jest między sekcjami i wierszami oraz jaka będzie maksymalna szerokość głównej sekcji treści.

WŁĄCZ UKŁAD W PUDEŁKU

Tutaj możesz zmienić swoją witrynę na układ ramek, który otacza zawartość witryny i eksponuje tło, które można dostosować.

SZEROKOŚĆ TREŚCI NA STRONIE

Tutaj możesz ustawić maksymalną szerokość sekcji treści. Ponieważ Twoje treści są w układzie responsywnym, dostosują się do mniejszych rozmiarów, ale nie rozszerzą się szerzej niż ustawiona tutaj maksymalna szerokość.

Domyślne ustawienie to 1080px. Jest to dobra szerokość dla większości standardowych laptopów i komputerów stacjonarnych.

SZEROKOŚĆ RYNNY WITRYNY

Szerokość rynny odpowiada ilości odstępu poziomego (marginesu) między kolumnami w każdym rzędzie.

Opcjonalne wartości szerokości rynny wahają się od 1 do 4.

1 oznacza zero marginesu między kolumnami.
2 oznacza 3% prawy margines między kolumnami.
3 oznacza 5,5% prawy margines między kolumnami.
4 oznacza 8% prawy margines między kolumnami.

UŻYJ NIESTANDARDOWEJ SZEROKOŚCI PASKA BOCZNEGO

To ustawia domyślną szerokość paska bocznego dla twojego motywu. Dotyczy to wszystkich stron w Twoim motywie, które mają pasek boczny i nie zostały zbudowane za pomocą Divi Builder.

WYSOKOŚĆ PRZEKROJU I RZĘDU

Te opcje dostosowują wielkość odstępów w pionie (wypełnienie górne i dolne) dla każdej sekcji i rzędu.

Domyślnie dopełnienie sekcji wynosi 50 pikseli na górze i na dole . W przypadku wiersza domyślnym dopełnieniem jest 30 pikseli na górze i na dole . Jednak zmieniając dopełnienie sekcji lub wiersza za pomocą narzędzia Customizer, wartość dopełnienia zmienia się w wartość procentową odpowiadającą liczbie na pokrętle opcji w dostosowywaniu motywów.

Na przykład „0” oznacza 0% wyściółki górnej i dolnej, „1” oznacza 1% wyściółki górnej i dolnej, „2” oznacza 2% i tak dalej. Procent wypełnienia zależy od szerokości kontenera (sekcji lub rzędu). Jeśli więc rzeczywista szerokość sekcji wynosi 1080px, a wysokość sekcji została ustawiona na 1, oznacza to, że będziesz mieć…

1080 pikseli x 0,01 = 10,8 pikseli

… 10,8px wypełnienia na górze i na dole.

Opcje wahają się od 0 do 10, więc możesz mieć nawet 10% dopełnienia.

KOLOR AKCENTU TEMATYCZNEGO

Zanim zaczniesz zmieniać kolory innych elementów, powinieneś najpierw to zmienić . Po zmianie zapisz i opublikuj ustawienia oraz odśwież stronę. Teraz zaktualizowany kolor akcentu motywu powinien automatycznie wypełnić inne elementy.

Aktualizacja koloru akcentu motywu spowoduje również zaktualizowanie następujących elementów:

• Kolor łącza ciała
• Kolor nagłówka widżetu
• Kolor pocisku widżetu
• Kolor ikony społecznościowej w stopce
• Domyślny kolor ikon
• Kolor aktywnego łącza w menu stopki
• Kolor tła menu dodatkowego
• Kolor tła w stylu wsuwania i pełnoekranowego nagłówka
• Ikona menu Hamburger dla kolorowego menu mobilnego
• Kolor aktywnego łącza w menu głównym
• Kolor linii menu rozwijanego
• Dodatkowy kolor tła menu
• Kolor tła dodatkowego menu rozwijanego
• Dodatkowy kolor tła menu
• Kolor aktywnego łącza głównego menu
• Kolor aktywnego łącza w menu stopki

Typografia

Jest to jeden z najważniejszych aspektów Twojej witryny, który często jest zaniedbywany przez użytkowników i programistów. Nie popełnij błędu przeoczenia tych opcji. Poprawne wprowadzenie tych szczegółów może mieć duże znaczenie. Poświęcenie czasu na ustawienie domyślnej typografii dla motywu może również zaoszczędzić czas na dłuższą metę, ponieważ nie będziesz musiał dostosowywać na poziomie modułu.

ROZMIAR TEKSTU CIAŁA

Zmienia to domyślny tekst główny motywu. Domyślny rozmiar to 14px.

Wskazówka projektowa: Wygląda na to, że 14px to trochę za małe dla standardowego rozmiaru tekstu. Naprawdę nie powinieneś zmniejszać rozmiaru czcionki poniżej 16 pikseli dla podstawowego rozmiaru czcionki. Ci z nas w wieku około 40 lat i starsi będą Ci wdzięczni. Nawet większość przeglądarek używa 16px jako standardowego rozmiaru czcionki na poziomie podstawowym.

WYSOKOŚĆ LINII NADWOZIA

Wysokość każdego wiersza tekstu.

Wskazówka projektowa : Wysokość linii jest mierzona w wartości długości „em”. Wartość domyślna Divi to 1,7 em dla tekstu podstawowego. Ta wartość em jest lepsza niż wartość piksela (px), ponieważ jest oparta na bieżącym rozmiarze czcionki elementu, a więc skaluje się z nadrzędną wartością w wierszu (lub w naszym przypadku z bieżącym rozmiarem czcionki). Wartość „1.7em” w zasadzie reprezentuje 1,7-krotność obecnego rozmiaru czcionki. Więc jeśli twój obecny rozmiar czcionki to 16px, wysokość linii wyniesie 27,2px. Daje to 5,6 piksela dodatkowej przestrzeni na górze i 5,6 piksela na dole. Wydaje się, że jest to dobre wprowadzenie (odstęp między wierszami kopii) dla czytelności.

ROZMIAR TEKSTU NAGŁÓWKA

Divi pozwala ustawić tutaj domyślny rozmiar tekstu nagłówka h1. Wpływa to na elementy Divi, takie jak tytuły Fullwidth Header Module. Jeśli chcesz dostosować rozmiar innych poziomów nagłówków (h2, h3, itp…), sugeruję dodanie ich w Dodatkowym CSS (o tym w dalszej części postu).

Wskazówka projektowa: W większości przypadków będziesz mieć tylko jeden nagłówek na stronę, więc niech się liczy. Pomyśl o tym jako o tytule na okładce książki. To pierwsza rzecz, jaką człowiek zauważa. I, wbrew popularnemu sloganowi, ludzie nadal oceniają książki po okładkach, zwłaszcza w tym przypadku.

Domyślna wartość rozmiaru tekstu nagłówka to 30 pikseli. To dobry, bezpieczny rozmiar na początek. Zwłaszcza, że ​​niektóre nagłówki będą wymagały dłuższego tekstu. Jednak staram się skłaniać do większego rozmiaru nagłówka, aby dostosować się do rosnącego rozmiaru monitorów. Ponadto większość klientów potrzebuje witryn z prostymi i krótkimi nagłówkami, takimi jak „O nas” i „Skontaktuj się z nami”, które wyglądają lepiej przy większych rozmiarach czcionek. Lubię ustawiać moje nagłówki h1 na co najmniej 48px .

ODSTĘP LITERY W NAGŁÓWKU

Odstępy między literami dopasowują odstępy w poziomie między literami. Wartość Odstępy między literami w nagłówku ma wpływ na wszystkie poziomy nagłówka (h1, h2, h3, h4, h5, h6), cytaty blokowe i tytuły slajdów.

Wskazówka dotycząca projektowania: to dobra technika projektowania polegająca na zmniejszeniu odstępów między literami w przypadku większego tekstu i zwiększeniu odstępów między literami w przypadku mniejszego tekstu . Jeśli chodzi o nagłówki, większy tekst o większej grubości czcionki (pogrubienie) może wyglądać lepiej przy zmniejszonym odstępie między literami wynoszącym -1px.

Jeśli jednak umieścisz ten sam nagłówek wielkimi literami, może się okazać, że zwiększenie odstępów między literami do 1-2 pikseli będzie wyglądać lepiej.

WYSOKOŚĆ LINII NAGŁÓWKI

Podobnie jak w przypadku wartości odstępów między literami, wysokość wiersza nagłówka wpływa na wszystkie poziomy nagłówka (h1, h2, h3, h4, h5, h6), cytaty blokowe i tytuły slajdów. Ze względu na większy rozmiar czcionki, 1em jest ustawieniem domyślnym. Myślę, że wysokość linii gdzieś pomiędzy 1em a 1,3em wygląda dobrze, zwłaszcza gdy nagłówek ma dwie lub więcej linii.

STYL CZCIONKI NAGŁÓWKA

Użyj tych opcji, aby zmienić styl czcionki nagłówków.

CZCIONKA NAGŁÓWKA I BODY

Domyślną czcionką w Divi jest Open Sans , ale Divi Theme Customizer ma prawie sto czcionek do wyboru! Skorzystaj z tych wbudowanych czcionek i przetestuj, które z nich najlepiej pasują do Twojego motywu.

Wskazówka projektowa: Aby uzyskać inspirację do parowania czcionek, możesz sprawdzić fontpair.co, który pomaga łączyć ze sobą czcionki Google. Divi nie obsługuje wszystkich tych czcionek po wyjęciu z pudełka, ale możesz wyszukać te, które Divi obsługuje, aby zobaczyć pary, które dobrze ze sobą współpracują.

KOLOR BODY LINK

Kolor linku do treści jest dziedziczony przez kolor akcentu motywu. Ale zawsze możesz to zmienić tutaj.

Wskazówka dotycząca projektowania: jeśli chcesz, możesz dodać atrybut podkreślenia do wszystkich linków do treści za pomocą dodatkowego kodu CSS (patrz koniec posta).

KOLOR TEKSTU NA KORPUSIE

Tutaj możesz zmienić kolor tekstu głównego. Popularne blogi, takie jak New York Times i Smashing Magazine, używają #333333 jako koloru tekstu. Moim zdaniem lepiej się to czyta na białym tle.

KOLOR TEKSTU NAGŁÓWKA

Tutaj możesz zmienić kolor swoich nagłówków. Jeśli trzymasz się odcienia czerni, wybrałbym odrobinę ciemniejszy niż tekst podstawowy, aby nieco się wyróżniał. Coś takiego jak #121212 zadziała.

Tło

Ta opcja ustawia tło dla twojego motywu. W przypadku motywu Divi ta opcja dotyczy tylko układu pudełka . Domyślny kolor tła to biały (#ffffff), chyba że zmienisz go tutaj. Jeśli chcesz, możesz również dodać obraz tła.

To tyle, jeśli chodzi o ustawienia układu. Po utworzeniu układu możesz zacząć przyglądać się bardziej szczegółowym elementom.

Nagłówek i nawigacja

Nagłówek i menu nawigacyjne to prawdopodobnie najważniejszy element Twojego motywu. Ta sekcja ma wiele opcji do tworzenia prawie każdego rodzaju nagłówka, jaki chcesz.

Format nagłówka

Styl nagłówka

Cztery style nagłówków mogą nadać Twojej witrynie zupełnie nowy wygląd za pomocą jednego kliknięcia. Te style to między innymi wyśrodkowane, wyśrodkowane logo w wierszu, wsuwane i pełnoekranowe.

Możesz także dodać do swojej witryny nawigację pionową, co może być unikalną funkcją. Możesz też ukryć nawigację, dopóki nie przewiniesz. Byłoby to przydatne w przypadku witryny jednostronicowej, która chce wyróżnić więcej treści w części strony widocznej na ekranie bez rozpraszania paska nawigacyjnego.

Główny pasek menu

Twój główny pasek menu to główne menu w nagłówku Twojej witryny. Możesz całkowicie dostosować wygląd menu głównego.

Wskazówka projektowa: Naprawdę musisz wiedzieć, jakie będą linki do menu, zanim zaczniesz doskonalić menu za pomocą narzędzia Divi Theme Customizer. Nie zapominaj, że zamierzasz stylizować responsywne menu, więc poświęć trochę czasu, aby upewnić się, że menu wygląda świetnie na wszystkich rozmiarach ekranu. Możesz to zrobić, klikając ikony urządzeń na dole dostosowywania lub po prostu dostosowując rozmiar przeglądarki. Jeśli jesteś zainteresowany, możesz dowiedzieć się, jak naprawić responsywną nawigację tutaj.

Ustaw pełną szerokość

Rozszerza to menu na całą szerokość okna przeglądarki.

Ukryj obraz logo

Jeśli chcesz, tutaj możesz całkowicie ukryć obraz logo z menu.

Wysokość menu

Tutaj możesz zmienić wysokość menu na jakąkolwiek chcesz. Uważaj jednak, aby wysokość menu nie była zbyt duża, ponieważ możesz marnować cenną nieruchomość na menu zamiast na zawartość strony głównej.

Maksymalna wysokość logo

Tutaj możesz zwiększyć lub zmniejszyć procent maksymalnej szerokości swojego logo, aby było większe lub mniejsze.

Rozmiar tekstu, odstępy między literami, czcionka, styl czcionki, kolor tekstu, kolor aktywnego łącza

Te opcje pozwalają dostosować łącza menu w dowolny sposób.

Kolor tła

Pozwala to zmienić kolor tła głównego menu.

Wskazówka projektowa: Jeśli użyjesz półprzezroczystych (lub całkowicie przezroczystych) kolorów dla nagłówka, Divi automatycznie nałoży nagłówek na sekcję pod spodem. Stwarza to całkiem fajny efekt. Na przykład jest to wyśrodkowany styl nagłówka z przezroczystym tłem i nagłówkiem o pełnej szerokości bezpośrednio pod nim. Zwróć uwagę, jak Divi automatycznie dostosowuje obraz tła, aby ładnie mieścił się za nagłówkiem:

Rozwijane ustawienia menu

Twoje menu rozwijane nie musi dziedziczyć stylu menu głównego. Tutaj możesz stworzyć unikalny projekt dla swojego rozwijanego menu. Możesz nawet dodać niestandardową animację podczas wyświetlania menu rozwijanego.

Dodatkowy pasek menu

Tutaj możesz dostosować dodatkowy pasek menu, korzystając z dostępnych opcji.

Po włączeniu dodatkowy pasek menu znajduje się nad głównym paskiem menu na samej górze przeglądarki. Może zawierać dodatkowe elementy, w tym adres e-mail, linki do mediów społecznościowych i dodatkowe menu.

Domyślnie menu dodatkowe pozostanie ukryte, chyba że wejdziesz do menu dodatkowego lub nie dodasz elementów w sekcji Elementy nagłówka. Aby wyświetlić menu, może być konieczne zapisanie i odświeżenie dostosowania motywu.

Naprawiono ustawienia nawigacji

Naprawiono nawigację odnosi się do stanu menu, które jest „naprawione” lub przyklejone na górze okna przeglądarki, gdy użytkownik przewinie stronę w dół. Domyślnie stała nawigacja zmniejsza wysokość, aby zapewnić większy widok do wyświetlania zawartości witryny.

Wskazówka projektowa: Możesz także ustawić stały kolor tła głównego menu na półprzezroczysty kolor, aby odsłonić część zawartości za nim. Dzięki temu jest jeszcze mniej inwazyjny, ale nadal dostępny.

Elementy nagłówka

Elementy nagłówka to dodatkowe elementy, które możesz dodać do nagłówka. Te elementy obejmują ikony społecznościowe, ikonę wyszukiwania, numer telefonu i e-mail. Oprócz ikony wyszukiwania wszystkie te elementy będą wyświetlane w menu pomocniczym.

Ikony społecznościowe

Domyślnie Divi wyświetla ikony dla Facebooka, Twittera, Google+ i RSS. Możesz edytować te profile w opcjach motywu Divi.

Stopka

Domyślnie sekcja stopki jest ukryta, chyba że jest wypełniona treścią. Nie należy również mylić stopki z dolnym paskiem, który jest domyślnie wyświetlany na samym dole strony i zawiera napisy w stopce i ikony społecznościowe.

Układ

Tutaj możesz wybrać jeden z 5 układów sekcji stopki.

Możesz także ustawić kolor tła stopki, który jest domyślnie ustawiony na #222222.

Wskazówka projektowa: Ta sekcja będzie wyświetlana na wszystkich stronach Twojej witryny (chyba że wybierzesz pusty szablon strony). Dlatego sensowne jest, aby kolor był bardziej neutralny, aby pasował do wszystkich stron Twojej witryny.

Widżety

Jeśli dodałeś widżety do sekcji stopki, możesz tutaj stylizować wygląd tych widżetów.

Widgety nie są unikalne dla Divi. Są one wbudowane w wordpress i można je znaleźć w desce rozdzielczej wordpress w obszarze Wygląd > Widgety . Tam możesz zobaczyć cztery obszary stopki, w których możesz dodawać widżety. Wszelkie widżety dodane do tych sekcji będą wyświetlane w obszarze stopki.

Możesz jednak uzyskać dostęp do obszarów widżetów bez konieczności opuszczania dostosowywania motywu (jedna z moich ulubionych rzeczy).

Elementy stopki

Tutaj możesz wybrać wyświetlanie ikon społecznościowych na dolnym pasku, tak jak w menu dodatkowym.

Menu stopki

Jeśli masz menu w stopce, możesz je tutaj zmienić.

Dolny pasek

Dolny pasek znajduje się na samym dole witryny i domyślnie wyświetla kredyty w stopce i ikony społecznościowe. Tutaj możesz dostosować styl tych elementów, w tym zmienić rozmiar i kolor czcionki ikon społecznościowych.

Edytuj napisy w stopce

Możesz również zastąpić domyślne kredyty stopki dowolnym kodem HTML, który chcesz w tym polu.

guziki

Ta sekcja określa, jakie mają być domyślne style przycisków.

Styl przycisków

Tutaj możesz dostosować styl przycisków do swojego motywu. Nie będę tutaj szczegółowo omawiał każdej opcji. Możesz przejść do naszej dokumentacji dotyczącej modułu przycisków, aby uzyskać więcej informacji na temat stylizacji przycisków.

Kolor tekstu

Jeśli zauważysz, domyślnie kolor przycisku jest dziedziczony przez kolor akcentu motywu ustawiony w Ustawieniach ogólnych. Dotyczy to tylko modułów, których tekst jest ustawiony na „ciemny”. A przyciski są białe, gdy tekst modułu jest ustawiony na „jasny”. Ale zaraz po ustawieniu niestandardowego koloru tekstu dla przycisków, ten kolor jest ustawiany zarówno dla ciemnych, jak i jasnych wersji tekstu w określonym module.

Porada dotycząca projektowania: Pozwól, aby kolor akcentu motywu ustawiał kolor tekstu przycisków, aby zachować możliwość dodawania ciemnych i jasnych wersji przycisku w modułach.

Przyciski w stylu Hover

Tutaj możesz dostosować styl stanu najechania na przyciski.

Ważne jest, aby użytkownicy zrozumieli, że to, co zamierzają kliknąć, jest w rzeczywistości przyciskiem. Dodanie efektu zawisu wzmacnia to w umysłach i zachęca je do interakcji. Bądź domyślny Divi dodaje jasne tło i animuje ikonę strzałki po prawej stronie. Ale możesz to zmienić na co chcesz.

Wskazówka projektowa: To, czy zmienisz tło na ciemniejszy czy jaśniejszy kolor, nie jest tak ważne, jak tylko upewnienie się, że przycisk się w jakiś sposób zmieni. Możesz także zwiększyć odstępy między literami lub dostosować promień obramowania, aby nadać przyciskowi wyjątkowy efekt po najechaniu kursorem.

Blog

Poczta

Ta sekcja zmienia styl treści nagłówka posta w jednym poście. Nie zmienia to wyglądu fragmentów bloga na stronie bloga ani w module bloga. Czasami nagłówki postów na blogu będą musiały wyglądać inaczej niż nagłówki w pozostałej części witryny. Tutaj możesz dokonać tych zmian.

Jeśli zdecydujesz się użyć modułu nagłówka posta, opcje te nie będą skuteczne.

Style mobilne

Uwielbiam tę sekcję. Tutaj możesz dostosować wygląd swojej witryny na urządzeniach mobilnych i zobaczyć wyniki w czasie rzeczywistym.

Style tabletów i telefonów

Możesz wybrać Tablet lub Telefon, a okno po prawej stronie Konfiguratora dostosuje się automatycznie, aby pokazać, jak strona wygląda na urządzeniu. Następnie, podobnie jak w ustawieniach ogólnych w obszarze Układ, możesz dostosować wysokość sekcji, wysokość wiersza, rozmiar tekstu ciała i rozmiar tekstu nagłówka.

Wskazówka projektowa nr 1: Jednym z dostosowań, które lubię wprowadzać w układach telefonu, jest ustawienie wysokości wiersza na „0”. Zapewnia to lepszy przepływ treści podczas przewijania na telefonie, ponieważ eliminuje odstępy między wierszami.

Porada projektowa nr 2: Znajdź skalę czcionek pasującą do Twojej witryny. Oto dobry, który lubię śledzić dla moich nagłówków:

Pulpit: 48px

Tablet: 40px

Telefon: 32px

Menu mobilne

Nie przeocz tego, bo możesz przegapić stworzenie zupełnie unikalnego nagłówka dla swojego mobilnego menu. Możesz ukryć logo tylko na urządzeniach mobilnych i zmienić kolory tła i tekstu.

Schematy kolorów

Mogą być wygodne dla szybkiego rozwiązania. Ale nie radziłbym używać schematów kolorów, jeśli planujesz później zmienić niektóre z tych kolorów w dostosowywaniu motywów. Raz ustawione kolory nie mogą być nadpisane w Customizer, ponieważ wygenerowany CSS zawiera !ważną regułę.

Moim zdaniem najlepiej pozostawić ten zestaw domyślnie.

Menu i widżety

Nie musisz już na ślepo edytować swoich menu lub widżetów w desce rozdzielczej wordpress. Teraz możesz dodawać i dostosowywać te elementy i widzieć, jak ożywają na Twojej stronie w czasie rzeczywistym. Uwielbiam wygodę!

Statyczna strona główna

Domyślnie WordPress wyświetla Twój najnowszy wpis na Twojej stronie głównej (stronie głównej). Możesz to zmienić, aby była dowolną statyczną stroną, którą chcesz w tej sekcji. Możesz także wyznaczyć swoją stronę postów (lub stronę bloga).

Nie wiedziałem o tym do czasu napisania tego posta, ale w rzeczywistości możesz wdrożyć nową stronę z poziomu dostosowywania motywów, aby służyła jako strona główna lub strona bloga bez konieczności opuszczania dostosowywania.

Dodatkowe CSS

Sekcja Dodatkowe CSS oferuje doskonałą okazję do wprowadzenia ostatnich poprawek w konfiguracji motywu. Bez względu na to, jakie zmiany stylu nie są w stanie kontrolować Konfigurator motywu Divi, możesz to zrobić tutaj za pomocą niestandardowego kodu CSS. Ponieważ Customizer pozwala zobaczyć zmiany CSS w czasie rzeczywistym, możesz wprowadzić niezbędne zmiany w swoim motywie znacznie łatwiej niż przechodzenie tam iz powrotem w zewnętrznym arkuszu stylów.

Dodatkowe przykłady CSS

Przykład #1: Dostosuj rozmiar wszystkich nagłówków

Dobrym przykładem dodatkowego CSS może być stylizacja pozostałych tagów nagłówka. Divi pozwala dostosować ustawienia czcionki nagłówka, ale dotyczy to tylko nagłówków h1. Możesz użyć pola Dodatkowy CSS, aby wprowadzić pozostałe dostosowania tagów nagłówka (h2, h3, h4 itp.). Lubię używać następującej skali: 16, 18, 21, 24, 36, 48.

h2 {
	font-size: 36px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 21px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

Przykład #2: Dopasuj dopełnienie dolnego akapitu do wysokości linii ciała

Jeśli ustawisz wysokość wiersza tekstu podstawowego na 1,7 mm, możesz również ustawić tę samą wartość dolnego wypełnienia między akapitami, aby zachować spójną siatkę linii bazowej i rytm pionowy. Innymi słowy, odległość między akapitami jest równa wysokości linii. Aby to zrobić, po prostu dodaj:

p { padding-bottom: 1.7em}

Ponieważ wartość długości em jest oparta na nadrzędnym rozmiarze czcionki, jeśli zmienisz podstawowy rozmiar czcionki na inny w dostosowywaniu motywu, wartość 1,7em zostanie odpowiednio dostosowana.

Przykład #3: Dodaj podkreślenie do swoich linków

Dodaj atrybut podkreślenia do linków treści.

a {
    text-decoration: underline;
}

Eksportowanie i importowanie ustawień Divi Customizer do następnego projektu

Moduły dostosowywania motywów Divi mają opcję przenoszenia, która umożliwia użytkownikom eksportowanie lub importowanie ustawień dostosowywania. To świetna okazja dla programistów, aby stworzyć coś w rodzaju szablonu ustawień dostosowania do wykorzystania w ich przyszłych projektach.

Po pierwsze, sugeruję poświęcenie czasu na ustalenie, jakich dostosowań dokonujesz podczas tworzenia strony internetowej. Po zidentyfikowaniu tych ustawień możesz wprowadzić te dostosowania do narzędzia Divi Theme Customizer, a następnie wyeksportować te ustawienia, aby mieć przewagę nad kolejnymi projektami. Po co robić w kółko te same rzeczy, kiedy już możesz to zrobić? Ponadto pomoże to upewnić się, że nie pominiesz żadnych ważnych dostosowań.

Aby wyeksportować ustawienia, kliknij ikonę przenośności u góry dostosowywania motywów Divi.

Nadaj nazwę eksportowanemu plikowi i kliknij przycisk „Eksportuj ustawienia dostosowywania Divi”

Teraz możesz użyć tego pliku .json w przyszłości, klikając tę ​​samą ikonę przenośności w programie Divi Theme Customizer i wybierając opcję Importuj zamiast eksportu. Następnie wystarczy przesłać plik .json i kliknąć „Importuj ustawienia Divi Customizer”.

I to wszystko.

Co zawierają ustawienia dostosowywania Divi?

Ustawienia dostosowania obejmują w zasadzie wszystko w pierwszych 7 sekcjach.

1. Ustawienia główne
2. Nagłówek i nawigacja
3. Stopka
4. guziki
5. Blog
6. Style mobilne
7. Schematy kolorów

Ostatnie 4 sekcje są specyficzne dla WordPress i nie zostaną przeniesione do innych instalacji Divi. Te sekcje obejmują:

1. Menu
2. Widżety
3. Statyczna strona główna
4. Dodatkowe CSS

Należy zauważyć, że dodatkowy CSS nie jest przenoszony. Możesz polegać na tych ustawieniach, aby zaoszczędzić czas przy kolejnej kompilacji. W takim przypadku sugeruję utworzenie motywu potomnego z tym CSS, aby można było dodać go za pomocą ustawień Customizer w następnym projekcie.

Jak przechowywane są style Divi Customizer

W przypadku Divi Customizer (wraz z opcjami Divi i Divi Builder) Divi udostępnia statyczne zasoby CSS, które mogą być buforowane przez przeglądarki, aby skrócić czas ładowania strony. Oznacza to, że style nie są drukowane na stronie, ale przechowywane w oddzielnym, statycznym pliku CSS. Za każdym razem, gdy zapisujesz swoje ustawienia Customizer, statyczny plik CSS jest aktualizowany. Obejmuje to również wszelkie dodane przez Ciebie dodatkowe CSS.

Myśli końcowe

Konfigurator motywów Divi zawiera kilka całkiem zaawansowanych opcji, a proces dostosowywania jest zarówno wygodny, jak i przyjemny w pracy. A głębsze zrozumienie tego, co te opcje mogą zrobić, z pewnością poprawi sposób tworzenia stron internetowych za pomocą Divi. Jeśli jeszcze tego nie zrobiłeś, poświęć trochę czasu na zbadanie, jakie będą optymalne ustawienia linii bazowej dla projektu, podłącz je do Customizer i utwórz plik eksportu. Będziesz zaskoczony impulsem (i pewnością), jaki zapewni Ci to, gdy rozpoczniesz nowy projekt.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!