Z индекс elementor что это
Z индекс elementor что это
Свойство z-index относится ко второй группе, которое несомненно вызывает больше смятения, чем любое другое. По иронии, однако, при полном понимании того, что такое z-index, он очень прост в использовании и часто является эффективным способом преодоления многих проблем макета.
В этой статье, мы рассмотрим что такое z-index, какие есть проблемы в его понимании, а также обсудим некоторые примеры его использования. Также рассмотрим разницу его обработки браузерами, особенно в предыдущих версиях Internet Explorer и FireFox.
Так что же это за свойство?
Свойство z-index определяет уровень размещения в стеке, глубины html-элемента. «Уровень глубины» означает позицию элемента по оси Z (как перпендикулярную осям X и Y экрана). Чем больше значение z-index, тем элемент будет выше.
Естественное расположение элементов
На странице, обычное размещение элементов (я имею в виду расположение вдоль оси Z) определяется несколькими факторами. Ниже представлен список этих факторов, начиная с самых нижних элементов. В этом списке подразумевается, что ни одному из элементов явно не присваивается свойство z-index.
Корректное применение свойства z-index, может изменить естественное расположение в стеке.
Конечно, порядок элементов в стеке не очевиден, до тех пор пока не потребуется отобразить элементы один над другим. Поэтому, чтобы увидеть обычный порядок элементов, на примере ниже применены отицательные внешние отступы (margin).
У этих элементов разные цвета фона и границ, а последние два смещены за счёт установленного отрицательного свойства margin. Таким образом видно естественное размещение элементов, каждый следующий находится «выше» предыдущего. У этих элементов не установлено свойство z-index, их порядок размещения в стеке является естественным.
Где могут быть проблемы?
Давайте рассмотрим самую популярную проблему у начинающих разработчиков. Дело в том, что свойство z-index работает только с элементами, для которых свойство position установлено в absolute, fixed или relative.
Чтобы продемонстрировать это, выведем те же самые три элемента, но с установленным свойством z-index, чтобы попытаться изменить порядок расположения вдоль оси Z.
Установим свойство position в relative и посмотрим что получилось:
А вот теперь у нас получился ожидаемый результат. Порядок элементов изменился, серый элемент находится над всеми, а коричневый в самом низу.
Синтаксис
Ниже представлен CSS для третьего примера, где свойство z-index применяется корректно:
И снова повторюсь, специально для новичков в CSS: свойство z-index не будет работать, пока вы не установите свойство position.
Использование в javaScript
Вы можете повлиять на свойство z-index динамически, используя javaScript. Синтаксис похож на обычный для большинства CSS свойств, с использованием camel-нотации для замены дефиса в свойствах CSS.
Некорректная реализация в IE и FireFox
В некоторых случаях, в IE6, IE7 и FireFox 2, встречается неверная реализация свойства z-index.
Элемент select в IE6
В Internet Explorer 6, элемент select является windows-контролом, по этой причине он всегда отображается поверх всех элементов, игнорируя обычный порядок размещения, а также свойства position и z-index. Проблема показана на картинке ниже:
Элемент select находится в документе первым, его свойство z-index равно 1, а position установлен в relative. Div выводится после select, а его z-index равен «9999». Исходя из всего этого, div должен находится над select, как это происходит в других браузерах:
Если вы просматриваете эту статью не в IE6, вы увидите что div расположен выше select.
Позиционированные родители в IE6/IE7
Internet Explorer версий 6 и 7 некорректно сбрасывают контекст стека в отношении ближайшего позиционированного родителя. Чтобы продемонстрировать эту ошибку, мы опять отобразим два div-а. Но в этот раз мы обернём первый из них в позиционированный элемент.
Если же вы откроете эту страницу в IE6 или IE7, вы увидите что синий элемент перекрывает серый. Это происходит по причине того, что серый элемент обёрнут в ещё один div, которому position установлен в relative.
Оба браузера «сбрасывают» контекст стека в относительно позиционированных элементах, хотя и не должны этого делать. У серого элемента z-index больше, чем у синего, поэтому он должен отображаться выше. С остальными браузерами такой проблемы нет.
Отрицательные значения в FireFox 2
В FireFox 2, элементы с отрицательным z-index находятся под контекстом стека, вместо того, чтобы быть над фоном и границами элемента, который формирует контекст стека. Пример вы можете увидеть на картинке:
Ниже представлена html-версия
Как видите, фон серого элемента (который формирует контекст стека) находится под синим, а текст (который является inline-элементом в сером элементе) находится над ним, что соответствует правилам естественного расположения, описанным выше.
Примеры использования
Кроме того, вы можете посмотреть как работает z-index здесь (взято отсюда )
Объясняем Z-index: как позиционировать элементы с помощью CSS
May 30, 2018 · 4 min read
CSS свойство под названием z-index всегда вызывало у меня страдания.
На первый взгляд принцип его работы звучит просто: элементы с более высоким значением z-index отображаются поверх элементов с низким z-index. Тем не менее, я часто терпела фиаско, потому что на деле оказывалось, что это правило совершенно не работает.
Наконец я решила, что прошла уже достаточно длинный путь проб и ошибок и что пора наконец основательно изучить этот вопрос. Я надеюсь, что эта статья поможет и вам разобраться, почему свойство z-index может работать не так, как ожидается.
Положение элементов по умолчанию
Дл я начала давайте разберемся с тем, как браузер по умолчанию позиционирует элементы, когда не указаны значения z-index:
Непозиционируемый элемент — это элемент со значением position: static по умолчанию. Позиционируемый элемент представляет собой элемент с любым другим значением свойства position. Примерами других значений являются: absolute (абсолютное), relative (относительное), sticky(приклеенное) или fixed (фиксированное).
Мы определили зеленый квадрат в конце документа. Тем не менее, он появляется не впереди, а позади всех остальных элементов, потому что у него не задано позиционирование.
Позиционирование с применением z-index
Если теперь мы хотим изменить порядок расположения элементов, мы можем использовать CSS-свойство z-index. Элемент с более высоким z-индексом будет отображаться перед элементом с более низким z-индексом. Следует отметить, что z-индекс работает только с позиционируемыми элементами.
Перед синим квадратом отображается оранжевый квадрат, потому что он имеет более высокий z-index.
Контекст наложения (stacking order)
Предположим, что мы добавили еще один позиционированный квадрат в макет, который мы хотим разместить за розовым квадратом. Мы обновляем наш код, чтобы он выглядел следующим образом:
Наш розовый квадрат отображается перед фиолетовым, как и ожидалось, но что же случилось с оранжевым квадратом? Почему он внезапно оказался за синим, хотя у него более высокий z-индекс? Это связано с тем, что добавление значения z-индекс в элемент формирует то, что называется контекстом наложения.
Розовый квадрат имеет значение z-index, отличное от auto, что создает новый контекст наложения. Появление контекста наложения влияет на то, как отображаются дочерние элементы.
Можно изменить порядок наложения дочерних элементов розового квадрата. Однако их z-индекс имеет смысл только в контексте наложения. Это означает, что мы не сможем расположить оранжевый квадрат перед синим, потому что они находятся в разных контекстах наложения.
Если мы хотим, чтобы синий и оранжевый квадраты были частью одного и того же контекста наложения, мы можем сделать синий квадрат дочерним элементом розового квадрата. Это переместит синий квадрат за оранжевый.
Контекст наложения формируется не только при применении свойства z-index. Существует несколько других свойств, которые заставляют элементы создавать контексты наложения. Некоторые примеры: filter (фильтр), opacity (непрозрачность), and transform (трансформация).
Вернемся к нашему предыдущему примеру. Синий квадрат снова связан с розовым. На этот раз вместо добавления свойства z-index розовому квадрату мы применим к нему фильтр.
Оранжевый квадрат по-прежнему имеет более высокий z-индекс, чем синий, но по-прежнему отображается позади него. Это связано с тем, что значение фильтра заставило розовый квадрат создать новый контекст наложения.
Резюме
Используя z-индекс для позиционируемых элементов, мы можем изменить порядок наложения элементов, заданный по умолчанию.
При применении определенных CSS-свойств элемент может формировать контекст наложения. Значения z-индекса имеют смысл только в одинаковом контексте наложения.
Для получения дополнительной информации о принципе работы свойства z-index, рекомендую вам ознакомиться с этой статьей. Именно она вдохновляла меня в процессе работы над этой публикацией.
Как на самом деле работают z-index
Наверное, почти каждый из нас хоть раз в жизни использовал свойство z-index. При этом каждый разработчик уверен, что знает, как оно работает. В самом деле — что может быть проще операций с целыми числами (сравнение и назначение их элементам). Но всё ли так просто, как кажется на первый взгляд?
Возможно, информация, которую я расскажу ниже, на самом деле тривиальна. Однако я уверен, что многие найдут её для себя полезной. Те же, кто уже о ней знал, смогут использовать данный текст как шпаргалку в трудную минуту. Итак, добро пожаловать под кат.
На самом деле человек обычно начинает пытаться разобраться в какой-то новой для себя области в трёх случаях: если встречает неожиданные результаты при работе и не понимает, что происходит; если встаёт потребность выйти за рамки и взглянуть на предмет под другим углом; и наконец, просто из спортивного интереса.
Мой случай явно не относится к третьей категории. Сначала я несколько раз в жизни сталкивался с первым сценарием при работе над разными проектами; однако до конца так и не разбирался в вопросе из-за лени и отсутствия наглядных и понятных материалов с примерами. А затем в начале этого года начал писать веб-движок, что заставило начать читать стандарты и вообще смотреть, как работают разные нетривиальные вещи в популярных браузерах, и главное, почему они работают именно так.
Начнём с простого. Что такое z-index и для чего он нужен?
Очевидно, что это координата по оси Z, задаваемая для некоторого элемента. Ось Z при этом направлена в сторону пользователя. Больше число — ближе элемент.
Почему числа z-index целые? Всё просто. Диапазон практически не ограничен сверху и снизу, поэтому нам нет нужды использовать дробные значения. Поскольку реальный монитор не имеет третьего измерения (мы можем его лишь имитировать), нам нужна некоторая безразмерная величина, единственная задача которой — обеспечивать сравнение элементов (то есть упорядоченность множества). Целые числа прекрасно справляются с этой задачей, при этом они нагляднее вещественных.
Казалось бы, этих знаний достаточно, чтобы начать использовать z-index на страницах. Однако, не всё так просто.
Похоже, что-то пошло не так. Мы сделали у первого блока z-index больше чем у второго, так почему же он отображается ниже? Да, он идёт по коду раньше — но казалось бы, это должно играть роль только при равных значениях z-index.
На этом месте самое время открыть стандарт CSS2.1, а точнее приложение к нему, касающееся обработки контекстов наложения. Вот ссылка.
Из этого небольшого и очень сжатого текста можно сразу вынести много важной информации.
Процесс отрисовки элементов поддерева контекста можно разбить на несколько стадий (первые две из которых — непосредственно вывод фонового цвета и фонового изображения текущего элемента, задающего контекст).
Итак, рассмотрим весь список.
3. Вывод дочерних контекстов с отрицательными z-index
4. Вывод дочерних блочных элементов в нормальном потоке (только фоны)
5. Вывод дочерних float элементов
6. Вывод контента элементов в нормальном потоке: инлайновые и инлайново-блочные потомки, инлайновый контент внутри блочных потомков, включая строки текста *
7. Вывод дочерних контекстов с нулевыми и auto z-index **
8. Вывод дочерних контекстов с положительными z-index
* в порядке обхода дерева depth-first
** для контекстов с z-index: auto все дочерние контексты считать потомками текущего контекста, то есть «вытаскивать» их наверх на текущий уровень
Уже не так просто, правда? Можно примерно проиллюстрировать данную схему следующей картинкой:
Также есть возможность открыть пример на codepen и поиграться с ним своими руками.
Но и это ещё не всё. Казалось бы, алгоритм и так достаточно сложен: нам нужно сперва подтянуть дочерние контексты внутри псевдоконтекстов (помните про значение auto?), затем произвести сортировку для двух списков z-index, выстроив их в числовой ряд, потом пройти по дочерним элементам: сначала по блочным в нормальном потоке, потом по плавающим, затем по инлайновым и инлайново-блочным…
Но тут нас ждёт целых два сюрприза. Первый, если повезёт, нас не коснётся. Связан он с тем, что фон с рамками и содержимое блочных элементов выводятся на разных стадиях — но если наш самописный движок для каждого текстового узла создаёт автоматически инлайновый элемент, то с этим всё будет ок, они естественным образом будут выведены позже.
А вот второй совсем не так тривиален. Заключается он в пометке
For each one of these, treat the element as if it created a new stacking context, but any positioned descendants and descendants which actually create a new stacking context should be considered part of the parent stacking context, not this new one.
у float и inline-block/inline (но не block!) элементов.
Что же это означает на практике? А означает это то, что их мы должны обработать так же, как и элементы с z-index: auto. То есть во-первых, обойти их поддеревья и вытащить оттуда дочерние контексты, поместив их на текущий уровень. Но в остальном мы должны обращаться с ними как с элементами, задающими свой контекст. Это означает, что всё поддерево внутри них, вытянувшееся после обхода в линейный список, должно остаться атомарным. Или, иными словами, мы не можем перетасовывать порядок элементов так, чтобы потомки такого элемента «всплыли» выше своего родителя. И если для дочерних контекстов — это интуитивно ясно (потому что алгоритм рекурсивный), то вот здесь — уже не настолько.
Поэтому приходится при написании кода движка идти на хитрость с тем, чтобы элементы float, inline и inline-block до до поры не раскрывали своих потомков (за исключением дочерних элементов с позиционированием и z-index, формирующих контексты наложения), а потом запускать для них всю функцию рекурсивно, но уже наоборот с учётом того факта, что дочерние контексты должны при обходе пропускаться.
Несколько примеров для демонстрации этого явления:
Здесь дочерний элемент имеет z-index и позиционирован. Он «всплывает» наверх, но выводится под синим квадратом, поскольку элементы с отрицательными z-index выводятся на стадии 3, а float элементы — на стадии 5.
В данном примере второй элемент (зелёный) выводится раньше первого (голубого), и поэтому ниже. Однако дочерние элементы вытягиваются наверх (поскольку задают собственные контексты), поэтому в данном случае они идут в том же порядке, в котором они идут именно в исходном дереве (порядок их предков после перестановки не важен!). Если у первого дочернего элемента выставить z-index равный 1, то получим уже такую картинку:
Добавим больше элементов.
Тут дочерние контексты вытаскиваются и из float-ов, и из обычных блоков, порядок при этом сохраняется таким, как был в исходном дереве.
Наконец, последний пример:
Как видим, «выпрыгнуть» из block элемента — в отличие от остальных случаев вполне возможно, и поскольку у нас всплывает inline-block элемент, он выведется последним по счёту в данном документе.
Как видим, z-index позволяет осуществлять множество интересных трюков (чего стоит хотя бы скрытие элемента под его непосредственным родителем с помощью отрицательного z-index у потомка). Надеюсь, данная статья оказалась вам чем-то полезна.
То, что вам никто не говорил о z-index
Проблема z-index в том, что многие просто не понимают, как он работает.
Всё, описанное ниже, есть в спецификации W3C. К сожалению, не все её читают.
Описание проблемы:
Ниже представлен HTML код с базовым css оформлением.
Задача: сделать так, чтобы красный
Хм, что-то тут не так. Причем тут вообще прозрачность? Каким образом она может влиять на порядок перекрытия элементов? Вы думаете так же? Добро пожаловать в клуб!
Надеюсь, во второй части статьи всё встанет на свои места.
Порядок наложения элементов:
Z-index кажется очень простым: чем значение больше, тем ближе к нам будет элемент, т.е. элемент с z-index 5 будет перекрывать собой элемент с z-index 2, верно? На самом деле нет.
Это и есть проблема z-index. Всё кажется настолько очевидным, что большинство разработчиков не уделяют достаточно времени для изучения этого вопроса.
Любой элемент в HTML документе может быть либо на переднем, либо на заднем плане. Это известно всем. Правила, задающие этот порядок четко описаны в спецификации, но, как я уже говорил выше, не все в полной мере их понимают.
Если свойства z-index и позиционирование не заданы явно, всё просто: порядок наложения равен порядку следования элементов в HTML. (На самом деле всё немного сложнее, но пока вы не будете использовать отрицательные значения отступов для перекрытия строчных элементов, вы не будете сталкиваться с крайними случаями)
Если вы явно указываете позиционирование элементам (и их детям), то такие элементы будут перекрывать собой элементы без явно заданного свойства позиционирования. (Говоря «явно указываете позиционирование» – я имею ввиду любое значение, кроме статического, например: абсолютное, или относительное).
И наконец, случай, когда z-index задан. Для начала, вполне естественно предполагать, что элементы с большим z-index будут находиться выше элементов с меньшим z-index, а любой элемент с установленным z-index будет находится выше элемента без установленного z-index, но это не так. Во первых, z-index учитывается только на явно позиционированных элементах. Если вы попробуете установить z-index на не позиционированный элемент, то ничего не произойдет. Во вторых, значения z-index могут создавать контексты наложения. Хм, всё стало намного сложнее, не так ли?
Контекст наложения
Элементы с общими родителями, перемещающиеся на передний или задний план вместе известны как контекст наложения. Понимание контекста наложения является ключом к пониманию z-index и порядка наложения элементов.
Каждый контекст наложения имеет свой корневой элемент в HTML структуре. В момент формирования нового контекста на элементе, все дочерние элементы так же попадают в этот контекст и занимают своё место в порядке наложения. Если элемент располагается в самом низу одного контекста наложения, то никаким мыслимым и немыслимым образом не получится отобразить его над другим элементом в соседнем контексте наложения, располагающимся выше по иерархии, даже с установленным z-index равным миллиону.
Elementor для WordPress — Обзор функционала и настроек плагина
Видеоверсия статьи
Вот и пришло время, когда сайты можно создавать практически без знаний HTML и CSS кода. И уже тем более без знания программирования. Да еще и практически бесплатно. «Кайфуши ваще. Прям капец» (с)
Для того, чтобы это осуществить, нам нужен PageBuilder плагин Elementor и WordPress. Сегодня поговорим именно про плагин.
Что такое Elementor
Elementor — это плагин, который превращает создание сайта, страницы или статьи на WordPress в конструктор. При этом практически не надо знать ни HTML, ни CSS языки. Практически, так как понимать разницу между H1, H2, div, span и так далее, вам всё-таки нужно знать. Но это основы HTML языка, так что узнать их в любом случае надо будет. О, а вот и тема для новой статьи 🙂
Сам Elementor разбивает страницу на блоки (или секции, говоря языком плагина), в каждый из которых можно добавлять один из предустановленных элементов. Количество доступных элементов зависит от версии плагина (бесплатная Free или платная Pro), от установленной темы (некоторые темы созданы специально под Elementor) и от дополнительных плагинов.
Элементы и функционал бесплатной и платной версии я разберу в отдельных статьях, сегодня рассмотрим то, как вообще начать им пользоваться и рассмотрим общие настройки обеих версий.
Эту статью, как и все остальные на этом сайте (да и весь сайт тоже) я делаю именно в элементоре.
Что еще может служить лучшей демонстрацией его работы?)
Как установить Elementor на WordPress сайт
Так как Elementor — это плагин, то его установка ничем не отличается от установки любого другого плагина.
Следовательно, чтобы его установить делаем следующее:
Заходим в админку сайта
Находим в столбце слева вкладку Плагины
Сверху нажимаем на кнопку «Добавить новый«
В поле поиска пишем Elementor
Возле плагина «Elementor — Конструктор сайтов и страниц» нажимаем на кнопку « Установить «
Потом нажимаем на кнопку « Активировать «, которая появится на месте кнопки « Установить «
Ниже то же самое, только картинкой.
Если вы всё сделали правильно, то теперь в боковом столбце появились 2 новых пункта «Elementor» и «Шаблоны». А при создании новой страницы или записи появилась кнопка «Редактировать в Elementor», которая переключает редактирование страницы из уже классического редактора Gutenberg на редактор Элементор.
На скриншоте ниже я отметил эти поля рамками. Если у вас всё именно так, то теперь давайте разберемся что к чему в самом редакторе.
Из чего состоит редактор Elementor в WordPress
После того, как вы нажмете на кнопку «Редактировать в Elementor», перед вами откроется сам редактор Элементор. Он состоит из 2 частей: Слева панель администратора, справа непосредственно редактируемая страница сайта.
Разберем обе части отдельно.
Панель администратора Elementor
Панель доступных элементов
Под цифрой 1 на скриншоте ниже, находится панель элементов, доступных для использования. Она открыта по умолчанию. Чтобы использовать нужный, достаточно просто зажать его левой кнопкой мыши и перетащить в нужное место на странице. Причем их можно перетаскивать как в пустое поле (там, где плюсик и надпись «Перетащите виджет»), так и в любое другое место
Настройки Elementor
Под цифрой 2, находятся настройки сайта и настройки Elementor. Пройдемся по ним всем.
Глобальные цвета
На вкладке «Глобальные цвета» можно выбрать цвет текста для всех основных элементов на странице.
Стандартные шрифты
На вкладке «Стандартные шрифты» можно выбрать шрифт и его насыщенность для основных элементов, для которых мы выше настраивали цвета.
Если что, на этом сайте я использую шрифт Roboto.
Стили темы
В конце марта 2020 года, то есть уже после выхода первой версии этой статьи, вышел elementor для wordpress версии 2.9.7, в которой появились глобальные стили темы. То есть какая бы тема у вас не была установлена, через elementor можно изменить внешний вид основных его элементов.
Например, задать фон для всего сайта в виде одного цвета, одной картинки или градиента из 2 цветов. Также задать настройки цвета, размера и шрифт для основного текста, ссылок и заголовков H1-H6.
Также настроить внешний вид всех кнопок на сайте, полей для форм обратной связи или заказа (в случае, если у вас интернет-магазин), а также изображений.
С изображениями вообще отдельная история. Ладно, если вы создаете сайт фотографа и хотите, чтобы все изображения были в едином стиле. Как в том же Instagram. Но проблема в том, что здесь мы задаем настройки вообще для всех изображений, в том числе и для логотипа в шапке сайта, фотографии профиля автора, изображений в элементах. То есть настраивать здесь изображения стоит в очень редких случаях. Например, если хотите, чтобы все изображения на сайте были черно-белыми, и только при наведении на них становились цветными. Делается это через фильтры CSS.
Ну а пользовательские CSS доступны только в PRO версии плагина. Как и любые другие уникальные настройки темы под себя.
Айдентика сайта
Отдельно хочу остановиться на айдентике сайта.
Название сайта — это то название, которое отображается в открытой вкладке браузера и в поиске, если не заданы другое в настройках SEO. Может использоваться в шапке и подвале сайта, чтобы люди понимали, куда они зашли.
Описание сайта — всё аналогично названию, просто раскрывает название сайта.
Логотип сайта — изображение, которое можно использовать вместо вывода названия и описания на самом сайте, но не во вкладке и в поиске.
Favicon сайта — иконка сайта, которая отображается во вкладке браузера перед названием сайта. На телефонах так же служит иконкой вашего сайта, если закладку на неё сохранили на рабочий стол.
Лайтбокс
Лайтбокс (Lightbox) — это всплывающее окно, чтобы можно было лучше рассмотреть изображение. Вот нажмите на картинку слева (или ниже, если вы с телефона) и увидите как он работает. Если бы лайтбокса не было, то изображение открывалось бы в этом или отдельном окне. А это не айс.
Теперь разберемся с настройками.
Лайтбокс изображений — включение и отключение лайтбокса по умолчанию для всех изображений на сайте (эту настройку можно менять у каждого изображения отдельно, то есть у большинства изображений включен лайтбокс, а у некоторых мы отключаем вручную).
Счетчик — указываем, надо ли показывать, что открытое сейчас изображение, условно, 3 из 10, которые можно посмотреть в уже открытом лайтбоксе.
Во весь экран, Увеличение и Поделиться — включение и отключение кнопок управления лайтбокса, которые отображаются рядом с кнопкой «Закрыть».
Заголовок и Описание — можно выбрать, какой текст будет отображаться под изображением в лайтбоксе.
Цвет фона — это цвет, которым заполняется весь экран при увеличении изображения. По умолчанию, он полупрозрачный — черный. Можно изменить совершенно на любой другой с разной степенью прозрачности.
Цвет кнопок — это цвет кнопок управления в правом верхнем углу лайтбокса, а также переключателей на следующее — предыдущее изображение.
Цвет кнопок при наведении — цвет этих самых кнопок, когда на них наводится указатель мыши (псевдокласс :hover в CSS)
Цвет текста — цвет заголовка и описания, которые отображаются под изображением в лайтбоксе.
Размер иконок — отвечают за размер иконок управления в правом верхнем углу и стрелок вправо и влево в самом лайтбоксе.
Нижняя панель редактора Elementor на WordPress
Теперь давайте посмотрим, что находится на нижней панели редактора Elementor
Если мы нажмем на шестеренку, то попадем в основные настройки конкретной страницы или записи. Здесь можно задать заголовок страницы, выбрать статус публикации, указать главное изображение (обложка у статьи в блоге), включить или отключить отображение заголовка и выбрать один из шаблонов страницы. Кстати, если выбрать шаблон «Холст Elementor», то перед Вами откроется полностью пустая страница без шапки и подвала, на которой Вы сможете сделать всё с 0. Отлично подходит для тех случаев, когда внутри многостраничного сайта создается отдельная лендинговая страница.
На этой иконке находится навигатор страницы. В иерархическом порядке отображаются все блоки и элементы страницы. Чем-то похоже на слои в Фотошопе.
Здесь можно посмотреть историю изменений на странице и переключаться между ними в 1 клик, а не нажимая энное количество раз Ctrl+C
Очень крутая функция, которая включает режим адаптивности. То есть нажав на неё, можно посмотреть, как наша страница будет выглядеть на планшетах и смартфонах, посмотреть все настройки элементов для конкретного экрана, а также поправить отображение тех или иных элементов именно для данного устройства.
Просмотр созданной нами страницы в том виде, в котором её будут видеть посетители сайта. Не забывайте смотреть свои статьи и страницы перед публикацией, чтобы поправить некоторые места (например, анимацию элементов).
Если нажать на кнопку, то мы опубликуем нашу статью или страницу и её смогут видеть пользователи сайта и поисковые роботы. Но если нажать на треугольник в конце кнопки, то откроется небольшое подменю, в котором нашу работу можно сохранить как черновик, который мы потом поправим. Либо как шаблон, который можно будет вставить потом на любую страницу на сайте.
Также на панели администратора находятся настройки каждого элемента, который мы редактируем. Их я разберу чуть ниже, когда буду рассказывать про визуальный редактор страницы.
Визуальный редактор страницы
Любая редактируемая в Elementor страница состоит из 3 частей, которые имеют свою иерархию. Выглядит она следующим образом.
У каждой из этих частей есть свои собственные настройки. Давайте разберем их все.
Секция
Все страницы в Elementor состоят из секций. Мне, как прототиписту, привычнее их называть блоками, но терминология тут не важна. Просто на всякий случай предупреждаю, что в некоторых моментах могу назвать секцию блоком, так что не путайтесь.
Секция в Elementor — это, своего рода, коробка, в которую можно положить определенные вещи. Знаете, как при переезде, отдельно коробка с книгами, отдельно с посудой, отдельно с одеждой и так далее. Тут можно использовать тот же принцип. То есть группировать в одну секцию нужные элементы.
Например, на лендингах всегда есть первый экран, на котором делается ключевое предложение. Так вот, чтобы этот первый экран растягивался на весь экран на любом мониторе, лучше все элементы с него разместить в одной секции. Ниже Вы можете увидеть пример того, о чем написано выше.
На этом скриншоте весь экран занимает 1 секция. За это отвечает настройка «Высота». Видите, там стоит «По размеру экрана»? Это именно она. Если же эту настройку оставить «По умолчанию», то секция будет такой высоты, какой самая высокая колонка внутри неё.
Внутри секции находятся 2 колонки, в которых находятся различные элементы. Что именно там находится, Вы можете увидеть в навигаторе справа сверху.
Как зайти в настройки секции
На скриншоте ниже стрелки указывают на то место, которое надо нажать, чтобы перейти в настройки секции, колонки или конкретного элемента. Также в настройки можно зайти, щелкнув по нужной секции, колонке или элементу в навигаторе.
Как видите, у секции, в отличие от колонки или элемента, на панели чуть больше иконок. Знак + добавляет пустую секцию выше нынешней, а крест (повернутый на 45 градусов +) — удаляет всю секцию с её содержимым (восстановить её можно через историю на нижней панели).
Плитка же, которая находится по центру служит как для перехода к настройкам секции, так и для перетаскивания этой секции по странице (для этого просто зажмите левую кнопку мыши на плитке и тащите куда надо). Также по этой панели можно щелкнуть правой кнопкой мыши и вызвать дополнительные возможности. Но поговорим сейчас только об основных настройках.
Настройки макета
Растянуть секцию — Растягивает секцию на всю ширину экрана, независимо от заданной ширины сайта. Именно эта настройка включена у градиентного уведомления о том, что эта страница создана на элементоре в начале статьи.
Ширина макета задает ширину секции. При выборе значения «Ограниченная», можно задать ширину секции в пикселях. Если при этом поле оставить пустым, то ширина секции останется равной ширине макета, которую мы задавали в глобальных настройках. Если же выбрать «Во всю ширину» и при этом растянуть секцию, то ширина всех колонок внутри неё также растянется на всю ширину страницы.
Разрыв колонок — расстояние между колонками в секции. Имеет 4 предустановленные шаблона, выбирайте какой нравится больше.
Высота — про неё мы поговорили уже чуть-чуть выше.
Позиция колонок — определяет положение колонок внутри секции. Настройка похожа на выравнивание текста в ячейке в Word’e или Excel’e. Но если выбрать пункт «Растягиваться», то колонка станет той же высоты, что и секция.
Вертикальное выравнивание — Выравнивает элементы внутри колонки.
Overflow — Если какая-то колонка, секция или элемент выходят за границы экрана, то при включении этой настройки, всё, что вне экрана, просто обрежется. Иначе будет горизонтальная прокрутка страницы, а это, мягко говоря, отстой.
HTML-тег — Тег, в который надо обернуть всю секцию. От этого зависит настройки отображения всей секции, которые прописаны в CSS файлах. Если не знаете html, то просто оставьте по умолчанию и всё. По умолчанию секция будет обернута в тег div и это хорошо.
Настройки стиля
Перекрытие фона — еще один фон, который будет поверх первого. В качестве фона можно использовать цвет, градиент и изображение (также можно выбрать разные для компьютера, планшета и смартфона). Благодаря настройкам прозрачности, размытия, яркости, контрастности, насыщенности, цветовому фону и режиму наложения, можно создавать очень необычную и интересную визуализацию, которая ограничивается лишь Вашей фантазией.
Граница — задает настройки границы всей секции. Можно задать тип линии, угол скругления и тень.
Разделитель секции — очень прикольная настройка. Что-то типа виньеток. Позволяет задать тип и цвет визуальных украшений снизу и сверху секций. Таким образом переход между ними будет визуально более приятный.
Расширенные настройки
Отступ снаружи — аналог свойства margin в CSS. Устанавливает отступы сверху и снизу от текущей секции. Если нажать на значок цепи, то значения будут не зависимы друг от друга.
Отступы внутри — аналог свойства padding в CSS. Устанавливает отступы от краев секции до колонок.
Z-индекс — устанавливает порядок отображения секций, колонок и элементов, которые слоями накладываются друг на друга. Чем выше номер в этом поле, тем выше слой.
CSS ID и CSS классы — это идентификатор и класс секции, с помощью которых можно задавать уникальное отображение конкретной секции.
Эффекты движения — задает анимацию, с которой секция появится на экране, когда до неё прокрутят страницу.
Адаптивность — настройки отображения секции на смартфонах и планшетах. Также можно задать реверс колонок. Реверс — это замена колонок местами. Например, если Вы читаете эту статью с компьютера, то изображение настроек у Вас слева, а этот текст справа. Если же Вы читаете эту статью с телефона, то сначала идет текст, а только потом изображение. Это и есть тот самый реверс колонок.
Пользовательские CSS — это функция, доступная только в платной PRO версии Elementor для WordPress. Она позволяет настроить внешний вид секции прямо на месте. У меня установлена именно про версия, но я не пользуюсь этой настройкой. Хватает того функционала, что уже есть.