Jak stworzyć piękną stronę podcastu za pomocą Divi

Masz świetny podcast. Ale Twoja witryna może wymagać trochę pracy. Wykonuje swoją pracę, ale nie wyróżnia się. Nie bój się, podcasterze! Mam cię przy sobie.

Nauczę Cię prostego sposobu używania Divi do tworzenia nie tylko łatwej do aktualizacji strony głównej podcastu, ale także stylowej strony archiwum i szablonu dla poszczególnych odcinków.

Dzisiejszy produkt końcowy: trzyczęściowa strona główna podcastu

Chciałem, aby projekt był prosty i jak najmniejszy, bez utraty osobowości, którą musi zachować dobry podcast. Ten projekt jest przeznaczony do fikcyjnego niezależnego podcastu zatytułowanego You're An All-Star , którego celem są buty i bycie szczęśliwym. Chciałem, żeby projekt odzwierciedlał ten motyw.

Pierwsza sekcja używa jasnego koloru, aby przyciągnąć uwagę użytkownika, zapewnia szybką informację o tym, o czym jest podcast po lewej stronie i używa modułu Divi Audio do zaprezentowania odcinka podcastu do natychmiastowego odsłuchania.

Gdy użytkownik przewija w dół, estetyka nieznacznie przesuwa się do sekcji Wybrane odcinki, która ponownie wykorzystuje moduł audio Divi do prezentowania łatwo dostępnych treści, a także opcję odwiedzania archiwów programu. Tło jest paralaksą, aby zwrócić uwagę na same odcinki.

Ostatnia sekcja to po prostu e-mail opt-in. Każda marka, podcast, blog i firma potrzebuje takiego, a żeby go wyróżnić, przestawiłem tę sekcję z powrotem na kolorowe tło i zmniejszyłem ją na tyle, aby paralaksa z drugiej sekcji pomogła zwrócić na nią dodatkową uwagę.

Poniżej przedstawię Ci samouczek krok po kroku, jak stylizować i tworzyć każdy moduł, sekcję i stronę witryny.

Zasoby, których będziesz potrzebować

Wspaniałą rzeczą w tym projekcie jest to, że nie wymaga wielu zasobów poza samym Divi. Wszystko, czego potrzebujesz, to 5 obrazów o wysokiej rozdzielczości, których możesz użyć jako tła i dowolne grafiki podcastów i miniatury, których używasz do swoich odcinków.

Wszystkie moje obrazy pochodzą z Unsplash (wszystkie obrazy z tej strony można znaleźć w tej kolekcji). Użyłem podglądu, aby przekonwertować niektóre z nich na czarno-białe, ale możesz użyć dowolnego oprogramowania do edycji obrazu. Prawie wszystkie z nich pozwalają wybrać opcję skali szarości / czerni i bieli lub zmniejszyć nasycenie do zera.

Poza tym wszystkie potrzebne zasoby znajdują się bezpośrednio w Divi. W takim razie przejdźmy do tego!

Strona główna witryny podcastów: sekcja pierwsza

Zacznij od utworzenia nowej strony w panelu WordPress i ustawienia jej jako strony głównej witryny. (Dogodnie nazwałem mój „Dom”).

Teraz wróć, aby edytować swoją nową stronę. W polu Atrybuty strony na prawym pasku bocznym zmień domyślny szablon na pusty szablon strony.

Najpierw tworzymy trzykolumnowy wiersz.

Wewnątrz środkowej kolumny chcemy wstawić moduł rozdzielacza Divi.

W ustawieniach dzielnika, na karcie Projekt, ustaw wysokość na 600. Dzięki temu nie tylko dwie zewnętrzne kolumny (główna treść sekcji) zostaną oddzielone, ale także sekcja będzie wystarczająco wysoka, aby zapewnić odpowiednią białą przestrzeń na wielu rozdzielczości rzutni. (Pozostając domyślnie ukryty na urządzeniu mobilnym.)

Teraz w lewej kolumnie dodamy dwa moduły tekstowe. Uznałem, że w przypadku tego projektu poziomy nagłówek wyglądałby nie na miejscu, więc pierwszy moduł tekstowy będzie po prostu tytułem.

Na karcie treści w Ustawieniach tekstu dodaj tytuł do pola treści.

Na karcie Projekt zmień kolor tekstu na „Jasny” i zmień orientację tekstu na „Środek”. Następnie dostosuj czcionkę i rozmiar tekstu. Wybrałem czcionkę „Special Elite” ze względu na jej przygnębiony wygląd, a następnie ustawiłem jej rozmiar na 60. Ustaw także wysokość linii tekstu na 1em.

Gdy już to zrobisz, czas przejść do drugiego pola tekstowego. Używamy tego jako krótkiej notki do podcastu.

