Jak dodać naprawiony pasek audio „Najnowszy odcinek” do nagłówka Divi?

Jeśli prowadzisz witrynę z podcastami za pomocą Divi, istnieje duże prawdopodobieństwo, że już korzystasz z wbudowanego modułu audio. Teraz, jeśli szukasz specjalnego sposobu na umieszczenie swojego najnowszego odcinka w centrum uwagi, pokochasz ten samouczek. Dzisiaj pokażemy, jak umieścić w nagłówku Divi stały pasek audio najnowszego odcinka. Dodamy animację pętli modułu tekstowego, aby zwrócić uwagę na pasek audio, a także będziesz mógł pobrać szablon globalnego nagłówka, w tym pasek audio!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz szablon nagłówka paska audio ZA DARMO

Aby położyć swoje ręce na darmowym szablonie nagłówka paska audio, 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!

Przejdź do kreatora motywów Divi i zacznij budować globalny nagłówek

Przejdź do kreatora motywów Divi

Zacznij od przejścia do Divi Theme Builder na zapleczu swojej witryny WordPress.

Zacznij budować globalny nagłówek

Następnie zacznij budować globalny nagłówek.

Utwórz globalny nagłówek z najnowszym paskiem audio odcinka

Ustawienia sekcji

Kolor tła

W edytorze szablonów zauważysz sekcję. Otwórz tę sekcję i zmień kolor tła. Dopasowujemy ten globalny nagłówek do pakietu układu podcastów, ale możesz użyć dowolnego innego wybranego stylu projektowania.

• Kolor tła: #1a1844

Rozstaw

Następnie przejdź do karty projektu i dodaj niestandardowe wartości dopełnienia dla różnych rozmiarów ekranu.

• Górna wyściółka: 50px (komputer), 80px (tablet i telefon)
• Dolna wyściółka: 0px

Cień Pudełka

Aby oddzielić nagłówek od treści strony/postu, dodamy również cień pola do naszej sekcji.

• Siła rozmycia cieni w pudełku: 80px
• Kolor cienia: rgba(0,0,0,0.3)

Dodaj wiersz nr 1

Struktura kolumny

Kontynuuj, dodając pierwszy wiersz do sekcji, korzystając z następującej struktury kolumn:

Kolor tła

Cały ten wiersz będzie poświęcony naszemu najnowszemu pasku dźwiękowemu odcinka. Ale zanim do tego dojdziemy, otwórz ustawienia wiersza i zmień kolor tła.

• Kolor tła: #fe4943

Rozmiary

Przejdź do karty projektu wiersza i następnie zmień ustawienia rozmiaru.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 90%
• Maksymalna szerokość: 100%

Rozstaw

Dodajemy również niestandardowe górne i dolne wyściółki.

• Górna wyściółka: 10px
• Dolna wyściółka: 10px

Granica

Następnie przejdziemy do ustawień obramowania i dodamy zaokrąglone rogi.

• Dolny lewy: 10px
• Dolny prawy: 10px

Cień Pudełka

Dodaliśmy również cień pudełka.

• Siła rozmycia cieni w pudełku: 50px
• Kolor cienia: rgba(0,0,0,0.3)

Pozycja

Następnie przejdziemy do zakładki Zaawansowane i naprawimy cały wiersz. Zwiększymy również indeks z wiersza, aby upewnić się, że nakłada się na drugi wiersz, który dodamy do naszej sekcji.

• Pozycja: Naprawiono
• Lokalizacja: górne centrum
• Indeks Z: 11

Kolumna 1 Widoczność

Uzupełnij ustawienia wiersza, ustawiając przepełnienia kolumny 1 na ukryte. Pomoże to w animacji tekstu, którą można było zauważyć w podglądzie tego posta. Ustawiając przepełnienia na ukryte, upewnimy się, że animacja jest ukryta poza kontenerem kolumny.

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość

Czas dodać moduły, zaczynając od modułu tekstowego w kolumnie 1. Dodaj wybraną kopię.

Ustawienia tekstu

