Elementor로 블로그 페이지를 만드는 방법(2가지 쉬운 방법)

원한다면 elementor로 블로그 페이지를 만드세요, 당신은 당신의 예산에 따라 몇 가지 견고한 옵션이 있습니다 전용 블로그 페이지는 게시물을 정리하고 Google이 콘텐츠를 색인화하는 데 도움을 주며 방문자가 더 오래 머물 수있는 이유를 제공합니다.

이를 위해 코드를 작성할 필요가 없습니다. With the Elementor 게시물 위젯 (Pro) 또는 무료 플러그인 같은 Elementor용 마스터 애드온, 사용자 정의를 구축할 수 있습니다 Elementor 블로그 페이지 그것은 당신의 브랜드와 일치합니다.

이 튜토리얼에서는 두 가지 방법을 다룹니다 elementor 로 WordPress 에서 블로그 페이지 만들기:

1. 방법 1: Elementor Pro Posts 위젯 사용(유료)
2. 방법 2: 마스터 애드온 블로그 위젯 사용하기 (무료)

각 옵션이 제공하는 것을 정확하게 볼 수 있도록 마지막에 비교 테이블이 있습니다. 나는 또한 당신이 그것을 선호하는 경우 비디오 연습을 녹화했다.

WordPress 사이트에 블로그 페이지가 필요한 이유

블로그 페이지는 모든 게시물이 표시되는 단일 장소입니다. 방문자는 하나의 URL 에서 기사,튜토리얼, 뉴스 및 업데이트를 검색 할 수 있습니다. 비즈니스 소유자의 경우 유기적 인 검색 트래픽을 끌어옵니다. 블로거의 경우 기본적으로 사이트의 전체 요점입니다.

좋은 워드프레스 블로그 페이지 디자인 당신을 위해 몇 가지 일을 합니다:

• SEO 트래픽 – Google은 적절한 블로그 페이지에 정리된 신선한 콘텐츠를 더 빠르게 색인화합니다.
• 세션이 길어집니다 - 안 elementor 블로그 레이아웃 썸네일, 발췌문 및 카테고리를 사용하면 방문자가 튀는 대신 더 많은 게시물을 클릭하게 됩니다.
• 권한 – 주제에 대해 정기적으로 게시하면 틈새 시장에서 가장 중요한 리소스가 됩니다.
• 전환 – 블로그 게시물은 독자를 귀하의 제품, 서비스 또는 이메일 목록으로 안내합니다.

상자 밖으로,워드 프레스는 단지 역 시간 순서로 게시물을 스택. 많이 볼 수 없습니다. 오른쪽으로 Elementor 블로그 위젯, 코드 없이 그리드, 카드 레이아웃, 캐러셀 등으로 교체할 수 있습니다.

시작하기 전에: 전제 조건

시작하기 전에 몇 가지 준비가 필요합니다:

1. 워드프레스 설치 호스팅에서 (최근 버전이 작동)
2. 엘리멘터 플러그인 설치 및 활성화(wordpress.org 에서 무료 버전)
3. 블로그 글 몇개 게재 – 블로그 페이지에 표시할 콘텐츠가 있도록 최소 3-6 개의 게시물이 필요합니다. 최상의 시각적 결과를 위해 각 게시물에 추천 이미지를 추가합니다.
4. 정적 홈페이지 세트 -에 가다 설정 > 읽기 그리고 “정적 페이지”를 선택합니다. 홈페이지를 설정하고 게시물에 대한 별도의 페이지를 만듭니다.

방법 1의 경우 필요합니다 엘리멘터 프로니다. 방법 2 의 경우 무료 만 필요합니다 마스터 애드온 플러그인는 Elementor의 무료 버전과 함께 작동합니다.

비디오 자습서: Elementor로 블로그 페이지를 만듭니다

비디오가 더 중요하다면 이 연습을 통해 방법을 보여줍니다 elementor에서 블로그 페이지를 만드세요 처음부터 끝까지 마스터 애드온 블로그 위젯을 사용합니다.

좋습니다. 두 가지 방법으로 넘어갑니다.

방법 1: Elementor Pro 게시물 위젯으로 블로그 페이지를 만듭니다

만약 당신이 엘리멘터 프로, 당신은 이미 가지고 있습니다 게시물 위젯 (때때로 패널에서 “게시물” 요소로 나열됨). 모든 페이지에 블로그 게시물을 표시하기 위한 Elementor 자체 도구입니다.

