플립 박스는 두 개의 얼굴을 가진 카드입니다. 앞면에는 아이콘과 짧은 제목이 있습니다. 그것을 호버링하면 카드가 설명과 버튼을 들고 뒷면으로 회전합니다. Elementor Pro 는 하나를 배송합니다. 하나를 얻기 위해 Pro 가 필요하지 않습니다.
무료 마스터 애드온 Flipbox 위젯 일반 Elementor에 30개가 넘는 하나를 추가합니다 애니메이션 뒤집기, 두 얼굴 모두 독립적으로 스타일링되었으며 원하는 곳 어디든 연결되는 버튼입니다. 이 가이드에서는 빌드, 대부분의 플립 문제를 해결하는 하나의 설정, 게시 후 사람들을 사로잡는 모바일 동작을 다룹니다.
실제로 플립 박스는 무엇입니까
플립 박스는 호버링이나 탭에서 얼굴을 교환하는 양면 카드입니다. 앞면에는 제목이 있는 아이콘이나 이미지가 표시됩니다. 뒷면에는 더 긴 설명과 일반적으로 버튼이 표시됩니다. 설명이 카드 아래가 아닌 뒤에 있기 때문에 세부 사항을 전달하면서 그리드를 깨끗하게 유지합니다.
스캔 가능한 행을 먼저 보여준 다음 관심 있는 사람이 직접 세부 정보를 가져오도록 하세요. 아무도 복사 벽을 읽어 자신이 온 서비스 하나를 찾을 필요가 없습니다. 그것이 바로 서비스에 도달하는 이유입니다.
잘 처리하는 네 가지 패턴:
- 서비스 그리드. 앞면은 서비스 이름을 지정하고 뒤면은 서비스 페이지에 대한 설명을 제공합니다.
- 팀 카드. 앞면에는 사진과 이름, 뒷면에는 약력과 링크가 있습니다. 숨길 필요가 없다면 평야입니다 팀원 섹션 는 더 간단한 빌드입니다.
- 특징 타일. 앞쪽에 아이콘이 있고 뒤에 사양이 있습니다.
- 스탯카드. 숫자가 의미하는 바를 뒤집는 앞면의 큰 숫자입니다.
Elementor에 플립박스 위젯이 있나요?
Elementor Pro 에는 하나가 있습니다. 무료 Elementor 는 그렇지 않습니다. 튜토리얼이 많이 흐려지면 사람들이 패널에없는 위젯을 사냥하러 가기 때문에 그 구별이 중요합니다.
그래서 플립 박스에 대한 네 가지 정직한 경로가 있으며, 각각은 다른 것을 요구합니다:
| 노선 | 비용 | 비용이 드는 것 |
|---|---|---|
| Elementor Pro 플립 박스 | 유료 라이센스 | 구축한 모든 사이트에 Pro 가 필요합니다. 기본적인 플립,슬라이드 및 줌 효과를 다룹니다. |
| 핸드 코딩된 CSS 3D 변환 | 무료 | 시각적 편집 없음 클라이언트가 복사 변경을 요청하고 스타일시트로 돌아올 때까지 괜찮습니다. |
| 마스터 애드온 플립박스 | 무료 | 플러그인 하나 더. 두 얼굴은 사전 설정과 서른 플러스 애니메이션과 함께,일반 편집기에서 설계되었습니다. |
| 기타 무료 애드온 | 무료 | Fancy Elementor Flipbox 와 HappyAddons 는 모두 그렇게합니다. 어느 쪽이든 다른 플러그인의 업데이트주기를 채택하고 있습니다. |
Elementor Pro 에 대해 이미 비용을 지불했다면 Flip Box 를 사용하고 추가 플러그인을 건너 뛰십시오. 필요하지 않은 것을 설치하면 상금이 없습니다. 무료 Elementor 에 있다면이 가이드의 나머지 부분이 경로입니다.
시작하기 전에
- Elementor가 설치되어 활성화된 WordPress입니다.
- Elementor 용 마스터 애드온 설치 및 활성화. WordPress.org 에서 무료이며 30,000 + 사이트에서 실행됩니다.
- 두 얼굴 모두에 대한 아이콘,복사 및 대상 링크. 먼저 정렬합니다. 복사본을 발명하는 동안 카드를 디자인하는 것이 라이브 페이지에서 “Lorem ipsum”으로 끝나는 방법입니다.
단계별로 플립 박스를 만듭니다
1 단계: Flipbox 위젯을 사용하도록 설정합니다
마스터 애드온은 모든 위젯을 토글 뒤에 보관하므로 사용하지 않는 위젯은 절대 로드되지 않습니다. 로 이동 마스터 애드온 → 설정, 열어보세요 요소 탭, Flipbox 찾기, 켜기, 저장.
토글이 없나요? 플러그인을 업데이트하세요. 버전과 이전 빌드 간에 요소 탭이 커져서 그룹화가 다르게 되었습니다.
2 단계: 페이지에 위젯을 드롭
Elementor 로 아무 페이지나 편집하고,위젯 검색에 “Flipbox”를 입력하고,컨테이너로 드래그합니다. 이미 뒤집어 놓은 채 양면에 샘플 콘텐츠가 로드됩니다.
물건을 바꾸기 전에 미리보기에 올려 놓습니다. 기본 애니메이션 속도에 대한 느낌을 원합니다. 왜냐하면 사람들이 가장 자주 혼자 남겨두고 카드가 느려지는 이유를 궁금해하는 설정이기 때문입니다.
3단계: 디자인 변형을 선택하세요
콘텐츠 탭이 a에서 열립니다 스타일 사전 설정 두 개의 컨트롤을 보유한 섹션: 디자인 변형 그리고 애니메이션 스타일. 그 아래에는 앞 상자, 뒤 상자 및 동작 버튼이 있습니다.
디자인 변형은 전면의 배열 방식을 변경합니다. 실질적인 결정은 아이콘 또는 사진이 메시지를 전달하는지 여부입니다. 아이콘 주도 변형은 서비스 그리드 및 기능 행에 적합합니다. 이미지 주도 변형은 팀원,포트폴리오 타일 및 제품 카드에 적합하며 얼굴이나 사진이 어떤 아이콘보다 더 많은 작업을 수행합니다.
4 단계: 애니메이션을 선택합니다
애니메이션 스타일 드롭 다운은 삼십 개 이상의 효과를 수행. 그들은 네 그룹으로 떨어집니다:
- 수평 뒤집기 / 수직 뒤집기. 각 축의 클래식 카드 회전. 읽기 가능하며 다른 것을 선택할 이유가 없을 때 안전한 기본값입니다.
- 큐브(상단 하단, 하단 상단, 왼쪽, 오른쪽). 얼굴 사이의 3D 큐브 회전. 극적인. 8 개의 격자가 아닌 영웅에게 사용하십시오.
- 3d 플립, 페이드, 페이드 업, 롤오버. 다른 곳에서 이미 모션이 있는 페이지에 대해 더 부드러운 공개가 가능합니다.
- 슬라이드 방향 및 대각선. 뒷면은 측면이나 모서리에서 밀어 넣습니다. 회전하는 것이 무겁게 느껴질 수 있는 모바일에서는 잘 읽혀집니다.
하나를 골라 섹션 전체에 걸쳐 커밋합니다. 여섯 개의 카드를 여섯 가지 다른 방법으로 뒤집는 것은 장난스럽게 보이지 않고 깨진 것처럼 보입니다. 혼합해야 할 유일한 좋은 이유는 두 섹션이 의도적으로 분리 된 느낌을 가져야 할 때입니다.
커밋하기 전에 모션 스타일을 나란히 보고 싶습니까? The Elementor 애니메이션 효과 가이드 일반적인 것을 미리 봅니다 3D 플립 박스 연습 큐브 및 3d 플립 옵션 뒤에 있는 원근법 설정에 대해 더 자세히 설명합니다.
5 단계: 앞면 쓰기
오픈 프론트 박스. 이것은 호버를 획득해야하는 얼굴이므로 생각보다 적은 복사본을 얻거나 더 많은 복사본을 얻지 못합니다.
- 아이콘 스타일과 아이콘. 아이콘 라이브러리에서 가져오거나 이미지로 전환합니다. 마스터 애드온 추가 배송 아이콘 라이브러리 당신이 그들을 필요로하는 경우 글꼴 멋진 넘어.
- 제목. 세 개에서 다섯 개 단어죠. 태블릿 너비에서 한 줄로 살아남아야 합니다.
- 설명. 한 줄. 제목과 설명 필드 모두 a 를 갖습니다 AI 로 쓰기 붙어있는 경우 패널에 내장 된 옵션.
- 정렬 및 제목 HTML 태그. H1 부터 H6 까지. 이것을 제대로 설정하십시오. 이미 H2 가있는 섹션 안에 H2 제목이있는 6 개의 플립 박스의 그리드는 페이지에 7 개의 H2 를 제공하고이를 플래그하는 감사 도구를 제공합니다. a 에서 반복되는 블록에도 동일한주의가 적용됩니다 사용자 정의 Elementor 레이아웃.
6 단계: 뒷면 쓰기
같은 분야, 다른 직업. 백 박스 자체 아이콘, 제목, 설명, 정렬 및 제목 태그를 사용하므로 두 얼굴이 전혀 일치하지 않아도 됩니다.
이 섹션을 유용하게 유지하는 규칙: 앞은 약속을 하고, 뒤는 그것을 지킨다니다. 앞면에 “웹 디자인”이라고 적혀 있으면 뒷면에 실제로 포함 된 내용이 나와 페이지로 연결됩니다. 앞면이 그들을 잡았 기 때문에 누군가가 맴돌았습니다. 다른 슬로건이 아닌 정보로 그것을 갚으십시오.
두세 문장. 더 길고 카드가 태블릿 너비에 비좁게 느껴지는데 카드는 더 좁지만 텍스트는 줄어들지 않았습니다.
7 단계: 작업 버튼을 추가합니다
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 동작 버튼 섹션은 라벨과 링크를 설정하고 버튼은 뒷면에만 렌더링됩니다. 다음 페이지가 실제로 제공하는 내용으로 텍스트를 설정합니다. “자세히 알아보기”는 괜찮습니다. 링크가 가격으로 이동하면 “가격 보기”가 더 좋습니다.
순수 정보 그리드에서 버튼을 완전히 건너뜁니다. 설명으로 뒤집어서 멈추는 카드는 완벽하게 좋은 카드입니다. 섹션이 변환 작업을 할 때 추가하십시오.
대부분의 플립 박스 불만을 해결하는 하나의 설정
로 전환하십시오 스타일 탭 및 열기 일반. 라는 컨트롤이 있습니다 플립 박스 높이.
설정하세요.
설정되지 않은 상태로 두고 각 카드는 콘텐츠가 더 많은 면으로 크기를 조정하므로 긴 뒷면이 뒤집힐 때 카드 크기가 중간 호버링됩니다. 행이 점프합니다. 하나의 서비스 설명이 나머지보다 두 줄을 더 길게 실행했기 때문에 일치해야 하는 카드는 서로 다른 높이로 끝납니다. Flipbox 문서에는 이를 첫 번째 작업 팁으로 나열하고 있으며 가장 자주 그대로 두는 설정입니다.
200px 는 감각적인 바닥입니다. 350px 는 대부분의 기능 그리드에 적합합니다. 컨테이너 레벨에서 한 번 설정하고 행의 모든 카드가 일치합니다.
General 에 있는 동안 애니메이션 지속 시간을 400ms 에서 700ms 사이로 유지합니다. 더 빠르게 읽기는 글리치로 표시됩니다. 더 느리게 하고 플립이 끝나기 전에 커서가 계속 움직입니다.
두 얼굴을 스타일링
일반 아래에서는 분리됩니다 프론트 박스 그리고 백 박스 패널은 각각 고유한 배경색 또는 이미지, 제목 및 설명 색상, 타이포그래피 및 아이콘 색상을 갖습니다.
두 얼굴을 진정으로 다르게 만드십시오. 약간 더 창백한 회색 뒷면으로 뒤집히는 옅은 회색 앞면은 노출이 아닌 렌더링 결함처럼 보입니다. 대부분의 디자인은 앞면의 부드러운 색조와 뒷면의 브랜드 색상에 착지하여 방 전체에서 뒤집기가 분명합니다.
사이트의 다른 모든 곳에서 버튼과 일치하도록 버튼의 일반 상태와 호버 상태를 스타일링하십시오. 다른 CTA 와 전혀 닮지 않은 플립 박스 버튼은 내장 된 광고로 읽습니다.
전체 카드를 클릭 가능하게 만듭니다
기본적으로 링크는 카드가 아닌 버튼에 있습니다. 사람들은 카드 본문을 클릭하려고 시도하지만 아무 일도 일어나지 않고 떠납니다. 실제 클릭 비용이 드는 작은 것입니다.
수정은 Flipbox 위젯에 없습니다. 그것은 래퍼 링크 확장는, 단일 링크의 모든 요소를 감싸는 마스터 애드온 설정에서 활성화한 별도의 모듈입니다. 켠 다음 플립 박스 컨테이너에 적용합니다.
한 가지 주의: 전체 카드가 어딘가에 연결되고 버튼이 다른 곳에 연결되면 방문자가 먼저 치는 것이 승리하고 다른 하나는 사용되지 않습니다. 같은 목적지를 가리키거나 버튼을 놓습니다.
모바일: 사람을 잡아내는 부분
전화는 호버가 없습니다. 플립 대신 탭에 발사. 첫 번째 탭은 카드를 뒤로 뒤집고,두 번째 탭은 집으로 뒤집고,버튼은 등이 표시되면 자체 탭이 필요합니다.
누군가가 당신의 행동 촉구에 도달하기 전에 두 번의 탭입니다. 데스크탑에서는 뒷면이 커서 이동에 비용이 듭니다. 모바일에서는 고의적 인 노력이 필요하며 의미있는 방문자 중 일부는 결코 그것을 쓰지 않습니다.
두 번째 탭은 또한 문제가 발생하는 곳입니다. 앞으로 뒤집어지지만 뒤로 뒤집히지 않는 플립 박스의 보고서는 Elementor 커뮤니티 스레드에서 정기적으로 나타나며,편집기 미리보기는 터치 동작을 잡을 수 있을 만큼 안정적으로 재현하지 못합니다. 에디터의 반응형 모드에서는 이를 표시하지 않으므로 배송하기 전에 실제 핸드셋에서 테스트하십시오.
여기서 어떤 스타일링 선택보다 더 중요한 규칙은 다음과 같습니다:
절대 필수 정보를 뒷면에만 넣지 마세요. 모바일 방문자가 가지고 있어야하는 경우 가격,전화 번호,주소 또는 예약 링크가 앞면 또는 카드에서 완전히 벗어난 곳으로 이동합니다. 뒷면을 페이지가 의존하는 것이 아니라 추가 세부 정보를위한 장소로 취급하십시오.
카드는 브레이크 포인트를 가로질러 스케일링하고 감싸며,높이는 반응형이므로 Elementor 의 반응형 모드에서 모바일을 위해 조일 수 있습니다. 그리드가 계획하지 않은 너비로 끊어지면 다음을 확인하십시오 표준 요소 중단점 먼저, 그 다음 추가 사용자 정의 중단점 크기가 필요한 경우 Elementor가 배송되지 않습니다.
접근성, 솔직히
플립 박스는 키보드 사용자와 화면 판독기가 마우스 사용자가 할 수있는 방식으로 수행 할 수없는 상호 작용 뒤에 내용의 절반을 숨깁니다. 섹션이 실행되기 전에 정렬 할 가치가 있으며 이후에는 그렇지 않습니다.
두 가지가 그것을 방어 가능하게 만듭니다:
- 보이는 초점 상태 추가 따라서 페이지를 탭하는 키보드 사용자는 카드를 보고 트리거할 수 있습니다.
- 다른 방법으로 뒷면 콘텐츠에 접근할 수 있도록 하세요, 가까운 섹션, 링크된 페이지, 접이식 블록 서비스 설명의 유일한 경로가 호버인 경우 일부 방문자는 경로가 없습니다.
검색 엔진은 뒷면 텍스트를 색인화합니다. 왜냐하면 요청에 따라 로드하는 것이 아니라 DOM 에 있기 때문에 플립 뒤에 복사본을 숨기면 크롤링이 진행되는 한 페이지에서 제거되지 않습니다. 사람이 도달할 수 있는지 여부는 별도의 질문이며 먼저 대답해야 하는 질문입니다.
플립 박스를 건너뛸 때
다른 위젯이 더 나은 서비스를 제공하는 세 가지 상황.
뒷면 텍스트는 모든 독자에게 중요합니다. 모든 사람이 설명이 필요하다면,그것을 위해 호버를하지 마십시오. An 인포박스 4개의 장치에서 테스트할 수 있는 숨겨진 항목이나 상호 작용이 없는 아이콘, 제목 및 복사본 줄을 표시합니다.
당신은 두 번째 얼굴이 아닌 모션을 원합니다. 매력이 매끄러운 호버 효과이고 실제 뒷면 콘텐츠가 없는 경우 확장을 변환합니다 아무도 요청하지 않은 얼굴을 채우기 위해 복사본을 발명하지 않고도 모든 요소에 3D 움직임을 추가합니다.
페이지가 이미 이동합니다. 시차,스크롤 공개,애니메이션 영웅,그리고 이제 뒤집는 카드의 격자. 방문자가 그것의 어떤을 등록 중지 움직임의 일정 금액을 과거,각 효과는 브라우저에 대한 더 많은 작업을 추가하기 전에 이미 페이지에 무엇을 계산하고,느리게로드하는 경우 속도를 고쳐라 다른 애니메이션을 추가하기 전에.
그리고 존중 가치가 소프트 캡: 이상 여섯 개 또는 여덟 개의 플립 상자는 한 페이지에 속임수로 팁. 하나 또는 두 개의 섹션은 달콤한 자리입니다.
무료 vs 프로
Flipbox 위젯은 무료 플러그인에 있습니다. 모든 디자인 변형,모든 애니메이션,독립적 인 스타일의 양면,무제한 사이트. Pro 는 플립 박스를 잠금 해제하지 않고 주변의 다른 것들을 잠금 해제합니다.
| 특징 | 무료 | 프로 |
|---|---|---|
| Flipbox 위젯, 모든 디자인 변형 | 예 | 예 |
| 모든 30+ 플립 애니메이션 | 예 | 예 |
| 양면 별도 스타일링 | 예 | 예 |
| 플립 박스 높이 및 반응형 컨트롤 | 예 | 예 |
| 래퍼 링크 확장 | 예 | 예 |
| 전체 80+ 위젯 라이브러리 | 부분적인 | 예 |
| 위젯 빌더 및 템플릿 키트 | 아니요 | 예 |
| 우선 지원 | 커뮤니티 | 예 |
플립 박스가 당신이 온 것이라면, 무료가 전체 답입니다 클라이언트 사이트에서 동일한 카드 레이아웃을 다시 작성하는 경우, the 위젯 빌더 재사용 가능한 위젯으로 한 번 저장하면 유료 계층에 표시됩니다. 전체 분석 가격 페이지그리고 우리에서 사용할 수 있는 다른 것이 무엇인지에 대한 더 넓은 시각을 제공합니다 elementor 애드온을 모아보세요.
자주 묻는 질문
Elementor의 플립 박스는 무엇입니까?
플립 박스는 양면 카드입니다. 앞면에는 제목이 있는 아이콘이나 이미지가 표시되고,호버링이나 탭 시에는 더 긴 설명과 일반적으로 버튼이 있는 뒷면으로 회전합니다. 깨끗한 앞면 뷰와 선택 사항인 디테일이 텍스트 블록을 이길 때마다 서비스 그리드,팀 카드,기능 타일 및 통계 카드에 사용됩니다.
Elementor 에서 플립 박스 위젯은 무료입니까?
Elementor 의 자체 Flip Box 위젯은 Elementor Pro 의 일부이므로 무료가 아닙니다. Master Addons Flipbox 위젯은 WordPress.org 의 무료 플러그인에 포함되어 있으며 일반 Elementor 와 함께 작동하므로 Pro 라이센스없이 빌드 할 수 있습니다.
Elementor 에서 플립 박스 위젯을 어떻게 추가합니까?
마스터 애드온 → 설정 → 요소 아래에서 Flipbox 를 활성화한 다음 Elementor 편집기에서 페이지를 열고 위젯 검색에 “Flipbox”를 입력한 다음 컨테이너로 드래그합니다. 검색에 표시되지 않으면 토글이 아직 켜져 있지 않거나 편집기에서 다시 로드해야 합니다.
모바일에서 플립 박스가 다시 뒤집히지 않는 이유는 무엇입니까?
터치스크린에서 플립은 호버링이 아닌 탭에서 실행되므로 첫 번째 탭에서는 뒷면이 표시되고 두 번째 탭에서는 반환해야 합니다. 두 번째 탭에서는 아무 작업도 수행하지 않을 때 일반적으로 탭 처리 시 충돌이 발생합니다. 반응형 모드가 아닌 실제 장치에서 테스트하고,격리하는 동안 한 행에 카드 한 장을 보관하고,필수 정보를 뒷면에만 배치하지 마십시오.
앞면의 아이콘 대신 이미지를 사용할 수 있나요?
예. 이미지를 사용하려면 앞 상자 섹션에서 아이콘 스타일을 전환하거나 이미지 주도 디자인 변형을 선택합니다. 스타일 탭은 또한 두 얼굴 모두에 대한 배경 이미지를 설정하므로 완전히 이미지 주도 카드는 간단합니다.
버튼뿐만 아니라 플립박스 전체를 클릭 가능하게 만들 수 있나요?
위젯 내부가 아닙니다. 링크는 기본적으로 버튼에 있습니다. 전체 카드를 클릭 가능하게 만들려면 마스터 애드온 설정에서 래퍼 링크 확장 기능을 활성화하고 전체 카드를 하나의 링크로 감싸는 플립 박스 컨테이너에 적용하십시오.
카드의 양면을 같은 크기로 유지하려면 어떻게해야합니까?
스타일 탭의 일반 섹션에서 플립 박스 높이를 설정합니다. 양면에 하나의 고정 높이를 제공하므로 뒷면에 앞면보다 더 많은 텍스트가 표시될 때 카드의 중간 플립 크기가 조정되지 않습니다.
위젯에는 몇 개의 플립 애니메이션이 있습니까?
Flip Horizontal 과 Vertical 을 포함한 서른 이상,4 개의 Cube 방향,3d Flip,Fade, Fade Up,Rollover, the slide 방향과 Diagonal. 카드당 하나를 고릅니다.
관련 읽기
- 3D Elementor Flipbox 애니메이션을 만드는 방법
- Flipbox 위젯 문서, 모든 컨트롤을 순서대로
- Elementor 애니메이션 효과
- 이미지 핫스팟 위젯전체 카드를 뒤집는 대신 한 이미지 내부의 영역을 강조 표시하기 위한 것입니다
- Infobox 위젯아무것도 숨겨서는 안 될 때 정적 대안입니다
- 무료 Elementor 섹션 템플릿 가져오기 및 편집하려면
