Elementor 블로그 템플릿: 10개의 블로그 페이지 레이아웃 및 5개의 단일 게시물 템플릿

Elementor 에서 블로그를 디자인한다는 것은 보통 두 가지 작업을 의미합니다: 게시물을 나열하는 페이지,모든 단일 게시물이 사용하는 레이아웃. 이 컬렉션은 두 가지를 모두 다룹니다. 게시물 목록에는 Elementor 블로그 템플릿 10 개가 있고 기사 자체에는 단일 게시물 템플릿 5 개가 있으며 모든 것은 다운로드 할 수있는 JSON 파일,클릭 할 수있는 라이브 데모 및 설정에 대한 짧은 가이드로 제공됩니다.

여기에 모든 것은 무료로 다운로드 할 수 있습니다. 블로그 페이지 레이아웃은 모든 Elementor 페이지에 드롭됩니다. 단일 게시물 레이아웃은 게시물에 적용 할 테마 빌더가 필요하며 아래의 단일 게시물 섹션은 이미 사용중인 테마 빌더를 포함하여 그 방법을 보여줍니다. 사이트의 나머지 부분에 대해서도 완전한 페이지를 원한다면 Elementor 페이지 템플릿 라이브러리 같은 형식으로 200 개 이상 보유.

각 무료 다운로드에서 얻을 수 있는 것

모든 템플릿은 작은 zip 파일로 다운로드됩니다. 먼저 압축을 풉니 다: Elementor 는 다음을 필요로합니다 .json 그 안에 파일. 당신은 세 가지를 찾을 수 있습니다:

• a preview 디자인의 두 스크린 샷이있는 폴더, desktop-1440.webp 그리고 mobile-390.webp, 그래서 당신은 아무것도 가져오기 전에 그것을 확인할 수 있습니다,
• 템플릿 자체, a .json 디자인의 이름을 딴 파일(ma-blog-mosaic-masonry.json 위의 예에서), 이는 Elementor 템플릿 라이브러리로 가져오는 파일입니다
• a readme.txt 여기에는 템플릿에 필요한 내용이 나열되어 있으며 기본 가져오기와 나중에 변경할 설정이 포함되어 있습니다.

템플릿의 모든 스타일링은 디자인 상단에 있는 하나의 HTML 위젯에 있으며 해당 템플릿에 맞게 범위가 지정됩니다. 이월할 테마 색상이나 전역 글꼴이 없고 파일에 구운 이미지가 없으므로 디자인은 데모에서와 마찬가지로 사이트에서 동일하게 보입니다. 자신의 게시물,주요 이미지 및 카테고리가 콘텐츠를 채웁니다.

가져오기 전에 필요한 것

블로그 페이지 레이아웃은 마스터 애드온을 기반으로 구축되었습니다 블로그 게시물 위젯는,페이지에 당신의 최신 포스트를 당기는 무슨이다. 단 하나 포스트 레이아웃은 주인 애드온을 이용한다 동적 태그 확장 방문자가 읽고 있는 게시물의 헤드라인, 주요 이미지, 콘텐츠, 작성자 및 날짜를 채우려면.

WordPress 를 실행할 곳도 필요합니다. 새 블로그를 설정하고 아직 호스팅이없는 경우 호스팅어 우리가 사람들에게 첫 번째 WordPress 사이트를 가리키는 것입니다.

10 무료 Elementor 블로그 페이지 템플릿을 다운로드하세요

이것들은 당신의 포스트를 나열하는 페이지의 레이아웃입니다. 각각은 다른 블로그 포스트 레이아웃과 다른 페이지 구조를 사용합니다. 한 열의 독서 목록에서 석조 사진 벽에 이르기까지.

1. 신호: 특집 포스트를 가진 잡지 격자

잡지 첫 페이지. 최신 게시물은 사진 위에 헤드라인이 설정된 전폭 배너로 실행되며 다음 6개는 그 아래에 3열 카드 그리드에 표시됩니다. 뉴스 사이트, 잡지 및 자주 게시되는 모든 블로그에 적합합니다.

그리드가 첫 번째 게시물을 건너뛰므로 추천 스토리가 두 번 나타나지 않습니다. 배너에 표시되는 게시물 수를 변경하면 그리드의 오프셋을 일치하도록 변경합니다.

