Как создать страницу блога с помощью Elementor (бесплатно, не требуется)

Бесплатный Элементор не может перечислить ваши посты Виджет Посты, Архивные сообщения, Заголовок сообщения и остальные виджеты поста - все Элементор Про. При бесплатной установке они показывают в панели виджетов с навесным замком и ничем иным Чтобы построить страницу блога, не платя за Про, установите бесплатную Мастер Аддоны подключите и используйте виджет "Посты блога", в котором перечислены сообщения в сетке, списке или каменной кладке и который работает внутри обычного редактора Elementor.

Это руководство строит один старт-к-финиш, со скриншотами из Elementor 4.2.4 и Master Addons 3.2 на бесплатной установке.Он охватывает выбор макета, фильтры запросов, вкладки фильтра категорий, которые большинство учебных пособий пропускают, и две настройки, которые решают, выглядит ли ваша сетка опрятной или рваной.

Есть ли у Elementor бесплатный виджет блога или публикаций?

Нет. Найдите на панели виджетов “post” при бесплатной установке, и вот что вернется.

Сообщения блога и хронология несут фиолетовый значок Master Addons и готовы перетаскивать. Сообщения, Заголовок сообщения, Отрывок сообщения, Архивные сообщения, Комментарии к публикации, Пост-навигация и Пост-информация - все они имеют навесной замок, который является Elementor рекламой Pro изнутри бесплатного плагина.

Итак, у вас есть четыре варианта:

Остальная часть этого руководства использует бесплатный виджет Master Addons.Каждый элемент управления, показанный ниже, находится в бесплатном плагине.Ничто в виджете Blog Posts не заблокировано.

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

• WordPress с Элементор установлено. бесплатная версия в порядке.
• Бесплатный плагин Master Addons. Установите примечания здесь если вы хотите их.
• Несколько опубликованных постов Шесть и более облегчают оценку макета.
• Представленное изображение на каждом посте. пост без него оставляет пробел в сетке, и никакие настройки макета не исправляют это.

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

Шаг 1: Создайте страницу

Перейти к Страницы → Добавить новую страницу, назовите это Блог, затем нажмите Редактировать с помощью Elementor. Оставьте область контента WordPress пустой. Все происходит на холсте Elementor.

Не устанавливайте эту страницу как страницу WordPress Posts в разделе Настройки → Чтение. Это передает URL-адрес вашей теме и отбрасывает дизайн Elementor. есть раздел о правильном способе сделать это дальше вниз.

Шаг 2: Добавьте виджет "Посты в блоге"

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

Шаг 3: Выберите макет

Открытый Параметры отображения. Элементы управления здесь устанавливают форму страницы.

Два элемента управления, которые имеют наибольшее значение, расположены вверху:

• Макет блога: Классика или Карты. Классика помещает текст на фон страницы. Карты обертывает каждый пост в свою панель.
• Тип блога: макет сетки, макет списка или масонство.

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

Еще два стоит установить сейчас. Заголовок HTML-тег по умолчанию используется значение H2, которое подходит для индекса блога, поскольку заголовок страницы - это H1, а под ним находится заголовок каждого сообщения. и Источник выбирает между последними сообщениями и текущим запросом. Оставьте это на последних сообщениях для обычной страницы блога; Текущий запрос для шаблоны архивов, где виджет должен следовать за просматриваемой категорией или автором вместо собственных настроек.

Шаг 4: Выберите стиль карты или списка

Установите макет блога на карты и a Макет карт управление появляется с семью конструкциями.

По умолчанию, Перекрытие контента, Верхняя левая мета, Правая выравнивание карт, Центр выравнивания карт, Центр выравнивания Градиент BG и Баннерная карта. Перекрытие контента и Баннерная карта поместили текст поверх изображения, поэтому им нужны фотографии с местом в них. Карты по умолчанию и Правый выравнивание - более безопасные варианты для смешанного набора избранных изображений.

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

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

Шаг 5: Установите размер миниатюры и эффект зависания

