HappyAddons와 함께 WordPress에서 Elementor Loop Grid 위젯을 사용하는 방법

시각적으로 매력적이고 기능이 뛰어난 웹사이트를 디자인하는 것은 참여를 유도하고, 청중의 관심을 끌고, 판매를 촉진하는 데 있어 누구에게나 필수입니다. 이 프로세스를 단순화하기 위해 Elementor 및 해당 애드온과 같은 웹 디자인 도구는 지속적으로 혁신적인 기능과 모듈을 도입하고 있습니다.

Loop Grid는 Elementor와 해당 애드온이 최근에 개발하여 출시한 새로운 위젯입니다. 혁신적인 위젯을 사용하면 아름답게 구성된 그리드 레이아웃으로 콘텐츠를 만들고 표시할 수 있습니다.

이 위젯에 대해 자세히 알지 못하더라도 걱정하지 마세요. 이 튜토리얼 게시물에서는 HappyAddons와 함께 WordPress에서 Elementor Loop Grid 위젯을 사용하는 방법에 대한 단계별 가이드를 다룰 것입니다. 이 튜토리얼이 도움이 되고 흥미로울 수 있기를 바랍니다.

Elementor의 루프 그리드란 무엇입니까?

Loop Grid는 동적 레이아웃을 생성하여 웹 사이트에 다양한 유형의 콘텐츠를 표시하고 언제든지 사용자 정의할 수 있는 다기능 Elementor 위젯입니다. 이 위젯은 블로그 게시물, 제품 및 포트폴리오 콘텐츠를 그리드 형식으로 표시하는 데 특히 유용합니다.

이 위젯은 동적 콘텐츠를 표시하는 데 매우 유용합니다. 새로운 게시물이나 제품, 원하는 콘텐츠가 게시되면 수동 입력 없이 위젯을 통해 자동으로 표시됩니다. 원하는 대로 콘텐츠를 표시하는 고유한 템플릿을 만들 수 있습니다.

다음 섹션에서는 WordPress에서 위젯을 사용하는 방법을 설명하겠습니다. 계속 읽어보세요!

Elementor Loop Grid 위젯을 사용하는 방법

귀하의 웹사이트에서 이 위젯을 사용하려면 다음 플러그인이 설치되어 있어야 합니다. 아래에 첨부된 링크를 클릭하여 다운로드하세요.

• 엘레멘터
• HappyAddons
• HappyAddons 프로

준비가 되면 설명된 대로 튜토리얼의 단계를 따르십시오.

01단계: 루프 그리드 위젯을 페이지에 드래그 앤 드롭

위젯을 추가하려는 페이지를 엽니다. 그런 다음 위젯을 추가할 섹션을 결정합니다.

Elementor 패널 검색 상자에 Happy Loop Grid를 입력하세요. 위젯이 나타나면 캔버스의 원하는 영역으로 끌어서 놓습니다.

02단계: 루프 그리드 템플릿 생성

위젯을 추가한 후 루프 템플릿을 선택하라는 메시지가 표시됩니다. 기성 템플릿이 이미 있는 경우 해당 템플릿을 선택할 수 있습니다. 그렇지 않으면 처음부터 새로 만들어야 합니다.

따라서 처음부터 새로 만들려면 템플릿 만들기 버튼을 클릭하세요.

새로운 페이지로 이동하게 됩니다. 루프 템플릿 탭이 선택된 상태에서 새로 추가 버튼을 클릭합니다.

템플릿에 이름을 지정합니다 . 예를 들어 'Loop Template One'이라는 이름을 지정했습니다. 그런 다음 템플릿 만들기 버튼을 누르세요 .

새로운 캔버스가 열립니다. 여기서도 루프 그리드 템플릿의 레이아웃을 디자인하려는 위젯을 끌어서 놓을 수 있습니다.

Elementor 웹사이트에서 팝업을 만드는 방법에 대한 이 가이드를 확인하세요.

03단계: 루프 그리드 템플릿의 레이아웃 디자인

