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

Нарушаю собственный режим тишины, затворничества и потихоньку возвращаюсь.

В этом руководстве мы смотрим как устроены контейнеры в конструкторе сайтов и страниц Elementor.

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

К тому же, рано или поздно Elementor удалит старую структуру секций, рядов и колонок, и на контейнеры перейти придётся.

Ну что ж, почитая старые традиции говорю: Поехали!

Контейнеры Elementor, видеоруководство

Смотреть в VK
Смотреть на Rutube
Смотреть на Дзен

Что такое контейнеры

Что такое контейнеры в Flexbox

Для начала, давайте разберёмся что такое контейнеры в принципе, а потом уже пойдём в Elementor.

Есть такая вещь как каскадные таблицы стилей или CSS. А в CSS есть модуль Flexbox или на сленге — флексы. Флексбокс позволяет более гибко управлять элементами на странице с помощью простых свойств.

Флекс контейнер и то как он работает — это неотъемлемая часть флексов.

Философию Flexbox, свойства ему присущие и практику применения я разобрал в своём курсе «CSS Flexbox на каждый день». Поняв флексбоксы вы 100% поймёте как устроены сетки и макеты в Elementor и любых других конструкторах.

С программой и преимуществами курса вы можете ознакомиться по ссылке 👇🏻

Забирайте изучайте, а мы идём дальше.

Визуальное управление CSS Flexbox

Новички зачастую не понимают, что Elementor не какая-то машина по производству сайтов, а лишь надстройка на WordPress с помощью которой мы можем создавать дизайн визуально и либо совсем без кода, либо почти без кода.

Так вот, контейнеры в Элементор — это ни что иное, как визуальное представление CSS Flexbox. Где мы с помощью специальных опций задаём настройки поведения самого контейнера и его содержимого.

Как начать использовать контейнеры

Во-первых включить контейнеры в настройках

Для этого идём в Elementor > Настройки > вкладка Функционал. Флекс-контейнер выбираем Активен и сохраняем настройки.

Как включить контейнеры в Elementor

После этого родительские и дочерние секции из редактора исчезнут как класс, но то, что было создано с их помощью до этого, останется.

И тут резонный вопрос: а как перейти на контейнеры? Для этого есть конвертация.

Конвертация из секций в контейнеры

Откройте в Elementor собранную страницу или шаблон. Есть 2 способа перевести секции в контейнеры:

Индивидуально каждую секцию

Выбрать секцию. На вкладке Настройки появится кнопка Преобразовать. Нажмите её и Elementor сконвертирует секцию в контейнер создав её копию;

Конвертировать секцию в контейнер Elementor

Все секции в документе

Перейти в настройки страницы (иконка шестерёнки):

и нажать кнопку преобразовать.

Преобразование секций в контейнер Elementor

Elementor создаст копии всех секций сделав из них контейнеры.

После конвертации нужно пройтись и всё проверить, внести исправления где необходимо и затем удалить старые секции.

Обзор настроек контейнера

Контейнер — это родительский блок внутри которого размещаются элементы.

Макет контейнера

Как будет вести себя контейнер, как Flex или как Grid. В этом уроке мы выбираем Flex, а по Grid поговорим в другом.

Макет контейнера elementor

Размеры макета

Здесь, как и в секциях всё по-прежнему:

Размеры контейнера Elementor

Имейте в виду, что это не ширина контейнера в целом, а ширина контента внутри. Дело в том, что контейнер состоит из двух частей:

  1. Внешняя обёртка — растягивается во всю ширину независимо от заданной;
  2. Внутренняя обёртка — вот её ширину мы как раз и выбираем. Именно она ограничивает ширину контента.

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

Направление

Это аналог свойства флекс-контейнера flex-direction.

Управляет расположением дочерних элементов:

  1. По горизонтали или в ряд. Значение свойства row
  2. По вертикали или как колонка. Значение свойства column
  3. По горизонтали в обратном порядке. Значение свойства row-reverse
  4. По вертикали в обратном порядке. Значение свойства column-reverse
Направление содержимого контейнера Elementor

Распределение содержимого

