갤러리 필드를 사용하면 편집자는 마스터 애드온으로 구축된 사용자 정의 위젯에 대한 전체 이미지 세트를 한 번에 선택할 수 있습니다 위젯 빌더. 템플릿이 세트 위로 반복되고 이미지당 하나의 항목을 인쇄하므로 위젯은 사진 수에 따라 커지거나 줄어듭니다. 사진 그리드,포트폴리오 벽,로고 행 및 이미지 슬라이더에 사용합니다.
갤러리는 Pro 필드입니다. 무료 플러그인에는 제한된 Widget Builder 가 포함되어 있으며 전체 필드 세트가 함께 제공됩니다 마스터 애드온 프로.
갤러리 필드가 하는 일 #
- Elementor 의 위젯 패널에 갤러리 상자를 추가합니다. 편집자는 미디어 라이브러리에서 여러 이미지를 한 번에 선택합니다.
- 이미지는 편집자가 배열한 순서대로 목록으로 저장됩니다. 각 이미지에는 다음이 있습니다
id그리고 aurl. - 템플릿은 a로 목록을 인쇄합니다
{% for %}루프. - 레이아웃은 CSS 에 달려 있습니다. 루프는 항목을 인쇄하고 그리드 또는 플렉스 컨테이너가 항목을 배열합니다.
아직 위젯을 구축하지 않았다면, 을 읽어보세요 위젯 빌더 개요 첫번째.
시작하기 전에 #
- Elementor가 설치되어 활성화된 WordPress입니다.
- Elementor 및 Master Addons Pro 용 마스터 애드온,둘 다 활성화됨. The 설치 가이드 설정을 다룹니다.
- 미디어 라이브러리의 일부 이미지.
- 위젯 빌더에서 열린 위젯. 이 가이드의 예는 갤러리 필드에 이름이 지정된 “사진 그리드” 위젯입니다
photos.
갤러리 필드를 추가하는 방법 #
- 로 이동 마스터 애드온 > 위젯 빌더 그리고 위젯을 엽니다.
- 에 콘텐츠 탭, 예를 들어 섹션을 추가 “갤러리”.
- 유형
gallery왼쪽의 필드 검색 상자에. - 드래그 갤러리 섹션으로. 그 설정은 왼쪽 사이드 바에서 열립니다.
갤러리 필드 옵션 설명 #
- 라벨 는 Elementor 의 갤러리 상자 위의 텍스트,예를 들어 “사진”입니다.
- 이름 는 필드의 고유 ID 및 예를 들어 반복하는 목록입니다
photos. 문자, 숫자, 밑줄만 표시됩니다. - 설명 elementor의 제어하에 나타납니다.
- 기본 이미지 가 있습니다 이미지 추가 자리 표시자 슬롯을 추가하는 버튼. 십자가를 제거할 슬롯과 해당 슬롯의 실제 이미지를 선택할 연필 위에 마우스를 올리세요.
우리의 테스트에서 기본 이미지 아래에 설정된 이미지는 Elementor 에 전달되지 않았습니다. 위젯의 새 복사본은 대신 단일 자리 표시자로 시작했는데 루프는 두 개의 빈 항목으로 읽습니다. 아래 템플릿은 해당 항목을 건너 뛰므로 편집자가 페이지에 위젯을 놓은 후 자신의 이미지를 추가하도록 계획하십시오.
더 아래의 공통 설정은 다른 필드에서와 마찬가지로 작동합니다.
템플릿의 이미지를 반복하세요 #
갤러리는 목록이다, 그래서 {{ photos }} 자체 인쇄에 아무것도 유용하지 않습니다. 그 위에 반복하고 루프 내부의 각 이미지를 인쇄:
{% if photos %}
<div class="photo-grid">
{% for img in photos %}
{% if img.url %}
<figure class="photo-cell">
<img src="{{ img.url }}" alt="">
</figure>
{% endif %}
{% endfor %}
</div>
{% endif %}
photos는 밭의 이름.img는 루프의 현재 이미지에 대해 선택한 이름입니다.{{ img.url }}는 이미지 파일 URL 과{{ img.id }}미디어 라이브러리 ID입니다.- 외부
{% if photos %}갤러리가 비어 있으면 전체 그리드를 건너뜁니다. - 내부
{% if img.url %}새 위젯이 시작하는 자리 표시자와 같이 URL이 없는 항목은 건너뜁니다.
CSS 탭에 항목을 배열합니다. 이 격자는 3 개의 동일한 열을 만들고 모든 사진을 동일한 모양으로 자릅니다:
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.photo-cell { margin: 0; overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 3; }
.photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }클릭 설정 저장 다 끝났을 때.
Elementor 에서 갤러리 컨트롤을 사용합니다 #
페이지에 위젯을 추가하거나 페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다. 갤러리 상자에는 선택한 이미지 수와 각 이미지의 축소판이 표시됩니다. 휴지통 아이콘은 전체 세트를 지웁니다.
썸네일을 클릭하여 WordPress 갤러리 창을 엽니다. 이미지를 드래그하여 순서를 변경하고 를 클릭하십시오 역순 뒤집으려면 사용하십시오 갤러리에 추가 더 많은 이미지를 선택하려면,이미지의 십자가를 클릭하여 제거하십시오. 클릭 갤러리 삽입 세트를 저장하려면. 그리드는 같은 순서로 업데이트됩니다.
일반적인 사용 사례 #
- 사진 및 포트폴리오 그리드.
- 클라이언트 또는 파트너를 위한 로고 월.
- 이미지당 하나의 슬라이드를 인쇄하는 루프가 있는 이미지 슬라이더.
- 카드 안에 전후 또는 제품 이미지가 설정됩니다.
갤러리 분야와 함께 작업하기 위한 팁 #
- 항상 마크업을 감싸세요
{% if img.url %}루프 내부, 그래서 새 위젯은 빈 이미지 상자를 표시하지 않습니다. - 사용
aspect-ratio그리고object-fit: cover그래서 크기가 다른 사진들이 줄을 섭니다. - CSS 가 열을 결정하도록 합니다. 그리드는 템플릿 변경 없이 임의의 수의 이미지를 래핑합니다.
- 추가
alt속성. 루프는 다른 필드에서 캡션이나 대체 텍스트를 인쇄해야 하는 경우 이미지 ID 를 제공합니다. - 하나의 이미지에 대해 다음을 사용하십시오 미디어 분야. 각각 고유한 텍스트나 링크가 필요한 이미지의 경우 다음을 사용하십시오 리피터 필드.
자주 묻는 질문 #
Gallery 필드는 무료인가요?
아니요. 갤러리는 위젯 빌더의 Pro 필드 중 하나이므로 Master Addons Pro를 위젯에 추가하려면 먼저 활성화해야 합니다.
왜 {{사진}}은 아무것도 인쇄하지 않습니까?
갤러리는 이미지 목록을 보유하고 있으므로 토큰 자체는 인쇄하는 데 유용하지 않습니다. Loop over it with {% for img in photos %} 및 인쇄 {{ img.url }} 루프 내부.
새 위젯에 빈 이미지 상자가 표시되는 이유는 무엇입니까?
우리의 테스트에서 루프가 URL 없이 두 개의 항목으로 읽는 위치 지정자 항목으로 새로운 위젯이 시작되었습니다. 추가 {% if img.url %} 루프 내에서 건너뛴 다음 Elementor에 실제 이미지를 추가합니다.
기본 이미지가 Elementor에 표시되나요?
우리 테스트에서는 아닙니다. 빌더의 기본 이미지 아래에 설정된 이미지가 사용되지 않았으므로 편집자는 Elementor 에서 이미지를 추가해야합니다.
편집자가 이미지의 순서를 변경할 수 있습니까?
예. Elementor 에서 축소판을 클릭하면 WordPress 갤러리 창이 열리며,이미지를 새 순서로 드래그하거나 반전시킬 수 있습니다. 루프는 해당 순서를 따릅니다.
감싸는 #
갤러리 필드를 추가하고 반복합니다 {% for %}빈 항목은 건너뜁니다 {% if img.url %}그리고 CSS 그리드가 레이아웃을 처리하도록 합니다. 그런 다음 편집자는 Elementor 에서 이미지를 추가,제거 및 재정렬합니다. 참조 나뭇가지 구문 가이드 루프 및 검사에 대한 자세한 내용은 및 가격 각 계획에 포함된 내용입니다.
