Przejdź do głównej treści

Samouczek Divi: Jak korzystać z modułu Slide

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. [Zalecana]

Divi umożliwia umieszczanie suwaków w sekcjach o pełnej szerokości, dzięki czemu kursory rozciągają się na szerokość przeglądarki. Suwaki (Slajdy) Divi obsługuje tła paralaksy, a także tła wideo!

użyj suwaka na divi.png

Jak dodać moduł Diapo o pełnej szerokości z Divi

Zanim dodasz do swojej strony moduł suwaka o pełnej szerokości, musisz najpierw przejść do Divi Builder. Po zainstalowaniu motywu Divi w witrynie zauważysz przycisk Użyj Divi Buildernad wydawcą za każdym razem, gdy tworzysz nową stronę. Kliknij ten przycisk, aby aktywować Divi Builder i uzyskać dostęp do wszystkich modułów Divi Builder. Następnie kliknij przycisk Użyj Visual Builder aby uruchomić generator w trybie wizualnym. Możesz również kliknąć przycisk Użyj Visual Builder kiedy przeglądasz swoją witrynę na pierwszym planie, jeśli jesteś podłączony do pulpitu WordPress.

użyj visual builder divi.png

Po przejściu do programu Visual Builder można kliknąć szary przycisk plus, aby dodać nowy moduł do swojej strony. Nowe moduły można dodawać tylko w rzędach. Jeśli zaczynasz nową stronę, nie zapomnij najpierw dodać linii do swojej strony.

stwórz samouczek slajdów divi wordpress.png

Zlokalizuj moduł kursora o pełnej szerokości na liście modułów i kliknij go, aby dodać go do swojej strony. Lista modułów jest przeszukiwalna, co oznacza, że ​​możesz również wpisać słowo "Slajd", a następnie kliknij Enter, aby automatycznie znaleźć i dodać moduł suwaka o pełnej szerokości! Po dodaniu modułu zostaniesz przywitany przez listę opcji modułu. Te opcje są podzielone na trzy główne grupy: Treść , Koncepcja et zaawansowany .

Przykład użycia przykładu: Dodaj sekcję bohatera o pełnej szerokości slidera do swojej strony głównej

Suwak o pełnej szerokości to świetny sposób na prezentowanie wielu wezwań do działania ponad próg Twojej strony głównej. Połączenie obrazów i treści może naprawdę nadać twojej sekcji profesjonalną atmosferę, która się wyróżnia.

W tym przykładzie dodam slajd o pełnej szerokości, aby służyć jako główna sekcja na stronie głównej.

utwórz slajd w pełnej szerokości example.jpg

Korzystając z programu Visual Builder, dodaj sekcję o pełnej szerokości do górnej części strony internetowej. Następnie włóż moduł suwaka Fullwidth do nowej sekcji. Na karcie Zawartości treści slajdu o pełnej szerokości kliknij + Dodaj nowy element aby utworzyć swój pierwszy slajd.

utwórz slajd divi.png

W ustawieniach slajdów pierwszego slajdu zaktualizuj następujące opcje:

Opcje zawartości

En-głowa : [wprowadź tytuł slajdu] Tekst przycisku : [wpisz tekst przycisku] Treść : [wprowadź treść tekstową slajdu] Adres URL przycisku : [wprowadź docelowy adres URL przycisku Slajd] Obraz tła : [wprowadź obraz, który będzie służyć jako tło slajdu]

Opcje projektowania

Użyj nakładki w tle : TAK
Kolor nakładki w tle : rgba (0,0,0,0.2) Ta nakładka nieco przyciemnia obraz tła, aby tekst był bardziej czytelny.

slide divi blogpascher.png

Zapisz ustawienia slajdów

Teraz zduplikuj utworzony slajd i zaktualizuj nowy slajd o nowe treści, jeśli to konieczne. Powtórz to dla wszystkich slajdów, które chcesz dodać.

duplikuj slajd divi.png

To wszystko. W tym przykładzie uwzględniam tylko dwa slajdy, ale wynikiem jest skuteczny kursor bohatera o pełnej szerokości z wieloma wezwaniami do działania, które zachęcają użytkownika do kliknięcia przycisku w celu uzyskania dalszych informacji. Ponieważ to jest twoje główne wezwanie do działania na twojej stronie, sugeruję wykonanie podzielonych testów na twojej pełnej szerokości slajdu za pomocą Divi Leads i zobaczenie, który z nich najlepiej się konwertuje.

przykład slajd divi dem.gif

Przesuń opcje pełnej zawartości

