그리드 레이아웃은 깔끔하고,깔끔하게 지루해질 수 있습니다. 열에서 기울어지는 이미지,또는 커서 아래에서 약간 자라는 카드: 이와 같은 작은 변환은 디자인 된 페이지와 쌓인 페이지를 분리합니다. The 확장을 변환합니다 에서 마스터 애드온 프로 모든 요소에 변환 패널을 추가합니다: 일반 상태와 호버 상태에 대한 별도의 설정으로 변환, 회전, 크기 조정, 스큐, 뒤집기.
Transforms 확장자가 하는 일 #
활성화되면 모든 Elementor 요소는 다음을 얻습니다 변환합니다 그 아래의 섹션 고급 탭. 뒤집다 변환을 활성화했습니다 yes 에 여섯 개의 컨트롤이 나타나고,각각은 실제 레이아웃 흐름을 건드리지 않고 요소에 CSS 변환을 적용합니다:
- 번역하다: 요소를 X축과 Y축을 따라 픽셀 단위로 -1000에서 1000으로 이동합니다.
- 회전: x, Y 또는 Z 축을 -180 도에서 180 도까지 켭니다.
- 규모: 0 에서 5 까지 각 축에 독립적으로 확대하거나 축소하십시오.
- 스큐: 대각선, 동적 보기를 위해 그것을 기울이십시오.
- 수평 뒤집기 / 수직 뒤집기: 한 번의 클릭으로 미러링하세요.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 보통의 그리고 호버 탭에는 별도의 값이 있으므로 요소는 정지 상태에서 한 방향으로 앉아 커서가 탭에 놓이면 변환할 수 있으며 전환 기간은 제어할 수 있습니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치 및 활성. 플러그인에 새로운? 따라 설치 가이드 첫번째.
- A 마스터 애드온 프로 라이센스, Transforms는 Pro 확장이기 때문입니다.
Transforms 확장을 활성화하는 방법 #
WordPress 대시보드에서 다음으로 이동하세요 마스터 애드온 그리고 열어보세요 확장 탭. 변환은 에 있습니다 애니메이션 위젯 핫 배지를 가진 그룹, 사이 입구 애니메이션 그리고 공개합니다. 보라색으로 변하도록 토글을 클릭한 다음 누르세요 변경 사항 저장 그리고 녹색 “설정이 성공적으로 저장되었습니다” 공지를 기다리십시오.
요소의 변환 패널을 엽니다 #
Elementor 편집기에서 요소를 선택하고 데모에서 이미지 위젯을 선택한 다음 엽니다 고급 탭. 확장 변환합니다 보라색 MA 배지와 스위치가 있는 섹션입니다 변환을 활성화했습니다 예. 6 개의 변환 컨트롤이 일반 및 호버 탭 아래에 나타나며 각 탭은 연필 아이콘으로 열립니다.
요소를 이동하고 크기를 조정합니다 #
옆에 있는 연필을 클릭합니다 번역하기 그리고 두 개의 슬라이더가 열립니다: X 를 번역하고 Y 를 번역하십시오. 데모는 X 축에서 이미지 71 을 밀고 슬라이더가 움직일 때 캔버스의 섹션 가장자리를 향해 미끄러집니다. 값은 픽셀 단위이며 각 축에는 장치별로 자체 응답 설정이 있습니다.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 스케일 제어는 같은 방식으로 작동합니다. 데모에서 스케일 X 를 1,4 로 설정하면 해당 열 너머의 이미지가 확대되어 일반 그리드를 프레임하는 브레이크아웃 종류에 대한 섹션 경계가 겹칩니다. 스케일 Y 는 변경하지 않는 한 기본값인 1 에 머물러 있으므로 균등한 확대를 위해 둘 다 설정합니다.
회전 및 기울임 작업은 같은 방식으로 수행됩니다. 컨트롤을 열고 슬라이더를 드래그하면 캔버스가 각도를 보여줍니다.
호버 변환 추가 #
로 전환하십시오 호버 탭과 동일한 컨트롤은 커서가 요소에 있는 동안에만 적용되며, 두 개의 추가 기능도 적용됩니다: 수평 뒤집기 그리고 수직 뒤집기 예/아니요 스위치가 되고 a 전환 기간(ms) 슬라이더는 변경 사항이 얼마나 빨리 애니메이션되는지를 제어합니다. 데모는 400ms 전환으로 Flip Horizontal 을 켜므로,이미지는 호버에서 부드럽게 미러링되고 커서가 떠날 때 다시 스냅됩니다.
페이지의 결과 #
게시하고 프런트 엔드를 확인합니다. 이미지는 편집기에서 배열 된대로 정확하게 열을 지나 이동 및 확대 앉아,호버링 그것은 400ms 쉽게 플립을 재생합니다. 변환은 하나의 작은 스타일 시트와 일반 CSS 이며,요소 주변의 레이아웃은 리플로우되지 않습니다.
한 가지 기억해야 할 점: 변환은 시각적인 것뿐입니다. 요소는 여전히 레이아웃에서 원래 자리를 차지하므로 크게 번역된 요소는 이웃과 겹칠 수 있습니다. 일반적으로 요점이지만 동일한 오프셋이 화면을 더 많이 덮는 태블릿과 모바일을 확인하세요.
변신이 자리를 차지하는 곳 #
- 브레이크아웃 이미지. 열 가장자리를 지나서 크기를 조정하고 이동한 사진은 영웅 섹션 깊이를 제공합니다.
- 호버 피드백. 커서 아래에서 약간 들어 올리거나 기울이거나 커지는 카드는 클릭 가능한 것으로 읽혀집니다.
- 회전된 악센트. 배지, 우표, 라벨은 약간의 각도로 더 자연스럽게 배치됩니다.
- 비뚤어진 섹션. 칸막이나 단추에 몇 도의 기울어짐이 있으면 직사각형 단조로움이 깨집니다.
- 미러링된 자산. 두 번째 이미지를 내보내는 대신 화살표나 그림 하나를 뒤집습니다.
비디오 자습서 #
게시된 페이지에서 확장 기능 활성화부터 호버플립까지 모든 컨트롤이 실제로 작동하는지 확인하세요.
자주 묻는 질문 #
Elementor 에서 요소를 회전하거나 크기를 조정하려면 어떻게 해야 합니까?
마스터 애드온 확장 탭에서 변환 확장을 활성화하고 요소를 선택한 다음 고급 탭에서 변환을 엽니다. 활성화 변환을 켠 다음 회전 또는 크기 조절; 캔버스는 슬라이더를 드래그할 때 변경 내용을 실시간으로 미리 봅니다. 고급 탭의 Elementor 자체 변환 섹션에서는 유사한 컨트롤을 무료로 제공합니다.
호버에 다른 변환을 적용할 수 있나요?
예. 패널에는 별도의 Normal 및 Hover 탭이 있습니다. Normal 에서 휴지 값을 설정하고 Hover 에서 hover 값을 설정한 다음 전환 기간 슬라이더를 사용하여 요소가 두 상태 간에 얼마나 빨리 애니메이션되는지 제어합니다.
변환이 내 페이지 레이아웃을 깨뜨리나요?
아니요. CSS 변환은 시각적인 것일 뿐이므로 요소는 레이아웃에서 원래 공간을 유지하고 주변 콘텐츠는 리플로우되지 않습니다. 변환된 요소는 설계상 이웃과 겹칠 수 있으므로 오프셋을 확인하기 위해 태블릿과 모바일을 미리 볼 수 있습니다. 여전히 올바른 모습입니다.
확장에는 어떤 변환이 포함되나요?
X 와 Y 를 번역하고,X, Y 와 Z 를 회전하고,X 와 Y 를 스케일링하고,X 와 Y 를 스큐하고,Flip Horizontal,Flip Vertical 을 각각 일반 상태와 호버 상태에서 사용할 수 있습니다. 슬라이더는 반응성이 뛰어나므로 장치마다 값이 다를 수 있습니다.
Transforms 확장은 무료인가요?
아니요. Transforms 는 Master Addon 의 Pro 확장 프로그램입니다. Elementor 는 또한 유사한 컨트롤이있는 Advanced 탭에 무료 Transform 섹션이 있으며 Transforms 확장 페이지에서는 두 가지를 비교합니다.
감싸는 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 확장을 변환합니다 elementor 패널 내부에 CSS 변환 툴킷을 건네줍니다: 호버 상태와 부드러운 전환이 포함된 상태에서 무엇이든 이동,회전, 크기 조정,스큐, 뒤집기. 하나의 브레이크아웃 이미지 또는 하나의 호버 리프트로 시작하여 거기에서 빌드하는 것과 자연스럽게 짝을 이룹니다 입구 애니메이션 확장 움직이는 요소와 전체 라인업의 경우 마스터 애드온 위젯 및 확장 나머지는 덮는다.