Na karcie Treść Aktualizuj następujące opcje:

Treść : wpisz swój tekst opisu (sugeruję skróconą wersję opisu, którego używasz w iTunes i innych usługach)
Kolor tła : rgba (0,0,0,0.4)

Na karcie Projekt wybierz "Jasny" jako kolor tekstu i wybierz "Środek" dla orientacji tekstu, tak jak w poprzednim polu. Ustaw także czcionkę tekstu na „Special Elite” w rozmiarze 20px.

Na koniec dodaj 10 pikseli wypełnienia wokół całego pola tekstu.

Następnie przejdź do zakładki Zaawansowane i w obszarze Niestandardowy CSS wprowadź to w polu Główny element, aby zaokrąglić rogi pola tekstowego:

border-radius: 10px;

Gdy to zrobisz, skończysz z dwiema pierwszymi kolumnami nowej witryny! Hurra! Zapisz swoją pracę, klikając fioletowe kółko u dołu strony i naciskając zielony przycisk zapisu.

Wspaniała robota!

Aby było jednak trochę bardziej atrakcyjne wizualnie, musimy ustawić tło sekcji, więc przejdź do ustawień niebieskiego pola (sekcji) i prześlij obraz tła. Mam tendencję do utrzymywania rozdzielczości około 1920×1280.

Powinieneś teraz zobaczyć coś, co wygląda tak:

Do tej pory możesz zadać sobie pytanie: „A co z podcastami? To strona z podcastami, a my jeszcze nic nie zrobiliśmy z podcastem!” Masz całkowitą rację. Zacznijmy więc trochę audio, wybierając (zgadłeś) moduł audio w trzeciej kolumnie naszego wiersza.

Domyślny moduł audio nie pasuje dokładnie do motywu, z którym będziemy korzystać dla tej witryny, więc weźmy to z tego:

Do tego:

Otwórz ustawienia modułu audio. Pole Audio to miejsce, w którym możesz przesłać własny plik na dowolny host, z którego korzystasz, lub możesz bezpośrednio połączyć się z plikiem multimedialnym dowolnej usługi podcastów, z której korzystasz. Używam Libsyn do mojego, więc po prostu złapałem adres URL multimediów i wkleiłem go.

(Ciekawostka: każdy, kto kliknie, gra na Twojej stronie za pośrednictwem tego modułu, również zostanie policzony jako pobranie na pulpicie Libsyn. Punktacja!)

Następnie możesz umieścić tytuł odcinka, do którego prowadziłeś link, pod tytułem, a swoje imię i nazwisko pod nazwą wykonawcy (lub cokolwiek innego w swoim programie. W przypadku naszego fikcyjnego podcastu o butach, jak mogę wybrać coś innego niż Chuck Taylor? ). Tytuł albumu będzie nazwą Twojego podcastu.

Następnie zmieńmy ten zielonkawo-turkusowy kolor na całkowicie przezroczyste tło. Kolor nie ma znaczenia. Po prostu przesuń pasek przezroczystości do samego dołu lub do ostatniej cyfry RGBA równej 0.

W przypadku obrazu okładki najlepiej użyć miniatury tego konkretnego odcinka lub grafiki podcastu, której używasz w iTunes i gdzie indziej.

Po posortowaniu szczegółów podcastu przejdź do zakładki Projekt, aby naprawdę uczynić tego gracza swoim.

Wybierz „Jasny” dla opcji Kolor tekstu. Ustaw czcionki na „Special Elite”, rozmiar tytułu na 50 pikseli, a rozmiar podpisu na 20 pikseli.

Ustawiłem również górny margines na tym konkretnym odtwarzaczu na 50px, ponieważ ten margines utrzymuje odtwarzacz wyśrodkowany poziomo w sekcji, a po przełączeniu na mobilny pozwala na dobre odstępy między elementami. (Ustawienie dotyczy wszystkich rozmiarów okien ekranu, o ile nie klikniesz ikony smartfona).

Ponieważ tło jest przezroczyste, nie ma potrzeby zaokrąglania rogów, aby dopasować pole tekstowe w pierwszej kolumnie, więc naciśnij Zapisz.

Ponieważ ten odtwarzacz podcastów jest gwiazdą programu, nie chcemy go za każdym razem odtwarzać, więc zapiszemy ten moduł do biblioteki Divi, co pozwoli nam łatwo powielać go w serwisie i edytuj tak, jak trzeba.

Wprowadź dowolną nazwę szablonu i NIE zaznaczaj opcji „Ustaw to jako element globalny”. Użyjemy tej opcji w części 2 tej serii, ale nie teraz.

W porządku! Jeszcze tylko jeden element i pierwsza sekcja jest kompletna. (Nie martw się jednak. To najbardziej z nich wszystkich zaangażowanych.)

