Как создать собственный шаблон записи в блоге Elementor

Опубликовано: 2022-01-14

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

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

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

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

Почему вам нужно разработать собственный шаблон сообщения в блоге Elementor

How To Create Custom Elementor Blog Post Template

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

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

  • Обеспечьте лучший пользовательский опыт
  • Уменьшить показатель отказов
  • Улучшить дизайн страницы с одним постом
  • Добавить пользовательские функции
  • Обеспечьте лучший просмотр публикации

2 способа создать собственный шаблон записи в блоге Elementor

Вы можете создать собственный шаблон сообщения в блоге Elementor двумя простыми способами:

  1. Способ 1: создать шаблон сообщения в блоге Elementor с нуля
  2. Способ 2: создайте страницу с одним сообщением, используя готовый шаблон Elementor

Убедитесь, что вы установили и активировали плагин Elementor (бесплатно) и Elementor Pro на своем веб-сайте.

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

Способ 1: создать шаблон сообщения в блоге Elementor с нуля

Если вы хотите создать свой собственный единый шаблон сообщения с нуля, вы можете сделать это с помощью виджетов Elementor.

Шаг 1: Добавьте столбец и раздел

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

Add Column

Шаг 2: Добавьте виджет изображения функции

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

Add Feature Image Widget

Содержание изображения функции

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

Content of Feature Image

Изображение элемента стиля

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

Style Feature Image

Шаг 3: добавьте новый столбец и установите макет

После добавления изображения функции мы хотим добавить другие виджеты. Перед этим мы хотели бы добавить новый столбец и установить макет с помощью параметра « Дополнительно ». Посмотрите на изображение ниже, вы видите, что мы установили Content Width->Boxed и определили Width как 850px .

Давайте добавим другие виджеты в этот столбец.

Add New Column & Set Layout

Шаг 4: Добавьте виджет информации о публикации

Мы добавляем виджет Post Info для отображения метаданных нашего поста. Найдите виджет и перетащите его в столбец.

Add Post Info Widget

Содержание виджета информации о публикации

В Контенте вы можете управлять метаданными виджета «Информация о публикации».

Content Post Info Widget

Установить выравнивание виджета информации о публикации

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

Style Post Info Widget

Изменить цвет и размер значка информации о публикации

Мы также меняем цвет и размер значка. Вы можете изменить оформление текста, перейдя в область Стиль->Текст . Но нас устраивает стандартный текстовый дизайн.

Style Post Info Widget

Шаг 5: Добавьте виджет заголовка сообщения

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

Add Post Title Widget

Стиль заголовка сообщения

Вы также можете управлять стилем заголовка, перейдя в область « Стиль» . Здесь вы можете настроить цвет текста, типографику, тень текста и режим наложения заголовка сообщения.

Style Post Title

Примечание. Если вы установили на свой сайт плагин Happy Addons, вы получите опцию Text Stroke .

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

Теперь пришло время добавить весь контент поста на нашу страницу. Для этого мы добавляем на страницу виджет Post Content .

Add Post Content Widget

Стиль поста

Вы можете установить выравнивание содержимого, цвет текста и типографику содержимого.

Style Post Content

Шаг 7: Добавьте виджет социальных сетей

Мы добавили кнопку « Поделиться в социальных сетях », чтобы поделиться публикацией.

Add Social Share Widget

Шаг 8: Добавьте виджет с информацией об авторе

Мы также добавили виджет « Информация об авторе », чтобы показать информацию об авторе сообщения.

Add Author Info Widget

Поле автора стиля

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

Style Author Box

Шаг 9: Добавьте виджет разбивки на страницы постов

Для навигации по записям мы добавили виджет Post Pagination . Теперь можно легко перемещаться по постам.

Add Post Pagination

Шаг 10: Добавьте похожие сообщения

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

Add Related Posts

Шаг 11: Добавьте виджет комментариев

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

Add Post Comment Widget

Окончательный предварительный просмотр дизайна отдельной публикации Elementor

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

Final Preview of Elementor Single Post Design

Способ 2: создайте страницу с одним сообщением, используя готовый шаблон Elementor

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

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

Перейти к Tempalte Teme Builder

Во-первых, вам нужно перейти в Templates-> Theme Builder для создания нового шаблона отдельного поста.

Go to Tempalte Teme Builder

