В этой статье я расскажу Вам как создать текст с авто прокруткой (или бегущую строку) с помощью Elementor и виджета HTML. Это очень стильный и полезный элемент, который можно использовать для привлечения внимания к важной информации на вашем сайте. Мы разберем все шаги, начиная от создания контейнера до детального объяснения CSS параметров.
Для чего нужен Auto Scrolling Text
Эффект бегущей строки привлекает внимание пользователей и делает сайт более динамичным и интерактивным. Его можно использовать для:
- Важных уведомлений и анонсов, чтобы посетители сайта не пропустили важную информацию.
- Промо-акций и специальных предложений, чтобы стимулировать интерес к вашим товарам или услугам.
- Выделения ключевых сообщений, которые должны быть заметны сразу при посещении страницы.
Создание контейнера и добавление виджета HTML
- Создание контейнера в Elementor:
- Откройте страницу в режиме редактирования с помощью Elementor и добавьте новый контейнер.
- Сделайте его на всю ширину, убедитесь, что padding для основного контейнера обнулен. Это позволит тексту корректно отображаться без лишних отступов.
- Добавление виджета HTML:
- Поместите в контейнер виджет HTML. Этот виджет будет служить основой для нашего прокручивающегося текста.
Размещение кода
Добавьте следующий HTML код в виджет HTML:
<div class=»scrolling-banner»>
<div class=»scrolling-banner__group»>
<span>Subscribe</span>
<i class=»fab fa-youtube scrolling-banner-icon»></i>
<span>Subscribe</span>
<i class=»fab fa-youtube scrolling-banner-icon»></i>
<span>Subscribe</span>
<i class=»fab fa-youtube scrolling-banner-icon»></i>
</div>
<div class=»scrolling-banner__group» aria-hidden=»true»>
<span>Subscribe</span>
<i class=»fab fa-youtube scrolling-banner-icon»></i>
<span>Subscribe</span>
<i class=»fab fa-youtube scrolling-banner-icon»></i>
<span>Subscribe</span>
<i class=»fab fa-youtube scrolling-banner-icon»></i>
</div>
</div>
Затем добавьте этот CSS код:
.scrolling-banner {
display: flex;
overflow: hidden;
height: 10vh;
user-select: none;
gap: 2rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
.scrolling-banner__group {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
min-width: 100%;
animation: scroll 15s linear infinite reverse;
}
.scrolling-banner__group span {
color: black;
font-size: 5vw;
font-weight: 800;
white-space: nowrap;
font-family: ‘Syne’, sans-serif !important;
transition: all 0.5s ease;
}
.scrolling-banner-icon {
color: red;
font-size: 5vw;
transition: all 0.5s ease;
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% — 2rem));
}
}
@media only screen and (min-width: 360px) {
.scrolling-banner__group span {
font-size: 6.5vw;
}
}
Мы прошли все этапы создания авто-прокручивающегося текста с использованием Elementor, от настройки контейнера и добавления HTML-кода до детальной кастомизации CSS-стилей. Этот динамичный элемент не только привлечет внимание ваших посетителей, но и сделает ваш сайт более интерактивным и современным.
Экспериментируйте с настройками анимации, шрифтами и цветами, чтобы добиться уникального визуального эффекта, который соответствует стилю вашего сайта.