Divi의 동적 콘텐츠 기능을 사용하여 동적 게시물 레이아웃을 디자인하는 방법

Divi의 새로운 동적 콘텐츠 기능은 블로그 게시물(및 그 이상)을 위한 동적 레이아웃을 구축할 수 있는 기능을 제공합니다. 그리고 이렇게 하는 것을 고려할 만한 충분한 이유가 있습니다. 한 가지 이유는 디자인입니다. 특히 시작점으로 사용할 수 있는 미리 만들어진 레이아웃을 사용할 때 비주얼 빌더를 사용하여 Divi로 멋진 포스트 레이아웃을 디자인할 수 있습니다. 또 다른 이유는 편의성입니다. 모든 동적 콘텐츠 요소(카테고리, 추천 이미지, 게시물 태그, 사용자 정의 필드 등)가 있는 게시물 레이아웃이 디자인되면 블로그 게시물을 만들고 업데이트하는 프로세스가 크게 간소화됩니다. 실제 게시물 콘텐츠 외에 다른 모든 게시물 데이터는 비주얼 빌더를 배포할 필요 없이 업데이트할 수 있습니다.

이 튜토리얼에서는 Divi에서 동적 포스트 레이아웃을 만드는 방법을 보여 드리겠습니다. 미리 만들어진 레이아웃으로 시작하여 레이아웃 전체에 동적 콘텐츠를 추가한 다음 일치하도록 해당 콘텐츠를 디자인하는 프로세스를 안내하겠습니다. 사용자 정의 필드를 동적 콘텐츠로 사용하는 간단한 방법도 소개하겠습니다.

시작하자.

엿보기

시작하는 데 필요한 것

이 튜토리얼에서는 다음이 필요합니다.

• 디비 테마
• 개인 트레이너 레이아웃 팩. 이 레이아웃 팩은 Divi Builder에서 액세스할 수 있습니다. 개인 트레이너 서비스 페이지 레이아웃을 사용하여 게시물 레이아웃 디자인을 시작하겠습니다.

또한 맞춤형 포스트 유형 기능을 사용하여 추천 운동 섹션을 구축하기 위해 사용자 정의 필드를 활용하는 방법을 보여드릴 것입니다. 사용자 정의 필드는 WordPress에 내장되어 있으며 추가 플러그인이나 다른 것이 필요하지 않습니다. 그래서 당신은 이미 당신이 필요로 하는 것을 가지고 있습니다.

1부: 포스트에 미리 만들어진 레이아웃 추가하기

일을 시작하려면 페이지가 아닌 새 게시물을 만들고 게시물에 제목을 지정한 다음 Divi Builder 사용 버튼을 클릭하십시오. 먼저 기본 WordPress 편집기 화면에서 게시물 설정을 사용자 정의해야 하므로 비주얼 빌더를 아직 배포하지 마십시오.

레이아웃에서 이미지를 가져오기 위해 미리 만들어진 레이아웃을 추가하고 싶기 때문입니다(특집 이미지에 필요함). Divi Builder 메뉴에 있는 Load Layout 버튼을 클릭합니다.

라이브러리에서 로드 팝업에서 Personal Trainer Service 페이지 레이아웃을 선택하고 "이 레이아웃 사용" 버튼을 클릭하여 게시물에 배포합니다.

그런 다음 게시물을 게시하여 설정을 저장합니다.

파트 2: Divi 페이지 설정, 포스트 메타 데이터 및 추천 이미지 업데이트

Divi 페이지 설정

새 레이아웃이 디자인에 맞도록 Divi 페이지 설정을 업데이트하는 것이 중요합니다. 또한 게시물 제목 모듈을 대신 사용할 것이기 때문에 기본 게시물 제목 표시를 숨겨야 합니다.

페이지 오른쪽 상단에서 Divi 페이지 설정 상자를 찾아 다음을 업데이트합니다.

페이지 레이아웃: 전각
게시물 제목 표시: 숨기기

Divi 페이지 설정이 표시되지 않으면 Divi Builder가 활성화되지 않았을 수 있으므로 먼저 활성화해야 합니다.

카테고리 추가

범주 상자 아래에 "Strength Training"이라는 새 범주를 추가하고 이 범주가 선택된 유일한 범주인지 확인합니다.

태그 추가

태그 상자에 Speed, Training 및 Workouts의 세 가지 태그를 추가합니다.

나타난 그림

다음으로 아래 스크린샷과 같이 레이아웃의 헤더에 사용된 배경 이미지와 일치하는 추천 이미지를 추가합니다.

파트 3: 동적 운동 콘텐츠에 대한 사용자 정의 필드 추가

사용자 정의 필드는 WordPress에 내장되어 있습니다. 이를 통해 게시물 작성자는 카테고리, 게시물 작성자, 게시 날짜 등과 같은 기본 메타데이터 외에 게시물에 추가 정보(메타데이터라고 함)를 추가할 수 있습니다. 기본 수준에서 사용자 정의 필드를 사용하여 날씨를 표시할 수 있습니다. 또는 게시물을 작성할 때 작성자의 기분. 그러나 사용자 정의 필드를 사용하여 웹 사이트에 대한 동적 콘텐츠를 만드는 방법에는 여러 가지가 있습니다. 웹사이트에 사용자 정의 필드를 추가하는 방법에 대해 자세히 읽어보십시오. 그러나 이 사용 사례의 경우 사용자 정의 필드의 기본 개념을 몇 가지 직접 구축하여 이해할 수 있을 것이라고 생각합니다.

이 예에서는 게시물에 동적 콘텐츠를 추가하는 데 사용할 수 있는 몇 가지 사용자 정의 필드를 추가하는 방법을 보여 드리겠습니다. 이 예제의 동적 콘텐츠는 추천 운동입니다. 사용자 정의 필드가 준비되면 게시물 작성자가 해야 할 일은 사용자 정의 필드 값을 채우는 것뿐입니다. 그러면 Visual Builder를 로드할 필요 없이 콘텐츠가 게시물에 (동적으로) 업데이트됩니다.

이렇게 하려면 게시물 맨 아래로 스크롤하여 사용자 정의 필드 상자를 찾으십시오. 어떤 이유로 표시되지 않는 경우 페이지 상단의 화면 옵션에서 선택했는지 확인하십시오.

그런 다음 사용자 정의 필드 상자 드롭다운(접힌 경우)을 클릭하여 새 사용자 정의 필드를 추가하고 다음을 입력합니다.

이름: 운동 제목
가치: 추천 운동

그런 다음 사용자 정의 필드 추가 버튼을 클릭하십시오.

이름은 Divi에서 사용자 정의 필드를 식별하는 방법입니다. 값은 Divi의 동적 콘텐츠 기능을 사용하여 페이지에 동적으로 추가되는 콘텐츠입니다(자세한 내용은 나중에 설명).

웹 사이트에 다음 사용자 정의 필드를 추가하려면 이 프로세스를 계속하십시오.

이름: 워밍업
가치: 800m 달리기

이름: 기간
값: 30분

이름: 역도
값:

<ul>
<li>Squats: 10 reps at 60% max (4 sets)</li>
<li>Bench: 6 reps at 70% max (3 sets)</li>
</ul>

이름: 쿨다운
가치: 400m 달리기

참고: 이 사용자 정의 필드는 Divi 테마에 추가되며 앞으로 작성하는 모든 새 게시물에서 사용할 수 있습니다. 즉, 이 단일 게시물에 국한되지 않습니다.

게시물을 업데이트하는 것을 잊지 마세요!

파트 4: 비주얼 빌더를 사용하여 포스트 레이아웃에 동적 콘텐츠 추가하기

이제 게시물 설정과 메타 데이터가 준비되었으므로 게시물에 동적 콘텐츠를 추가할 차례입니다. 이렇게 하려면 Visual Builder를 배포합니다.

이 고급 레이아웃 디자인을 좀 더 쉽게 찾고 편집할 수 있도록 설정 메뉴를 열고 빌더 기본 상호 작용 모드를 클릭 모드로 설정합니다.

헤더 섹션에서 버튼 모듈을 삭제합니다(필요하지 않음).

배경 이미지를 주요 이미지 동적 콘텐츠로 교체

동적 콘텐츠의 첫 번째 부분에서는 상단 헤더 섹션 행의 1열에 사용된 배경 이미지를 게시물에 사용된 추천 이미지로 교체할 것입니다. 이렇게 하려면 행 설정을 열고 열 1에 대한 배경 설정을 찾은 다음 배경 이미지 탭을 클릭합니다. 그런 다음 현재 존재하는 이미지를 삭제하고 배경 이미지 미리보기 상자 위로 마우스를 가져갑니다. 상자의 오른쪽 상단에 동적 콘텐츠 아이콘이 표시됩니다. 동적 콘텐츠 옵션을 열려면 클릭하십시오. 그런 다음 목록에서 추천 이미지 동적 콘텐츠 옵션을 선택합니다.

동일한 이미지를 사용하기 때문에 레이아웃이 정확히 동일하게 보입니다. 유일한 차이점은 이제 게시물의 추천 이미지로 설정된 모든 이미지에서 배경 이미지를 가져온다는 것입니다. 이것이 바로 다이나믹 콘텐츠의 매력!

계속하자.

게시물 제목 모듈로 게시물 제목 추가하기

현재 페이지 제목이 있는 텍스트 모듈 아래에 게시물 제목 모듈을 추가합니다. 동적 콘텐츠를 사용하여 모듈에 게시물 제목을 추가하는 옵션도 있지만 게시물 제목 모듈은 이미 동적 콘텐츠처럼 작동하고 SEO용 h1 제목 태그를 유지하기 때문에 사용자 정의 게시물 레이아웃에 사용하기 때문에 완벽합니다. .

그런 다음 게시물 제목 모듈 설정을 다음과 같이 업데이트합니다.

메타 표시: 아니요
추천 이미지 표시: 아니요

이제 위의 텍스트 모듈로 이동하여 h2 탭을 마우스 오른쪽 버튼으로 클릭하고 이 목록에서 옵션을 선택하여 h2 제목 스타일을 복사합니다.

그런 다음 모듈을 마우스 오른쪽 버튼으로 클릭하고 목록에서 옵션을 선택하여 h2 제목 스타일을 게시물 제목 모듈에 붙여넣습니다.

그런 다음 다시 위의 텍스트 모듈로 돌아가서 간격 스타일을 복사하여 게시물 제목 모듈에 붙여넣습니다. 그런 다음 게시물 제목 텍스트 색상을 밝은 색상으로 변경하여 흰색을 얻습니다.

이제 게시물 제목이 원래 레이아웃 제목의 디자인과 일치해야 합니다.

이제 원래 제목이 포함된 텍스트 모듈을 삭제할 수 있습니다.

동적 콘텐츠를 사용하여 메타데이터 행 만들기

레이아웃의 두 번째 섹션으로 이동합니다. 그런 다음 비주얼 빌더에서 드래그하거나 섹션 설정에서 0px로 설정하여 섹션의 상단 패딩을 제거합니다.

레이아웃의 두 번째 섹션의 첫 번째 행에서 텍스트 모듈("개인 훈련 정보" 내용 포함) 아래에 구분선이 있는 것을 볼 수 있습니다. 여기에서 동적 콘텐츠를 사용하여 메타데이터의 사용자 지정 행을 구축할 것입니다.

이 행의 크기가 상단 섹션의 행 크기와 일치하기를 원합니다. 이렇게하려면 상단 섹션에서 행의 행 설정을 열고 크기 조정 스타일을 복사하십시오. 그런 다음 두 번째 섹션의 첫 번째 행에 붙여넣습니다. 그런 다음 행 거터를 2로 업데이트합니다. 새 크기 조정은 다음 스크린샷과 같아야 합니다.

또한 다음과 같이 사용자 정의 간격을 추가해야 합니다.

맞춤 패딩: 왼쪽 1%, 오른쪽 1%

그런 다음 행 설정을 저장합니다.

이제 행 열 구조를 4열 레이아웃으로 업데이트합니다.

이제 동적 콘텐츠를 추가할 준비가 되었습니다. 이렇게 하려면 맨 왼쪽 열에 있는 텍스트 모듈의 설정을 열고 콘텐츠 상자 위로 마우스를 가져갑니다. 상자의 오른쪽 상단에 동적 콘텐츠 아이콘이 표시됩니다. 동적 콘텐츠 옵션을 열려면 클릭하십시오.

그런 다음 게시 날짜 게시 옵션을 선택합니다.

그런 다음 그에 따라 날짜 형식을 변경합니다.

이렇게 하면 게시물의 게시 날짜가 동적 콘텐츠로 추가됩니다.

동적 날짜 콘텐츠로 텍스트 모듈의 스타일을 지정하려면 바로 아래 행의 왼쪽 열에 있는 텍스트 모듈의 모듈 스타일을 복사합니다.

그런 다음 동적 날짜 콘텐츠가 있는 텍스트 모듈에 모듈 스타일을 붙여넣고 텍스트 텍스트 색상을 흰색으로 변경합니다.

그런 다음 텍스트 모듈과 그 아래의 구분선을 복사하여 열 2에 붙여넣습니다. 그런 다음 동적 콘텐츠를 게시물 카테고리로 변경합니다.

레이아웃 디자인과 일치하도록 링크 텍스트 색상을 흰색으로 업데이트해야 합니다.

이제 구분선이 있는 게시물 카테고리 텍스트 모듈을 열 3으로 복사합니다. 그런 다음 동적 콘텐츠를 게시물 댓글 수로 변경합니다. 게시물 댓글 수 팝업에서 이전 입력 상자에 다음을 입력합니다.

이전: 댓글:

동적 콘텐츠 팝업에서 사용할 수 있는 전후 입력 상자는 동적 콘텐츠 전후에 텍스트를 추가할 수 있는 편리한 옵션입니다. 이것은 필요할 때 레이블, 가격 기호 및 기타 요소를 추가하는 데 유용합니다.

이제 동적 콘텐츠를 계속 추가해 보겠습니다. 3열의 텍스트 모듈과 구분선을 복사하여 4열에 붙여넣습니다. 이 마지막 열에는 게시물 작성자 썸네일과 작성자 이름이 저장됩니다. 따라서 텍스트 모듈의 동적 콘텐츠를 Post Author로 변경합니다. 게시물 작성자 팝업에서 다음을 업데이트합니다.

이전: 작성자:
이름 형식: 이름 및 성

게시물 작성자 콘텐츠가 있는 텍스트 모듈 위에 새 이미지 모듈을 추가합니다. 이미지 모듈 설정을 열고 기본 이미지를 삭제합니다. 지금까지 해왔던 것처럼 이미지 미리보기 상자에서 동적 콘텐츠 아이콘을 클릭하고 게시물 작성자 프로필 사진을 동적 콘텐츠로 추가합니다.

그런 다음 디자인 설정을 조정하여 이미지를 위로 끌어올려 다음과 같이 사용자 정의 너비를 지정합니다.

너비: 80px
사용자 정의 여백(데스크톱): -82px 상단
사용자 정의 여백(태블릿): 0px 상단

참고: 게시물 작성자 이름은 현재 게시물에 할당된 작성자를 표시합니다. 게시물 작성자 프로필 사진은 WordPress 대시보드의 Users > Your Profile에서 사용자 프로필에 대해 설정된 모든 것입니다.

5부: 게시물에 추천 운동을 추가하기 위해 사용자 정의 필드를 동적 콘텐츠로 추가

자습서 앞부분에서 이러한 사용자 정의 필드를 추가한 방법을 기억하십니까? 이제 해당 사용자 정의 필드를 게시물의 추천 운동에 대한 콘텐츠로 사용할 것입니다.

추천 운동 동적 콘텐츠를 추가하려면 먼저 모든 동적 메타데이터와 함께 4열 행 바로 아래에 2열 행을 복제합니다. 그런 다음 두 열에서 모듈을 삭제하고 왼쪽 열에 블러브 모듈을 추가합니다.

우리는 운동 섹션에 대한 동적 콘텐츠를 추가하기 위해 광고 모듈을 사용할 것입니다. 시작하려면 왼쪽 열에 새 광고 문구 모듈을 추가하세요.

제목에 대해 "운동 제목"이라는 사용자 정의 필드를 동적 콘텐츠로 추가합니다. 그런 다음 광고 내용에 대해 "Duration"이라는 사용자 정의 필드를 동적 내용으로 추가합니다.

계속 진행하기 위해 이 모듈의 스타일에 대해 자세히 설명하지 않겠습니다. 그러나 제목 왼쪽에 배치된 광고 아이콘을 추가하고 레이아웃과 일치하도록 디자인을 업데이트해야 합니다.

다음으로 아래에 두 번째 블러브 모듈을 추가합니다. 제목으로 "워밍업" 텍스트를 입력합니다. 그런 다음 "Warmup"이라는 사용자 정의 필드를 동적 콘텐츠로 추가합니다.

제목으로 "Weight Lifting"을, 동적 콘텐츠로 사용자 정의 필드 "Weight Lifting"을 사용하여 그 아래에 세 번째 광고 모듈을 추가합니다. 이 사용자 정의 필드 값에 html을 사용하고 있으므로 역도 팝업에서 원시 html을 활성화해야 합니다.

제목이 "Cool Down"이고 동적 콘텐츠로 사용자 정의 필드인 "Cool Down"이 있는 최종 광고 모듈을 추가합니다.

이제 게시물에 운동을 추가할 수 있는 동적 섹션이 생겼습니다!

WordPress의 기본 페이지 편집기에서 사용자 정의 필드 값을 업데이트하기만 하면 해당 콘텐츠가 Divi 빌더로 이동할 필요 없이 게시물 레이아웃에 자동으로 추가됩니다.

6부: 게시물 태그 동적 콘텐츠를 사용하여 "관련 주제" 섹션 디자인