Przejdź do zakładki projektu modułu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Otwórz Sans
• Styl czcionki tekstu: wielkie litery
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 15px
• Odstępy między literami tekstu: 3px

Rozstaw

Dodamy również ujemny lewy margines do naszego modułu. Pomoże to w naszej animacji pętli.

• Lewy margines: -190%

Animacja

Na koniec dodaj następującą animację pętli do swojego modułu tekstowego:

• Styl animacji: slajd
• Kierunek animacji: w lewo
• Czas trwania animacji: 9000ms
• Intensywność animacji: 30%
• Początkowe krycie animacji: 100%
• Krzywa prędkości animacji: liniowa
• Powtórzenie animacji: pętla

Dodaj moduł audio do kolumny 2

Usuń całą zawartość

W kolumnie 2 jedynym modułem, którego potrzebujemy, jest moduł audio. Upewnij się, że zawartość została usunięta.

Prześlij plik audio

Następnie prześlij plik audio zawierający najnowszy odcinek.

Usuń kolor tła

Następnie usuń kolor tła modułu.

Rozstaw

Następnie przejdź do zakładki projektowania i usuń niektóre domyślne wartości dopełnienia, dodając do nich „0px”.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px
• Lewa wyściółka: 0px

Dodaj wiersz nr 2

Struktura kolumny

Do następnego rzędu. Ten wiersz będzie zawierał nasze logo, menu i ikony mediów społecznościowych. Wybierz następującą strukturę kolumn:

Rozmiary

Bez dodawania modułów otwórz ustawienia wiersza i odpowiednio zmodyfikuj ustawienia rozmiaru:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Maksymalna szerokość: 100%

Rozstaw

Następnie usuń wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj moduł menu do kolumny 1

Wybierz menu

Następnie dodaj moduł menu do kolumny 1 i wybierz wybrane menu.

Prześlij logo

Następnie prześlij logo.

Usuń kolor tła

Następnie usuń domyślny biały kolor tła.

Ustawienia tekstu menu

Przejdź do zakładki projektowania i zmień ustawienia tekstu menu w następujący sposób:

• Czcionka menu: Otwórz Sans
• Kolor tekstu menu: #ffffff (komputer), #1a1844 (tablet i telefon)
• Rozmiar tekstu menu: 15px
• Wyrównanie tekstu: do prawej

Menu rozwijane Ustawienia tekstu

Zmieniamy również kolor linii menu rozwijanego w ustawieniach menu rozwijanego.

• Kolor linii menu rozwijanego: #ffffff

Ustawienia ikon

Wraz z kolorem ikony menu hamburgera w ustawieniach ikon.

• Kolor ikony menu hamburgerów: #fe4943

Rozmiary

A my uzupełnimy ustawienia modułu, przypisując maksymalną szerokość logo w ustawieniach rozmiaru.

• Maksymalna szerokość logo: 65%

Dodaj moduł śledzenia mediów społecznościowych do kolumny 2

Dodaj sieci społecznościowe

W drugiej kolumnie naszego drugiego rzędu potrzebujemy modułu Social Media Follow. Dodaj wybrane sieci społecznościowe.

Wyrównanie

Przejdź do zakładki projektu modułu i zmień wyrównanie modułu.

• Wyrównanie modułu: Środek

Rozstaw

Następnie dodaj kilka niestandardowych wartości marginesów.

• Górny margines: 20px
• Margines dolny: -4% (tylko tablet i telefon)

Granica

I uzupełnij nagłówek, dodając zaokrąglone rogi do ustawień obramowania modułu. Po ukończeniu globalnego nagłówka zapisz wszystkie zmiany Divi Theme Builder i wyświetl wynik na swojej stronie!

• Wszystkie rogi: 50vw

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak wykazać się kreatywnością dzięki wbudowanemu modułowi audio Divi. Mówiąc dokładniej, pokazaliśmy, jak dołączyć stały pasek audio do niestandardowego globalnego nagłówka. To świetny sposób na podkreślenie najnowszego odcinka podcastu. Udało Ci się również pobrać plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.