Przegląd wszystkich sekcji Divi

Procédure

Divi builder jest zawarty w naszych pakietachhostingowych Wordpress. Jeśli chcesz uzyskać wsparcie dla DIVI builder, musisz wykupić licencję bezpośrednio na stronie Elegent theme Divi.

Wprowadzenie

LWS oferuje 3 wtyczki premium od Elegant Themes (Divi, Bloom i Monarch). Są one regularnie aktualizowane. Gdy zostaniesz klientem LWS, będziesz mieć bezpłatny dostęp do tych wtyczek, wybierając dystrybucję "Divi Builder" podczas instalacji CMS Wordpress za pomocą naszego autoinstalatora.

Jeśli masz pakiet cPanel lub zainstalowałeś już Wordpress z tą dystrybucją, ale nie masz dostępu do wszystkich motywów lub aktualizacji, poinformuj nas o tym, podając nam dane dostępu do obszaru administracyjnego swojej witryny Wordpress, aby technik mógł zaktualizować licencję.

Uwaga: aby skorzystać ze wsparcia, należy wykupić licencję Elegant Themes. LWS nie zapewnia wsparcia dla tych produktów.

Sekcje to największe bloki konstrukcyjne w kreatorze Divi. Można o nich myśleć jako o blokach ułożonych poziomo, które mogą grupować zawartość w wizualnie odrębne obszary. W Divi wszystko, co tworzysz, zaczyna się od sekcji. To opakowanie treści ma różne parametry, które można wykorzystać do robienia naprawdę świetnych rzeczy.

Jak dodać sekcję do strony

Zanim będziesz mógł dodać moduł sekcji do swojej strony, musisz najpierw przełączyć się na Divi Builder. Po zainstalowaniu motywu Divi w witrynie zauważysz przycisk Użyj Divi Build er nad edytorem postów za każdym razem, gdy tworzysz nową stronę. Kliknięcie tego przycisku aktywuje Divi Builder, dając dostęp do wszystkich jego modułów. Następnie kliknij przycisk Użyj Visual Builder, aby uruchomić kreator w trybie wizualnym. Możesz także kliknąć przycisk Użyj Visual Builder podczas przeglądania witryny z przodu, jeśli jesteś zalogowany do pulpitu nawigacyjnego WordPress.

Po wejściu do Visual Builder możesz kliknąć niebieski przycisk +, aby dodać nową sekcję do swojej strony. Zostaniesz powitany przez wyskakujące okienko, które pozwala dodać dowolny z trzech typów sekcji Divi. Typy te obejmują: Normalny, Specjalny i Pełny ekran.

Po dodaniu sekcji zostaniesz powitany listą opcji dla sekcji. Opcje te są podzielone na trzy główne grupy: Treść, Styl i Zaawansowane.

Opcje zawartości sekcji

Na karcie Zawartość znajdują się wszystkie elementy zawartości sekcji. W przypadku sekcji te elementy zawartości są ograniczone do elementów tła, takich jak obrazy tła i filmy.

Obraz tła

Jeśli zostanie zdefiniowany, ten obraz będzie używany jako tło dla tego modułu. Aby usunąć obraz tła, wystarczy usunąć adres URL z pola parametrów.

Kolor tła

Jeśli zostanie zdefiniowany, ten kolor będzie używany jako tło tego modułu. Aby usunąć kolor tła, wystarczy usunąć go z pola ustawień.

Wideo w tle MP4 + WEBM

Wszystkie filmy muszą być przesłane w formatach .MP4 i .WEBM, aby zapewnić maksymalną kompatybilność we wszystkich przeglądarkach. Tła wideo są wyłączone na urządzeniach mobilnych. Zamiast tego zostanie użyty obraz tła. Z tego powodu należy zdefiniować zarówno obraz tła, jak i wideo w tle, aby zapewnić najlepsze wyniki. Ważna uwaga: Aby format wideo MP4 i/lub WEBM działał we wszystkich przeglądarkach, serwer musi mieć wyznaczony prawidłowy typ MIME. Więcej informacji na temat używania .htaccess do definiowania typów MIME można znaleźć pod tym linkiem. Jeśli zauważysz, że Twoje filmy nie są odtwarzane w niektórych przeglądarkach, prawdopodobnie jest to przyczyna.

Szerokość wideo w tle

Aby rozmiar filmów był prawidłowy, należy wprowadzić tutaj dokładną szerokość (w pikselach) filmu.

Wysokość wideo w tle

Aby rozmiar wideo był prawidłowy, należy wprowadzić tutaj dokładną wysokość (w pikselach) wideo.

Etykieta administratora

Na tej liście rozwijanej można dodać etykietę administratora, która będzie wyświetlana w kreatorze tylnym, a także w widoku szkieletu kreatora wizualnego.

Opcje stylu sekcji

Na karcie stylu znajdują się wszystkie opcje stylu sekcji, takie jak rozmiar i odstępy. Jest to karta używana do zmiany wyglądu sekcji. Każdy typ sekcji Divi ma długą listę ustawień projektu, których można użyć do zmiany niemal wszystkiego.

Pokaż wewnętrzny cień

Tutaj możesz wybrać, czy twoja sekcja ma wewnętrzny cień. Może to wyglądać świetnie, gdy masz kolorowe tła lub obrazy tła.

Użyj efektu paralaksy

Jeśli ta opcja jest włączona, obraz tła pozostanie nieruchomy podczas przewijania, tworząc zabawny efekt paralaksy. Możesz także wybrać jedną z dwóch metod paralaksy: CSS i True Parallax.

