플립박스 위젯 설정

호버에서 뒤집는 카드는 같은 공간에 두 배의 내용을 보여줍니다. 무료 플립박스 위젯 에서 Elementor용 마스터 애드온 양면 상자를 제공합니다: 아이콘, 제목, 설명이 있는 전면과 자체 텍스트와 버튼으로 시야에 들어오는 후면입니다.

애니메이션을 선택하고 양면을 채우고 버튼을 추가한 다음 각 면을 스타일링합니다. 22 개의 플립 효과가 있습니다: 무료 플러그인에 6 개,Master Addons Pro 가 포함된 16 개,일반 페이드에서 3D 큐브까지 이 가이드는 위젯의 모든 설정을 거칩니다.

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 애니메이션 스타일 드롭 다운은 재미있는 부분입니다. 그것은 22 옵션을 수행하므로 동일한 카드가 뒷면으로 뒤집거나,바래거나, 미끄러지거나,입방체로 이동할 수 있습니다. Flip Horizontal,Flip Vertical,Fade, Flip Box,Flip Box Fade and Fade Up 은 무료입니다; 나머지는 프로가 필요합니다.

• 수평 뒤집기 및 수직 뒤집기: 각 축의 클래식 카드 뒤집기.
• 큐브(상단 하단, 하단 상단, 왼쪽 오른쪽, 오른쪽 왼쪽): 면 사이의 3D 큐브 회전 (Pro).
• 페이드 앤 페이드 업 (무료), 3d 플립 앤 롤오버 (Pro): 부드러운 당신이 미묘한 것을 원할 때 드러냅니다.
• 슬라이드 방향 및 대각선(Pro): 뒷면을 측면이나 모서리에서 밀어 넣습니다.

앞 상자를 설정합니다 #

열다 프론트 박스 섹션. 이것은 사람들이 호버링하기 전에 보는 얼굴이므로 뒤집기를 획득해야 합니다.

• 아이콘 스타일 및 아이콘: 라이브러리에서 아이콘을 선택합니다. 전면의 이미지는 Pro 의 Front Image 디자인 변형과 함께 제공됩니다.
• 제목 및 설명: 앞면 제목과 텍스트에는 각각 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 위젯은 플랫 카드를 인터랙티브 카드로 바꿉니다: 애니메이션을 선택하고 앞면과 뒷면을 채우고 버튼을 연결한 다음 각 면을 스타일링합니다. 관련 위젯은 다음을 참조하세요 정보 상자 위젯 그리고 the 팀원 위젯, 전체를 찾아보세요 마스터 애드온 위젯 및 확장, 그리고 보세요 Flipbox 위젯 페이지 데모 및 Elementor Pro Flip Box와의 비교를 위해.