Это аналог свойства флекс-контейнера justify-content. Оно отвечает за выравнивание дочерних элементов относительно основной оси контейнера. Всю философию осей я здесь объяснять не буду, отсылаю вас к своему курсу по флексам.

Однако, какие есть варианты выравнивания и как они работают разберём.

  1. Начало или значение свойства контейнера flex-start. Элементы выстраиваются в начале контейнера: слева или вверху;
  2. Центр или значение свойства контейнера center. Элементы выстраиваются по центру;
  3. Конец или значение свойства контейнера flex-end. Элементы выстраиваются в конце контейнера: справа или внизу;
  4. Расстояние между или значение свойства контейнера space-between. Элементы равномерно распределяются по контейнеру. Первый и последний элемент прижимаются к его краям;
  5. Расстояние около или значение свойства контейнера space-around. Элементы равномерно распределяются по контейнеру. Расстояние перед первым и после последнего элементов равно половине расстояния между всеми элементами;
  6. Равное расстояние или значение свойства контейнера space-evenly. Одинаковое расстояние между элементами, а также в начале и конце.
Распределение содержимого контейнера Elementor

Философия осей на пальцах

Я проговорил ранее, что начало может быть как слева, так и сверху и это зависит от настройки направления. Если выбрано направление:

Переключение направлений контейнеров Elementor

Переключаясь между настройками направления мы видим как иконки распределения содержимого и выравнивания меняют своё расположение. Это и есть краеугольный камень флексов если вы это поймёте вы поймёте как устроен Flexbox ну и как устроены контейнеры в Elementor.

Таким образом, если в Направлении выбран Ряд, то распределение содержимого работает по горизонтали. Если же выбрана Колонка — по вертикали.

Подробно о философии Flexbox я рассказывал в курсе. Забирайте 👇🏻

Выравнивание элементов

Это аналог свойства флекс-контейнера align-items. Оно отвечает за выравнивание дочерних элементов по второстепенной оси.

Если выбрать направление Ряд, то основной осью будет горизонталь, а второстепенной — вертикаль.

Если же выбрать направление Колонка, то уже наоборот основной осью станет вертикаль, а второстепенной — горизонталь.

Доступны следующие варианты выравнивания:

  1. Начало или на языке флексов flex-start. Элементы выстраиваются в начале контейнера: слева или вверху;
  2. Центр или значение свойства center. Элементы выстраиваются по центру;
  3. Конец или значение свойства flex-end. Элементы выстраиваются в конце контейнера: справа или внизу;
  4. Растянуть или на языке флексов stretch. Значение по умолчанию. Элементы заполняют весь контейнер по второстепенной оси.
Выравнивание элементов контейнера Elementor

Отступ между элементами

Это аналог универсального свойства флекс-контейнера gap. Отвечает за… что бы вы думали: отступы между элементами.

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

Отступ между элементами контейнера Elementor

Но если выбрать произвольное значение (иконка карандаша), то можно ввести размеры в формате: 40px 30px. Где первое значение будет отступом по вертикали (между рядами), а второе — по горизонтали (между колонками).

Произвольный отступ между элементами контейнера Elementor

Перенос рядов

Отвечает за то, будут ли элементы, которые не помещаются, переносится на следующие ряды.

По умолчанию все элементы будут пытаться уместиться в 1 ряд сжимаясь на сколько это возможно. Однако, если выбрать значение Переносить, то всё, что не помещается будет переноситься на следующие ряды.

Перенос рядов контейнера Elementor

Выравнивание содержимого

Эта опция появляется только если в предыдущей выбрано Переносить, так как она является аналогом свойства флекс-контейнера align-content. Оно выравнивает ряды флекс контейнера внутри, когда на второстепенной оси есть дополнительное пространство.

Свойство будет работать только когда свойство контейнера flex-wrap: wrap, а значит элементы располагаются в несколько рядов. В нашем случае, когда установлена настройка Переносить.

Варианты расположения такие же как у опции распределение содержимого, поэтому просто перечислю их без подробностей:

Выравнивание содержимого контейнера Elementor

Обзор настроек элемента