2. 칼럼: 사설 1 단 리스트

작가를 위한 독서 목록. 각 게시물은 왼쪽에 작은 축소판,큰 세리프 헤드라인 위의 날짜와 카테고리,두 줄의 스탠드퍼스트를 얻습니다. 페이지의 너비는 820px 로,편안한 길이로 줄을 유지합니다. 뉴스레터,에세이 및 개인 블로그에 잘 작동합니다.

3. 모자이크: 석조 사진 벽

이미지 주도 블로그를 위한 3 열 석조 벽. 사진은 마우스를 맴돌 때까지 회색조로 유지되며 각 헤드라인은 이미지와 겹치는 작은 흰색 카드에 들어 있습니다. 음식,여행 및 사진 블로그는 이를 최대한 활용합니다.

석공술은 특집 이미지가 다른 모양으로 나올 때만 비틀거립니다. 모든 사진이 동일한 자르기인 경우 벽은 일반 격자처럼 보입니다.

4. 간이 건축물: 여과기 탭을 가진 종류 허브

상단에 카테고리 탭이 있는 카드 그리드로,독자는 페이지를 떠나지 않고 하나의 주제로 좁힐 수 있습니다. 모든 카드는 사진에 날짜 배지를 달고 그 아래에 카테고리 라벨을 붙입니다. 여러 주제에 걸쳐 게시하는 경우 선택하세요.

탭은 게시물이 우연히 사용하는 카테고리가 아닌 위젯의 카테고리별 필터 설정에서 가져온 것입니다. 가져오기 후 블로그 게시물 위젯을 열고 고급 설정으로 이동하여 거기에서 자신의 카테고리를 선택하면 하나의 “모두”탭이 나타납니다.

5. 큰천막: 특색지어진 회전목마

자동 재생 및 화살표와 함께 상단에 4 개의 추천 게시물 회전 배너, 다음 이미지 위에 텍스트 리프트 카드의 두 열. 그것은 블로그 페이지 또는 홈페이지의 게시물 섹션으로 작동합니다.

캐러셀 바로 위에 두 번째,한 줄짜리 HTML 위젯이 있습니다. 페이지의 나머지 부분을 컨테이너 안에 보관하므로 그대로 두십시오.

6. Broadsheet: 사이드바가 있는 클래식 블로그

대부분의 사람들이 “블로그 페이지”라고 말하면 그려지는 레이아웃. 수평 게시물의 피드가 왼쪽 아래로 실행되고 오른쪽의 끈적 끈적한 사이드 바에는 검색 상자,최근 게시물,주제 링크 및 구독 카드가 있습니다. 검색 상자는 마스터 애드온 검색 위젯입니다.

주제 링크는 자리 표시자입니다. 카테고리 페이지 중 하나에서 각각을 가리키고 가입 양식에서 구독 버튼을 가리킵니다.

7. 자정: 다크 카드 블로그

유리 스타일 카드가 있는 어두운 2열 카드 레이아웃, 헤더 뒤의 부드러운 빛, 민트 액센트 색상. 제품, 개발자 및 대행사 블로그, 제품의 일부처럼 보이기를 원하는 변경 로그를 위해 만들어졌습니다.

페이지는 자체 어두운 배경을 설정하므로 밝은 테마에서도 작동합니다. 테마에 밝은 머리글과 바닥글이 추가되면 페이지 레이아웃을 Elementor Canvas 로 설정합니다.

8. 원장: 지식 베이스 목록

컴팩트한 도움말-센터 레이아웃: 검색창, 밑줄이 그어진 주제 탭, 그리고 오른쪽에 읽기 버튼이 있는 기사당 하나의 짧은 행. 문서, 릴리스 노트 또는 리소스 라이브러리에 사용하세요. 여기서 독자는 타이틀 목록을 스캔하여 필요한 것을 찾습니다.

키오스크와 마찬가지로 탭은 카테고리별 필터에서 제공되므로 가져온 후 자신만의 카테고리를 선택하세요.

9. 서리: 전폭 특징 행

