Elementor에서 왜곡된 배경을 만드는 방법(2026 가이드)

기울어진 배경은 페이지를 평평하게 두는 대신 각도로 섹션의 가장자리를 자릅니다. 이는 수평 밴드의 일반적인 스택을 분해하고 눈은 대각선을 따라 다음 섹션으로 내려갑니다. 랜딩 페이지와 SaaS 홈페이지에서는 이를 지속적으로 사용합니다.

Elementor 에는 아직 “이 섹션을 왜곡”토글이 없으므로 몇 줄의 CSS 로 수행합니다. 문제는 Elementor 의 자체 사용자 정의 CSS 필드가 Pro 뒤에 잠겨 있다는 것입니다. 이것이이 튜토리얼에서 무료를 사용하는 이유입니다 마스터 애드온의 사용자 정의 CSS 확장무료 Elementor의 모든 요소에 CSS 상자를 추가합니다.

이 가이드는 Elementor 가 2026 년에 실제로 작동하는 방식에 대해 다시 작성되었습니다. 이 게시물의 원본 버전은 섹션 및 내부 열에 대해 작성되었으며 둘 다 현재 유산입니다. 아래의 모든 것은 사용합니다 플렉스박스 컨테이너, 3.6 이후 Elementor의 기본 레이아웃 요소이자 새 페이지에서 얻을 수 있는 유일한 구조입니다.

시작하기 전에 필요한 것

• 엘리멘터 무료 (3.6 이상이므로 컨테이너가 켜져 있습니다)
• 마스터 애드온: wordpress.org 에서 무료로 설치하십시오그런 다음 사용자 정의 CSS 확장을 켭니다
• 배경색 또는 이미지가 설정된 컨테이너입니다. 이거 넘기지 마. 스큐는 박스를 변형시키므로,박스에 보이는 것이 아무것도 없다면,변화가 전혀 보이지 않을 것입니다. 투명한 컨테이너는 사람들이 이 트릭이 깨졌다고 생각하는 가장 큰 이유입니다.

어느 시점에서도 Elementor Pro 가 필요하지 않습니다. 이미 가지고 있다면 기본 Custom CSS 필드가 동일한 방식으로 작동하므로 대신 코드를 붙여 넣으십시오.

당신이 무엇이든을 풀칠하기 전에 왜곡을 이해

스큐잉은 CSS 변환입니다. transform: skew(0deg, -10deg) y 축을 따라 요소를 10도 기울여 위쪽 및 아래쪽 가장자리를 대각선으로 만듭니다.

사람들을 놀라게 하는 것은 변환이 요소에 적용된다는 것입니다 그리고 그 안에 있는 모든 것. 컨테이너를 꼬치면 배경도 꼬이게 됩니다. 물론 헤드라인,버튼, 그리고 그 안에 있는 이미지도 꼬이게 됩니다. 텍스트가 기울어지게 됩니다.

그래서 여러분은 반대편으로 치우칩니다. 첫번째 안에 두번째 컨테이너를 중첩시키고 반대 방향으로 같은 양만큼 뒤로 기울입니다. 부모는 마이너스 10 도까지 가고 자식은 플러스 10 까지 가고 그들은 취소합니다. 각진 배경,직립 내용.

두 개의 컨테이너,두 개의 규칙,반대되는 값. 그게 전부입니다.

1 단계: 컨테이너 구조 구축

Elementor에서 페이지를 열고 a를 입력하세요 컨테이너니다.그것의 너비를 Full Width 로 설정합니다. 이것은 바깥쪽,각도를 운반하는 것입니다.

이제 a를 드래그하세요 첫 번째 컨테이너 내부의 두 번째 컨테이너입니다니다. 그 중첩 컨테이너는 실제 내용을 보유하고 있습니다: 제목,텍스트, 버튼,이미지, 섹션이 무엇이든간에. 원하는대로 디자인하십시오.

따라서 구조는 다음과 같습니다:

• 외부 컨테이너: 배경색이나 이미지가 왜곡됩니다
• 내부 용기: 모든 콘텐츠가 반대 편향을 얻습니다

Sections 와 Inner Sections 에 여전히 구축된 오래된 페이지를 유지? 논리는 동일합니다. 외부 요소는 기울어지고 내부 요소는 기울어지지 않습니다. 그래도 새로운 것은 Containers 를 사용하십시오. 그들은 훨씬 적은 DOM 을 출하하며,이는 신경 쓰면 합산됩니다 Elementor 페이지 속도.

2 단계: 스큐 CSS를 외부 컨테이너에 추가하십시오

