Tworzenie pięknych archiwów i wyświetlanie stron notatek do podcastu

Wczoraj użyliśmy wizualnego kreatora Divi, aby skonfigurować stronę główną dla Twojego podcastu, która absolutnie zaimponuje Twoim słuchaczom, ale co, jeśli chcą głębiej zagłębić się w Twój program?

Pójdą do pięknych archiwów i pokażą strony z notatkami, których nauczę cię dzisiaj robić.

Dzisiejsze produkty końcowe: Pokaż strony notatek i archiwów

Same strony mają na celu uzupełnienie strony głównej, ale nie odzwierciedlają bezpośrednio jej elementów.

Na stronie z notatkami programu chciałem się upewnić, że każdy odwiedzający będzie mógł posłuchać odcinka bezpośrednio w swojej przeglądarce, zobaczyć najciekawsze momenty i linki do tego konkretnego odcinka oraz mieć możliwość zapisania się na listę e-mailową.

Strona archiwum jest równie prosta, ale funkcjonalna, jak strona Pokaż notatki. Strony archiwów mają jeden cel: aby Twoi użytkownicy mogli szybko i łatwo zobaczyć Twój wsteczny katalog. Dokładnie to robi ta strona. Dzięki szybkiemu fragmentowi programu Twoi słuchacze będą mogli przejrzeć Twój program, aby znaleźć dokładnie ten temat, którego chcą słuchać.

Zasoby, których będziesz potrzebować

Podobnie jak wczoraj, będziesz potrzebować obrazów tła w wysokiej rozdzielczości. Dwa, których użyłem, znajdują się w tej kolekcji na Unsplash (która zawiera również tła z wczorajszej strony głównej). Edytowałem je tak, aby były w skali szarości w podglądzie, ale każde oprogramowanie do edycji obrazu będzie w stanie zastosować efekt czarno-biały/skali szarości lub przesunąć suwak nasycenia w dół do 0.

Twoje życie będzie również nieco łatwiejsze, jeśli zbudowałeś już stronę główną, ponieważ będziesz używać niektórych z tych samych stylów.

To wszystko, więc przejdźmy do budowania!

Tworzenie strony z notatkami programu

Notatki pokazowe to tylko „posty” w WordPressie, więc przejdź do swojego pulpitu nawigacyjnego i przejdź do Wpisy -> Dodaj nowy.

Zrobisz to za każdym razem, gdy chcesz utworzyć stronę z notatkami programu dla pojedynczego odcinka swojego programu. Nazwij go, jak chcesz, i ustaw slug URL na coś prostego (aby Twoi słuchacze zapamiętali to po zakończeniu odcinka).

Najpierw upewnij się, że klikniesz „Użyj Divi Builder”.

To powinno otworzyć kolejny zestaw opcji, których potrzebujemy. W prawej części strony ustaw wpis na „Pełna szerokość”, ponieważ nie będziemy używać paska bocznego do naszych notatek z pokazu. I ustaw tytuł posta na „Ukryj”, aby metadane, takie jak autor, komentarze i data samego posta, nie były wyświetlane.

Następnie będziesz chciał wejść do programu Visual Builder i zostać przedstawionym przez uroczo pustą stronę internetową.

Pierwszą rzeczą, którą będziesz chciał zrobić, to kliknąć ikonę koła zębatego w niebieskiej sekcji w lewym górnym rogu strony, aby wprowadzić ustawienia sekcji.

Stamtąd prześlij swój obraz tła. Przewiń nieco dalej w ustawieniach i włącz Użyj efektu paralaksy. Pozostaw metodę paralaksy na domyślną „Prawdziwa paralaksa”.

Zapisz te ustawienia i powinieneś zobaczyć coś takiego:

Nie do końca to, co było w końcowym produkcie powyżej, prawda? Będziemy musieli go nieco wydłużyć, dodając treść do strony.

Kliknij zielony + i wstaw pojedynczy wiersz kolumny (ten w lewym górnym rogu).

Następnie będziesz zadowolony, że zrobiłeś już wczorajszą stronę główną. Jak tylko wybierzesz swój rząd, zostaniesz powitany przez okno z prośbą o wybranie elementu. Wybierz odtwarzacz podcastów, który zapisaliśmy wczoraj, klikając „Dodaj z biblioteki”.

Nazwałem swój po prostu „Odcinek podcastu”, ale jeśli wybrałeś coś innego, upewnij się, że to wybrałeś.

Badabing-badaboom, masz odcinek podcastu dodany do strony z notatkami programu jak magia.

Pamiętaj, że będziesz musiał edytować tytuł i multimedia (i potencjalnie grafikę odcinka) dla każdej nowej strony z notatkami programu. To, co właśnie dodałeś, jest dokładną kopią tego, co zapisałeś.

