Kata Header Builder — это универсальный инструмент, позволяющий пользователям создавать и настраивать заголовки своих веб-сайтов в среде редактирования Elementor. Styler без необходимости знания программирования. Добавьте любимые виджеты, чтобы создать собственный шаблон. Разработанный шаблон будет считаться основным заголовком вашего сайта и будет загружен в начало. Он предоставляет интерфейс с функцией перетаскивания, множество вариантов настройки и предустановленные шаблоны, что делает процесс разработки заголовка интуитивно понятным и эффективным.
Внимание: Один из Kata Header BuilderУникальной особенностью является то, что виджеты располагаются рядом друг с другом, а не друг под другом.
Вот объяснение его особенностей и функций:
1. Редактор перетаскивания
Конструктор заголовков использует интуитивно понятный интерфейс с функцией перетаскивания, позволяя пользователям добавлять, упорядочивать и изменять размер таких элементов, как логотипы, меню, кнопки, панели поиска, значки социальных сетей и многое другое. Вы можете размещать эти элементы в определенных строках и столбцах для точного управления макетом.
2. Предопределенные шаблоны
Kata Предлагается несколько готовых шаблонов заголовков, которые можно импортировать и настраивать. Эти шаблоны адаптивны и разработаны для различных типов веб-сайтов, таких как блоги, интернет-магазины или корпоративные сайты.
3. Настройка макета
Вы можете настроить макет заголовка в соответствии со стилем вашего сайта:
Строки и столбцы: Добавьте несколько строк и столбцов для структурирования заголовка.
Настройки ширины: Отрегулируйте ширину заголовка: от полной до блочной.
4. Варианты стиля
Конструктор включает в себя комплексные инструменты для стилизации:
Интервал и отступы: Тонкая настройка полей и отступов для создания изысканного дизайна.
Цвета и фоны: Настройте цвета и градиенты или добавьте изображения в качестве фона.
книгопечатание: Настройте стили, размеры и насыщенность шрифтов для текстовых элементов.
5. Поддержка динамического контента
KataКонструктор заголовков интегрируется с функциями динамического контента WordPress, позволяя отображать персонализированный контент на основе профиля пользователя, например, кнопки входа/выхода или пользовательские приветствия.
6. Расширенные возможности
Мега меню: добавьте расширенные возможности навигации с помощью функции Mega Menu, отображающей категории, изображения и виджеты.
Пользовательский код: Вставьте фрагменты HTML, CSS или JavaScript для расширенной настройки.
Сторонние интеграции: Совместимость с популярными плагинами, такими как WooCommerce, позволяет легко добавлять значки корзины покупок или ссылки на учетные записи пользователей.
7. Экспорт и импорт
Сохраняйте свои шаблоны заголовков, чтобы использовать их на других сайтах или в разных разделах вашего текущего сайта. Вы также можете импортировать заголовки, которыми поделились другие пользователи. Kata предоставлено пользователями или разработчиками темы.
Доступ к конструктору заголовков
Чтобы получить доступ к конструктору заголовков, перейдите по ссылке wp-admin > Kata > Заголовок.
Теперь вы внутри. Kata Конструктор заголовков. По умолчанию откроется редактор Elementor, и вы увидите следующее: Kata Логотип, меню вашего сайта и несколько элементов заголовка, включая значок поиска, учетную запись пользователя, список желаний и корзину покупок. Слева вы можете увидеть виджеты Elementor, специально разработанные для... Kata Конструктор заголовков.
Эти виджеты обычно используются в шапке сайта. Однако вы можете использовать в шапке любые другие виджеты.
- Kata Логотип
- Kata Меню - Menu
- Kata Поиск
- Kata В корзину
- Kata Время
- Kata Гамбургер меню
- Kata Язык Switcher
- Kata Логин
- Kata Погода
Добавьте нужный вам элемент в раздел заголовка и начните проектирование.
Адаптивный заголовок
Дизайн и внешний вид заголовка должны различаться для разных устройств, поскольку у каждого устройства свой размер экрана. Для этого создайте отдельный раздел под заголовком, но спроектируйте его для небольших экранов.
Пункты меню обычно отображаются по-другому на мобильных устройствах. Переключатель заменяет пункты заголовка, так что при нажатии на него открывается всё меню.
Kata Элемент меню имеет опцию для адаптивного меню, которое после включения использует шаблон по умолчанию.
В настоящее время этот дизайн нельзя изменить. Поэтому, если вам нужно более продвинутое адаптивное меню, вам потребуется использовать... Kata Элемент «гамбургер-меню».
Создайте раздел под основным разделом и разместите его. Kata логотип, Kata Гамбургер-меню и другие его элементы.
Теперь вам нужно создать шаблон контента Elementor, который будет отображаться при нажатии на переключатель. Откройте меню WordPress в панели администратора и выберите «Шаблоны» > «Добавить новый», чтобы создать шаблон в виде раздела.
Установите высоту раздела Elementor на значение «По размеру экрана», чтобы он заполнял всю высоту экрана пользователя.
Теперь перетащите Kata Добавьте элемент меню в свой раздел.
Установите вертикальный макет и выберите меню, которое должно отображаться.
Теперь пора оформить это меню с помощью стилизатора. Перейдите на вкладку «Стиль» и откройте стилизатор оболочки, нажав на значок перед ней. Перейдите на вкладку «Текст» в стилизаторе и измените выравнивание текста на «По центру». Таким образом, пункты меню будут располагаться по центру.
Теперь нажмите «Общие» и откройте Styler для пункта меню, который вы хотите настроить.
После завершения обязательно сохраните шаблон, а затем перейдите в... Kata Выберите элемент «Гамбургер-меню» и выберите только что сохраненный шаблон.
Реализация переключаемого меню завершена.
Адаптивные настройки
Чтобы управлять тем, какой раздел будет отображаться на определенных устройствах или экранах определенного размера, используйте Адаптивные настройки в Элементоре.
Чтобы настроить параметры реагирования, выполните следующие действия:
1. Доступ к адаптивным настройкам
Выберите раздел, который вы хотите настроить.
На боковой панели Elementor перейдите к Фильтр меню.
Прокрутите вниз, чтобы найти Оперативный Раздел настроек.
2. Параметры видимости
Скрыть на рабочем столе: Скрывает выбранный элемент на устройствах с большими экранами (например, настольных компьютерах).
Скрыть на ноутбуке: Скрывает выбранный элемент на устройствах, классифицируемых как ноутбуки. Обычно это относится к экранам с разрешением от 992 до 1200 пикселей. Точный диапазон может зависеть от настроек пользовательских точек останова.
Скрыть на планшете в альбомной ориентации: Скрывает выбранный элемент при просмотре на планшетах в альбомной ориентации. Это применимо к экранам шириной от 768 до 992 пикселей.
Скрыть на планшете в портретном режиме: Скрывает выбранный элемент при просмотре на планшетах в портретной ориентации. Обычно применяется к экранам шириной от 600 до 768 пикселей.
Скрыть на мобильном устройстве в альбомной ориентации: Скрывает выбранный элемент на мобильных устройствах в альбомной ориентации. Обычно применяется к экранам с разрешением от 480 до 600 пикселей.
Скрыть в портретном режиме на мобильном устройстве: Скрывает выбранный элемент на мобильных устройствах в портретной ориентации. Обычно применяется к экранам с разрешением менее 480 пикселей.
Чтобы применить настройку, просто включите видимость каждого устройства.
3. Настройка макетов для разных устройств
Переключение в режим устройства: в верхней части панели Elementor щелкните значок адаптивного режима.
Выберите Рабочий стол, Таблетки или Mobile чтобы увидеть, как дизайн выглядит на каждом устройстве.
4. Тестирование и окончательная корректировка
Используйте кнопку «Предварительный просмотр», чтобы проверить, как сайт выглядит на разных устройствах.
Тщательно проверьте, чтобы убедиться, что все элементы правильно выровнены и видны в соответствии с вашими настройками.