Если контейнер это родитель, то всё, что внутри него является элементами по отношению к нему.

У элементов во Flexbox есть свои свойства. В Elementor эти свойства вынесены во вкладку Расширенные.

Ширина

Отвечает за ширину элемента. Чаще всего вы будете оставлять по умолчанию или использовать Во всю ширину 100% и Произвольно. Лучше всего смотрите видеоруководство. Там я показал примеры использования ширины.

Ширина элемента контейнера Elementor

Индивидуальное выравнивание

Это аналог свойства флекс-элемента align-self — переопределяет выравнивание относительно второстепенной оси.

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

Доступны варианты:

Индивидуальное выравнивание элементов в контейнере Elementor

Порядок

Это аналог свойства флекс-элемента order. Отвечает за управление порядком отображения элемента.

По умолчанию flex-элементы располагаются в исходном порядке, как они прописаны в HTML или в нашем случае добавлены в виде виджетов. Однако свойство order управляет порядком, в котором они появляются в flex-контейнере.

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

Если говорить на языке Elementor, то у нас есть значения:

В произвольном можно задавать как положительные так и отрицательные значения. При отрицательном элемент переносится в самое начало в соответствии с цифрой, при положительном аналогично, но в самый конец.

Порядок элементов контейнера Elmenentor

Размер

Блок размер соответствует свойствам flex-grow и flex-srink. Первый отвечает за коэффициент увеличения, а второй — сжатия.

Увеличение

Суть свойства в том, что при указании значения, элемент пытается увеличиться на величину этого значения.

Чтобы увидеть эффект, всем элементам нужно задать Увеличение или его произвольное значение = 1. Для элемента же, который нужно увеличить, нужно задать коэффициент увеличения.

Так, если есть 2 кнопки и:

то вторая кнопка увеличится вдвое по отношению к первой.

Относительное увеличение элемента контейнера Elementor

Сжатие

В противоположность увеличению управляет сжатием элемента. Значения больше нуля задают его коэффициент и, соответственно степень сжатия.

Когда на уровне контейнера Перенос установлен как Не переносить, элементы, которые не помещаются будут сжиматься пока смогут.

Если задать одному элементу Сжатие = 3, то он сожмётся сильнее остальных в 3 раза. Если же задать Сжатие = 0, то элемент не будет сжиматься вовсе.

Сжатие элемента контейнера Elementor
Сжатие = 3
Отключение сжатия элемента контейнера Elementor
Сжатие = 0

Это удобно когда нужно, чтобы какой-то один элемент не сжимался, а остальное подстраивалось под экран.

Самый простой пример — изображение и текст в 1 ряд. Даже если задать изображению ширину 300 пикселей, в флексах это устроено так, что размер будет лишь пытаться стать таким, если позволяют условия. Скорее всего, изображение будет сжиматься и чтобы этого избежать нужно установить степень сжатия — 0.

Пример сжатия элементов контейнера Elementor

Параметры Контейнера в глобальных настройках

Находятся в глобальных настройках:

далее раздел Макет.

Глобальные настройки контейнеров Elementor

Ширина макета

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

Глобальная ширина макета контейнера Elementor

Внутренний отступ контейнера

По умолчанию установлен на 10px и по мне так эта настройка ни туда, ни сюда. Для колонок этот отступ полезен, а вот для контейнера который нужен как обертка для виджетов где-нибудь внутри колонки — нет.

Внутренний отступ контейнера Elementor

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

На проектах, которые делаю выставляю 0 по кругу, а потом где нужно задаю вручную.

Отступ между элементами по-умолчанию

Выставляется нужный минимальный отступ. Тот, что по умолчанию 20px, на мой взгляд оптимальный. Если нужно больше или убрать, лучше делать это на уровне контейнера.

Отступ между элементами контейнера Elementor по умолчанию

Преимущества и недостатки контейнеров в Элементор

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

Разумеется лучше посмотреть видео. Я там это наглядно показываю на примерах.

Преимущества контейнеров

Недостатки реализации контейнеров в Elementor

Практика сборки макетов

В видео я показал несколько примеров сборки макета:

Выводы и резюме

Стоит ли переходить на контейнеры? Те, кому было сложно разобраться конечно же скажут, ну их, буду продолжать использовать секции. Поверьте, Elementor постепенно будет подталкивать нас переходить на контейнеры, потому как это удобнее и эффективнее.

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

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

Ставьте ⭐️⭐️⭐️⭐️⭐️, делитесь статьёй в соцсетях и пишите комментарии.

Новый материал через неделю, поэтому не прощаемся. Хорошего дня!

9 марта 2021 года Elementor изменит тарифы и не в нашу пользу, его маму любил в кино водил.

Ладно, чтобы сбавить градус котла в котором бурлит известная субстанция стоит оговориться, что это будет только для новых клиентов. Для тех, кто находится на своём тарифе ничего не изменится и на тарифе Expert также и останется 1000 сайтов.

Однако, обо всём по порядку.

Что произойдёт с тарифами 9 марта

Для Expert, Studio и Agency Pro обещают добавить киты сайтов. Судя по всему будут наборы шаблонов, но в чём будет разница между тем, что есть сейчас пока не понятно.

Кстати, если переходить с тарифа Expert на Agency в период с 9 марта по 9 июня 2021, то можно будет получить 50% скидку на стоимость перехода.

Нужна ли VIP поддержка?

Лично мне — нет, а вы смотрите сами. Я не помню, когда последний раз писал в поддержку. Если и нахожу баг, то пишу на на их issue трекере в Github. Всё равно поддержка редко подсказывает что-либо дельное, а время ответа порой оставляет желать лучшего.

То ли дело мой закрытый клуб. Вступаете, платите один раз (по крайней мере пока) и задаёте вопросы в чате Telegram или группе ВК на русском. Не я отвечу, так другие участники точно. Записаться в клуб.

Для чего изменили тарифы

Говорят, что нужно расширять команду, на это нужны деньги. Нам то с вами от этого ни холодно ни жарко. Команду они уже давно расширяют, а обновления выходят всё реже.

Кучу всего нужно доработать, просьбы висят годами и до сих пор идёт погоня за wow-факторами. Похоже Elementor заигрался в Apple и пытается копировать их модель, чтобы выпускать обновления, которые создают инфоповоды, а потому выходят редко. Однако, про последние обновления могу сказать, что слабоватые инфоповоды.

Обыграно это естественно так, что вроде как они оптимизируют тарифы с учётом роста разработчиков, добавляют новые плюшки в виде VIP поддержки, бла бла бла, но по факту, раньше можно было взять лицензию на 1000 сайтов за 199$, а с 9 марта за эти деньги только на 25 сайтов. Вот такая Элементарная арифметика.

Что делать сейчас

  1. Если нет лицензии и думали приобрести, то сейчас самое время купить Elementor Pro Expert;
  2. Если есть лицензия, например Expert, то нужно её продлевать постоянно иначе потом придётся покупать заново на новых условиях;
  3. Если есть младшая лицензия и планируете расти, то нужно проапгрейдится до Expert до 9 марта.

Что бы я делал после 9 марта, если бы не было лицензии

Представители Elementor заявили, что они не особо заинтересованы в рынке СНГ. Мол он не такой денежный, там много пиратят и так далее.

Мой ответ такой: пусть тогда команду разработчиков поддерживает вечно зелёно-серыми та часть населения Земли, в которой они заинтересованны, а мы будем пользоваться бесплатной версией и дополнениями сторонних разработчиков, которые частично или полностью закрывают задачи, а некоторые перекрывают с головой.

Crocoblock

Хороший советский набор дополнений с русской поддержкой. Закрывает задачи разработчика на 1000%. В том числе, замещает большую часть функций, которые есть в Elementor Pro, а которую не замещает можно закрыть другими дополнениями.

Купить Crocoblock

Промокод: wplovers

Dynamic Content

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

Купить Dynamiс Content

Element Pack

Гигантский пакет виджетов, в том числе виджеты оформляющие сторонние плагины такие как Contact Form 7, WooCommerce, Easy Digital Downloads и т. д.

Купить Element Pack

