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 701.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Divi umożliwia umieszczanie suwaków w sekcjach o pełnej szerokości, dzięki czemu suwaki obejmują całą szerokość przeglądarki. Suwaki Divi (Suwaki) obsługują 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 będziesz mógł dodać moduł suwaka o pełnej szerokości do swojej strony, musisz najpierw przejść do Divi Builder. Po zainstalowaniu motywu Divi na swojej stronie internetowej zauważysz przycisk Użyj Divi Buildernad edytorem postów 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 także kliknąć przycisk Użyj Visual Builder podczas przeglądania witryny na pierwszym planie, jeśli jesteś podłączony do pulpitu nawigacyjnego WordPress.

użyj visual builder divi.png

Gdy jesteś w programie Visual Builder, możesz kliknąć szary przycisk plus, aby dodać nowy moduł do swojej strony. Nowe moduły można dodawać tylko w wierszach. Jeśli zaczynasz nową stronę, pamiętaj, aby najpierw dodać wiersz do swojej strony.

utwórz tutorial slajdu divi wordpress.png

Znajdź moduł suwaka pełnej szerokości na liście modułów i kliknij go, aby dodać go do swojej strony. Listę modów można przeszukiwać, co oznacza, że ​​możesz także wpisać słowo „Slajd”, a następnie nacisnąć 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 zastosowania: dodanie sekcji bohatera o pełnej szerokości do strony głównej

Suwak o pełnej szerokości to świetny sposób na zaprezentowanie wielu wezwań do działania powyżej progu strony głównej. Połączenie obrazów i treści może naprawdę nadać Twojej sekcji profesjonalny charakter, który się wyróżnia.

W tym przykładzie dodam slajd o pełnej szerokości, który będzie służył jako główna sekcja na stronie głównej.

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

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

utwórz slajd divi.png

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

Opcje zawartości

En-tête : [wprowadź tytuł slajdu] Tekst przycisku : [wpisz tekst przycisku] Treść : [wprowadź treść tekstową slajdu] Adres URL przycisku : [wprowadź docelowy adres URL przycisku slajdu] Zdjęcie w tle : [wprowadź obraz, który posłuży jako tło slajdu]

Opcje projektowania

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

slide divi blogpascher.png

Zapisz ustawienia slajdów

Teraz zduplikuj właśnie utworzony slajd i zaktualizuj nowy slajd o nową zawartość w razie potrzeby. 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 wydajny suwak bohatera o pełnej szerokości z wieloma wezwaniami do działania, które angażują użytkownika w kliknięcie przycisku, aby uzyskać więcej informacji. Ponieważ jest to Twoje główne wezwanie do działania w Twojej witrynie, sugeruję przeprowadzenie testów podziału na slajdzie o pełnej szerokości za pomocą Divi Leads i sprawdzenie, który z nich konwertuje najlepiej.

przykład slajd divi dem.gif

Przesuń opcje pełnej zawartości

W zakładce Treść znajdziesz wszystkie elementy treści modułu, takie jak tekst, obrazy i ikony. Wszystko to kontroluje co pojawi się w module zawsze będzie można znaleźć w tej zakładce.

slide divi section content.png

strzałki

Wybierz, czy chcesz wyświetlać lewą i prawą strzałkę nawigacyjną.

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 łatwej identyfikacji. Podczas korzystania z widoku WireFrame w programie Visual Builder etykiety te pojawiają się w bloku modułu interfejsu Divi Builder.

Opcje projektowania modułu suwaka

Na karcie Projekt znajdziesz wszystkie opcje stylizacji modułu, takie jak czcionki, kolory, rozmiar i odstępy. To jest zakładka, której użyjesz do zmiany wyglądu modułu. Każdy moduł Divi ma długą listę ustawień projektu, których możesz użyć do zmiany czegokolwiek.

projekt sekcji slajdów divi.png

Usuń wewnętrzny cień

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

