Шаблоны блогов Elementor: 10 макетов страниц блога и 5 шаблонов отдельных сообщений

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

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

Что вы получаете при каждой бесплатной загрузке

Каждый шаблон загружается в виде небольшого zip-файла. Сначала расстегните его: Elementor нужно .json файл внутри него. вы найдете три вещи:

• а preview папка с двумя скриншотами дизайна, desktop-1440.webp и mobile-390.webpитак, вы можете проверить это, прежде чем что-либо импортировать,
• сам шаблон, а .json файл, названный в честь дизайна (ma-blog-mosaic-masonry.json в приведенном выше примере), который представляет собой файл, который вы импортируете в свою библиотеку шаблонов Elementor
• а readme.txt в нем указано, что нужно шаблону, и он проходит базовый импорт, а также любые настройки, которые необходимо изменить впоследствии.

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

Что вам нужно, прежде чем импортировать

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

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

10 бесплатных шаблонов страниц блога Elementor для скачивания

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

1. Сигнал: сетка журнала с выделенным постом

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

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

2. Колонка: редакционный список из одной колонки

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

3. Мозаика: каменная фотостена

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

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

4. Киоск: ступица категории с вкладками фильтра

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

Вкладки приходят из настройки виджета Фильтр по категориям, а не из категорий, которые случайно используют ваши сообщения После импорта откройте виджет Сообщения блога, перейдите в Расширенные настройки и выберите там свои собственные категории Если вы оставите его пустым, вы получите единую вкладку “All”.

5. Шатер: рекомендуемая карусель

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

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

6. Широкий лист: классический блог с боковой панелью

Макет, который рисует большинство людей, когда они говорят “blog page”. лента горизонтальных сообщений проходит вниз слева, а липкая боковая панель справа содержит поле поиска, последние сообщения, тематические ссылки и карту подписки. поле поиска - виджет поиска главных дополнений.

Ссылки на темы заполнители. укажите каждый на одной из страниц вашей категории и укажите кнопку подписки на форму регистрации.

7. Полночь: блог с темной картой

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

Страница устанавливает свой собственный темный фон, поэтому она работает даже на светлой теме. если ваша тема добавляет вокруг нее светлый заголовок и нижний колонтитул, установите макет страницы на Elementor Canvas.

8. Реестр: список базы знаний

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

Как и Kiosk, вкладки взяты из "Фильтр по категориям", поэтому после импорта выбирайте свои собственные категории.

9. Мороз: строки функций во всю ширину

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

10. Простой: минимальный двухколонный

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

Как создать страницу блога с шаблоном Elementor

Шаблоны страниц блога работают на любой странице Elementor.Шаги одинаковы для всех десяти.

1. Загрузите молнию и расстегните ее на компьютере. Elementor импортирует .json файл; а .zip импортируется только при включении параметра Включить нефильтрованные загрузки файлов в разделе Элементор > Настройки > Дополнительно.
2. На панели управления перейдите в "Шаблоны" > "Сохраненные шаблоны" и нажмите "Импортировать шаблоны".
3. Выберите .json файл и нажмите Импорт сейчас Шаблон отображается в списке сохраненных шаблонов.
4. Создайте новую страницу, назовите ее Блог (или как угодно) и откройте ее с помощью Elementor.
5. Щелкните значок папки, откройте вкладку Мои шаблоны и нажмите кнопку Вставить рядом с шаблоном.
6. Опубликуйте страницу и добавьте ее в свое меню.

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

Не устанавливайте его как WordPress “Posts page”

В WordPress есть опция Страница Посты в разделе Настройки > Чтение.Оставить пустой для только что созданной страницы. Когда страница установлена как страница Посты, WordPress заменяет ее собственным архивом вашей темы, и ваш дизайн Элементор никогда не показывает. Опубликуйте шаблон как обычную страницу и вместо этого сделайте ссылку на него из своего меню.Наше руководство о том, как это сделать создайте страницу блога с помощью Elementor объясняет почему более подробно.