행당 하나의 게시물. 각각은 왼쪽 하단 모서리에 흰색 캡션 카드가 들어있는 넓은 430px 이미지를 얻습니다. 모든 스토리에 스튜디오,포트폴리오 및 긴 형식의 글쓰기에 적합한 전폭 슬롯을 제공하여 덜 자주 게시하고 각 조각이 공간을받을 자격이 있습니다.

10. 평야: 최소한도 2 란

부드러운 종이 배경에 있는 조용하고 중앙에 위치한 두 열 색인입니다. 각 카드는 4:3 사진,날짜 및 세리프 헤드라인을 보여주며 테두리,버튼 또는 카테고리 라벨이 없습니다. 테마가 이미 최소화되어 있고 블로그가 일치해야 할 때 선택하는 것입니다.

Elementor 템플릿으로 블로그 페이지를 만드는 방법

블로그 페이지 템플릿은 모든 Elementor 페이지에서 작동합니다. 단계는 모두 10 에 대해 동일합니다.

1. zip 을 다운로드하고 컴퓨터에서 압축을 풉니다. Elementor imports the .json 파일; ᅡ .zip elementor > 설정 > 고급에서 필터링되지 않은 파일 업로드 활성화 옵션이 켜져 있을 때만 가져옵니다.
2. 대시보드에서 템플릿 > 저장된 템플릿으로 이동하고 템플릿 가져오기를 클릭합니다.
3. 를 선택합니다 .json 파일을 작성하고 지금 가져오기를 클릭합니다. 템플릿이 저장된 템플릿 목록에 나타납니다.
4. 새 페이지를 만들고 블로그 (또는 원하는대로) 라고 부르고 Elementor 로 엽니 다.
5. 폴더 아이콘을 클릭하고 내 템플릿 탭을 열고 템플릿 옆에 삽입을 클릭합니다.
6. 페이지를 게시하고 메뉴에 추가하세요.

이전에 Elementor 템플릿을 가져오지 않은 경우 elementor 템플릿 가져오기 가이드 이 스크린들 각각을 거닐어 봅니다. 디자인을 여러분의 것으로 만들었으면,여러분은 페이지를 템플릿으로 저장하고 JSON으로 내보냅니다 다른 사이트에서 재사용하려면.

WordPress “게시물 페이지”로 설정하지 마십시오

WordPress 에는 설정 > 읽기 아래에 게시물 페이지 옵션이 있습니다. 방금 구축 한 페이지에 대해 비워 두십시오. 페이지가 게시물 페이지로 설정되면 WordPress 는 테마 자체 아카이브로 대체하며 Elementor 디자인은 결코 표시되지 않습니다. 템플릿을 일반 페이지로 게시하고 대신 메뉴에서 링크하는 방법에 대한 자습서 elementor로 블로그 페이지를 만드세요 그 이유를 더 자세히 설명합니다.

가져온 후 확인할 가치가 있는 설정입니다

• 페이지당 게시물과 주문은 블로그 게시물 위젯의 표시 옵션에서 실시간으로 제공됩니다. 각 템플릿은 위젯당 4~10 개의 게시물로 배송됩니다.
• 키오스크와 원장은 탭이 이해되기 전에 카테고리별로 필터링해야 합니다.
• 열 수는 목록 레이아웃(열, 브로드시트, 원장 및 서리)의 1열에 유지되거나 목록이 그리드로 전환됩니다.

페이지 매김을 켜고 있습니다

당신은 우리의 라이브 데모에서 게시물 아래에 페이지 번호를 볼 수 없습니다. 우리는 게시물의 한 화면에 각 데모를 유지하기 위해,일부러 거기에 페이지 번호를 해제 전환. 자신의 사이트에서 당신은 몇 번의 클릭으로 그것을 켤 수 있습니다,당신이 선택한 템플릿과 일치하도록 스타일.

1. 블로그 게시물 위젯을 클릭하고 콘텐츠 탭에 머물러 있습니다.
2. 표시 옵션에서 페이지 매김을 예 로 전환합니다. 페이지당 게시물은 각 페이지에 표시되는 게시물 수를 설정합니다.
3. 다른 레이블을 원하는 경우 다음 페이지 텍스트와 이전 페이지 텍스트를 변경하고 정렬을 선택합니다.