블로그 게시물을 동적으로 표시하기 위해 이 루프 그리드를 생성한다고 가정해 보겠습니다. 따라서 게시물 위젯을 사용하여 템플릿을 생성하겠습니다.

# 추천 이미지 게시

게시물 추천 이미지를 표시하는 것은 게시물 그리드 섹션에서 필수입니다. 그렇게 하려면 위젯을 찾아 캔버스에 놓습니다.

# 게시물 정보

게시물 정보 위젯을 추가하면 게시물 작성자, 게시 날짜, 게시 날짜를 표시할 수 있습니다. 추천 이미지 아래에 위젯을 추가하는 것이 좋습니다.

위젯의 요소를 제거하려면 옆에 있는 십자(x) 아이콘을 클릭하세요. 마찬가지로, 새 요소를 추가하려면 + 항목 추가 버튼 을 클릭하세요.

스타일 탭 으로 이동하세요. 이 탭에는 위젯의 텍스트와 아이콘의 색상, 두께, 정렬을 변경할 수 있는 옵션이 제공됩니다.

# 게시물 제목

게시물 정보 위젯 아래에 게시물 제목 위젯을 드래그 앤 드롭하세요.

콘텐츠 탭에는 HTML 태그, 크기, 정렬을 맞춤설정하는 옵션이 있습니다. 필요에 따라 필요한 변경을 수행합니다.

스타일 탭 으로 이동하세요. 제목 색상과 타이포그래피를 원하는 대로 스타일화할 수 있습니다.

# 게시물 발췌

템플릿에 게시물 발췌 위젯을 추가하면 루프 그리드 섹션 내에서 각 게시물의 요약이나 발췌를 표시할 수 있습니다. 제목 아래에서 발췌 글 위젯을 찾아 추가하세요.

마찬가지로 위에 표시된 대로 스타일 탭 에서 텍스트 색상과 타이포그래피를 사용자 정의할 수 있습니다.

04단계: 모바일 장치용 템플릿 레이아웃 최적화

데스크톱과 함께 모든 장치 유형(태블릿 및 휴대폰)에 대해 템플릿 레이아웃을 최적화해야 합니다. 그렇지 않으면 다른 장치의 사용자가 모바일 및 태블릿 장치에서 이 위젯을 탐색할 때 좋은 경험을 하지 못할 것입니다.

따라서 템플릿 레이아웃을 최적화하려면 Elementor 패널 바닥글에서 반응형 모드 옵션을 클릭하세요. 다양한 장치 모드(데스크톱, 태블릿, 휴대폰) 간을 전환하는 옵션을 포함하는 상단 표시줄이 템플릿에 나타납니다.

이제 다양한 장치 모드로 전환하여 템플릿 레이아웃이 다양한 특정 장치에 적합한지 확인하세요. 완벽하지 않다면 필요에 따라 템플릿 요소의 크기를 조정하고 사용자 정의하세요.

이렇게 하면 모든 화면 크기에 반응하는 템플릿을 만들 수 있기를 바랍니다.

다음은 모바일 반응형 사이트를 만드는 동안 고려해야 할 사항에 대한 가이드입니다.

# 템플릿 게시

완료되면 Elementor 패널에서 게시 버튼을 클릭하여 템플릿을 게시합니다 .

04단계: 메인 캔버스로 이동하여 루프 템플릿 선택

기본 Elementor 캔버스로 이동하세요. 루프 그리드 섹션을 선택합니다. 레이아웃 섹션 아래에 루프 템플릿 선택 옵션이 있습니다.

템플릿을 저장할 이름을 입력합니다. 입력하면 템플릿이 실시간으로 표시됩니다. 템플릿을 클릭하면 캔버스에 표시됩니다.

루프 그리드 템플릿을 선택하면 게시된 게시물이 아래 이미지와 같은 그리드 형식으로 표시됩니다.

