Создание сайта на WordPress+Elementor

VK
Pinterest
Facebook
Twitter
OK
Telegram

Как создать уникальную домашнюю страницу для вашего блога на WordPress

Как создать уникальную домашнюю страницу для вашего блога на WordPress

Как создать уникальную домашнюю страницу для вашего блога на WordPress

Содержание статьи

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

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

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

Как создать уникальную домашнюю страницу для вашего блога на WordPress

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

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

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

Для того чтобы иметь платную версию, вам надо просто ее купить и стоит она для одного сайта 49$ или стать студентом АКАДЕМИИ СОЗДАНИЯ САЙТА и кроме обучения вы получите платную версию плагина Elementor

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

В этом уроке я расскажу:

  • Установка плагина Elementor Pro
  • Настройка некоторых цветов и стилей по умолчанию
  • Создание новой домашней страницы с Elementor
  • Обновление настроек WordPress для использования новой домашней страницы
  • Обновление меню WordPress co ссылкой на новую страницу

Что будет на нашей домашней странице

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

Как создать уникальную домашнюю страницу для вашего блога на WordPress

Шаг 1. Установите Elementor Pro

После того как вы приобретете Elementor Pro, вам надо скачать zip-файл на свой компьютер и затем установить на сайт (бесплатная версия уже должна стоять на сайте)
  • Перейти к плагинам → Добавить новый
  • Нажмите – Загрузить плагин → Выбрать файл
  • Найдите на своем компьютере zip-файл- elementor-pro-xxx
  • Нажмите установить сейчас → Активировать

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

  • Перейти к Elementor → Лицензия
  • Нажмите «Подключить и активировать» и следуйте инструкциям

Шаг 2. Создайте страницу WordPress для новой домашней страницы

  • Перейти на вкладку – СтраницыДобавить новую
  • Написать заголовок – Домашняя(или как вам нравиться)
  • Нажмите – Опубликовать

Далее мы начинаем редактировать ее в Elementor

Нажмите, вверху, на синею кнопку – Редактировать в Elementor

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

Для этого:

  • Нажмите на значок шестеренки в левой нижнем углу — Настройки
  • Макет страницы → Холст Elementor
Как создать уникальную домашнюю страницу для вашего блога на WordPress

Шаг 3: Создайте раздел с призывом к действию

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

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

Призыв к действию

Нажмите на + на красном значке, чтобы создать новую секцию, и выберите макет с одним столбцом.

Далее нам надо установить фон для этой секции, для этого:

Нажимаем вкладку – Стиль

      • Выбираем тип фона – Изображение
      • Нажимаем значок +, чтобы выбрать картинку из библиотеки
      • Устанавливаем изображение
      • Повтор — Не повторять
      • Размер – Перекрыть
      • Нажимаем внизу на зеленую кнопку — Обновить.
Как создать уникальную домашнюю страницу для вашего блога на WordPress

Далее мы будет добавлять заголовок и кнопку призыв к действию.

Для того чтобы было удобно работать, перейдите — Макет → Высота → Минимальная высота

Заголовок:

  • Нажимаем на +, чтобы добавить виджет
  • Перетаскиваем виджет заголовка и переходим к редактированию
  • Вкладка — Содержимое уставите выравнивания по центру
  • Вкладка — Стиль, нажмите Типографика, а затем измените размер шрифта, цвет, если надо высоту строки.
Как создать уникальную домашнюю страницу для вашего блога на WordPress

Кнопка:

Перетащите виджет кнопки под заголовок

На вкладке Содержимое установите выравнивание по центру

  • Установите размер – Гиганский
  • Нажмите на – Текст, чтобы изменить на «Зарегистрируйтесь сейчас»
  • На вкладке — Содержимое — щелкните — Ссылка, и введите URL своей страницы регистрации
Как создать уникальную домашнюю страницу для вашего блога на WordPress

Сделаем, чтобы нашу надпись и кнопку было лучше видно, для этого колонке придадим цвет и округлим края.

Нажимаем на значок — Колонки  (серый значок в левом верхнем углу) Стиль → Перекрытие фона → Цвет Прозрачность

Находим – Граница Округление углов → Обновить

Как создать уникальную домашнюю страницу для вашего блога на WordPress

Для того чтобы увеличить расстояние от краев колонки надо:

Нажать – Расширенные → Внутренний отступ → со всех сторон поставить 20 затем закрыть и с лева и права поставить 35. Можете настроить как-то по другому.

