애니메이션 워드프레스 갤러리는 새로운 기능은 아니지만 웹사이트에 가장 멋진 기능 중 하나입니다. 이미지는 모든 것에 생명을 불어넣습니다. 애니메이션 효과와 결합하면 보는 사람에게 더 큰 영향을 줍니다.
워드프레스에는 이미지 또는 이미지 갤러리에 애니메이션을 추가하는 다양한 방법이 있습니다. 사용자 정의 코드를 사용하거나 좋은 위젯을 사용할 수 있습니다. 어느 쪽이든 가장 좋은 방법은 워드프레스와 호환되는 좋은 플러그인을 사용하는 것입니다.
이 블로그에서는 인기 플러그인을 사용하여 애니메이션 이미지 갤러리를 만들어 보겠습니다. Elementor 그리고 Element Pack. 시작해 보겠습니다!
Elementor 소개
Elementor 는 워드프레스 기반의 페이지 빌더 플러그인입니다. 코딩에 대한 사전 지식이 없어도 수많은 웹사이트를 만들 수 있는 시스템입니다.
코드 대신 드래그 앤 드롭으로 웹사이트에 기능을 추가할 수 있는 위젯이 있습니다. 워드프레스에서 사용할 수 있는 가장 쉬운 페이지 구축 시스템입니다. 5M+ 활성 설치 수입니다.
우리는 다음을 기반으로 시스템을 만들었습니다. Elementor 를 클릭하고 마찬가지로 애니메이션 워드프레스 갤러리를 만듭니다.
Element Pack용 Elementor 플러그인
Element Pack 플러그인은 위젯 번들입니다. Elementor의 인벤토리에는 소수의 위젯만 있으므로 타사 플러그인의 추가 지원이 필요합니다. Element Pack 는 완벽한 타사 플러그인입니다. 185개의 필수 위젯.
이 블로그에서는 Element Pack의 위젯을 사용하여 애니메이션 워드프레스 갤러리를 만들 수 있습니다. 플러그인 확인 여기.
웹사이트에 애니메이션 워드프레스 갤러리 만들기
애니메이션 갤러리는 기본적으로 애니메이션 효과가 있는 이미지 갤러리입니다. 애니메이션이 적용된 워드프레스 갤러리를 만들려면 고급 이미지 갤러리 위젯 기준 Element Pack.
이 위젯은 Elementor에서 제공하는 위젯보다 훨씬 낫습니다. 다양한 갤러리 스킨을 설정할 수 있고, 벽돌 또는 정돈된 스타일과 라이트박스를 사용할 수 있습니다.
전반적으로 위젯을 사용하면 마스킹 옵션과 애니메이션으로 이미지를 사용자 지정할 수 있습니다. 그렇기 때문에 애니메이션 갤러리를 만들기에 가장 적합한 도구입니다.
지금 바로 만들어 보세요!
1단계
먼저 Element Pack 플러그인을 설치하세요. 그런 다음 대시보드 > Element Pack > 핵심 위젯 을 클릭하고 고급 이미지 갤러리 위젯.
2단계
새 페이지 안에 열이 2개인 섹션을 만듭니다. 원하는 모든 정보 또는 텍스트를 한 열 안에 넣고 고급 이미지 갤러리 위젯을 다른 열에 추가합니다.
3단계
애니메이션 워드프레스 갤러리를 만들려면 이미지를 선택해 보겠습니다. 아래 회색 상자를 클릭합니다. 콘텐츠 탭 > 이미지 갤러리 섹션으로 이동합니다.
4단계
모든 이미지를 선택하면 이미지를 삭제하거나 추가할 수 있는 새 창이 열립니다. 완료한 후에는 갤러리 삽입 버튼을 클릭합니다.
5단계
항상 이미지 크기 에 전체 를 사용하여 이미지 품질을 보존합니다.
6단계
에서 이미지 갤러리의 시각적 효과를 높이기 위한 마스킹 스타일을 선택합니다. 이미지 마스크 옵션을 선택합니다.
7단계
섹션에서 갤러리 레이아웃를 클릭하고 이미지 갤러리를 필요에 맞게 조정합니다. 열 수를 최대 6개까지 설정한 다음 열과 행 간격을 조정합니다.
8단계
이제 애니메이션 워드프레스 갤러리의 첫 번째 애니메이션 레이어를 만들겠습니다. 세 번째 섹션에서 추가를 켜고 기울기 효과 스위처.
이를 통해 이미지 갤러리의 각 이미지에 마우스를 가져가면 기울기 애니메이션이 표시됩니다. 참고로 틸트 스케일 를 클릭합니다.
9단계
다음으로 애니메이션 효과의 두 번째 레이어를 추가해 보겠습니다. 애니메이션 효과의 고급 탭을 클릭하고 모션 효과 섹션으로 이동합니다. 그런 다음 시차 효과 스위처를 클릭하고 효과를 적용합니다.
10단계
이제 아래의 같은 섹션에서 입구 애니메이션. 애니메이션 속도를 설정하거나 지연을 조정합니다. 이것이 세 번째 애니메이션 레이어가 됩니다.
미리 보기
지금까지 작업한 모든 내용을 저장하면 애니메이션 워드프레스 갤러리는 다음과 같은 모양이 됩니다. 멋지지 않나요?
결론
애니메이션 갤러리는 사용자 경험을 한 차원 높여줍니다. 따라서 세련된 웹사이트에 추가할 수 있는 훌륭한 요소입니다. 앞서 설명한 것처럼 애니메이션 갤러리는 몇 분 안에 쉽게 만들 수 있습니다.
함께 해주셔서 감사합니다.