페이지 번호의 모양을 변경하려면 스타일 탭을 열고 페이지 매김 섹션을 확장합니다. 타이포그래피,일반, 호버 및 활성 페이지에 대한 별도의 색상,더하기 테두리,반경, 패딩 및 간격을 얻습니다. 아래 스크린 샷에서 활성 페이지는 Signal 의 녹 악센트를 사용하고 다른 것들은 얇은 테두리가있는 흰색이므로 숫자가 카드와 조화를 이룹니다.

신호 및 큰천막에,두 번째 블로그 게시물 위젯 전용 페이지 번호를 켜,주요 게시물 아래에 그리드. 추천 배너와 상단의 회전 목마는 모든 페이지에서 동일하게 유지하도록되어 있으므로,그들을 위해 페이지 번호를 떨어져 남겨.

카테고리 페이지가 일치하도록 만들기

블로그 페이지 템플릿은 자신이 앉아있는 페이지의 스타일을 지정합니다. 카테고리,태그 및 작성자 아카이브는 별도의 페이지이며,대치하지 않는 한 테마의 아카이브 디자인을 유지합니다. 동일한 모양을 제공하려면 테마 빌더에 아카이브 템플릿을 구축하고 동일한 디자인을 삽입하고 블로그 게시물 위젯의 소스를 현재 쿼리로 설정하여 보고 있는 카테고리를 따릅니다. The 아카이브 템플릿 가이드 마스터 애드온 테마 빌더 측면을 다룹니다.

5 무료 Elementor 단일 게시물 템플릿

이들은 독자가 게시물 중 하나를 열 때 보는 것을 제어합니다. 모든 필드는 동적 태그로 채워져 있으므로 하나의 템플릿은 사이트의 모든 기사를 스타일화합니다. 아래의 라이브 데모는 샘플 기사로 채워져 실제 콘텐츠로 볼 수 있습니다; 다운로드에는 자신의 게시물을 끌어들이는 동적 버전이 포함되어 있습니다.

필드는 무료 Master Addons 플러그인과 함께 제공되는 Dynamic Tags 이기 때문에 템플릿을 가져오는 데 약 1 분이 소요됩니다. 가져오기 직후에 절반 정도 비어있는 것처럼 보이더라도 걱정하지 마십시오. 헤드라인,이미지 및 기사가 있어야하는 회색 상자가 있습니다 (위의 스크린 샷과 같이). 템플릿은 읽을 실제 게시물이있을 때까지 아무 것도 표시되지 않으므로 제목,주제 이미지 및 일부 콘텐츠가 포함 된 게시물이 하나 이상 필요합니다. 테마 빌더에 적용하면 블로그의 모든 단일 게시물이 자동으로 새 디자인으로 전환됩니다. 단계는 Elementor 에서 단일 게시물 템플릿을 만드는 방법, 다섯 가지 디자인 직후.

11.Folio: 고전 사설

신뢰할 수있는 잡지 기사. 카테고리 라인,세리프 헤드 라인,스탠드 퍼스트 및 작가의 사진이있는 바이 라인이 넓은 특집 이미지 위에 있습니다. 그 아래에는 “이 기사에서”내용 상자,748px 읽기 칼럼의 게시물,작가 카드 및 3 개의 관련 게시물 내용 상자가 있습니다 마스터 애드온 목차 위젯.

12. 몰입형: 풀 블리드 영웅

추천 이미지는 헤드 라인,카테고리 및 그 위에 바이 라인으로 화면의 대부분을 채 웁니다. 그런 다음 기사는 스크롤 할 때 텍스트 옆에있는 공유 버튼과 함께 사진 위로 들어 올려진 흰색 패널에 앉습니다. 어두운 구독 밴드와 두 개의 관련 게시물이 페이지를 닫고 사진이 강한 특징과 이야기에 사용합니다.

공유 버튼은 로드할 때 페이지 주소에서 X,Facebook 및 LinkedIn 링크를 빌드하고 네 번째 버튼은 링크를 복사합니다. 타사 스크립트가 포함되지 않습니다.

13. 매뉴얼: 끈적 사이드 바 자습서