Twoje aktualne notatki z programu trafią bezpośrednio pod odtwarzacz podcastów, więc najedź myszą na odtwarzacz i naciśnij czarny +. Przewiń w dół, aż zobaczysz moduł tekstowy. Dodaj go do strony.

Na karcie Treść w Ustawieniach tekstu wprowadź swoje notatki do edytora WYSIWYG i przejdź do karty Projekt.

Na karcie Projekt zaktualizuj następujące opcje:

Kolor tekstu: jasny
Orientacja tekstu: w lewo
Czcionka tekstu: Special Elite
Rozmiar czcionki tekstu: 20px
Kolor tekstu: #ffffff

Zapisz go, a powinieneś zobaczyć błyszczący nowy blok tekstowy i stronę podobną do tej.

Zbliżamy się do głównej części strony z notatkami programu – zostały tylko dwa elementy. Kliknij ponownie czarny + i dodaj zapisany wczoraj szablon przycisku.

Zamiast zabierać użytkowników do archiwów, tak jak to zrobi wczoraj, ten zwróci ich na stronę główną. Przejdź do strony ustawień przycisku i ustaw URL jako prosty ukośnik odwrotny.

Dlaczego nie przejść do /home lub czegoś podobnego? Cóż, użycie tylko odwrotnego ukośnika przeniesie użytkownika do dowolnej strony głównej witryny, bez względu na wszystko. A ponieważ jesteś w tej samej witrynie, nawet przeniesienie domen nie wpłynie na przycisk. Zawsze wróci do domu. Dokładnie tego chcesz!

Przejrzyj i wypełnij pozostałe ustawienia przycisku. Otwórz go w tym samym oknie, zmień tekst przycisku na „Powrót do domu” (lub cokolwiek chcesz), a wyrównanie przycisku na „W prawo” (zarówno, aby nie przeszkadzał w treści, jak i aby stał w stosunku do treści). Styl karty Projekt powinien zostać zaimportowany z Biblioteki Divi.

Będziesz miał teraz ładny przycisk nawigacyjny i sugeruję dodanie go do swojej biblioteki, abyś mógł go używać na wielu stronach.

I na koniec skonfigurujmy rejestrację e-mail, abyśmy mogli uzyskać te słodkie, słodkie adresy e-mail, aby użytkownicy byli na bieżąco z wiadomościami o podkaście.

W tym celu potrzebujemy zupełnie nowego, jednokolumnowego wiersza. Więc kliknij zielony + i ustaw go na swoim miejscu. Następnie dodaj moduł Email Optin z listy rozwijanej. Tak jak wczoraj, przejdź do ustawień modułu i wprowadź dowolny tytuł, który chcesz wyświetlić, a także dowolny tekst wezwania do działania, który chcesz w edytorze WYSIWYG.

Dodaj także dowolny tekst dla samego przycisku. Wybrałem całkowicie wyjątkowy „Subskrybuj”.

Wybierz dostawcę usług pocztowych i listę (pamiętaj od wczoraj, że pełny moduł nie pojawi się na stronie, jeśli nie wybierzesz listy).

Zmień tło RGBA na przezroczyste.

Na karcie Projekt ustaw czcionkę nagłówka na „Special Elite”, a rozmiar na 36px.

Ustawisz również czcionkę ciała na „Special Elite” i rozmiar na 16px.

W przeciwieństwie do prawie wszystkiego innego dla tej witryny, chcemy użyć obramowania dla modułu Email Optin. Przesuń więc "Obramowanie użytkownika" na tak i ustaw kolor na #ffffff, a niestandardowe wypełnienie ma 15 pikseli ze wszystkich stron.

Gdy to zrobisz, przejdź do zakładki Zaawansowane i dodaj to do elementu głównego w obszarze Niestandardowy CSS, aby zaokrąglić rogi modułu:

border-radius:10px;

Zapisz swoją pracę, a otrzymasz opcję e-mail!

Jedyną inną rzeczą, której wymaga strona z notatkami pokazowymi, jest zapisanie tego modułu do użytku na innych stronach. Ponieważ chcesz, aby opcje e-maili były spójne w całej witrynie, zapiszemy to jako element globalny. Kliknij przycisk "Dodaj do biblioteki" po najechaniu myszą na moduł i upewnij się, że zaznaczyłeś pole "Uczyń ten element globalnym".

Teraz masz jeden element, którego możesz używać na wielu stronach. A jeśli wprowadzisz w nim jakiekolwiek zmiany, zostaną one odzwierciedlone we wszystkich instancjach, w przeciwieństwie do odtwarzacza podcastów i przycisku powyżej, gdzie każdy moduł można zmienić indywidualnie.