외부 컨테이너를 선택하고 다음으로 이동합니다 고급 탭하고 찾아보세요 MA 사용자 정의 CSS 마스터 애드온이 추가하는 상자. 이것을 붙여넣기:

selector {
  padding: 400px 0;
  margin-top: -200px;
  transform: skew(0deg, -10deg);
  overflow: hidden;
}

각 라인이 하는 일은 다음과 같으므로,단지 희망하는 것이 아니라 조정할 수 있습니다:

• selector 는 “이 특정 요소” 에 대한 Elementor의 약어입니다. Master Addons는 범위를 지정하므로 규칙이 다른 컨테이너로 누출 될 수 없습니다.
• padding: 400px 0 컨테이너에 각진 모서리가 어딘가로 갈 수 있는 충분한 수직 공간을 제공합니다. 짧은 컨테이너를 꼬집으면 모서리를 잘라내기만 하면 됩니다.
• margin-top: -200px 컨테이너를 위로 끌어올려 그 위의 컨테이너로 대각선이 겹치도록 합니다. 뒤에 흰색 삼각형을 남기는 대신요. 패딩 값의 절반은 괜찮은 시작 비율입니다.
• transform: skew(0deg, -10deg) 는 각 그 자체입니다 음수는 한쪽으로 기울고 양수는 다른쪽으로 기울어집니다.
• overflow: hidden 치우친 모서리가 옆으로 쏟아지지 않게 해줘요 놔두면 수평 스크롤바가 나오는데 다시 돌아올게요.

플래그할 가치가 있는 한 가지: 역시 만져본 적이 있다면 변환 elementor의 자체 고급 탭에 있는 컨트롤은 둘 다 동일하게 쓰기 때문에 이 CSS와 싸울 것입니다 transform 속성과 마지막으로 로드하는 것이 승리합니다. 한 곳을 선택하여 각도를 설정하고 다른 곳은 그대로 둡니다.

이 튜토리얼의 2020 버전에는 공급업체 접두사 4개 라인이 나열되어 있습니다(-webkit-, -moz-, -ms-, -o-). 삭제하세요. 접두사가 없습니다 transform 약 10년 동안 모든 브라우저에서 작동해 왔으며 이러한 추가 줄로 인해 CSS 상자를 읽기가 더 어려워졌습니다.

3 단계: 내부 컨테이너를 반대 방향으로 기울입니다

이 시점에서 콘텐츠가 배경과 함께 기울어집니다. 을 선택합니다 내부 용기를 열고 고급 탭을 열고 이를 MA 사용자 정의 CSS에 붙여넣습니다:

selector {
  transform: skew(0deg, 10deg);
}

같은 번호, 반대 부호. 에서 외부 컨테이너 -10deg 내부 용기를 의미합니다 10deg. 다른 하나를 바꾸지 않고 하나를 바꾸면 독자가 이유를 말할 수 없더라도 텍스트가 약간의 각도로 표시됩니다.

저장 및 미리보기. 그 위에 똑바른 내용이 있는 각진 배경이 있어야 합니다. 편집기가 여전히 기울어짐을 표시하면 편집기 탭을 다시 로드합니다; 사용자 정의 CSS 는 때때로 미리보기 iframe 에서 지연됩니다.

4 단계: 모바일 오버플로를 수정합니다 (이것을 건너 뛰지 마십시오)

대부분의 튜토리얼은 3 단계에서 중지되며,이것이 바로 왜곡된 섹션이 일주일 후에 라이브 사이트에서 다시 꺼지는 이유입니다.

전폭 요소를 스큐하고 그 모서리가 뷰포트의 가장자리를 지나 밖으로 밀려나오게 합니다. 데스크탑에서는 아무도 눈치채지 못합니다. 전화기에서 그 오버행은 가로 스크롤바를 제공하고 페이지는 사용자의 엄지손가락 아래에서 옆으로 미끄러지기 시작합니다. 깨진 것으로 읽혀지죠. 왜냐하면.

두 가지가 그것을 방지합니다:

1. 유지하다 overflow: hidden 위 코드와 같이 기울어진 컨테이너에.
2. 작은 화면에서 각도를 줄입니다. 1440px 모니터에서 날카롭게 보이는 10 도 스큐는 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%);
}

그 4 개의 좌표는 모서리입니다,왼쪽 위에서부터 시계방향으로요. 백분율을 살짝 눌러 각도를 바꾸세요: raise the 6% 더 가파른 절단을 위해, 그것을 향해 떨어 뜨리십시오 0 더 미묘한 것을 위해. 또한 아래쪽 가장자리만 각도를 맞추고 위쪽은 평평하게 둘 수 있는데,이는 영웅의 일반적인 패턴입니다.