Na karcie treści znajdziesz wszystkie elementy treści modułu, takie jak tekst, obrazy i ikony. Wszystko, co kontroluje co pojawia się w twoim module zawsze znajdzie się na tej karcie.

slide divi section content.png

strzałki

Wybierz, czy chcesz wyświetlić strzałki lewej i prawej strzałki nawigacyjnej.

sterownica

Wybierz, czy wyświetlić przyciski kółka / wskaźniki slajdów u dołu kursora.

Etykieta administratora

Spowoduje to zmianę etykiety modułu w konstruktorze w celu ułatwienia identyfikacji. Podczas korzystania z widoku WireFrame w programie Visual Builder etykiety te pojawiają się w bloku modułów interfejsu Divi Builder.

Opcje projektowania modułu suwaka

Na karcie Projektowanie znajdują się wszystkie opcje stylu modułu, takie jak czcionki, kolory, rozmiary i odstępy. To jest karta, której użyjesz, aby zmienić wygląd swojego modułu. Każdy moduł Divi ma długą listę parametrów projektowych, których można użyć do zmiany czegokolwiek.

projekt sekcji slajdów divi.png

Usuń wewnętrzny cień

Domyślnie cień wewnętrzny jest wyświetlany na suwaku. Jeśli chcesz wyłączyć ten cień, możesz to zrobić za pomocą tego ustawienia.

Efekt paralaksy

Włączenie tej opcji spowoduje, że obrazy tła będą miały stałą pozycję podczas przewijania. Pamiętaj, że gdy to ustawienie jest włączone, Twoje obrazy skalują Twoje obrazy do wysokości przeglądarki.

Czcionka nagłówka

Możesz zmienić czcionkę tekstu nagłówka, wybierając żądaną czcionkę z rozwijanego menu. Divi zawiera dziesiątki dużych czcionek z czcionkami Google. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na twojej stronie. Możesz także dostosować styl tekstu za pomocą pogrubienia, kursywy, wielkich i podkreślonych opcji.

konstrukcja czcionki sekcji slajdów lentete.png

Rozmiar czcionki nagłówka

Tutaj możesz zmienić rozmiar tekstu w nagłówku. Możesz przeciągnąć suwak zasięgu, aby zwiększyć lub zmniejszyć rozmiar tekstu lub wpisać wartość żądanego rozmiaru tekstu bezpośrednio do pola wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Kolor tekstu nagłówka

Domyślnie wszystkie kolory tekstu Divi są wyświetlane jako białe lub ciemnoszare. Jeśli chcesz zmienić kolor tekstu nagłówka, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.

Rozstaw nagłówków

Odstępy liter wpływają na przestrzeń między każdą literą. Jeśli chcesz zwiększyć odstęp między literami w tekście nagłówka, użyj suwaka zasięgu, aby dostosować spację lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Wysokość linii nagłówka

Wysokość linii wpływa na przestrzeń między wierszami tekstu nagłówka Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zasięgu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w linii. pole wprowadzania po prawej stronie kursora. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Policja Ciała

Możesz zmienić czcionkę swojego ciała, wybierając żądaną czcionkę z rozwijanego menu. Divi zawiera dziesiątki dużych czcionek z czcionkami Google. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na twojej stronie. Możesz także dostosować styl tekstu za pomocą pogrubienia, kursywy, wielkich i podkreślonych opcji.

Rozmiar czcionki ciała

Tutaj możesz dostosować rozmiar tekstu swojego ciała. Możesz przeciągnąć suwak zasięgu, aby zwiększyć lub zmniejszyć rozmiar tekstu lub wpisać wartość żądanego rozmiaru tekstu bezpośrednio do pola wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

przekrój konstrukcji moduł przesuwny divi.png

Kolor tekstu w kolorze

Domyślnie wszystkie kolory tekstu Divi są wyświetlane jako białe lub ciemnoszare. Jeśli chcesz zmienić kolor tekstu, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.

Rozstawianie liter ciała

Odstępy liter wpływają na przestrzeń między każdą literą. Jeśli chcesz zwiększyć odstęp między literami w tekście, użyj suwaka zasięgu, aby dostosować spację lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Wysokość linii ciała

Wysokość linii wpływa na przestrzeń między wierszami w twoim ciele Jeśli chcesz zwiększyć odstęp między liniami, użyj suwaka zasięgu, aby dostosować spację lub wprowadź żądaną wielkość w polu wprowadzania znajduje się po prawej stronie kursora. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Górna wyściółka