A oto, moi przyjaciele, jest twój szablon strony Pokaż notatki! Sugeruję również zapisanie całej strony w swojej bibliotece, abyś mógł ją po prostu zaimportować i zmienić elementy potrzebne do każdego odcinka.

Teraz…do archiwów! Linia mety jest widoczna!

Tworzenie strony archiwów

Przejdź do pulpitu WordPress i przejdź do Dodaj nową stronę, nazwij ją (moja to „Archiwa”) i otwórz Divi Visual Builder. Bułka z masłem.

Gdy już tam będziesz, dodaj nowy wiersz z jedną kolumną z modułem tekstowym.

Przejdź do ustawień i wprowadź tytuł strony w edytorze WYSIWYG.

Na karcie Projekt ustaw kolor tekstu na jasny, a orientację na środek. Ustaw czcionkę na „Special Elite”, a rozmiar czcionki na 50px.

Aby tekst wyglądał dobrze na telefonie komórkowym, zmień górny i dolny margines na 40px.

Zapisz swoją pracę i – przygotuj się – przygotuj się na dodanie tła do archiwów! Otwórz ustawienia w niebieskim polu + i wybierz obraz tła i ustaw paralaksę, tak jak w przypadku Pokaż notatki. Ponownie zrobiłem tę jedną skalę szarości za pomocą podglądu.

W zakładce Projekt ustaw górne i dolne dopełnienie odpowiednio na 55px i 176px, aby cała strona pozwalała na zobaczenie efektu paralaksy bez względu na to, ile postów masz w swoich archiwach.

Dlaczego 176px zamiast 175? Ponieważ jestem buntownikiem, dlatego.

Zobaczysz to, gdy zapiszesz swoją pracę:

Następnie dodaj nowy wiersz z jedną kolumną, tylko tym razem wstaw moduł Blog. Spowoduje to wyświetlenie dowolnej ustawionej pętli WordPress, a my chcemy, aby były to fragmenty i tytuły, aby Twoi słuchacze wiedzieli, czego się spodziewać.

Przejdź do ustawień i zaktualizuj opcje w zakładce Treść w następujący sposób:

Numer posta: 10 (lub cokolwiek uważasz, że najlepiej pasuje do Twojej witryny – po wyświetleniu tego numeru zostanie wyświetlona strona)
Treść: Pokaż fragment (ponieważ chcemy, aby użytkownik kliknął i odsłuchał odcinek w odtwarzaczu)
Pokaż wyróżniony obraz: TAK
Kolor tła płytki siatki: rgba (73,73,73,0.72)

Na karcie Projekt zaktualizuj następujące opcje:

Układ: Siatka
Czcionka nagłówka: Special Elite
Kolor tekstu nagłówka: #ffffff
Czcionka ciała: Special Elite
Kolor tekstu ciała: #ffffff
Meta Czcionka: Special Elite
Kolor tekstu meta: #ffffff
Użyj ramki: TAK
Kolor obramowania: #ffffff
Szerokość obramowania: 1px
Styl obramowania: Solidny

Kiedy wszystko jest gotowe, masz do zrobienia ostatnią część stylizacji. Sama siatka ma ostre, kwadratowe rogi w każdym pudełku, a chcemy uzyskać promień obramowania 10px, aby pasował do reszty witryny.

Przejdź do pulpitu WordPress –> Divi –> Opcje motywu, a następnie przewiń w dół do niestandardowego CSS. Dodaj ten kod do pola, aby zaokrąglić rogi poszczególnych pól z fragmentami:

.et_pb_post {
 border-radius: 10px;
}

Pamiętaj, że „.et_pb_post” to klasa CSS, której Divi używa do dostosowania tych pól jako całości.

Następnie zapisz całą swoją pracę.

Jedyne, co pozostało do zrobienia, to dodać przycisk Powrót do domu z biblioteki i gotowe. Kliknij czarny +, aby dodać go do tego samego wiersza, co moduł bloga.

Hot diggity dog, właśnie skończyłeś konfigurować swoją stronę Archiwum.

Gratulacje! Właśnie zakończyłeś konfigurowanie strony Archiwum. Zapisz swoją stronę Archiwum jako szablon, klikając fioletowy + na dole ekranu, a będziesz mógł wybrać inny element z listy życzeń – ponieważ między wczoraj a dziś właśnie utworzyłeś w pełni funkcjonalny odtwarzacz podcastów, stronę główną, archiwum, i szablon dla poszczególnych prezentowanych notatek.

Na zakończenie

I to wszystko! Dziękuję za śledzenie moich dwóch samouczków dotyczących stron podcastów. Możesz złapać pierwszy Jak stworzyć piękną stronę podcastu za pomocą Divi pod tym linkiem. Jeśli masz jakieś pytania lub komentarze, zostaw je poniżej, a postaram się na nie odpowiedzieć!