1단계: 페이지에 게시물 위젯을 추가합니다

Elementor 편집기에서 블로그가 표시되도록 할 페이지를 엽니다. 왼쪽의 위젯 패널에서 “게시물”을 검색하고 을 드래그합니다 게시물 위젯 귀하의 페이지 섹션으로.

위젯은 게시된 게시물을 즉시 가져오고 기본 레이아웃으로 표시합니다.

2단계: 레이아웃 스킨을 선택하세요

Elementor Pro 는 선택할 수 있는 세 가지 레이아웃 스킨을 제공합니다:

• 클래식 – 기본 스킨. 추천 이미지,제목, 메타데이터 및 발췌문과 함께 깨끗한 그리드에 게시물을 표시합니다.
• 카드 – 미묘한 그림자 효과로 각 게시물 주위에 카드 스타일 상자를 추가합니다.
• 전체 내용 – 발췌한 내용 대신 전체 게시물 내용을 표시합니다.

기본적으로 클래식 스킨은 6 개의 게시물이 있는 3 열 그리드를 보여줍니다. 이를 1 열에서 6 열로 조정하고 페이지당 게시물에 대해 임의의 숫자를 설정할 수 있습니다.

3 단계: 레이아웃 설정을 구성합니다

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 레이아웃 탭 어떻게 전화를 거는지입니다 Elementor 블로그 페이지 실제로 보인다:

• 이미지 위치 – 추천 이미지를 상단, 왼쪽, 오른쪽에 배치하거나 완전히 숨깁니다.
• 이미지 크기 및 비율 – 디자인에 적합한 썸네일 치수를 선택하세요.
• 제목 Tag – 게시물 제목에 대한 HTML 태그 (H2,H3, H4 등) 를 설정합니다. 이것은 SEO 에 중요합니다.
• 발췌 길이 – 게시물 발췌문의 단어 수를 제어합니다.
• 메타데이터 – 표시할 메타 정보를 선택하세요: 작성자 이름, 날짜, 시간 및 댓글.
• 더 읽기 텍스트 – “자세히 보기” 버튼 텍스트를 사용자 정의합니다.

4단계: 쿼리 및 페이지 매김 설정

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 콘텐츠 탭 두 개의 중요한 섹션이 있습니다: 쿼리와 페이지 매김.

쿼리 블로그 페이지에 표시되는 게시물을 제어할 수 있습니다. 게시물 유형,카테고리, 태그 또는 특정 게시물 ID 로 필터링할 수 있습니다. 또한 결과에서 특정 게시물을 포함하거나 제외할 수도 있습니다.

페이지 매김 사용자가 여러 페이지의 게시물을 탐색하는 방법을 제어합니다. 세 가지 옵션을 사용할 수 있습니다:

• 숫자(1, 2, 3...)
• 이전/다음 화살표
• 숫자 + 이전/다음 결합

5 단계: 블로그 레이아웃 스타일 지정

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 스타일 탭 시각적 조정을 위한 4개의 섹션이 있습니다:

• 레이아웃 – 열 간격, 행 간격 및 콘텐츠 정렬을 조정합니다.
• 박스 – 각 엽서에 테두리 스타일, 테두리 반경, 패딩 및 상자 그림자를 설정합니다.
• 이미지 – 추천 이미지의 경계 반경과 간격을 정의합니다.
• 콘텐츠 – 게시물 제목, 메타데이터, 발췌문 및 자세히 보기 링크의 타이포그래피, 색상 및 간격을 변경합니다.

팁: 블로그 페이지 전체에 일관된 간격과 타이포그래피를 사용하십시오. 이미지와 카드에 대해 동일한 경계 반경을 설정하여 세련된 모양을 만드십시오. Read More 링크 색상을 브랜드의 액센트 색상과 일치시키십시오.

그것이 Elementor Pro 접근 방식입니다. basic 에 잘 작동합니다 Elementor 블로그 그리드 레이아웃, 하지만 당신은 꽤 빨리 한계에 실행 됩니다: 회전 목마 없음, 아니 호버 효과, 단지 3 스킨.

Pro 비용을 지불하지 않고 더 많은 옵션을 원한다면 다음 방법을 살펴볼 가치가 있습니다.

