Jak utworzyć lepki pasek treści audio w Divi

Dodanie lepkiego paska zawartości audio to świetny sposób na dodanie klipu audio, aby był on łatwo dostępny, gdy użytkownik przewija zawartość strony. Na przykład podcasterzy mogą „przykleić” swój polecany dźwięk na górze strony odcinka, aby użytkownik zawsze miał dostęp do tych elementów sterujących dźwiękiem, słuchając i angażując się w pozostałą zawartość strony.

W tym samouczku będziemy nieco kreatywni dzięki wbudowanym opcjom lepkiej pozycji Divi, aby zbudować lepki pasek treści audio w Divi. Pokażemy Ci, jak przekonwertować istniejącą zawartość audio na stronie (np. wiersz z modułem audio) na przyklejony pasek zawartości audio, który pozostaje w górnej części okna, gdy użytkownik przejdzie przez zawartość audio podczas przewijania. Ponadto pokażemy Ci również, jak zmienić zawartość, styl i układ paska po włączeniu stanu przyklejenia (lub utknięciu w górnej części okna). Płynne przejście i funkcjonalność tego projektu oferuje unikalne rozwiązanie do prezentacji treści audio na dowolnej stronie internetowej Divi.

Weźmy się za to!

zapowiedź

Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku.

Oto spojrzenie na przejście zawartości audio do lepkiego paska zawartości audio.

A oto spojrzenie na to, jak można korzystać z paska audio podczas przewijania strony.

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować układ sekcji do Biblioteki Divi, przejdź do Biblioteki Divi.

Kliknij przycisk Importuj.

W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

Po zakończeniu układ sekcji będzie dostępny w Divi Builder.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Buduj od podstaw”.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Część 1: Prześlij pakiet gotowych układów podcastów z Divi Builder

Aby przyspieszyć projektowanie naszego przyklejonego paska audio w Divi, użyjemy gotowego układu strony docelowej podcastu. Z menu ustawień wybierz ikonę „Załaduj z biblioteki” plus. Następnie znajdź układ strony docelowej podcastu i załaduj go na stronę.

Część 2: Tworzenie lepkiego wiersza do przechowywania zawartości audio

W górnej części gotowego układu znajdź wiersz wewnątrz tej górnej sekcji. Następnie dodaj nowy jednokolumnowy wiersz poniżej istniejącego wiersza.

Ustawienia wiersza

Przed dodaniem jakichkolwiek modułów otwórz ustawienia nowego wiersza i zaktualizuj następujące elementy:

• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%
• Padding (komputer): 10px góra, 10px, dół, 10% w lewo, 10% w prawo
• Padding (tablet i telefon): 10px góra, 10px, dół, 10px w lewo, 10px w prawo

Aby wiersz był przyklejony, przejdź do zakładki Zaawansowane i zaktualizuj następujące elementy:

• Lepka pozycja: trzymaj się u góry

Spowoduje to, że wiersz (wkrótce stanie się naszym paskiem treści audio) będzie przyklejał się na górze okna przeglądarki podczas przewijania strony w dół.

Część 3: Dodawanie treści audio

Dodawanie modułu audio do rzędu

Następnie przenieś/przeciągnij istniejący (wstępnie zaprojektowany) moduł audio z pierwszego wiersza w górnej sekcji do nowego wiersza, który właśnie utworzyłeś. Będzie to służyć jako polecany dźwięk, który dodamy do przyklejonego odtwarzacza audio

Dodawanie CTA za pomocą modułu Blurb

Następnie utworzymy CTA, które pojawi się po prawej stronie naszego przyklejonego paska treści audio.

Aby utworzyć wezwanie do działania, skopiuj moduł notki z ikoną odtwarzania w górnej części układu.

Następnie wklej zduplikowany moduł notki pod modułem audio w drugim rzędzie górnej sekcji.

Część 4: Stylizacja treści audio

Stylizacja modułu audio

Gdy wiersz odziedziczy lepką pozycję, chcemy mieć inny styl dla naszego modułu audio. Aby to zrobić, otwórz ustawienia modułu audio i zaktualizuj następujące opcje stanu trwałego:

• Rozmiar tekstu tytułu (przyklejony): 14px
• Wysokość linii tytułu (przyklejony): 1,3 em
• Wysokość linii napisów (przyklejony): 1,3 em

Wszystko, co robi, to zmniejszenie tekstu i nieznaczne odstępy, aby zawartość audio nie zajmowała dużo miejsca w pionie na naszym lepkim pasku.

Następnie chcemy zmienić szerokość modułu audio w stanie przyklejenia w następujący sposób:

• Szerokość (na biurku): 80%
• Szerokość (lepka): 100%
• Maksymalna szerokość (przyklejony): 100%