Efekt paralaksy

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

Czcionka nagłówka

Możesz zmienić czcionkę tekstu nagłówka, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.

konstrukcja czcionki sekcji slajdów lentete.png

Rozmiar czcionki nagłówka

Tutaj możesz dostosować rozmiar tekstu nagłówka. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu lub bezpośrednio wprowadzić wartość żądanego rozmiaru tekstu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Kolor tekstu nagłówka

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

Odstępy między literami w nagłówku

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

Wysokość wiersza nagłówka

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

Policja Ciała

Możesz zmienić swoją czcionkę główną, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.

Rozmiar czcionki ciała

Tutaj możesz dostosować rozmiar tekstu. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu lub bezpośrednio wprowadzić wartość żądanego rozmiaru tekstu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

przekrój konstrukcji moduł przesuwny divi.png

Kolor tekstu w kolorze

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

Rozstawianie liter ciała

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

Wysokość linii ciała

Wysokość linii wpływa na odstęp pomiędzy każdym wierszem tekstu w Twoim ciele Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania znajdujący się po prawej stronie kursora. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości 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 zawartością tekstową w module. Jeśli chcesz zwiększyć lub zmniejszyć tę przestrzeń, wprowadź tutaj żądaną wartość. Na przykład, aby zmniejszyć przestrzeń i ogólny rozmiar kursora, możesz wprowadzić wartość 100px. Możesz także wprowadzić wartość procentową, na przykład 10%, aby wysokość była bardziej dynamiczna.

Wyściółka u dołu

Ten parametr kontroluje wewnętrzną przestrzeń między dolną częścią modułu a zawartością tekstu w module. Jeśli chcesz zwiększyć lub zmniejszyć tę przestrzeń, wprowadź tutaj żądaną wartość. Na przykład, aby zmniejszyć przestrzeń i ogólny rozmiar kursora, możesz wprowadzić wartość 100px. Możesz także wprowadzić wartość procentową, na przykład 10%, aby wysokość była bardziej dynamiczna.

Ł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]

Użyj niestandardowych stylów dla przycisku

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

Rozmiar tekstu przycisku

To ustawienie może służyć do zwiększania lub zmniejszania rozmiaru tekstu na przycisku. Przycisk dostosowuje się wraz ze wzrostem i zmniejszeniem rozmiaru tekstu.

Kolor tekstu przycisku

Domyślnie przyciski przyjmują kolor akcentów motywu, zgodnie z definicją w narzędziu Dostosowywanie motywu. Ta opcja umożliwia przypisanie niestandardowego koloru tekstu do przycisku tego modułu. Wybierz kolor niestandardowy 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 z próbnika kolorów.

Szerokość obramowania przycisku

Wszystkie przyciski Divi mają domyślnie obramowanie 2px. Za pomocą tego ustawienia można zwiększyć lub zmniejszyć tę granicę. Obramowania można usunąć, wprowadzając wartość 0.

Kolor obramowania przycisku

Domyślnie obramowania przycisków przyjmują kolor akcentu motywu, zgodnie z definicją w narzędziu Dostosowywanie motywu. Ta opcja umożliwia przypisanie niestandardowego koloru obramowania do przycisku tego modułu. Wybierz swój kolor niestandardowy za pomocą próbnika kolorów, aby zmienić kolor obramowania przycisku.

Promień obramowania przycisku

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

Rozstawianie liter przycisku

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

Czcionka przycisku

Możesz zmienić czcionkę tekstu przycisku, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.

Dodaj ikonę przycisku

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

Ikona przycisku

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

Kolor ikony przycisku

Dostosowanie tego ustawienia spowoduje zmianę koloru ikony wyświetlanej na przycisku. Domyślnie kolor ikony jest taki sam, jak kolor tekstu przycisku, ale to ustawienie umożliwia niezależną regulację koloru.

Przycisk umieszczania ikon

