갤러리 슬라이더 설정

갤러리 슬라이더는 클릭 가능한 미리보기 이미지와 썸네일 세트를 쌍으로 연결하므로 방문자는 한 번에 하나의 슬라이드를 클릭하는 대신 원하는 사진으로 바로 이동할 수 있습니다. The 갤러리 슬라이더 위젯 에서 마스터 애드온 프로 몇 분 안에 이 레이아웃을 빌드합니다. 이미지를 선택하고 축소판 그리드 또는 회전목마를 선택하고 Elementor 패널에서 모든 부분을 스타일링합니다.

이 가이드는 모든 설정을 안내하므로 다음을 구축할 수 있습니다 Elementor 갤러리 슬라이더 각 컨트롤이 무엇을 하는지 추측하지 않고.

갤러리 슬라이더 위젯이 수행하는 작업 #

위젯은 그리드 또는 축소판 회전목마 옆에 하나의 큰 미리보기 슬라이드를 보여줍니다. 축소판 또는 화살표를 클릭하면 미리보기가 변경됩니다. 캡션,자동 재생,무한 루프,페이드 또는 슬라이드 전환,미리보기 및 축소판에 대한 별도의 호버 상태가 모두 내장되어 있습니다. 포트폴리오,제품 사진,부동산 목록,이벤트 앨범 또는 방문자가 이미지 세트를 빠르게 탐색해야 하는 모든 페이지에 적합합니다.

시작하기 전에 #

• 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
• Elementor용 마스터 애드온 설치 및 활성. 도움이 필요하십니까? 참조 설치 가이드.
• A 마스터 애드온 프로 라이센스, 갤러리 슬라이더는 프로 위젯이기 때문에.
• 이상적으로는 비슷한 화면 비율로 미디어 라이브러리에 업로드된 이미지 세트입니다.

Elementor 갤러리 슬라이더 위젯을 추가하는 방법 #

Elementor 편집기를 열고 검색합니다 갤러리 슬라이더 elements 패널에서 또는 Master Addons 섹션으로 스크롤합니다. 모든 Master Addons 위젯에는 작은 MA 배지가 있으며,여러 개의 애드온 팩이 설치되어 있을 때 도움이 됩니다. 위젯을 섹션으로 드래그하십시오.

콘텐츠 탭에서 이미지 추가 #

갤러리 #

위젯이 비어 시작. 에서 콘텐츠 탭, 열기 갤러리 섹션으로 이동하여 아래의 더하기 버튼을 클릭하세요 이미지 추가.

WordPress 미디어 창이 열립니다 갤러리 만들기 화면. 슬라이더에서 원하는 이미지를 선택한 다음 클릭하면 갤러리가 삽입됩니다. 여기서 1 분 정도 시간을 내어 각 이미지에 대한 대체 텍스트와 캡션을 입력하십시오. 캡션 필드는 보이는 것보다 더 중요합니다: 위젯은 나중에 미리보기 이미지 아래에 인쇄 할 수 있으며 프런트 엔드에 캡션이 누락 된 경우이 화면이 가장 먼저 확인 할 수있는 곳입니다.

갤러리를 삽입한 후 편집기는 전체 레이아웃을 바로 보여줍니다: 탐색 화살표가 있는 왼쪽의 큰 미리보기,오른쪽의 축소판 그리드. 선택한 이미지는 갤러리 섹션 안에도 나타나며,이때 다시 정렬하거나 제거할 수 있습니다.

섬네일 #

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 섬네일 섹션에서는 미리보기 옆에 있는 작은 이미지를 제어합니다.

• 썸네일: 썸네일 영역을 완전히 표시하거나 숨깁니다.
• 회전목마/격자: 정적 그리드와 스크롤 캐러셀 사이를 전환합니다.
• 이미지 해상도: wordpress 는 축소판을 제공하는 크기입니다. 축소판 (150 x 150) 은 페이지를 가볍게 유지합니다.
• 열: 그리드에 대해 1~12 개의 열을 선택합니다. 2 개에서 3 개의 열로 이동하면 그리드가 크고 좁은 블록에서 더 단단한 블록으로 변경됩니다.
• 주문: 기본 순서를 유지하거나 이미지를 무작위로 섞습니다.
• 캡션: 썸네일에 캡션을 표시하거나 없음에 남겨두세요.

