Gutenberg 포스트에 Divi 스타일 이미지를 추가하기 위해 재사용 가능한 이미지 레이아웃 블록을 만드는 방법

게시 됨: 2020-02-16

Divi의 레이아웃 블록은 Divi 스타일의 이미지를 Gutenberg 블로그 게시물에 추가하기 위한 재사용 가능한 이미지 레이아웃 블록으로 사용할 수 있습니다. 이것은 Gutenberg를 사용하여 게시물 작성(및 블록 추가)의 편리함과 Divi의 강력한 디자인 옵션 및 기능(아름다운 이미지 생성)을 결합합니다.

이 튜토리얼에서는 Divi 레이아웃 블록을 사용하여 몇 가지 멋진 이미지 레이아웃을 디자인하는 방법을 보여줍니다. 그런 다음 이러한 레이아웃을 Gutenberg에서 재사용 가능한 블록으로 추가합니다. 이 기술을 사용하면 이미지에 거의 모든 Divi 디자인 기능(배경, 라이트박스, 필터, 애니메이션, 스크롤 효과 등)을 추가할 수 있습니다. 그런 다음 그 멋진 디자인을 Gutenberg로 만든 향후 게시물에 이미지를 추가하기 위한 편리한 이미지 템플릿으로 사용할 수 있습니다.

시작하자!

엿보기

재사용 가능한 이미지 레이아웃 블록을 무료로 다운로드하십시오

이 튜토리얼의 레이아웃 블록을 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

다운로드를 사용하여 사이트에서 이러한 레이아웃 블록을 가져오는 방법

이러한 재사용 가능한 Divi 이미지 레이아웃 블록을 사이트로 가져오려면 먼저 다운로드 파일의 압축을 풀어야 합니다. 거기에서 사이트로 가져와야 하는 세 개의 JSON 파일을 찾을 수 있습니다.

기본 편집기(Gutenberg)를 사용하여 게시물 편집으로 이동합니다. 페이지 오른쪽 상단의 "추가 도구 및 옵션" 메뉴를 열고 "모든 재사용 가능한 블록 관리"를 선택합니다.

그런 다음 JSON에서 가져오기 버튼을 클릭합니다. 다운로드 폴더에서 JSON 파일 중 하나를 선택하고 가져오기 버튼을 클릭합니다.

이 프로세스를 반복하여 세 가지 JSON 파일을 모두 가져옵니다.

완료되면 Gutenberg 내에서 새 블록을 추가하십시오. 재사용 가능 옵션 토글 아래에서 가져온 재사용 가능 레이아웃 블록을 찾을 수 있습니다. 게시물에 추가할 항목을 클릭하기만 하면 됩니다.

그게 다야!

튜토리얼로 들어가 볼까요?

시작하는 데 필요한 것

시작하려면 다음을 수행해야 합니다.

아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
WordPress에서 새 게시물을 만들고 기본 편집기(Gutenberg)를 사용하여 일부 모의 콘텐츠(제목, 제목, 단락, 추천 이미지 등)를 추가합니다. 기본적으로 Divi 스타일의 이미지 레이아웃 블록을 빌드하려면 테스트 포스트가 필요합니다.

그 후에 시작할 준비가 되었습니다.

1부: 재사용 가능한 Divi 레이아웃 블록 캡션으로 전체 너비 이미지 만들기

Divi 레이아웃 블록 추가

시작하려면 게시물에 Divi 레이아웃 블록을 추가하세요.

그런 다음 "새 레이아웃 작성"을 클릭하십시오.

Divi 이미지 레이아웃 디자인하기

레이아웃 블록 편집기에서 한 열 행을 추가하여 레이아웃 디자인을 시작합니다.

이미지 모듈

행에 이미지 모듈을 추가합니다.

그런 다음 다음과 같이 설정을 업데이트합니다.

라이트박스에서 열기: 예

이렇게 하면 클릭 시 이미지가 라이트박스에 표시됩니다.

이미지 오버레이: 켜짐
오버레이 아이콘 색상: #ffffff
오버레이 색상: rgba(120,47,130,0.57)

이미지 주위에 공간을 만들려면 다음과 같이 행 설정을 업데이트하십시오.

사용자 지정 거터 너비 사용: 예
거터 폭: 1
폭: 90%
최대 너비: 90%
패딩: 상단 5%, 하단 5%