Добавить новый отдельный пост

На следующей странице вы получите несколько вариантов. Перейдите на вкладку « Одно сообщение ». Затем нажмите кнопку « Добавить новую отдельную публикацию» .

Add New Single Post

Создать единый шаблон сообщения

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

Create Single Post Template

Выберите подходящий готовый шаблон поста

Теперь пришло время выбрать подходящий готовый шаблон блога для вашей страницы блога. Просто установите шаблон и используйте его.

Choose a Suitable Pre-Designed Post Template

Примечание. Вы также можете настроить готовый шаблон в соответствии с вашими потребностями.

Вот и все.

Расширьте возможности настройки с помощью виджетов сообщений Happy Addons

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

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

Список сообщений (бесплатно)

Хотите продемонстрировать свои сообщения в блоге в списке? Новый бесплатный виджет «Список сообщений» от Happy Addons позволяет отображать блоки блога в виде списка. Попробуйте этот виджет и сделайте свой пост эксклюзивным.

Post List Demo HappyAddons

Ознакомьтесь с документацией по виджету Post List.

Вкладка «Пост» (бесплатно)

Вы можете заметить, что многие веб-сайты отображают свои сообщения с помощью вкладок. И если вы хотите это сделать, то бесплатный виджет Post Tab от Happy Addons станет идеальным инструментом для этого дизайна.

Post-Tab Demo HappyAddons

Прочтите документацию по виджету Post Tab и узнайте, как его использовать.

Таксономия (бесплатно)

Хотите модернизировать таксономию сообщений? Попробуйте бесплатный виджет Таксономии от Happy Addons, и теперь вы сможете эффективно и организованно украсить свою публикацию Таксономия.

Taxonomy Widget Demo

Ознакомьтесь с полной документацией виджета Таксономия.

Почтовая сетка (Pro)

Если вы ищете надежный инструмент для отображения ваших сообщений в блоге в виде сетки, вам следует попробовать виджет Post Grid от Happy Addons. Этот творческий виджет экономит ваше драгоценное время на разработку таких веб-элементов и делает страницу вашего блога более привлекательной.

Post Grid Widget Demo

Прочтите полную документацию по виджету Post Grid.

Почтовые плитки (Pro)

Виджет Post Tiles от Happy Addons — еще один продвинутый инструмент, позволяющий более организованно отображать сообщения. Вы можете добавить сразу несколько постов и управлять их шириной и высотой. Он прост в использовании и полностью настраивается.

Post Tiles Widget Demo

Следуйте документации виджета Post Tiles и узнайте, как использовать этот замечательный инструмент.

Умный список сообщений (Pro)

С помощью этого эксклюзивного виджета Smart Post List вы можете более эффективно размещать записи в блогах на своем веб-сайте Elementor, чем когда-либо прежде. Вы можете добавлять свои прикрепленные сообщения с возможностью отображения списков сообщений по категориям.

Smart Post List Widget Demo

Ознакомьтесь с документацией Smart Post List.

Почтовая карусель (Pro)

Этот уникальный виджет Happy Addons позволяет размещать сообщения в блоге в виде карусели. Попробуйте виджет Post Carousel и сделайте дизайн своей публикации более привлекательным для посетителей.

Post Carousel Widget Demo

Прочтите документацию Post Carousel и узнайте, как с ней работать.

Список авторов (Pro)

Попробуйте виджет New Happy Addons «Список авторов», чтобы составить красивый список ваших авторов и показать, сколько сообщений они написали.

Author List Widget Demo

Узнайте больше о виджете «Список авторов», прочитав документацию.

Готовы ли вы создать свой собственный шаблон сообщения в блоге Elementor

Теперь пришло ваше время создать свою собственную страницу с одним сообщением с помощью Elementor.

Если вы будете следовать приведенным выше инструкциям, вы получите точное представление о том, как с нуля создать пользовательскую страницу отдельной публикации Elementor. Мы также обсудили, как повысить ценность вашей страницы сообщений с помощью виджетов сообщений HappyAddons.

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

Если вам нравится это полезное руководство, поделитесь им в своем социальном канале. И подпишитесь на нашу рассылку, чтобы получать больше интересных руководств по WordPress и Elementor.

Подписывайтесь на нашу новостную рассылку

Получайте последние новости и обновления на Elementor