Перекос фона разрезает край раздела по странице под углом, вместо того, чтобы оставить его плоским. Он разбивает обычный стек горизонтальных полос, и глаз следует по диагонали вниз в следующий раздел. Посадочные страницы и домашние страницы SaaS используют его постоянно.
У Elementor до сих пор нет перекоса “ в этом разделе, поэтому вы делаете это с несколькими строками CSS. Проблема в том, что собственное поле Custom CSS Elementor заблокировано за Pro. Вот почему в этом руководстве используется бесплатное Пользовательское расширение CSS в главных надстройках, который добавляет CSS-бокс к каждому элементу на свободном Elementor.
Это руководство было перестроено для того, как на самом деле работает Elementor в 2026 г. Первоначальная версия этого поста была написана против разделов и внутренних столбцов, и оба являются наследием сейчас. все, что используется ниже Контейнеры Flexbox, элемент макета Elementor по умолчанию начиная с 3.6 и единственная структура, которую вы получаете на новой странице.
Что нужно, прежде чем начать
- Элементор бесплатно (3.6 или новее, поэтому контейнеры включены)
- Мастер Аддоны: установите его бесплатно на WordPress.org, затем включите пользовательское расширение CSS
- Контейнер с фоновым цветом или набором изображений. Не пропускайте этого. Скью преображает коробку, поэтому, если в коробке ничего не видно, вы вообще не увидите никаких изменений. прозрачный контейнер - это причина номер один, по которой люди думают, что этот трюк сломан.
Вам не понадобится Elementor Pro в любой момент Если он у вас уже есть, его собственное Custom CSS поле ведет себя так же, поэтому вставьте код туда вместо.
Понимание перекоса перед тем, как что-либо вставить
Перекос - это преобразование CSS. transform: skew(0deg, -10deg) наклоняет элемент по оси Y на десять градусов, превращая его верхний и нижний края в диагонали.
Что сбивает людей с толку, так это то, что к элементу применяется преобразование и все внутри него. Перекос контейнера и вы перекос его фон, конечно, но вы также перекос заголовка, кнопки и изображения, сидящего в нем. Ваш текст оказывается наклоненным.
Так что вы встречно перекоситесь Вставьте второй контейнер внутрь первого и наклоните его назад на такую же величину в обратную сторону. родитель идет на минус десять градусов, ребенок идет на плюс десять, и они отменяют.Угловой фон, вертикальное содержание.
Два контейнера, два правила, противоположные значения. вот и все.
Шаг 1: Постройте конструкцию контейнера
Откройте свою страницу в Elementor и загляните в a Контейнер. Установите его ширину на полную ширину. Это внешний, тот, который несет угол.
Теперь перетащите a второй контейнер внутри первого. Этот вложенный контейнер содержит фактическое содержимое: заголовок, текст, кнопку, изображение, для чего бы ни был раздел. Разработайте его так, как хотите.
Итак, структура такова
- Внешний контейнер: цвет фона или изображение, получает перекос
- Внутренний контейнер: весь ваш контент получает обратный перекос
Сохранение старой страницы, все еще построенной на Разделы и Внутренние Разделы? логика идентична Внешний элемент перекосы, внутренний элемент un-перекосы. для чего-либо нового, хотя, использовать Контейнеры. они поставляют намного меньше DOM, который складывается, если вы заботитесь о Скорость страницы Элементора.
Шаг 2: Добавьте косой CSS во внешний контейнер
Выберите внешний контейнер, перейдите к Продвинутый вкладка и найдите MA Custom CSS поле, которое добавляют Мастер Аддоны Вставьте это в:
selector {
padding: 400px 0;
margin-top: -200px;
transform: skew(0deg, -10deg);
overflow: hidden;
}Вот что делает каждая строка, так что можно ее корректировать, а не просто надеяться:
selectorявляется ли сокращение Элементора для “этот конкретный элемент.” Мастер Аддоны охватывает его для вас, поэтому правило не может просочиться на другие контейнеры.padding: 400px 0дает контейнеру достаточно вертикального пространства для того, чтобы угловые края куда-то ушли. перекос короткого контейнера и вы просто сжимаете углы.margin-top: -200pxвтягивает контейнер вверх в тот, что над ним так диагональ перекрывается, вместо того, чтобы оставить белый треугольник позади Половина значения заполнения является достойным начальным соотношением.transform: skew(0deg, -10deg)является ли угол сам.Отрицательный наклоны в одну сторону, положительный в другую.overflow: hiddenудерживает перекошенные углы от выплескивания вбок. оставь это, и получишь горизонтальную полосу прокрутки, к которой я вернусь.
Стоит отметить одну вещь: если вы тоже прикоснулись к Преобразовать элементы управления в собственной вкладке "Дополнительно" у "Элементора" будут бороться с этим CSS, так как оба пишут на одну и ту же transform собственность и последний, кто загружает выигрывает. выберите одно место, чтобы установить угол, и оставьте другое в покое.
В версии этого руководства 2020 года были перечислены четыре строки, предварительно исправленные поставщиком (-webkit-, -moz-, -ms-, -o-). Удалить их. Без префикса transform работает в каждом браузере уже около десяти лет, и эти дополнительные строки только затрудняют чтение CSS-бокса.
Шаг 3: Противоперекос внутреннего контейнера
В этот момент ваш контент наклоняется вместе с фоном. Выберите внутренний контейнероткройте вкладку "Дополнительно" и вставьте ее в MA Custom CSS:
selector {
transform: skew(0deg, 10deg);
}То же число, противоположный знак Внешний контейнер при -10deg означает внутренний контейнер при 10deg. Измените одно, не меняя другого, и ваш текст будет располагаться под небольшим углом, который читатели заметят, даже если не могут сказать почему.
Сохранить и предварительный просмотр. у вас должен быть наклонный фон с прямым контентом, сидящим поверх него. если редактор все еще показывает его наклоненным, перезагрузите вкладку редактора; пользовательский CSS иногда отстает в iframe предварительного просмотра.
Шаг 4: Исправьте переполнение мобильного телефона (не пропускайте это)
Большинство учебных пособий останавливаются на шаге 3, и именно поэтому неделю спустя искаженные разделы удаляются с живых сайтов.
Перекос элемента во всю ширину и его углы выталкиваются за край окна просмотра На рабочем столе никто не замечает. На телефоне этот выступ дает вам горизонтальную полосу прокрутки, и страница начинает скользить вбок под большим пальцем пользователя. Он читается как сломанный, потому что это так.
Две вещи мешают этому:
- Держать
overflow: hiddenна перекошенном контейнере, как в коде выше. - Уменьшите угол на маленьких экранах. 10-градусный перекос, который выглядит резким на мониторе с разрешением 1440px, превращается в жесткую диагональ на телефоне с разрешением 375px, и он съедает ваш заголовок.
Добавьте это под кодом в поле CSS внешнего контейнера:
@media (max-width: 767px) {
selector {
padding: 200px 0;
margin-top: -100px;
transform: skew(0deg, -4deg);
}
}И соответствующий реверс во внутреннем контейнере:
@media (max-width: 767px) {
selector {
transform: skew(0deg, 4deg);
}
}Теперь эффект масштабируется вниз вместо того, чтобы разрушить макет. протестируйте его на реальном телефоне, а не только на адаптивном предварительном просмотре редактора, поскольку панель предварительного просмотра не всегда воспроизводит переполнение. Если вы запускаете пользовательские точки останова, а не по умолчанию Elementor, Пользовательский плагин точек останова позволяет сопоставить эти медиазапросы с фактической шириной устройства.
Современная альтернатива: клип-путь, без встречного перекоса вообще
Косой-встречный-косой работает, и это то, чему учил оригинальный учебник, Однако теперь есть более чистый способ, и для новой сборки обычно это тот, к которому я бы обратился.
clip-path вырезает форму из элемента, а не преобразует его. Поскольку он клипсуется вместо вращения, содержимое внутри никогда не перемещается, поэтому нет вложенного контейнера и второго значения, которое можно было бы синхронизировать.
Один контейнер, одно правило:
selector {
padding: 160px 0;
clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%);
}Эти четыре координаты - углы по часовой стрелке сверху слева. Подтолкните проценты, чтобы изменить угол: поднимите 6% для более крутого разреза опустите его 0 для чего-то более тонкого. можно также наклонить только нижний край и оставить верхний плоским, что является обычным рисунком для героя.
Какой метод следует использовать?
| Ситуация | Использовать | Почему |
|---|---|---|
| Новая страница, нужен угловой край | clip-path | Один контейнер, одно правило, контент никогда не трогают |
| Вам нужен фон изображение сам наклоняться | skew | клип-путь разрезает коробку, она не вращает то, что находится внутри нее |
| Только один край должен быть расположен под углом | clip-path | Перекос всегда наклоняет оба края вместе |
| Поддержание старой страницы, уже созданной с перекосом | skew | Нет причин перестраивать то, что работает |
Каждый текущий браузер обрабатывает оба. Проверьте таблицы поддержки клип-пути на MDN если застрял в поддержке чего-то необычного.
Полностью пропустите CSS: импортируйте готовый шаблон
Не хотите прикасаться к коду? асимметричный макет фона поставляется в виде шаблона. Редактируйте любую страницу с помощью Elementor, нажмите Библиотека шаблонов главных аддонов значок рядом с кнопкой добавления-элемента, и искать косой шаблон фона Импортируйте его, затем поменяйте местами свой собственный текст и цвета.
Та же техника, уже подключена. The Библиотека шаблонов главных аддонов имеет готовые страницы, разделы, заголовки и нижние колонтитулы, построенные таким же образом, и Шаблонные наборы идите дальше с полным многостраничным дизайном сайта.
Где на самом деле работает искаженный фон
Стоит сказать, потому что этот эффект злоупотребляет: угловые секции зарабатывают себе на жизнь, когда отмечают переход. Герой в функции, функции в ценообразование, цены в отзывы. Они придают длинной странице некоторый ритм.
Они перестают работать, когда каждый раздел наклонен Ничто больше не читается как переход и страница просто чувствует себя занятой На длинной целевой странице обычно достаточно двух или трех угловых краев.
Если вам нужна большая глубина без геометрии, другие эффекты будут хорошо расположены сверху. Анимированные градиентные фоны (Pro) добавьте медленное движение цвета, частицы добавьте интерактивный слой и стекломорфизм придает картам матовый вид, который хорошо прилегает к перекошенной панели. The Преобразует расширение (Pro) также ставит в пользовательском интерфейсе Elementor элементы управления поворотом, масштабированием и перекосом, если вы предпочитаете перетаскивать ползунок, чем набирать градусы.
Устранение неполадок
- Ничего не изменилось. Контейнер не имеет фона. Установите цвет или изображение и посмотрите еще раз.
- Вся страница прокручивается вбок. Добавить
overflow: hiddenк перекошенной емкости, потом проверьте, чтобы ее родитель тоже не переливался. - Текст все еще наклонен. Контрперекос находится на неправильном элементе, или знак неправильный. если внешний контейнер отрицательный, внутренний должен быть положительным.
- Белый зазор над секцией. Увеличить отрицательное
margin-topтаким образом, угол втягивается дальше в раздел выше. - Угол скачет непредсказуемо. Встроенные элементы управления трансформацией Elementor установлены на одном элементе и имеют преимущественную силу над вашим CSS. Очистите их.
- Нет пользовательского CSS-блока MA на вкладке "Дополнительно". Расширение выключается. Главные дополнения, затем Настройки, затем Расширения, и включить его.
Часто задаваемые вопросы
Могу ли я создать искаженный фон в Elementor бесплатно?
Да. Elementor free не имеет поля Custom CSS, но расширение Master Addons Custom CSS добавляет по одному к каждому элементу, и это бесплатно. вставьте преобразование косоглазия в поле MA Custom CSS на вкладке Advanced контейнера. лицензия Elementor Pro не требуется.
Почему мой текст наклонен после перекоса раздела?
Преобразование CSS применяется к элементу и всем его дочерним элементам, поэтому содержимое наклоняется вместе с фоном. Вставьте контейнер внутрь и придайте ему противоположное значение перекоса. Внешний контейнер при -10degвнутренний при 10deg, и они сокращаются.
Не помешает ли искаженный фон скорости страницы?
Нет, оба transform и clip-path являются ли свойства ускоренного GPU композитор браузера обрабатывает, Они добавляют никаких сценариев и никаких дополнительных HTTP запросов, Несколько строк CSS стоит гораздо меньше, чем изображение угловой формы.
Как изменить угол перекоса?
Редактировать значение степени. skew(0deg, -10deg) это умеренный наклон, -5deg тонкий, -15deg драматично Измените вместе значение внешней емкости и противозначение внутренней емкости, сохраняя их равными и противоположными.
Нужны ли мне по-прежнему префиксы поставщиков типа -webkit-transform?
№ Непрефикс transform работал в каждом крупном браузере годами. префиксные строки в старых учебных пособиях, включая версию этого 2020 года, можно безопасно удалить.
Завершая
Создание искаженного фона в Elementor сводится к двум правилам в двух CSS-боксах: перекос внешнего контейнера, встречный перекос внутреннего. Добавить overflow: hidden, облегчите ракурс на мобильном телефоне, и он выдержит на реальных устройствах, а не только в редакторе На новой сборке, clip-path сделает вас таким же, как и половина настройки.
Все это работает на свободном Элементоре, поскольку Мастер Аддоны это то, что ставит Custom CSS поле там для начала, Если вы позже хотите остальной инструментарий (Строитель темы, Popup Builder, полный набор расширения), вот что Про обложки, но в этом уроке это ничего не нужно.
Связанное чтение: Эффекты анимации элементара, как добавить плавающие эффекты в Elementorи как создать липкий заголовок в Elementor.
