Как добавить собственные шаблоны и дизайн в форматы сообщений в блогах Divi (часть 3 из 3)

Опубликовано: 2017-05-04

Добро пожаловать в день 3 из 3, последний день из нашей серии статей о том, как добавлять собственные стили в форматы сообщений в блогах Divi. По умолчанию Divi поставляется с шестью форматами сообщений в блогах: Standard, Video, Audio, Quote, Gallery и Link. В этой серии мы научим вас настраивать их с помощью php и css.

Сегодня последний день нашей серии статей о том, как добавлять собственные шаблоны и стили в форматы сообщений блога Divi. Последний день серии посвящен дизайну. Настроив single.php и активировав дочернюю тему, мы готовы добавить стили в форматы сообщений в блоге.

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

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

Вот краткое представление о том, как будет выглядеть ваша страница блога после сегодняшнего урока (я использую модуль блога Divi с макетом сетки на гифке ниже).

Давайте начнем.

Настройка общих параметров дизайна в настройщике тем

Сначала нам нужно внести несколько общих изменений стиля с помощью настройщика темы. На панели инструментов WordPress перейдите в Divi → Настройка тем → Общие настройки → Настройки макета и измените следующее:

Ширина желоба веб-сайта: 2
Установите флажок Использовать настраиваемую ширину боковой панели
Ширина боковой панели: 30

Также в разделе «Настройщик тем» перейдите в «Цветовые схемы» и выберите «Оранжевый».

Теперь давайте посмотрим, как выглядит ваш стандартный пост:

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

Стилизация раздела Hero для всех форматов сообщений

Поскольку каждый из ваших форматов сообщений будет иметь один и тот же главный раздел и дизайн боковой панели, вы можете сначала добавить этот собственный CSS. Вернитесь к Настройщику тем, нажмите «Дополнительный CSS» внизу и добавьте следующий настраиваемый CSS:

.hero-section {
	padding-top: 120px;
	padding-bottom: 120px;
	background-repeat: no-repeat;
	background-size: cover;
	position:relative;
	max-height: 450px;
	background-color: #333;
}

.single-post #main-content #left-area {padding-top: 0px;}

/* ---- Sidebar Settings ---- */
.single #sidebar {background: #efefef; padding-top: 20px; padding-right: 20px; padding-left: 20px; padding-bottom: 20px;}

/* ---- Standard Post Title & Post Meta ---- */
.single h1.entry-title,.attachment h1.entry-title, .single p.post-meta {
width: 100%;
text-align: center;
padding-left: 8px;
padding-right: 8px;
font-weight: 800;
text-transform: uppercase;
color: #fff;
}

 @media only screen and (min-width: 980px) {
/*** Set title font size for desktop ***/
.single h1.entry-title {
font-size: 65px !important;
}
 }

А теперь посмотрим, как выглядит стандартный пост.

С разделом героя и стилями боковой панели вы готовы стилизовать отдельные форматы сообщений.

Стилизация стандартного формата сообщения

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

Все, что мы собираемся сделать для этого стандартного формата, - это добавить избранное изображение. Поскольку это изображение будет растягиваться на всю ширину экрана, я предлагаю использовать изображение размером 2000 x 600. Я использую изображения с сайта unsplash.com.

После добавления избранного изображения проверьте, как выглядит стандартный пост.

Стилизация формата видеопоста

Чтобы стилизовать формат видеопоста, убедитесь, что для вашего поста выбран формат видео.

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

В этом примере я просто использую URL-адрес видео на YouTube.

Добавьте в пост свое избранное изображение размером 2000 x 600 пикселей.

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

Перейдите в Настройщик тем → Дополнительный CSS и добавьте следующий настраиваемый CSS:

/* ---- Format the Position of the Video Wrapper ---- */
 