Открытый Настройки миниатюр. Здесь обычно фиксируется рваная страница блога.

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

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

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

Шаг 6: Выберите, какие мета отображать

Открытый Настройки сообщений и выключайте все, что не нужно читателю.

Длина отрывка по умолчанию используется 55 слов, что является длинным для карты. Опустите его до 15-25, чтобы сетка оставалась сканируемой, и щелчок перейдет к публикации, а не к сводке. Читать далее Текст является свободным текстом, поэтому “Читать руководство” работает так же, как “Читать далее”.

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

Шаг 7: Отфильтруйте появившиеся сообщения

Открытый Расширенные настройки. Это раздел запроса.

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

Шаг 8: Опубликуйте и проверьте результат

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

Общее время, если вы знаете, где находятся элементы управления, составляет менее десяти минут.

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

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

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

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

Сетка, список или каменная кладка: какую планировку использовать

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

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

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

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

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

Превратите сетку блога в карусель

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

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

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

Показывая измененную дату вместо опубликованной даты

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

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

Чтобы показать измененную дату в виде текста, вам нужны динамические теги Elementor Pro, где тег Post Date имеет параметр Модифицированный, используемый внутри виджета Pro Posts или Loop Grid.Свободного эквивалента Elementor не существует, потому что динамические теги - это функция Pro, альтернатива бесплатно - небольшой фрагмент, который фильтрует get_the_time для шаблона вашего блога.

Страница блога или страница сообщений? Установите его правильно

WordPress имеет собственную страницу сообщений, установленную под Настройки → Чтение. Страница, которую вы только что создали, является обычной страницей, и они ведут себя по-разному.

Если вы назначаете свою страницу Elementor в качестве страницы Posts в Settings → Reading, WordPress передает URL-адрес шаблону архива темы, и ваш дизайн Elementor игнорируется. это единственная наиболее распространенная причина, по которой готовая страница блога вместо этого показывает список темы по умолчанию.

Два способа сделать это правильно:

• Держите обычную страницу. Оставьте настройки → Чтение в одиночку и добавьте страницу блога в меню в разделе Внешний вид → Меню. страница отображает ваш дизайн Элементора, который вы хотите.
• Постройте настоящий архив. Если вы хотите, чтобы URL-адрес архива WordPress сам использовал ваш дизайн, создайте шаблон Архива в Мастер-создатель тем аддонов и установите для источника виджета Blog Posts значение Текущий запрос, чтобы он следовал за любым просматриваемым архивом.

Сообщения в блоге Master Addons против виджета Elementor Pro Posts

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

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

1. Высота рваных карт. Включите пользовательскую высоту в настройках миниатюр и установите min и max на одно и то же значение. это исправление девять раз из десяти.
2. Пустой прямоугольник в сетке. В этом посте нет избранного изображения. Добавьте одно, даже простое фирменное изображение.
3. Выдержки проглатывания карты. Длина отрывка от 55 до примерно 20 слов.
4. Три пункта списка рядом. Требования к макету списка Количество столбцов, установленных в 1 столбец.
5. Вкладки фильтра, показывающие только Все. Выберите категории в Фильтр по категориям. вкладки взяты из этого поля.
6. Все, что уложено на мобильном в одну длинную колонку. Обычно это правильно. проверьте это с помощью переключателя устройств и установите мобильные колонки намеренно, а не оставляйте это на волю случая. Наше руководство по Точки останова Элементора покрывает остальное.
7. Медленная страница блога. Проверьте размер ваших избранных изображений, прежде чем обвинять виджет. Сжатие их сначала; см. наш обзор оптимизатора изображений и примечания к ускорение сайтов Elementor.

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

Связанное чтение

• Виджет сообщений блога, страница функций со всеми перечисленными настройками
• Документация элемента блога
• Как создать липкий заголовок в Elementor
• Как редактировать нижний колонтитул в WordPress с помощью Elementor
• Библиотека шаблонов Master Addons, если вы предпочитаете импортировать готовую страницу
• Мастер-адреса на WordPress.org