Większość podcastów prowadzi bloga lub pokazuje notatki, do których słuchacze mogą wrócić i ponownie przejrzeć to, co zostało omówione w odcinku. Twój podcast nie jest inny, jestem pewien. Dodanie linku do pokazowych notatek podcastu jest całkowicie bezbolesne.

Utwórz nowy blok tekstowy w trzeciej kolumnie, otwórz ustawienia i wpisz dowolny tekst linku. W tym przykładzie jest to oczywiste „przeczytaj notatki z programu”.

Kliknij ikonę na pasku narzędzi, aby dodać łącze, a następnie wpisz/wklej adres URL notatek z programu. (Ponownie w części 2 pokażę, jak tworzyć i stylizować posty na blogu dla notatek z programu). wpis napisałem do tego odcinka.

(Uwaga: nie wprowadzając informacji o domenie, a tylko ślimaka, mówisz WordPressowi, aby kierował użytkowników do tej strony, niezależnie od informacji o domenie. Jest to naprawdę przydatne w przypadku zmiany domeny i pomaga zapobiegać niedziałającym linkom!)

Po prostu zapisz ten link i gotowe!

Powinieneś również zapisać ten moduł w swojej bibliotece w taki sam sposób, w jaki zrobiłeś odtwarzacz podcastów.

Voila! Twoje własne… czekaj. O o. Twój link do notatek z programu jest…jest…brzydki!

Bez obaw. Brzydkie linki to łatwa naprawa! Nawet jeśli użyjesz ustawień w module tekstowym do zmiany koloru tekstu, nie wpłynie to na te słowa, ponieważ są one linkiem.

Przejdź do pola Custom CSS w swoim Divi -> Opcje motywu i wprowadź to na dole.

a:link, a:visited, a:active {
    color: #ffffff;
}
 
a:hover {
 color: #ffffff;
 font-weight: bold;
 text-decoration: underline;
}

Dzięki temu tekst pozostanie biały (w zgodzie z resztą tekstu witryny, upewnij się, że jest podkreślony jak większość innych linków i pogrubiony, gdy najedziesz na niego myszą).

Upewnij się, że go zapisałeś, a teraz Twój odtwarzacz podcastów jest gotowy!

Aby ostatnią poprawkę w tej pierwszej sekcji, kliknij Ustawienia wiersza (zielone pole).

Wybierz „Użyj niestandardowej szerokości”. Upewnij się, że jednostki są ustawione na wartości procentowe i przesuń suwak na 80. Spowoduje to, że ten wiersz zajmie 80% dowolnego rozmiaru rzutni, jaką ma użytkownik, co zapobiega gromadzeniu się wszystkiego.

Podobnie jak górna sekcja nowej strony internetowej Twojego podcastu! Powinno to teraz wyglądać mniej więcej tak.

Zapisz to i tak po prostu większość pracy jest wykonana! A dzięki funkcji biblioteki Divi przeleci kilka następnych sekcji! Tylko patrz.

Strona główna witryny podcastów: sekcja druga

W tej sekcji zaprezentujemy wybrane odcinki naszego podcastu i umożliwimy użytkownikom odwiedzanie archiwów (które, podobnie jak strony z notatkami, pojawią się w części 2).

Pierwszą rzeczą, jaką zamierzamy zrobić, jest utworzenie nowej sekcji, klikając niebieski + na dole sekcji i dodając zwykłą sekcję. Spowoduje to utworzenie kolejnej niebieskiej skrzynki w kreatorze wizualnym. Dodaj w jednym wierszu.

Kiedy już to mamy, dodajmy tło w taki sam sposób, jak to zrobiliśmy powyżej, tylko tym razem chcemy wybrać „Użyj opcji paralaksy” w ustawieniach sekcji. Pozostaw menu rozwijane na „Prawdziwa paralaksa” zamiast „CSS”.

To jedyna sekcja, której użyjemy z paralaksą na stronie głównej. Myślę, że użycie efektu oszczędnie zwraca większą uwagę na treści, które chcesz wyróżnić.

Zapisz, a następnie wstaw nowe pole tekstowe do wiersza. Wpisz „Wybrane odcinki”, wyśrodkuj go w edytorze WYSIWYG i przejdź do ustawień, aby ustawić czcionkę tekstu na „Special Elite” i rozmiar tekstu 50 pikseli. Powinieneś teraz zobaczyć coś takiego:

Poniżej utwórz nowy trzykolumnowy wiersz, klikając zielony +, aw pierwszej kolumnie wprowadź "Dodaj z karty biblioteki". (W tej chwili nie będziesz mieć wszystkich tych opcji bibliotecznych, ale później!)