Выводы

Разумеется, я буду пользоваться Elementor Pro потому как всё равно продлеваю да и условия с количеством сайтов для тех, кто на тарифе Expert пока не меняются.

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

Пишите в комментариях что думаете, только без мата.

Очень много запросов было по поводу того как сделать эффект пробегающего блика на кнопке да ещё и в конструкторе Elementor. Сам эффект блика на кнопке я взял из одного примера, немного доработал и интегрировал в Элементор.

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

Скачать архив готового виджета можно по этой ссылке и импортировать к себе.

HTML код будущей кнопки

<div class="flare-button-wrapper" style="text-align: {переменная выравнивания}">
  <a class="btn_box" href="#"><span class="btn_flare"></span>Заказать тест-драйв</a>
</div>

А это стили CSS

@-webkit-keyframes sheens {
    0%,
    79% {
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transform: rotateZ(60deg) translate(-5em, 7.5em);
        transform: rotateZ(60deg) translate(-5em, 7.5em)
    }
    80% {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: rotateZ(60deg) translate(-5em, 7.5em);
        transform: rotateZ(60deg) translate(-5em, 7.5em)
    }
    95% {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: rotateZ(60deg) translate(1em, -11em);
        transform: rotateZ(60deg) translate(1em, -11em)
    }
    to {
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transform: rotateZ(60deg) translate(1em, -9em);
        transform: rotateZ(60deg) translate(1em, -9em)
    }
}

@keyframes sheens {
    0%,
    79% {
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transform: rotateZ(60deg) translate(-5em, 7.5em);
        transform: rotateZ(60deg) translate(-5em, 7.5em)
    }
    80% {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: rotateZ(60deg) translate(-5em, 7.5em);
        transform: rotateZ(60deg) translate(-5em, 7.5em)
    }
    95% {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: rotateZ(60deg) translate(1em, -11em);
        transform: rotateZ(60deg) translate(1em, -11em)
    }
    to {
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transform: rotateZ(60deg) translate(1em, -9em);
        transform: rotateZ(60deg) translate(1em, -9em)
    }
}

