Сделать вкладки на сайт WordPress Shortcodes Ultimate


 Привет ! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта WordPress ! Сегодня вы узнаете как можно очень просто и быстро сделать на своём сайте вкладки. Вы сможете сделать любое количество вкладок. Вкладки отображаются в специальном контейнере. Вы сможете делать как горизонтальные, так и вертикальные вкладки. Вы сможете изменять CSS стили вкладок.

 

вкладки сайт

 

 Делать вкладки мы будет с помощью супер популярного и супер полезного плагина Shortcodes Ultimate. Установить данный плагин вы сможете прямо из админ-панели WordPress. Перейдите на страницу: ПлагиныДобавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

 

Shortcodes Ultimate

 

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

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

 

запись редактор

 

 Далее, у вас откроется окно с функциями плагина. Выберите и нажмите на вкладку – Вкладки.

 

вкладки шорткод

 

 Далее, у вас откроется окно для создания вкладок. Здесь вы сможете настроить вкладки:

 

– Стиль, имеется один стиль по умолчанию. В конце записи вы узнаете как менять CSS стили вкладок.

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

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

– Класс, можно добавить дополнительный CSS класс.

– Содержимое, здесь отображается шорткод, который вы добавите в содержание страницы.

В конце нажмите на кнопку – Вставить шорткод.

 

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

 

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

 

шорткод запись

 

 

Как менять CSS стили вкладок

 

 Далее, чтобы изменить стили вкладок, перейдите на страницу: ШорткодыПримеры. На странице “Основные примеры” нажмите на вкладку – Вкладки, вертикальные вкладки, якори вкладок.

 

пример вкладки

 

 Далее, у вас откроется окно с примерами. Спуститесь в самый низ, в последнем примере “Custom styles” нажмите на кнопку – Получить код.

 

пример вкладки стиль

 

 Далее, в открывшемся окне, скопируйте CSS стили вкладок, как показано на скриншоте.

 

стили вкладки

 

 Далее, перейдите на страницу: ШорткодыНастройкиПроизвольный CSS. Вставьте в чёрное поле CSS стили, которые вы скопировали из примера. В CSS коде вставьте свои html коды цветов и сохраните стили, нажав внизу на кнопку – Save changes.

 

настройки стиль

 

 Далее, снова перейдите на страницу примеров вкладок, в самый низ страницы. Теперь вам нужно только скопировать шорткод примера, вставить его на страницу, изменить содержание и заголовки.

 

css стиль шорткод

 

 Далее, скопированный шорткод примера вставляете на страницу редактирования записи или страницы. Указываете свои заголовки и содержание. Элементы шорткода лучше распределить по отдельным строкам. Обновите или опубликуйте страницу.

 

запись шорткод

 

 Всё готово ! На сайте будут отображаться готовые вкладки с вашими цветами, которые вы изменили в CSS стилях.

 

вкладки стиль сайт

 

 Остались вопросы ? Напиши комментарий ! Удачи !

 

Поделиться ссылкой:

https://info-effect.ru/

Сделать вкладки на сайт WordPress Shortcodes Ultimate обновлено: Январь 25, 2019 автором: Илья Журавлёв

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

  • Наталья 16.02.2019 Ответить

    Илья, а можно в шорткоде, который вставлен с помощью этого плагина уменьшить пробел между строчками? У меня очень большие получились, а SiteOriginCSS их не редактирует. Такой шорткод получился.

    • Наталья 16.02.2019 Ответить

      Ой, а он опубликовывается, как на сайте – сам код не показать Вам

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

      Почему SiteOrigin их не редактирует?

      • Наталья 17.02.2019 Ответить

        А, честно говоря, я и не знаю – разные вариации пробовала, не работает именно в шорткоде Список. В шорткоде Меню все изменяется.

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

          При редактировании в SiteOrigin, когда курсор мыши наводите на список, он выделяется для редактирования?

          • Наталья 17.02.2019

            Да, пишет .textwidget.
            Но при изменении margin в соседних колонках, где помещен текст через шорткод меню, отступы между строк меняются, а здесь – нет.

          • Илья Журавлёв 17.02.2019 Автор

            Шорткоды – Настройки – Произвольный CSS код, лучше туда стили добавить. Можно посмотреть файл shortcodes.css, чтобы увидеть стили по умолчанию. Вручную знаете как стили менять? Правой кнопкой мыши жмёте по элементу, в открывшемся окне жмите Исследовать элемент (в Яндекс), Посмотреть код (в Google). Справа откроется окно редактора кода, там будут указаны CSS стили. Вот оттуда можно скопировать стили списка и добавить к ним свои, если не указаны нужные. Там может не быть стилей, тогда файл стилей плагина нужно смотреть, там искать.

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

Ваш e-mail не будет опубликован.

 

Внимание! Вы соглашаетесь с Политикой конфиденциальности сайта info-effect.ru


Обратная связь

Политика конфиденциальности - Пользовательское соглашение