Настройки, которые стоит проверить после импорта

• Сообщения на страницу и заказ в прямом эфире в разделе Параметры отображения виджета Blog Posts. Каждый шаблон поставляется с от 4 до 10 сообщений на виджет.
• Киоску и Ledger нужны ваши собственные категории в разделе "Фильтр по категориям", прежде чем их вкладки обретут смысл.
• Количество столбцов должно оставаться на уровне 1 столбца в макетах списка (столбец, таблица, книга и мороз), иначе список превратится в сетку.

Включение нумерации страниц

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

1. Нажмите виджет "Почтовые сообщения блога" и оставайтесь на вкладке "Контент".
2. В параметрах отображения переключите нумерацию страниц на "Да". Сообщения на страницу затем устанавливают количество сообщений на каждой странице.
3. Измените текст следующей страницы и текст предыдущей страницы, если вам нужны разные метки, и выберите выравнивание.

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

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

Приведение страниц категории в соответствие

Шаблон страницы блога стилизует страницу, на которой он находится Ваша категория, тег и архивы авторов являются отдельными страницами, и они сохраняют дизайн архива вашей темы, если вы не замените его. чтобы придать им одинаковый вид, создайте шаблон архива в конструкторе тем, вставьте тот же дизайн и установите источник виджета Blog Posts на текущий запрос, чтобы он соответствовал любой категории, которую просматривают.The руководство по шаблонам архивов охватывает сторону Master Addons Theme Builder.

5 бесплатных шаблонов одиночных публикаций Elementor

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

Потому что поля являются Динамические теги, которые приходят с бесплатным плагином Master Addons, импорт шаблона занимает около минуты. не волнуйтесь, если он выглядит полупустой сразу после импорта, с серыми полями, где заголовок, изображение и статья должны быть (как скриншот выше). шаблон не показывает ничего, пока у него есть реальный пост, чтобы прочитать, поэтому вам нужно, по крайней мере, один опубликованный пост с заголовком, избранное изображение и некоторый контент. как только вы примените его в вашем конструкторе тем, каждый отдельный пост в вашем блоге переключается на новый дизайн автоматически. шаги в Как создать единый шаблон сообщения в Elementor, сразу после пяти проектов.

11. Фолио: классическая редакционная статья

Надежная журнальная статья Строка категории, заголовок с засечками, стойка вперед и подстрока с фотографией автора сидят над широко представленным изображением. под ним идет “В этой статье” содержимое поле, запись в колонке чтения 748px, авторская карточка и три связанных поста. поле содержимого - Главные дополнения Виджет "Содержимое".

12. Иммерсивный: герой с полным кровотечением

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

Кнопки "Поделиться" строят свои ссылки X, Facebook и LinkedIn с адреса страницы при ее загрузке, а четвертая кнопка копирует ссылку. Сторонний сценарий не задействован.

13. Руководство: руководство по липкой боковой панели

Макет документации без избранного изображения. значок категории и дата “updated” расположены над чистым заголовком, а липкая рамка содержимого слева выделяет раздел, который вы читаете.Блоки кода, встроенный код и поля вызова стилизованы для технического письма. страница заканчивается строкой “Была ли эта статья полезной?” и коротким списком того, что читать дальше.

14. Тихо: эссе, написанное первым текстом

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

15. Файл дела: визуальный пример

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

В карточке фактов на каждом сообщении читаются три пользовательских поля: client, year и service. В галерее показаны изображения, прикрепленные к посту, то есть загруженные изнутри редактора этого поста. Readme объясняет и то, и другое.

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

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

С конструктором тем Master Addons

Так были построены и протестированы пять шаблонов Тип единого шаблона в Главных Аддонах Тема Строитель является частью Мастер Аддоны Про.