방법 2: 마스터 애드온을 사용하여 Elementor 로 블로그 페이지 만들기 (무료)

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 마스터 애드온 블로그 위젯 (편집기에서 “MA 블로그”라고 표시됨) 는 무료이며 Elementor Pro Posts 위젯보다 더 많은 레이아웃 옵션으로 포장됩니다. 21 레이아웃 변형,호버 애니메이션,내장 캐러셀,고급 필터링이 가장 완벽한 기능 중 하나입니다 Elementor 블로그 위젯 저기 밖에서.

1 단계: 마스터 애드온 설치 및 활성화

잡아 Elementor용 마스터 애드온 wordpress.org (무료) 에서. 활성화 후 Elementor 위젯 패널에 “MA 블로그” 요소가 표시되는 것을 볼 수 있습니다.

2단계: 블로그 위젯을 추가하고 레이아웃을 선택합니다

드래그하세요 MA 블로그 페이지에 위젯. 기본적으로 4 열 그리드에 고전적인 블로그 레이아웃을 보여줍니다.

여기서 흥미로워집니다. 여러분은 세 가지 레이아웃 유형:

• 그리드 – 깨끗하고 정리된 블로그 페이지를 위한 표준 그리드 레이아웃입니다
• 카드 – 그림자와 테두리가 있는 높은 카드 디자인
• 리스트 – 수평 목록 레이아웃으로 뉴스나 잡지 스타일 블로그에 적합합니다

각 레이아웃 유형에는 다음이 있습니다 7 독특한 스타일 변형, 총 제공합니다 21 다른 블로그 페이지 디자인 (플러스 석조 지원). 당신은 한 번의 클릭으로 그들 사이를 전환 할 수 있습니다.

7 가지 스타일 변형은 다음과 같습니다: 기본값,콘텐츠 오버랩,왼쪽 위 메타,오른쪽 정렬 카드,중앙 정렬 카드,그라디언트 배경이 있는 중앙 정렬,배너 카드. 이들을 그리드,카드 또는 목록 레이아웃과 혼합하여 진정한 elementor의 사용자 정의 블로그 페이지.

단계 3: 디스플레이 옵션 구성

블로그 게시물이 표시되는 방식을 세밀하게 제어할 수 있습니다:

• 우편 주문 – 날짜, 제목, 수정된 날짜 또는 무작위로 정렬합니다.
• 열 – 1~6개의 열을 설정합니다.
• 포스트 포맷 아이콘 – 다양한 게시물 형식(비디오, 오디오, 갤러리)에 대한 아이콘을 표시합니다.
• 메타 분리기 – 메타 항목을 구분하는 문자를 선택합니다(파이프, 도트, 대시).
• 제목 HTML 태그 – 게시물 제목(H2, H3, H4 등)의 제목 태그를 선택하세요.
• 포스트 유형 – 일반 게시물, 사용자 정의 게시물 유형 또는 페이지를 표시합니다.
• 행 및 열 간격 – 포스트 사이의 간격을 미세 조정합니다.
• 콘텐츠 정렬 – 게시물 콘텐츠를 왼쪽, 중앙 또는 오른쪽으로 정렬하세요.
• 페이지당 게시물 – 페이지당 표시할 게시물 수를 설정합니다.
• 페이지 매김 – 페이지 탐색을 활성화하거나 비활성화합니다.

4 단계: 썸네일 옵션 설정

이것은 마스터 애드온이 Elementor Pro 보다 앞서 당기는 곳입니다. 썸네일 패널을 사용하면:

• 추천 이미지 활성화 또는 비활성화
• 썸네일에 대한 사용자 지정 높이를 설정합니다
• 썸네일 위치 선택 (상단, 왼쪽, 오른쪽)
• 에서 골라내다 26 호버 애니메이션 효과 (걸기, 펄스, 푸시, 팝, 플로트, 싱크 등)
• 적용 16 의 색깔 효력 (플러싱, 세피아, 그레이스케일, 밝기 등)
• 에서 선택 5 개의 썸네일 모양 (기본값, 둥근, 원, 그라데이션 경계 등)

