Elementor는 그들의 컬럼에 요소들을 유지하며, 이것은 디자인이 다른 것을 요구할 때까지 정확히 옳다: 사진에 반쯤 놓여 있고 사진에서 반쯤 떨어져 있는 배지, 또는 섹션 가장자리를 지나 밀려난 라벨.The 포지셔닝 확장 에서 Elementor용 마스터 애드온 모든 위젯,열, 섹션 및 컨테이너에 오프셋 컨트롤을 추가합니다. px,em 또는 %로 패널에서 아무거나 조금씩 움직이거나 완전히 재배치할 수 있으며 장치당 별도의 값이 있습니다.
Positioning 확장자가 하는 일 #
활성화되면 모든 요소는 다음을 얻습니다 포지셔닝 그 아래의 섹션 고급 탭. 선택 a 위치 유형 그리고 오프셋 슬라이더로 요소를 이동하십시오:
- 위치 유형: Default 와 Static 은 정상적인 흐름을 유지하고,Relative 는 요소를 자신의 자리에서 상쇄하고,Absolute 는 가장 가까운 위치의 부모 안에 넣습니다. 여기에는 Fixed 옵션이 없습니다; 이를 위해 Elementor 의 자체 Position 설정을 사용하십시오.
- 상단 / 오른쪽 / 하단 / 왼쪽: 과거 가장자리를 푸시하기 위한 음수 값을 포함하여 각 측면에 대해 px, em 또는 %로 오프셋됩니다.
- 센터에서: 부모 가운데에서 수평 오프셋. 그것은 50% 플러스 당신의 값으로 왼쪽 설정.
- Z-인덱스: 상황이 겹칠 때 어떤 요소가 승리할지 결정합니다.
모든 컨트롤은 반응형 아이콘을 전달하므로 데스크탑,태블릿, 모바일은 각각 자신의 값을 유지합니다. 패널은 하나의 합리적인 경고를 추가합니다: From Center 와 Left 를 동시에 결합하지 마십시오.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치 및 활성. 플러그인에 새로운? 따라 설치 가이드 첫번째.
- 포지셔닝은 무료 확장이므로 Pro 라이센스가 필요하지 않습니다.
Positioning 확장을 활성화하는 방법 #
WordPress 대시보드에서 다음으로 이동하세요 마스터 애드온 그리고 열어보세요 확장 탭. 포지셔닝은 에 있습니다 디스플레이 위젯 그룹, 옆에 그리드 라인 그리고 컨테이너 엑스트라. 보라색으로 변하도록 토글을 클릭한 다음 누르세요 변경 사항 저장 그리고 녹색 “설정이 성공적으로 저장되었습니다” 공지를 기다리십시오.
위치 패널을 엽니다 #
Elementor 편집기의 요소, 데모의 원형 품질 배지를 선택하고 엽니다 고급 탭. 확장 포지셔닝 보라색 MA 배지와 세트가 있는 섹션입니다 위치 유형 에 상대적인. 오프셋 컨트롤이 나타납니다: 상단,오른쪽, 하단,왼쪽, 중앙에서,그리고 그 아래 Z-Index.
어떤 슬라이더를 드래그하고 요소는 캔버스에서 라이브로 이동합니다. 데모에서 -143 의 부정적인 상단은 사진의 중간에서 위쪽 가장자리를 향해 배지를 들어 올립니다; 긍정적 인 값은 다른 방법을 밀어.
요소를 제자리로 이동 #
데모는 몇 가지 값으로 사진 주위에 배지를 걸어: 상위 357위 아래쪽 절반으로 떨어 뜨리고, 오른쪽 -262 바깥쪽으로 밀어 넣습니다 하단 배지가 사진의 하단 가장자리에 걸쳐 있을 때까지 중첩을 값으로 미세 조정합니다. 각 슬라이더도 입력된 값을 사용하므로 모형의 정확한 간격을 일치시킬 수 있습니다.
Relative 를 사용하면 요소가 레이아웃에 슬롯을 유지하고 주변의 콘텐츠는 그대로 유지됩니다. Absolute 는 요소를 흐름에서 벗어나게 하므로 아래 콘텐츠가 위로 이동하여 간격을 채웁니다. 두 요소가 쌓이면 Z-Index 필드가 누가 맨 위에 앉는지 정착합니다.
페이지의 결과 #
게시하고 배지는 주차 된 위치를 정확하게 렌더링합니다: 사진의 하단 가장자리를 겹쳐서 아래의 열 구조를 건드리지 않고 직사각형을 깨뜨립니다.
완료하기 전에 태블릿과 모바일을 확인하십시오. 데스크톱에서 바로 보이는 오프셋은 좁은 뷰포트에서 요소를 오프스크린으로 푸시할 수 있으며,이것이 바로 여기의 모든 컨트롤이 반응하는 이유입니다.
정확한 위치 확인이 성과를 거두는 곳 #
- 배지와 우표. 사진 코너를 겹쳐 놓은 씰은 배치되지 않고 디자인 된대로 읽습니다.
- 겹치는 카드. 추천 카드나 통계 카드를 옆 이미지 가장자리로 당깁니다.
- 섹션 깨는 악센트. 단면 경계를 가로지르는 모양이나 라벨입니다.
- 미세 정렬 수정. 여백 해킹으로 요소를 감싸지 않고 몇 픽셀로 요소를 밀어 넣습니다.
- 계층화된 영웅 구성. 순서를 결정하는 Z-Index를 사용하여 이미지 위에 텍스트를 쌓습니다.
비디오 자습서 #
확장 기능 활성화부터 게시된 페이지까지 배지가 레이아웃 주위를 실시간으로 이동하는 모습을 지켜보세요.
자주 묻는 질문 #
Elementor 에서 요소를 자유롭게 이동하려면 어떻게 해야 합니까?
마스터 애드온 확장 탭에서 위치 지정 확장을 활성화하고 요소를 선택한 다음 고급 탭에서 위치 지정을 엽니다. 위치 유형을 상대적으로 설정하고 위쪽,오른쪽, 아래쪽 및 왼쪽 슬라이더를 사용하십시오; 요소를 드래그하면 캔버스에서 라이브로 이동합니다.
음의 오프셋 값을 사용할 수 있습니까?
예. 음수 값은 요소를 일반 경계 이상으로 밀어 넣습니다. 이는 배지를 사진 가장자리에 겹치거나 해당 섹션 외부의 요소를 당기는 방법입니다. 값을 입력하거나 슬라이더를 어느 방향으로든 드래그하십시오.
Z-Index 설정은 무엇을 합니까?
Z-Index 는 요소가 겹칠 때 스태킹 순서를 제어합니다. 숫자가 높은 요소가 맨 위에 렌더링됩니다. 재배치된 요소가 이웃의 위 또는 아래에 위치해야 할 때마다 동일한 위치 지정 패널에 설정합니다.
오프셋은 모바일에서도 작동합니까?
모든 오프셋 컨트롤은 반응형이므로 데스크톱,태블릿, 모바일은 별도의 값을 유지합니다. 위치 지정 후 항상 좁은 뷰포트를 미리보기: 넓은 화면에 맞는 오프셋은 전화기에서 요소를 화면 밖으로 밀어낼 수 있으며 장치별 값은 이를 수정하는 방법입니다.
Positioning 확장은 무료인가요?
예. 포지셔닝은 확장 탭의 디스플레이 위젯 그룹에서 Elementor 용 Master Addons 무료 버전과 함께 제공됩니다. 가격 페이지는 Pro 플랜이 추가하는 내용을 다룹니다.
감싸는 #
포지셔닝을 사용하면 Elementor 요소를 일반 슬롯 외부에 배치할 수 있습니다: 상대 또는 절대를 선택하고 오프셋을 설정하며 나머지는 Z-Index 및 장치별 값을 사용합니다. The 위치 확장 페이지 elementor 의 내장 Position 설정과 비교합니다. 요소에도 회전이나 스케일이 필요한 경우,pair it with the 확장을 변환합니다 (프로). 나머지 부분을 탐색할 수 있습니다 마스터 애드온 위젯 및 확장 한 페이지에.