Wybierz „Odcinek podcastu” lub cokolwiek, co nazwałeś powyżej swojego odtwarzacza. Następnie dodaj pod nim kolejny moduł, ponownie przejdź do biblioteki i dodaj zapisany moduł „Pokaż łącze do notatek”. Zrób to dla wszystkich trzech kolumn, aż zobaczysz to:

Kontynuuj, aż dodasz wszystkie odcinki, które chcesz. Edytuj tytuł, okładkę albumu i pokaż linki do notatek dla każdego odcinka. Właśnie dodałem drugi wiersz i wypełniłem tylko drugą kolumnę, aby projekt pasował do wybranego przeze mnie tła.

Jedyne, co pozostało w tej sekcji, to dodanie przycisku „Przeglądaj archiwa”. Utwórz nowy wiersz na samym dole, klikając zielony + i użyj układu jednokolumnowego. Włóż moduł „Przycisk”. Stworzy to bardzo trudny do odczytania przycisk (oczywiście w zależności od twojego tła), który będzie wymagał prostej stylizacji.

Otwórz ustawienia modułu Buttona i wprowadź informację URL dla strony, która będzie Twoim archiwum. Poszedłem z oczywistym „/archiwum”, użyłem tekstu „Przeglądaj archiwa”, a następnie wyśrodkowałem sam przycisk.

Na karcie ustawień klikamy „Użyj niestandardowych stylów dla przycisku” i ustawimy kolor tła na „#ffffff”, a kolor tekstu na „#000000” (czyli odpowiednio biały i czarny).

Następnie będziemy chcieli zaokrąglić rogi przycisku, ustawiając promień obramowania na 10px, ustaw czcionkę na „Special Elite” i zmień ikonę Dodaj przycisk z „Domyślny” na „Nie”.

Na koniec zmień promień obramowania przycisku na 10px, aby był zaokrąglony, gdy przycisk znajduje się nad nim.

Zapisałem to w mojej bibliotece, aby móc używać stylizacji w innych przyciskach w miarę postępów.

I z tym twoja druga sekcja jest skończona. Prawie gotowe, podcaście! Zaokrąglasz trzeci – dosłownie!

Strona główna witryny podcastów: sekcja trzecia

To będzie po prostu pojedynczy moduł na statycznym tle.
Najpierw utwórz nowe niebieskie pole z kolumną o podwójnej szerokości, tak jak zrobiliśmy to w sekcji drugiej, i wybierz z menu moduł „Email Optin”.

Zobaczysz ten podświetlony, który w ogóle nie pasuje do naszego projektu. Jest to jednak bardzo łatwe rozwiązanie.

Przejdź do ustawień modułu i zaktualizuj następujące opcje:

Tytuł: celowo pozostawiłem tytuł pusty
Treść: dodaj notatkę wezwania do działania i wyśrodkuj ją.
Usługodawca: używam Mailchimp, więc to właśnie tutaj poszedłem.
Kolor tła: przezroczysty; dzięki temu sam przycisk jest przezroczysty.

Jedyne, co musisz zrobić, to upewnić się, że usługa poczty e-mail jest świadczona, w przeciwnym razie formularz nie pojawi się po zapisaniu i wyjściu z kreatora. Jeśli używasz Mailchimp, w dokumentacji pomocy technicznej znajdziesz świetną dokumentację dotyczącą znajdowania klucza API.

Gdy już masz klucz, przejdź do pulpitu WordPress, przejdź ponownie do Divi -> Opcje motywu i wprowadź swój klucz API Mailchimp w polu o trafnej nazwie „Klucz API Mailchimp”.

Po zapisaniu, jedynym krokiem, który pozostał do uzyskania pięknej, gotowej strony, jest ustawienie tła dla trzeciej sekcji. Finalny produkt powinien wyglądać mniej więcej tak:

Zrobiłeś to! Hurra! Masz teraz w pełni funkcjonalną stronę główną swojego podcastu. Czas bić rekord i opowiedzieć o tym światu, prawda?

Jutro: tworzenie pięknych archiwów i wyświetlanie stron notatek do podcastu

Ponieważ masz teraz świetną stronę główną, możesz prezentować najwspanialsze treści, jakie masz. Ale jeśli twoi fani staną się prawdziwymi fanatykami, będą chcieli zagłębić się w twój program.

Jutro pokażę ci, jak zebrać proste, ale piękne strony dla całego archiwum odcinków podcastów, a także osobne strony dla każdego odcinka, które informują czytelników o tym, o czym dyskutujesz w każdym odcinku i dają im szansę na zarejestrowanie się dla Twojej super-niesamowitej listy e-mailowej.

Do zobaczenia jutro!

Pokaż stronę notatki:

Strona archiwum: