Как создать красивую страницу подкаста с Divi

У вас отличный подкаст. Но ваш сайт может нуждаться в доработке. Он выполняет свою работу, но ничем не выделяется. Не бойся, подкастер! Я тебя прикрыл.

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

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

Я хотел, чтобы дизайн был простым и минимальным, насколько это возможно, не теряя индивидуальности, которую должен поддерживать хороший подкаст. Этот дизайн предназначен для вымышленного инди-подкаста под названием You're An All-Star , в котором основное внимание уделяется обуви и счастью. Я хотел, чтобы дизайн отражал эту тему.

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

По мере того, как пользователь прокручивает страницу вниз, эстетика немного смещается в раздел «Избранные эпизоды», где снова используется аудиомодуль Divi для представления легкодоступного контента, а также возможность посещать архивы шоу. Фон - параллакс, чтобы привлечь внимание к самим эпизодам.

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

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

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

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

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

Помимо этого, все ресурсы, которые вам понадобятся, находятся прямо внутри Divi. Тогда перейдем к делу!

Домашняя страница веб-сайта подкастов: первый раздел

Начните с создания новой страницы на панели инструментов WordPress и установки ее в качестве главной страницы вашего сайта. (Я удобно назвал свой «Дом».)

Теперь вернитесь к редактированию вашей новой страницы. В поле «Атрибуты страницы» на правой боковой панели измените шаблон по умолчанию на шаблон пустой страницы.

Первым делом мы создаем строку из трех столбцов.

Внутри среднего столбца мы хотим вставить модуль делителя Divi.

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

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

На вкладке содержимого в настройках текста добавьте заголовок в поле содержимого.

На вкладке «Дизайн» измените цвет текста на «Светлый» и измените ориентацию текста на «Центр». Затем настройте шрифт и размер текста. Я выбрал шрифт «Special Elite» из-за его нечеткого вида и затем установил его размер на 60. Также установите высоту текстовой строки на 1em.

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

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

Контент : введите свой текст для описания (я бы предложил усеченную версию описания, которое вы используете в iTunes и других сервисах)
Цвет фона : rgba (0,0,0,0.4)

На вкладке «Дизайн» выберите «Светлый» для цвета текста и выберите «По центру» для ориентации текста, как вы делали в предыдущем поле. Также установите шрифт текста «Special Elite» размером 20 пикселей.

Наконец, добавьте 10 пикселей отступа вокруг всего текстового поля.

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

border-radius: 10px;

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

Превосходная работа!

Однако, чтобы сделать его визуально более привлекательным, нам нужно установить фон раздела, поэтому перейдите в настройки синего поля (раздела) и загрузите фоновое изображение. Я стараюсь держать свое разрешение около 1920 × 1280.

Вы должны увидеть что-то вроде этого:

К настоящему времени вы можете спросить себя: «А как насчет подкастов? Это сайт подкастов, а мы еще ничего не сделали с подкастами! » Вы совершенно правы. Итак, давайте приступим к работе со звуком, выбрав (как вы уже догадались) аудиомодуль в третьем столбце нашей строки.

Аудиомодуль по умолчанию не совсем подходит для темы, которую мы собираемся использовать для этого сайта, поэтому давайте возьмем его из этого:

К этому:

Откройте настройки аудиомодуля. В поле «Аудио» вы можете либо загрузить свой собственный файл на любой хост, который вы используете, либо напрямую связать его с медиафайлом любой службы подкастинга, которую вы используете. Я использую Libsyn для своего, поэтому я просто взял URL-адрес мультимедиа и вставил его.

(Забавный факт: любой, кто нажимает кнопку "Играть" на вашем сайте через этот модуль, также засчитывается как загрузка в вашей панели управления Libsyn. Оценка!)

Затем вы захотите поместить название эпизода, на который вы ссылаетесь, в поле «Название», а свое имя - в поле «Имя исполнителя» (или что бы вы ни выбрали в своем шоу. Для нашего вымышленного подкаста об обуви, как я могу выбрать что-нибудь, кроме Чака Тейлора? ). Название альбома будет названием вашего подкаста.

Теперь давайте изменим этот зеленовато-бирюзовый цвет на полностью прозрачный фон. Цвет не имеет значения. Просто сдвиньте ползунок прозрачности полностью вниз или до тех пор, пока последняя цифра RGBA не станет 0.

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

После того, как детали подкаста отсортированы, перейдите на вкладку «Дизайн», чтобы действительно сделать этот плеер своим.

Выберите «Светлый» для параметра «Цвет текста». Установите для шрифтов значение «Special Elite», размер заголовка - 50 пикселей, а размер заголовка - 20 пикселей.

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

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

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

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