Możesz wybrać wyświetlanie ikony przycisku po lewej lub prawej stronie przycisku.

Pokaż ikonę tylko po najechaniu na przycisk

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

Przytrzymaj kolor tekstu przycisku

Ten kolor zostanie użyty po najechaniu kursorem myszy na przycisk gościa. Kolor zmieni się z koloru podstawowego zdefiniowanego w poprzednich ustawieniach.

Najedź na kolor tła przycisku

Ten kolor zostanie użyty po najechaniu kursorem myszy na przycisk gościa. Kolor zmieni się z koloru podstawowego zdefiniowanego w poprzednich ustawieniach.

Przycisk Obramowania Koloru

Ten kolor zostanie użyty po najechaniu kursorem myszy na przycisk gościa. Kolor zmieni się z koloru podstawowego zdefiniowanego w poprzednich ustawieniach.

Przesuń kursor na obramowanie

Wartość ta zostanie użyta, gdy przycisk zostanie umieszczony nad przyciskiem myszy gościa. Wartość zmieni się od wartości bazowej zdefiniowanej w poprzednich ustawieniach.

Przycisk odstępu między nutami

Wartość ta zostanie użyta, gdy przycisk zostanie umieszczony nad przyciskiem myszy gościa. Wartość zmieni się od wartości bazowej zdefiniowanej w poprzednich ustawieniach.

Opcje zaawansowane moduł przesuwny o pełnej szerokości

Na karcie Zaawansowane znajdziesz opcje, które mogą być przydatne dla bardziej doświadczonych projektantów stron internetowych, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do dowolnego z wielu elementów modułu. Możesz również zastosować niestandardowe klasy CSS i identyfikatory do modułu, których można użyć do dostosowania modułu w pliku style.css motywu potomnego.

przednia sekcja moduł slajdów divi.png

Identyfikator CSS

Wprowadź opcjonalny identyfikator CSS do użycia w tym module. Identyfikator może służyć do tworzenia niestandardowego stylu CSS lub do łączenia z określonymi sekcjami strony.

Klasa CSS

Wprowadź opcjonalne klasy CSS do użycia w tym module. Do tworzenia niestandardowych stylów CSS można użyć klasy CSS. Możesz dodać wiele klas oddzielonych spacją. Klasy te mogą być używane w motywie potomnym Divi lub w niestandardowym arkuszu stylów CSS, który dodajesz do swojej strony lub do witryny internetowej za pomocą opcji motywu Divi lub ustawień na stronie Divi Builder.

Niestandardowy CSS

Niestandardowy CSS można również zastosować do modułu i dowolnych elementów wewnętrznych modułu. W sekcji Niestandardowe CSS znajdziesz pole tekstowe, w którym możesz dodać własne arkusze stylów CSS bezpośrednio do każdego elementu. Wpisy CSS w tych ustawieniach są już opakowane 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 wskazać, jak szybko kursor zanika między każdym slajdem, jeśli opcja „Auto-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 powierzchnia ekranu staje się bardziej wartościowa. Czasami dobrym pomysłem jest wyłączenie mniej ważnych elementów kursora, aby zmniejszyć rozmiar kursora i uczynić go bardziej czytelnym. Włączenie tego ustawienia powoduje ukrycie treści tekstowej kursora na telefonie komórkowym.

Ukryj wezwanie do działania na komórce

W miarę zmniejszania się rozmiaru ekranu na urządzeniach mobilnych powierzchnia ekranu staje się bardziej wartościowa. Czasami dobrym pomysłem jest wyłączenie mniej ważnych elementów kursora, aby zmniejszyć rozmiar kursora i uczynić go bardziej czytelnym. Włączenie tego ustawienia spowoduje ukrycie wezwania kursora do przycisków akcji na urządzeniach mobilnych.

Zobacz obraz / wideo na telefonie komórkowym

