Jak korzystać z wbudowanych niestandardowych wejść CSS Divi do zaawansowanej edycji responsywnej?

Divi ma wbudowaną responsywną edycję projektu, która bardzo ułatwia dostosowanie stylu witryny na ekranie komputera, tabletu lub telefonu (bez znajomości CSS). Część wbudowanej edycji responsywnej Divi obejmuje uproszczoną metodę wprowadzania bardziej zaawansowanych, responsywnych zmian w projekcie za pomocą niestandardowego CSS. Jest to znacznie wygodniejsze niż poleganie na zewnętrznym arkuszu stylów z zapytaniami o media. Możesz nawet dokonywać wizualnych korekt CSS w czasie rzeczywistym dla każdego wyświetlacza urządzenia, eliminując wiele domysłów z responsywnego projektu.

W tym samouczku pokażę, jak wprowadzać wygodne, responsywne zmiany projektu za pomocą niestandardowego CSS, aby można było wprowadzać zaawansowane poprawki projektu, które mogą być niedostępne we wbudowanych opcjach projektowania Divi.

Zacznijmy.

Wbudowane punkty przerwania Divi do responsywnej edycji

Divi ma trzy ogólne responsywne punkty przerwania (punkty, w których projekt zmienia się w zależności od szerokości przeglądarki), które są wbudowane w ustawienia dowolnego elementu w Divi Builder. Te trzy punkty przerwania mają na celu przede wszystkim ułatwienie określonych ustawień projektowych dla wyświetlaczy komputerów stacjonarnych, tabletów i telefonów.

Trzy główne responsywne punkty przerwania Divi dla wyświetlaczy komputerów stacjonarnych, tabletów i telefonów są następujące:

• Komputer stacjonarny: 981 pikseli i więcej
• Tablet: od 980 do 768 pikseli
• Telefon komórkowy: 767px i mniej

Te trzy punkty przerwania są takie same we wszystkich responsywnych kartach projektowych w kreatorze Divi, nie tylko w przypadku zaawansowanego niestandardowego CSS. Tak więc za każdym razem, gdy wdrażasz responsywne karty projektu, wszelkie stylizacje wykonane w tych kartach będą wyświetlane w zakresie tych trzech głównych responsywnych punktów przerwania.

Warto również wspomnieć, że te ogólne punkty przerwania dla wyświetlaczy urządzeń nie są jedynymi punktami przerwania wbudowanymi w strukturę motywu Divi. Możesz dowiedzieć się o nich w naszym artykule na temat identyfikowania responsywnych punktów przerwania Divi.

Zrozumienie niestandardowych pól wejściowych CSS Divi

Kiedy dostosowujesz element (sekcję, wiersz lub moduł) w kreatorze Divi, każda opcja projektu odpowiada (lub celom) określonej części tego elementu. Na przykład, edytując moduł tekstowy, możesz wybrać dowolną część tego modułu, korzystając z wbudowanych ustawień (np. Czcionka nagłówka 2, dopełnienie z lewej strony itp.).

Podobnie, gdy dostosowujesz element Divi (sekcję, wiersz lub moduł) za pomocą zaawansowanych niestandardowych pól wejściowych CSS, każde pole wejściowe będzie odpowiadać (lub celować) całości lub niektórym częściom tego elementu Divi. Liczba dostępnych niestandardowych pól CSS będzie się różnić w zależności od elementu, który stylizujesz. Moduł tekstowy może mieć tylko trzy niestandardowe pola wprowadzania elementów CSS (przed, główny i po), ale moduł wezwania do działania będzie zawierał dodatkowe pola na tytuł, opis i przycisk. Dzieje się tak, ponieważ moduł zawiera więcej części, na które można kierować w ramach tego elementu modułu.

Oto ilustracja różnych niestandardowych pól wejściowych CSS dostępnych dla modułu Call to Action.

Każde niestandardowe pole wejściowe CSS odnosi się do określonej klasy CSS w elemencie. Aby zobaczyć klasę będącą celem konkretnego elementu, po prostu najedź na element i kliknij ikonę znaku zapytania. Tam zobaczysz docelową klasę CSS.

Dlatego nie musisz dodawać klasy CSS do fragmentu kodu CSS w polu wprowadzania. Jeśli to zrobisz, kod nie zadziała.

Zamiast tego po prostu dodaj właściwości CSS bezpośrednio do pola, które chcesz zastosować do klasy, która jest już celem.

Jak dodać niestandardowy CSS do responsywnych punktów przerwania projektu?