추천 이미지가 없는 문서 레이아웃. 깔끔한 헤드라인 위에 카테고리 배지와 “업데이트된” 날짜가 있고,왼쪽에 끈적한 내용 레일이 읽으려는 섹션을 강조 표시합니다. 코드 블록,인라인 코드 및 콜아웃 상자는 기술 작성을 위해 스타일이 지정됩니다. 페이지는 “이 기사가 도움이 되었나요?” 행과 다음에 읽을 내용의 짧은 목록으로 끝납니다.

14.조용함: 텍스트 우선 에세이

전혀 이미지가 없습니다: 세리프 헤드 라인,회색 standfirst,드롭 캡 및 세리프 얼굴에 설정된 660px 열. 당김 따옴표는 중심이되고 이탤릭체입니다. 기사 뒤에는 작은 저자 사인 오프,구독 카드 및 추가 독서의 텍스트 전용 목록이 있습니다. 웹에 살고있는 에세이,의견 기사 및 뉴스 레터에 적합합니다.

15. 사례 파일: 시각적 사례 연구

자신의 작품을 게시물로 게시하는 대행사 및 스튜디오를 위해 제작되었습니다. 헤드라인은 왼쪽에,프로젝트 팩트 카드는 오른쪽에 있으며,그 뒤에는 넓은 표지 이미지,글 쓰기,3 열 갤러리,행동 촉구 및 2 개의 사례 연구가 이어집니다.

사실 카드는 각 게시물에 세 개의 사용자 정의 필드를 읽습니다: client, year 그리고 service. 갤러리는 게시물에 첨부된 이미지를 보여 주며,이는 해당 게시물의 편집기 내부에서 업로드된 이미지를 의미합니다. readme 는 두 가지를 모두 설명합니다.

Elementor 에서 단일 게시물 템플릿을 만드는 방법

단일 게시물 템플릿은 테마 빌더 내부에서만 의미가 있습니다. 일반 페이지에 놓으면 페이지가 게시물이 아니기 때문에 동적 태그에 페이지 자체 제목과 빈 이미지가 표시됩니다. 테마 빌더는 방문자가 게시물을 열 때마다 WordPress 에 디자인을 사용하라고 지시하는 것입니다.

마스터 애드온 테마 빌더와

이렇게 다섯 개의 템플릿이 빌드되고 테스트되었습니다. 마스터 애드온의 Single 템플릿 유형 테마 빌더 의 일부입니다 마스터 애드온 프로.

1. 가져오기 .json 블로그 페이지 템플릿과 동일한 방식으로 템플릿 > 저장된 템플릿 아래의 파일입니다.
2. 마스터 애드온 > 테마 빌더로 이동하여 새로 추가를 클릭하고 템플릿 유형으로 싱글을 선택합니다.
3. Elementor로 새 템플릿을 편집하고 폴더 아이콘을 연 다음 내 템플릿으로 이동하여 디자인을 삽입합니다.
4. 표시 조건을 포함 > 단수 > 게시로 설정합니다. 사례 연구와 같이 한 종류의 콘텐츠에만 레이아웃을 사용하려면 모든 게시물 대신 해당 게시물을 조건에서 선택합니다.
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 단일 템플릿 문서 이러한 각 화면을 보여줍니다 Elementor 테마 빌더 가이드 다른 템플릿 유형(헤더, 바닥글, 아카이브 등)이 어떻게 조화를 이루는지 설명합니다.

Elementor Pro 또는 다른 테마 빌더와 함께

Elementor Pro 의 테마 빌더 또는 Elementor 에서 단일 게시물 레이아웃을 디자인할 수 있는 다른 테마 빌더를 이미 사용하고 있다면,이 템플릿을 거기에서도 사용할 수 있습니다. 빌더에 새 Single Post 템플릿을 만들고,내 템플릿에서 디자인을 삽입한 다음,게시물에 적용되도록 설정합니다.

마스터 애드온을 설치하고 활성 상태로 유지하십시오. 헤드라인,이미지, 콘텐츠 및 작성자 필드는 마스터 애드온에서 가져옵니다 동적 태그그리고,내용 상자와 관련 게시물은 마스터 애드온 위젯에서 온 것입니다. 플러그인이 없으면 그 부분은 비어있을 것입니다. 우리는 마스터 애드온 테마 빌더에서 템플릿을 테스트했습니다; 다른 빌더에서 뭔가 꺼져 보이는 경우,readme 노트는 확인하는 첫 번째 장소입니다.

