귀중한 블로그 게시물을 작성하려면 시간과 노력이 필요합니다. 틈새 시장에서 쓸 최고의 주제를 찾는 것 외에도 독자의 참여를 유지하고 원하는 정보를 빠르게 찾을 수 있도록하는 것도 중요합니다.
이제 이러한 유형의 사용자 경험에 접근하는 좋은 방법은 최종 생각 직전에 블로그 게시물 끝에 시각적 요약 상자를 공유하는 것입니다.
Divi의 새로운 레이아웃 블록을 사용하면 이제 Divi의 기본 제공 옵션이있는 요약 상자를 쉽게 만들 수 있습니다. 이 튜토리얼에서는 프로세스를 안내하고 레이아웃 JSON 파일을 무료로 다운로드 할 수도 있습니다!
재현을 시작합시다!
여섯 번째 테마 팩의 발행물 템플릿 사용
Sixth Theme Builder Pack 다운로드
이 튜토리얼 전체에서 다시 생성할 요약 상자는 Sixth Theme Builder Pack 게시물 템플릿과 완벽하게 일치합니다. 무료. 액세스블로그 기사 전체 팩을 다운로드하십시오.
Divi Theme Builder로 이동
그런 다음 Divi Theme Builder로 이동하십시오.
출판 템플릿 다운로드
오른쪽 상단의 아이콘을 클릭하고 테마 빌딩 팩에서 게시물 템플릿을 다운로드합니다. 나중에 테마 빌더에 대한 변경 사항을 편집해야합니다.
기존 구텐베르크 출판물을 열거 나 새로 출판하십시오.
이제 해당 게시물 템플릿을 추가했으면 요약 상자를 만들 차례입니다. Gutenberg를 사용하여 새 게시물을 열거 나 만듭니다.
제목 H2의 요약 추가
블로그 게시물 끝 부분에 새로운 H2 제목을 추가하겠습니다.
온라인으로 새로운 Divi 블록 추가
다음으로 새로운 Divi 레이아웃 블록을 추가하겠습니다.
Divi 블록 내부에 새 레이아웃 만들기
블록을 추가하면 두 가지 옵션이 있습니다. 새 레이아웃 생성을 선택합니다.
섹션 설정
배경색
Divi 레이아웃 블록 편집기 안에 섹션이 있습니다. 이 섹션을 열고 흰색 배경을 사용하십시오.
- 배경색 : #FFFFFF
간격
섹션 디자인 탭으로 전환하고 사용자 정의 여백 및 패딩 값을 추가합니다.
- 상단 여백 : 100px
- 왼쪽 여백 : -10 % (사무실), 0 % (태블릿 및 전화)
- 오른쪽 여백 : -10 % (사무실), 0 % (태블릿 및 전화)
- 상단 패딩 : 0px
- 하단 패딩 : 0px
경계
또한 테두리 반경을 추가하십시오.
- 왼쪽 아래 : 16px
- 오른쪽 아래 : 16px
그림자 상자
상자의 미묘한 그림자와 함께.
- 상자 그림자 흐림 강도 : 60px
- 박스 그림자 전파력 : 10px
- 그림자 색상 : rgba (0,0,0,0,08)
새 행 추가
기둥 구조
다음 열 구조를 사용하여 섹션에 새 줄을 계속 추가하십시오.
크기 조정
아직 모듈을 추가하지 않고 행 설정을 열고 행이 섹션 컨테이너의 전체 너비를 차지하도록합니다.
- 사용자 정의 거터 너비를 사용하십시오. 예
- 거터 폭 : 1
- 열 높이 균등화 : 예
- 너비 : 100 %
- 최대 폭 : 100 %
간격
그런 다음 줄에서 기본 상단 및 하단 패딩을 제거하십시오.
- 상단 패딩 : 0px
- 하단 패딩 : 0px
열 1 설정
배경색
그런 다음 1 열의 설정을 열고 흰색 배경색을 사용하십시오.
- 배경색 : #FFFFFF
간격
또한 사용자 정의 채우기 값을 추가하십시오.
- 상단 패딩 : 70px
- 하단 패딩 : 70px
- 왼쪽 패딩 : 70 픽셀
- 오른쪽 패딩 : 70px
그림자 상자
다른 기본 및 호버 그림자 색상으로 미묘한 상자 그림자를 추가하여 계속합니다.
- 상자 그림자 흐림 강도 : 50px
- 기본 그림자 색상 : rgba (0,0,0,0)
- 호버 그림자 색상 : rgba (0,0,0,0,15)
호버 변환 스케일
마우스 오버시 열을 약간 조정하려고합니다.
- 오른쪽 : 105 %
- 낮음 : 105 %
호버 Z 지수
호버 색인 z를 추가하여 열 매개 변수를 완료하십시오.
- 호버 인덱스 Z : 11
열에 텍스트 모듈 # 1 추가
컨텐츠 영역에 숫자 추가
이제 첫 번째 텍스트 모듈부터 시작하여 모듈을 추가할 차례입니다. 상자에 숫자를 추가하세요 내용.
그라데이션 배경
그런 다음 그라데이션 배경을 추가하십시오.
- 색상 1 : # ff5e92
- 색상 2 : # ffd4b6
- 그라데이션 방향 : 165deg
텍스트 설정
모듈 디자인 탭으로 이동하여 다음과 같이 텍스트 설정을 변경하십시오.
- 텍스트 글꼴 : Poppins
- 텍스트 색상 : #ffffff
- 텍스트 크기 : 26px
- 텍스트의 정렬 : 중심
크기 조정
그런 다음 너비와 높이를 지정하십시오.
- 너비 : 150px
- 높이 : 150px
경계
또한 테두리 반경을 추가하십시오.
- 왼쪽 하단, 오른쪽 상단 및 오른쪽 하단 : 100 픽셀
CSS 주요 요소
컨테이너의 텍스트를 중앙에 배치하려면 고급 탭의 기본 모듈 요소에 CSS 코드 몇 줄을 추가해야합니다.
display: flex;align-items: center;justify-content: center;
위치
그리고 모듈을 재배치하여 모듈 매개 변수를 종료합니다.
- 위치 : 절대
- 위치 : 왼쪽 상단
열에 텍스트 모듈 # 2 추가
H3 콘텐츠 추가
다음 텍스트 모듈로 넘어 갑시다. 일부 추가 내용 당신이 선택한 H3.
H3 텍스트 설정
그런 다음 모듈의 H3 텍스트 크기를 수정하십시오.
- 제목 3 텍스트 크기 : 23px
간격
간격 설정도 변경하십시오.
- 상단 여백 : 100px
- 아래쪽 여백 : 20px
컬럼에 분리 모듈 추가
시계
다음으로 필요한 모듈은 분리 모듈입니다. "분리기 표시"옵션이 활성화되어 있는지 확인하십시오.
- 구분 기호 표시 : 예
라인 설정
모듈 디자인 탭으로 전환하고 다음과 같이 행 설정을 변경합니다.
- 선 색상 : # ff5e92
- 선 스타일 : 솔리드
- 라인 위치 : 높음
크기 조정
또한 모듈의 크기를 수정하십시오.
- 분배기 무게 : 2px
- 너비 : 20 %
열에 텍스트 모듈 # 3 추가
콘텐츠 추가
다음이자 마지막 텍스트 모듈로 넘어가겠습니다. 일부 추가 내용 드 votre choix.
클로닝 칼럼
열과 모든 해당 모듈을 완료하면 전체 열을 복제 할 수 있습니다.
기본 상자의 그림자 색상 변경
2 열의 설정을 열고 기본 그림자 색상을 변경합니다.
- 그림자 색상 : rgba (0,0,0,0,06)
텍스트 모듈의 그라디언트 배경 변경 n ° 1
다음 2 개 열에서 첫 번째 텍스트 모듈을 열고 그라데이션 배경을 변경합니다.
- 색상 1 : # 7e5ce6
- 색상 2 : # 25b8ee
텍스트 모듈의 경계 변경 n ° 1
또한 모듈 경계 설정을 변경하십시오.
- 왼쪽 위, 왼쪽 아래 및 오른쪽 아래 : 100 픽셀
텍스트 모듈 # 1의 위치 변경
그리고 고급 탭에서 모듈을 재배치하십시오.
- 위치 : 오른쪽 상단
구분자의 색상 변경
분리 모듈에 대한 설정을 열어 계속합니다. 새 색 구성표에 맞게 선의 색을 변경합니다.
- 선 색상 : # 7e5ce6
모든 내용 변경
마지막으로, 열 2에서 모듈의 전체 내용을 수정하십시오.
전체 섹션을 두 번 복제
첫 번째 섹션을 완료하면 두 번 복제 할 수 있습니다.
첫 번째 중복 섹션의 간격 변경
첫 번째 복제 섹션에서 설정을 열고 이에 따라 여백 값을 변경하십시오.
- 왼쪽 여백 : -5 % (데스크톱 컴퓨터), 0 % (태블릿 및 전화)
- 오른쪽 여백 : -5 % (사무실), 0 % (태블릿 및 전화)
두 번째 복제 섹션의 간격 변경
또한 두 번째 복제본을 열고 모든 여백 값을 삭제하고 대신 더 낮은 여백을 추가하십시오.
- 아래쪽 여백 : 100px
모든 내용 변경
마지막으로 모듈의 전체 내용을 수정하십시오.
재사용을 위해 Divi 라이브러리에 레이아웃을 저장하십시오
이 요약 상자를 다른 블로그 게시물에 사용하려는 경우 Divi 라이브러리에 저장하여 쉽게 액세스 할 수 있도록하십시오! 그게 다야!
측량
이제 모든 단계를 수행 했으므로 다양한 화면 크기에서 어떻게 보이는지 마지막으로 살펴 보겠습니다.
마지막 생각
이 기사에서는 Divi의 새로운 레이아웃 블록을 사용하여 Gutenberg 게시물에 요약 상자를 추가하는 방법을 보여주었습니다. 요약 상자는 방문자 그들이 찾고 있는 정보를 찾기 위해.
레이아웃 용 JSON 파일을 무료로 다운로드 할 수도 있습니다! 질문이 있으시면 아래 댓글 섹션에 댓글을 남겨주세요.