Ten parametr kontroluje wewnętrzną przestrzeń między górną częścią modułu a treścią tekstową w module. Jeśli chcesz zwiększyć lub zmniejszyć to miejsce, wprowadź tutaj żądaną wartość. Na przykład, aby zmniejszyć całkowitą przestrzeń i rozmiar suwaka, można wprowadzić wartość 100 px. Możesz także wprowadzić wartość procentową, na przykład 10%, aby wysokość była bardziej dynamiczna.

Dolna wyściółka

To ustawienie kontroluje wewnętrzną przestrzeń między dnem modułu a treścią tekstową w module. Jeśli chcesz zwiększyć lub zmniejszyć to miejsce, wprowadź tutaj żądaną wartość. Na przykład, aby zmniejszyć całkowitą przestrzeń i rozmiar suwaka, można wprowadzić wartość 100 px. Możesz także wprowadzić wartość procentową, na przykład 10%, aby wysokość była bardziej dynamiczna.

Łatwo stwórz swoją stronę internetową z Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestańcie słono płacić za to, co możecie zrobić sami. [Bezpłatny]

Użyj niestandardowych stylów dla przycisku

Włączenie tej opcji ujawnia różne ustawienia dostosowywania dla przycisków, których możesz użyć do zmiany wyglądu przycisku w module.

Rozmiar tekstu przycisku

Parametr ten może być używany, aby zwiększyć lub zmniejszyć rozmiar tekstu w przycisku. Przycisk zmienia się wraz ze wzrostem i zmniejszeniem rozmiaru tekstu.

Kolor tekstu przycisku

Domyślnie przyciski przyjmują kolor akcentu kompozycji zgodnie z definicją w dostosowywaniu kompozycji. Ta opcja umożliwia przypisanie niestandardowego koloru tekstu do przycisku w tym module. Wybierz własny kolor za pomocą próbnika kolorów, aby zmienić kolor przycisku.

divi.png kolor przycisku

Kolor tła przycisku

Domyślnie przyciski mają przezroczysty kolor tła. Można to zmienić, wybierając żądany kolor tła w selektorze kolorów.

Szerokość obramowania przycisku

Wszystkie przyciski posiadają obramowanie Divi 2px domyślnie. Ta granica może zostać zwiększona lub zmniejszona za pomocą tego parametru. Granice można usunąć, wprowadzając wartość 0.

Kolor obramowania przycisku

Domyślnie obramowanie przycisku zmienia się na kolor akcentujący kompozycji zdefiniowany w dostosowywaniu kompozycji. Ta opcja umożliwia przypisanie niestandardowego koloru obramowania do przycisku w tym module. Wybierz własny kolor, używając selektora kolorów, aby zmienić kolor obramowania przycisku.

Promień obramowania przycisku

Promień obramowania wpływa na okrągłość narożników przycisków. Domyślnie przyciski w Divi mają mały promień obramowania, który zaokrągla rogi pikseli 3. Możesz zmniejszyć tę wartość do 0, aby utworzyć kwadratowy przycisk lub znacznie go zwiększyć, aby utworzyć przyciski z okrągłymi krawędziami.

Rozstawianie liter przycisku

Odstępy liter wpływają na przestrzeń między każdą literą. Jeśli chcesz zwiększyć odstęp między literami w tekście przycisku, użyj suwaka zasięgu, aby dostosować spację lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Czcionka przycisku

Możesz zmienić czcionkę tekstu przycisku, wybierając żądaną czcionkę z rozwijanego menu. Divi zawiera dziesiątki dużych czcionek z czcionkami Google. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na twojej stronie. Możesz także dostosować styl tekstu za pomocą pogrubienia, kursywy, wielkich i podkreślonych opcji.

Dodaj ikonę przycisku

Wyłączone, to ustawienie usunie ikony z przycisku. Domyślnie wszystkie przyciski Divi wyświetlają ikonę strzałki na zawisie.

Ikona przycisku

Jeśli ikony są włączone, możesz użyć tego ustawienia, aby wybrać ikonę do użycia w swoim przycisku. Divi ma różne ikony do wyboru.

Kolor ikony przycisku

Ustawienie tego ustawienia zmieni kolor ikony wyświetlanej na przycisku. Domyślnie kolor ikony jest taki sam jak kolor tekstu przycisków, ale to ustawienie umożliwia niezależną regulację koloru.

Przycisk umieszczania ikon

Możesz wyświetlić ikonę przycisku po lewej lub prawej stronie przycisku.

Pokaż tylko ikonę, gdy przycisk przewraca się

Domyślnie ikony przycisków są wyświetlane tylko podczas przewracania. Jeśli chcesz, aby ikona była zawsze wyświetlana, wyłącz to ustawienie.

Przytrzymaj kolor tekstu przycisku