W miarę zmniejszania się rozmiaru ekranu na urządzeniach mobilnych powierzchnia ekranu staje się bardziej wartościowa. Czasami dobrym pomysłem jest wyłączenie mniej ważnych elementów kursora, aby zmniejszyć rozmiar kursora 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 umożliwia sterowanie urządzeniami, na których pojawia się Twój moduł. Możesz indywidualnie dezaktywować swój moduł na tabletach, smartfonach lub komputerach stacjonarnych. Jest to przydatne, jeśli chcesz używać różnych modów na różnych urządzeniach lub jeśli chcesz uprościć projekt mobilny, usuwając określone elementy ze strony.

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

moduł pojedynczego elementu divi diapo.png

Tytuł

Tutaj ustaw tekst tytułu kursora.

Tekst przycisku

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

Treść

Wprowadź tutaj treść kursora. Zwróć uwagę, że ilość wpisanego tutaj tekstu będzie określać wysokość slajdów.

Adres URL przycisku

Jeśli wyświetlisz przycisk, wstaw prawidłowy internetowy adres URL w tym polu, aby ustawić docelowy link.

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, po lewej stronie zostanie umieszczony wyśrodkowany slajd zawierający tylko tekst. Ponieważ wysokość każdego slajdu jest określana przez tekst, jeśli obraz slajdu jest wystarczająco wysoki, spadnie poniżej dolnej części slajdu, tworząc wyrównany obraz na dole.

przeciągnij obrazek divi.png

Zwróć uwagę, że wysokość slajdu z obrazem slajdu można określić przez wyższy slajd na suwaku. Upewnij się, że obraz slajdu jest wystarczająco duży, aby pasował, jeśli chcesz, aby obraz był wyrównany u dołu. Ze względu na czytelność obrazy slajdów pojawiają się tylko w suwakach szerokości kolumny, kolumny lub 1 kolumny. Podobnie obrazy slajdów nie będą wyświetlane w przeglądarkach o szerokości mniejszej niż 768 pikseli. Szerokość obrazu slajdu jest zdefiniowana poniżej. Zalecamy, aby obrazy slajdów były co najmniej tak samo szerokie.

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]

Slajd wideo

Jeśli dodasz klip wideo do slajdu, pojawi się on po lewej stronie tekstu slajdu nad tłem slajdu. Jeśli nie określisz wideo slajdu, będziesz po lewej stronie ze wyśrodkowanym slajdem zawierającym tylko tekst. Ponieważ wysokość każdego slajdu jest określana przez tekst, jeśli obraz slajdu jest wystarczająco wysoki, spadnie poniżej dolnej części slajdu, tworząc wyrównany obraz na dole.

Wstrzymaj wideo

Zezwalaj na wstrzymywanie wideo przez innych graczy, gdy zaczną grać

Obraz tła

Jeśli jest ustawiona, 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 dodanego tekstu. Jeśli masz wiele slajdów, suwak przyjmie wysokość najwyższego slajdu.

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

Pozycja obrazu tła

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

Rozmiar obrazu tła

Domyślnie obrazy tła zostaną proporcjonalnie powiększone, aby wypełnić cały slajd. Możesz jednak użyć tej opcji, aby zmienić domyślne zachowanie. „Pokrycie” to domyślne zachowanie, które skaluje obraz, tak aby obejmował cały obszar slajdu. „Dopasuj” wymusi również pokrycie całego obszaru przez obraz, jednak wymusi dopasowanie wysokości i szerokości obrazu do wysokości i szerokości kursora. Może to spowodować zniekształcenie obrazu, ale uniemożliwi przycięcie obrazu. „Rzeczywisty rozmiar” nie skaluje obrazu i wyświetla go w jego rozmiarze natywnym.

Kolor tła

Jeśli chcesz użyć do slajdu tylko jednolitego koloru tła, użyj próbnika kolorów, aby ustawić kolor tła.

Wideo w tle MP4

