Ищете классический, но креативный способ размещения сообщений блога на своем веб-сайте? Если да, то вам понравится эта халява Divi. Мы разработали классический шаблон сообщения в блоге в стиле пишущей машинки, который автоматически применяется ко всем сообщениям в блогах на вашем сайте! В этом посте мы также шаг за шагом покажем, как вы можете воссоздать дизайн с нуля в построителе тем.

Давайте приступим к делу!

Предварительный просмотр

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

Рабочий стол

Мобильный

Загрузите шаблон сообщения в блоге, вдохновленный пишущей машинкой, БЕСПЛАТНО

Чтобы получить бесплатный шаблон сообщения в блоге, вдохновленный пишущей машинкой, вам сначала нужно загрузить его, нажав кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

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

СКАЧАТЬ

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

1. Перейдите в Divi Theme Builder и добавьте новый шаблон.

Перейдите в конструктор тем Divi и добавьте новый шаблон

Начните с перехода к Divi Theme Builder. Оказавшись там, добавьте новый шаблон.

Использовать шаблон для всех сообщений

Используйте этот новый шаблон для всех своих сообщений.

• Использовать: все сообщения

Начать создание тела шаблона

И приступаем к созданию тела нового шаблона.

2. Начать создание тела сообщения в блоге

Настройки раздела

Фоновый цвет

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

• Цвет фона: # fff4d8

Интервал

Затем добавьте пользовательские верхние и нижние отступы.

• Верхний отступ: 200 пикселей
• Нижний отступ: 200 пикселей

Граница

И завершите настройку раздела, добавив границу.

• Ширина границы: 100 пикселей (рабочий стол), 20 пикселей (планшет и телефон)
• Цвет границы: #ffffff

Добавить строку №1

Структура столбца

Продолжите, добавив новую строку в раздел, используя следующую структуру столбцов:

Интервал

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Добавить модуль изображения в столбец

Загрузить изображение

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

Интервал

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

• Верхнее поле: -150 пикселей
• Левое поле: -12vw (рабочий стол), 0px (планшет и телефон)

Добавить строку №2

Структура столбца

Переходим к следующему ряду. Используйте следующую структуру столбцов:

Добавить текстовый модуль в столбец 1

Динамический контент

Добавьте текстовый модуль в первый столбец строки и используйте следующее динамическое содержимое:

• Тело: Дата публикации публикации

• Формат даты: 06.08.1999 м / д / г

Настройки текста

Соответственно измените настройки текста:

• Шрифт текста: Special Elite
• Толщина шрифта текста: полужирный
• Цвет текста: # 000000
• Размер текста: 1,4 бэр

Клонировать текстовый модуль три раза

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

Изменить динамическое содержимое

Измените динамическое содержимое повторяющихся модулей следующим образом:

• Дубликат №1: Категории сообщений
• Дубликат №2: Автор сообщения
• Дубликат №3: количество комментариев
  • После: Комментарии
  • Ссылка на область комментариев: Да

Поместите два текстовых модуля в столбец 2

Продолжите, поместив два последних текстовых модуля во второй столбец строки,

Изменить цвет текста ссылки в категории и количество комментариев

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

• Цвет текста ссылки: # 000000

Изменить ориентацию текста модулей в столбце 2

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

• Выравнивание текста: вправо (рабочий стол), влево (планшет и телефон)

Добавить строку №3

Структура столбца

К следующему ряду! Используйте следующую структуру столбцов:

Добавить текстовый модуль в столбец

Динамический контент

Добавьте текстовый модуль в столбец строки и используйте следующий динамический контент:

• Body: Заголовок сообщения / архива

• До:

• После:

Настройки текста H1

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

• Шрифт заголовка: Special Elite
• Цвет текста заголовка: # 000000
• Размер текста заголовка: 3,5 бэр (рабочий стол), 2,5 бэр (планшет), 2 бэр (телефон)
• Высота строки заголовка: 1,5 м