.btn_box {
  background: #264894;
  background: -webkit-gradient(linear,left top,right top,from(#264894),to(#0778bf));
  background: linear-gradient(to right,#264894 0%,#0778bf 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#264894', endColorstr='#0778bf',GradientType=1 );
  -webkit-box-shadow: 0 8px 18px 0 rgba(55,129,208,.53) !important;
  box-shadow: 0 8px 18px 0 rgba(55,129,208,.53) !important;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-bottom: 4px solid #22529a;
  text-shadow: 0 1px 0 rgba(27,174,91,.004);
  background-position: 0 100%;
  background-size: 100%;
  color: #fff;
  -webkit-transition: .5s;
  transition: .5s;
  padding: 28px 35px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  display: inline-block
}

.btn_flare {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    overflow: hidden;
}

.btn_flare:after {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(229,172,142,0)),color-stop(50%,rgba(255,255,255,.7)),color-stop(50%,rgba(229,172,142,0)));
    background: linear-gradient(to bottom,rgba(229,172,142,0),rgba(255,255,255,.7) 50%,rgba(229,172,142,0));
    -webkit-transform: rotateZ(60deg) translate(-5em,7.5em);
    -ms-transform: rotate(60deg) translate(-5em,7.5em);
    transform: rotateZ(60deg) translate(-5em,7.5em);
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-animation: sheens 3s infinite;
    animation: sheens 3s infinite;
    z-index: 1;
}

.btn_box:hover {
    background-size: 150%;
  border-color: #22529a;
}

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

Важное исправление

В видео я допустил небольшую погрешность и сделал поле для ссылки простым текстовым полем. Вам нужно изменить тип атрибута с Текстовое поле, на Ссылка, обновить атрибут и обязательно нажать обновить виджет.

Unlimited Elements Link attribute

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

Ссылка кнопки с бликом и возможности динамики

Кстати, в архиве, который можно скачать в зелёном блоке выше, уже всё исправлено.

Где брать идеи эффектов

Идеи эффектов и сам код я часто ищу на сервисе Codepen. Потрясающее сообщество и платформа для демонстрации кода имеет библиотеку народного творчества, которое изумляет представленными решениями.

Напишите в комментариях какие ещё эффекты вы бы хотели реализовать и поделитесь этой статьёй на страницах в социальных сетях, своих и не только ????

Обновления статьи

Здесь буду публиковать все изменения, которые вносил в код. Архив по ссылке выше также обновляется по мере исправлений и дополнений.

11.12.2019 — Исправлено: одинаковое выравнивание для всех кнопок на странице

Здравствуйте, друзья! Многие спрашивали как сделать вертикальный разделитель в конструкторе сайтов Elementor. Делается он очень просто с помощью виджета Разделитель (Devider).

Добавляем виджет Разделитель и в нём задаём:

Вот, что получилось в итоге:

Напишите, какие фишечки вы хотели бы видеть в подобных коротких инструкциях!

Сейчас доступна новая инструкция по настройке целей с помощью Google Tag Manager. Там Google Analytics и Яндекс Метрика, подключение пикселей Facebook и Вконтакте, а также отправка событий в соцсети для сбора аудитория для таргетированной рекламы.

Отследить нажатие на кнопки и заполнение форм в Google Analytics и Яндекс Метрике, сделанных в Elementor/Pro можно с помощью кода:

<script type="text/javascript">
jQuery( document ).ready(function( $ ){
//Buttons
	$( '#email-button' ).on('click', function(){
		ga( 'send', 'event', 'button', 'click', 'Email' );
		ym(XXXXXX, 'reachGoal', 'header-email');
	});
	
	$( '#phone-button' ).on('click', function(){
		ga( 'send', 'event', 'button', 'click', 'Phone' );
		ym(XXXXXX, 'reachGoal', 'header-phone');
	});
	
//Forms
	$( '#demo-form' ).on('submit_success', function(){
		ga('send', 'event', 'Lead', 'Submit', 'GetDemo');		
		ym(XXXXXX, 'reachGoal', 'demo-form');
	});
	
	$( '#contact-form' ).on('submit_success', function(){
		ga('send', 'event', 'Lead', 'Submit', 'Contact');		
		ym(XXXXXX, 'reachGoal', 'contact-form');
	});
});
</script>

ВНИМАНИЕ! Яндекс изменил код отслеживания и он отличается от того, что вы видели в видео, но принцип остался прежним.

Новый вопрос с сайта ВАШ_САЙТ. Свяжитесь с лидом.<br>
<br>
<strong>Имя:</strong> [field id="name"]<br>
<strong>Email:</strong> [field id="email"]<br>
<strong>Сообщение:</strong><br>
[field id="message"]<br>
<br>
Удачи!

 

Русскому

Elementor’у

Быть!


С чего всё началось

Конструкторы страниц я искал с осени 2016. Провёл массу тестов прересмотрел кучу обзоров. В итоге, в апреле 2017 нашёл Elementor. Сразу понравилась его простота и скорость с которой я создал первую страницу. В конце мая записал первый обзор.

Шло время. Elementor, не без моей помощи, стал обрастать русскоязычным сообществом. Люди стали писать мне с вопросом «а что с русским?»

И вот, 2 сентября 2017 я решил сделать перевод сам и раздать его людям.

Александр Парфилов

Создатель проекта WPlovers

Если вдруг не смотрели обзор


Скачать перевод

Самое время купить

У Elementor есть Pro версия, в которую встроены  дополнительные полезные функции. Эта страница сделана в том числе с их помощью. Смотрите обзор!

Некоторые пользователи говорили мне: «я бы купил, но русского нет».
Можно покупать, уже есть.


Купить Elementor Pro

Как скачать перевод

Специально для этого делать ничего не нужно. Переводы устанавливаются и обновляются автоматически.

Вы можете отблагодарить меня за перевод:


Спасибо за перевод!

Переводы полностью готовы


100%

100%

Поддержать перевод

Следите за готовностью перевода в соцсетях!

Vk


Facebook


Telegram


Twitter

Оставьте свои
по переводу