Divi를 사용하여 멋진 모바일 디자인에 최신 블로그 게시물 표시

웹사이트에서 블로그 게시물을 표시하는 방식은 방문자가 웹사이트를 탐색하는 동안 블로그 게시물을 접했을 때 행동하는 방식에 큰 영향을 미칩니다. 창의적이고 효과적인 작업을 수행할 수 있도록 최신 블로그 게시물을 멋진 방식으로 표시하는 방법을 알려 드리겠습니다.

우리가 다시 만들 예제는 데스크톱과 태블릿에서도 멋진 모양과 느낌을 유지하면서 작은 화면 크기에서 특히 멋지게 보일 것입니다. 이 튜토리얼을 통해 나만의 맞춤형 최신 블로그 게시물 디자인을 만들 수 있기를 바랍니다.

가자!

시사

튜토리얼을 시작하기 전에 다양한 화면 크기에 따른 결과를 간단히 살펴보겠습니다.

재창조를 시작합시다!

새 섹션 추가

그라데이션 배경

새 페이지를 만들거나 기존 페이지를 열고 일반 섹션을 추가하십시오. 설정을 열고 다음에 그라디언트 배경을 추가하십시오.

• 색상 1: #2e1b8f
• 색상 2: #ffffff
• 기울기 방향: 90deg
• 시작 위치: 53.3%
• 최종 위치: 53.3%

간격

그런 다음 간격 설정으로 이동합니다. 여기서는 데스크탑에서 섹션 콘텐츠의 크기를 줄이고 더 작은 화면 크기에서 점차적으로 해당 공간을 제거할 것입니다.

• 상단 여백: 100px
• 하단 여백: 100px
• 왼쪽 패딩: 26vw(데스크톱), 13vw(태블릿), 0vw(전화)
• 오른쪽 패딩: 22.8vw(데스크탑), 11.4vw(태블릿), 0vw(전화)

새 행 추가

열 구조

다음 열 구조를 사용하여 섹션에 새 행을 계속 추가합니다.

2열 배경색

아직 모듈을 추가하지 않고 행 설정을 열고 두 번째 열에 배경색을 추가하십시오.

• 2열 배경색: #f7f7f7

3열 배경색

3열의 배경에도 같은 색을 추가합니다. 이 두 기둥에 동일한 색상을 사용하여 연결하고 하나의 조각처럼 보이게 합니다. 게시물의 뒷부분에서 이를 사용하여 더 작은 화면 크기에서 열 너비를 조작할 것입니다.

• 열 3 배경색: #f7f7f7

사이징

다음 디자인 탭으로 이동하여 크기 설정을 엽니다. 여기에서는 열 사이의 모든 기본 공간을 제거합니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 열 높이 균등화: 예

표시하다

이제 더 작은 화면 크기에서 세 개의 열이 모두 나란히 표시되도록 하려면 행의 기본 요소에 CSS 코드 한 줄을 추가해야 합니다.

display: flex;

열 1에 Blurb 모듈 추가

아이콘 선택

모듈 추가를 시작할 시간입니다! 열 1에서 Blurb 모듈로 시작하고 원하는 아이콘을 선택합니다.

그라데이션 배경

모듈의 배경 설정으로 이동하여 방사형 그라데이션 배경을 추가합니다.

• 색상 1: #5000ff
• 색상 2: rgba(41,196,169,0)
• 그라디언트 유형: 방사형
• 방사형 방향: 중심
• 시작 위치: 28%
• 최종 위치: 28%

아이콘 설정

디자인 탭으로 이동하여 아이콘 설정을 수정하여 계속 진행합니다.

• 아이콘 색상: #ffffff
• 이미지/아이콘 배치: 상단
• 아이콘 글꼴 사용: 예
• 아이콘 글꼴 크기: 22px

간격

다음으로 사용자 정의 상단 및 하단 패딩을 추가하십시오.

• 상단 패딩: 20px
• 하단 패딩: 10px

국경

그리고 미묘한 하단 테두리를 추가하여 Blurb 모듈 디자인을 완성합니다.

• 하단 테두리 너비: 1px
• 하단 테두리 색상: #ffffff
• 하단 테두리 스타일: 파선

열 1에 텍스트 모듈 추가