Gdy przycisk jest unosił się nad użytkownika, zostanie użyty ten kolor. Kolor zmieni się z podstawowego koloru zdefiniowanego w poprzednich ustawieniach.

Najedź na kolor tła przycisku

Gdy przycisk jest unosił się nad użytkownika, zostanie użyty ten kolor. Kolor zmieni się z podstawowego koloru zdefiniowanego w poprzednich ustawieniach.

Przycisk Obramowania Koloru

Gdy przycisk jest unosił się nad użytkownika, zostanie użyty ten kolor. Kolor zmieni się z podstawowego koloru zdefiniowanego w poprzednich ustawieniach.

Przesuń kursor na obramowanie

Gdy przycisk jest unosił się nad użytkownika, zostanie wykorzystana ta wartość. Wartość zmieni się z wartości bazowej zdefiniowanej w poprzednich parametrach.

Przycisk odstępu między nutami

Gdy przycisk jest unosił się nad użytkownika, zostanie wykorzystana ta wartość. Wartość zmieni się z wartości bazowej zdefiniowanej w poprzednich parametrach.

Zaawansowane opcje modułu przesuwnego o pełnej szerokości

Na karcie Zaawansowane znajdziesz opcje, które bardziej doświadczeni projektanci stron internetowych mogą okazać się przydatni, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do jednego z wielu elementów modułu. Do modułu można również zastosować niestandardowe klasy i identyfikatory CSS, które można wykorzystać do dostosowania modułu w pliku style.css kompozycji podrzędnej.

przednia sekcja moduł slajdów divi.png

Identyfikator CSS

Wprowadź opcjonalny identyfikator CSS, który będzie używany dla tego modułu. Identyfikatora można użyć do utworzenia niestandardowego stylu CSS lub do utworzenia linków do poszczególnych sekcji strony.

Klasa CSS

Wprowadź opcjonalne klasy CSS, które będą używane dla tego modułu. Do utworzenia niestandardowego stylu CSS można użyć klasy CSS. Możesz dodać wiele klas oddzielonych spacją. Te klasy mogą być używane w Twoim dziecięcym motywie Divi lub niestandardowym arkuszu stylów CSS dodawanym do strony lub witryny internetowej przy użyciu opcji motywu Divi lub ustawień strony Divi Builder.

Niestandardowy CSS

Niestandardowy CSS można również zastosować do modułu i jednego z wewnętrznych elementów modułu. W sekcji Custom CSS znajdziesz pole tekstowe, w którym możesz dodać niestandardowe arkusze stylów CSS bezpośrednio do każdego elementu. Pozycje CSS w tych parametrach są już zapakowane w znaczniki stylu. Po prostu wprowadź reguły CSS oddzielone średnikami.

Automatyczna animacja

Jeśli chcesz, aby kursor przesuwał się automatycznie, bez konieczności klikania następnego przycisku, włącz tę opcję, a następnie dostosuj prędkość obrotową poniżej, jeśli chcesz.

Automatyczna prędkość animacji (w ms)

Tutaj możesz określić, jak szybko kursor znika pomiędzy poszczególnymi slajdami, jeśli opcja "Automatyczna animacja" jest włączona powyżej. Im wyższa liczba, tym dłuższa przerwa między każdym obrotem.

Kontynuuj automatyczne przesuwanie po najechaniu myszą

Włączenie tego umożliwi automatyczne przesuwanie myszy po najechaniu myszą.

Ukryj zawartość na urządzeniach mobilnych

W miarę zmniejszania się rozmiaru ekranu na urządzeniach mobilnych, ekran staje się bardziej wartościowy. Czasami dobrze jest wyłączyć niektóre mniej ważne elementy suwaka, aby zmniejszyć rozmiar suwaka i uczynić go bardziej czytelnym. Włączenie tego ustawienia powoduje ukrycie tekstu kursora na telefonie komórkowym.

Ukryj wezwanie do działania na komórce

W miarę zmniejszania się rozmiaru ekranu na urządzeniach mobilnych, ekran staje się bardziej wartościowy. Czasami dobrze jest wyłączyć niektóre mniej ważne elementy suwaka, aby zmniejszyć rozmiar suwaka i uczynić go bardziej czytelnym. Włączenie tego ustawienia spowoduje ukrycie wywołania kursora w mobilnych przyciskach akcji.

Wyświetl mobilny obraz / wideo

W miarę zmniejszania się rozmiaru ekranu na urządzeniach mobilnych, ekran staje się bardziej wartościowy. Czasami dobrze jest wyłączyć niektóre mniej ważne elementy suwaka, aby zmniejszyć rozmiar suwaka i uczynić go bardziej czytelnym. Włączenie tego ustawienia powoduje wyświetlanie obrazów slajdów i filmów na urządzeniach mobilnych (są one domyślnie wyłączone).

