루프 캐러셀은 Elementor Pro 의 동적 캐러셀입니다. 슬라이드를 손으로 추가하는 대신 하나의 슬라이드를 템플릿으로 만들고 위젯을 쿼리 (게시물,제품 또는 모든 사용자 지정 게시물 유형) 로 가리키면 스스로 채워집니다. 게시물을 추가하면 캐러셀이 업데이트됩니다. 편집이 필요하지 않습니다.
엘리멘터 3.11 에 도착했는데 the Elementor 캐러셀 위젯 대부분의 사람들은 포스트 회전 목마 또는 제품 슬라이더를 검색 할 때 실제로 찾고 있습니다. 또한 Elementor 코어에 무료 등가물이없는 Pro-only 이므로이 게시물의 후반부는 다음을 다룹니다 무료 캐러셀 위젯 면허가 없으면 가까워집니다.
이 가이드가 다루는 내용
- 루프 회전목마 대 루프 그리드: 사용할 항목
- 시작하기 전에 필요한 것
- Elementor에서 루프 회전목마를 만드는 방법
- 사람들을 넘어뜨리는 설정
- WooCommerce 제품용 루프 회전목마
- Elementor Pro가 없나요? 무료 경로
- 루프 회전목마가 잘못된 선택인 경우
- 자주 묻는 질문
루프 회전목마 대 루프 그리드: 어느 것
같은 엔진,같은 루프 아이템 템플릿,다른 프리젠테이션. 그리드는 수직으로 행을 쌓습니다. 회전목마는 같은 아이템을 수평 트랙에 놓습니다.
항목이 선택 사항일 때 회전목마를 선택하세요: “좋아할 수도 있습니다” 스트립, 관련 게시물, 추천 제품. 페이지가 이해되기 위해 항목 7을 볼 필요는 없습니다.
항목이 페이지 일 때 그리드를 선택하십시오. 아카이브,상점 카테고리,블로그 색인. 화살표 뒤에 카테고리 목록의 3 분의 2 를 숨기면 전환 비용이 발생합니다. 왜냐하면 더 많은 제품을 보려면 클릭해야하는 쇼핑객은 일반적으로 그렇지 않기 때문입니다.
내가 클라이언트에게 줄 규칙: 섹션에 “블로그에서 더보기,”캐러셀과 같은 제목이있는 경우 제목이 페이지 제목 인 경우 격자.
시작하기 전에 필요한 것
- 엘리멘터 프로. 루프 회전 목마는 무료 플러그인에 없으며 부분 버전도 없습니다.
- 루프 항목 템플릿입니다. 이것은 단일 슬라이드 디자인입니다: 추천 이미지, 제목, 발췌, 버튼. 테마 빌더에 한 번 내장되어 어디에서나 재사용됩니다.
- 쿼리할 내용. 게시물, 제품 또는 등록된 사용자 정의 게시물 유형입니다.
이전 설치에서는 Elementor → 설정 → 기능에서 활성화해야 할 수도 있습니다. 실험 플래그 뒤에 배송되어 안정적으로 전환되기 전에 몇 번의 릴리스 동안 그대로 유지되었습니다.
Elementor에서 루프 회전목마를 만드는 방법
슬라이드를 먼저 만든 다음 회전목마를 만듭니다. 반대로 돌리면 비좁은 미리보기 내부에서 디자인하는 것입니다.
- Loop Item 템플릿을 만듭니다. 템플릿 → 테마 빌더 → 루프 아이템 → 새로 추가. 렌더링할 게시물 유형을 선택합니다. 목록이 아닌 하나의 카드를 디자인하고 있으며 Elementor 는 단일 항목을 표시하고 나중에 반복합니다.
- 동적 태그로 카드를 빌드합니다. 이미지 위젯을 추가하고 소스를 동적 → 추천 이미지로 설정합니다. 제목 위젯 → 동적 → 게시물 제목. 텍스트 편집기 → 게시물 발췌. 버튼 → 동적 → 게시물 URL. 여기에 하드코딩된 것은 없습니다; 모든 필드는 해당 슬롯에 있는 게시물에서 가져옵니다.
- 템플릿을 게시합니다 그리고 표시 조건 프롬프트를 건너뜁니다. 루프 항목은 조건이 필요하지 않습니다. 위치에 할당되지 않고 위젯에서 호출되기 때문입니다.
- 루프 회전목마 위젯을 놓습니다 페이지에 템플릿 선택에서 방금 만든 템플릿을 선택하세요.
- 쿼리를 설정합니다. 출처 (게시물,제품 또는 CPT), 그런 다음 범위를 좁히십시오: 분류법으로 포함,현재 게시물 제외,페이지당 게시물 설정. 같은 페이지에 다른 루프가 있으면 “중복 방지”를 켜고,그렇지 않으면 관련 게시물 스트립이 사이드바에 이미 있는 내용을 반복합니다.
- 회전목마를 구성합니다. 보기당 슬라이드,스크롤할 슬라이드,자동 재생,무한 루프,속도, 호버에서 일시 중지 패널 상단의 장치 아이콘을 사용하여 데스크톱,태블릿 및 모바일에 대해 보기당 슬라이드를 별도로 설정합니다.
- 내비게이션 스타일 지정. 화살표,점 또는 분수. 크기,색상, 위치 및 호버 상태는 모두 스타일 탭에 있습니다.
사람들을 넘어뜨리는 설정
무한루프는 충분한 아이템이 필요합니다. Elementor clones slides to fake the wrap-around,and it needs at least twice your slides-per-view to do it invisiblely. 3-per-view 에 있는 4 개의 포스트는 랩을 할 때 눈에 띄게 점프합니다. 페이지당 포스트를 올리거나 루프를 끄세요.
페이지당 게시물은 표시 제한이 아닌 쿼리 제한입니다. 6 으로 설정하면 회전목마에는 총 6 개의 항목이 들어있지만 많은 항목이 보입니다. 사람들은 슬라이드 당 보기와 일치하도록 3 으로 설정한 다음 스크롤할 것이 없는 이유를 궁금해합니다.
가장자리 간격은 힌트를 변경합니다. 컨테이너 가장자리에서 플러시로 끝나는 회전목마는 완성된 것처럼 보입니다. 작은 가장자리 간격을 추가하여 다음 슬라이드가 들여다보고 사람들이 쓸어넘길 수 있도록 합니다. 몇 픽셀이고 상호작용 속도를 측정 가능하게 변화시킵니다.
자동 재생 플러스 링크는 나쁜 쌍입니다. 슬라이드가 클릭 가능하고 회전목마가 타이머에서 움직이는 경우 누군가가 카드에 손을 뻗어 카드를 교체한 카드를 클릭합니다. 일시 중지-온-호버가 데스크톱 케이스를 수정합니다. 터치 시 호버가 없으므로 for 클릭 가능한 카드 자동 재생을 완전히 끄겠습니다.
WooCommerce 제품용 루프 회전목마
동일한 프로세스,하나의 차이: 소스를 제품으로 설정하면 WooCommerce 전용 쿼리 컨트롤을 얻을 수 있습니다. 카테고리,태그 또는 속성별로 필터링하고 가격,인기 또는 날짜별로 정렬하고 품절된 품목은 제외합니다.
제품에 대한 루프 항목 템플릿은 정적 텍스트가 아닌 동적 요소로 가격과 장바구니에 추가 버튼을 전달해야 합니다. miss that과 캐러셀의 모든 카드는 동일한 가격을 보여줍니다. 이는 편집기 미리보기에서 괜찮아 보이기 때문에 프로덕션에서 살아남는 버그의 종류와 정확히 같습니다.
관련 제품,최근에 본,그리고 “보기 완료” 스트립은 모두 다른 쿼리와 같은 위젯입니다. 그리고 만약 당신이 스트립이 아닌 호출 된 하나의 제품만 필요 하면,the 주요 제품 위젯 전혀 쿼리없이 그렇게. 그것은 프로 위젯이며,그것은 유일한 WooCommerce 제품 위젯 마스터 애드온 배송.
Elementor Pro 가 없나요? 여기 무료 경로가 있습니다
루프 회전 목마는 프로입니다. 무료 Elementor 에 있다면 얻지 못하고 무료 애드온은 루프 아이템 템플릿 시스템을 다시 구현하지 않습니다.
무료로 얻을 수 있는 것은 결과물이다: 포스트나 제품을 끌어당기고 스스로 업데이트하는 동적 캐러셀. 마스터 애드온' 블로그 위젯 무료 플러그인에 캐러셀 모드가 있습니다. 게시물 유형,카테고리, 태그 또는 작성자별로 쿼리하고,레이아웃을 선택하고,디스플레이를 캐러셀로 전환하고,동일한 화살표,점, 자동 재생 및 중단점별 컨트롤을 구성합니다.
트레이드 오프는 정직합니다: 카드를 디자인하지 않습니다. 블로그 위젯은 빈 루프 아이템 캔버스보다는 레이아웃 사전 설정과 스타일 탭을 제공합니다. 슬라이드에 대한 픽셀 제어가 필요한 경우 Elementor Pro 의 접근 방식이 더 좋습니다. “괜찮아 보이는 슬라이더의 최신 6 개의 게시물”이 필요한 경우 무료 위젯이 더 빨리 도착합니다.
제품은 더 얇고,명백하게 말할 가치가 있습니다: 무료 제품 캐러셀 위젯은 없습니다. 슬라이딩,셀프 업데이트 제품 스트립에는 Elementor Pro 의 루프 캐러셀 또는 아래와 같이 손으로 채워진 레이아웃이 필요합니다. The 제품 회전목마 가이드 두 가지를 통해 작동합니다. 그리고 슬라이드가 쿼리가 아닌 고정 이미지 인 경우 무료 이미지 회전목마 위젯 더 짧은 경로이지만 그 시점에서는 루프가 아닌 슬라이더를 만들고 있습니다.
알만한 가치가 있는 세 번째 무료 옵션이 있습니다. 마스터 애드온 배송 20 개의 명명된 캐러셀 및 슬라이더 디자인 수입품으로 위젯 빌더 파일, 그리고 그 중 8 개는 무료로 가져옵니다. 쿼리 중심이 아니므로 손으로 항목을 채우지 만 두 개는 루프 회전 목마가 생성하는 것과 가깝게 앉아 있습니다. 사분면 페이지 카탈로그 페이지에는 한 번에 3개씩 9개의 항목 상자로 구성된 그리드가 있으며 각 항목에는 페이지가 매겨진 제품 루프에 가장 가까운 무료 항목인 이미지, 카테고리, 제목 및 사본이 포함되어 있습니다. 원장 인덱스 슬라이더 아카이브 및 작품 목록을 위해 제작된 디스플레이 플레이트 옆에 클릭 가능한 항목 색인을 배치합니다. 20개 모두 에 수집됩니다 회전목마 위젯 허브.
루프 회전목마가 잘못된 선택인 경우
세 가지 경우, 그리고 클라이언트 사이트에서 세 가지 모두 잘못되는 것을 보았습니다.
귀하의 아카이브 페이지. 회전목마에 카테고리 목록이 있다는 것은 Google의 크롤러가 60개의 제품이 있는 곳에서 6개의 제품을 본다는 것을 의미합니다. 나머지는 DOM에 있지만 사용자와 페이지 깊이를 판단하는 사람에게 보내는 신호는 이 카테고리가 얇다는 것입니다.
모바일에서 접힌 부분 위. 동적 캐러셀은 쿼리, 템플릿 렌더링 및 a입니다 슬라이더 초기화 아무것도 페인트 전에. 전화 페이지의 상단에 넣어 그리고 당신의 가장 큰 만족 페인트는 스피너입니다.
다섯 개 미만 항목. 슬라이드가 3 개인 회전목마는 사람들을 일하게 하는 격자입니다. 세 개 모두 보여주면 됩니다.
자주 묻는 질문
Elementor Loop Carousel은 무료입니까?
아니요. 루프 캐러셀에는 Elementor Pro 가 필요하며 축소된 무료 버전은 없습니다. 무료 대안은 애드온의 쿼리 기반 캐러셀 위젯이며,마스터 애드온의 블로그 위젯에는 게시물을 동적으로 끌어당기는 무료 계층의 캐러셀 모드가 있습니다. 손으로 채워진 레이아웃의 경우 마스터 애드온의 가져오기 가능한 캐러셀 디자인 20 개 중 8 개도 무료입니다.
Loop Grid 와 Loop Carousel 의 차이점은 무엇입니까?
그들은 동일한 Loop Item 템플릿과 쿼리 컨트롤을 공유합니다. 루프 그리드는 행과 열로 결과를 배열합니다; 루프 회전 목마는 화살표와 점이있는 수평 슬라이딩 트랙에 놓습니다. 아카이브 및 목록에 그리드를 사용하고 옵션 인 “관련”또는 “기능이있는”스트립에 대한 회전 목마를 사용하십시오.
Elementor 에서 Loop Carousel 을 어떻게 추가합니까?
이미지,제목 및 발췌문에 대한 동적 태그를 사용하여 먼저 테마 빌더에서 루프 항목 템플릿을 빌드합니다. 게시한 다음 페이지로 루프 캐러셀 위젯을 드래그하고 해당 템플릿을 선택한 다음 쿼리 소스 및 필터를 설정하고 캐러셀 설정에서 보기당 슬라이드 및 자동 재생을 구성합니다.
루프 캐러셀에 게시물이 표시되지 않는 이유는 무엇입니까?
보통 쿼리. Loop Item 템플릿의 게시물 유형이 위젯의 쿼리 소스와 일치하는지 확인합니다. 왜냐하면 게시물용으로 빌드된 템플릿은 제품을 렌더링하지 않기 때문입니다. 두 번째로 가장 일반적인 원인은 일치하는 콘텐츠가 없는 분류 필터입니다. 세 번째는 생각보다 낮은 페이지당 게시물 세트입니다.
루프 회전 목마는 사용자 정의 게시물 유형을 표시 할 수 있습니까?
예. 등록된 모든 공개 게시물 유형은 쿼리 소스 드롭다운에 나타나며 ACF,메타 박스 또는 파드를 사용하는 경우 해당 사용자 지정 필드를 동적 태그로 사용할 수 있습니다. 해당 게시물 유형에 대해 루프 항목 템플릿을 빌드하고 캐러셀이 나머지를 처리합니다.
루프 캐러셀을 반응형으로 만들려면 어떻게 해야 합니까?
설정 상단의 장치 아이콘을 사용하여 각 중단점에서 개별적으로 보기당 슬라이드를 설정합니다. 데스크톱에서는 3개, 태블릿에서는 2개, 모바일에서는 1개가 안전한 기본값입니다. 또한 데스크톱 기본값이 너무 작아서 편안한 탭 대상이 될 수 없는 경우가 많기 때문에 모바일에서는 화살표 크기를 확인하세요.
여기서 어디로 갈지
Pro 가 있다면 먼저 Loop Item 템플릿을 구축하고 사이트의 나머지 부분에 대해 그리드와 캐러셀을 통해 재사용 할 수있는 디자인 자산으로 취급하십시오. 보답하는 조각입니다.
템플릿보다는 재사용 가능한 위젯으로 카드를 만들고 싶다면 이것이 바로 그것입니다 자신의 위젯 작성 를 위한 것이고, 그리고 가격 페이지 그것이 앉아있는 계층을 덮습니다.
그렇지 않은 경우 무료 쿼리 기반 위젯부터 시작하여 레이아웃 사전 설정이 충분히 가까워졌는지 확인하세요. 두 경로 모두 해당 경로에 포함되어 있습니다 요소 회전목마 위젯 페이지, 캐러셀 옵션의 나머지 부분과 함께. 아직도 형식을 결정? 회전목마 대 슬라이더 귀하의 섹션에 실제로 필요한 형태를 정합니다 슬라이더 플러그인 검거 그것을 구축하는 플러그인을 다룹니다.
