호버 플립 카드 애니메이션이 포함된 Elementor 플립 박스 위젯
Flipbox 는 Elementor Pro 가 필요없는 Elementor 용 Master Addons 플립 박스 위젯입니다. 앞면에는 제목과 짧은 텍스트가있는 아이콘이나 이미지가 표시되고 호버링시 카드는 더 자세한 내용과 작업 버튼이있는 뒷면으로 바뀝니다. 위젯에는 기본 및 전면 아이콘 디자인과 6 개의 애니메이션이 함께 제공됩니다: 수평 뒤집기,수직 뒤집기,페이드, 플립 박스,플립 박스 페이드 및 페이드 업. 마스터 애드온 프로 front Image 와 Diagonal 디자인 및 Cube,Rollover 및 3D Flip 을 포함한 16 개의 애니메이션을 더 추가하여 총 22 개에 해당합니다. Elementor 자체는 Elementor Pro 에 플립 박스만 있습니다.
디자인 변형 및 플립 애니메이션
디자인 변형 전면 레이아웃 설정: 기본 및 전면 아이콘은 위젯, 전면 이미지 및 대각선 요구 프로와 함께 제공됩니다. 애니메이션 스타일 카드가 어떻게 회전하는지 설정합니다. 포함: Flip Horizontal,Flip Vertical,Fade, Flip Box,Flip Box Fade and Fade Up. Pro 는 네 개의 큐브 방향,Fade Hideback,Fade Up Hideback,네 개의 슬라이드 방향,두 개의 Diagonal 슬라이드,Fade In Out,Nananana, Rollover 및 자체 방향 설정이있는 3D Flip 을 추가합니다.
- 총 22개의 애니메이션: 6개가 포함되고 Pro가 포함된 16개.
- 플립은 데스크탑의 호버와 터치 스크린의 탭에서 실행됩니다.
- 섹션당 하나의 애니메이션을 사용하여 카드 행이 일관되게 느껴지도록 하세요.
듀얼 사이드 콘텐츠 빌더
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 프론트 박스 그리고 백 박스 각각은 기본,스택 또는 프레임 뷰와 원 또는 사각형 모양,제목, 설명,정렬 및 제목 태그가 있는 고유한 아이콘을 가지고 있습니다. 서비스 이름처럼 앞면을 짧게 유지하고 설명을 위해 뒷면을 사용합니다. 스타일 탭에서 각 얼굴은 고유한 배경,제목 및 설명 색상,타이포그래피, 아이콘 색상 및 테두리를 얻습니다.
- 각 얼굴마다 별도의 콘텐츠와 스타일링이 제공됩니다.
- 제목 HTML 태그 양쪽 면에 있으므로 카드 그리드는 깨끗한 제목 순서를 유지합니다.
- 에이 플립 박스 높이 일반에서 설정하면 두 면의 크기가 동일하게 유지됩니다.
호버가 있는 CTA 버튼
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 동작 버튼 버튼 텍스트와 링크가 있는 뒷면에 표시됩니다. 일반용 스타일을 지정하고 텍스트 색상,배경, 테두리,테두리 반경 및 패딩과 타이포그래피를 추가하여 호버링합니다. 버튼은 위젯 내부의 유일한 링크입니다. 전체 카드를 클릭 가능하게 만들려면 다음을 추가합니다 래퍼 링크 위젯에 대한 확장.
- 링크가 표시되는 경우 “가격 보기”와 같은 특정 라벨을 사용하십시오.
- 순수 정보 카드의 버튼을 건너뛰세요.
- 래퍼 링크를 사용하는 경우 버튼을 같은 페이지로 향하게 합니다.
플립박스를 한눈에
표에는 현재 위젯이 수행하는 작업이 나열되어 있으며 버전 3.2.6의 플러그인 소스에서 읽혀집니다.
| 항목 | 플립박스 |
|---|---|
| 디자인 변형 | 4: 기본 및 전면 아이콘 포함; Pro를 사용한 전면 이미지 및 대각선 |
| 애니메이션 | 22: 6 포함 (Flip Horizontal,Flip Vertical,Fade, Flip Box,Flip Box Fade,Fade Up) 및 16 with Pro (4 개의 큐브 방향,2 개의 Hideback 페이드,4 개의 슬라이드,2 개의 Diagonal 슬라이드,페이드 인 아웃,나나나나, 롤오버,3D 플립) |
| 앞면과 뒷면 콘텐츠 | 아이콘 또는 이미지(Pro Front 이미지 디자인 이미지), 자체 HTML 태그가 있는 제목, 각 면에 대한 설명 및 정렬 |
| 아이콘 스타일 | 기본, 적층 또는 프레임, 원 또는 정사각형 모양 |
| 트리거 | 데스크탑에 마우스를 올려 놓고 먼저 터치 스크린을 탭하십시오. 클릭 트리거 없음 |
| 전체 상자 링크 | 아니요. 뒤로 버튼은 링크를 전달합니다; 래퍼 링크 확장은 전체 카드를 클릭 가능하게 만듭니다 |
| 높이 조절 | 예, 플립 박스 높이 스타일, 일반 |
| 회전목마 모드 | 아니요 |
| 3D 플립 방향 | 프로 3D 플립 애니메이션에 4 방향 |
| 필요 | Elementor 및 마스터 애드온. 두 개의 추가 디자인과 16 개의 추가 애니메이션을위한 프로 |
Elementor Pro 플립 박스 vs 마스터 애드온 플립 박스
Elementor Pro 에는 자체 Flip Box 위젯이 있습니다. 이미 비용을 지불하면 다른 위젯이 필요하지 않을 수도 있습니다. 두 가지를 비교하는 방법은 다음과 같습니다.
| 특징 | Elementor Pro 플립 박스 | 마스터 애드온 플립박스 |
|---|---|---|
| 가격 | Elementor Pro가 필요합니다 | 마스터 애드온; Pro에서는 더 많은 디자인과 애니메이션을 볼 수 있습니다 |
| 플립 효과 | 방향과 3D 깊이로 뒤집기, 슬라이드, 푸시, 확대, 축소 및 페이드 | 6개는 애니메이션, 22개는 Pro, Cube, Rollover 및 3D Flip을 포함합니다 |
| 트리거 | 호버 | 호버; 먼저 터치 스크린을 탭하세요 |
| 정면 도표 | 없음, 이미지 또는 아이콘 | 아이콘 또는 Pro Front 이미지 디자인의 이미지입니다 |
| 전체 카드 링크 | 링크 켜기 적용: 전체 상자 또는 버튼만 해당 | 버튼만 사용하거나 래퍼 링크 확장자가 있는 카드 전체 |
| 버튼 | 예 | 네, Normal과 Hover 스타일링으로요 |
Elementor Pro 는 내장된 전체 상자 링크를 원한다면 더 간단합니다. Master Addon 은 Pro 없이 Elementor 에서 작동하며 자체 Pro 로 더 많은 애니메이션 선택권을 제공합니다. 아무것도 숨겨지지 않은 정적 카드의 경우 다음을 사용하십시오 정보 상자 위젯.
플립 카드 CSS 또는 플립 박스 위젯?
플립 카드는 플립 박스와 같은 것입니다: 뒷면으로 회전하는 앞면. 원근법,변환 스타일: preserve-3d 및 backface-visibility: hidden 을 사용하여 약 40 줄의 CSS 로 하나를 손으로 쓰고 HTML 위젯에 놓을 수 있습니다. 그 경로는 당신이 제어하는 페이지에 카드 한 장에 적합합니다.
CSS 버전에는 세 가지 반복되는 문제가 있습니다. 터치 스크린에는 호버가 없으므로 탭 핸들러를 추가하지 않으면 카드가 뒤집히지 않습니다. 두 면 모두 고정 높이가 필요하거나 회전하면서 카드가 점프합니다. 그리고 색상,텍스트 또는 아이콘에 대한 모든 변경은 종종 Elementor Pro 가 필요한 사용자 정의 CSS 필드 내에서 코드를 다시 편집하는 것을 의미합니다. Flipbox 위젯은 편집기 패널의 탭,높이 및 스타일을 처리하며 코드를 건드리지 않고 백 페이스 버튼,22 개의 애니메이션 및 카드 당 디자인 변형을 제공합니다.
플립 박스 아이디어 및 팁
플립 박스는 여전히 디테일을 전달하면서 그리드를 깨끗하게 유지합니다. 왜냐하면 설명이 카드 아래가 아닌 뒤에 있기 때문입니다. 서비스 그리드,앞면에 사진이 있고 뒷면에 약력이 있는 팀 카드,숫자가 의미하는 바를 뒤집는 기능 타일 및 통계 카드에 잘 작동합니다.
- 플립 박스 높이를 설정합니다. 그것이 없으면 뒷면이 길어지면 카드가 회전하고 행이 점프할 때 카드의 크기가 조정됩니다.
- 얼굴이 다르게 보이게. 앞면의 색조와 뒷면의 브랜드 색상이 뒤집기를 분명하게 만듭니다.
- 전화에 대한 계획. 터치 스크린에는 호버가 없으므로 카드가 탭에서 뒤집히고 버튼은 두 번째 탭이 필요합니다. 실제 전화에서 테스트하십시오.
- 전면에 필수 세부정보를 보관하세요. 가격, 전화번호, 예약 링크는 뒷면에만 표시되어서는 안 됩니다.
- 모션을 제한합니다. 페이지당 하나 또는 두 개의 플립 박스 행은 여섯 개의 다른 애니메이션보다 더 잘 읽습니다.
플립 박스 예제
아래의 각 데모는 위젯으로 구축 된 라이브 페이지입니다. 애니메이션 및 디자인 변형은 패널에서 그 중 하나를 다시 작성할 수 있도록 이름이 지정됩니다.
수직 뒤집기
- SaaS 분석 카드: 기본 디자인, 계획 설명으로 바뀌는 3개의 어두운 통계 카드.
- 장비 카드 격자: 기본 디자인, 2열 그리드에 6개의 제품 타일.
- 통계 및 종 그리드: 기본 디자인, 앞면에 숫자, 뒷면에 의미.
- 아치 제품 카드: 전면에 둥근 아치 모양이 있는 기본 디자인입니다.
수평 뒤집기
- 아이콘 전용 서비스 타일: 전면 아이콘 디자인, 짧은 서비스 광고문으로 바뀌는 4개의 프레임 아이콘.
- 벤투 서비스 타일: 벤토 레이아웃의 기본 및 전면 아이콘 카드가 혼합되어 있습니다.
- 시차 징계 카드: 기본 디자인, 서로 오프셋된 세 개의 카드.
- 최소 아이콘 타일: 전면 아이콘 디자인, 각각 하나의 아이콘이 있는 3개의 어두운 타일.
퇴색하다
- 전면 이미지 여행 카드: 전면 이미지 디자인(Pro), 전면 사진, 후면 여행 세부정보.
- 번호가 매겨진 장 행: 기본 디자인, 장 요약으로 페이드되는 넓은 행.
- 타임라인 런북 행: 기본 디자인, 명령으로 페이드되는 단계 카드.
플립 박스와 큐브
- 원형 상표 진열장: 라운드 카드에 플립 박스 애니메이션.
- 대각선 타일: 큐브 왼쪽 오른쪽 애니메이션(Pro)을 사용한 대각선 디자인(Pro).
- 고급 변환 효과: Transforms 확장과 결합된 Flipbox 카드.
3D 플립 및 슬라이드
- 커피 제품 카드: 3D 플립 애니메이션 (프로), 슬라이드 오른쪽에서 왼쪽 방향.
- 인터랙티브 미디어 쇼케이스: 각 카드에 다른 방향으로 3D 플립 (프로).
- 멀티 아이콘 카드: 한 줄로 왼쪽에서 오른쪽으로, 오른쪽에서 왼쪽으로, 위에서 아래로 슬라이드(Pro)합니다.
롤오버, 대각선 및 페이드 인 아웃
- 어두운 체육관 클래스 카드: 어두운 테마로 롤오버 애니메이션(Pro).
- 파스텔 아이콘 타일: 대각선 하단부터 상단까지 애니메이션(Pro)을 사용한 전면 아이콘 디자인.
- 그라데이션 백 카드: Fade In Out 애니메이션(Pro)을 그라데이션 뒷면으로 변환합니다.
Elementor에 Flip Box를 추가하는 방법
WordPress.org 에서 Elementor 와 Master Addons 플러그인이 필요합니다.
- 아래에서 Flipbox가 켜져 있는지 확인하세요 마스터 애드온, 위젯.
- Elementor 편집기에서 다음을 검색하세요 플립박스 그리고 컨테이너에 끌어 넣습니다.
- 디자인 변형과 애니메이션 스타일을 선택한 다음 카드를 마우스를 가져가서 미리 봅니다.
- 앞면 상자와 뒷면 상자를 채우십시오: 아이콘, 제목, 설명 및 제목 태그.
- 작업 버튼 텍스트와 링크를 추가합니다.
- 스타일, 일반, 세트로 설정됩니다 플립 박스 높이 따라서 카드의 크기는 뒤집기 중간에 조정되지 않고 각 면의 스타일을 지정합니다.
3D 효과를 보려면, 읽기 3D Elementor Flipbox 애니메이션을 만드는 방법. 모든 설정은 에 있습니다 Flipbox 위젯 설정.
Flipbox는 몇 가지 다른 Master Addons 위젯과 쌍을 이룹니다: 정보 상자 뒤집히지 않는 카드의 경우, 크리에이티브 버튼 그리드 아래에서 스타일이 지정된 클릭 유도 문구를 보려면 다음을 참조하세요.For a styled call to action under the grid, 이미지 호버 효과 뒷면 대신 캡션이 드러나는 사진의 경우 팀 멤버 소셜 링크가 있는 사람 카드의 경우 콘텐츠 전환 공개가 호버링이 아닌 클릭 시 이루어져야 하는 경우.
Flipbox에 대해 자주 묻는 질문
플립 박스는 휴대폰에서 어떻게 작동하나요?
터치 스크린은 호버가 없으므로 탭하면 카드가 뒤집힙니다. 뒷면 버튼은 뒤집기 후에 자체 탭이 필요합니다. 꼭 봐야 할 정보를 전면에 보관하고 실제 장치에서 테스트하십시오.
앞면의 아이콘 대신 이미지를 사용할 수 있나요?
예,Master Addons Pro 옵션인 Front Image 디자인 변형과 함께. 그렇지 않으면 전면에 아이콘을 사용하거나 스타일 탭에서 얼굴의 배경 이미지를 설정합니다.
Flipbox 위젯에 Master Addons Pro 가 필요합니까?
아니요. Flipbox 에는 기본 및 전면 아이콘 디자인과 6 개의 애니메이션이 포함된 Master Addons 플러그인이 함께 제공됩니다. Master Addons Pro 는 2 개의 디자인과 16 개의 애니메이션을 더 추가합니다.
클릭하면 플립 박스가 뒤집히나요?
플립카드는 플립박스와 같은가요?
예. 플립 카드는 동일한 효과에 대한 CSS 튜토리얼 이름입니다: 뒷면으로 회전하는 앞면. Flipbox 위젯은 편집기 패널에서 플립 카드를 구축,높이, 터치 스크린에 탭과 뒷면 버튼은 당신을 위해 처리.
Elementor에 플립박스 위젯이 있나요?
Elementor Pro 만이 하나 있습니다. Pro 가없는 Elementor 는 그렇지 않으므로이 Flipbox 위젯과 같은 애드온이 필요합니다.
별도의 버튼 없이 전체 플립박스를 페이지에 연결할 수 있나요?
위젯은 버튼만 연결합니다. 전체 카드를 클릭 가능하게 만들려면 카드를 켜십시오 래퍼 링크 flipbox 위젯에 대한 링크를 확장하고 추가합니다.
플립 애니메이션은 몇 개나 있나요?
총 22 개. Flip Horizontal,Flip Vertical,Fade, Flip Box,Flip Box Fade 및 Fade Up 은 위젯과 함께 제공됩니다. Cube,Rollover 및 3D Flip 을 포함한 다른 16 개는 Master Addons Pro 가 필요합니다.
회전목마에 플립박스를 넣을 수 있나요?
내장 설정이 아닙니다. 위젯에는 캐러셀 모드가 없습니다. 플립 박스를 템플릿으로 저장하고 에 표시합니다 이미지 회전목마 또는 루프 그리드를 사용하거나 대신 포장 용기에 카드를 놓습니다.
Elementor Pro Flip Box 와의 차이점은 무엇입니까?
Elementor Pro 는 방향 및 3D 깊이가있는 6 가지 효과,전체 상자 링크 옵션이 있으며 Elementor Pro 계획이 필요합니다. Flipbox 는 Pro 없이 Elementor 에서 작동하며 6 개의 애니메이션이 포함되어 있고 Master Addons Pro 가있는 22 개의 아이콘 또는 이미지 디자인이 있으며 Wrapper Link 확장자를 통해 전체 카드를 연결합니다.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
![Elementor용 마스터 애드온 게시물/페이지 복제기 확장: 랜딩 페이지를 생성하는 WordPress 페이지 목록의 MA 복제기 행 링크 - [복제된 #128] 초안](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