@media only screen and (min-width: 980px) {
 /*** elevate the video to overlap the hero section ***/
.single-post.single-format-video .et_main_video_container {margin-top: -120px; background: #fff; outline: 10px solid #ffffff !important; z-index: 100; margin-bottom: -100px;}
}

Теперь ознакомьтесь с вашим новым постом в формате видео.

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

Теперь ознакомьтесь с публикацией в формате видео в полную ширину:

Стилизация формата аудиопоста

Для формата аудио сообщения убедитесь, что для вашего сообщения выбран аудиоформат.

Добавьте свое избранное изображение размером 2000 x 600.

Затем добавьте свой аудиофайл в свой пост. Это может быть файл .mp3, .m4a, .ogg или .wav. Вы можете загрузить свой аудиофайл в свою медиабиблиотеку и вставить в свой пост тремя разными способами (встроить медиаплеер, ссылку на медиафайл или ссылку на страницу вложения).

Подойдет любой из этих трех вариантов. Но в этом примере я просто добавлю простой URL-адрес к аудиофайлу. WordPress преобразует этот URL-адрес аудио в медиаплеер в верхней части сообщения.

Теперь давайте посмотрим на публикацию Audio Format.

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

Перейдите в Настройщик тем → Дополнительный CSS и добавьте следующий настраиваемый CSS:

/* ----- Add Background Image to the Audio Player &amp; Change size of the player ----- */
body.single .et_audio_content, .blog .et_audio_content {
margin-bottom: 0px !important;
height: 300px !important;
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
background-repeat: no-repeat;
background-size: cover;
 }

/* ---- Hide the Duplicate Audio Player  ------ */ 
div#mep_1 {display: none;}

Затем найдите и загрузите изображение в свою медиа-галерею (должно быть около 700 x 300). Затем скопируйте URL-адрес и вставьте приведенный выше CSS, где говорится: «ВВЕДИТЕ URL-адрес изображения ЗДЕСЬ».

background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');

А теперь посмотрите свой новый пост в аудиоформате.

Стилизация формата сообщения с цитатой

Для формата сообщения с цитатой убедитесь, что для вашего сообщения выбран формат цитаты.

Затем добавьте к сообщению изображение размером 2000 x 600 пикселей.

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

А теперь прочтите свой пост.

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

Перейдите в Настройщик тем → Дополнительный CSS и добавьте следующий настраиваемый CSS:

/* ---- Add Background Image to the Quote Box ---- */
 
.et_quote_content {
 
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE')!important;
background-repeat: no-repeat;
background-size: cover;
 
}

/* ---- Add the Quotation Symbol to the Quote Box ---- */
 
.et_quote_content blockquote p::before {
font-family: Cardo;
position: absolute;
top: 16px;
left: 5%;
margin-left: -16px;
border-radius: 31px;
background: rgba(255, 255, 255, .0);
font-size: 70px; 
font-color: #fff;
content: "\201C" !important;
}

/* ---- Text Format Inside of quote ---- */
@media only screen and (min-width: 980px) {
.single-post.single-format-quote blockquote p {
font-size: 30px !important;
font-weight: 600 !important;
}
}

Найдите и загрузите изображение в свою медиа-галерею (должно быть около 700 x 300). Затем скопируйте URL-адрес и вставьте приведенный выше CSS, где говорится: «ВВЕДИТЕ URL-адрес изображения ЗДЕСЬ».

background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');

А теперь посмотрите на свой окончательный результат:

Стилизация формата публикации галереи

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

Затем не забудьте добавить изображение размером 2000 x 600 пикселей.

Формат публикации галереи позволяет вам создать галерею в содержимом вашего сообщения из галереи мультимедиа.

Чтобы создать галерею для вашего сообщения, сначала загрузите не менее 6 изображений в свою медиа-галерею. Размер изображения может варьироваться, но поскольку в галерее есть эффект лайтбокса, увеличивающий изображение до полного размера, вы можете сделать изображения размером примерно 1200 x 800.

Теперь выберите изображения в галерее мультимедиа, выберите «Создать галерею» и нажмите кнопку «Создать новую галерею».

Теперь у вас должен быть шорткод галереи в вашем контенте.

Эта галерея будет отображаться в вашем сообщении в виде мозаики шириной в три столбца. Галерея также заменит избранное изображение на странице вашего блога слайдером изображений вашей галереи.

А теперь прочтите свой пост.

Давайте добавим немного CSS в галерею, чтобы немного приподнять ее, чтобы перекрыть раздел героя и изменить поля вокруг каждого изображения.

Перейдите в Настройщик тем → Дополнительный CSS и добавьте следующий настраиваемый CSS:

/* ---- Position &amp; Style the Gallery to Overlap the Featured Image ---- */
 
@media only screen and (min-width: 980px) {
 
.single-format-gallery .et_post_meta_wrapper { margin-top: -100px;}
 
.et_post_gallery {
z-index: 100;
position: relative;
border-top: 8px solid #fff !important;
border-left: 8px solid #fff !important; 
background: #fff !important;
}

/* ---- Set Background Color, Margins &amp; Padding for the Gallery Image ---- */
 
.et_gallery_item { margin: 0 0 0 0 !important;}
 
.et_gallery_item {
width: 33.3%;
margin: 0 0% 0% 0 !important;
padding-right: 8px !important;
background: #fff !important;
padding-bottom: 8px !important;
}
}

Теперь посмотрим на окончательный результат.

Стилизация формата сообщения со ссылкой

Для формата сообщения ссылки убедитесь, что для вашего сообщения выбран формат ссылки.

Затем добавьте в свой пост миниатюрное изображение размером 2000 x 600 пикселей.

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

Добавьте ссылку на свой пост и ознакомьтесь с дизайном поста.

Теперь давайте немного улучшим дизайн, добавив фоновое изображение в поле настраиваемой ссылки и значок слева от URL-адреса ссылки.
Перейдите в Настройщик тем → Дополнительный CSS и добавьте следующий настраиваемый CSS:

/* ---- Add thick border to the left side and Lower the link box ---- */

.et_link_content {
border-bottom: 8px solid #ddd; 
background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(ENTER IMAGE URL HERE);
background-size: cover;
background-color:#edb059; 
border-radius: 25px; 
}

/* ---- Font Settings within the Link box ---- */

.et_link_content a.et_link_main_url { font-size: 21px; font-weight: 600; color: #fff !important;}

/* ---- Link Symbol on the right side ---- */
 
.et_link_content::before {
font-family: "ETmodules";
position: absolute;
top: 38%;
left: 5%;
margin-right: -26px;
border-radius: 31px;
background: rgba(255, 255, 255, .0);
font-size: 48px; 
color: #fff;
content: "\e02c";
}

/* ---- Position &amp; Style the Gallery to Overlap the Featured Image ---- */

@media only screen and (min-width: 980px) {
 
.single-format-gallery .et_post_meta_wrapper { margin-top: -100px;}

Затем найдите и загрузите изображение в свою медиа-галерею (должно быть около 700 x 300). Затем скопируйте URL-адрес и вставьте его в только что введенный фрагмент CSS, где написано «ВВЕДИТЕ URL-адрес ИЗОБРАЖЕНИЯ ЗДЕСЬ».

background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');

Теперь посмотрим, как выглядит сообщение.

Вот и все!

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

Примечание: вы можете отображать свой блог с помощью редактора по умолчанию или Divi Builder, и дизайн все равно будет работать.

Отзывчивый?

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

Последние мысли

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

Пожалуйста, оставьте свои комментарии ниже. С нетерпением жду Вашего ответа.