Przejdź do głównej treści

Jak skonfigurować linie w Divi Builder

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Linie to różne układy kolumn, które można umieścić wewnątrz sekcji. Podobnie jak moduły, linie mają różne parametry dostępne po kliknięciu ikony ustawień w lewym górnym rogu linii. W tym samouczku omówimy niektóre funkcje i sposób ich wykorzystania do tworzenia bardzo unikalnych układów. W szczególności ustawienia linii można znacznie zwiększyć różnorodność układów utworzonych za pomocą Divi Builder, ponieważ tworzą one strukturę, w której przechowywane są Twoje moduły.

moduł liniowy divi builder.png

ustawienia parametry linia divi.png

Ustawienia treści

Kolor tła

Obrazy tła można zastosować do całej linii. Domyślnie linie mają przezroczysty kolor tła.

Obraz tła

Obrazy tła można zastosować do całej linii.

Wideo w tle MP4

Filmy tła można zastosować do linii. Jeśli chcesz zastosować wideo w tle, musisz pobrać wideo MP4 i WEBM i pobrać filmy tutaj.

Wideo w tle w sieci Web

Filmy tła można zastosować do linii. Jeśli chcesz zastosować wideo w tle, musisz pobrać wideo MP4 i WEBM i pobrać filmy tutaj.

Szerokość wideo w tle

Po przesłaniu filmów musisz podać tutaj szerokość filmu. Musi być równa rzeczywistej szerokości wideo, w przeciwnym razie położenie tła będzie nieprawidłowe.

Wysokość wideo w tle

Po przesłaniu filmów musisz podać tutaj wysokość filmu. Musi być równa rzeczywistej wysokości wideo, w przeciwnym razie pozycja tła będzie niepoprawna.

Pauza wideo

Jeśli chcesz, aby filmy były zatrzymywane po kliknięciu, włącz tę opcję.

Kolor tła kolumny

Do każdej kolumny z rzędu możesz przypisać jeden kolor tła.

Obraz w tle kolumny

Do każdej kolumny z rzędu możesz przypisać pojedynczy obraz tła.

Etykieta administratora

Spowoduje to zmianę etykiety modułu w generatorze w celu łatwej identyfikacji. Podczas korzystania z widoku WireFrame w Visual Builder, te etykiety pojawią się w bloku modułu interfejsu Divi Builder.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

seciton design divi builder.png

Parametry konstrukcyjne

Użyj efektu paralaksy

Jeśli chcesz użyć efektu paralaksy dla obrazu tła linii, możesz aktywować tutaj, a następnie wybrać żądaną metodę paralaksy.

Efekt paralaksy kolumnowej

Tutaj możesz wybrać, czy użyć efektu paralaksy dla obrazu tła konkretnej kolumny w linii.

Ustaw tę linię na pełną szerokość

Jeśli ta opcja jest włączona, linia obejmie całą szerokość okna przeglądarki (podobnie jak sekcja o pełnej szerokości). To świetny sposób na tworzenie ładnych układów kolumn o pełnej szerokości.

Użyj niestandardowej szerokości

Możesz także przypisać niestandardową szerokość do linii. Na przykład, jeśli chcesz dodać odmianę do kanału strony i powiększyć linię do reszty, możesz wpisać tutaj niestandardową wartość szerokości

Użyj niestandardowej szerokości rynny

Szerokość rynny dostosowuje odległość między kolumnami. Istnieją rozmiary rynn 4, zaczynając od 0. Ustawienie szerokości rynny na 1 nie spowoduje spacji między kolumnami. W połączeniu z opcją Pełna szerokość może to tworzyć efekty podobne do modułu Portfel Pełny ekran.

Wyrównaj wysokości kolumn

Jest to świetna opcja, szczególnie przydatna, gdy zastosowałeś kolory tła do poszczególnych kolumn. Włączenie tej opcji wymusza, aby wszystkie kolumny w wierszu miały tę samą wartość wysokości.

Niestandardowe wypełnienie

Jeśli chcesz dopasować wypełnienie linii, możesz to zrobić tutaj.

