Создание красивых архивов и отображение страниц заметок для вашего подкаста

Вчера мы использовали визуальный конструктор Divi, чтобы создать домашнюю страницу вашего подкаста, которая произведет на ваших слушателей огромное впечатление, но что, если они захотят глубже изучить ваше шоу?

Они направятся к красивым архивам и покажут страницы заметок, которые я собираюсь научить вас делать сегодня.

Сегодняшние конечные продукты: показать страницы заметок и архивов

Сами страницы предназначены для дополнения домашней страницы, но не для прямого отражения ее элементов.

На странице заметок к шоу я хотел убедиться, что любой посетитель сможет прослушать эпизод прямо в своем браузере, увидеть основные моменты и ссылки для этого конкретного эпизода, а также иметь возможность подписаться на ваш список рассылки.

Страница архива так же проста, но функциональна, как и страница с заметками. Страницы архивов преследуют одну цель: ваши пользователи могут быстро и легко увидеть ваш бэк-каталог. Это именно то, что делает эта страница. Сделав небольшой отрывок о шоу, ваши слушатели смогут просмотреть ваше шоу, чтобы найти именно ту тему, которую они хотят слушать.

Активы, которые вам понадобятся

Как и вчера, вам понадобятся фоновые изображения с высоким разрешением. Два, которые я использовал, находятся в этой коллекции на Unsplash (которая также включает фоны со вчерашней домашней страницы). Я отредактировал их так, чтобы они были оттенками серого в предварительном просмотре, но любое программное обеспечение для редактирования изображений сможет либо применить эффект черно-белого / оттенков серого, либо позволить вам переместить ползунок насыщенности вниз до 0.

Ваша жизнь также будет немного легче, если вы уже создали домашнюю страницу, потому что вы будете использовать некоторые из тех же стилей.

Вот и все, приступим к строительству!

Создание страницы заметок шоу

Заметки к шоу - это просто «сообщения» в WordPress, поэтому перейдите на свою панель управления и выберите «Записи» -> «Добавить».

Вы будете делать это каждый раз, когда захотите создать страницу заметок для отдельного эпизода вашего шоу. Назовите его так, как хотите, и установите для заголовка URL что-нибудь простое (чтобы ваши слушатели запомнили его после окончания вашего эпизода).

Во-первых, убедитесь, что вы нажали «Использовать Divi Builder».

Это должно открыть следующий набор необходимых нам опций. В правой части страницы установите для публикации значение «Полная ширина», потому что мы не собираемся использовать боковую панель для наших заметок о шоу. И установите для заголовка сообщения значение «Скрыть», чтобы метаданные, такие как автор, комментарии и дата для самого сообщения, не отображались.

Затем вы захотите войти в Visual Builder и увидеть восхитительно пустую веб-страницу.

Первое, что вам нужно сделать, это щелкнуть значок шестеренки в синем разделе в верхнем левом углу страницы, чтобы войти в настройки раздела.

Оттуда загрузите фоновое изображение. Прокрутите немного ниже до настроек и включите Use Parallax Effect. Оставьте для метода параллакса значение по умолчанию «Истинный параллакс».

Сохраните эти настройки, и вы должны увидеть что-то вроде этого:

Не совсем то, что было в конечном продукте выше, не так ли? Нам придется немного растянуть его, добавив контент на страницу.

Щелкните зеленый значок + и вставьте строку из одного столбца (ту, что находится в верхнем левом углу).

Затем вы будете рады, что уже сделали вчерашнюю домашнюю страницу. Как только вы выберете строку, вас встретит окно с просьбой выбрать элемент. Вы собираетесь выбрать проигрыватель подкастов, который мы сохранили вчера, нажав «Добавить из библиотеки».

Я назвал свой просто «Эпизод подкаста», но если вы выбрали что-то другое, убедитесь, что вы выбрали его.

Badabing-badaboom, у вас есть эпизод подкаста, добавленный на вашу страницу заметок шоу, как по волшебству.

Имейте в виду, что вам придется редактировать заголовок и медиа (и, возможно, обложку эпизода) для каждой новой страницы заметок шоу. То, что вы только что добавили, является точной копией того, что вы сохранили.