어떤 방법을 사용해야합니까?

모든 현재 브라우저는 둘 다 처리합니다. Check the MDN의 클립 경로 지원 테이블 뭔가 특이한 것을 지지하는데 막혔다면.

CSS를 완전히 건너뛰기: 기성품 템플릿을 가져옵니다

코드를 만지고 싶지 않으십니까? 기울어진 배경 레이아웃은 템플릿으로 제공됩니다. Elementor 로 아무 페이지나 편집하고 를 클릭하십시오 마스터 애드온 템플릿 라이브러리 추가 요소 버튼 옆에 있는 아이콘으로,스큐 배경 템플릿을 찾습니다. 가져온 다음 자신의 텍스트와 색상으로 바꾸십시오.

동일한 기술, 이미 배선되었습니다. 그만큼 마스터 애드온 템플릿 라이브러리 준비된 페이지, 섹션, 머리글 및 바닥글이 동일한 방식으로 구축되었습니다 템플릿 키트 전체 다중 페이지 사이트 디자인으로 더 나아가십시오.

비뚤어진 배경이 실제로 작동하는 곳

이 효력이 과용해 얻기 때문에,말할 가치가 있으십시오: 각이지는 단면도는 전환을 표를 할 때 그들의 유지를 벌. 특징에 영웅,가격책정에 특징,평가로 가격책정. 그들은 긴 페이지에게 약간 리듬을 줍니다.

그들은 모든 섹션이 각도를 이룰 때 작동을 멈춥니다. 더 이상 전환으로 읽히는 것은 없으며 페이지가 바쁘게 느껴질 뿐입니다. 긴 랜딩 페이지에서는 일반적으로 두세 개의 각진 모서리로 충분합니다.

기하학 없이 더 깊이 있고 싶다면 다른 효과가 맨 위에 잘 겹쳐집니다. 애니메이션 그라데이션 배경 (프로) 느린 색깔 운동을 추가하고십시오, 입자 대화형 레이어를 추가하고 유리형성 카드에 왜곡 된 패널에 잘 맞는 반투명 모양을 제공합니다. The 확장을 변환합니다 (Pro) 는 또한 Elementor UI에 회전, 스케일링 및 스큐 컨트롤을 넣습니다. degrees를 입력하는 것보다 슬라이더를 드래그하는 것이 낫다면 말이죠.

문제 해결

• 아무것도 바뀌지 않았어. 컨테이너에 배경이 없습니다. 색상이나 이미지를 설정하고 다시 봅니다.
• 전체 페이지가 옆으로 스크롤됩니다. 추가 overflow: hidden 기울어진 컨테이너에,그 다음 부모도 넘치지 않는지 확인한다.
• 텍스트는 여전히 기울어져 있습니다. 반대 기울기가 잘못된 요소에 있거나 기호가 잘못되었습니다. 외부 컨테이너가 음수이면 내부 컨테이너는 양수여야 합니다.
• 단면 위 백색 간격. 음수를 증가시키세요 margin-top 그래서 각도는 위의 섹션으로 더 당겨집니다.
• 각도는 예측할 수 없을 정도로 뛰어다닙니다. Elementor 의 내장 Transform 컨트롤은 동일한 요소에 설정되어 있으며 CSS 를 재정의하고 있습니다. 지우기.
• 고급 탭에 MA 사용자 정의 CSS 상자가 없습니다. 확장 프로그램이 꺼져 있습니다. 마스터 애드온,설정, 확장 프로그램,그리고 활성화합니다.

자주 묻는 질문

감싸는

Elementor 에서 기울어진 배경을 만드는 것은 두 개의 CSS 상자에 두 개의 규칙으로 귀결됩니다: 외부 컨테이너를 기울이십시오,내부 컨테이너를 반대 기울이십시오. 추가 overflow: hidden, 모바일에서 각도를 완화하면 편집기에서만 유지되는 것이 아니라 실제 장치에서도 유지됩니다.On a new build, clip-path 설정의 절반으로 동일한 모양을 얻습니다.

그 이후로 모든 것은 무료 Elementor에서 실행됩니다 마스터 애드온 는 Custom CSS 박스를 처음에 거기에 두는 것입니다. 나중에 툴킷의 나머지 부분 (테마 빌더,팝업 빌더,전체 확장 세트) 을 원한다면,그것이 바로 프로 커버하지만, 이 튜토리얼에서 아무것도 그것을 필요로하지 않습니다.

관련 읽기: Elementor 애니메이션 효과, elementor 에서 부동 효과를 추가하는 방법, 그리고 elementor 에서 끈적한 헤더를 만드는 방법.