그리드는 기본 설정으로 제공되므로 어색해 보일 수 있습니다. 이제 레이아웃을 추가로 사용자 정의할 수 있습니다.

05단계: 루프 그리드 섹션 사용자 정의 및 스타일 지정

레이아웃 섹션에서 열 번호, 페이지당 게시물 수, 동일한 높이를 선택합니다. 필요에 따라 필요한 구성을 수행합니다.

이 튜토리얼에서는 페이지당 3개의 열과 3개의 게시물을 유지했습니다.

# 쿼리 구성

그런 다음 쿼리 섹션 으로 이동하세요.

루프 그리드 위젯에서 다양한 소스의 콘텐츠를 표시할 수 있습니다. 기본적으로 게시물은 그리드 형식으로 표시됩니다. 하지만 원하는 경우 페이지나 랜딩 페이지를 표시할 수 있습니다.

게시물 유형 옵션 옆에 있는 드롭다운 아이콘을 클릭합니다. 원하는 콘텐츠 유형을 선택하세요.

각 게시물을 태그나 카테고리와 함께 저장해야 합니다. 특정 작성자, 태그 또는 카테고리의 콘텐츠만 표시하려면 포함 기준 아래의 + 더하기 아이콘을 클릭하세요.

작성자 또는 용어를 선택합니다. 둘 다 선택할 수도 있습니다.

포함 기준 옵션을 선택한 후 해당 필드에 작성자 이름 과 용어를 입력합니다. 즉시 콘텐츠가 필터링되고 이 특정 작성자 및 용어의 콘텐츠만 루프 그리드에 표시됩니다.

원하는 대로 다른 쿼리 옵션을 구성합니다. 스스로 할 수 있기를 바랍니다.

06단계: 루프 그리드 섹션에 대한 페이지 매김 옵션 구성

페이지 매김 및 더 많은 항목 로드 섹션을 확장합니다.

페이지 매김 옆에 있는 드롭다운 아이콘을 클릭합니다. 원하는 옵션을 선택하세요.

Numbers + Previous/Next 를 선택했습니다. 이 페이지 매김 옵션이 위젯 아래에 표시되었음을 이미지에서 볼 수 있습니다.

07단계: 루프 그리드 위젯의 레이아웃 스타일 지정

스타일 탭 으로 이동합니다. 위젯의 레이아웃, 항목 상자 및 페이지 매김을 사용자 정의하고 스타일을 지정하는 옵션을 찾을 수 있습니다.

먼저 레이아웃 섹션을 확장해 보겠습니다. 열 간격 과 행 간격을 구성할 수 있습니다. 필요에 따라 이 작업을 수행합니다.

마찬가지로 항목 상자 섹션을 확장합니다. 패딩 , 배경 유형 (색상 또는 이미지), 상자 그림자, 테두리 유형 및 테두리 반경을 추가할 수 있습니다.

이 튜토리얼에서는 패딩, 반경 및 배경색을 추가했습니다. 당신도 똑같이 하십시오.

같은 방법으로 위젯의 색상, 타이포그래피, 패딩, 반경, 공간 및 페이지 매기기 옵션을 스타일화할 수 있습니다.

참고: 약간 눈이 비명을 지르는 것 같죠? 이 디자인 단계에서는 루프 그리드 템플릿을 좀 더 스타일화하고 사용자 정의해야 한다는 것을 알 수 있습니다. 하지만 어떻게 해야 할까요? 다음 단계에 표시됩니다.

08단계: 루프 그리드 템플릿 다시 사용자 정의

먼저 템플릿을 찾아야 합니다. HappyAddons로 디자인한 대로 WordPress 대시보드 로 이동하세요. 그런 다음 HappyAddons > 테마 빌더 > 루프 템플릿 으로 이동하세요.

템플릿을 찾아 Edit with Elementor 옵션을 사용하여 엽니다.

예를 들어 계속 읽기 >> 텍스트의 서체를 변경했습니다.

완료되면 변경 사항을 업데이트합니다 .

09단계: 변경 사항 미리보기