widoczność

Ta opcja pozwala kontrolować urządzenia, na których pojawia się twój moduł. Możesz wyłączyć moduł na tabletach, smartfonach lub pulpitach indywidualnie. Jest to przydatne, jeśli chcesz korzystać z różnych modułów na różnych urządzeniach lub jeśli chcesz uprościć projektowanie mobilne, eliminując pewne elementy strony.

Opcje zawartości dla elementów modułu slajdów o pełnej szerokości

moduł pojedynczego elementu divi diapo.png

Tytuł

Ustaw tutaj tekst tytułu kursora.

Tekst przycisku

Jeśli chcesz wyświetlić przycisk pod treścią slajdu, wprowadź tu tekst przycisku. Pozostaw to pole puste, jeśli nie chcesz wyświetlać przycisku.

Treść

Tutaj wprowadź treść ciała kursora. Pamiętaj, że ilość tekstu, który tu wprowadzisz, będzie decydować o wysokości slajdów.

Adres URL przycisku

Jeśli wyświetlasz przycisk, wstaw prawidłowy adres URL w tym polu, aby ustawić docelowe łącze.

Przeciągnij obraz

Jeśli dodasz obraz slajdu, pojawi się on po lewej stronie tekstu slajdu nad tłem slajdu. Jeśli nie określisz obrazu slajdu, pozostaniesz z wyśrodkowanym slajdem, tylko tekst. Ponieważ wysokość każdego slajdu jest określona przez tekst, jeśli obraz na slajdzie jest wystarczająco wysoki, spadnie poniżej dolnej krawędzi slajdu, tworząc obraz wyrównany na dole.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress z Envato i łatwo stwórz swoją stronę internetową. Już ponad 49.720.000 XNUMX XNUMX pobrań. [EXCLUSIVE]

przeciągnij obrazek divi.png

Zwróć uwagę, że wysokość slajdu z obrazem slajdu może być określona przez większy slajd w suwaku. Upewnij się, że obraz na slajdzie jest wystarczająco duży, aby zmieścić się, jeśli chcesz mieć u dołu wyrównany obraz. Aby zapewnić czytelność, obrazy slajdów pojawiają się tylko w kolumnach, kolumnach lub kolumnach kolumny 1. Podobnie obrazy przesuwane nie będą wyświetlane przy szerokościach przeglądarki mniejszych niż 768 pikseli. Szerokości obrazu slajdu są zdefiniowane poniżej. Zalecamy, aby obrazy slajdów były co najmniej tak szerokie.

Suwak wideo

Jeśli dodasz slajd wideo, pojawi się on po lewej stronie tekstu slajdu nad tłem slajdu. Jeśli nie określisz slajdu wideo, pozostaniesz z wyśrodkowanym slajdem, tylko tekst. Ponieważ wysokość każdego slajdu jest określona przez tekst, jeśli obraz na slajdzie jest wystarczająco wysoki, spadnie poniżej dolnej krawędzi slajdu, tworząc obraz wyrównany na dole.

Wstrzymaj wideo

Pozwól, aby wideo zostało zatrzymane przez innych graczy, gdy zaczną grać

Obraz tła

Jeśli zostanie ustawiony, ten obraz będzie używany jako tło dla tego modułu. Aby usunąć obraz tła, po prostu usuń adres URL z pola ustawień.

Wysokość slajdu zależy od ilości dodawanego tekstu. Jeśli masz wiele slajdów, kursor zajmie wysokość najwyższego slajdu.

Szerokość kursora zależy od szerokości przeglądarki. Na podstawie standardowych rozmiarów ekranu zalecamy, aby obrazy były co najmniej 1280px przez 768px.

Położenie obrazu tła

Domyślnie obrazy tła są wyświetlane na środku slajdu. Możesz użyć tego ustawienia, aby zmienić pozycję u góry, u dołu, z lewej strony, z prawej strony lub w jednym z czterech rogów slajdu.

Rozmiar obrazu tła

Domyślnie obrazy tła będą powiększane proporcjonalnie, aby zapewnić wypełnienie całego slajdu. Możesz jednak użyć tej opcji, aby zmienić domyślne zachowanie. "Okładka" to zachowanie domyślne, które skaluje obraz, aby pokryć cały obszar slajdu. "Dopasuj" zmusi obraz do zakrycia całego obszaru, jednak zmusi wysokość i szerokość obrazu do wysokości i szerokości suwaka. Może to spowodować zniekształcony obraz, ale to uniemożliwi przycięcie obrazu. "Rzeczywista wielkość" nie skaluje obrazu i wyświetla go w oryginalnym rozmiarze.