이렇게 하면 이미지 주위에 5%의 간격이 생깁니다. 이것은 또한 섹션에 추가할 배경 그라디언트를 표시할 공간입니다.

섹션 설정을 열고 다음과 같이 배경 그라디언트로 디자인을 업데이트합니다.

그라데이션 배경 왼쪽 색상: #782f82
그라디언트 배경 오른쪽 색상: #fe756b
기울기 방향: 90deg

이미지를 블로그 게시물 콘텐츠 컨테이너 너머로 약간 확장하기 위해 섹션에 다음과 같이 사용자 정의 너비를 지정할 수 있습니다.

폭: 110%
최대 너비: 100%
마진: -5% 남음
패딩: 0px 상단, 0px 하단

마지막으로 다음과 같이 내부 상자 그림자를 추가하여 섹션에 창의적인 터치를 부여합니다.

박스 섀도우: 스크린샷 참조
상자 그림자 수평 위치: 5vw
상자 그림자 수직 위치: 5vw
그림자 색상: rgba(255,255,255,0.7)

캡션이 없는 이미지 레이아웃을 원하면 여기서 멈출 수 있지만 이미지 레이아웃에 캡션을 추가하려면 이미지 아래에 텍스트 모듈을 추가합니다.

그런 다음 캡션 텍스트로 사용할 필러 콘텐츠를 추가합니다.

그런 다음 다음 텍스트 설정을 업데이트합니다.

텍스트 글꼴: 몬세라트
텍스트 글꼴 두께: 반 굵게
텍스트 텍스트 색상: #ffffff
폭: 80%
모듈 정렬: 오른쪽
마진: 상위 5%

완료되면 Ctrl + S로 레이아웃을 저장하거나 하단의 설정 표시줄을 열고 "저장 및 종료"를 클릭합니다.

재사용 가능한 블록에 이미지 레이아웃 추가하기

재사용 가능한 블록에 레이아웃을 추가하려면 블록 위의 "추가 옵션" 메뉴를 클릭하고 "재사용 가능한 블록에 추가"를 선택합니다.

재사용 가능한 블록에 이름을 지정하고 "저장"을 클릭합니다.

이제 캡션 레이아웃이 있는 전체 너비 이미지가 재사용 가능한 블록에 추가되었으며 게시물을 작성할 때 차단 목록에서 사용할 수 있습니다.

변경 사항을 저장하려면 게시물을 업데이트/저장하는 것을 잊지 마십시오.

2부: 재사용 가능한 Divi 레이아웃 블록 캡션으로 왼쪽 이미지 만들기

이제 캡션 레이아웃이 있는 전체 너비 이미지가 재사용 가능한 블록에 추가되었으므로 해당 블록을 사용하여 캡션 레이아웃이 있는 왼쪽 이미지를 만들 수 있습니다.

재사용 가능한 블록을 일반 블록으로 변환

시작하려면 전체 너비 이미지 레이아웃이 포함된 재사용 가능한 블록 상단의 "추가 옵션" 메뉴를 엽니다. 그런 다음 "일반 블록으로 변환"을 선택하십시오.

걱정하지 마세요. 재사용 가능한 블록에서 방금 만든 레이아웃 블록이 제거되지는 않습니다(그래도 옵션이 있습니다). 이렇게 하면 재사용 가능한 블록을 일반 블록으로 만들어 단일 인스턴스에 대해 블록을 편집하고 사용할 수 있습니다.

레이아웃 업데이트

블록이 일반화되면 블록 위에 있는 레이아웃 편집 버튼을 클릭합니다.

레이아웃 편집기에서 섹션 설정을 열고 다음과 같이 너비를 업데이트합니다.

너비: 자동
최대 너비: 500px

이것이 우리가 레이아웃 편집기에서 해야 할 전부입니다. 레이아웃을 저장하고 종료해야 합니다.

블록을 선택한 상태에서 기본 설정 사이드바를 열고 블록 탭을 선택하여 블록 설정을 표시합니다. 고급 토글 아래에 다음 클래스를 추가합니다.

CSS 클래스 추가: alignleft

이 클래스는 WordPress에 기본이며 블록을 왼쪽으로 띄우고 이미지를 게시물 내 콘텐츠 왼쪽으로 띄웁니다.

클래스가 추가되면 블록의 "추가 옵션" 메뉴를 열고 "재사용 가능한 블록에 추가"를 클릭합니다.

재사용 가능한 블록에 이름(예: "캡션이 있는 왼쪽 이미지")을 지정하고 저장을 클릭합니다.

이제 캡션 레이아웃 블록이 있는 왼쪽 이미지가 쉽게 액세스할 수 있도록 재사용 가능한 블록 목록에 추가되었습니다.

3부: "캡션이 있는 올바른 이미지" 재사용 가능한 Divi 레이아웃 블록 만들기

지금까지 캡션 레이아웃 블록이 있는 전체 너비 이미지와 캡션 레이아웃 블록이 있는 왼쪽 이미지가 있습니다. 이제 캡션 레이아웃 블록으로 올바른 이미지를 추가할 수 있습니다.

재사용 가능한 블록을 일반 블록으로 변환

이렇게 하려면 왼쪽 이미지에서 재사용 가능한 캡션이 있는 "추가 옵션" 메뉴를 엽니다. 그런 다음 "일반 블록으로 변환"을 선택하십시오.

레이아웃 업데이트

블록이 일반 레이아웃 블록이 되면 클릭하여 레이아웃을 편집합니다.

그런 다음 섹션 설정을 열고 왼쪽 여백을 제거합니다.

레이아웃 편집기를 저장하고 종료합니다.

그런 다음 블록의 추가 CSS 클래스를 다음으로 업데이트합니다.

추가 CSS 클래스: alignright

클래스가 추가된 후 레이아웃 블록을 재사용 가능한 블록에 추가합니다.

그리고 Reusable Block에 이름을 지정하고(예: "오른쪽 이미지 캡션") 저장합니다.

이제 게시물의 블록 아래에 있는 파란색 더하기 아이콘 중 하나를 클릭하여 새 블록을 추가합니다. 그런 다음 차단 목록 팝업에서 재사용 가능 토글을 엽니다. 이제 재사용 가능한 세 가지 이미지 레이아웃 블록을 사용할 준비가 되었습니다.

4부: 포스트에서 재사용 가능한 이미지 레이아웃 블록 사용하기.

이미지 레이아웃 블록이 생성되었지만 게시물에 이미지를 추가하는 프로세스를 시작하기 위한 템플릿으로만 존재합니다. 따라서 이러한 레이아웃 블록을 사용하여 게시물에 실제 이미지를 추가할 때마다 레이아웃에 이미지와 캡션을 추가하기 전에 먼저 일반 블록으로 변환해야 합니다.

방법은 다음과 같습니다.

1단계: 재사용 가능한 레이아웃 블록 추가

재사용 가능한 Divi 이미지 레이아웃 블록 중 하나를 게시물에 추가합니다.

2단계: 일반 블록으로 변환

"추가 옵션" 메뉴를 열고 "일반 블록으로 변환"을 선택합니다.

3단계: 새 이미지 및 캡션으로 레이아웃 블록 편집

블록이 일반화되면 클릭하여 레이아웃을 편집합니다.

선택한 이미지로 레이아웃을 업데이트합니다.

그런 다음 텍스트 모듈 내에서 캡션 텍스트를 업데이트합니다.

4단계: 레이아웃 블록 저장

완료되면 레이아웃 편집기를 저장하고 종료합니다.

이 동일한 프로세스를 계속하여 다른 두 개의 이미지 레이아웃을 게시물에 추가합니다.

최종 결과

마지막 생각들

Divi 레이아웃 블록을 사용하는 방법에 익숙해지면 블로그의 수명에 얼마나 가치가 있는지 알 수 있습니다. 이 게시물에서는 레이아웃 블록을 사용하여 꽤 멋진 Divi 스타일 이미지를 Gutenberg 블로그 게시물에 추가하는 방법을 다루었습니다. 트릭은 레이아웃을 재사용 가능한 블록으로 먼저 저장하는 것입니다. 그런 다음 블로그 게시물에 이미지를 추가할 준비가 되면 재사용 가능한 블록을 일반 블록으로 쉽게 변환하여 이미지와 캡션을 추가할 수 있습니다.

바라건대 이것은 블로그 이미지를 완전히 새로운 수준으로 끌어올리는 데 영감을 줄 것입니다.

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

건배!