Margines niestandardowy

Jeśli chcesz dostosować margines linii, możesz to zrobić tutaj.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

Niestandardowe wypełnienie kolumny

Jeśli chcesz dostosować wypełnienie określonej kolumny w linii, możesz to zrobić tutaj.

Niestandardowy margines kolumny

Jeśli chcesz dostosować margines konkretnej kolumny w linii, możesz to zrobić tutaj.

opcja zaawansowana kolumna divi.png

Ustawienia zaawansowane

Identyfikator CSS

Możesz przypisać identyfikator CSS do linii, jeśli chcesz kierować go w arkuszu stylów lub za pomocą łączy kotwiczących.

Klasa CSS

Możesz przypisać klasę CSS do linii, jeśli chcesz kierować ją w arkuszu stylów.

Identyfikator kolumny CSS

Możesz przypisać identyfikator CSS do określonej kolumny w wierszu, jeśli chcesz kierować go w arkuszu stylów lub za pomocą linków kotwiczących.

Kolumna klasy CSS

Możesz przypisać klasę CSS do określonej kolumny w rzędzie, jeśli chcesz kierować ją w arkuszu stylów.

Przed

Wpis CSS tutaj, aby zastosować: przed linią główną div.

Główny element

Wpis CSS tutaj, aby zastosować do div linii głównej.

Później

Wpis CSS tutaj, aby zastosować: po div linii głównej.

Przednia kolumna

Wpisz CSS tutaj, aby zastosować: przed określonym div kolumny.

Główny element kolumny

Wpisz tutaj CSS, aby zastosować do określonej kolumny div.

Kolumna po

Wpis CSS tutaj do zastosowania: po określonej kolumnie div.

widoczność

Ta opcja pozwala kontrolować urządzenia, na których pojawia się moduł linii. Możesz wyłączyć moduł indywidualnie na tabletach, smartfonach lub komputerach stacjonarnych. Jest to przydatne, jeśli chcesz używać różnych modułów na różnych urządzeniach lub jeśli chcesz uprościć projektowanie mobilne poprzez wyeliminowanie niektórych elementów strony.

Wykorzystanie tutoriala w praktyce

Teraz, gdy sprawdziliśmy wszystkie parametry, przetestujmy niektóre z nich, aby pokazać, co jest możliwe, gdy każdy parametr jest twórczo używany. W tym przykładzie przedstawię wprowadzenie linii pełnego ekranu jako wprowadzenie. Opcja utworzenia linii „Pełny ekran” jest jedną z najbardziej wszechstronnych opcji w zestawie. Spowoduje to rozszerzenie szerokości linii do krawędzi przeglądarki, tak jak w przypadku sekcji pełnoekranowej (lub FullWidth). Jednak w przeciwieństwie do sekcji Fullwidth, linie FullWidth mogą mieć struktury kolumnowe i mogą zawierać dowolny moduł! W poniższym przykładzie utworzyłem wiersz w kolumnach 4 i dodałem kwadratowy obraz do każdej kolumny. Następnie włączyłem opcję „Pomiń tę linię w trybie pełnej szerokości”, aby przedłużyć linię do krawędzi okna przeglądarki.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

przykładowy projekt divi.jpg

Następnie zmniejszyłem rozmiar „Rynny” do „1”, aby usunąć odstępy między kolumnami linii.

usuwanie spacji między kolumnami divi.jpg

Na koniec usunąłem wypełnienie powyżej i poniżej linii, zmieniając górne i dolne wartości za pomocą opcji „Niestandardowe wypełnienie” w „0”.
modyfikacja pliku filling.jpg

Rezultatem jest całkowita transformacja wiersza, przekształcająca nasz normalny wiersz kolumn obrazu 4 w galerię obrazów o pełnej szerokości i pełnych spadach, która wygląda niesamowicie w porównaniu do zielonej sekcji poniżej. Ten sam efekt można również utworzyć za pomocą niestandardowych kolorów tła kolumny i modułów tekstowych. Możliwości są nieograniczone!

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
6 akcji
udział2
ćwierkanie1
Enregistrer3