로 전환 중입니다 회전목마 모드는 그리드를 썸네일 스트립으로 대체하고 자체 설정 그룹을 추가합니다: 오리엔테이션 (수평 또는 수직), 보기당 슬라이드, 안 화살표 로 전환합니다 화살표 위치 드롭다운, 플러스 자동 재생, 무한 루프, 그리고 방향 썸네일 스트립만을 위한 컨트롤. 그리드는 12개 이하의 이미지에 더 잘 작동합니다; 그 이상 지나면 캐러셀은 많은 수직 공간을 절약합니다.

미리보기 #

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 또는 미디어 파일에 연결하거나 없음으로 유지합니다. 미디어 파일에 연결하면 라이트박스를 켤 수 있습니다.
• 캡션: 미리보기 아래에 이미지 캡션을 표시합니다.
• 방향: 왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로 슬라이드합니다.
• 무한 루프: 마지막 슬라이드 이후 첫 번째 슬라이드로 돌아갑니다.
• 자동 높이: 슬라이더가 각 이미지에 높이를 조정하자. 슬라이드가 변경되면 페이지가 조금 이동하지만 혼합 비율에 편리합니다.
• 자동 재생: 슬라이드 자동 진행 편집 아이콘을 클릭하여 조정합니다.
• 효과: 슬라이드,페이드, 큐브,플립 또는 커버플로우. With Fade,a 켄 번스 옵션은 스케일, 변환 원점, 지속 시간 및 완화 기능을 갖춘 느린 줌을 추가합니다.
• 속도(ms): 전환이 지속되는 기간 기본값은 1000 입니다.
• 화살표: 탐색 화살표를 표시하거나 숨기고 해당 화살표를 선택합니다 위치, 예를 들어 Top Left.

스타일 탭에서 슬라이더를 디자인합니다 #

레이아웃 #

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 레이아웃 섹션에서는 미리보기가 축소판을 기준으로 위치하는 위치를 결정합니다. 미리보기 위치 top, Right, Bottom, Left를 제공합니다.Top 또는 Bottom을 사용하면 미리보기 아래 또는 위에 썸네일이 정렬되고 a 수평 정렬 컨트롤은 다음과 같이 나타납니다 회전목마 너비 슬라이더. 왼쪽이나 오른쪽으로,당신은 a 를 얻습니다 미리보기 너비(%) 대신 슬라이더.

• 스택: 레이아웃이 Tablet & Mobile 과 같이 수직으로 쌓일 때를 선택합니다.
• 미리보기 너비(%): 얼마나 많은 수평 공간을 미리보기에 걸립니다. 60 와 70 퍼센트 사이의 어딘가는 3 열 격자 옆에 멋지게 앉아 있습니다.
• 간격: 미리보기와 축소판 사이의 간격입니다.

미리보기 #

스타일 탭의 미리보기 섹션은 큰 슬라이드 컨테이너를 스타일링합니다.

• 사용자 정의 높이: 자동 높이를 재정의합니다.
• 배경 색상: 이미지 뒤의 영역을 채웁니다.
• 테두리 유형: 기본값, 없음, 솔리드, 더블, 점선, 점선 또는 홈이 있으며 활성화된 경우 너비와 색상 제어 기능이 있습니다.
• 테두리 반경 및 상자 그림자: 모서리를 둥글게 돌고 슬라이드를 페이지에서 들어 올립니다.
• 화살표: 와 함께하는 헌신적인 그룹 크기, 패딩, 테두리 반경, 전환, 그리고 분리됩니다 기본값, 호버, 그리고 장애인 상태, 각각 고유한 색상과 배경색을 가지고 있습니다.

캡션을 미리 봅니다 #

콘텐츠 탭에서 캡션을 활성화한 경우 이 섹션에서 캡션을 배치하고 스타일을 지정합니다. 수직 정렬 슬라이드의 상단, 중간 또는 하단에 캡션을 배치합니다 수평 정렬 왼쪽,중앙, 오른쪽,정당화를 제공합니다. 또한 얻습니다 타이포그래피, 패딩, 여백, 국경 유형, 그리고 테두리 반경 컨트롤.

미리보기 호버 효과 #

미리보기 호버 효과 방문자가 슬라이드 위로 마우스를 가져가면 캡션을 애니메이션화합니다. Pick an 효과, 설정하세요 전환, 그런 다음 스타일을 지정합니다 기본값 그리고 호버 색상, 배경 유형, 불투명도 및 텍스트 그림자가 있는 상태입니다.

