Elementor 는 멋진 웹 사이트를 쉽게 만들 수있는 강력한 페이지 빌더이며 기본 Flipbox 위젯은 대화 형 3D 효과를 추가하는 간단한 방법을 제공합니다. 문제? 프로 기능인데 디자인이나 애니메이션은 한정되어 있습니다.
마스터 애드온은 플립박스 위젯도 제공하는 강력한 Elementor 애드온입니다. 무료이며 Elementors Flipbox 위젯보다 더 큰 사용자 정의가 가능합니다.
마스터 애드온을 사용하면 기본 Elementor 위젯이 할 수없는 방식으로 사용자를 이동,변형 및 참여시키는 시각적으로 눈에 띄는 3D 플립 박스를 만들 수 있습니다.
이 가이드에서는 마스터 애드온으로 최고 수준의 3D 플립박스를 만들고 눈에 띄는 눈길을 끄는 디자인을 만드는 방법을 보여 드리겠습니다.
마스터 애드온으로 3D Elementor Flipbox 만들기
벽돌 하나하나 가서 우리만의 것을 만들어 보세요 플립박스 사용하여 마스터 애드온. 결국 당신은 자신의 독특한 하나를 만드는 방법에 대한 매우 명확한 이해를해야합니다.
1 단계: Elementor 용 마스터 애드온 설치
Master Addons Flipbox 위젯을 사용하기 전에 먼저 해야 합니다 설치 및 활성화 마스터 애드온 플러그인. 방법은 다음과 같습니다:
1. WordPress 대시보드에서 다음으로 이동하세요 플러그인 > 새로 추가.
2. 검색 창에서 “Master Addons for Elementor”를 검색합니다.
3. 클릭하세요 지금 설치하세요 그리고 나서 활성화 플러그인이 설치되면.
활성화되면 Flipbox를 포함한 Master Addons 위젯을 Elementor 편집기 내에서 사용할 수 있습니다.
2 단계: Flipbox 위젯 추가하기
이제 플러그인이 설치되었으니 Flipbox 를 페이지에 추가해 보겠습니다
1. Elementor 편집기에서 페이지를 엽니다. 레이아웃으로 Flexbox 또는 그리드를 선택하십시오.
2. 왼쪽 패널에서 다음을 검색합니다 플립박스. “가 있는 Flipbox 위젯이 표시되어야 합니다마” 태그.
3. 드래그 앤 드롭 the 플립박스 페이지의 원하는 섹션으로 위젯. 여기서 주목해야 할 중요한 점은 플립 박스로 작업 할 때마다 flexbox 를 사용하는 것이 좋습니다 플립박스가 잘 보이도록 하기 위해서.
추가되면 기본 플립박스 디자인이 캔버스에 나타나 사용자 정의할 준비가 됩니다.
3 단계: 3D Elementor Flipbox 만들기
이제 플립박스에 프리미엄처럼 보이는 3D 효과를 얻기 위해 조정할 수 있는 설정에 도달했습니다.
먼저 꺼져.
1. 작풍 미리 설치
스타일 사전 설정에서 다음을 설정합니다 디자인 변형 그리고 애니메이션 스타일
디자인 변형으로 상자의 앞면을 사용자 정의할 수 있습니다.: 로 설정할 수 있습니다 기본값, 이미지, 대각선, 전면 아이콘.
애니메이션 스타일을 사용하면 플립박스가 애니메이션되는 방식을 정확하게 선택할 수 있습니다.
마스터 애드온에는 20 + 프리미엄 애니메이션이 있습니다. 간단한 수평 및 수직 플립에서 3D 플립, 큐브 애니메이션, 전복 효과 등.
마스터 애드온은 당신에게 당신의 플립 박스에 동적 느낌을주는 전용 3D 플립 애니메이션을 제공합니다. 당신은 심지어이 애니메이션의 플립 스타일을 사용자 정의 할 수 있습니다. 당신이 그것을 선택하면,새로운 옵션이 “에 나타납니다스타일일반 설정 아래의 “탭: 3D 플립 스타일.
2. 앞면 내용
를 클릭하세요 플립박스 편집할 위젯.
아래 콘텐츠 탭에는 콘텐츠를 추가할 필드가 표시됩니다 프론트 박스. 여기에 제목,설명, 이미지 또는 아이콘을 추가할 수 있습니다.
3. 뒤로 내용
아래로 스크롤합니다 뒤로 콘텐츠 같은 섹션 콘텐츠 탭.
마찬가지로,플립박스가 뒤집혔을 때 표시할 콘텐츠를 추가합니다. 새 제목,텍스트 또는 클릭 유도 문구 버튼을 추가할 수 있습니다.
플립박스의 양쪽을 별도로 스타일링할 수 있습니다 스타일 각 측면에 대해 글꼴, 색상, 패딩, 테두리 등을 조정하는 탭입니다.
4 단계: 다른 확장 기능으로 3D Flipbox 강화
Elementor용 마스터 애드온은 기본적인 플립박스 기능에만 그치지 않습니다—상호작용, 부드러운 애니메이션 및 매력적인 효과를 추가하도록 설계된 다양한 확장 기능을 통해 플립박스를 완전히 새로운 수준으로 끌어올립니다.
플립박스를 더욱 역동적이고 시각적으로 매혹적이며 사용자 친화적으로 만들 수 있는 강력한 기능을 살펴보겠습니다.
고급 3D 변환을 만들거나 시차 효과를 추가하거나 입구 애니메이션을 미세 조정하려는 경우 Master Addon은 플립박스를 한 단계 더 발전시키는 데 필요한 모든 것을 제공합니다.
변환:
- 에서 고급 탭, 당신은 찾을 수 있습니다 변환합니다 설정.
- 여기서는 조정할 수 있습니다 플립박스 회전 x, Y, Z 축에서 더 복잡한 3D 효과를 만들어냅니다.
- 가지고 놀아보세요 스케일, 번역하다, 그리고 스큐 더욱 역동적인 플립박스를 위한 옵션입니다.
Rellax(시차 효과):
- Rellax 효과를 활성화하려면 다음으로 이동하세요 고급 탭하고 스크롤하여 렐락스 설정.
- 효과를 활성화하고 조정합니다 스크롤 속도 사용자가 스크롤할 때 플립박스가 나머지 콘텐츠와 다른 속도로 이동하는 시차 효과를 생성합니다.
부동 효과:
- 플로팅 효과를 추가하여 사용자가 페이지와 상호 작용할 때 플립박스가 미묘하게 움직이도록 합니다. 이 옵션은 다음에서 찾을 수 있습니다 모션 효과 섹션.
- 움직임의 유형을 선택하고 (예를 들어, 위로 또는 아래로 떠) 원하는대로 강도를 조정하십시오.
도구 설명:
- 마스터 애드온은 또한 당신이 추가 할 수 있습니다 도구 설명 사용자가 요소 위로 마우스를 가져가면 나타나는 플립박스에 툴팁은 디자인을 어지럽히지 않고 추가 정보나 컨텍스트를 제공할 수 있습니다.
- 고급 설정에서 플립박스의 앞면과 뒷면 콘텐츠 모두에 대한 도구 설명을 활성화하고 사용자 정의할 수 있습니다.
- 도구 설명 텍스트, 위치 (상단, 하단, 왼쪽 또는 오른쪽) 및 스타일 (색상, 글꼴 크기) 을 디자인에 맞게 사용자 정의합니다.
다른 유용한 확장
- 아래 모션 효과 탭, 활성화 입구 애니메이션 플립박스가 페이지에 표시될 때 주의를 끄는 효과를 적용합니다.
- 페이드 인, 슬라이드 또는 바운스와 같은 다양한 애니메이션 중에서 선택하여 플립박스가 뷰포트에 들어갈 때 팝업되도록 할 수 있습니다.
- 플립박스를 뒤집었을 때 부드러운 공개 애니메이션을 원하시면 다음을 활성화하세요 드러내다 아래의 옵션 고급 설정.
- 이 기능을 사용하면 플립박스의 뒷면 내용을 점차적으로 공개하여 세련된 전환을 만들 수 있습니다.
- 사용 표시 조건 플립박스가 나타나는 시기와 위치에 대한 규칙을 설정하려면 장치 유형 (데스크탑,태블릿, 모바일) 또는 스크롤 위치와 같은 조건까지 기반으로 가시성을 제어할 수 있습니다.
Flipbox 미리보기 및 마무리
플립박스를 커스터마이즈했으면 이제 실제로 작동하는 모습을 볼 차례입니다.
- 를 클릭하세요 눈 아이콘 엘리멘터 패널 하단에 있는 편집기에서 플립박스를 미리 볼 수 있습니다.
- 플립박스가 다양한 장치 (데스크탑, 태블릿, 모바일) 에서 어떻게 작동하는지 테스트하여 반응성이 뛰어나고 모든 곳에서 멋지게 보이도록 하세요.
- 외관이 만족스러울 때까지 디자인, 애니메이션 속도 또는 위치를 최종적으로 조정하세요.
만족하면 을 클릭합니다 출판하다 귀하의 사이트에 플립박스를 라이브로 만들기 위해.
결론
Elementor용 마스터 애드온은 표준 플립박스 경험에 더 많은 향신료를 추가하여 진정으로 역동적이고 대화형 디자인을 만들 수 있는 다양한 고급 기능을 제공합니다.
3D 애니메이션 효과와 함께 이동하려면 변환, 시차 효과, 부드러운 공개 전환 등과 같은 옵션이 있으며 기본 애니메이션을 넘어서는 방식으로 플립박스에 생명을 불어넣는 데 사용할 수 있습니다.
이 가이드를 따르면 눈에 띄는 플립박스를 사이트에 쉽게 추가하여 사용자 참여와 시각적 매력을 모두 높일 수 있습니다. 따라서 Master Addon 에 뛰어들어 방문자에게 깊은 인상을 줄 멋진 3D 플립박스를 만들기 위한 실험을 시작해 보세요!
