Czy chcesz wstawić kompaktowy suwak z referencjami dla nagłówka Divi?
Dodanie referencji do witryny to skuteczny sposób na budowanie wiarygodności firmy (lub marki) i budowanie zaufania użytkowników. odwiedzający.
Suwak referencji to poręczne narzędzie do prezentacji referencji w jednym miejscu. Mając to na uwadze, sensowne jest dodanie kompaktowego suwaka referencji do nagłówka, aby te referencje były jedną z pierwszych rzeczy, które widzi użytkownik odwiedzający strona internetowa.
W tym samouczku pokażemy Ci, jak utworzyć kompaktowy suwak referencji, aby pokazać krótkie referencje w nagłówku Twojego Witryna internetowa.
Aby to zrobić, zmodyfikujemy moduł Divi Slider w zabawny i niepowtarzalny sposób.
Zacznijmy!
Ale zanim odkryjesz nasz przewodnik na Divi, najlepszy i najłatwiejszy w użyciu motyw WordPress na świecie
badanie
Oto kompaktowy suwak referencji, który zbudujemy za pomocą modułu Divi's Slider.
A oto ten sam suwak referencji dodany do globalnego nagłówka.
A oto jak to wygląda na telefonie komórkowym.
Utwórz nową stronę za pomocą Divi Builder
Aby rozpocząć, musisz wykonać następujące czynności:
Z pulpitu WordPress przejdź do Strony> Dodaj nowy aby utworzyć nową stronę.
Nadaj mu tytuł, który ma dla Ciebie sens i kliknij Użyj Divi Builder
Następnie kliknij przycisk Rozpocznij budowę (Twórz od podstaw)
Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.
Jak stworzyć kompaktowy suwak referencji w Divi
Dodaj nowy moduł wiersza i suwaka
Aby rozpocząć, dodaj do sekcji wiersz z jedną kolumną.
Następnie dodaj do linii moduł Slider.
Edytuj slajd
W ustawieniach suwaka usuń domyślny drugi slajd pod zakładką Treść, a następnie kliknij, aby zmienić ustawienia dla pozostałego slajdu.
Zawartość slajdu
Pod zakładką Treść w ustawieniach slajdów zaktualizuj następujące elementy:
- Tytuł: „Donec solicitudin molestie malesuada. Vivamus suscipit tortor eget.
- Przycisk: Czytaj wszystko
- Ciało: — Tatiana Gagelman
Po zakończeniu zapisz ustawienia slajdów.
Czytaj także: Divi: jak korzystać z ustawień maski tła i opcji przekształcania wzoru
Zaktualizuj ustawienia suwaka
Zduplikuj kontrolki przesuwania i ukrywania
Po aktualizacji pierwszego slajdu za pomocą treść, zduplikuj ten slajd, aby utworzyć jeden lub więcej dodatkowych slajdów.
Następnie w grupie opcji Elementy, ukryj kontrolki suwaka, aktualizując następujące elementy:
- Pokaż kontrolę: NIE
Zaktualizuj tło wszystkich slajdów
Następnie dodamy tło, które będzie używane do wszystkich slajdów.
Aby dodać tło, zaktualizuj następujące elementy:
- Gradient tła:
- Gradient zatrzymuje się 0%: #000000
- Gradient zatrzymuje się 100%: #000000
- Zdjęcie w tle:
- Rozmiar: pasuje!
- Pozycja: Środkowy Lewy
- Mieszanka: Jasność
Ustawienia suwaka
Pod zakładką Wnętrze, zaktualizuj następujące informacje:
okładka
- Użyj nakładki tła: TAK
- Kolor nakładki tła: rgba (0,0,0,0.7)
Tekst tytułu
- Tytuł:
- Poziom nagłówka: H4
- Czcionka: Josefin Sans
- Grubość czcionki: średnia
- Wyrównanie tekstu: do lewej
- Rozmiar tekstu: 16px (komputer stacjonarny i tablet), 14px (telefon)
- Wysokość linii: 1,5 em
Ciało tekstu
- Ciało :
- Czcionka: Josefin Sans
- Wyrównanie tekstu: do lewej
- Kolor tekstu: #aaaaa
- Odstępy między literami: 0,05em
przycisk
- Użyj niestandardowego rozmiaru przycisku: TAK
- Przycisk:
- Rozmiar tekstu: 1em
- Kolor tekstu: Domyślny (Pulpit), #000 (Najechanie)
- Kolor tła (komputer): rgba (255,255,255,0.19)
- Kolor tła (najechanie): #ffffff
- Szerokość obramowania: 0 pikseli
- Odstępy między literami: 0,05em
- Czcionka: Josefin Sans
- Margines: 0px (góra i dół)
- Padding: 0px (góra i dół), 0,6em (lewy i prawy)
Automatyczne wypełnianie i animacja
Następnie zaktualizuj odstępy suwaków, aby były zwarte i ustaw żądaną prędkość automatycznej animacji.
- Margines: 0px (góra i dół)
- Wypełnienie: 1em (góra i dół), 5% (lewy i prawy)
- Automatyczna animacja: WŁĄCZONA
- Automatyczna prędkość animacji: 3500
Niestandardowy CSS
Pod zakładką Zaawansowane, dodaj następujący niestandardowy kod CSS, aby zaktualizować styl każdego elementu suwaka (tytuł, przycisk i strzałki)
Tytuł slajdu
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;Dzięki temu tytuł slajdu nie spowoduje przerwania wiersza na mniejszych ekranach.
Przycisk przesuwania
position:absolute;
bottom: 1em;
right: 6%;Daje to przyciskowi bezwzględną pozycję, dzięki czemu znajduje się znacznie poniżej tytułu i po prawej stronie slajdu, dzięki czemu suwak jest jeszcze bardziej kompaktowy.
Przeciągnij strzałki
font-size: 30px;
margin-top: -15px;To po prostu zmniejsza strzałki nawigacyjne suwaka, aby pomieścić kompaktowy rozmiar suwaka.
Wskazówka: dodaj ten sam kolor tła do kolumny, aby uzyskać płynniejsze przejścia między slajdami
Aby to zrobić, otwórz ustawienia kolumny nadrzędnej suwaka i dodaj następujący kolor tła:
- Tło: #000000
Dodawanie autorskich obrazów tła do slajdu
Jeśli chcesz dołączyć autorski obraz tła do slajdu, możesz to zrobić, dodając obraz tła do każdego slajdu.
Po dodaniu obrazu tła do slajdu obraz tła odziedziczy style już istniejące pod ustawieniami suwaka (nie slajdu).
Wynik
Sprawdź efekt końcowy.
Dodanie kompaktowego suwaka referencji do szablonu nagłówka
Zapisz moduł w bibliotece Divi
Zanim będziemy mogli dodać kompaktowy suwak referencji do globalnego nagłówka, najpierw musimy zarejestrować moduł w bibliotece Divi.
Możesz to zrobić, najeżdżając kursorem na moduł Slider i klikając „ Dodaj do biblioteki“. Następnie nadaj nazwę układowi i kliknij przycisk " Zapisz w bibliotece”.
Dodano kompaktowy układ modułu referencji do szablonu nagłówka
Edytuj niestandardowy nagłówek
Po zapisaniu nowego modułu testimonial slider w bibliotece jesteśmy gotowi, aby dodać go do niestandardowego nagłówka.
Dostęp do Divi > Kreator motywów, a następnie kliknij ikonę umożliwiającą modyfikację " Nagłówek niestandardowy”.
Wstaw zapisany moduł suwaka referencji z biblioteki
W edytorze układu nagłówka kliknij, aby dodać kompaktowy moduł suwaka referencji w miejscu, w którym ma się pojawić.
W modzie „Wstaw moduł”wybierz kartę „Dodaj z biblioteki”. Znajdź kompaktowy suwak referencji, który zapisałeś wcześniej w bibliotece i wybierz go.
Po załadowaniu zapisz zmiany.
Zobacz też: Divi: Jak wyświetlić moduł nagłówka o pełnej szerokości na pełnym ekranie?
Ostateczny wynik
Poniżej znajduje się suwak referencji dodany do globalnego nagłówka.
Tutaj mamy suwak referencji bez obrazów tła autora.
A oto jak to wygląda na telefonie komórkowym.
Pobierz DIVI teraz !!!
Wnioski
Kompaktowy suwak z referencjami może być nowym dodatkiem do nagłówka czegokolwiek Witryna internetowa dążąc do podniesienia wiarygodności swoich usług w jak najbardziej widocznym miejscu na swojej stronie internetowej.
Możesz także użyć go do przekierowania odwiedzający na stronę z referencjami lub stronę sprzedaży, aby zwiększyć liczbę konwersji. Mamy nadzieję, że przyda ci się to w twoich kolejnych projektach Divi.
Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji swoich projektów tworzenia stron internetowych.
Nie wahaj się również skonsultować z naszym przewodnikiem na temat Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
