Редактирование главной страницы с помощью Elementor: добавление модулей (текст, изображения, кнопки и т. д.)

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

Подготовка: Вход в режим редактирования Elementor

1. Войдите в бэкэнд WordPress, перейдите в раздел "Страницы" → найдите "Главная" (или страницу, которую вы хотите отредактировать) и нажмите "Изменить".
2. Нажмите на кнопку "Редактировать с помощью Elementor" (синяя с иконкой Elementor) в верхней части страницы, чтобы перейти в интерфейс визуального редактирования.

После входа интерфейс разделен на три части:

• Слева: панель модуля(содержит все элементы, которые могут быть добавлены)
• Центр: область редактирования(Отображение эффектов страницы в режиме реального времени)
• Справа: Панель стилей(Подробные стили можно настроить при выборе элемента)

Шаг 1: Добавьте модуль "Заголовок" (текстовый заголовок)

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

1. Найдите модуль заголовкаНа левой панели модулей найдите модуль "Заголовок" (иконка "T") в категории "Основные".
2. Перетаскивание для добавления на страницуНажмите и удерживайте модуль "Заголовок", перетащите его в позицию "+ Перетащить элемент сюда" в центральной области редактирования и отпустите мышь. В этот момент на странице появится заголовок по умолчанию "Это заголовок".
3. Измените содержание заголовкаВыберите модуль заголовка, который вы только что добавили, и справа появится панель редактирования:
   • В разделе "Содержание" → "Текст заголовка" удалите текст по умолчанию и введите свой заголовок (например, "Добро пожаловать в мой личный блог").
   • Выберите уровень в "Header Level" (H1 - самый большой, подходит для основных заголовков; H2 - второй по величине, подходит для подзаголовков, и выбирается в зависимости от уровня содержимого).
4. Настройка стиля заголовкаПерейдите на вкладку "Стили" в правой панели, чтобы настроить его:
   • каллиграфический стиль: Выберите свой любимый шрифт (например, "Microsoft Black" "Arial") в раскрывающемся окне "Шрифт".
   • величина: Перетащите ползунок "Размер шрифта" или введите значение напрямую (рекомендуемый размер заголовка - 24-48px).
   • цвет: Нажмите на поле "Цвет текста", чтобы выбрать цвет заголовка (например, черный, темно-синий).
   • выстроиться в правильном порядке: Нажмите кнопку "Выравнивание текста", чтобы установить заголовок слева, по центру или справа (основной заголовок главной страницы рекомендуется располагать по центру).

Шаг 2: Добавьте модуль "Параграф" (основной текст)

Абзацы используются для отображения деталей, например, синопсис, описание и т. д.

1. Добавить модуль параграфаНайдите модуль Paragraph (значок - символ абзаца) в категории "Основные" слева и перетащите его под модуль Title.
2. Измените содержание параграфаВыберите модуль абзаца и введите его содержание (например, "Здесь я делюсь своими жизненными уроками и учебными заметками, добро пожаловать в обмен!) Добро пожаловать в обмен!".
3. Оптимизация стилей абзацевПереключитесь на вкладку "Стили":
   • размер шрифта: Рекомендуется установить значение 16-18px (для удобства чтения).
   • ваш рост (почетный): Отрегулируйте в 1,5-1,8 раза (для более удобного интервала между текстами).
   • цвет: Выберите цвет, который можно отличить от заголовка (например, темно-серый, чтобы он не был слишком близок к цвету фона).

Шаг 3: Добавьте модуль "Изображение" (вставьте картинку)

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

1. Загружайте или выбирайте изображенияНайдите модуль "Картинки" в категории "Основные" слева и перетащите его в нижнюю часть абзаца. Выберите модуль "Картинки" и нажмите "Выбрать картинку" в разделе "Содержание" → "Картинка" справа:
   • Если изображение уже находится на вашем компьютере, нажмите "Загрузить файл" → Выберите изображение → Нажмите "Выбрать".
   • Если вы уже загружали изображение, вы можете напрямую выбрать его в медиатеке.
2. Настройка отображения изображенияПереключитесь на вкладку "Стили":
   • размеры: В поле "Ширина" задайте пропорцию изображения на странице (например, 100% означает полную ширину экрана, 80% - меньшую).
   • закруглённый угол: Перетащите ползунок Радиус границы, чтобы закруглить углы изображения (чем больше значение, тем более выраженными будут закругленные углы).
   • fig. травматический опыт, который преследует кого-либо: Включите "Box Shadow", чтобы добавить легкую тень к изображению (для придания ему более многослойного вида).
3. Добавьте описание изображения (необязательно)Ввод описаний изображений (например, "Мои фотографии из путешествий") в разделе "Контент" → "Альтернативный текст" помогает поисковым системам понять содержание изображений и улучшает SEO.

Шаг 4: Добавьте модуль "Кнопка" (управляемый щелчок)

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

1. Добавить модуль кнопкиНайдите модуль "Кнопки" в категории "Основные" слева и перетащите его под изображением.
2. Настройка содержимого кнопок и ссылокПроверьте модуль кнопок, расположенный справа в разделе "Содержание":
   • копии: Введите текст кнопки (например, "Просмотр моих сообщений").
   • ссылка: Нажмите на поле ввода рядом с "Dynamic" и введите адрес ссылки (например, адрес страницы вашего блогролла или внешней ссылки).
     • Если вы ссылаетесь на страницу станции, вы можете нажать на значок "Выбрать страницу" в правой части поля ввода, чтобы выбрать целевую страницу напрямую.
3. Разработка стилей кнопокПереключитесь на вкладку "Стиль", чтобы создать привлекательные кнопки:
   • цветВыберите белый цвет для "Цвета текста" и яркие цвета для "Цвета фона" (например, синий, оранжевый, чтобы гармонировать с основным цветом страницы).
   • размеры: Выберите "Средний" или "Большой" для параметра "Размер кнопки", чтобы было удобнее нажимать на кнопку.
   • геометрия: Установите "Радиус границы" на 5-10px (слегка закругленные углы выглядят более эстетично).
   • ** Эффект наведения **: перейдите на вкладку "Наведение", чтобы настроить цвет (например, углубить цвет) при наведении мыши, чтобы усилить ощущение интерактивности.

Шаг 5: Отрегулируйте расстояние между модулями (для более аккуратной страницы)

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

1. Выбранные модули: Нажмите на край модуля (появится синяя рамка).
2. Настройка внешних полей: В правой панели "Advanced" -> "Margin" установите расстояние между модулем и верхним и нижним элементами (например, "Top Margin" установлен на 30px, чтобы увеличить расстояние до верхнего модуля).
3. выстраиваться в линию: Нажмите и удерживайте кнопку Ctrl клавиша (или Command клавиша) Выделите несколько модулей одновременно и нажмите кнопку "Выровнять" на верхней панели инструментов (например, "Выровнять по центру"), чтобы выровнять элементы более аккуратно.

Шаг 6: сохранение и предварительный просмотр

1. Сохранить изменения: Нажмите кнопку "Обновить" в левом нижнем углу страницы (рекомендуется своевременно сохранять изменения после каждой правки).
2. Эффект предварительного просмотра: Нажмите кнопку "Preview" в левом верхнем углу и выберите "Desktop Preview", "Tablet Preview" и "Mobile Phone Preview", чтобы проверить эффект отображения на разных устройствах (убедитесь, что текст не перекрывается, а изображение не искажается на мобильном телефоне).

Советы для начинающих

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

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