Ваши фактические заметки о шоу будут находиться прямо под проигрывателем подкастов, поэтому наведите указатель мыши на игрока и нажмите черный +. Прокрутите вниз, пока не увидите текстовый модуль. Добавьте его на страницу.

На вкладке «Содержимое» в настройках текста введите свои заметки в редактор WYSIWYG и перейдите на вкладку «Дизайн».

На вкладке «Дизайн» обновите следующие параметры:

Цвет текста: светлый
Ориентация текста: влево
Шрифт текста: Special Elite
Размер шрифта текста: 20 пикселей
Цвет текста текста: #ffffff

Сохраните его, и вы должны увидеть новый блестящий текстовый блок и страницу, похожую на эту.

Мы подошли к финишу страницы заметок к шоу - осталось только два элемента. Снова нажмите черный + и добавьте шаблон кнопки, который вы сохранили вчера.

Вместо того, чтобы переносить пользователей в архивы, как вчера, этот вернет их на домашнюю страницу. Перейдите на страницу настроек кнопки и установите для URL-адреса простой обратный слеш.

Почему бы ему не перейти в / home или что-то подобное? Что ж, использование только обратной косой черты приведет вашего пользователя к любой главной странице вашего веб-сайта, несмотря ни на что. А поскольку вы находитесь на том же сайте, даже перемещение доменов не повлияет на кнопку. Он всегда будет возвращаться домой. Это именно то, что вы хотите!

Пройдите и заполните остальные настройки кнопки. Откройте его в том же окне, измените текст кнопки на «Вернуться домой» (или как вам нравится) и выравнивание кнопки на «Право» (как для того, чтобы не мешать содержимому, так и для того, чтобы она стояла. против содержания). Стиль вкладки «Дизайн» должен быть импортирован из библиотеки Divi.

Теперь у вас будет хорошая кнопка навигации, и я предлагаю добавить ее в вашу библиотеку, чтобы вы могли использовать ее на нескольких страницах.

И, наконец, давайте настроим подписку по электронной почте, чтобы мы могли получать эти милые, приятные адреса электронной почты, чтобы пользователи были в курсе новостей о подкасте.

Для этого нам нужна совершенно новая строка из одного столбца. Так что нажмите зеленый + и установите его на место. Затем добавьте модуль Email Optin из раскрывающегося списка. Как и вчера, перейдите к настройкам модуля и введите любой заголовок, который вы хотите отобразить, а также любой текст призыва к действию, который вы хотите, в редакторе WYSIWYG.

Кроме того, добавьте любой текст для самой кнопки. Я выбрал совершенно уникальную подписку.

Выберите поставщика услуг электронной почты и составьте список (помните, со вчерашнего дня, что полный модуль не будет отображаться на странице, когда он работает, если вы не выберете список).

Измените фон RGBA на прозрачный.

На вкладке «Дизайн» установите для шрифта заголовка значение «Special Elite» и размер 36 пикселей.

Вы также установите шрифт Body Font на «Special Elite» и размер на 16 пикселей.

В отличие от почти всего остального для этого сайта, мы хотим использовать рамку для модуля Email Optin. Итак, переместите «User Border» на yes, установите цвет на #ffffff, а Custom Padding - на 15 пикселей со всех сторон.

Когда это будет сделано, перейдите на вкладку Advanced и добавьте это в основной элемент в разделе Custom CSS, чтобы скруглить углы модуля:

border-radius:10px;

Сохраните свою работу, и вы получите подписку по электронной почте!

Единственное, что требуется для вашей страницы с заметками, - это сохранить этот модуль для использования на других страницах. Поскольку вы хотите, чтобы ваши подписки на электронную почту были единообразными на всем сайте, мы собираемся сохранить это как глобальный элемент. Нажмите кнопку «Добавить в библиотеку» при наведении указателя мыши на модуль и убедитесь, что установлен флажок «Сделать это глобальным элементом».

Теперь у вас есть один элемент, который можно использовать на нескольких страницах. И если вы внесете в него какие-либо изменения, они будут отражены во всех экземплярах, в отличие от проигрывателя подкастов и кнопки выше, где каждый модуль можно изменить индивидуально.

И вот, друзья мои, ваш шаблон страницы Show Notes! Я также предлагаю сохранить всю страницу в своей библиотеке, чтобы вы могли просто импортировать ее и изменять элементы, которые вам нужны для каждого эпизода.