Все в порядке! Еще один элемент, и первый раздел готов. (Но не волнуйтесь. Это самая сложная из них.)

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

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

Щелкните значок на панели инструментов, чтобы добавить ссылку, и введите / вставьте URL-адрес для заметок к шоу. (Опять же, во второй части я покажу вам, как создавать и стилизовать сообщения в блогах для заметок о шоу.) Поскольку у меня для структуры постоянных ссылок WordPress установлено значение «Имя сообщения», все, что мне нужно сделать, это ввести слаг сообщение, которое я написал для этого эпизода.

(Боковое примечание: не вводя информацию о домене, а только слаг, вы говорите WordPress направлять пользователей на эту страницу, независимо от информации о домене. Это действительно полезно, если вы когда-либо меняете домены, и помогает предотвратить неработающие ссылки!)

Просто сохраните ссылку, и все готово!

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

Вуаля! Ваш собственный… подождите. Ой ой. Ссылка на ваши шоу-заметки ... уродливая!

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

Перейдите в поле Custom CSS в Divi -> Theme Options и введите его внизу.

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

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

Убедитесь, что вы сохранили его, и теперь ваш проигрыватель подкастов готов!

И для последней настройки в этом первом разделе щелкните в настройках строки (зеленая рамка).

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

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

Сохраните его, и вот так большая часть работы сделана! А благодаря функции библиотеки Divi следующие несколько разделов пролетят незаметно! Просто посмотри.

Домашняя страница веб-сайта подкастов: второй раздел

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

Первое, что мы собираемся сделать, это создать новый раздел, щелкнув синий + внизу раздела и добавив обычный раздел. Это создаст еще одну синюю рамку в визуальном построителе. Добавьте строку из одного столбца.

Когда у нас есть это на месте, давайте добавим фон так же, как мы делали выше, только на этот раз мы хотим выбрать «Использовать параметр параллакса» в настройках раздела. В раскрывающемся списке выберите «True Parallax» вместо «CSS».

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

Сохраните и вставьте новое текстовое поле в строку. Введите «Выбранные эпизоды», отцентрируйте его в редакторе WYSIWYG и перейдите к настройкам, чтобы установить шрифт текста «Special Elite» и размер текста 50 пикселей. Теперь вы должны увидеть что-то вроде этого:

Под ним создайте новую строку из трех столбцов, нажав зеленый +, и в первом столбце введите «Добавить из вкладки библиотеки». (У вас не будет всех этих опций библиотеки прямо сейчас, но вы получите позже!)

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

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

Единственное, что осталось для этого раздела, - это добавить кнопку «Обзор архивов». Создайте новую строку в самом низу, нажав зеленый +, и используйте макет в один столбец. Вставьте модуль «Кнопка». Это создаст очень трудночитаемую кнопку (конечно, в зависимости от вашего фона), для которой потребуется простой стиль.

Откройте настройки модуля Button и введите URL-адрес страницы, которая будет вашим архивом. Я использовал очевидное «/ archives», использовал текст «Обзор архивов», а затем центрировал саму кнопку.

На вкладке настроек мы нажимаем «Использовать пользовательские стили для кнопки» и устанавливаем цвет фона на «#ffffff» и цвет текста на «# 000000» (белый и черный соответственно).

Затем мы захотим скруглить углы кнопки, установив Радиус границы на 10 пикселей, установив шрифт на «Special Elite» и изменив значок кнопки добавления с «По умолчанию» на «Нет».

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

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

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

Домашняя страница веб-сайта подкастов: Третий раздел

Это просто будет один модуль на статическом фоне.
Сначала создайте новое синее поле со столбцом двойной ширины, как мы делали для второго раздела, и выберите в меню модуль «Email Optin».

Вы увидите это свечение, что совершенно не соответствует нашему дизайну. Однако это очень простое решение.

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

Заголовок: я намеренно оставил заголовок пустым
Содержание: добавьте аннотацию с призывом к действию и отцентрируйте ее.
Поставщик услуг: я использую Mailchimp, поэтому я выбрал именно его.
Цвет фона: прозрачный; это также делает саму кнопку прозрачной.

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

Получив ключ, перейдите на панель управления WordPress, снова перейдите в Divi -> Theme Options и введите свой ключ API Mailchimp в поле с метко названным «Mailchimp API key».

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

Ты сделал это! Ура! Теперь у вас есть полнофункциональная домашняя страница для вашего подкаста. Пора поставить рекорд и рассказать об этом миру, верно?

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

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

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

Увидимся завтра!

Показать страницу заметки:

Страница архива: