블로그 게시물 디자인을 간소화하기 위해 Divi 레이아웃 블록과 함께 전역 사전 설정을 사용하는 방법

블로그 콘텐츠를 만드는 것은 디자인에 대한 걱정 없이는 충분히 어렵습니다. 그렇기 때문에 사이트에서 디자인 요소를 쉽게 사용할 수 있도록(또는 미리 디자인된) 멋진 콘텐츠를 만드는 데 더 집중할 수 있도록 하는 것이 중요합니다. 물론, 전통적인 WordPress 자식 테마는 이것을 처리할 수 있지만 대부분의 경우 쉽게 변경되지 않는 디자인에 갇혀 있습니다.

Divi를 사용하면 블로그 게시물의 디자인 경험을 더 잘 제어할 수 있습니다. Divi의 글로벌 사전 설정을 사용하면 몇 번의 클릭으로 원하는 대로 디자인을 조정할 수 있는 추가 편의성과 함께 사이트 전체의 요소에 대한 사이트 전체 디자인(예: 하위 테마)을 만들 수 있습니다. 또한 기본 WordPress 블록 편집기에서 콘텐츠를 만드는 데 익숙하다면 Divi 레이아웃 블록의 기능을 활용하여 게시물 콘텐츠 내에서 해당 전역 사전 설정 요소를 즉석에서 가져올 수 있습니다. 이렇게 하면 템플릿 및 사이트의 나머지 부분과 일치하는 블로그 게시물 내에 완전히 새로운 디자인 요소를 추가할 수 있습니다.

이 자습서에서는 Divi 레이아웃 블록과 함께 전역 사전 설정을 사용하여 블로그 게시물 디자인 프로세스를 간소화하는 방법을 보여줍니다. 이를 위해 글로벌 사전 설정을 사용하여 새 블로그 게시물 콘텐츠를 빠르고 효율적으로 디자인하는 방법을 보여드리겠습니다. 이렇게 하면 사이트의 전반적인 브랜딩을 손상시키지 않는 블로깅 환경을 만드는 데 도움이 됩니다.

시작하자!

엿보기

다음은 이 튜토리얼에서 구축할 디자인을 간략하게 살펴보겠습니다.

전역 사전 설정에 대한 간략한 개요

Divi의 장점은 요소나 모듈의 모양을 사용자 정의하는 데 사용할 수 있는 다양한 디자인 설정을 사용하여 웹사이트 디자인을 완전히 제어할 수 있다는 것입니다.

새로운 Divi 사전 설정 시스템을 사용하면 단추 모듈과 같은 Divi 요소의 사용자 정의 모양을 디자인하고 사전 설정으로 저장할 수 있습니다. 모든 디자인 변경 사항은 사전 설정에 저장됩니다. 페이지에 새 모듈을 추가하면 저장된 사전 설정을 찾아 빠르게 적용할 수 있습니다.

사전 설정이 적용되면 모듈의 기본 디자인은 사전 설정에 의해 제어됩니다. 사전 설정의 스타일을 업데이트하면 해당 사전 설정을 사용하는 모든 모듈도 업데이트됩니다. 이렇게 하면 저장된 사전 설정의 작은 모음을 사용하여 전체 웹 사이트의 디자인을 제어할 수 있습니다. 또한 페이지에 새 모듈을 추가할 때 많은 시간을 절약할 수 있습니다. 각각의 새 모듈을 처음부터 디자인할 필요가 없고 대신 Divi 사전 설정 라이브러리에서 모양을 빠르게 선택할 수 있기 때문입니다.

글로벌 사전 설정 스타일 가이드

글로벌 사전 설정 스타일 가이드(이 자습서에서 사용할 것과 같은)를 만들어 웹사이트를 디자인하는 동안 요소 디자인을 바로 시작할 수 있습니다. 이러한 스타일 가이드에는 사이트 디자인과 일치하는 다양한 사전 설정이 있는 모듈 모음이 포함되어 있습니다. 시작할 때 사전 설정을 사용할 수 있게 하면 각각의 새 모듈에 대한 설계 설정을 업데이트하는 고된 작업을 제거하여 설계 프로세스를 간소화할 수 있습니다. 우리는 자신의 스타일을 만들고 싶은 사람들을 위한 스타일 가이드 프레임워크도 가지고 있습니다.

Divi 레이아웃 블록에 대한 간략한 개요

Divi 레이아웃 블록을 사용하면 사용자가 Gutenberg 편집기 내에서 블로그 게시물에 Divi 레이아웃을 추가할 수 있습니다. 다른 WordPress 블록과 마찬가지로 Divi 레이아웃 블록을 Gutenberg에서 재사용 가능한 블록으로 변환할 수도 있습니다. 이렇게 하면 유용한 Divi 레이아웃 디자인을 Gutenberg에서 게시물을 작성하는 일반적인 흐름으로 간소화할 수 있는 문이 열립니다.

전역 사전 설정과 레이아웃 블록이 함께 작동하는 방식

전역 사전 설정은 "전역"이므로 해당 사전 설정의 스타일은 사전 설정의 모든 인스턴스에 사이트 전체에 영향을 미칩니다. 즉, 레이아웃 블록 편집기에서 요소를 디자인할 때 전역 사전 설정을 사용할 수 있으며 해당 사전 설정도 그에 따라 업데이트됩니다. 따라서 Divi 레이아웃 블록을 사용하여 블로그 게시물 콘텐츠에 CTA를 추가하려는 경우 일반 페이지 또는 게시물과 마찬가지로 전역 사전 설정이 있는 모듈을 추가하여 CTA를 구축할 수 있습니다. 이를 통해 게시물 내에 일치하는 디자인 요소를 빠르고 효율적으로 추가할 수 있습니다.

Divi 레이아웃 블록과 함께 전역 사전 설정을 사용하여 블로그 게시물 디자인 간소화

글로벌 프리셋 스타일 가이드 업로드

이 튜토리얼에서는 웹 에이전시 레이아웃을 위한 글로벌 프리셋 스타일 가이드 레이아웃을 사용하여 글로벌 프리셋 생성에 대한 빠른 시작을 할 것입니다. 스타일 가이드를 업로드한 후 Divi 레이아웃 블록을 사용하여 블로그 게시물에 디자인 요소를 추가할 때 사용할 수 있는 일부 전역 사전 설정이 있습니다.

글로벌 사전 설정을 다운로드하려면 블로그 게시물로 이동하십시오. "전역 사전 설정 스타일 가이드 다운로드" 섹션까지 아래로 스크롤합니다. 그런 다음 이메일 주소를 입력하고 클릭하여 다운로드를 받으십시오.

zip 파일을 컴퓨터에 다운로드한 후 파일의 압축을 풀고 WordPress 대시보드로 돌아갑니다.

스타일 가이드 JSON 파일을 Divi 라이브러리로 가져오려면…

1. Divi > Divi 라이브러리로 이동합니다.
2. 가져오기 및 내보내기 버튼을 클릭합니다.
3. 이식성 팝업에서 가져오기 탭을 선택합니다.
4. 웹 에이전시 글로벌 스타일 가이드 JSON 파일을 선택합니다.
5. 사전 설정 가져오기를 선택했는지 확인합니다.
6. 그런 다음 가져오기 버튼을 클릭합니다.

이제 모든 글로벌 사전 설정을 Divi Builder에서 사용할 수 있습니다.

게시물 템플릿 업로드

이제 스타일 가이드가 준비되었으므로 스타일 가이드 요소와 이미 일치하는 웹 에이전시 블로그 게시물 템플릿을 가져와 블로그 게시물 템플릿의 디자인을 바로 시작할 것입니다.

템플릿을 다운로드하려면 블로그 게시물로 이동하여 이메일 주소를 입력하고 클릭하여 파일을 다운로드합니다.

게시물 템플릿을 가져오려면…

1. Divi > 테마 빌더로 이동합니다.
2. 그런 다음 이식성 아이콘을 클릭합니다.
3. 이식성 모달에서 가져오기 탭을 선택합니다.
4. 다운로드한 게시물 템플릿 JSON 파일을 선택합니다.
5. 그런 다음 가져오기 버튼을 클릭합니다.

사전 설정을 사용하여 게시물 템플릿 업데이트/디자인

사용자 정의 게시물 템플릿이 있으면 클릭하여 사용자 정의 본문 템플릿을 편집합니다. 거기에서 포스트 템플릿 디자인도 보고 가져온 스타일 가이드에서 사용할 수 있는 전역 사전 설정을 사용하여 조정할 수 있습니다. 처음부터 자신의 게시물 템플릿을 구축하는 경우 전역 사전 설정을 사용하여 게시물 템플릿 디자인을 웹 사이트의 다른 요소와 일치시킬 수 있습니다. 예를 들어 다음과 같이 게시물 제목에 미리 설정된 “WALP – H1 – 1”을 사용할 수 있습니다.

또는 동적 작성자 정보가 포함된 블러에 사전 설정된 "WALP - Blurb 2" 블러 모듈을 사용할 수 있습니다.

게시물 콘텐츠 모듈은 블로그 게시물 콘텐츠가 페이지에서 생성되는 영역입니다. 그렇기 때문에 게시물 콘텐츠 모듈의 디자인 설정을 사이트 전체에서 사용되는 다른 텍스트 요소와 일치시키는 것이 중요합니다.

포스트 템플릿을 처음부터 구축하는 경우 사이트를 통해 다양한 텍스트 모듈의 텍스트 설정을 복사하여 붙여넣을 수 있습니다. 또는 사전에 사이트에 대한 글로벌 사전 설정 스타일 가이드를 만든 경우 스타일 가이드의 해당 모듈에서 디자인 요소를 복사할 수 있습니다.

예를 들어, 하나의 텍스트 모듈에서 모든 텍스트 스타일에 대해 만들어진 전역 사전 설정에 대한 제목 텍스트 스타일을 복사할 수 있습니다.

그런 다음 해당 제목 텍스트 스타일을 게시물 템플릿의 게시물 콘텐츠 모듈에 붙여넣습니다. 그러면 게시물 콘텐츠에 사용된 모든 제목이 사이트 스타일과 일치하는지 확인하는 데 도움이 됩니다.

여기서 중요한 것은 사이트 스타일과 일치하는 게시물 템플릿이 있다는 것입니다. 템플릿을 처음부터 디자인하는 경우 전역 사전 설정을 사용하면 해당 프로세스에 엄청난 도움이 될 수 있습니다.

Divi 레이아웃 블록과 함께 전역 사전 설정 사용

템플릿이 디자인되면 기본 WordPress 블록 편집기를 사용하여 추가 게시물 콘텐츠 요소를 디자인하기 위해 Divi 레이아웃 블록과 함께 전역 사전 설정을 사용할 준비가 된 것입니다.

그렇게 하려면 블로그 게시물을 편집(또는 생성)하십시오. 그런 다음 몇 가지 모의 콘텐츠(예: 몇 가지 제목과 단락, 추천 이미지)가 있는지 확인합니다.

지금 프론트엔드에 있는 포스트를 보면 포스트 템플릿 안에 포스트 내용이 표시되고 내용(제목, 본문 등...)은 포스트 내용 모듈 설정에서 스타일을 상속받습니다.

게시물 콘텐츠 모듈은 기본 텍스트 콘텐츠의 스타일만 처리합니다. 기본 WordPress 블록 편집기를 사용하여 게시물 전체에 추가 요소를 추가하려면 해당 요소의 스타일을 하위 테마의 사용자 정의 CSS를 통해 변경해야 합니다. Divi 레이아웃 블록을 사용하지 않는 한 그렇습니다.

게시물 템플릿 및 사이트와 일치시키려는 콘텐츠를 추가하려면 Divi 레이아웃 블록을 사용할 수 있습니다. 이를 통해 원하는 콘텐츠를 추가하고 Divi Builder를 사용하여 스타일을 지정할 수 있습니다. 또한 전역 사전 설정을 사용할 수 있으므로 블로그 게시물 콘텐츠 디자인을 즉석에서 더욱 간소화할 수 있습니다.

디자인 #1: 글로벌 사전 설정 및 Divi 레이아웃 블록으로 블로그 CTA 구축

이 첫 번째 예에서는 게시물 템플릿 및 사이트 디자인과 일치하는 사용자 지정 블로그 CTA를 만들어 보겠습니다.

이렇게 하려면 게시물 콘텐츠에 Divi 레이아웃 블록을 추가합니다.

그런 다음 새 레이아웃 만들기를 클릭합니다.

그러면 평소와 같이 기본적으로 Divi Builder인 레이아웃 블록 편집기가 열립니다. 기본 섹션에 1열 행을 지정합니다.

다른 브라우저에서 전역 사전 설정 레이아웃을 열고 요소를 볼 수 있도록 프런트 엔드에서 빌드하기 위해 클릭했는지 확인합니다. 그렇게 하면 한 브라우저에서 레이아웃 편집기를 열고 다른 브라우저에서 스타일 가이드를 열 수 있습니다.

스타일 가이드가 없는 경우 가져오고 싶은 디자인 요소에 액세스할 수 있도록 사이트의 페이지 레이아웃을 열 수 있습니다.

스타일 가이드에서 배경 복사

이 CTA에서는 스타일 가이드의 로열 블루 배경을 사용할 것입니다. 텍스트 모듈의 설정을 열고 배경을 복사합니다.

그런 다음 레이아웃 편집기에서 섹션의 설정을 열고 배경을 섹션에 붙여넣습니다.

H3 사전 설정으로 텍스트 모듈 추가

그런 다음 행에 새 텍스트 모듈을 추가합니다.

그런 다음 설정을 열고 다음을 업데이트합니다.

본문에 다음 HTML을 붙여넣어 CTA에 대한 H3 제목을 추가합니다.

<h3>Learn How One Client Increased Revenue by 500%</h3>

Global Presents 드롭다운을 열고 H3 제목(WALP – H3 – 1)에 대한 사전 설정을 선택합니다.

디자인 업데이트

그런 다음 텍스트 색상을 흰색으로 업데이트하고 정렬을 가운데에 맞춥니다.

