Учебное пособие

: Как изменить фоновое изображение героя при наведении курсора

Что в этом учебном пособии?

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

 

Что такое герой?

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

Целью главного раздела является немедленное привлечение внимания посетителя и передача наиболее важного сообщения или ценностного предложения веб-сайта. Это возможность для бизнеса произвести сильное первое впечатление.

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

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

Повышение вовлеченности пользователей

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

Кроме того, основной раздел часто является первым, что видит пользователь при посещении веб-сайта, и он может задать тон всему остальному сайту. Хорошо продуманный главный раздел может помочь установить идентичность, индивидуальность и ценности бренда, помогая дифференцировать его от конкурентов.

Как создать главный раздел, который меняет фоновое изображение при наведении курсора на различные элементы
Примечание

Мы будем строить этот дизайн с помощью контейнеров, поэтому активируйте их через «Настройки»> «Возможности» Elementor.
Мы будем использовать немного CSS, но не волнуйтесь, я предоставлю весь код и подскажу, куда его вставить.

Что нам нужно для начала?
  • Плагин Elementor Pro
  • 4 изображения


Давайте начнем:

Создайте новую страницу и отредактируйте ее с помощью Elementor.

Вставьте контейнер со следующими настройками:

  • Ширина содержимого: Полная ширина
  • Ширина: 100%
  • Минимальная высота: 100vh
  • Заполнение: 0x

Установите класс для контейнера с именем: «main- container-slide»

Перейдите на панель инструментов WordPress и загрузите 4 изображения, которые вы будете использовать, в медиа-область WordPress.

Вернитесь на страницу и вставьте следующий код CSS в пользовательскую вкладку CSS контейнера: 

.main-container-slide [класс * = "слайд"]: наведите {
    background-color: #CE3A3AA1 !важно;
}
.main-контейнер-слайд: имеет (.slide1: наведение) {
    background-image: url(https://yousite.com/image1.jpg) !важно;
}


.main-контейнер-слайд: имеет (.slide2: наведение) {
    background-image: url(https://yousite.com/image2.jpg) !важно;
}


.main-контейнер-слайд: имеет (.slide3: наведение) {
    background-image: url(https://yousite.com/image3.jpg) !важно;
}


.main-контейнер-слайд: имеет (.slide4: наведение) {
    background-image: url(https://yousite.com/image4.jpg) !важно;
}
Примечание

Замените «https://yousite.com/image.jpg» URL-адресами изображений, которые вы будете использовать в каждой зоне.


Этот CSS выполняет 2 вещи:

1 – Изменяет цвет фона при наведении в каждом контейнере

2 – Изменяет фоновое изображение в . main-container-slide при наведении курсора на контейнеры .slide-*.

Взгляните на мой пример (я изменил URL-адреса изображений для недавно загруженных изображений):

Следующий шаг:

На вкладке «Стиль» введите следующие настройки:

  • Фон: Обычный
  • Тип фона: Классический
  • Цвет: Прозрачный
  • Изображение: *Выберите первое изображение, которое хотите показать
  • Размер изображения: Full 90 049
  • Позиция: По центру По центру
  • Повтор: Без повтора
  • Размер дисплея: Обложка

Следующий шаг:
Добавьте внутри 1 контейнер со следующими настройками:

  • Ширина содержимого: Полная ширина
  • Ширина: 25%

Перейдите на вкладку «Дополнительно» и добавьте туда класс с именем: slide1

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

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

Следующий шаг:
Когда у вас будет готов первый контейнер, продублируйте его 3 раза и измените класс CSS для каждого контейнера, чтобы он имел 4 последовательно пронумерованных класса:
слайд1, слайд2, слайд3, слайд4


Готово!

В этом уроке мы узнали, как создать главный раздел с помощью Elementor, платформы веб-сайтов №1 для WordPress.

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

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

15 удивительных фоновых эффектов CSS — 1stWebDesigner

Знаете ли вы, что с помощью CSS можно создавать красивые анимации и интересные эффекты? В сочетании с HTML и JavaScript или даже сам по себе CSS может быть чрезвычайно мощным. Вы будете удивлены тем, что могут создать разработчики. От простых анимаций прокрутки до сложных сред, полностью построенных из кода, эти фоновые эффекты CSS могут добавить индивидуальности вашему веб-сайту.

Что, если бы вы могли бесплатно использовать фоновые эффекты CSS, созданные другими? Такие сайты, как CodePen, были созданы для размещения кода с открытым исходным кодом или другого свободно лицензированного кода, что означает, что вы можете использовать его в своих собственных проектах практически без каких-либо условий.

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

Множество разработчиков создали удивительные фоновые эффекты CSS и выпустили их бесплатно. Сегодня мы собрали 15 самых красивых из них. Посмотрите сами, что вы можете сделать с творческим умом и небольшим кодом!

НЕОГРАНИЧЕННАЯ ЗАГРУЗКА: электронная почта, администратор, целевая страница и шаблоны веб-сайтов

Всего от $16,50 в месяц!



См. Фон Pen Parallax Star в CSS от Saransh Sinha (@saransh) на CodePen.light

.

См. Фоновую анимацию градиента Pen Pure CSS от Мануэля Пинто (@P1N2O) на CodePen.light

.

См. Эффект матового стекла Pen CSS only от Gregg OD (@GreggOD) на CodePen.light

.

См. «Только перо CSS: падающая звезда» Юсуке Накая (@YusukeNakaya) на CodePen.light

См. Pen Tri Travelers от Нейта Уайли (@natewiley) на CodePen.light

См. Pen ColorDrops от Nate Wiley (@natewiley) на CodePen.light

См. Фоновый заголовок с ручкой от Jasper LaChance (@jasperlachance) на CodePen.

light

.

См. Pen Zero Element: DeLight от Кейта Кларка (@keithclark) на CodePen.light

См. анимацию светящихся частиц Pen CSS от Nate Wiley (@natewiley) на CodePen.light

.

См. Эффект прокрутки фонового изображения Pen Pure CSS от carpe numidium (@carpenumidium) на CodePen.light

См. Анимацию параллакса нескольких фоновых изображений Pen CSS от carpe numidium (@carpenumidium) на CodePen. light

См. эффект Pen Bokeh (CSS) от Louis Hoebregts (@Mamboleoo) на CodePen.light

.

См. экран входа в систему Pen Calm breeze от Lewi Hussey (@Lewitje) на CodePen.light

.

См. Градиент текста с эффектом пера от Diogo Realles (@SoftwaRealles) на CodePen.light

.

Креативно красивые фоновые эффекты CSS

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

No related posts.