Web5X Блог

Блог о создании сайта, конструкторе сайтов

Web5X Блог

Блог о создании сайта, конструкторе сайтов

Поиск по блогу

Elementor Pro 3.1: Пользовательский код, Улучшения производительности и многое другое!

Обновлено: 18.02.2021
0 комментариев
elementor-pro-3.1

В нашей последней версии Elementor Pro 3.1 мы добавили новые функции, улучшили производительность и добавили дополнительные функции в один из наших самых популярных виджетов.

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

До сих пор добавление пользовательского кода в Elementor было невозможно без использования стороннего плагина или сложных корректировок кода в ваших тематических файлах. Все это меняется сегодня.

С помощью новой функции пользовательского кода вы сможете включать коды отслеживания (Yandex Metrika, Google Analytics, Facebook Pixel и т. Д.) мета-теги и другие внешние сервисы в различных областях страницы, таких как тег head и body.

Весь этот прекрасный пользовательский код будет доступен в одном месте – Elementor. Кроме того, вы сможете точно решить, какой код работает на каких страницах.

Как Работает Пользовательский Код

Пользовательский код теперь можно легко добавлять и управлять им в меню Elementor на панели управления WordPress. Как только вы добавите свой код, вы сможете выбрать местоположение (head, body start, body) и установить свой приоритет. Если вы зарегистрируете два скрипта в одном месте, например Google Analytics для Facebook Pixel, вы сможете установить приоритет, чтобы определить, какой из них загрузится первым. Если вы хотите, чтобы ваши скрипты Google Analytics загружались первыми, вы можете установить приоритет 1.

Вы можете редактировать свой код с помощью редактора кода с полным автозаполнением и настраивать условия отображения так же, как и для каждой части сайта Elementor (Верхний, нижний колонтитулы и т. д.). Как только вы закончите, опубликуйте свой код, и он будет жить на вашем сайте. Вы можете управлять и упорядочивать все фрагменты кода в разделе Пользовательский код (Custom Code) на вкладке Elementor.

Получите более быстрое время загрузки страницы

Недавно мы добавили Улучшенный Эксперимент по загрузке ресурсов, который фокусируется на оптимизации скорости сайта и подсчете очков. Улучшенная загрузка ресурсов оптимизирует производительность на интерфейсе, экономя время загрузки на каждую страницу, загружая виджеты JS-кода только тогда, когда это необходимо на странице, что может привести к уменьшению размера JS-файлов до ~100 КБ.

В принципе, мы будем загружать конкретные виджеты только в том случае, если они используются на странице. Нет Pro widgets = нет Pro widget JS файлов.

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

Новый виджет Подсветки Кода

В Elementor мы любим обучать и вдохновлять примерами кодирования и стиля (это верно, мы гики и гордимся этим! 🤓 ). Многие наши дизайнеры и разработчики просили о том же, и именно поэтому мы разработали новый виджет Подсветки кода.

Использование маркера кода или подсветки синтаксиса особенно полезно для тех из вас, кто ведет блог разработка или часто использует примеры кода в своем контенте. Если вы ищете способы сделать ваш код более читабельным и визуально совместимым с вашим сайтом без необходимости дополнительного плагина, вы захотите использовать наш новый виджет Подстветки кода.

Есть различные вещи, которые вы можете сделать с новым виджетом подсветки кода. Для начала вы можете выбрать свой синтаксис (язык кодирования), чтобы оптимизировать выделенный код. Вы также можете скопировать свой код в буфер обмена одним щелчком мыши и настроить свой дизайн. Выберите одну из шести различных тем дизайна и найдите стиль, который подходит для вашего сайта. Отображайте встроенную цветовую визуализацию в коде (на поддерживаемых языках, таких как CSS) и выделяйте определенные строки, на которые вы хотите обратить внимание в своем коде.

Создавайте более привлекательные заголовки С помощью воспроизведения по кругу, тайминга и многого другого

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

Сегодня мы представляем некоторые улучшения, которых вы так долго ждали:

Параметры времени (Timing options) – мы дали вам больше контроля, позволив установить продолжительность анимации и задержку между каждым циклом анимации.

Опция цикла (Loop option) – многие из вас просили нас разрешить вам “Заморозить” анимацию, когда она завершит свой цикл. Теперь вы можете настроить виджет на воспроизведение только один раз, подчеркнуть конкретное сообщение (пример – эффект подчеркивания) и сохранить его таким, чтобы ваши посетители видели анимацию только один раз.

Установите выбранный цвет для эффекта набора текста (Set a selected color for typing effect) – настраивайте и контролируйте свои эффекты набора текста, изменяя цвет/цвет фона, а также смешивая и сопоставляя цвета для достижения желаемого результата.

Динамический контент для вращающегося эффекта (Dynamic content for Rotating effect) – Создайте красивый шаблон одного сообщения, который показывает ваши динамические сообщения с анимированными возможностями.

Все новые возможности и улучшения доступны в Elementor PRO уже сейчас. Вы можете купить его если до сих пор не решились, так как сейчас самое время.

Остались вопросы?
Листай ниже или клик по ссылке выше. Там можно задать вопрос или почитать комментарии других.
Написать комментарий

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

Оставьте первый комментарий