플립박스
페이지에 있는 부동산 한 조각이 두 가지 이야기를 전달할 수 있다면 어떨까요? Master Addons Flipbox Element 를 사용하면 가능합니다. 이것은 단순한 카드가 아닙니다 – 역동적이고 양면적인 경험입니다. 아이콘과 제목이 있는 매력적인 앞면부터 시작하세요. 그런 다음 호버링 시 우아하게 뒤집어 자세한 설명,콜투액션 또는 뒷면의 추가 정보를 공개합니다. 여러 스타일의 사전 설정과 12 개가 넘는 부드러운 애니메이션 중에서 선택하세요. 놀라움과 참여를 유도하는 기능 하이라이트,서비스 쇼케이스,팀 프로필 또는 창의적인 콜투액션에 완벽한 요소입니다.
다중 디자인 사전 설정 및 애니메이션 사전 설정
먼저,네 가지 스타일 사전 설정에서 기본 모양을 선택합니다: 클래식 기본값,전면 이미지,대각선 및 전면 아이콘. 각 사전 설정은 초기 시각적 레이아웃을 변경합니다. 그런 다음 거대한 라이브러리에서 애니메이션 스타일을 선택하여 생생하게 구현합니다. 간단한 Flip Horizontal 또는 Vertical,정교한 3D Flip,부드러운 Fade 또는 Cube 회전,Rollover 또는 Diagonal 과 같은 창의적인 옵션을 통해 알 수 있습니다. 이 조합을 사용하면 Flipbox 의 동작을 사이트의 에너지 - 미묘하거나 극적인 것과 완벽하게 일치시킬 수 있습니다.
- 4가지 스타일 기초: 기본, 전면 이미지, 대각선 및 전면 아이콘 사전 설정 디자인 중에서 선택하세요.
- 광범위한 애니메이션 라이브러리: 플립, 페이드, 큐브, 롤오버, 3D 플립을 포함한 15+ 애니메이션 중에서 선택합니다.
- 효과 제어: 기본적으로 호버링 시 애니메이션 트리거가 발생하여 직관적이고 대화형 경험이 생성됩니다.
듀얼 사이드 콘텐츠 빌더
콘텐츠의 완전한 두 얼굴을 독립적으로 구축하십시오. 앞 상자의 경우 아이콘 (Stacked 또는 Framed 스타일 선택), 강력한 제목 및 짧은 티저 설명을 추가합니다. SEO 용 정렬 및 제목 HTML 태그를 설정합니다. 뒤 상자의 경우 다른 내용으로 프로세스를 반복하십시오 – 설명을 확장하거나 자세한 내용을 추가하거나 전적으로 클릭 유도 문구에 집중하십시오. 이 2 단계 접근 방식을 사용하면 앞면으로 놀리고 뒤면으로 전달할 수 있습니다.
- 독립 콘텐츠 패널: 전면 상자와 후면 상자 콘텐츠에 대해 완전히 별도의 컨트롤(아이콘, 제목, 설명).
- 아이콘 스타일 옵션: 아이콘을 콘텐츠 탭에서 직접 쌓기 (고체) 또는 프레임 (경계) 로 표시합니다.
- 전략적 메시징: 헤드라인 혜택은 앞면을 사용하고 세부 정보, 기능 또는 사회적 증거는 뒷면을 사용합니다.
- 구조 제어: 각 측면의 콘텐츠에 대해 독립적으로 정렬(왼쪽, 중앙, 오른쪽)을 설정합니다.
호버가 있는 CTA 버튼
뒷 상자는 정보만을 위한 것이 아닙니다 – 액션을 위한 것입니다. 커스터마이징 가능한 버튼 텍스트 (“지금 구매” 또는 “자세히 알아보기”와 같은) 가 있는 명확한 액션 버튼과 링크를 포함합니다. 그런 다음 완벽하게 디자인합니다. 일반 상태와 호버 상태를 별도로 스타일링하여 텍스트 색상,타이포그래피, 배경 색상,경계, 경계 반경 및 패딩을 제어합니다. 이렇게 하면 플립박스의 공개가 별도의 위젯 없이도 변환에 이르는 직접적인 경로로 전환됩니다.
- 직접 클릭 유도 문구: 뒤집기 후 뒷면에 나타나는 텍스트와 링크가 있는 버튼을 추가합니다.
- 전문 버튼 스타일링: 광택 버튼에 테두리 반경, 패딩 및 배경 컨트롤을 사용합니다.
Flipbox에 대해 자주 묻는 질문
호버가 없는 모바일 장치에서는 어떤 일이 발생합니까?
플립 상호작용은 일반적으로 모바일 기기의 탭에 의해 트리거됩니다. 사용자는 앞 상자를 탭하여 뒤로 뒤집고,다시 탭하여 뒤로 뒤집을 수 있습니다. 따라서 터치스크린에서 완벽하게 기능하고 직관적으로 작동합니다.
앞면의 아이콘 대신 이미지를 사용할 수 있나요?
예! 스타일 사전 설정 중 하나를 “앞 이미지”라고 합니다. 이 사전 설정을 선택하면 아이콘 선택기가 이미지 업로더로 변경되어 앞 상자의 기본 비주얼로 사진,로고 또는 그래픽을 사용할 수 있습니다.
플립박스 콘텐츠가 반응형인가요?
물론입니다. 내부의 텍스트,아이콘, 버튼은 다양한 화면 크기에 맞게 스케일링 및 랩핑됩니다. 설정한 Flip Box Height 도 반응형이지만 필요한 경우 Elementor 의 반응형 편집 모드를 사용하여 모바일에 맞게 특별히 조정할 수 있습니다.
이 요소의 실제 용도는 무엇입니까?
- 서비스 상자: 정면: 서비스 아이콘 & 이름 (예를들면, “웹 디자인”). 뒤: 묘사 & “견적 받기” 단추.
- 팀 프로필: 앞: 사진 및 이름. 뒤: 바이오 & 소셜 링크.
- 제품 특징: 앞: 기능 아이콘 & 제목. 뒤: 세부 사양 & “제품보기”링크.
- 통계: 앞: 큰 숫자. 뒤: 그것이 의미하는 것과 소스 링크.
별도의 버튼 없이 전체 플립박스를 페이지에 연결할 수 있나요?
기본적으로 버튼에만 링크를 추가할 수 있습니다. 하지만 우리의 래퍼 링크 확장의 도움으로 엔티어 플립 박스를 연결할 수 있습니다.
올바른 애니메이션을 어떻게 선택합니까?
사이트의 속도를 고려하십시오. 기업 또는 클린 사이트의 경우 Flip Horizontal/Vertical 또는 Fade 를 사용하십시오. 크리에이티브,테크 또는 포트폴리오 사이트의 경우 3D Flip,Cube 또는 Rollover 가 더 많은 개성을 더할 수 있습니다. 몇 가지 미리보기 – 최고의 것은 매끄럽고 메시지에서 산만하지 않은 느낌.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