Kolor tła

Jeśli chcesz po prostu użyć koloru tła dla slajdu, użyj selektora kolorów, aby ustawić kolor tła.

Wideo w tle MP4

Wszystkie filmy muszą być pobrane w obu formatach .MP4 .WEBM, aby zapewnić maksymalną kompatybilność we wszystkich przeglądarkach. Pobierz tutaj wersję .MP4. Ważna uwaga: Tła wideo są wyłączone z urządzeń mobilnych. Zamiast tego zostanie użyty obraz bkacground. Z tego powodu musisz ustawić zarówno obraz tła, jak i wideo w tle, aby zapewnić lepsze wyniki.

Wideo w tle WEBM

Wszystkie filmy muszą być pobrane w obu formatach .MP4 .WEBM, aby zapewnić maksymalną kompatybilność we wszystkich przeglądarkach. Pobierz tutaj wersje .WEBM. Ważna uwaga: Tła wideo są wyłączone z urządzeń mobilnych. Zamiast tego zostanie użyty obraz bkacground. Z tego powodu musisz ustawić zarówno obraz tła, jak i wideo w tle, aby zapewnić lepsze wyniki.

Szerokość wideo w tle

Aby filmy miały odpowiedni rozmiar, musisz tutaj podać dokładną szerokość (w pikselach) filmu.

Wysokość wideo w tle

Aby filmy były odpowiednio dobrane, musisz podać dokładną wysokość (w pikselach) swojego filmu tutaj.

Przesuń opcje projektowania elementów elementów

section style module divi.png

Użyj nakładki w tle

Po włączeniu niestandardowy kolor nakładki zostanie dodany nad obrazem tła i za zawartością suwaka.

Kolor nakładki w tle

Użyj selektora kolorów, aby wybrać kolor tła.

Użyj nakładki tekstowej

Gdy ta opcja jest włączona, za tekstem kursora dodawany jest kolor tła, aby był bardziej czytelny na obrazach tła.

Kolor nakładki tekstowej

Użyj selektora kolorów, aby wybrać kolor nakładki tekstowej.

Promień obramowania tekstu

Promień obramowania wpływa na zaokrąglanie narożników obszaru nakładki tekstowej. Domyślnie rogi mają lekko zaokrągloną krawędź pikseli 3. Możesz zmniejszyć tę wartość do 0, aby utworzyć prostokątne pole lub zwiększyć wartość, aby rogi były jeszcze bardziej zaokrąglone.

Niestandardowe strzałki kolorów

Po najechaniu kursorem na moduł kursora pojawiają się strzałki umożliwiające nawigację po każdym slajdzie. Domyślnie te strzałki dziedziczą kolor głównego tekstu slajdu. Możesz jednak ustawić własny kolor dla tych strzałek, używając tego ustawienia.

Dot Nav Custom Color

W każdym suwaku elementy nawigacji punktów pojawiają się poniżej zawartości kursora. Te elementy pozwalają użytkownikowi poruszać się po kursie. Możesz zdefiniować niestandardowy kolor, który będzie używany dla tych elementów, korzystając z próbnika kolorów w tym ustawieniu.

Pionowe wyrównanie obrazu slajdu

To ustawienie określa pionowe wyrównanie obrazu slajdu. Obraz może być wyśrodkowany w pionie lub wyrównany u dołu slajdu.

Kolor tekstu

Jeśli tło slajdu jest ciemne, kolor tekstu powinien być ustawiony na "Jasny". Visa versa, jeśli tło slajdu jest jasne, kolor tekstu powinien być ustawiony na "Dark".

Czcionka nagłówka

Możesz zmienić czcionkę tekstu nagłówka, wybierając żądaną czcionkę z rozwijanego menu. Divi zawiera dziesiątki dużych czcionek z czcionkami Google. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na twojej stronie. Możesz także dostosować styl tekstu za pomocą pogrubienia, kursywy, wielkich i podkreślonych opcji.

Rozmiar czcionki nagłówka

Tutaj możesz zmienić rozmiar tekstu w nagłówku. Możesz przeciągnąć suwak zasięgu, aby zwiększyć lub zmniejszyć rozmiar tekstu lub wpisać wartość żądanego rozmiaru tekstu bezpośrednio do pola wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Kolor tekstu nagłówka

Domyślnie wszystkie kolory tekstu Divi są wyświetlane jako białe lub ciemnoszare. Jeśli chcesz zmienić kolor tekstu nagłówka, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.

