11. Elementor Free | Секция «Шапка с фиксированным фоновым изображением» для страницы «Главная».

  Автор:
  113
Section "Header, with fixed background image"

С этого видео урока мы начнем создавать страницу «Главная (входная)» для сайта на WordPress с помощью бесплатной версии Elementor.  В этом видео уроке Вы узнаете как для страницы «Главная» создать секцию «Шапка с фиксированным фоновым изображением».

У нас будет вот такая шапка сайта.

Этот и другие 100+ видео уроков входят в видеокурс «Elementor — от новичка до профи»

Я разобью создание страницы «Главная» на восемь уроков.

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

  1. Секция «Шапка с фиксированным фоновым изображением»
  2. Секция «Три колонки, с иконками и текстом»
  3. Секция «Об авторе, с картинкой и текстом»
  4. Секция «Достижения, с анимационными счетчиками»
  5. Секция «Об авторе. Как убрать отступы вокруг картинки.»
  6. Секция «Портфолио — галерея»
  7. Секция «Вопросы — ответы»
  8. Секция «Наши партнеры»

Итак, начнем создание главной страницы сайта с создания первая секции «Шапка, с фиксированным фоновым изображением».

Переходим в админке сайта в раздел «Страницы», и открываем страницу, которую мы уже создали для главной в редакторе Elementor.

 

Проверьте, правильно ли у вас установлен макет создаваемой страницы — Elementor полная ширина. Дальше нажимаем на значок «Плюс».

Выбираем структуру секции на всю ширину.

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

Итак, для редактирования секции наводим мышку на секцию и у нас появляются три кнопки вверху. Нажимая на среднюю кнопку «Редактировать секцию».

 

Переходим во вкладку с левой стороны в раздел «Стиль». Выбираем тип фона»Классический». Выбираем изображение (должна быть большая картинка 1920px на  1080px).  Теперь нам нужно отредактировать это изображение, чтобы оно было зафиксированным, и чтобы оно отражалось.


Далее, смотрите пошаговую настройку в видео уроке в конце этой статьи, и Вы узнаете:

  • как добавить отступы с помощью виджета «Интервал»,
  • как работать с виджетом «Интервал»,
  • как работать с виджетом  «Заголовок»,
  • как работать с виджетом  «Текстовый редактор»,
  • как делать перенос строки текста,
  • как работать с виджетом «Кнопка»,
  • как добавить иконку в кнопку,
  • как настроить текст, цвет и анимацию на кнопке,
  • как редактировать фон секции с картинкой, заголовком, текстом, и кнопкой.

После настройки секции «Шапка, с фиксированным фоновым изображением» для правильного отображения выполним донастройку элементов этой секции для телефона и планшета:

  • изменим размер заголовка,
  • изменим размер текста и расстояние между строчками,
  • сделаем поменьше кнопку,

Обратите внимание, что в режиме телефона мобильные телефоны меняется все, что отмечено здесь вот таким значком «Телефон»,


а для планшета со значком «Планшет».

Где нет такой пометки «Телефон или «Планшет» то, изменения будут одновременно отражаться для всех версии — для десктопной (обычный монитор и монитор ноутбука),  для телефона и для планшета.

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

После всех изменений не забудьте нажать на кнопку «Обновить»

Смотрите видео урок пошаговой настройки секции «Шапка, с фиксированным фоновым изображением» для страницы «Главная (Входная)» для сайта на WordPress.

В следующем видео уроке Вы узнаете как с нуля создать секцию «Три колонки с иконками и текстом» для страницы «Главная» сайта на WordPress.

Присоединяйтесь к курсу «Elementor — от новичка до профи» прямо сейчас, не дожидаясь окончания серии из 100+ видео уроков, и уже сегодня на практике начните применять Elementor для создания страниц и лендингов для себя или на заказ.

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

Добро пожаловать на мой видео курс "Elementor - от новичка до профи".
Добро пожаловать на мой видео курс «Elementor — от новичка до профи».

 

 

11. Elementor Free | Секция «Шапка с фиксированным фоновым изображением» для страницы «Главная».

   1 голос
Средняя оценка: 5 из 5
Вам понравилась статья? Буду очень благодарна Вам если поделитесь ею в социальных сетях - просто нажмите на кнопки ниже:

Анфиса Бреус

Анфиса Бреус - специалист по Wordpress с 2007 года. Создатель и разработчик многофункционального шаблона "AB-Inspiration" для самостоятельного создания и профессиональной настройки сайтов разного назначения на WordPress. Основатель клуба "Мастер WordPress" и автор курсов по создании и применению сайтов на WordPress. Фрилансер. Предприниматель. Спикер.

Как создать свой сайт на WordPress с закрытыми и отрытыми онлайн - курсами, с универсальным интернет - магазином, профессиональным блогом и высоко конверсионными лендингами для заработка в интернете 2022
Оставьте свой комментарий:

Ваш адрес email не будет опубликован.