Интервал

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

• Верхнее поле: 150 пикселей
• Нижнее поле: 150 пикселей

Добавить модуль содержимого публикации в столбец

Настройки текста

Переходим к следующему модулю - модулю содержимого сообщений. Измените настройки текста соответствующим образом:

• Шрифт текста: Special Elite
• Размер текста: 1,2 бэр
• Высота текстовой строки: 2,5 м

Настройки текста заголовка

Измените также другие настройки текста заголовка.

• Шрифт заголовка: Special Elite
• Цвет текста заголовка: # 000000
• Размер текста заголовка 2: 2 бэр (H2), 1,9 бэр (H3), 1,8 бэр (H4), 1,7 бэр (H5), 1,6 бэр (H6))

CSS ID

И назначьте модулю CSS ID.

• Идентификатор CSS: post-content-module

Добавить модуль кода в столбец

Добавить заголовок CSS-код

Теперь, чтобы добавить настраиваемое поле к разным заголовкам, мы добавим следующий настраиваемый CSS в модуль кода:

<style>
#post-content-module h2, h3, h4, h5, h6 {
margin-top: 70px;
margin-bottom: 70px;
}
</style>

Добавить раздел # 2

Фоновый цвет

Добавьте еще один раздел в шаблон сообщения, откройте настройки раздела и измените цвет фона раздела.

• Цвет фона: # fff4d8

Граница

Также добавьте границу.

• Ширина границы: 100 пикселей (рабочий стол), 20 пикселей (планшет и телефон)
• Ширина верхней границы: 0 пикселей
• Цвет границы: #ffffff

Добавить новую строку

Структура столбца

Продолжите, добавив новую строку в раздел, используя следующую структуру столбцов:

Добавить модуль комментариев в столбец

Настройки полей

Единственный модуль, который нам нужен в этой строке, - это модуль комментариев. Соответственно измените настройки полей:

• Цвет фона полей: rgba (0,0,0,0)
• Цвет текста полей: # 000000
• Отступ снизу полей: 50 пикселей
• Шрифт Fields: Special Elite
• Размер текста полей: 1,2 бэр

• Ширина нижней границы поля: 1px
• Цвет нижней границы полей: # 000000

Параметры текста счетчика комментариев

Наряду с настройками текста количества комментариев.

• Количество комментариев Уровень заголовка: H2
• Шрифт счетчика комментариев: Special Elite
• Цвет текста счетчика комментариев: # 000000
• Количество комментариев Размер текста: 2rem

Настройки текста заголовка формы

Также внесите некоторые изменения в настройки текста заголовка формы.

• Уровень заголовка заголовка формы: H3
• Шрифт заголовка формы: Special Elite
• Цвет текста заголовка формы: # 000000
• Размер текста заголовка формы: 1,5 бэр

Настройки метатекста

Затем измените настройки метатекста.

• Мета-шрифт: Special Elite
• Цвет метатекста: # 000000
• Размер метатекста: 1,5 бэр

Настройки текста комментария

Мы также внесем некоторые изменения в настройки текста комментариев.

• Шрифт комментария: Special Elite
• Размер текста комментария: 1.2rem
• Высота строки комментария: 2.5em

Настройки кнопок

Продолжите, задав для кнопки следующий стиль:

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 1,2 бэр
• Цвет текста кнопки: #ffffff
• Фон кнопки: # 000000
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 0 пикселей

• Шрифт кнопки: Special Elite

CSS тела комментария

И завершите настройки модуля, добавив верхнее поле к тексту комментария на расширенной вкладке.

margin-top: 100px;

3. Сохраните все изменения в построителе тем и результаты предварительного просмотра.

После того, как вы создали настраиваемое тело сообщения в своем шаблоне, вы можете сохранить все изменения и просмотреть результат в своих сообщениях в блоге!

Предварительный просмотр

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

Рабочий стол

Мобильный

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

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

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