kolor modułu projektu sekcji nagłówkowej dispo divi.png

Rozstaw nagłówków

Odstępy liter wpływają na przestrzeń między każdą literą. Jeśli chcesz zwiększyć odstęp między literami w tekście nagłówka, użyj suwaka zasięgu, aby dostosować spację lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Wysokość linii nagłówka

Wysokość linii wpływa na przestrzeń między wierszami tekstu nagłówka Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zasięgu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w linii. pole wprowadzania po prawej stronie kursora. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Czcionka ciała

Możesz zmienić czcionkę swojego ciała, wybierając żądaną czcionkę z rozwijanego menu. Divi zawiera dziesiątki dużych czcionek z czcionkami Google. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na twojej stronie. Możesz także dostosować styl tekstu za pomocą pogrubienia, kursywy, wielkich i podkreślonych opcji.

Rozmiar czcionki ciała

Tutaj możesz dostosować rozmiar tekstu swojego ciała. Możesz przeciągnąć suwak zasięgu, aby zwiększyć lub zmniejszyć rozmiar tekstu lub wpisać wartość żądanego rozmiaru tekstu bezpośrednio do pola wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Kolor tekstu w kolorze

Domyślnie wszystkie kolory tekstu Divi są wyświetlane jako białe lub ciemnoszare. Jeśli chcesz zmienić kolor tekstu, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.

Rozstawianie liter ciała

Odstępy liter wpływają na przestrzeń między każdą literą. Jeśli chcesz zwiększyć odstęp między literami w tekście, użyj suwaka zasięgu, aby dostosować spację lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

body divi module diapo.png

Wysokość linii ciała

Wysokość linii wpływa na przestrzeń między wierszami w twoim ciele Jeśli chcesz zwiększyć odstęp między liniami, użyj suwaka zasięgu, aby dostosować spację lub wprowadź żądaną wielkość w polu wprowadzania znajduje się po prawej stronie kursora. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Użyj niestandardowych stylów dla przycisku

Włączenie tej opcji ujawnia różne ustawienia dostosowywania dla przycisków, których możesz użyć do zmiany wyglądu przycisku w module.

Rozmiar tekstu przycisku

Parametr ten może być używany, aby zwiększyć lub zmniejszyć rozmiar tekstu w przycisku. Przycisk zmienia się wraz ze wzrostem i zmniejszeniem rozmiaru tekstu.

Kolor tekstu przycisku

Domyślnie przyciski przyjmują kolor akcentu kompozycji zgodnie z definicją w dostosowywaniu kompozycji. Ta opcja umożliwia przypisanie niestandardowego koloru tekstu do przycisku w tym module. Wybierz własny kolor za pomocą próbnika kolorów, aby zmienić kolor przycisku.

Kolor tła przycisku

Domyślnie przyciski mają przezroczysty kolor tła. Można to zmienić, wybierając żądany kolor tła w selektorze kolorów.

Przycisk granicy szerokości

Wszystkie przyciski posiadają obramowanie Divi 2px domyślnie. Ta granica może zostać zwiększona lub zmniejszona za pomocą tego parametru. Granice można usunąć, wprowadzając wartość 0.

Kolor obramowania przycisku

Domyślnie obramowanie przycisku zmienia się na kolor akcentujący kompozycji zdefiniowany w dostosowywaniu kompozycji. Ta opcja umożliwia przypisanie niestandardowego koloru obramowania do przycisku w tym module. Wybierz własny kolor, używając selektora kolorów, aby zmienić kolor obramowania przycisku.

Promień obramowania przycisku

Promień obramowania wpływa na okrągłość narożników przycisków. Domyślnie przyciski w Divi mają mały promień obramowania, który zaokrągla rogi pikseli 3. Możesz zmniejszyć tę wartość do 0, aby utworzyć kwadratowy przycisk lub znacznie go zwiększyć, aby utworzyć przyciski z okrągłymi krawędziami.

moduł przycisku konfiguracji divi.png

Łatwo stwórz swój sklep internetowy

Pobierz bezpłatne WooCommerce, najlepsze wtyczki e-commerce do sprzedaży fizycznych i cyfrowych produktów na WordPress. [Zalecana]

Rozstawianie liter przycisku

Odstępy liter wpływają na przestrzeń między każdą literą. Jeśli chcesz zwiększyć odstęp między literami w tekście przycisku, użyj suwaka zasięgu, aby dostosować spację lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Czcionka przycisku

Możesz zmienić czcionkę tekstu przycisku, wybierając żądaną czcionkę z rozwijanego menu. Divi zawiera dziesiątki dużych czcionek z czcionkami Google. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na twojej stronie. Możesz także dostosować styl tekstu za pomocą pogrubienia, kursywy, wielkich i podkreślonych opcji.