위의 스크린 샷에서 “Hang”호버 애니메이션, “Flushing”색상 효과 및 “Gradient Bordered”섬네일 모양이 적용되었습니다. 이와 같은 작은 세부 사항은 실제로 누군가가 디자인 한 것처럼 보이는 블로그 페이지와 일반처럼 보이는 블로그 페이지를 구분하는 것입니다 Elementor 블로그 페이지 일부러.

5 단계: 포스트 메타데이터 구성

언더 게시물 설정를, 당신은 각 블로그 게시물에 표시되는 메타 정보를 제어:

• 게시물 제목 (표시/숨기기)
• 작성자 아바타 이미지
• 저자 이름
• 발행일
• 카테고리
• 댓글 수
• 발췌 길이 (정확한 단어 수를 설정)
• Read More 텍스트 (완전 사용자 정의 가능)
• 전체 내용 표시 vs. 발췌

6 단계: 고급 필터링 사용

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 고급 설정 패널은 정확히 어떤 게시물이 나타나는지 좁히는 곳입니다:

• 특정 게시물은 제외 – 블로그 페이지에서 ID로 특정 게시물을 제거합니다.
• 태그로 필터링 – 특정 태그가 있는 게시물만 표시합니다.
• 작성자별 필터링 – 특정 작성자의 게시물을 표시합니다(다중 작성자 블로그에 유용함).
• 오프셋 – 첫 번째 N 게시물을 건너뜁니다. 게시물을 별도로 소개한 경우 편리합니다.
• 새 탭에서 열기 – 블로그 게시물 링크를 새 브라우저 탭에서 열도록 합니다.

7단계: 블로그 게시물 회전목마를 활성화합니다

당신은 아마 홈페이지에 스크롤 회전 목마에 자신의 최신 게시물을 보여주는 사이트를 본 적이있다. 마스터 애드온 블로그 위젯이 내장되어 있습니다. 토글 the Elementor 블로그 회전목마 켜짐 및 구성:

• 자동 재생 – 게시물은 설정한 속도로 자동으로 스크롤됩니다.
• 탐색 스타일 – 점이나 화살표 중에서 선택하세요.
• 화살표 위치 – 회전목마 내부 또는 외부에 탐색 화살표를 배치합니다.

캐러셀을 고급 설정과 결합하여 특정 게시물(“특집” 또는 “편집자 선택” 태그 등)을 필터링하고 블로그 페이지뿐만 아니라 사이트 어디에나 배치하세요.

중요한: 활성화했는지 확인하세요 “글꼴 Awesome 4 지원 로드” 부터 엘리멘터 > 설정. 그렇지 않으면 회전목마의 화살표 아이콘이 올바르게 표시되지 않습니다.

8 단계: 블로그 페이지 스타일 지정

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 스타일 탭 모든 시각적 조정을 다룹니다:

• 섬네일 – 오버레이 색상, CSS 필터(밝기, 대비, 채도)
• 제목 및 메타 – 타이포그래피, 텍스트 색상 및 호버 색상
• 콘텐츠 – 텍스트 색상, 배경색, 타이포그래피, 상자 그림자, 패딩 및 콘텐츠 여백
• 박스 – 엽서 전체의 배경색, 테두리, 상자 그림자
• 페이지 매김 – 타이포그래피, 일반 상태 색상, 호버 상태 색상, 테두리 및 패딩

이러한 컨트롤 중에서 귀하의 컨트롤과 일치시킬 수 있습니다 elementor 블로그 레이아웃 픽셀까지 내려가는 사이트의 브랜딩에. 색상,글꼴, 간격,그림자, 모두 Elementor 패널에서 조절 가능.

Elementor Pro 게시물 위젯 대 마스터 애드온 블로그 위젯

여기 모든 것이 나란히 배치되어 있어 어느 것인지 확인할 수 있습니다 Elementor 블로그 위젯 당신의 상황에 맞는.

기본 블로그 페이지의 경우 Elementor Pro Posts 위젯이 작업을 완료합니다. 호버 효과,캐러셀 또는 그 이상이 필요한 경우 워드프레스 블로그 페이지 디자인 다양한 마스터 애드온 블로그 위젯은 이 모든 것을 무료로 다룹니다.

더 나은 Elementor 블로그 레이아웃을 위한 팁

내가 워드 프레스 사이트의 수십 블로그 페이지를 구축에서 배운 몇 가지:

1. 항상 추천 이미지 사용

