Divi 테마 빌더로 레시피 카드 템플릿을 만드는 방법

음식 블로거와 레시피 제작자는 자신이 게시하는 레시피를 일관되게 살펴보는 것이 얼마나 중요한지 잘 알고 있습니다. 일반적인 솔루션은 레시피 카드 플러그인을 사용하는 것이지만 디자인 제한이 있습니다. 이제 Divi 테마 빌더를 사용하여 사이트와 블로그 전체에서 사용할 나만의 레시피 카드 템플릿을 만들 수 있습니다. ACF(Advanced Custom Fields) 플러그인의 도움으로 독특하고 재사용 가능한 레시피 카드를 디자인하는 것이 그 어느 때보다 쉬워졌습니다.

이 게시물에서는 동적 콘텐츠가 포함된 레시피 카드 템플릿을 만드는 방법을 보여줍니다. Divi 테마 빌더 설정을 사용하면 특정 카테고리를 선택하여 레시피가 포함된 블로그 게시물에 디자인을 적용할 수 있습니다. 이 튜토리얼을 통해 자신만의 맞춤 필드를 사용하여 나만의 레시피 카드 스타일을 만들 수 있기를 바랍니다.

다양한 화면 크기에서 디자인이 어떻게 보이는지 살펴보겠습니다.

레시피 카드 템플릿 미리보기

다양한 화면 크기에서 디자인이 어떻게 보이는지 살펴보겠습니다.

데스크탑

태블릿

이동하는

1. 고급 사용자 정의 필드 플러그인 다운로드 및 설치

검색 및 설치

플러그인 검색창에서 '고급 사용자 정의 필드'를 검색하여 ACF 플러그인을 찾아 설치하고 활성화합니다.

새 필드 그룹 추가

ACF 탭을 클릭하고 '새로 추가'를 선택합니다. 그룹 이름을 '레시피 카드'로 지정합니다. '필드 추가' 버튼을 통해 사용자 정의 필드를 하나씩 추가합니다.

사용자 정의 필드 추가

각 사용자 정의 필드에 대해 '필드 추가' 버튼을 클릭합니다. 각각은 다른 유형의 콘텐츠에 맞게 사용자 지정할 수 있습니다. 아래 목록은 각 필드의 레이블과 유형을 지정합니다. 모듈을 빌드할 때 쉽게 찾을 수 있도록 각 필드 레이블의 시작 부분에 '레시피'라는 단어를 추가합니다. 레이블을 추가하면 필드 이름이 자동으로 채워집니다.

레시피 제목

레시피 제목으로 시작합니다.

• 필드 레이블: 레시피 제목
• 필드 유형: 텍스트
• 필수?: 예
• 자리 표시자 텍스트: 레시피 제목
• 글자수 제한: 30

레시피 작성자

그런 다음 작성자에 대한 필드를 만듭니다.

• 필드 레이블: 레시피 작성자
• 필드 유형: 텍스트
• 필수?: 예
• 자리 표시자 텍스트: 작성자

레시피 준비 시간

준비 시간을 따르십시오.

• 필드 레이블: 레시피 준비 시간
• 필드 유형: 숫자
• 필수?: 예
• 자리 표시자 텍스트: ##
• 추가: 준비 시간:
• 추가: 분.

레시피 서빙

그런 다음 서빙.

• 필드 레이블: 레시피 인분
• 필드 유형: 숫자
• 필수?: 예
• 자리 표시자 텍스트: ##
• 추가: 인분:

레시피 맛 팁

플레이버 팁 필드를 추가합니다.

• 필드 레이블: 레시피 맛 팁
• 필드 유형: 텍스트
• 필수?: 예
• 추가: 풍미 팁:
• 글자수 제한: 40

레시피 이미지

이제 이미지 필드를 추가합니다.

• 필드 레이블: 레시피 이미지
• 필드 유형: 이미지
• 필수?: 예

레시피 재료 제목

그런 다음 성분 제목입니다.

