Стильный аккордеон

Как сделать стильный аккордеон на сайте ?

Всем привет ! 

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

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

 

 

 

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

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

Скопировать шорткоды

 

Далее, в визуальном редакторе wordpress нажимаем на кнопку — Вставить шорткод.

 

Вставить шорткод

 

Далее, из списка функций выберите — Аккордеон.

 

Выбрать аккордеон

 

 

У вас откроется окно для создания аккордеона.

 

Создание аккордеона

 

Здесь в настройках всё просто, вам лишь нужно вставить все скопированные спойлера в поле Содержимое, и нажать на кнопку Вставить шорткод. Поле класс оставьте пустым, но если вы разбираетесь в css стилях, то можете добавить для аккордеона свой стиль. Всё, вот так просто и быстро создаётся аккордеон, больше времени уходит на создание спойлеров с содержимым, а сам аккордеон делается мгновенно.

 

Итак, на этом я буду заканчивать написание данной статьи, экспериментируйте с шорткодами, создавайте свой стиль, до новых встреч !

 

У вас остались вопросы ? пишите в Обратную связь, или оставьте комментарий к данной записи. Я всем отвечу !

 

Как сделать стильный аккордеон на сайте ? обновлено: Ноябрь 7, 2015 автором: Илья Журавлёв
 
 

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

  • Сплетница 11.07.2015 Ответить

    Илья, как всегда полезный пост! Есть задача посложнее )) Думаю, что многим новичкам может понадобиться решение одного вопроса: как добавить сайдбар на сайт, если в теме предустановлен один? К примеру, мне нужно добавить левый сайдбар, в сети я нашла необходимые коды и зарегистрировала его, но корректная установка на сайт дается тяжело. Второй день сижу… Ты сможешь разобраться и написать статью по этому вопросу? Новичков интересует пошаговое руководство: что, куда и как?

    • Илья Журавлёв 11.07.2015 Ответить

      Да, я постараюсь помочь тебе с данным вопросом, как обычно не обещаю, но сделаю всё что в моих силах. По моему плагин должен быть такой точно…в общем вызов принят…! )))

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

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


1 + 4 =



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