두 가지 세부 사항을 그대로 두십시오

• Folio, Immersive, Manual, Quiet 및 Casefile의 기사 본문 위젯에는 CSS 클래스가 있습니다 entry-content. 목차 위젯은 해당 요소 내부의 제목을 찾으므로 클래스를 제거하면 내용 상자가 비워집니다.
• 각 템플릿 상단의 HTML 위젯은 스타일시트를 보유하고 있으며,Folio 와 Manual 에서는 위젯이 아직 수행하지 않은 경우 내용 목록을 채우는 짧은 스크립트를 보유하고 있습니다. 거기서 스타일을 편집하되 위젯을 삭제하지는 마십시오.

색상과 글꼴을 사용자 정의합니다

모든 템플릿은 스타일시트 상단에 있는 몇 개의 CSS 변수에 색상을 유지합니다: 표제는 잉크,문단 텍스트는 본문,날짜는 음소거,링크와 레이블은 악센트. HTML 위젯을 열고 해당 값을 변경하면 전체 디자인이 따라옵니다. 글꼴은 동일한 스타일시트에 설정되므로 조지아를 브랜드 세리프로 바꾸는 것은 한 줄의 변경입니다.

섹션별로 작업하고 싶다면 동일한 접근 방식이 적용됩니다 무료 Elementor 섹션 템플릿사이트의 나머지 부분을 구축할 때 이러한 블로그 레이아웃과 잘 어울립니다.

문제 해결

가져올 때 “파일에 잘못된 콘텐츠”

zip 자체 또는 Elementor 내보내기가 아닌 파일을 업로드하고 있습니다. 다운로드 압축을 풀고 가져오기 .json 파일.

블로그 페이지가 비어 있습니다

블로그 게시물 위젯에는 추천 이미지가 포함된 게시된 게시물이 필요합니다. 키오스크 및 원장에서 빈 그리드는 일반적으로 카테고리별 필터가 여전히 사이트에 존재하지 않는 카테고리를 가리킨다는 것을 의미합니다. 위젯을 열고 직접 선택하세요.

디자인은 데모와 다르게 보입니다

테마가 템플릿 주위에 자체 머리글,바닥글 또는 페이지 너비를 추가하고 있을 수 있습니다. 페이지 레이아웃을 페이지 설정에서 Elementor Canvas 또는 Elementor Full Width 로 설정합니다.

단일 게시물 템플릿이 내 게시물에 표시되지 않습니다

테마 빌더에서 세 가지를 확인합니다. 템플릿 유형은 Single 이어야 하며,표시 조건에는 게시물이 포함되어야 하며,단 하나의 Single 템플릿만 동일한 게시물과 일치해야 합니다. Master Addons Theme Builder 에서는 두 개의 활성 템플릿이 일치하면 최신 템플릿을 저장한 후 캐시 플러그인을 지우는 것도 도움이 됩니다.

회전목마는 탭이나 아코디언 내부에서 무너집니다

스와이퍼는 페이지가 로드될 때 너비를 측정합니다. Marquee 의 캐러셀을 숨겨진 탭이나 아코디언 패널로 옮기면 캐러셀 설정에서 관찰자를 예 로 설정합니다.

자주 묻는 질문

레이아웃을 선택하고 블로그를 구축하세요

게시 방법과 일치하는 Elementor 블로그 템플릿으로 시작하십시오: 자주 게시하고 첫 페이지를 원하는 경우 신호 또는 대문자,단어가 가장 중요한 경우 열 또는 조용함,사진이 중요한 경우 모자이크 또는 서리,문서화를위한 원장 또는 설명서 JSON 을 다운로드하고 가져 와서 자신의 게시물을 가리 킵니다.

블로그가 완료되면 홈페이지부터 문의 양식까지 사이트의 다른 모든 페이지에 대해 동일한 가져오기 단계가 작동합니다.

이 게시물의 “호스팅 받기” 링크는 추천 링크입니다. 호스팅을 통해 호스팅을 구매하는 경우 추가 비용 없이 수수료를 받을 수 있습니다.