• 필드 레이블: 레시피 재료 제목
• 필드 유형: 텍스트
• 지침: 자리 표시자 텍스트와 동일하게 작성하십시오.
• 필수?: 예
• 자리 표시자 텍스트: 재료

레시피 재료 목록

성분 목록을 따르십시오.

• 필드 라벨: 레시피 성분 목록
• 필드 유형: 텍스트 영역
• 지침: 모든 항목 뒤에 공백 추가
• 필수?: 예
• 행: 8
• 새 줄: 자동으로 <br> 추가

레시피 준비 제목

마지막으로 준비 제목입니다.

• 필드 레이블: 레시피 준비 제목
• 필드 유형: 텍스트
• 지침: 자리 표시자 텍스트와 동일하게 작성하십시오.
• 필수?: 예
• 자리 표시자 텍스트: 준비

레시피 준비 목록

마지막으로 준비 목록입니다.

• 필드 레이블: 레시피 준비 목록
• 필드 유형: 텍스트 영역
• 지침: 모든 항목 뒤에 공백 추가
• 필수?: 예
• 행: 10
• 새 줄: 자동으로 <br> 추가

필드 그룹 게시

필드 그룹을 게시합니다. 필드 그룹 창은 아래 스크린샷과 같아야 합니다.

Divi Builder에서 레시피 카드 템플릿에 대한 ACF 플러그인 콘텐츠에 액세스하는 방법

동적 콘텐츠 아이콘을 클릭하여 고급 사용자 정의 필드를 Divi 모듈에 추가할 수 있습니다. 이 아이콘은 콘텐츠 상자의 오른쪽 상단에 있습니다. 다음과 같습니다.

2. Divi Builder로 새로운 레시피 카드 템플릿 만들기

Divi 테마 빌더 단계

1. 레시피 카테고리 생성

템플릿을 할당하려면 '레시피'라는 카테고리가 필요합니다. 대시보드를 통해 카테고리 탭에 추가합니다.

2. Divi 테마 빌더를 열고 새 템플릿 추가

Divi 테마 빌더를 열고 새 템플릿을 추가합니다.

3. 글로벌 바디 추가

'글로벌 본문 추가'를 클릭하고 특정 카테고리 > 레시피의 게시물에 템플릿을 할당합니다. 그런 다음 '템플릿 만들기' 버튼을 클릭합니다.

4. 커스텀 바디 빌드

'글로벌 본문 추가'를 클릭하고 '사용자 정의 본문 추가'를 선택합니다.

3. 동적 콘텐츠를 사용하여 레시피 카드 디자인 재현

새 섹션 추가

이제 레시피 카드 템플릿 디자인을 시작할 수 있습니다. Divi 빌더가 열리면 '처음부터 빌드'를 선택하십시오. 새 섹션을 추가하여 시작하십시오.

배경

섹션 설정에서 배경색을 추가합니다.

• 배경색: 밝은 회색 #ededed

사이징

또한 디자인 탭에서 크기를 조정합니다.

• 폭: 100%
• 최대 너비: 100%

첫 번째 행 추가

열 구조

하나의 열이 있는 새 행을 추가합니다.

사이징

모듈을 추가하기 전에 행의 크기 설정을 조정하십시오.

• 최대 너비: 90%

열 설정

배경

행 내부의 열 설정을 사용자 지정합니다. 먼저 배경색을 추가합니다.

• 배경색: 흰색 #ffffff

국경

그런 다음 테두리 스타일을 수정합니다.

• 둥근 모서리: 네 모서리 모두 1vw
• 테두리 스타일: 네 면 모두
• 너비: 5px
• 색상: 베리 다크 그레이 #333333

동적 콘텐츠가 있는 텍스트 모듈 추가

콘텐츠

행 및 열 설정을 완료했으면 모듈을 추가할 차례입니다. 텍스트 모듈을 추가하여 시작하십시오. 콘텐츠 창에서 레시피 제목에 대한 동적 콘텐츠를 선택합니다. 선택되면 톱니바퀴 아이콘을 클릭하고 H1 스니펫을 입력합니다.

• 본문: 레시피 제목
• 신체 설정:
  • 이전: <H1>
  • 이후:</H1>

제목 텍스트

그런 다음 그에 따라 H1 텍스트 설정의 스타일을 지정합니다.

• 표제 수준: H1
• 글꼴: 오리엔타
• 무게: 굵게
• 정렬: 중앙
• 색상: 매우 진한 회색 #3d3d3d
• 크기:
  • 데스크탑: 3vw
  • 태블릿: 4vw
  • 전화: 5vw
• 문자 간격: 3px
• 라인 높이: 1.5em

간격

간격 값도 수정합니다.

• 하단 여백:
  • 데스크탑: -1vw
  • 태블릿: -2vw
  • 전화: -5vw
• 탑 패딩:
  • 데스크탑 + 태블릿: 1vw
  • 전화: 2vw
• 하단 패딩: 0vw
• 왼쪽 + 오른쪽 패딩:
  • 데스크탑 + 태블릿: 3vw
  • 전화: 4vw

동적 콘텐츠가 있는 두 번째 텍스트 모듈 추가

콘텐츠

두 번째 텍스트 모듈을 추가하고 레시피 작성자를 위한 동적 콘텐츠를 선택합니다.

• 본문: 레시피 작성자

텍스트

그런 다음 텍스트에 스타일을 지정합니다.

• 글꼴: Encode Sans
• 색상: 매우 진한 회색 #3d3d3d
• 크기:
  • 데스크탑: 1.4vw
  • 태블릿: 2.4vw
  • 전화: 3vw
• 정렬: 중앙

간격

그런 다음 간격을 조정합니다.

• 최고 마진: 1.5vw
• 탑 패딩:
  • 데스크탑 + 태블릿: 0vw
  • 전화: 2vw
• 하단 패딩: 2vw
• 왼쪽 + 오른쪽 패딩:
  • 데스크탑: 2vw
  • 태블릿 + 전화: 3vw

두 번째 행 추가

열 구조

이제 다음 열 구조를 사용하여 두 번째 행을 추가합니다.

사이징

행 설정을 열고 그에 따라 크기 조정 설정을 조정합니다.

• 거터 폭: 2
• 폭: 90%
• 최대 너비: 100%
• 행 정렬: 왼쪽

간격

그 다음, 간격.

• 상단 + 하단 패딩: 0.5vw
• 왼쪽 패딩: 10vw

시계

마지막으로 고급 탭에서 가시성을 조정합니다.

• 수평 오버플로: 표시
• 수직 오버플로: 표시

열 1 + 2 + 3 설정

국경

세 열 모두 같은 방식으로 스타일을 지정합니다. 먼저 테두리 설정으로 이동하여 몇 가지를 변경합니다. 세 열 모두에 대해 반복합니다.

• 둥근 모서리: 네 모서리 모두 1vw
• 테두리 스타일: 네 면 모두
• 너비: 5px
• 색상: 베리 다크 그레이 #333333

변환

디자인에 호버 효과를 주기 위해 다음과 같이 변형 설정을 조정합니다. 세 열 모두에 대해 반복합니다.

• 호버 시 변형 비율: 105% x 105%

열 1에 텍스트 모듈 추가

콘텐츠

텍스트 모듈을 추가하고 지금은 콘텐츠 창을 비워 둡니다. 나중에 추가하겠습니다.

배경

모듈에 배경색을 추가합니다.

• 배경색: 라임 그린 #b1e88d

제목 텍스트

다음으로 H5 텍스트 설정의 스타일을 지정합니다.

• 표제 수준: H5
• H5 글꼴: 오리엔타
• H5 색상: 매우 진한 회색 #3d3d3d
• H5 크기:
  • 데스크탑: 1vw
  • 태블릿: 2.3vw
  • 전화: 3.3vw
• 정렬: 중앙

간격

마지막으로 다음과 같이 간격 값을 조정합니다.

• 탑 패딩:
  • 데스크탑: 1vw
  • 태블릿: 1.5vw
  • 전화: 3.5vw
• 하단 패딩:
  • 데스크탑: 0.5vw
  • 태블릿 + 전화: 1.5vw
• 왼쪽 + 오른쪽 패딩:
  • 데스크탑: 2vw
  • 태블릿 + 전화: 3vw

1열에서 텍스트 모듈을 두 번 복제하고 2열과 3열로 이동

와이어프레임 보기에서 첫 번째 열의 텍스트 모듈을 복제합니다. 그런 다음 복제본을 2열과 3열로 이동합니다.

열 1의 텍스트 모듈에 동적 콘텐츠 추가

준비 시간에 대한 동적 콘텐츠를 추가하고 설정을 조정합니다.

• 본문: 레시피 준비 시간
• 신체 설정:
  • 이전: <H5>준비 시간:
  • 이후: 분</H5>

열 2의 텍스트 모듈에 동적 콘텐츠 추가

레시피 서빙을 위한 동적 콘텐츠를 추가하고 설정을 조정합니다.

• 본문: 레시피 인분
• 신체 설정:
  • 이전: <H5>인분:
  • 이후: </H5>

열 3의 텍스트 모듈에 동적 콘텐츠 추가

플레이버 팁에 대한 동적 콘텐츠를 추가하고 설정을 조정합니다.

• 바디: 레시피 플레이버 팁
• 신체 설정:
  • 이전: <H5>맛 팁:
  • 이후: </H5>

세 번째 행 추가

열 구조

이제 다음 열 구조를 사용하여 세 번째 행을 추가합니다.

사이징

모듈을 추가하기 전에 행의 크기를 조정하십시오.

• 사용자 지정 거터 너비: 2
• 폭: 80%
• 최대 너비: 100%

간격

또한 기본 상단 여백을 지웁니다.

• 최고 여백: 0vw

시계

마지막으로 고급 탭에서 가시성을 조정합니다.

• 수평 오버플로: 표시
• 수직 오버플로: 표시

열 1 + 2 + 3 설정

국경

테두리 설정부터 시작하여 세 열의 스타일을 모두 같은 방식으로 지정합니다. 2열과 3열에 대해 반복합니다.

• 둥근 모서리: 네 모서리 모두 1vw
• 테두리 스타일: 네 면 모두
• 너비: 5px
• 색상: 베리 다크 그레이 #333333

변환

디자인 탭에서 호버 변환을 추가하여 계속하십시오. 2열과 3열에 대해 반복합니다.

• 호버 시 변형 비율: 105% x 105%

열 1에 동적 콘텐츠가 있는 이미지 모듈 추가

콘텐츠

레시피 이미지에 대한 동적 콘텐츠가 있는 이미지 모듈을 추가합니다.

• 이미지: 레시피 이미지

열 2에 동적 콘텐츠가 있는 텍스트 모듈 추가

콘텐츠

이제 재료 제목에 대한 동적 콘텐츠가 있는 텍스트 모듈을 추가합니다. 톱니바퀴 아이콘을 클릭하고 다음과 같이 H3 스니펫을 입력합니다.

• 텍스트 본문: 레시피 재료 제목
• 신체 설정:
  • 이전: <H3>
  • 이후: </H3>

제목 텍스트

그런 다음 제목 텍스트의 스타일을 지정합니다.

• 표제 수준: H3
• H3Font: 오리엔타
• H3 색상: 매우 진한 회색 #3d3d3d
• H3 크기:
  • 데스크탑: 1.6vw
  • 태블릿: 2vw
  • 전화: 5.5vw
• 정렬: 중앙

간격

간격을 조정하여 모듈을 완성합니다.

• 하단 여백: 0vw
• 탑 패딩:
  • 데스크탑: 2vw
  • 태블릿: 3vw
  • 전화: 4vw
• 왼쪽 + 오른쪽 패딩:
  • 데스크탑: 2vw
  • 태블릿 + 전화: 3vw

2열에 디바이더 모듈 추가

선

디바이더 모듈을 추가하고 다음과 같이 스타일을 지정합니다.

• 색상: 라임 그린 #b1e88d

사이징

그런 다음 크기 값을 조정합니다.

• 무게: 5px
• 폭: 40%
• 정렬: 왼쪽