Następnie musimy dostosować odstępy modułu audio w następujący sposób:

• Margines: 0px góra, 0px dół
• Padding: 0px na górze, 0px na dole, 0px w lewo, 20px w prawo

Na koniec musimy dodać kilka niestandardowych fragmentów kodu CSS w ustawieniach zaawansowanych, aby wyrównać nasz tekst do lewej i dodać unikalne kolory do naszego przycisku i suwaka odtwarzacza audio.

Dodaj następujący kod CSS do tytułu audio tylko pod przyklejoną kartą:

text-align:left;

Dodaj następujący kod CSS do Audio Meta tylko pod przyklejoną zakładką:

text-align:left !important;

Dodaj następujący kod CSS do przycisków odtwarzacza tylko pod przyklejoną kartą:

color: #fe4943;

Dodaj następujący kod CSS do suwaków odtwarzacza Bieżące tylko pod przyklejoną kartą:

background: #2c4ca3;

Stylizacja CTA Blurb

Następnie zmienimy styl naszego modułu notki, który będzie służył jako próbne wezwanie do działania, aby wyświetlić wszystkie odcinki.

Najpierw dodaj tekst „Wszystkie odcinki” do treści treści notki.

Na karcie projekt zaktualizuj następujące elementy:

• Czcionka ciała: Lato
• Waga czcionki ciała: pogrubiona
• Styl czcionki ciała: TT
• Rozmiar tekstu ciała: 10px
• Odstępy między literami: 2px
• Wysokość linii ciała: 1,3 em

Następnie dostosuj rozmiar ikony notki:

• Rozmiar czcionki ikony: 50px

Następnie dostosuj rozmiar modułu w następujący sposób:

• Szerokość treści: 100%
• Szerokość: 20%

Teraz wróć do zakładki treści i dodaj tło dla notki w następujący sposób:

• Kolor tła: #1a1844
• Obraz tła: [dodaj obraz]
• Mieszanie obrazu tła: Jasność

Chcemy, aby ten moduł był początkowo ukryty przed widokiem, dopóki wiersz nie osiągnie stanu przyklejenia, a pasek sterowania dźwiękiem utknie w górnej części okna. Aby to zrobić, możemy dodać kilka fragmentów css, które ukrywają moduł na pulpicie i pokazują moduł w stanie przyklejonym.

Na karcie Zaawansowane zaktualizuj następujący niestandardowy kod CSS:

Główny element CSS (komputer stacjonarny):

display:none;

Główny element CSS (przyklejony):

display:block;

Rozmycie obrazu CSS:

margin-bottom: 10px

Część 5: Zmiana wyrównania zawartości paska audio w stanie przyklejonym

W tej chwili lepki rząd ma tylko jedną kolumnę z dwoma modułami ułożonymi jeden na drugim. Tak więc przyklejony pasek pokaże notkę CTA pod modułem audio. Zajęłoby to zbyt dużo miejsca w pionie dla lepkiego paska i nie wyglądałoby zbyt ładnie.

Aby upewnić się, że wszystko jest wyrównane w pionie i poziomie w kolumnie, my. może użyć właściwości CSS flex, aby dostosować układ naszych modułów w stanie przyklejonym.

Aby to zrobić, otwórz ustawienia dla kolumny zawierającej oba moduły.

W zakładce Zaawansowane dodaj następujący niestandardowy kod CSS do głównego elementu

Główny element (komputer):

display:flex;
flex-direction:column;

Główny element (lepki):

display:flex;
flex-direction: row;
align-items:center;
justify-content:center;

Otóż ​​to! Przyjrzyjmy się wynikom.

Ostateczny wynik

Oto projekt na pulpicie, gdy rząd jest w stanie przyklejenia.

A oto projekt na telefon komórkowy.

A oto kilka klipów wideo pokazujących, jak magia przyklejonego paska zawartości audio działa na aktywnej stronie.

Końcowe przemyślenia

Przyklejone opcje pozycji Divi mogą być potężnym narzędziem dla projektantów stron internetowych. W tym samouczku pokazaliśmy, jak stworzyć lepki pasek treści audio, korzystając z lepkich opcji stylizacji Divi w zaawansowany i kreatywny sposób. Jedną z unikalnych technik przedstawionych w tym samouczku było wyrównanie zawartości lepkiego wiersza za pomocą właściwości flex. Na szczęście Divi's ma wygodny sposób na dodawanie niestandardowych fragmentów kodu do stanu stałego przy użyciu zaawansowanych niestandardowych bloków CSS, aby zapewnić nam elastyczność projektowania, której potrzebowaliśmy. Mamy nadzieję, że da ci to inspirację do stworzenia takiego w następnym projekcie.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!