Aby uzyskać dostęp do trzech głównych responsywnych punktów przerwania projektu dla dowolnego pola wejściowego CSS, po prostu najedź na element i kliknij ikonę tabletu. Następnie zobaczysz trzy responsywne karty projektu.

Teraz wszystko, co musisz zrobić, to użyć zakładek, aby dodać CSS do dowolnego z trzech wyświetlaczy urządzenia (komputera, tabletu i telefonu).

Załóżmy na przykład, że chcesz, aby przycisk promocyjny wezwania do działania obejmował całą szerokość modułu na tablecie i telefonie, ale nie na komputerze. Można wybrać kartę tabletu w polu wprowadzania przycisku Promo i dodać „wyświetlanie: blok;”.

Zwróć uwagę, że po wybraniu karty tabletu tryb widoku Divi Builder przełącza się na tryb widoku tabletu (szerokość 768 pikseli), aby lepiej zobaczyć, jak projekt będzie wyglądał w czasie rzeczywistym.

Mniejsze urządzenie domyślnie dziedziczy CSS większych urządzeń

Domyślnie kod zastosowany do zakładki tabletu zostanie również przejęty przez wyświetlacz telefonu. Aby pomóc nam o tym przypomnieć, Divi dodaje szary kod zastępczy do pola wprowadzania z tym samym kodem, który został dodany do wyświetlacza tabletu.

Powodem, dla którego wyświetlacz telefonu dziedziczy wyświetlacz tabletu, jest to, że rzeczywisty punkt przerwania (zapytanie o media) dla wyświetlacza tabletu na zapleczu jest ustawiony na „max-width: 980px;” co oznacza, że ​​kod dodany do tabletu zostanie zastosowany również na telefonie, ponieważ wyświetlacz telefonu ma mniej niż 980 pikseli szerokości. Jeśli więc chcesz zastosować inny styl do telefonu, musisz dodać dodatkowy kod do pola wprowadzania na karcie telefonu.

UWAGA: Jeśli dodasz również niestandardowy CSS do wyświetlacza telefonu, Divi inteligentnie zmieni zapytanie o media dla tabletu na zapleczu na bardziej precyzyjny zakres od 768 do 980 pikseli (lub maksymalna szerokość: 980 pikseli i minimalna szerokość: 768 pikseli).

Jaki niestandardowy CSS jest stosowany na zapleczu

Załóżmy, że dodajemy niestandardowy kod CSS do wszystkich trzech responsywnych kart (komputer, tablet i telefon).

Na pulpicie umieszczamy przycisk w prawym dolnym rogu modułu.

Na tablecie zastępujemy kod pulpitu i po prostu rozciągamy przycisk na pełną szerokość modułu.

Na telefonie nadpisujemy CSS tabletu i przywracamy wyświetlacz do normy.

Jeśli sprawdzimy CSS na zapleczu, zobaczysz, że Divi organizuje kod za pomocą następujących zapytań o media, więc nie musisz:

Pulpit:

@media only screen and (min-width: 981px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

Tablet:

@media only screen and (max-width: 980px) and (min-width: 768px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: block;
}

Telefon

@media only screen and (max-width: 767px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: inline-block;
}

Jak CSS jest przechowywany w Divi?

W ramach wbudowanej optymalizacji prędkości Divi wszystkie style w Divi Builder (w tym niestandardowy CSS) zostaną połączone, zminimalizowane i zapisane jako statyczny plik CSS w celu szybszego ładowania strony. Jeśli więc chcesz ominąć potrzebę dodawania niestandardowego CSS za pomocą motywu podrzędnego, możesz skorzystać z wbudowanych responsywnych danych wejściowych CSS, nie martwiąc się o spowolnienie witryny.

Więcej informacji znajdziesz w naszym poście, jak przyspieszyć działanie witryny Divi.

Końcowe przemyślenia

Mamy nadzieję, że ten post pomoże ci lepiej zrozumieć, jak korzystać z wbudowanych niestandardowych pól wprowadzania CSS Divi, aby wprowadzać wygodne, responsywne zmiany projektu witryny.

Większość ludzi nie będzie musiała zapuszczać się na kartę Zaawansowane, aby dodać niestandardowy kod CSS do swojego projektu. Divi ma tak wiele wbudowanych opcji, że nawet zaawansowani użytkownicy rzadko będą mieli potrzebę korzystania z niestandardowego CSS. Jeśli jednak nadejdzie czas, kiedy potrzebujesz zaawansowanej stylizacji, warto wiedzieć, jak łatwo jest to zrobić w Divi.

Jakie masz doświadczenia z niestandardowymi wejściami CSS Divi?