간격

마지막으로 간격을 조정합니다.

• 최고 여백: 0vw

열 2에 동적 콘텐츠가 있는 텍스트 모듈 추가

콘텐츠

재료 목록에 대한 동적 콘텐츠가 있는 텍스트 모듈을 추가합니다. 동적 콘텐츠 탭에서 톱니바퀴 아이콘을 클릭하고 원시 HTML을 활성화합니다.

• 텍스트 본문: 레시피 재료 목록
• 본문 설정: 원시 HTML 사용

텍스트

그런 다음 다음과 같이 텍스트의 스타일을 지정합니다.

• 글꼴: Encode Sans
• 색상: 베리 다크 그레이 #333333
• 크기:
  • 데스크탑: 0.9vw
  • 태블릿: 2vw
  • 전화: 3vw

간격

또한 간격을 조정하십시오.

• 최고 여백:
  • 데스크탑: -1vw
  • 태블릿: -3vw
  • 전화: -5vw
• 탑 패딩:
  • 데스크탑 + 태블릿: 0vw
• 하단 패딩:
  • 데스크탑: 3vw
  • 태블릿 + 전화: 4vw
• 왼쪽 + 오른쪽 패딩:
  • 데스크탑: 3vw
  • 태블릿: 4vw
  • 전화: 5vw

2열의 모든 모듈을 복제하고 3열로 이동

와이어프레임 보기에서 2열의 모든 모듈을 복제합니다. 복제된 모듈을 같은 순서로 3열로 이동합니다.

열 3의 첫 번째 텍스트 모듈에 동적 콘텐츠 추가

준비 제목에 대한 동적 콘텐츠를 추가합니다.

• 본문: 레시피 준비 제목

3열의 두 번째 텍스트 모듈에 동적 콘텐츠 추가

또한 준비 목록에 대한 동적 콘텐츠를 열의 마지막 텍스트 모듈에 추가합니다.

• 본문: 레시피 준비 목록

4번째 행 추가

열 구조

템플릿을 완성하려면 게시물 콘텐츠 모듈이 필요합니다. 다음 열 구조를 사용하여 새 행을 추가합니다.

사이징

모듈을 추가하기 전에 행의 크기를 조정하십시오.

• 맞춤 거터 너비: 2
• 폭: 100%
• 최대 너비: 80%

간격

• 왼쪽 + 오른쪽 패딩: 0vw

열 1 설정

배경

위의 레시피 카드와 일치하도록 열의 스타일을 지정합니다. 먼저 배경을 추가합니다.

• 배경색: 흰색 #ffffff

간격

또한 간격을 조정하십시오.

• 왼쪽 패딩: 0vw

국경

마지막으로 테두리 설정을 수정합니다.

• 둥근 모서리: 네 모서리 모두 1vw
• 테두리 스타일: 네 면 모두
• 너비: 5px
• 색상: 베리 다크 그레이 #333333

열 2를 비워 둡니다.

열 1에 게시물 콘텐츠 모듈 추가

텍스트

게시물 콘텐츠 모듈을 열 1에 추가하고 레시피 카드 템플릿과 일치하도록 텍스트 스타일을 지정합니다.

• 글꼴: Encode Sans
• 색상: 베리 다크 그레이 #333333
• 크기:
  • 데스크탑: 0.9vw
  • 태블릿: 2vw
  • 전화: 3vw
• 줄 높이: 2em

제목 1 텍스트

• 글꼴: 오리엔타
• 색상: 베리 다크 그레이 #333333
• 크기:
  • 데스크탑: 2vw
  • 태블릿: 5vw
  • 전화: 6vw

제목 2 텍스트

• 글꼴: 오리엔타
• 색상: 베리 다크 그레이 #333333
• 크기:
  • 데스크탑: 1.8vw
  • 태블릿: 4.5vw
  • 전화: 5.5vw

제목 3 텍스트

• 글꼴: 오리엔타
• 색상: 베리 다크 그레이 #333333
• 크기:
  • 데스크탑: 1.6vw
  • 태블릿: 4.5vw
  • 전화: 5vw