콘텐츠 추가

첫 번째 열에 필요한 다음이자 마지막 모듈은 텍스트 모듈입니다. 원하는 콘텐츠를 추가하세요.

텍스트 설정

그런 다음 디자인 탭으로 이동하여 그에 따라 텍스트 설정을 수정합니다.

• 텍스트 글꼴: Didact Gothic
• 텍스트 글꼴 두께: 굵게
• 텍스트 색상: #ffffff

열 2에 텍스트 모듈 추가

콘텐츠 추가

두 번째 칼럼으로! 여기에서 필요한 유일한 모듈은 텍스트 모듈입니다. 원하는 콘텐츠를 입력하세요.

배경색

배경 설정으로 이동하여 완전히 흰색 배경색을 추가합니다.

• 배경색: #ffffff

텍스트 설정

또한 디자인 탭에서 텍스트 설정을 수정하여 콘텐츠의 모양을 변경하고 있습니다.

• 텍스트 글꼴: Source Serif Pro
• 텍스트 글꼴 두께: 굵게
• 텍스트 색상: #000000
• 텍스트 크기: 13px
• 텍스트 방향: 중앙

사이징

이전에 언급했듯이 열 구조를 조작하여 더 작은 화면 크기에서 맞춤형 디자인을 생성합니다. 그렇게 하려면 텍스트 모듈의 너비를 줄이고 열의 왼쪽에 맞춰야 합니다.

• 폭: 60%
• 모듈 정렬: 왼쪽

간격

다음에 몇 가지 사용자 정의 패딩 값을 추가합니다.

• 상단 패딩: 57px
• 하단 패딩: 57px
• 왼쪽 패딩: 20px
• 오른쪽 패딩: 20px

박스 섀도우

미묘한 상자 그림자와 함께.

• 상자 그림자 흐림 강도: 80px
• 그림자 색상: rgba(0,0,0,0.23)

열 3에 텍스트 모듈 추가

콘텐츠 추가

다음 및 마지막 열로 넘어갑니다. 블로그 게시물의 H3 제목과 링크가 포함된 텍스트 모듈을 추가합니다. 제목 바로 아래 단락 텍스트 스타일에 게시물 세부정보를 추가합니다.

텍스트 설정

텍스트 모듈의 디자인 탭으로 이동하여 텍스트 설정을 수정합니다.

• 텍스트 글꼴: Source Serif Pro
• 텍스트 색상: #a8a8a8
• 텍스트 크기: 12px

H3 텍스트 설정

H3 텍스트 설정도 변경하여 계속하십시오.

• 제목 3 글꼴: Didact Gothic
• 제목 2 글꼴 두께: 굵게
• 제목 3 텍스트 크기: 17px

간격

마지막으로 사용자 지정 간격 값을 추가해야 합니다. 모듈에 약간의 음수 왼쪽 여백도 추가하고 있음을 알 수 있습니다. 이것은 더 작은 화면 크기에서 다른 종류의 열 구조를 만드는 마지막 단계입니다. 따라서 열 구조는 기술적으로 여전히 동일하지만 열 배경, 모듈 너비 및 음수 왼쪽 여백을 결합하여 다르게 보이는 결과를 만듭니다.

• 상단 여백: 35px
• 왼쪽 여백: -80px(데스크톱), -50px(태블릿 및 휴대폰)
• 오른쪽 패딩: 20px

행을 두 번 복제

행과 해당 모듈을 모두 수정했으면 표시하려는 최신 블로그 게시물 수에 따라 원하는 만큼 전체 행을 복제할 수 있습니다.

아이콘 변경

각 복제본의 아이콘을 변경합니다.

콘텐츠 및 링크 수정

관련된 콘텐츠 및 링크와 함께하면 완료됩니다!

시사

이제 모든 단계를 거쳤으므로 다양한 화면 크기에서 결과를 최종적으로 살펴보겠습니다.

마지막 생각들

이 게시물에서는 최신 블로그 게시물을 보여주는 멋진 모바일 디자인을 만드는 방법을 보여주었습니다. 우리가 단계별로 재창조한 디자인은 주로 더 작은 화면 크기를 위해 만들어졌지만 태블릿과 데스크탑에서도 멋지게 보입니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!