Как создать уникальную домашнюю страницу для вашего блога на WordPress

Шаг 4: Поставьте статьи из важных рубрик

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

Нажимаем на + и выбираем секцию с двумя колонками

Снова нажимаем на +, уже внутри колонки и слева находим виджет — Posts и перетягиваем его в колонку

Вкладка Содержимое

  • Columns=1
  • Posts Per Page =1
  • Meta Data – очистить, чтобы не отображались дата написания статьи и комментарии
  • Red More Text – написать русский текст “Читать далее”  Открываем вкладку — Query 
  • Кликаем на — Include By и выбираем — Term
  • Затем в графу — Term – пишем начало фразы рубрики
  • Переходим на вкладку — Стиль, выбираем там — Content
  • Для Title, Excerpt, Read More настраиваем цвет и типографику
  • Title – Заголовок поста
  • Excerpt – Описание поставить
  • Read More – Читать далее
  • Spacing – Расстояние
Тоже самое сделать с другой колонкой, только выбрать для нее другую рубрику

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

Перетаскиваем виджет –  Заголовок и ставим над картинкой. Теперь надо написать название, поставить посередине. Настроить цвет, типографику и расстояние от других элементов.

Для этого:

  • В содержимом пишем название рубрики
  • В графе — Ссылка ставим URL рубрики
  • Выравнивания — посередине
  • Стиль — устанавливаем цвет и типографику
  • Интерлиньяж — регулируем высоту

Второй заголовок делаем аналогично, или дублируем первый меняя название и URL

Как создать уникальную домашнюю страницу для вашего блога на WordPress

Шаг 5: Поставьте архив статей

Далее мы ставим архив статей, свежие выше, более старые ниже. Для этого:

Берем тот же виджет Posts. Делается это аналогично, только ставим другие настройки. Именно настройки делают два блока совершенно непохожими. И так начинаем:

  • Берем виджет — Заголовок и перетаскиваем на +
  • Содержание — пишем – Свежие статьи
  • Выравнивание – посередине
  • Стиль — настраиваем (цвет, типографику)
  • Расширенные — Отступ снаружи (верх, низ)
  • Теперь берем виджет — Posts и также перетаскиваем на +
  • Содержание — ничего не меняем кроме
  • Read More Text – пишем на русском «Читать далее»
  • Open in new Window – ставим — YES
  • Pagination – выбираем — Numbers
  • Page Limit – ставьте 50
  • Alignment – посередине

Стиль:

  • Box – Border Width – 1
  • Border Radius – 20
  • Настройте также цвет рамки — Border Color
  • Content – цвет и типографику
  • Spacing – это расстояние от заголовка, описание и «читать далее» – я поставила везде 20.

Pagination:

Типографика, только интерлиньяж поставила 8.6 и Space Between (расстояние между цифрами) 20

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

Шаг 6. Настройка домашней страницы

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

У меня это страница названа – Блог.

Для того, чтобы она отображалась при входе на ваш сайт, надо:

  • Зайти в – Настройки → Чтение
  • Поставить «точку» Статическая страница и выбрать там именно ту, которые вы только что создали и не забыть сохранить.
Как создать уникальную домашнюю страницу для вашего блога на WordPress

Шаг 7. Поставить в меню домашнее страницу

Надо не забыть добавить в меню, вашу новую страницу.

Для этого:

  • Переходим — Внешний вид → Меню→ Основное меню
  • Добавить в меню → Сохранить
Как создать уникальную домашнюю страницу для вашего блога на WordPress

Подводим итог:

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

Мы посмотрели на то, что Elementor Pro может сделать с точки зрения создания простой домашней страницы, но это только самая маленькая часть.

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

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

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

 

VK
Pinterest
Facebook
OK
Twitter
Telegram

Сохраните эту статью в Pinterest, чтобы изучить позже

Напишите свое мнение об этой статье или задайте вопрос:

Статьи

Приветствую вас, меня зовут Лирон. Я профессиональный блогер, владелец основатель Академии по созданию сайта и клуба Наставник! Сейчас я с огромным удовольствием обучаю всех, кто хочет научиться создавать сайты и затем зарабатывать с интернете. 

ЧИТАТЬ ДАЛЬШЕ  >>

Бесплатно

7 видов магнита для сбора подписной базы

7 видов магнита

Бесплатно

Создание статьи на блоге

Создание статьи на блоге
Статьи

Обучение

Получайте новые навыки

Scroll Up

Бесплатно

Email курс

Как начать зарабатывать на своем блоге