전역 사전 설정이 있는 버튼 추가

텍스트 모듈 아래에 새 버튼을 추가합니다.

그런 다음 버튼 텍스트를 업데이트하고 전역 사전 설정 버튼 디자인 중 하나를 선택합니다. 이 예에서는 "WALP – 버튼 3"을 사용하겠습니다.

변경 사항을 저장하다

완료되면 저장 및 종료를 클릭합니다.

이제 WordPress 블록 편집기에 표시된 요소를 볼 수 있습니다.

디자인 #2: 글로벌 사전 설정과 Divi 레이아웃 블록을 사용하여 블로그 인용문 만들기

이 다음 디자인 요소에 대해 블로그 게시물에 인용문을 추가할 것입니다.

Divi 레이아웃 블록 추가

시작하려면 견적을 표시할 위치에 Divi 레이아웃 블록을 추가하십시오.

그런 다음 새 레이아웃 만들기를 클릭합니다.

스타일 가이드에서 배경 복사 및 붙여넣기

스타일 가이드에서 진한 파란색 배경을 복사합니다.

그런 다음 레이아웃 편집기의 기본 섹션에 붙여넣습니다.

행 추가

그런 다음 섹션에 1열 행을 추가합니다.

사전 설정이 있는 평가 모듈 추가

그런 다음 열에 평가 모듈을 추가합니다. 그런 다음 글로벌 사전 설정 "WALP – Testimonial 2"를 선택합니다.

이렇게 하면 블로그 게시물에 대한 인용문 디자인을 시작하는 데 도움이 됩니다.

디자인 업데이트

디자인 탭에서 다음과 같이 디자인 설정을 조정합니다.

• 견적 아이콘 색상:
• 본문 글꼴 두께: Light
• 본문 글꼴 스타일: 기울임꼴
• 본문 텍스트 정렬: 왼쪽
• 본문 색상: #ffffff
• 저자 글꼴: Ubuntu
• 작성자 텍스트 크기: 16px

새 전역 사전 설정 추가

이 평가 사전 설정을 크게 변경했으므로 향후 게시물 인용에 사용하기 위해 이 시점에서 새 사전 설정을 만드는 것이 좋습니다.

새 사전 설정을 만들려면 "현재 스타일에서 새 사전 설정 만들기" 버튼을 클릭합니다. 그런 다음 새 사전 설정 이름("블로그 게시물 인용")을 지정하고 저장합니다. 이제 전역 사전 설정을 사용할 준비가 되었습니다.

레이아웃을 저장하면 게시물 내용 내에서 볼 수 있습니다.

디자인 #1: 전역 사전 설정 및 Divi 레이아웃 블록을 사용하여 블로그 게시물에 Blurbs 추가

이 다음 예에서는 게시물에 몇 가지 광고 문구를 추가할 것입니다.

새 Divi 레이아웃 블록 추가

다른 Divi 레이아웃 블록을 추가하고 Build New Layout 버튼을 클릭합니다.

레이아웃 편집기에서 레이아웃에 2열 행을 추가합니다.

사전 설정이 있는 Blurb 모듈 추가

왼쪽 열에 블러브 모듈을 추가합니다.

광고 문구에 새 아이콘 이미지를 추가합니다. 그런 다음 사전 설정 드롭다운을 열고 블러 사전 설정 "WALP – Blurb 4"를 선택합니다.

두 번째 광고 문구 추가

그런 다음 광고 문구를 복사하여 2열에 붙여넣고 이미지를 업데이트합니다.

레이아웃을 저장하면 게시물 내용에서 볼 수 있습니다.

최종 결과

이제 프런트 엔드에서 포스트를 열어 최종 결과를 확인하십시오.

전역 사전 설정이 있는 재사용 가능한 블록

Divi 레이아웃 블록으로 재사용 가능한 블록을 활용하려면 전역 사전 설정과 함께 작동한다는 점을 아는 것이 좋습니다. 따라서 이전에 만든 블로그 CTA를 재사용 가능한 블록으로 저장하려는 경우 게시물을 작성할 때 CTA를 추가하는 데 사용할 수 있는 편리한 블록이 있습니다. 그리고 CTA는 전역 사전 설정이 있는 버튼과 텍스트를 사용하기 때문에 해당 요소에 대한 전역 사전 설정을 업데이트하면 재사용 가능한 블록의 요소도 업데이트됩니다.

마지막 생각들

Global Presets는 Divi에서 사용할 수 있는 가장 강력한 디자인 도구 중 하나입니다. 사이트 전체에서 사용하는 모듈에 전역 사전 설정을 추가하는 데 시간을 들이면 레이아웃 블록을 사용하여 블로그 게시물 템플릿 및 콘텐츠를 디자인하는 간소화된 프로세스를 실제로 활용할 수 있습니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!