섬네일 #

스타일 탭의 섬네일 섹션에서는 작은 이미지를 처리합니다: 수직 정렬 전체 블록에 대해, 수평한 간격 그리고 수직 간격 섬네일 사이, 플러스 국경 유형 그리고 테두리 반경.

썸네일 호버 효과 #

이 섹션은 세 가지 주에 걸쳐 축소판을 스타일링합니다: 기본값, 호버, 그리고 활동적인 (현재 슬라이드와 일치하는 축소판). 그만큼 이미지 그룹 커버 배경 색상, 불투명도, 스케일, 박스 섀도우, 그리고 CSS 필터. 상자 밖으로,활동적인 썸네일은 0,65 불투명도에 앉습니다 그래서 활동적인 것은 두드러집니다. The 오버레이 그룹은 색상 또는 그라데이션 레이어를 추가합니다 블렌드 모드, 여백, 불투명도및 국경 통제.

a 도 있네요 패턴 기성품 스타일 사전 설정이 있는 스타일 탭 하단의 섹션. 동일한 섹션이 많은 Master Addons 위젯에 표시됩니다.

실시간 결과를 확인하세요 #

페이지를 미리 보려면 눈 아이콘을 클릭하세요. 방문자는 큰 미리보기 옆에 있는 썸네일 그리드를 볼 수 있습니다. 썸네일을 클릭하면 바로 미리보기가 바뀌고 화살표가 슬라이드를 순서대로 통과하며 캡션이 각 이미지 뒤에 옵니다.

일반적인 사용 사례 #

• 포트폴리오 쇼케이스: 한 번의 클릭으로 프로젝트의 나머지 부분이 포함된 하나의 큰 영웅 이미지입니다.
• 제품 페이지: 확대된 미리보기와 썸네일 피커가 포함된 클래식 매장 레이아웃입니다.
• 부동산 목록: 구매자가 페이지를 떠나지 않고 방을 뒤집을 수 있도록 하세요.
• 이벤트 또는 웨딩 앨범: 전체 세트를 보이게 유지하면서 사진 한 장을 강조 표시합니다.

더 나은 갤러리 슬라이더를 위한 팁 #

• 이미지 종횡비를 일치시킵니다. 자동 높이는 자르기 놀라움을 방지하지만 일관된 비율이 더 깨끗해 보이고 레이아웃이 점프하는 것을 방지합니다.
• 올바른 결의안을 제공하십시오. 미리보기는 전체, 그리드는 섬네일 (150 x 150). 업로드하기 전에 압축; 에 대한 우리의 가이드를 참조하십시오 최고의 워드 프레스 이미지 최적화 플러그인.
• 미디어 라이브러리에 캡션을 작성하세요 갤러리를 삽입하기 전에 모든 슬라이드가 준비됩니다.
• 자동 재생 속도를 합리적으로 유지하십시오. 방문자에게 각 이미지를 실제로 볼 수 있는 시간을 제공하세요.
• Active state 를 사용한다. 비활성 썸네일의 기본 불투명도는 이미 눈을 안내하고 있습니다; 활성 썸네일의 경계선이나 약간의 눈금이 더욱 선명해집니다.

비디오 자습서 #

대신 설정을 보는 것을 선호하시나요? 이 비디오는 위젯을 끌어들이는 것부터 라이브 페이지의 완성된 슬라이더까지 전체 과정을 다룹니다:

자주 묻는 질문 #

감싸는 #

마스터 애드온 갤러리 슬라이더 위젯 (Pro)는 전체 미리보기 및 썸네일 패턴을 다룹니다: 그리드 또는 캐러셀 썸네일, 모든 측면의 미리보기, 캡션 및 주별 스타일링은 모두 하나의 패널에서 사용자 정의 코드 없이 제공됩니다.

이미지를 표시하는 더 많은 방법을 보려면 다음을 확인하세요 이미지 회전목마, 필터링 가능한 갤러리, 그리고 고급 이미지 docs 또는 당사의 옵션을 비교해 보세요 Elementor 이미지 캐러셀 가이드. 플러그인의 다른 모든 것을 보려면 다음을 찾아보세요 마스터 애드온 위젯 및 확장 컬렉션 또는 가격 계획.