Wszystkie pliki wideo należy pobierać w obu formatach .MP4 .WEBM, aby zapewnić maksymalną zgodność we wszystkich przeglądarkach. Pobierz wersję .MP4 tutaj. Ważna uwaga: tła wideo są wyłączone na urządzeniach mobilnych. Zamiast tego zostanie użyty obraz bkacground. Z tego powodu należy ustawić zarówno obraz tła, jak i wideo w tle, aby zapewnić lepsze wyniki.

Wideo w tle WEBM

Wszystkie filmy powinny być pobierane w obu formatach .MP4 .WEBM, aby zapewnić maksymalną zgodność we wszystkich przeglądarkach. Pobierz wersje .WEBM tutaj. Ważna uwaga: tła wideo są wyłączone na urządzeniach mobilnych. Zamiast tego zostanie użyty obraz bkacground. Z tego powodu należy 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 podać dokładną szerokość (w pikselach) filmu.

Tło wysokości wideo

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

Opcje projektowania elementów elementów przesuwnych

section style module divi.png

Użyj nakładki tła

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 próbnika kolorów, aby wybrać kolor tła.

Użyj nakładki tekstowej

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

Kolor nakładki tekstowej

Za pomocą próbnika kolorów wybierz kolor nakładki tekstowej.

Promień obramowania tekstu

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

Niestandardowe kolorowe strzałki

Po najechaniu kursorem na moduł suwaka pojawiają się strzałki umożliwiające odwiedzającym nawigację po każdym slajdzie. Domyślnie te strzałki dziedziczą kolor głównego tekstu slajdu. Możesz jednak zdefiniować niestandardowy kolor dla tych strzałek za pomocą tego ustawienia.

Kolor niestandardowy Dot Nav

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

Pionowe wyrównanie obrazu slajdu

To ustawienie określa pionowe wyrównanie obrazu slajdu. Obraz można wyśrodkować w pionie lub wyrównać u dołu slajdu.

Kolor tekstu

Jeśli tło slajdu jest ciemne, kolor tekstu powinien być ustawiony na „Jasny”. I odwrotnie, jeśli tło slajdu jest jasne, kolor tekstu powinien być ustawiony na „Ciemny”.

Czcionka nagłówka

Możesz zmienić czcionkę tekstu nagłówka, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.

Rozmiar czcionki nagłówka

Tutaj możesz dostosować rozmiar tekstu nagłówka. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu lub bezpośrednio wprowadzić wartość żądanego rozmiaru tekstu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Kolor tekstu nagłówka

Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. 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

Odstępy między literami w nagłówku

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

Wysokość wiersza nagłówka

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

Czcionka ciała

Możesz zmienić swoją czcionkę główną, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.

Rozmiar czcionki ciała

Tutaj możesz dostosować rozmiar tekstu. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu lub bezpośrednio wprowadzić wartość żądanego rozmiaru tekstu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Kolor tekstu w kolorze

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

Rozstawianie liter ciała

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

body divi module diapo.png

Wysokość linii ciała

Wysokość linii wpływa na odstęp pomiędzy każdym wierszem tekstu w Twoim ciele Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania znajdujący się po prawej stronie kursora. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Użyj niestandardowych stylów dla przycisku

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

Rozmiar tekstu przycisku

To ustawienie może służyć do zwiększania lub zmniejszania rozmiaru tekstu na przycisku. Przycisk dostosowuje się wraz ze wzrostem i zmniejszeniem rozmiaru tekstu.

Kolor tekstu przycisku

Domyślnie przyciski przyjmują kolor akcentów motywu, zgodnie z definicją w narzędziu Dostosowywanie motywu. Ta opcja umożliwia przypisanie niestandardowego koloru tekstu do przycisku tego modułu. Wybierz kolor niestandardowy 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 z próbnika kolorów.

Przycisk granicy szerokości

