миниатюра

Как создать стильный блок с вкладками на сайте wordpress ?

Здравствуйте ! 

Прочитав данную статью вы узнаете как сделать на своём сайте очень удобный и красивый блок с вкладками. Что это такое ? блок с вкладками позволит вам экономить место на вашем сайте, да и вообще это очень удобная и полезная функция, которая повысит юзабилити вашего сайта. Вкладки могут располагаться либо вертикально, либо горизонтально. Внутрь вкладок можно вставлять всё что угодно — текст, фото, видео, html, различные веб-элементы и т.д.

 

юзабилити

 

 

Итак, чтобы начать создавать данные блоки с вкладками, вам необходимо установить на свой сайт плагин — Shortcodes Ultimate. Плагин кстати этот очень интересный, он позволит вам создавать ещё очень много различных функций и веб-элементов для вашего сайта. Как установить плагин, а так же как работать с плагином, я уже рассказывал, читайте — Здесь.

Если вы уже установили плагин и узнали как с ним работать, тогда движемся дальше и приступаем к созданию блоков с вкладками. Откройте для редактирования страницу или запись, либо создайте новые, в меню визуального редактора нажмите на кнопку — Вставить шорткод.

 

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

 

 

Далее, выберите в открывшемся меню функцию — Вкладки.

 

САМСАЙ вкладки

 

 

После чего у вас откроется окно для создания вкладок.

 

настройки вкладок

 

Разберём настройки:

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

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

Вертикально, если хотите чтобы блок с вкладками был горизонтальным укажите НЕТ.

Класс, оставьте поле пустым.

Содержимое, здесь пока ничего не меняем. Жмите на кнопку — Вставить шорткод.

Смотрите, вместо — Заголовков 1, 2 и 3 вам нужно указать название своих заголовков, а вместо — Содержимое вкладки 1, 2 и 3 вам нужно добавить своё содержимое. Как я уже говорил в содержимое вкладок можно вставлять практически всё — текст, фото, видео, кстати в содержимое вы можете вставлять шорткоды функций, которые вы создадите как раз-таки с помощью плагина — Shortcodes Ultimate.

Так я поступил с примерами, которые я вам показывал в начале статьи. Видео, записи, фото, карта, галереи, всё это сделано благодаря шорткодам.

 

САМСАЙ содержимое

 

Итак, а теперь я объясню как создать разноцветный блок с вкладками, то есть с другими цветами. Перейдите по вкладке: Шорткоды — Примеры.

 

шорткоды примеры

 

В списке основных примеров выберите — Вкладки, вертикальные вкладки, якори вкладок.

 

основные примеры

 

В открывшемся окне спуститесь в самый низ, и под примером Custom stules нажмите на кнопку — Получить код. (на скриншоте в примере у меня будет другой цвет блока, так как я поменял уже его стиль)

 

получить код

 

Далее, скопируйте код, только без шорткодов su_tab. (смотри фото)

 

скопировать код

 

Затем переходим во вкладку — Настройки.

 

вкладка настройки

 

В верхнем меню нажимаем на вкладку — Произвольный CSS.

 

произвольный css

 

Вставляем скопированный код в специальное чёрное окно для CSS кода. Только смотрите, из кода я убрал лишний текст и символ style, сравните на скриншоте ниже, чтобы у вас так же было. После того как вставите код, нажмите на кнопку — Сохранить изменения.

 

САМСАЙ CSS

 

 

Чтобы поменять цвета блока на свои, просто вставьте в код свои HTML-кода цветов, в коде они отмечены фиолетовым цветом и указаны после значения — background-color. Узнать html-код цвета очень просто, вбейте в любой поисковик — html цвета и вам выдадут кучу сервисов где можно узнать html код любого цвета.

 

САМСАЙ цвета

 

Для изменения размера шрифта текста, используйте значение — font-size: 1.3em. В начале кода для заголовков вкладок, а в конце кода для текста в содержании. Просто поменяйте значение на меньшее или большее, к примеру — 1.1em или 1.5em.

 

Смотрите ещё, шорткод для цветного блока не такой как для обычного блока с вкладками, который мы делали через функцию — Вкладки. Шорткод для цветного блока вам нужно скопировать со страницы примеров, где вы копировали код. Копируете шорткод, вставляете его на страницу, указываете свои заголовки и содержание, публикуете страницу на сайте и всё, у вас отобразится цветной блок с вкладками, цвета блока будут такими, какие вы укажите в коде.

 

САМСАЙ шорткод

 

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

 

 

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

7 комментариев

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

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

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

      Привет ! пожалуйста…плагин действительно крутой, спасибо создателям.

  • Abdotya 17.06.2016 Ответить

    Спасибо за предельно ясное объяснение как сделать вкладки цветными! Вы меня очень выручили!!!

  • Любовь 02.12.2016 Ответить

    Привет, Илья! А мне объясни, пожалуйста)
    Я не пойму пока… я ищу плагин сделать длинный текст на странице компактненько…Мне это подходит? Этот плагин для страницы или всего сайта, извиняюсь, никак ни въеду сам))))
    Спасибо. Жду ответа

    А! Если этот плагин не подходит для 1 страницы, оставь здесь ссылку на твою рекомендацию, пожалуйста.
    Пока дальше поищу сама ещё что.
    А вообще здорово! Так много успел разобрать, много новых плагинов прикольных.
    СПАСИБО!)

  • Любовь 02.12.2016 Ответить

    В соседней теме нашла плагин по созданию колонок на странице. Он? Как думаешь?
    Или мне это делать через Tiny MCE который уже есть у меня?
    До утра подожду ответ))) не срочно)
    Спасибо!

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

      Смотря какие колонки хочешь сделать, с рамкой или без. Если без, то рекомендую плагин и Shortcodes Ultimate он лучший.

  • Любовь 02.12.2016 Ответить

    Спасибо

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

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


9 + 7 =



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