Недавно один из наших читателей, у которого не было Pro версии Elementor, спросил нас, как он может добавить собственный CSS на свой веб-сайт.
Поскольку проблема немного сложнее, мы подумали, что с ней могут столкнуться несколько пользователей. Поэтому мы решили предоставить подробную статью о том, как туда добраться.
В этой статье мы покажем вам, как легко добавить собственный CSS на страницу или веб-сайт Elementor.
Три способа добавить собственный CSS на страницу или веб-сайт Elementor:
- Добавьте код CSS через элемент HTML.
- Через плагин Фрагмент кода.
- Использование настройщика тем Elementor
Метод 1. Добавьте CSS-код из HTML-элемента Elementor.
Используйте этот метод, если вы хотите добавить CSS только на одну страницу.
Шаг 1. Перетащите элемент HTML Elementor.
Вы можете разместить этот HTML-элемент в любом месте страницы, и он будет работать нормально.
Шаг 2. Щелкните значок "Изменить HTML".
Нажмите на иконку Редактировать html справа от HTML-элемента Elementor. При нажатии на нее в левой части экрана откроется панель инструментов редактирования HTML.
Шаг 3. Добавьте свой CSS-код
- Нажмите на вкладку Содержание и откройте раскрывающийся список HTML код.
- Поместите свой CSS-код в маяки.
Метод 2: пользовательский CSS для Elementor через плагин Code Snippets
Преимущества использования плагина Code Snippets:
- Если вы хотите изменить или обновить тему WordPress, всегда будет применяться CSS.
- Это наиболее удобный и эффективный способ добавления кода CSS, потому что вы можете включить или отключить код CSS, например плагины.
Шаг 1. Откройте меню расширений на панели инструментов.
Шаг 2. Добавьте новый плагин
Нажмите на кнопку добавлять »Для доступа к странице добавления новых плагинов.
- Ищите плагин " Фрагменты кода ".
- Установите его, нажав на кнопку установить сейчас после получения положительных результатов исследования.
Шаг 3. Активируйте плагин
Нажмите на кнопку активировать »После завершения установки активируйте плагин. Фрагменты кода.
Шаг 4. Откройте страницу плагина и добавьте фрагмент кода.
- Открыть меню Выдержки с вашей панели
- Нажмите кнопку Модерн добавить новый фрагмент кода
Шаг 5. Создайте фрагмент и активируйте его
- Дайте вашему фрагменту кода имя.
- Напишите свой код внутри тега. Этот код доступен для копирования ниже.
- Нажмите на кнопку Сохранить изменения Чтобы сохранить фрагмент кода.
- После сохранения CSS нажмите " активировать Чтобы активировать код CSS.
Скопировать код
add_action( 'wp_head', function () { ?>
<style>
//VOTRE CODE ICI
</style>
<?php } );Метод 3: используйте настройщик темы Elementor
Примечание: Будьте осторожны перед использованием этого метода, потому что, если вы измените тему, вы потеряете этот настраиваемый CSS..
Шаг 1. Откройте настройщик темы
Перейдите на свой веб-сайт и нажмите на опцию настройки на верхней панели навигации. Откроется окно настройки темы.
Шаг 2. Щелкните дополнительную вкладку CSS.
Это откроет страницу ввода CSS.
Шаг 3. Добавьте свой CSS-код
Хорошо ! Теперь вы знаете, как легко добавить собственный CSS на страницу или веб-сайт Elementor. Это сделает дизайн уникальных веб-страниц в Elementor Free более гибким.
Получите Elementor Pro прямо сейчас!
Откройте для себя также несколько премиальных плагинов WordPress
Вы можете использовать другие WordPress плагины чтобы придать современный вид и оптимизировать обработку вашего блога или веб-сайта.
Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.
1. FileBird
Вы когда-нибудь пытались управлять тысячами файлов изображений, видео или документов, которые вы загрузили на FTP-сервер WordPress? да или нет, не важно, главное знать, что Плагин Wordpress FileBird поможет вам с легкостью управлять вашими медиафайлами и сделает вашу библиотеку еще мощнее.
Его удобный пользовательский интерфейс и контекстное меню позволяют пользователям перетаскивать файлы в папки или иметь необходимые права для быстрого создания, переименования или удаления папок так же, как вы делаете это на своем компьютере.
С помощью этого плагина ваши медиафайлы будут систематизированы, и вы сможете легко выбрать изображение, чтобы вставить его на страницу или опубликовать его. Кроме того, этот плагин полностью совместим с наиболее популярными плагинами, особенно с WooCommerce, а также поддерживает большое количество языков.
Чтобы узнать больше, посетите Как управлять файлами и папками WordPress
Так что если вы хотите дать импульс управление медиатекой, то Плагин Wordpress FileBird может стать вашим секретным оружием.
скачать | Демонстрация | веб-хостинг
2. Ultimate WooCommerce Расширяемые категории
Ce Плагин Wordpress позволяет легко изменять длинные списки скучных категорий WooCommerce и заменять их различными уровнями подпунктов в аккордеонном меню.
Его основные функции: возможность активации и, наконец, то, что он работает автоматически (параметры не требуются!), Поддержка нескольких уровней категорий (категории, подкатегории и т. Д.), Выделение активная категория, открытие всех родительских категорий, если текущая категория внутри, совместимость с любыми WooCommerce тема, отвечая на желание, бесплатные обновления и очень активная поддержка клиентов.
скачать | Демонстрация | веб-хостинг
3. WavePlayer
Как можно догадаться по названию, WavePlayer — это плагин аудиоплеера, который принимает форму сигнала воспроизводимого аудиофайла. С помощью этого плагина вы можете размещать треки или просто интегрировать их с другими потоковыми сервисами.облачный хостинг, например SoundCloud.
Его также можно использовать для целей подкастинга и он предлагает другие функции, такие как: поддержка HTML5, адаптивный макет, интеграция с WooCommerce и т. Д.
Вы также сможете визуально создать список воспроизведения перед его публикацией. Еще одна важная особенность - скорость и эффективность.
скачать | Демонстрация | веб-хостинг
Рекомендуемые ресурсы
Узнайте о других рекомендуемых ресурсах, которые помогут вам создать и управлять своим сайтом.
- Как сжать и изменить размер изображения на WordPress
- Как иметь адрес электронной почты с вашим WordPress хостинг
- Как переименовать изображения на WordPress блоге
- Как найти ссылку на WordPress страницу входа
Заключение
Здесь ! Вот и все, что касается этого урока, мы надеемся, что он поможет вам бесплатно добавить собственный CSS в Elementor. Не стесняйся поделиться с друзьями в ваших любимых социальных сетях.
Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.
Если у вас есть предложения или замечания, оставьте их в нашем разделе Комментарии.
...
