В этом уроке мы создадим новую домашнюю страницу (или как ее называют архив с записями) для нашего блога на WordPress. Возможно, вы уже знаете, что есть две опции для отображения домашней страницы на движке WordPress:
- Как архив для статей вашего блога. Эта настройка стоит по умолчанию. И, как правило, последних 10 анонсов ваших статей отображаются на ней ссылкой для перехода на всю статью.
- Как статическая страница. Главная настроена так, что на ней отображается любая другая, которую вы создадите. Эта статическая страница, также может содержать ваши последние сообщения, но и кроме них на нее можно поставить все, что вы захотите.
В этом уроке разберем второй вариант. Я покажу вам, как настроить свой блог, чтобы он имел статическую страницу именно с вашим макетом.
Для того, чтобы создать такую страницу, мы будем использовать фантастический плагин Elementor. Не зря elementor переводится как факир, на нем можно делать практически все, также легко и красиво.
Ну а если вам трудно, самому придумать дизайн вашей будущей странице, то можно воспользоваться шаблонами, которые также есть в элементоре.
Elementor имеет две версии платную и бесплатную. Как вы понимаете в бесплатной ограниченный функционал и именно то, что нам будет нужно нет. Это сетка отображения последних сообщений и меню.
Для того чтобы иметь платную версию, вам надо просто ее купить и стоит она для одного сайта 49$ или стать студентом АКАДЕМИИ СОЗДАНИЯ САЙТА и кроме обучения вы получите платную версию плагина Elementor
Как установить бесплатную версию читайте здесь. Я уже писала не только как установить элементор на сайт, но и рассказывала как им работать.
В этом уроке я расскажу:
- Установка плагина Elementor Pro
- Настройка некоторых цветов и стилей по умолчанию
- Создание новой домашней страницы с Elementor
- Обновление настроек WordPress для использования новой домашней страницы
- Обновление меню WordPress co ссылкой на новую страницу
Что будет на нашей домашней странице
У нас будет раздел с призывом к действию. Под ним несколько рамок для основных категорий нашего сайта. Внизу раздел для последних сообщений. Вот к чему мы будем стремиться:
Шаг 1. Установите Elementor Pro
- Перейти к плагинам → Добавить новый
- Нажмите — Загрузить плагин → Выбрать файл
- Найдите на своем компьютере zip-файл- elementor-pro-xxx
- Нажмите установить сейчас → Активировать
Следующий шаг — активировать вашу лицензию, чтобы у вас был доступ к библиотеке шаблонов. Мы не будет использовать шаблоны для этого урока, но в любом случае это стоит сделать.
- Перейти к Elementor → Лицензия
- Нажмите «Подключить и активировать» и следуйте инструкциям
Шаг 2. Создайте страницу WordPress для новой домашней страницы
- Перейти на вкладку — Страницы → Добавить новую
- Написать заголовок — Домашняя(или как вам нравиться)
- Нажмите — Опубликовать
Далее мы начинаем редактировать ее в Elementor
Нажмите, вверху, на синею кнопку — Редактировать в Elementor
Нам будет нужна полная ширина макета, другими словами чистый лист.
Для этого:
- Нажмите на значок шестеренки в левой нижнем углу — Настройки
- Макет страницы → Холст Elementor
Шаг 3: Создайте раздел с призывом к действию
Первая часть макета, будет с текстом и кнопкой призыва к действию.
В этом примере, призыв к действию будет, зарегистрироваться сейчас. Вот так эта часть будет выглядеть.
Нажмите на + на красном значке, чтобы создать новую секцию, и выберите макет с одним столбцом.
Далее нам надо установить фон для этой секции, для этого:
Нажимаем вкладку — Стиль
-
-
- Выбираем тип фона — Изображение
- Нажимаем значок +, чтобы выбрать картинку из библиотеки
- Устанавливаем изображение
- Повтор — Не повторять
- Размер — Перекрыть
- Нажимаем внизу на зеленую кнопку — Обновить.
-
Далее мы будет добавлять заголовок и кнопку призыв к действию.
Для того чтобы было удобно работать, перейдите — Макет → Высота → Минимальная высота
Заголовок:
- Нажимаем на +, чтобы добавить виджет
- Перетаскиваем виджет заголовка и переходим к редактированию
- Вкладка — Содержимое уставите выравнивания по центру
- Вкладка — Стиль, нажмите Типографика, а затем измените размер шрифта, цвет, если надо высоту строки.
Кнопка:
Перетащите виджет кнопки под заголовок
На вкладке Содержимое установите выравнивание по центру
- Установите размер — Гиганский
- Нажмите на — Текст, чтобы изменить на «Зарегистрируйтесь сейчас»
- На вкладке — Содержимое — щелкните — Ссылка, и введите URL своей страницы регистрации
Сделаем, чтобы нашу надпись и кнопку было лучше видно, для этого колонке придадим цвет и округлим края.
Нажимаем на значок — Колонки (серый значок в левом верхнем углу) → Стиль → Перекрытие фона → Цвет →ПрозрачностьНаходим — Граница → Округление углов → Обновить
Для того чтобы увеличить расстояние от краев колонки надо:
Нажать — Расширенные → Внутренний отступ → со всех сторон поставить 20 затем закрыть и с лева и права поставить 35. Можете настроить как-то по другому.
Шаг 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
Шаг 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. Настройка домашней страницы
Название для домашней страницы, можно дать любое — Блог, Домашняя, Главная, это не имеет значения. Самое важное, чтобы вы понимали, какая страница у вас являться архивом ваших записей.
У меня это страница названа — Блог.
Для того, чтобы она отображалась при входе на ваш сайт, надо:
- Зайти в — Настройки → Чтение
- Поставить «точку» Статическая страница и выбрать там именно ту, которые вы только что создали и не забыть сохранить.
Шаг 7. Поставить в меню домашнее страницу
Надо не забыть добавить в меню, вашу новую страницу.
Для этого:
- Переходим — Внешний вид → Меню→ Основное меню
- Добавить в меню → Сохранить
Подводим итог:
В этом уроке мы создали новую домашнею страницу для нашего блога. Изменили настройки чтения, чтобы использовать новую и добавили ее в меню навигации.
Мы посмотрели на то, что Elementor Pro может сделать с точки зрения создания простой домашней страницы, но это только самая маленькая часть.
Elementor настолько мощный, что возможности его нет предела. На нем также легко можно создать любую анимацию, специфические эффекты, шаблоны записей и архивов, сайты одностраничники, формы обратной связи и т.д.
На нем легко адаптируются страницы под мобильные телефоны. Все поля и элементы которые вы создаете очень красиво складываются.
В этом уроке я показала вам основы этого плагина. В Академии сайтостроения, я обучаю всему, что можно делать на этом плагине от создания шапок и футеров до создания целых шаблонов для записей, страниц и архивов.