1. Импортировать .json файл в разделе "Шаблоны" > "Сохраненные шаблоны", так же, как шаблон страницы блога.
2. Перейдите в "Мастер-аддоны" > "Строитель тем", нажмите "Добавить новое" и выберите "Одиночный" в качестве типа шаблона.
3. Отредактируйте новый шаблон с помощью Elementor, откройте значок папки, перейдите в "Мои шаблоны" и вставьте дизайн.
4. Установите условие отображения "Включить" > "Особый" > "Пост". Чтобы использовать макет только для одного вида контента, например тематических исследований, выберите эти сообщения в этом состоянии вместо всех сообщений.
5. Сохранить, затем открыть любую публикацию на вашем сайте, чтобы проверить это.

The единая шаблонная документация показывает каждый из этих экранов и Руководство по созданию тем Elementor объясняет, как другие типы шаблонов (заголовок, нижний колонтитул, архив и многое другое) сочетаются друг с другом.

С Elementor Pro или другим конструктором тем

Если вы уже используете Theme Builder от Elementor Pro или другой конструктор тем, который позволяет вам разработать макет одной публикации в Elementor, вы также можете использовать эти шаблоны там. Создайте новый шаблон одной публикации в своем конструкторе, вставьте дизайн из моих шаблонов и установите его применимость к своим публикациям.

Держите Master Addons установленными и активными.Заголовок, изображение, контент и автор поля приходят из Master Addons Динамические теги, а поле содержимого и связанные сообщения приходят из виджетов Master Addons Без плагина эти части были бы пусты. мы протестировали шаблоны в Master Addons Theme Builder; если что-то смотрит в другом конструкторе, заметки readme - это первое место, которое нужно проверить.

Две детали, которые нужно оставить на месте

• Виджет тела статьи в Folio, Immersive, Manual, Quiet и Casefile содержит класс CSS под названием entry-content. Виджет "Содержимое" ищет заголовки внутри этого элемента, поэтому удаление класса освобождает поле содержимого.
• Виджет HTML в верхней части каждого шаблона содержит таблицу стилей, а в Folio и Manual - короткий скрипт, который заполняет список содержимого, если виджет еще этого не сделал. редактируйте стили там, но не удаляйте виджет.

Настройка цветов и шрифтов

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

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

Устранение неполадок

“Неверный контент в File” при импорте

Вы загружаете сам zip или файл, который не является экспортом Elementor. Разгрузите загрузку и импортируйте .json файл.

Страница блога пуста

Виджет Blog Posts нуждается в опубликованных постах с избранными изображениями.В Kiosk и Ledger пустая сетка обычно означает Filter By Category по-прежнему указывает на категории, которые не существуют на вашем сайте.Откройте виджет и выберите свой собственный.

Дизайн выглядит иначе, чем демо

Вашей темой может быть добавление собственного заголовка, нижнего колонтитула или ширины страницы вокруг шаблона. установите макет страницы на Elementor Canvas или Elementor Full Width в настройках страницы.

Шаблон единственного сообщения не отображается в моих сообщениях

Проверьте три вещи в вашем конструкторе тем Тип шаблона должен быть Одиночный, условие отображения должно включать ваши сообщения, и только один Одиночный шаблон должен соответствовать тем же постам В Master Addons Theme Builder, когда два активных шаблона совпадают, побеждает новейший Очистка плагина кэша после сохранения также помогает.

Карусель сжимается внутри вкладок или гармошки

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

Часто задаваемые вопросы

Выберите макет и создайте свой блог

Начните с шаблона блога Elementor, который соответствует тому, как вы публикуете: Signal или Marquee, если вы часто публикуете сообщения и хотите первую страницу, Column или Quiet, если слова имеют наибольшее значение, Mosaic или Frost, если фотографии имеют значение, и Ledger или Руководство для документации. Загрузите JSON, импортируйте его и укажите на свои собственные сообщения.

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

Ссылки “Get hosting” в этом посте являются реферальными ссылками. если вы покупаете хостинг через один, мы можем заработать комиссию без дополнительных затрат для вас.