Если хочешь создайте страницу блога с помощью Elementor, у вас есть пара твердых вариантов в зависимости от вашего бюджета. выделенная страница блога поддерживает порядок ваших сообщений, помогает Google индексировать ваш контент и дает посетителям повод дольше оставаться здесь.
Для этого не нужно писать никакого кода. с Виджет Elementor Posts (Pro) или бесплатный плагин типа Мастер-аддоны для Elementor, вы можете построить заказ Страница блога Elementor это соответствует вашему бренду.
В этом уроке рассматриваются два метода создайте страницу блога в WordPress с помощью Elementor:
- Метод 1: Использование виджета Elementor Pro Posts (платно)
- Метод 2: Использование виджета блога Master Addons (бесплатно)
В конце есть таблица сравнения, чтобы вы могли точно увидеть, что предлагает каждый вариант. Я также записал видеопрохождение, если вы предпочитаете это.
Почему вашему сайту WordPress нужна страница блога
Страница вашего блога - это единственное место, где появляются все ваши сообщения. Посетители могут просматривать статьи, учебные пособия, новости и обновления с одного URL-адреса. Для владельцев бизнеса это приводит к органическому поисковому трафику. Для блоггеров это, по сути, вся суть сайта.
Хороший Дизайн страницы блога WordPress делает для вас несколько вещей:
- SEO-трафик ush Google быстрее индексирует свежий контент, если он организован на соответствующей странице блога.
- Более длительные сеансы – верстка блога Элементар благодаря миниатюрам, отрывкам и категориям посетители нажимают на большее количество сообщений, а не подпрыгивают.
- Власть Регулярная публикация темы делает вас популярным ресурсом в вашей нише.
- Конверсии Блог ведет читателей к вашим продуктам, услугам или списку адресов электронной почты.
Из коробки WordPress просто складывает сообщения в обратном хронологическом порядке. Не так много смотреть. С правой Виджет блога Elementorвы можете заменить это на сетки, макеты карт, карусели и многое другое, и все это без кода.
Перед началом: предварительные условия
Вам понадобится несколько вещей, готовых перед началом:
- WordPress установлен на вашем хостинге (работает любая последняя версия)
- Плагин Elementor установлен и активирован (бесплатная версия с сайта WordPress.org)
- Опубликовано несколько сообщений в блоге — Вам нужно как минимум 3-6 сообщений, чтобы страница блога отображала контент. Добавляйте избранные изображения к каждому сообщению для достижения наилучшего визуального результата.
- Статический набор домашней страницы ƒо Настройки > Чтение и выберите “A static page.” Установите домашнюю страницу и создайте отдельную страницу для сообщений.
Для метода 1 вам понадобится Элементор Про. Для метода 2 вам нужно только бесплатное Плагин Master Addons, который работает с бесплатной версией Elementor.
Видеоурок: создайте страницу блога с помощью Elementor
Если видео больше по вашему вкусу, это прохождение показывает, как это сделать создайте страницу блога в Elementor использование виджета блога Master Addons от начала до конца.
Хорошо, переходим к двум методам.
Способ 1: Создайте страницу блога с помощью виджета Elementor Pro Posts
Если у вас есть Элементор Проу тебя уже есть Виджет сообщений (иногда указывается как элемент “Posts” на панели).Это собственный инструмент Elementor для отображения сообщений в блоге на любой странице.
Шаг 1. Добавьте виджет сообщений на свою страницу
Откройте страницу, на которой вы хотите, чтобы ваш блог появился в редакторе Elementor В панели виджетов слева найдите “Posts” и перетащите Виджет сообщений в раздел вашей страницы.
Виджет немедленно втянет опубликованные вами сообщения и отобразит их в макете по умолчанию.
Шаг 2: Выберите свой макет кожи
Elementor Pro предлагает вам три скина макета на выбор:
- Классика — Скин по умолчанию. Показывает чистую сетку с избранными изображениями, заголовками, метаданными и отрывками.
- Карты us Добавляет коробку в виде карты с тонким эффектом тени.
- Полный контент — вместо полного текста. воспроизводит полный текст
По умолчанию на скин Classic отображается сетка из 3 столбцов с 6 постами. Вы можете настроить это от 1 до 6 столбцов и установить любое число для сообщений на странице.
Шаг 3: Настройте параметры макета
The Вкладка раскладка это то место, где вы набираете номер Страница блога Elementor на самом деле выглядит:
- Положение изображения — Поместите представленное изображение сверху, слева, справа или полностью спрячьте его.
- Размер и соотношение изображения — выберите размеры правого пальца для вашего дизайна.
- Заголовок Тег — Установить тег HTML (H2, H3, H4 и т. д.) для заголовков сообщений. Это имеет значение для SEO.
- Длина отрывка — Контроль, сколько слов показано в посте.
- Метаданные Выберите, какая метаинформация отображается: имя автора, дата, время и комментарии.
- Читать далее Текст “Читать текст кнопки “R.
Шаг 4: Настройка запроса и нумерации страниц
The Вкладка Содержимое имеет два важных раздела: запрос и нумерация страниц.
Запрос позволяет контролировать, какие сообщения появляются на странице вашего блога. вы можете фильтровать по типу публикации, категориям, тегам или конкретным идентификаторам сообщений. вы также можете включать или исключать определенные сообщения из результатов.
Пагинация страниц управляет тем, как пользователи перемещаются по нескольким страницам сообщений. доступны три варианта:
- Числа (1, 2, 3...)
- Стрелки Предыдущий/Следующий
- Числа + Предыдущий/Следующий вместе взятые
Шаг 5: Создайте макет своего блога
The Вкладка Стиль имеет четыре раздела для визуальных настроек:
- Макет — Разрыв между строками и выравнивание содержимого.
- Коробка us Установите бордюрный стиль, радиус рамки, тень коробки для каждой почтовой карты.
- Изображение indef радиус границы и интервал между избранными изображениями.
- Содержание — Типография, цвета и интервалы между заголовками сообщений, метаданными, выдержками и ссылкой "Читать дальше".
Совет: Используйте согласованный интервал и типографику на странице блога. установите одинаковый радиус границы для изображений и карт, чтобы создать полированный вид. Соответствуйте цвету ссылки Read More цвету акцента вашего бренда.
Это подход Elementor Pro. Работает нормально для базового Сетка блога Elementor макеты, но вы довольно быстро столкнетесь с ограничениями: ни карусели, ни эффектов зависания, только 3 скина.
Если вам нужно больше вариантов без оплаты Pro, следующий метод стоит поискать.
Способ 2: Создайте страницу блога с помощью Elementor, используя главные дополнения (бесплатно)
The Виджет блога Master Addons (обозначенный в редакторе “MA Blog”) является бесплатным и упаковывает в большее количество вариантов макета, чем виджет Elementor Pro Posts. 21 вариант макета, анимация наведения, встроенная карусель, расширенная фильтрация. это один из наиболее полнофункциональных Виджеты блога Elementor там.
Шаг 1: Установите и активируйте главные дополнения
Хватать Мастер-аддоны для Elementor с сайта WordPress.org (бесплатно). после активации вы увидите элемент “MA Blog”, отображающийся на панели виджетов Elementor.
Шаг 2: Добавьте виджет блога и выберите макет
Перетащите Блог МА виджет на вашу страницу По умолчанию, он показывает классический макет блога в 4-колоночной сетке.
Вот тут-то и становится интересно. получаешь три типа раскладки:
- Сетка Стандартный макет сетки для чистых, организованных страниц блога
- Карточка — Э. Приподнятый дизайн карты с тенями и границами
- Список макет списка Horizontal, отлично подходит для блогов в стиле новостей или журналов
Каждый тип макета имеет 7 уникальных вариаций стиля, давая вам в общей сложности 21 различный дизайн страниц блога (плюс поддержка каменной кладки). Вы можете переключаться между ними одним щелчком мыши.
7 вариантов стиля включают в себя: по умолчанию, перекрытие контента, верхнее левое мета, карты выравнивания вправо, карты выравнивания по центру, центральное выравнивание с градиентным фоном и баннерную карту. Смешайте их с макетами сетки, карты или списка, чтобы создать настоящий вариант пользовательская страница блога в Elementor.
Шаг 3: Настройка параметров отображения
Вы получаете детальный контроль над тем, как отображаются сообщения в блоге:
- Почтовый заказ — Sort по дате, названию, измененной дате или случайному.
- Столбцы 1 к 6 столбцам.
- Значок формата сообщения — значки для разных форматов сообщений (видео, аудио, галерея).
- Мета-сепаратор ѕрибозревают символ, раздел ющий элементы мета (труба, точка, тире).
- Заголовок HTML-тег — Выберите тег заголовка для заголовков (H2, H3, H4 и т. д.).
- Тип сообщения usplay обычные сообщения, пользовательские публикации или страницы.
- Расстояние между строками и столбцами — Настройте промежутки между постами.
- Выравнивание контента — слева, центр или справа - согласуйте содержимое своего поста.
- Сообщения на страницу — Установить, сколько сообщений нужно на странице.
- Пагинация страниц страница Enable или отключить.
Шаг 4: Настройте параметры миниатюр
Здесь Мастер Аддоны тянет впереди Elementor Pro. панель миниатюр позволяет вам:
- Включить или отключить избранные изображения
- Установите индивидуальную высоту миниатюр
- Выберите положение миниатюры (вверху, слева, справа)
- Выбирать из 26 эффектов анимации наведения (Вовесить, пульс, толкнуть, поп, поплавок, раковина и многое другое)
- Применить 16 цветовых эффектов (Пылающий, сепия, оттенки серого, яркость и т. д.)
- Выбрать из 5 форм миниатюр (По умолчанию, закругленный, круг, градиентная граница и многое другое)
На скриншоте выше у меня есть “Hang” hover анимация, “Flushing” цветовой эффект, и “Gradient Bordered” миниатюра форма.Маленькие детали, как эти, что отделяют общий вид страницы блога от той, которая на самом деле выглядит как кто-то разработал ваш Страница блога Elementor специально.
Шаг 5: Настройте метаданные сообщений
Под Настройки сообщенийвы контролируете, какая метаинформация появляется в каждом сообщении в блоге:
- Название сообщения (показать/скрыть)
- Автор аватар изображение
- Имя автора
- Дата публикации
- Категории
- Счет комментариям
- Длина отрывка (установите точное количество слов)
- Читать далее текст (полностью настраиваемый)
- Показать полный контент против отрывка
Шаг 6: Используйте расширенную фильтрацию
The Расширенные настройки панель - это место, где вы сужаете, какие именно посты появляются:
- Исключить конкретные посты 1 Перейти к определенным сообщениям по идентификатору со страницы блога.
- Фильтр по тегу Только теги.
- Фильтр по авторам — посты с несколькими авторами (полезно для блогов с несколькими авторами).
- Офсет — Скип, первые N постов. Удобно, если вы представили пост отдельно.
- Открыть в новой вкладке — Сделать ссылки на сообщения в блоге открытыми на новой вкладке браузера.
Шаг 7: Включите карусель для публикации в блоге
Вы, вероятно, видели сайты, которые показывают свои последние посты в прокручивающейся карусели на домашней странице. виджет блог Master Addons имеет это встроенный. Переключить Блог-карусель Элементор на и настройте его:
- Автовоспроизведение — автоматически устанавливаемая вами скорость.
- Стиль навигации ѕринимать между точками или стрелками.
- Положение стрелки — Разместите навигационные стрелки внутри или снаружи карусели.
Объедините карусель с Расширенными настройками для фильтрации определенных постов (например, “featured” или “editors pick” тегов) и поместите ее в любом месте вашего сайта, а не только на странице блога.
Важно: Убедитесь, что вы включили “Load Font Awesome 4 Поддержка” из Элементор > Настройки. В противном случае значки со стрелками в карусели отобразятся неправильно.
Шаг 8: Создайте стиль страницы блога
The Вкладка Стиль охватывает все визуальные настройки:
- Миниатюра overlay цвет, CSS-фильтры (яркость, контрастность, насыщенность)
- Название и мета Тип, цвет текста и цвет наведения
- Содержание Цвет текста, цвет фона, типографика, тень коробки, подкладка и поле контента
- Коробка Цвет задней панели, граница и тень для всей почтовой карты
- Пагинация страниц Тип, нормальный цвет состояния, цвет состояния наведения, граница и заполнение
Между этими элементами управления вы можете сопоставить свой верстка блога Элементар к брендингу вашего сайта вплоть до пикселя Цвета, шрифты, интервалы, тени, все регулируемые от панели Элементор.
Виджет сообщений Elementor Pro против виджета блога Master Addons
Вот все, что выложено рядом, чтобы вы могли видеть, что Виджет блога Elementor подходит под вашу ситуацию.
| Особенность | Виджет сообщений Elementor Pro | Виджет блога Master Addons (бесплатно) |
|---|---|---|
| Цена | Требуется Elementor Pro (59 долларов США за год+) | Бесплатно |
| Вариации макета | 3 скина (классика, карты, полное содержимое) | 21 вариант (7 стилей х 3 типа раскладки) |
| Типы раскладок | Только сетка | Сетка, карта и список |
| Масонство | Да | Да |
| Эффекты висения миниатюр | Нет | 26 анимаций ховера + 16 цветовых эффектов |
| Формы миниатюр | Только радиус границы | 5 фигур (по умолчанию, закругленные, круг, градиентная граница и т. д.) |
| Параметры метаданных | Имя автора, Дата, Время, Комментарии | Автор Аватар, Имя автора, Дата, Категории, Теги, Счет комментариев |
| Фильтрация запросов | Тип сообщения, Включить/Исключить | Тип сообщения, Фильтр по тегу, Фильтр по автору, Исключение сообщения, Смещение |
| Пагинация страниц | 3 типа (номера, предыдущая/следующая, комбинированная) | Числа + Предыдущая/Следующая с настраиваемым текстом |
| Карусель | Недоступно | Полная карусель с автозапуском, контролем скорости, стрелками или точками |
| Открыть в новой вкладке | Нет | Да |
| Значки формата сообщения | Нет | Да |
Для базовых страниц блога виджет Elementor Pro Posts выполняет свою работу Если вам нужны эффекты наведения, карусель или просто больше дизайн страницы блога WordPress variety, виджет блога Master Addons, покрывает все это бесплатно.
Советы по улучшению макета блога Elementor
Несколько вещей, которые я узнал, создавая страницы блогов для десятков сайтов WordPress:
1. Всегда используйте избранные изображения
Сообщение без избранного изображения отображается в виде пустого прямоугольника в сетке вашего блога. Это выглядит сломанным. Установите избранное изображение для каждого сообщения, даже если это простое фирменное изображение. Если размеры файлов вызывают беспокойство, вот наше руководство по лучшие плагины оптимизатора изображений WordPress.
2. Сохраняйте краткость отрывков
Длинные отрывки загромождают сетку и толкают посты ниже складки. 15-25 слов достаточно, чтобы рассказать читателям, что охватывает пост. цель состоит в том, чтобы заставить их щелкнуть, а не читать все это со страницы блога.
3. Используйте согласованные подсчеты столбцов
Три колонки работают лучше всего для большинства страниц блога. две колонки хороши для сайтов с большим содержанием контента и более длинными выдержками. четыре колонки работают, когда у вас много коротких постов с яркими избранными изображениями. и как только читатели переходят к полной статье, помогите им оставаться там — лучший плагин для оглавления для WordPress добавляет ссылки для перехода, поэтому длинные сообщения легко просмотреть.
4. Установите правильные теги заголовков
Заголовок страницы вашего блога должен быть H1. Заголовки сообщений в сетке блога должны быть H2 или H3. Это помогает поисковым системам понять структуру вашей страницы. для получения дополнительных советов по SEO, читайте наш лучшие практики SEO для Elementor гид.
5. Добавляйте категории в метаданные
Показ категорий в метаданных ваших сообщений помогает посетителям найти соответствующий контент Виджет блога Master Addons позволяет отображать категории прямо под заголовком каждого сообщения.
6. Тест на мобильном телефоне
Предварительный просмотр страницы блога на мобильном телефоне и планшете перед публикацией. сетка из 3 столбцов стекируется в 1 столбец на маленьких экранах, что нормально, но иногда расстояние или размеры шрифтов смотрят после коллапса. Дайте ему быструю прокрутку на вашем телефоне. для большего контроля проверьте наше руководство на адаптивный дизайн с точками останова Elementor.
7. Используйте карусель на своей домашней странице
Поставьте блог Элементор карусель на вашей домашней странице в дополнение к самой странице блога. таким образом, каждый посетитель видит ваши последние сообщения прямо при приземлении, даже если он никогда не нажимает “Blog” в навигации. виджет блога Master Addons имеет встроенную карусель, поэтому на настройку уходит около 30 секунд.
Часто задаваемые вопросы
Могу ли я создать страницу блога с бесплатной версией Elementor?
Да. Хотя бесплатный Elementor не включает виджет Posts, вы можете использовать Виджет блога Master Addons который работает с бесплатной версией Elementor. Он дает вам 21 вариант макета, эффекты наведения, поддержку карусели и расширенную фильтрацию бесплатно.
Как добавить страницу блога в навигацию по сайту Elementor?
Создать новую страницу в WordPress (назовите ее “Blog”), спроектировать ее с помощью Elementor с помощью виджета Posts или виджета Master Addons Blog, затем добавить эту страницу в меню навигации через Appearance > Menus. вы также можете использовать Мастер-создатель тем аддонов чтобы создать собственный заголовок с помощью вашей навигации.
Сколько сообщений в блоге я должен отображать на странице?
От 6 до 12 сообщений на странице является сладкой точкой для большинства сайтов. менее 6 может сделать страницу чувствовать себя пустой, в то время как более 12 увеличивает время загрузки и переполняет посетителей. включить нумерацию страниц, чтобы читатели могли просматривать старые сообщения.
Могу ли я показывать сообщения в блоге из определенной категории на странице своего блога Elementor?
Да. как Elementor Pro, так и Master Addons поддерживают фильтрацию сообщений по категориям. в Master Addons используйте панель Advanced Settings для фильтрации по тегу, автору или исключения определенных сообщений. это позволяет создавать несколько страниц блога для разных тем.
Какой макет блога Elementor лучше всего подходит для SEO?
Макет сетки с избранными изображениями, заголовками публикаций с использованием тегов H2/H3, короткими отрывками, метаданными категорий и правильным нумерованием страниц лучше всего подходит для SEO. Убедитесь, что страница вашего блога загружается быстро, оптимизируя изображения и используя a легкая тема Элементор.
Заключительные мысли
Здание а пользовательская страница блога в Elementor занимает около 10-15 минут с любым методом Виджет Elementor Pro Posts хорошо обрабатывает основы, если у вас уже есть лицензия Pro.
Для дополнительных вариантов макета Виджет блога Master Addons дает вам 21 вариант макета, 26 анимаций наведения, 16 цветовых эффектов, карусель и расширенную фильтрацию постов. Этого достаточно создайте страницу блога с помощью Elementor похоже, вы наняли дизайнера.
Он также работает с бесплатной версией Elementor. Скачать Master Addons и проверить.
Если что-то не работает правильно во время настройки, напишите нам сообщение и мы разберемся.
Связанное чтение:
