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!
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. Kiedyś Motyw Divi zainstalowany na twoim Witryna internetowa, 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 kiedy przeglądasz swoje Witryna internetowa na pierwszym planie, jeśli jesteś zalogowany do pulpitu WordPress.
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.
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.
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.
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.
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ć.
To wszystko. W tym przykładzie uwzględniłem tylko dwa slajdy, ale w rezultacie powstał skuteczny suwak główny 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ż jest to Twoje główne wezwanie do działania Witryna internetowa, sugeruję przeprowadzenie testów podziału na slajdzie o pełnej szerokości przy użyciu Divi Leads i sprawdzenie, który z nich najlepiej konwertuje.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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
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.
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.
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.
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.
Zaawansowane opcje kursora Pełna szerokość
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.
[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]POBIERZ MOTYW DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”centrum” font_family = „Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]POBIERZ SZABLONY DIVI[/vcex_button][/vc_column][/vc_row]
Inne samouczki Divi
- strony internetowe 5 dotyczące stosowania restauracja Divi tematu
- Jak dodać tekst do produktu Divi WooCommerce
- Jak zmienić kolor menu między stronami Divi
- Jak spersonalizować siatki bloga za pomocą Divi
- Jak korzystać z roli Divi edytor na WordPressie
- Jak utworzyć pełnoekranowy suwak Divi
- Jak zmienić kolor menu między stronami Divi
- Funkcje, których prawdopodobnie nie wiesz o Divi
- Jak korzystać z Divi Builder na WordPress
- Jak korzystać z modułu przewijania wideo Divi
- Jak korzystać z modułu Divi Builder Flip
- Jak dodać moduł referencji w Divi Builder
- Jak korzystać z modułu tekstowego Divi
- Jak utworzyć suwak na Divi
- Jak edytować rolę użytkownika Divi
- Jak korzystać z modułu Divi Social Media
- Jak korzystać z modułu sklepu na temat WordPress Divi
- Jak korzystać z modułu paska bocznego Divi
- Jak korzystać z modułu tabeli cen Divi
- Jak korzystać z modułu tytułowego publikacji Divi
- Jak dodać moduł wideo Divi
- Jak korzystać z modułu nawigacji artykułów
- Jak korzystać z modułu wyszukiwania Divi
- Jak korzystać z modułu portfela Divi
- Jak korzystać z modułu person w Divi Builder
- Jak korzystać z modułu portfela z filtrem Divi
- Jak korzystać z modułu suwaka o pełnej szerokości
- Jak korzystać z modułu obrazu Divi Builder
- Jak korzystać z modułu nawigacji pełnej szerokości Divi Builder
- Jak korzystać z modułu galerii obrazów
- Jak korzystać z pełnego modułu karty Divi Builder
- Jak korzystać z modułu portfela o pełnej szerokości Divi
- Jak korzystać z modułu nagłówka Divi o pełnej szerokości
- Jak korzystać z modułu licznika Divi
- Jak korzystać z suwaka artykułów w Divi Builder
- Jak korzystać z modułu Divi Email Optin
Witam,
Bardzo dziękuję za ten samouczek. Wyznaję, że jestem całkowicie zagubiony i nie zrobiłem czegoś, co powinno być biblijnej prostoty:
usuń jeden (lub więcej) dodatkowy slajd w moim pokazie slajdów divi
Widziałem oczywiście, że na liście slajdów utworzonego pokazu slajdów, po prawej stronie każdej linii odpowiadającej slajdowi, znajduje się ikona „kosza na śmieci” i trzy małe kropki: ale kliknięcie kosza... dodaje kopię bieżącego slajdu! a menu kontekstowe nie zawiera żadnej linii umożliwiającej usunięcie.
Odkryłem gdzieś (nie pamiętam gdzie), że muszę „ustawić się na slajdzie do usunięcia” (upewnić się, że jest na ekranie), ale to niczego nie zmieniło.
Pracuję na Macu w systemie Mojave. I próbowałem połączyć się z WordPressem w Firefoksie jak w Chrome
Dziękuję bardzo za wszelką pomoc... i przepraszam za tak głupie pytanie
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ę
Witam Olivier,
Czy patrzysz na ustawienia danego tekstu?
Witam,
Czy to możliwe, że kliknięcie przycisku slajdu przekierowuje łącze URL do nowej karty?
Z góry dziękuję za światła!
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
Cześć Yanis,
Czy Twój Divi jest na bieżąco?