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