Dodaj ikonę przycisku

Wyłączone, to ustawienie usunie ikony z przycisku. Domyślnie wszystkie przyciski Divi wyświetlają ikonę strzałki na zawisie.

Ikona przycisku

Jeśli ikony są włączone, możesz użyć tego ustawienia, aby wybrać ikonę do użycia w swoim przycisku. Divi ma różne ikony do wyboru.

Kolor ikony przycisku

Ustawienie tego ustawienia zmieni kolor ikony wyświetlanej na przycisku. Domyślnie kolor ikony jest taki sam jak kolor tekstu przycisków, ale to ustawienie umożliwia niezależną regulację koloru.

Przycisk umieszczania ikon

Możesz wyświetlić ikonę przycisku po lewej lub prawej stronie przycisku.

Pokaż tylko ikonę, gdy przycisk przewraca się

Domyślnie ikony przycisków są wyświetlane tylko podczas przewracania. Jeśli chcesz, aby ikona była zawsze wyświetlana, wyłącz to ustawienie.

Przytrzymaj kolor tekstu przycisku

Gdy przycisk jest unosił się nad użytkownika, zostanie użyty ten kolor. Kolor zmieni się z podstawowego koloru zdefiniowanego w poprzednich ustawieniach.

Najedź na kolor tła przycisku

Gdy przycisk jest unosił się nad użytkownika, zostanie użyty ten kolor. Kolor zmieni się z podstawowego koloru zdefiniowanego w poprzednich ustawieniach.

Przycisk Obramowania Koloru

Gdy przycisk jest unosił się nad użytkownika, zostanie użyty ten kolor. Kolor zmieni się z podstawowego koloru zdefiniowanego w poprzednich ustawieniach.

Przesuń kursor na obramowanie

Gdy przycisk jest unosił się nad użytkownika, zostanie wykorzystana ta wartość. Wartość zmieni się z wartości bazowej zdefiniowanej w poprzednich parametrach.

Przycisk odstępu między nutami

Gdy przycisk jest unosił się nad użytkownika, zostanie wykorzystana ta wartość. Wartość zmieni się z wartości bazowej zdefiniowanej w poprzednich parametrach.

Zaawansowane opcje kursora Pełna szerokość

przednia sekcja moduł przesuwny element indywidualny divi.png

Niestandardowy CSS

Niestandardowy CSS można również zastosować do modułu i jednego z wewnętrznych elementów modułu. W sekcji Custom CSS znajdziesz pole tekstowe, w którym możesz dodać niestandardowe arkusze stylów CSS bezpośrednio do każdego elementu. Pozycje CSS w tych parametrach są już zapakowane w znaczniki stylu. Po prostu wprowadź reguły CSS oddzielone średnikami.

Alternatywny tekst obrazu

Tekst zastępczy zawiera wszystkie niezbędne informacje, jeśli obraz nie jest ładowany, nie wyświetla się poprawnie lub w jakiejkolwiek innej sytuacji, w której użytkownik nie może zobaczyć obrazu. Pozwala także na odczyt i rozpoznawanie obrazu przez wyszukiwarki.

Inne samouczki Divi

Ten artykuł zawiera komentarze 5
  1. Halo

    Dziękuję za ten samouczek, jest naprawdę ukończony!
    Czy wiesz, czy można zmienić lub nawet usunąć animację tekstu? ponieważ nie jest domyślnie, obrazki w tle przechodzą od dołu do góry i myślę, że nie jest to zbyt piękne.

    Merci 🙂

  2. Witam,
    Czy to możliwe, że kliknięcie przycisku slajdu przekierowuje link URL do nowej karty?
    Z góry dziękuję za wasze światła!

  3. Witaj ! dzięki za twój artykuł. moim problemem jest brak wyświetlania wideo w tle na telefonie komórkowym, mój klient absolutnie tego chciał. Myślałem, że znalazłem odpowiedź, ponieważ zgodnie z Twoim artykułem w „Zaawansowane” istnieje możliwość aktywacji filmów na urządzeniach mobilnych, które są domyślnie wyłączone. ale nie znalazłem takiej możliwości na moim divi. Dziękuję za Twoją odpowiedź…

    Yanis

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Pola obowiązkowe są oznaczone symbolem *

Ta strona używa Akismet do redukcji spamu. Dowiedz się więcej o tym, jak wykorzystywane są Twoje opinie.

Powrót do góry
6 akcji
udział4
ćwierkanie
Enregistrer2