추천 이미지가 없는 게시물은 블로그 그리드에 빈 직사각형으로 표시됩니다. 깨진 것처럼 보입니다. 단순한 브랜드 그래픽이라 할지라도 모든 게시물에 추천 이미지를 설정하세요. 파일 크기가 문제가 되는 경우 여기에 대한 가이드가 있습니다 최고의 워드 프레스 이미지 최적화 플러그인.

2. 발췌문을 짧게 유지하십시오

긴 발췌문은 그리드를 어수선하게 만들고 접힌 부분 아래에 게시물을 밀어 넣습니다. 15-25 단어는 독자에게 게시물이 다루는 내용을 알려주기에 충분합니다. 목표는 블로그 페이지에서 모든 것을 읽는 것이 아니라 클릭하도록하는 것입니다.

3. 일관된 열 개수를 사용합니다

3 개의 란은 대부분의 블로그 페이지를 위해 최상 작동합니다. 2 개의 란은 더 긴 발췌를 가진 내용 무거운 위치를 위해 좋습니다. 4 개의 란은 당신이 강한 특색지어진 이미지를 가진 많은 짧은 포스트가 있을 때 작동합니다. 그리고 독자가 가득 차있는 기사를 통해 누르면,그들이 거기 체재하는 것을 돕습니다 — the wordpress용 최고의 목차 플러그인 점프 링크를 추가하여 긴 게시물을 쉽게 훑어볼 수 있습니다.

4. 적절한 제목 태그 설정

블로그 페이지 제목은 H1 이어야합니다. 블로그 그리드 내의 게시물 제목은 H2 또는 H3 이어야합니다. 이는 검색 엔진이 페이지 구조를 이해하는 데 도움이됩니다. 더 많은 SEO 팁을 보려면 다음을 읽으십시오 elementor를 위한 최고의 SEO 사례 가이드.

5. 메타데이터에 카테고리 추가

게시물 메타데이터에 카테고리를 표시하면 방문자가 관련 콘텐츠를 찾을 수 있습니다. 마스터 애드온 블로그 위젯을 사용하면 각 게시물 제목 바로 아래에 카테고리를 표시할 수 있습니다.

6. 모바일에서 테스트

게시하기 전에 모바일 및 태블릿에서 블로그 페이지를 미리 봅니다. 작은 화면에서 3 열 그리드가 1 열로 쌓여서 괜찮지 만 때로는 붕괴 후 간격이나 글꼴 크기가 꺼져 보입니다. 휴대 전화에서 빠른 스크롤 스루를 제공합니다. 더 많은 제어를 위해 가이드를 확인하십시오 elementor 중단점을 갖춘 반응형 설계.

7. 귀하의 홈페이지에서 회전 목마를 사용 합니다

넣어 elementor 블로그 회전목마 블로그 페이지 자체 외에도 홈페이지에서. 그렇게하면 모든 방문자가 nav 에서 “블로그”를 클릭하지 않더라도 착륙 할 때 최신 게시물을 바로 볼 수 있습니다. Master Addons Blog 위젯에는 캐러셀이 내장되어 있으므로 설정하는 데 약 30 초가 걸립니다.

자주 묻는 질문

최종 생각

빌딩 a elementor의 사용자 정의 블로그 페이지 두 방법 모두 약 10-15 분이 소요됩니다. Elementor Pro Posts 위젯은 이미 Pro 라이센스가있는 경우 기본 사항을 잘 처리합니다.

더 많은 레이아웃 옵션을 보려면 다음을 참조하세요 마스터 애드온 블로그 위젯 당신에게 21 레이아웃 변형,26 호버 애니메이션,16 색상 효과,회전 목마,고급 포스트 필터링을 제공합니다. 그것은 충분하다 elementor로 블로그 페이지를 만드세요 디자이너를 고용한 것 같군요.

Elementor의 무료 버전에서도 작동합니다. 마스터 애드온 다운로드 그리고 그것을 시험해보십시오.

설정 중에 무언가가 제대로 작동하지 않는 경우 메시지를 보내주세요 그리고 우리는 그것을 정리할 것입니다.

관련 읽기:

• Elementor로 원페이지 웹사이트를 만드는 방법
• Elementor 웹사이트의 속도를 높이는 방법
• Elementor에서 스티커 헤더를 만드는 방법
• Elementor를 사용하여 WordPress에서 바닥글을 편집하는 방법