Для создания главной страницы сайта необходимо удалить ненужные для нового дизайна заголовок, блок и боковую навигацию.
Подготовка страницы
- Нажмите «Редактировать страницу».
- Внизу страницы, в разделе «Content Layout», установите значение «100%», чтобы контент растягивался на всю ширину.
- В разделе «Title», выберите «By side», чтобы отключить заголовок.
- Нажмите «Обновить».
После обновления страница будет выглядеть не очень хорошо, но главный блок будет удален.
Работа с Elementor
Elementor — удобный инструмент для создания сайтов методом перетаскивания элементов. Можно перетаскивать кнопки, колонки, заголовки и изменять их содержимое. Например, можно изменить текст кнопки «Купить». Пока удалим все существующие элементы.
Добавление секции и шаблонов
Добавим новую секцию, выбрав структуру из одного блока. В эту секцию можно добавлять Google карты, изображения, видео, кнопки и другие элементы, используя разделители для задания расстояния между ними.
При сложном дизайне можно использовать шаблоны:
- Нажмите «Добавить шаблон».
- Выберите шаблон, отсортировав по популярности или просмотрев все доступные варианты. Обратите внимание, что некоторые шаблоны платные.
- Нажмите «Вставить» для установки выбранного шаблона.
После установки шаблон добавляется на страницу. Его элементы (видео, текст, изображения) можно изменять. Для сохранения изменений нажмите «Обновить». Просмотр сайта осуществляется нажатием на иконку глаза.
Персонализация
Изменим текст и фон для придания сайту уникальности. Например, изменим заголовок на «Сообщество программистов». Полную замену текста делать не будем, это займет слишком много времени.
Для изменения заднего фона:
- Выберите нужный блок.
- Нажмите на первую иконку в настройках стиля.
- Выберите тип фона: цвет, изображение, градиент или видео.
- В данном примере используется фоновое видео с YouTube, которое лучше подходит по сжатию и качеству.
- Установите перекрытие фона и выберите подходящий цвет.
Адаптивность
При уменьшении размера экрана фоновое видео может не отображаться из-за размера или задержки загрузки. Для решения этой проблемы установим резервный фон:
- В настройках фона выберите «Резервный фон».
- Выберите изображение из библиотеки или загрузите файл.
- Установите атрибут alt (например, «Ночной вид»).
- Нажмите «Вставить медиа» и «Обновить».
Теперь при уменьшении размера экрана будет отображаться резервная картинка, а при увеличении – видео. Если видео перекрывает шапку, добавим отступ:
- В расширенных настройках, в разделе «Отступ», выберите иконку телефона.
- Установите значение отступа сверху (например, 100 пикселей).
Теперь сайт корректно отображается на устройствах разных размеров.
Оставшиеся элементы сайта (картинки, текст, кнопки) можно изменять аналогично. Для добавления секций используется кнопка «+», для дублирования – вторая иконка, для удаления – соответствующая иконка. Все действия интуитивно понятны. Главная страница сайта готова.