Wszystkie przyciski Divi mają domyślnie obramowanie 2px. Za pomocą tego ustawienia można zwiększyć lub zmniejszyć tę granicę. Obramowania można usunąć, wprowadzając wartość 0.

Kolor obramowania przycisku

Domyślnie obramowania przycisków przyjmują kolor akcentu motywu, zgodnie z definicją w narzędziu Dostosowywanie motywu. Ta opcja umożliwia przypisanie niestandardowego koloru obramowania do przycisku tego modułu. Wybierz swój kolor niestandardowy za pomocą próbnika kolorów, aby zmienić kolor obramowania przycisku.

Promień obramowania przycisku

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

moduł przycisku konfiguracji divi.png

Rozstawianie liter przycisku

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

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]

Czcionka przycisku

Możesz zmienić czcionkę tekstu przycisku, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.

Dodaj ikonę przycisku

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

Ikona przycisku

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

Kolor ikony przycisku

Dostosowanie tego ustawienia spowoduje zmianę koloru ikony wyświetlanej na przycisku. Domyślnie kolor ikony jest taki sam, jak kolor tekstu przycisku, ale to ustawienie umożliwia niezależną regulację koloru.

Przycisk umieszczania ikon

Możesz wybrać wyświetlanie ikony przycisku po lewej lub prawej stronie przycisku.

Pokaż ikonę tylko po najechaniu na przycisk

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

Przytrzymaj kolor tekstu przycisku

Ten kolor zostanie użyty po najechaniu kursorem myszy na przycisk gościa. Kolor zmieni się z koloru podstawowego zdefiniowanego w poprzednich ustawieniach.

Najedź na kolor tła przycisku

Ten kolor zostanie użyty po najechaniu kursorem myszy na przycisk gościa. Kolor zmieni się z koloru podstawowego zdefiniowanego w poprzednich ustawieniach.

Przycisk Obramowania Koloru

Ten kolor zostanie użyty po najechaniu kursorem myszy na przycisk gościa. Kolor zmieni się z koloru podstawowego zdefiniowanego w poprzednich ustawieniach.

Przesuń kursor na obramowanie

Wartość ta zostanie użyta, gdy przycisk zostanie umieszczony nad przyciskiem myszy gościa. Wartość zmieni się od wartości bazowej zdefiniowanej w poprzednich ustawieniach.

Przycisk odstępu między nutami

Wartość ta zostanie użyta, gdy przycisk zostanie umieszczony nad przyciskiem myszy gościa. Wartość zmieni się od wartości bazowej zdefiniowanej w poprzednich ustawieniach.

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 dowolnych elementów wewnętrznych modułu. W sekcji Niestandardowe CSS znajdziesz pole tekstowe, w którym możesz dodać własne arkusze stylów CSS bezpośrednio do każdego elementu. Wpisy CSS w tych ustawieniach są już opakowane w znaczniki stylu. Po prostu wprowadź reguły CSS oddzielone średnikami.

Tekst alternatywnego obrazu

Tekst alternatywny zawiera wszystkie niezbędne informacje, jeśli obraz nie ładuje się, nie wyświetla poprawnie lub w jakiejkolwiek innej sytuacji, w której użytkownik nie może wyświetlić obrazu. Umożliwia także odczytanie i rozpoznanie 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ć, a nawet usunąć animację z tekstu? ponieważ nie domyślnie, to przechodzi od dołu do góry na obrazach tła i myślę, że nie jest zbyt piękny.

    dziękuję

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

  3. Dzień dobry ! dziękuję za twój artykuł. moim problemem jest to, że wideo w tle nie wyświetla się na telefonie komórkowym, mój klient absolutnie tego chciał. Myślałem, że znalazłem swoją odpowiedź, ponieważ zgodnie z Twoim artykułem w „Zaawansowanych” istnieje możliwość aktywacji filmów na telefonie komórkowym, 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. 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ł4
ćwierkanie
Enregistrer2