CSS3 hover effects, сделать эффект при наведении сайт wordpress

 Продолжаем разбирать самые интересные и полезные плагины для сайта wordpress. Сегодня вы узнаете как создать на своём сайте эффект при наведении на изображение или кнопку. С помощью простых шорткодов вы сможете создавать анимационные эффекты. При наведении курсора мыши на изображение или кнопку, будет появляться прозрачный слой и подзаголовок. В изображение можно будет добавлять ссылку, можно делать анонсы записей и т.д. (смотри gif скриншот)

 

css3 hover effects

 

 Установить плагин Hover Image Button вы сможете прямо из админ-панели wordpress. Перейдите на страницу: ПлагиныДобавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

 

плагин wordpress

 

 После установки и активации плагина, перейдите на страницу: НастройкиHover Image Button. Здесь вы сможете настроить основные параметры плагина.

 

— Color, здесь можно указать html код цвета при наведении.

— Opacity, здесь можно задать уровень прозрачности.

— Width, ширина кнопки или изображения по умолчанию.

— Height, высота кнопки или изображения по умолчанию.

— Code, можно добавить свой CSS код.

Сохраните изменения.

 

настройки плагина css3

 

 Чтобы добавить на сайт готовые анонсы записей или кнопки с эффектами, перейдите в Детали плагина. На вкладке «Описание», внизу страницы, у вас будут готовые шорткоды, которые нужно скопировать и добавить на страницу. В шорткоды нужно вставить свои данные.

 

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

— subtitle, здесь можно указать свой подзаголовок.

 link, здесь можете указать свою ссылку страницы, на которую будут попадать при нажатии на изображение.

— image, укажите здесь URL адрес изображения или кнопки.

 

шорткод на сайт

 

 Копируете шорткод, добавляете свои данные, вставляете шорткод на страницу, на сайте будут отображаться готовые анонсы. Всё готово !

 

CSS3 hover effects, сделать эффект при наведении сайт wordpress обновлено: Июль 15, 2016 автором: Илья Журавлёв
 
 

2 комментария

  • webster 13.11.2016 Ответить

    Отличный плагин, спасибо!
    Не могу разобраться как добавить этот код непосредственно в php файл ?

    • Илья Журавлёв 13.11.2016 Ответить Автор

      Есть специальный php код для вставки шорткодов.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


5 + 6 =



super-infa-top
Стрелка вверх