동적 콘텐츠를 사용하여 게시물 태그를 표시하고 게시물에 대해 멋지게 보이는 "관련 주제" 섹션을 만들 수 있습니다. 이렇게 하려면 하나의 열 행을 새로 만들고 행에 텍스트 모듈을 추가합니다.

그런 다음 콘텐츠 상자에 대해 게시물 태그를 동적 콘텐츠로 추가합니다. 그런 다음 다음 게시물 태그 옵션을 업데이트합니다.

이전: 관련 항목:
태그 구분 기호: //

참고: 태그 구분 기호에 원하는 거의 모든 문자 집합을 사용할 수 있으므로 창의적인 디자인을 위해 다른 문자를 자유롭게 실험해 보십시오.

콘텐츠의 스타일을 지정하려면 다음 디자인 설정을 업데이트하십시오.

텍스트 글꼴: Oswald
텍스트 글꼴 두께: 반 굵게
텍스트 텍스트 색상: #ff4c00
텍스트 텍스트 크기: 30px
링크 글꼴: Oswald
링크 글꼴 두께: 반 굵게
링크 텍스트 색상: #262d3f
링크 텍스트 크기: 50px
링크 문자 간격: 2px
링크 라인 높이: 1.6em

다음은 최종 디자인입니다.

7부: 저자 약력 및 댓글 섹션 추가

이 시점에서 동적 콘텐츠를 추가하고 포스트 레이아웃의 디자인을 상당히 쉽게 조정할 수 있는 준비가 되어 있으므로 이 마지막 두 요소에 대해 자세히 설명하지 않겠습니다.

동적 콘텐츠를 사용하여 작성자 약력 섹션 추가

게시물 콘텐츠 하단에 작성자 프로필 섹션을 추가하려면 게시물 작성자, 게시물 작성자 프로필 사진 및 작성자 프로필 동적 콘텐츠를 사용할 수 있습니다. 아래 스크린샷에서 볼 수 있듯이 1/4 3/4 열 행을 만들었습니다. 그런 다음 왼쪽 열에 게시물 작성자 프로필 사진을 추가했습니다. 오른쪽 열에는 게시물 작성자를 추가하고 그 아래에는 작성자 약력을 표시했습니다. 또한 섹션(및 그래디언트 오버레이)의 배경 이미지로 추천 이미지 동적 콘텐츠를 추가했습니다. 다음은 그것이 어떻게 생겼는지에 대한 예입니다.

주석 모듈을 사용하여 주석 섹션 추가

우리는 사용자 정의 게시물 레이아웃을 사용하고 있기 때문에 댓글 섹션의 디자인을 레이아웃과 일치시킬 수 있도록 댓글 모듈을 사용합니다. 버튼 스타일과 글꼴을 현재 레이아웃과 일치시키는 새 섹션 행에 댓글 모듈을 추가하기만 하면 됩니다. 다음은 그것이 어떻게 생겼는지에 대한 예입니다.

최종 디자인

다음은 모든 디자인이 조정된 후 전체 포스트의 최종 디자인입니다.

게시물 콘텐츠 업데이트 및 향후 게시물을 위한 레이아웃 저장

Divi Builder를 사용하여 게시물 레이아웃을 생성하기 때문에 Divi 모듈을 사용하여 게시물의 실제 게시물 콘텐츠를 업데이트해야 합니다. 그러나 이제 다른 모든 것이 동적이기 때문에 프로세스를 훨씬 더 쉽게 진행할 수 있습니다. 게시물 레이아웃을 라이브러리에 저장해야 새 게시물을 만들 때 저장된 레이아웃을 게시물에 추가하고 게시물 콘텐츠를 업데이트하기만 하면 됩니다.

마지막 생각들

Divi의 동적 콘텐츠는 게시물 데이터를 훨씬 쉽게 추가하고 업데이트할 수 있는 강력한 기능입니다. 따라서 Divi Builder를 사용하여 블로그 게시물(또는 프로젝트와 같은 다른 사용자 지정 게시물 유형)에 대한 사용자 지정 레이아웃을 디자인하려는 경우 동적 콘텐츠가 올바른 방법입니다. 물론 동적 콘텐츠는 게시물에만 국한되지 않습니다. 전체 웹사이트에서 동적 콘텐츠와 사용자 정의 필드를 활용할 수 있습니다. 이 게시물이 몇 가지 가능성을 이해하고 동적 콘텐츠를 새롭고 멋진 방식으로 사용하도록 영감을 주기를 바랍니다.

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

건배!