Як створити стильний блок з вкладками на сайті wordpress топ
Далі, виберіть в меню функцію - Виберіть.
Після чого у вас відкриється вікно для створення вкладок.
- Стиль. тут тільки стиль за замовчуванням. Як створюються різнокольорові блоки з вкладками я розповім трохи пізніше.
- Активна вкладка. тут потрібно вказати номер вкладки, яка буде відкрита за замовчуванням.
- Вертикально. якщо хочете щоб блок з вкладками був горизонтальним вкажіть НІ.
- Клас. залиште поле порожнім.
- Вміст. тут поки нічого не змінюємо. Тисніть на кнопку - Вставити шорткод.
Отже, а тепер я поясню як створити різнобарвний блок з вкладками, тобто з іншими квітами. Перейдіть по вкладці: Шорткоди - Приклади.
У списку основних прикладів виберіть - Виберіть, вертикальні вкладки, якорі вкладок.
У вікні, зійдіть в самий низ, і під прикладом Custom stules натисніть на кнопку - Отримати код. (На скріншоті в прикладі у мене буде інший колір блоку, так як я поміняв вже його стиль)
Далі. скопіюйте код, тільки без шорткодов su_tab. (Дивись фото)
Потім переходимо у вкладку - Налаштування.
У верхньому меню натискаємо на вкладку - Довільний CSS.
Вставляємо скопійований код в спеціальне чорне вікно для CSS коду. Тільки дивіться, з коду я прибрав зайву текст і символ style, порівняйте на скріншоті нижче, щоб у вас так само було. Після того як вставите код, натисніть на кнопку - Зберегти зміни.
Щоб поміняти кольори блоку на свої. просто вставте в код свої HTML-коду квітів, в коді вони відзначені фіолетовим кольором і вказані після значення - background-color. Дізнатися html-код кольору дуже просто, вбийте в будь-який пошуковик - html кольору і вам видадуть купу сервісів де можна дізнатися html код будь-якого кольору.
Для зміни розміру шрифту тексту, використовуйте значення - font-size: 1.3em. На початку коду для заголовків вкладок, а в кінці коду для тексту в змісті. Просто поміняйте значення на меншу або більшу, наприклад - 1.1em або 1.5em.
Дивіться ще!
Ощадбанк онлайн
Найкращі !
Інтернет для просунутих
iPhone 7 Plus RED Special Edition
Створити сайт безкоштовно!
природне просування
оптимізація сайту
прискорення сайту
захист сайту
Просування в соцмережах
Супер плагіни Wordpress
WooCommerce від А до Я!
Записи по Windows 10
Комп'ютер для чайників