Hover эффект. Сделайте сайты оживленными

Итак, вы готовы добавить свежего воздуха к дизайну своего веб-сайта? Cегодня мы хотим объявить о выпуске hover эффект (гибких опций наведения) для редактора Gridbox. Пришло время сделать небольшой перерыв в расширении функциональности приложения Store и сосредоточиться на улучшении основных функций редактора Gridbox. Хотите подробностей? Крутите вниз!

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

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

Только представьте, как преобразятся ваши сайты. Собственно, знаете что? Не нужно воображать. Мы подготовили для вас несколько примеров! Просто взгляните на скриншоты ниже.

Вам, наверное, не терпится узнать, как настроить такие эффекты на своем сайте? Поговорим об этом подробнее. Вы найдете кнопку-переключатель «Настройки при наведении» рядом с параметрами на вкладках «Дизайн» и «Макет».

Включив опцию Hover Settings, вам станут доступны следующие опции:

​

• установка стилей для состояния элемента по умолчанию;
• установка стилей при наведении курсора мыши;
• настройки перехода.

Идея очень простая! Во-первых, вам нужно настроить стили элементов для состояния по умолчанию. Затем вы настраиваете стили, которые будут применяться при наведении курсора мыши.

Параметры перехода позволяют установить плавную анимацию перехода от одного состояния элемента к другому.

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

• Продолжительность - позволяет установить продолжительность анимации;
• Easing - определяет, как рассчитываются значения между началом и концом перехода. Вам доступны 24 предустановленных кривых плавности;
• Advanced Easing Settings - позволяет установить собственную кривую Безье.

Установив разную длительность и параметры плавности для элементов, вы получите интересный результат. Так что не бойтесь экспериментировать с настройками перехода, и вы гарантированно привлечете внимание своих клиентов!

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

• Смещение по горизонтали - значение, при котором тень элемента смещается по горизонтали;
• Вертикальное смещение - значение, при котором тень элемента смещается по вертикали;
• Размытие - значение, при котором тень размывается, делая края тени более размытыми или более контрастными;
• Разброс - значение, которое расширяет или сжимает тень во всех направлениях.

Тени сетки сделают ваш сайт более реалистичным и придадут вашим страницам уникальный и индивидуальный вид. Настройте и убедитесь сами!

Мы знаем, что вам так не хватало все это время. Кнопка быстрого просмотра страницы, верно ?! Забудьте о привязке страницы к главному меню для просмотра. Теперь у вас есть простой и быстрый способ просматривать свою страницу во внешнем интерфейсе. Все, что вам нужно для просмотра отредактированной страницы, - это просто нажать кнопку «Просмотр страницы» на боковой панели навигации в редакторе Gridbox!

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

О, еще одно! Мы позаботились о скорости ваших сайтов. Так что можете быть уверены, стили CSS для эффектов наведения создаются только после их включения. Наслаждаться!