간격

레시피 카드의 스타일에 맞게 간격 값을 조정하세요.

• 상단 + 하단 패딩: 2vw
• 왼쪽 + 오른쪽 패딩:
  • 데스크탑: 4vw
  • 태블릿 + 전화: 6vw

큰따옴표 줄의 색상이나 링크 색상을 변경하려면 강조 색상 아래의 테마 사용자 정의에서 변경할 수 있습니다.

4. ACF 플러그인 설정 및 레시피 카드 템플릿을 사용하여 게시물 편집/작성

사용자 정의 필드 입력

게시물을 열거나 추가합니다. 콘텐츠 영역 아래에는 레시피 카드 템플릿에 대한 모든 사용자 정의 필드가 있습니다. 이 아보카도 토스트 디자인을 재현하려면 다음과 같이 필드를 채우십시오.

레시피 제목:

• 슈퍼그린 비건 아보카도 토스트

레시피 작성자:

• 막달레나 스위퍼 – www.veganchef.com

레시피 준비 시간:

• 15

조리법 서빙:

• 삼

레시피 맛 팁:

• 바다 소금 플레이크와 엑스트라 버진 오일 사용

레시피 이미지:

• 아보카도 토스트 이미지

레시피 재료 제목:

• 재료

레시피 재료 목록:

• 통밀 빵 조각 3개
• 1 익은 아보카도
• 100 그램. 익힌 넓은 콩
• 10g. 녹색 새싹
• 다진 파 1개
• 30g 크럼블 페타 치즈
• 반으로 자른 레몬 1개
• 올리브 오일 대시
• 바다 소금 뿌리기

레시피 준비 제목:

• 준비

레시피 준비 목록:

• 1. 식빵을 기호에 맞게 구워주세요.
• 2. 아보카도를 개봉하여 과육을 제거하고 포크로 으깬다.
• 3. 아보카도 위에 레몬즙을 짜서 소금으로 간을 합니다.
• 4. 아보카도 매쉬를 토스트 위에 펴 바릅니다.
• 5. 팥, 콩나물, 다진 대파를 뿌린다.
• 6. 소금으로 간을 한다.
• 7. 페타 치즈를 으깬다.
• 8. 올리브 오일로 마무리한다.

게시물 제목 지정

제목

게시물에 제목을 추가하는 것을 잊지 마십시오.

• 아보카도 토스트 레시피

콘텐츠 추가, 카테고리 선택, 추천 이미지 추가

블로그 게시물의 내용을 일반 편집기에 쓰거나 삽입합니다. 레시피 카테고리를 선택하고 추천 이미지를 추가하세요.

레시피 카드 템플릿 미리보기

다시 한 번 레시피 카드 템플릿으로 완성된 게시물이 다른 화면에서 어떻게 보이는지 다시 살펴보겠습니다.

데스크탑

태블릿

이동하는

랩입니다!

이 레시피 카드 템플릿 디자인을 달성하기 위해 취한 단계를 빠르게 검토해 보겠습니다.

1. ACF 플러그인을 설치합니다.
2. 레시피 카드 필드 그룹을 설정합니다.
3. 사용자 정의 필드를 추가합니다.
4. 새 템플릿을 만들고 '레시피' 카테고리 아래의 블로그 게시물에 할당합니다.
5. 모듈의 ACF 필드에서 동적 콘텐츠를 사용합니다.
6. 필드를 작성하여 블로그 게시물을 작성하거나 편집하십시오.
7. 블로그 게시물 콘텐츠를 추가합니다.

이 디자인은 동적 콘텐츠가 포함된 템플릿으로 생성되었기 때문에 ACF 플러그인 사용자 정의 필드를 사용하는 모든 레시피 블로그 게시물에서 일관되게 유지됩니다. 이 레시피 카드 템플릿 디자인이 음식 관련 블로그를 위한 모든 종류의 새롭고 혁신적인 레시피 템플릿에 영감을 주기를 바랍니다. 의견에 귀하의 생각을 알려주십시오.