А теперь… вперед, в архив! Финиш не за горами!

Создание страницы архива

Перейдите в панель управления WordPress и перейдите к «Добавить новую страницу», назовите ее (у меня «Архивы») и откройте Divi Visual Builder. Очень просто.

Как только вы окажетесь там, добавьте новую строку из одного столбца с текстовым модулем.

Перейдите к настройкам и введите заголовок страницы в редакторе WYSIWYG.

На вкладке «Дизайн» установите для параметра «Цвет текста» значение «Свет» и «Ориентация» - для параметра «Центр». Установите шрифт «Special Elite» и размер шрифта 50 пикселей.

Чтобы текст хорошо смотрелся на мобильных устройствах, не забудьте изменить верхнее и нижнее поля на 40 пикселей.

Сохраните свою работу и - приготовьтесь - приготовьтесь добавить фон в архив! Откройте настройки в синем поле +, выберите фоновое изображение и установите параллакс, как вы делали для Show Notes. Опять же, я сделал это в градациях серого с помощью предварительного просмотра.

На вкладке «Дизайн» установите для верхнего и нижнего отступов значения 55 пикселей и 176 пикселей соответственно, чтобы на всей странице можно было увидеть эффект параллакса независимо от того, сколько сообщений у вас есть в ваших архивах.

Почему 176 пикселей вместо 175? Потому что я бунтарь, вот почему.

Вы увидите это, когда сохраните свою работу:

Затем добавьте новую строку из одного столбца, только на этот раз вставьте модуль блога. Это отобразит любой установленный вами цикл WordPress, и мы просто хотим, чтобы это были выдержки и заголовки, чтобы ваши слушатели знали, чего ожидать.

Перейдите в настройки и обновите параметры на вкладке Content следующим образом:

Номер сообщения: 10 (или то, что, по вашему мнению, лучше всего подходит для вашего сайта - он будет разбиваться на страницы после отображения этого числа)
Контент: Показать отрывок (потому что мы хотим, чтобы пользователь щелкнул и прослушал эпизод в проигрывателе)
Показать избранное изображение: ДА
Цвет фона плитки сетки: rgba (73,73,73,0.72)

На вкладке «Дизайн» обновите следующие параметры:

Макет: сетка
Шрифт заголовка: Special Elite
Цвет текста заголовка: #ffffff
Шрифт: Special Elite
Цвет основного текста: #ffffff
Мета-шрифт: Special Elite
Цвет метатекста: #ffffff
Использовать границу: ДА
Цвет границы: #ffffff
Ширина границы: 1 пикс.
Стиль границы: сплошной

Когда все готово, вам остается сделать еще один кусочек стиля. Сама сетка имеет острые квадратные углы в каждом поле, и мы хотим получить радиус границы 10 пикселей, чтобы он соответствовал остальной части сайта.

Перейдите в панель управления WordPress -> Divi -> Параметры темы, а затем прокрутите вниз до Custom CSS. Добавьте этот код в рамку, чтобы скруглить углы отдельных рамок с выдержками:

.et_pb_post {
 border-radius: 10px;
}

Имейте в виду, что «.et_pb_post» - это класс CSS, который Divi использует для настройки этих полей в целом.

После этого сохраните всю свою работу.

Осталось только добавить кнопку «Вернуться домой» из библиотеки, и все готово. Щелкните черный значок +, чтобы добавить его в ту же строку, что и модуль блога.

Hot diggity dog, вы только что закончили настройку своей страницы архивов.

Поздравляю! Вы только что закончили настройку своей страницы архивов. Сохраните свою страницу архивов в качестве шаблона, нажав на фиолетовый + внизу экрана, и вы сможете отметить другой элемент из своего списка желаний, потому что между вчерашним и сегодняшним днем ​​вы только что создали полнофункциональный проигрыватель подкастов, домашнюю страницу, архив и т. Д. и шаблон для отдельных показанных заметок.

В заключение

Вот и все! Спасибо, что следуете за моими двумя уроками по страницам подкастов. Вы можете поймать первую «Как создать красивую страницу подкаста с Divi» по этой ссылке. Если у вас есть какие-либо вопросы или комментарии, не стесняйтесь оставлять их ниже, и я постараюсь на них ответить!