호버에서 뒤집는 카드는 같은 공간에 두 배의 내용을 보여줍니다. The 플립박스 위젯 인 Elementor용 마스터 애드온 양면 상자를 제공합니다: 아이콘, 제목, 설명이 있는 전면과 자체 텍스트와 버튼으로 시야에 들어오는 후면입니다.
애니메이션을 선택하고 양면을 채우고 버튼을 추가한 다음 각 면을 스타일링합니다. 일반 페이드부터 전체 3D 큐브까지 30 개가 넘는 플립 효과가 있습니다. 이 가이드는 위젯의 모든 설정을 살펴봅니다.
Flipbox 위젯이 하는 일 #
위젯은 두 얼굴에서 플립 카드를 구축합니다. The 프론트 박스 방문자가 가장 먼저 보는 것은 무엇입니까: 아이콘이나 이미지, 제목, 설명. 그 위로 마우스를 올리면 카드가 뒤집힙니다 백 박스는 자체 제목과 설명, 그리고 어디서나 링크할 수 있는 버튼이 있습니다.
세 개의 탭이 전체를 실행합니다. 콘텐츠 애니메이션, 앞면과 뒷면 텍스트, 버튼을 누르고 있습니다. 스타일 각 얼굴의 상자 높이, 테두리, 색상 및 타이포그래피를 처리합니다. 고급 일반적인 Elementor 간격 및 가시성입니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
- 양면의 텍스트와 아이콘, 뒷면 버튼의 링크입니다.
Flipbox 위젯을 추가하는 방법 #
Elementor 편집기에서 을 엽니다 요소 패널 및 검색 플립박스또는 마스터 애드온 섹션으로 스크롤합니다 (위젯은 보라색 MA 배지를 가지고 있습니다). 페이지로 드래그하면 편집 할 수있는 샘플 앞면과 뒷면이로드됩니다.
애니메이션 스타일을 설정합니다 #
열다 콘텐츠 탭. 그만큼 스타일 사전 설정 섹션이 유지됩니다 디자인 변형 그리고 the 애니메이션 스타일그리고 그 아래에는 전면 상자, 후면 상자 및 동작 버튼 섹션이 있습니다.
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 애니메이션 스타일 드롭 다운은 재미있는 부분입니다. 그것은 삼십 가지 이상의 옵션을 수행하므로 동일한 카드가 뒷면으로 뒤집거나,바래거나, 미끄러지거나,입방체로 만들 수 있습니다.
- 수평 뒤집기 및 수직 뒤집기: 각 축의 클래식 카드 뒤집기.
- 큐브(상단 하단, 하단 상단, 왼쪽, 오른쪽): 면 사이의 3D 큐브 회전.
- 3d 플립, 페이드, 페이드 업, 롤오버: 부드러운 당신이 미묘한 것을 원할 때 드러냅니다.
- 슬라이드 방향 및 대각선: 뒷면을 측면이나 모서리에서 밀어 넣습니다.
앞 상자를 설정합니다 #
열다 프론트 박스 섹션. 이것은 사람들이 호버링하기 전에 보는 얼굴이므로 뒤집기를 획득해야 합니다.
- 아이콘 스타일 및 아이콘: 라이브러리에서 아이콘을 선택하거나 이미지로 전환하세요.
- 제목 및 설명: 앞면 제목과 텍스트에는 각각 AI 쓰기 옵션이 있습니다.
- 정렬 및 제목 HTML 태그: 내용을 정렬하고 제목 수준(H1~H6)을 설정합니다.
뒤 상자를 설치하십시오 #
열다 백 박스 시야로 뒤집히는 얼굴 섹션. 앞면과 동일한 필드가 필요하므로 앞면의 짧은 티저가 뒷면의 실제 디테일로 이어질 수 있습니다.
- 아이콘: 뒷면에 대한 별도의 아이콘입니다.
- 제목 및 설명: 뒷면 제목과 텍스트입니다.
- 정렬 및 HTML 태그: 뒤쪽의 레이아웃 및 방향 수준.
동작 버튼 추가 #
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 동작 버튼 섹션은 뒷면에 있습니다. 라벨과 라벨이 가리키는 위치를 설정하여 호버링하면 제품,양식 또는 다른 페이지로 바로 연결될 수 있습니다.
- 버튼 텍스트: 시작 또는 자세히 알아보기와 같은 레이블입니다.
- 링크: 버튼이 열리는 URL과 일반적인 Elementor 링크 옵션이 있습니다.
플립 카드를 스타일링하십시오 #
열다 스타일 탭. 그만큼 일반 섹션은 경계를 설정하고 여기서 가장 중요한 설정은 다음과 같습니다 플립 박스 높이는 양면에 하나의 고정된 크기를 제공합니다.
일반에서는 분리됩니다 프론트 박스 그리고 백 박스 섹션. 각각 고유한 배경색 또는 이미지,제목 및 설명 색상,타이포그래피, 아이콘 색상이 있으므로 원하는 경우 두 얼굴을 비슷하게 보일 수 없습니다.
일반적인 사용 사례 #
- 서비스 카드 앞면에 아이콘이 있고 뒷면에 세부 정보와 버튼이 있습니다.
- 팀 멤버들 앞면에 사진, 뒤집기에 약력을 표시합니다.
- 제품 하이라이트 호버링 시 가격과 구매 버튼이 표시됩니다.
- 기능 그리드 각 카드가 짧은 설명으로 바뀌는 곳입니다.
- 포트폴리오 타일 전면 썸네일, 후면 프로젝트 링크가 있습니다.
Flipbox 위젯 작업 팁 #
- 고정된 높이를 설정합니다. Flip Box Height 는 양면을 같은 크기로 유지하므로 뒤집을 때 카드가 점프하지 않습니다. 설정하지 않은 상태로 두면 뒷면이 길어지면 카드 크기가 중간 호버링으로 조정되어 꺼져 보입니다.
- 텍스트를 짧게 다시 유지하세요. 뒷면이 빠르게 뒤집히므로 전체 단락보다 촘촘한 선과 버튼이 더 잘 읽혀집니다.
- 애니메이션을 분위기에 맞춰보세요. 페이드 차분한 페이지에 맞게; 3D 플립과 큐브 대담한 영웅을 정장.
- 두 얼굴을 대조해 보세요. 뒷면의 다른 배경색은 한눈에 뒤집기를 분명하게 만듭니다.
- 항상 버튼을 링크. 뒷면 버튼은 보상이므로 다음 단계를 가리킵니다.
비디오 자습서를보십시오 #
화면에서 따라하는 것을 선호하시나요? 아래의 비디오 튜토리얼은 Flipbox 요소를 처음부터 끝까지 살펴보고 Elementor 편집기에서 애니메이션 스타일,앞면과 뒷면,스타일링이 어떻게 작동하는지 보여줍니다.
자주 묻는 질문 #
마스터 애드온의 Flipbox 위젯은 무엇입니까?
양면 카드를 만드는 Elementor 위젯입니다. 앞면에는 아이콘,제목 및 설명이 표시되고,호버링 시 자체 텍스트와 버튼이 있는 뒷면으로 뒤집힙니다. 모든 것은 코드 없이 Elementor 패널에서 설정됩니다.
Flipbox 위젯에는 몇 개의 플립 애니메이션이 있나요?
애니메이션 스타일 드롭다운에는 Flip Horizontal,Flip Vertical,Fade, Fade Up,Rollover, 3d Flip,the Cube 변형,슬라이드 방향,Diagonal 과 같은 30 개 이상의 효과가 포함되어 있습니다. 카드당 하나를 선택하여 뒷면이 어떻게 나타나는지 제어합니다.
플립 카드에 버튼을 추가할 수 있나요?
예. 콘텐츠 탭의 작업 버튼 섹션은 버튼 라벨과 해당 링크를 설정합니다. 버튼은 뒷면에 있으므로 카드가 뒤집힐 때를 표시하므로 방문자를 제품이나 양식으로 보내는 자연스러운 장소입니다.
앞면의 아이콘 대신 이미지를 사용할 수 있나요?
예. 앞 상자 섹션에서 아이콘 스타일을 전환하여 라이브러리 아이콘 대신 이미지를 선택할 수 있습니다. 스타일 탭에서는 양쪽 얼굴의 배경 이미지도 설정할 수 있으므로 이미지 주도 플립 카드를 쉽게 만들 수 있습니다.
플립 카드의 양쪽을 동일한 크기로 유지하려면 어떻게해야합니까?
스타일 탭의 일반 섹션에서 플립 박스 높이를 설정합니다. 양면에 하나의 고정 높이를 제공하므로 카드는 각 측면의 콘텐츠에 맞게 크기를 조정하는 대신 플립 전후에 동일한 크기를 유지합니다.
감싸는 #
Flipbox 위젯은 플랫 카드를 인터랙티브 카드로 바꿉니다: 애니메이션을 선택하고 앞면과 뒷면을 채우고 버튼을 연결한 다음 각 면을 스타일링합니다. 관련 위젯은 다음을 참조하세요 정보 상자 위젯 그리고 the 팀원 위젯, 전체를 찾아보세요 마스터 애드온 위젯 및 확장, 그리고 확인해 보세요 가격 페이지 각 계획에 포함된 내용입니다.
