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

Стильный аккордеон Прибамбасы для сайта

Всем привет ! 

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

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

 

 

 

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

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

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

 

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

 

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

 

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

 

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

 

 

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

 

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

 

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

 

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

 

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

 

info-effect.ru
Добавить комментарий

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

  1. Сплетница

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

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

      Ответить