Niestandardowe wypełnienie

Tutaj możesz dostosować wypełnienie sekcji do określonych wartości lub pozostawić puste, aby użyć domyślnego wypełnienia.

Sekcja opcji zaawansowanych

W zakładce Zaawansowane znajdują się opcje, które mogą okazać się przydatne dla bardziej doświadczonych projektantów stron internetowych, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do swojej sekcji. Możesz także zastosować niestandardowe klasy CSS i identyfikatory do sekcji, które można wykorzystać do dostosowania sekcji w pliku style.css motywu potomnego.

IDENTYFIKATOR CSS

Wprowadź opcjonalny identyfikator CSS, który będzie używany dla tej sekcji. Identyfikator może być użyty do utworzenia niestandardowego stylu CSS lub do utworzenia linków do określonych sekcji strony.

Klasa CSS

Wprowadź opcjonalne klasy CSS, które mają być używane w tej sekcji. Klasa CSS może być użyta do utworzenia niestandardowego stylu CSS. Możesz dodać kilka klas, oddzielając je spacją. Klasy te mogą być używane w motywie Divi lub w niestandardowym CSS dodanym do strony lub witryny za pomocą Opcji motywu Divi lub Ustawień strony Divi Builder.

Niestandardowy kod CSS

Niestandardowy kod CSS można zastosować do sekcji tutaj. W sekcji Niestandardowy CSS znajduje się pole tekstowe, w którym można dodać niestandardowy CSS bezpośrednio do każdego elementu. Wpis CSS w tych parametrach jest już zawinięty w znaczniki stylu, więc wszystko, co musisz zrobić, to wprowadzić reguły CSS oddzielone średnikami.

Widoczność

Ta opcja pozwala kontrolować urządzenia, na których wyświetlana jest sekcja. Możesz wyłączyć swoją sekcję na tabletach, smartfonach lub komputerach stacjonarnych. Jest to przydatne, jeśli chcesz używać różnych sekcji na różnych urządzeniach lub jeśli chcesz uprościć projekt mobilny, eliminując niektóre sekcje ze strony.

Korzystanie z sekcji pełnoekranowych

Sekcje pełnoekranowe zapewniają dostęp do nowego zestawu modułów o pełnej szerokości. Moduły te działają nieco inaczej, ponieważ wykorzystują pełną szerokość przeglądarki. Moduły pełnoekranowe można umieszczać tylko w sekcjach pełnoekranowych.

Po dodaniu nowej sekcji pełnoekranowej do strony można kliknąć przycisk Dodaj moduły w sekcji, aby dodać moduł pełnoekranowy. W przeciwieństwie do zwykłej sekcji, nie ma pojęcia wierszy lub kolumn, ponieważ te moduły zawsze wykorzystują 100% ekranu. Moduły pełnoekranowe to doskonały sposób na dodanie wizualnej przerwy na stronie!

Dobrym przykładem modułu o pełnej szerokości jest suwak o pełnej szerokości. Ten pełnowymiarowy suwak działa jak zwykły suwak, z wyjątkiem tego, że rozszerza się do 100% swojej szerokości. Wyświetlanie slidera w takiej skali może być dość zaskakujące, wystarczy spojrzeć na nasze demo divi, aby zobaczyć przykład.

Korzystanie z wyspecjalizowanych sekcji

Specjalistyczne sekcje zostały stworzone, aby umożliwić bardziej zaawansowane struktury kolumn. W przeciwieństwie do zwykłych sekcji, gdy używasz sekcji specjalistycznej, możesz dodawać złożone warianty kolumn wraz z pionowymi paskami bocznymi o pełnej rozpiętości, bez dodawania niechcianych przerw na stronie. Tego typu układy nie są możliwe w przypadku zwykłych sekcji.

Po dodaniu sekcji specjalistycznej do strony zauważysz, że jeden obszar ma przycisk "dodaj moduł", podczas gdy drugi ma przycisk "wstaw wiersz". Obszar "wstaw moduł" reprezentuje pionowy pasek boczny. Można tu dodać dowolną liczbę modułów w jednym rzędzie, które zajmą pionową szerokość sekcji, przylegając do budowanej obok struktury kolumn. Klikając "wstaw wiersz", możesz wstawić dodatkowe wiersze po lewej/prawej stronie paska bocznego. W pewnym sensie można to postrzegać jako dodawanie wierszy w wierszach!

Rezultatem jest możliwość stworzenia niemal każdej struktury kolumn, jaką można sobie wymarzyć, a niezależnie od wybranej struktury, upewniliśmy się, że kombinacja jest idealna! Oto przykład układu stworzonego przy użyciu wyspecjalizowanych sekcji. Jak widać, efektem jest podwójny układ paska bocznego, z dwoma pionowymi liniami po lewej / prawej stronie złożonej struktury kolumn pośrodku.

Prezentacja wideo na podglądzie wszystkich sekcji Divi

Podsumowanie

Dziękujemy za śledzenie tego samouczka!

Wiesz już, jak korzystać z różnych sekcji dostępnych w Divi.

Do zobaczenia wkrótce w nowym samouczku :)

Aby dowiedzieć się więcej o Elegant Themes Divi i jak z niego korzystać

Jak utworzyć nowy projekt za pomocą Divi

Jak zaktualizować wtyczkę Divi

> Zobacz naszą sekcję pomocy Elegant Themes Divi