다시 메인 캔버스로 이동합니다. 드롭다운 아이콘 을 선택합니다. 그런 다음 초안 저장 옵션을 클릭합니다.

초안이 저장되면 캔버스를 다시 로드합니다 . 템플릿에서 변경한 내용이 페이지에 표시됩니다.

따라서 언제든지 루프 그리드 템플릿을 사용자 정의할 수 있습니다.

10단계: 루프 그리드 디자인 게시

루프 그리드 섹션이 이미 게시될 준비가 되기를 바랍니다. Elementor 패널 하단에 있는 게시 버튼을 클릭하세요.

참고: 위에서 루프 그리드 템플릿 최적화에서 설명한 것처럼 모바일 응답성을 위해 위젯을 완벽하게 최적화했는지 확인하세요. 여기서도 과정은 동일합니다.

Elementor Loop Grid 위젯의 일반적인 사용 사례

지금까지 루프 그리드 위젯이 무엇인지, Elementor 웹사이트에서 이를 사용하는 방법을 설명했습니다. 이제 귀중한 인상을 남길 수 있는 위젯의 몇 가지 중요한 사용 사례를 간단히 살펴보겠습니다.

1. 블로그 레이아웃

Elementor Loop Grid를 사용하면 게시물을 역동적이고 보기 좋은 그리드로 렌더링할 수 있으므로 블로그 레이아웃이 단순해집니다. 게시물 제목, 발췌문, 이미지, 메타데이터 등을 포함하여 콘텐츠(게시물 또는 페이지)가 표시되는 방식을 사용자 정의하여 일관성 있는 모양을 보장할 수 있습니다.

Elementor를 사용하여 블로그 게시물 템플릿을 디자인하는 방법을 알아보세요.

2. 제품 그리드

루프 그리드는 전자상거래 사이트에서 깔끔하고 깔끔한 그리드에 제품을 표시하는 데 매우 중요합니다. 고객이 사이트에서 제품을 탐색하는 동안 좋은 경험을 즐길 수 있도록 제품 사진, 가격 및 설명을 표시할 수 있습니다.

3. 포트폴리오 쇼케이스

Loop Grid 위젯을 사용하면 그림, 기사, 사례 연구 및 포트폴리오 조각을 매력적인 레이아웃으로 정렬할 수 있습니다. 고객과 직원이 포트폴리오를 강조할 수 있도록 브랜드에 맞게 그리드를 변경할 수도 있습니다.

포트폴리오 사이트를 만드는 방법을 알아보세요.

4. 이벤트 목록

Loop Grid를 사용하면 이벤트를 그래픽 형식으로 구성할 수 있습니다. 날짜, 장소, 설명 등의 이벤트 정보를 시각적으로 나열하여 사람들이 무슨 일이 일어나고 있는지 빠르게 확인할 수 있습니다.

5. 서비스 목록

스타일 옵션을 사용하여 그리드 형식으로 서비스를 제공할 수도 있습니다. 서비스 제목, 설명, 사진 등 핵심 요소를 고객이 한눈에 쉽게 확인할 수 있도록 표시할 수 있습니다.

마무리

이제 Elementor Loop Grid 위젯에 대해 자세히 알아보시기 바랍니다. 위젯을 잘 사용하는 방법을 알게 되면 웹 사이트에 대한 무한한 디자인 가능성을 만들 수 있습니다. 직관적인 기능과 사용자 친화성을 통해 방문자에게 웹사이트에 전문적인 영향을 줄 수 있습니다.

우리는 이 게시물에서 귀하가 찾고 있는 모든 내용을 다루기 위해 최선을 다했습니다. 우리가 놓친 것이 있으면 아래 의견 상자를 통해 알려주십시오. 당사 제품에 대해 더 자세히 알고 싶으시면 지원 상자에 채팅을 남겨두셔도 됩니다.

마지막으로 시간을 내주시고 끝까지 함께해주셔서 감사드립니다. 즐겁게 읽으세요!