Divi로 다음 정보 페이지를 위한 대화형 질문 카드 그리드 만들기

매주 다음 프로젝트에 사용할 수 있는 새로운 무료 Divi 레이아웃 팩을 제공합니다. 레이아웃 팩 중 하나의 경우 웹사이트를 한 단계 업그레이드하는 데 도움이 되는 사용 사례도 공유합니다.

이번 주에는 진행 중인 Divi 디자인 이니셔티브의 일환으로 Divi를 사용하여 다음 페이지에 대한 대화형 질문 카드 그리드를 만드는 방법을 보여 드리겠습니다. 우리는 Internet Service Provider Layout Pack의 정보 페이지를 사용할 것이지만 작업 중인 모든 페이지에서 이 접근 방식을 사용할 수 있습니다. 방문자에게 다른 사용자 경험을 제공하고 공유 중인 정보에 대해 방문자와 상호 작용할 수 있습니다. 접근 방식을 이해하면 Divi의 기본 제공 옵션을 사용하여 원하는 대체 질문 카드 그리드 디자인을 만들 수 있습니다.

가자!

시사

튜토리얼을 시작하기 전에 처음부터 다시 만들 질문 카드 그리드를 간단히 살펴보겠습니다.

데스크탑

이동하는

만들기 시작합시다!

ISP 레이아웃 팩의 정보 페이지를 사용하여 새 페이지 만들기

위에 표시된 디자인을 만들기 위해 Internet Service Provider Layout Pack의 정보 페이지를 사용할 것이므로 이 레이아웃을 사용하여 새 페이지를 만듭니다. 평소와 같이 미리 만들어진 레이아웃에서 찾을 수 있습니다.

영웅 섹션과 바닥글 사이의 모든 섹션 삭제

현재 모든 콘텐츠를 질문 그리드 카드로 교체합니다. 그렇게 하려면 먼저 영웅 섹션과 바닥글 사이에 있는 모든 섹션을 제거해야 합니다.

사이에 새 섹션 추가

우리가 만들 질문 카드 그리드에는 답변하려는 모든 종류의 회사 질문이 포함될 수 있습니다. 그리드를 사용하여 자주 묻는 질문을 표시할 수도 있습니다. 페이지의 영웅 섹션과 바닥글 사이에 새로운 일반 섹션을 추가하여 계속하십시오.

새 행 추가

열 구조

섹션 설정을 변경하지 않고 다음 열 구조를 사용하여 새 행을 추가합니다.

사이징

열 사이의 모든 기본 공간을 제거할 것입니다. 행 설정을 열고 크기 조정 설정을 일부 변경합니다.

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

간격

멋진 디자인을 얻으려면 열 사이에 약간의 공간이 필요합니다. 간격 설정으로 이동하여 사용자 정의 패딩 값을 추가하십시오.

• 상단 패딩: 10px
• 하단 패딩: 10px
• 열 1 왼쪽 패딩: 10px(데스크톱), 5px(태블릿 및 휴대전화)
• 열 1 오른쪽 패딩: 5px
• 열 2 왼쪽 패딩: 5px
• 열 2 오른쪽 패딩: 5px
• 열 3 왼쪽 패딩: 5px
• 3열 오른쪽 패딩: 10px(데스크톱), 5px(태블릿 및 휴대전화)

열 1에 새 Blurb 모듈 추가

콘텐츠 추가

호버 효과를 만들기 위해 필요한 유일한 모듈은 Blurb 모듈입니다. 먼저 하나를 만들고 나중에 복제하여 전체 결과를 만듭니다. 1열에 Blurb 모듈을 추가합니다. 제목 필드에 답변하고 싶은 질문을 추가하고 내용 상자에 답변을 추가합니다.

아이콘 선택

그런 다음 이미지 및 아이콘 설정에서 피팅 아이콘을 선택합니다. 이 아이콘은 방문자가 답변을 보려면 질문 카드를 가리켜야 한다는 것을 이해하는 데 도움이 됩니다.

기본 아이콘 설정

디자인 탭에서 아이콘 설정을 변경하여 계속 진행합니다.

• 아이콘 색상: #aaaaaa
• 아이콘 배치: 상단
• 아이콘 글꼴 크기 사용: 예
• 아이콘 글꼴 크기: 40px

호버 아이콘 설정

마우스를 가져갈 때 아이콘 색상을 수정합니다. 호버에서 아이콘이 사라지도록 하기 위해 호버에서 완전히 투명한 색상을 사용하고 있습니다.

• 아이콘 색상: rgba(255,255,255,0)

텍스트 설정

그런 다음 텍스트 설정에서 텍스트 방향을 변경합니다.

• 텍스트 방향: 중앙

기본 제목 텍스트 설정

제목 텍스트 설정도 일부 변경합니다.

• 제목 글꼴: Poppins
• 제목 글꼴 두께: 굵게
• 제목 텍스트 색상: #333333
• 제목 텍스트 크기: 40px
• 제목 문자 간격: -3px

호버 제목 텍스트 설정

마우스를 가져갈 때 제목 텍스트 색상을 변경합니다. 누군가가 Blurb 모듈을 가리키면 질문이 표시되지 않도록 완전히 투명한 색상을 사용하고 있습니다.

• 제목 텍스트 색상: rgba(255,255,255,0)

기본 본문 텍스트 설정

본문 설정을 변경하여 계속하십시오.

• 본문 글꼴: Open Sans
• 본문 글꼴 두께: Light
• 본문 텍스트 색상: rgba(255,255,255,0)
• 본문 텍스트 크기: 25px
• 본문 문자 간격: -2px
• 바디 라인 높이: 1.6em

호버 본문 텍스트 설정

그리고 마우스 오버 시 본문 색상을 변경합니다.

• 본문 색상: #000000

간격

모듈을 정사각형으로 만들기 위해 몇 가지 사용자 정의 패딩 값을 추가합니다.

• 탑 패딩: 9vw
• 하단 패딩: 9vw
• 왼쪽 패딩: 50px
• 오른쪽 패딩: 50px

기본 둥근 모서리

우리는 또한 둥근 모서리의 '30px' 모듈을 제공합니다.

호버 둥근 모서리

호버에서 이러한 둥근 모서리를 제거합니다.

기본 테두리

그리고 아래쪽 테두리를 추가합니다.

• 하단 테두리 너비: 0px
• 하단 테두리 색상: #0fffeb

호버 테두리

마우스 오버 시 하단 테두리 너비를 변경하여 표시합니다.

• 하단 테두리 너비: 10px

박스 섀도우

깊이를 더하기 위해 상자 그림자도 사용합니다.

• 그림자 색상: rgba(0,0,0,0.05)

전환

마지막으로 고급 탭에서 전환 시간을 줄입니다.

• 전환 시간: 250ms

Blurb 모듈을 두 번 복제하고 나머지 열에 배치

이제 첫 번째 Blurb 모듈이 완료되었으므로 이를 복제하고 나머지 두 열에 복제본을 배치하여 시간을 절약할 수 있습니다.

콘텐츠 변경

각 복제본의 내용을 변경했는지 확인하십시오.

하단 테두리 색상 변경

하단 테두리 색상과 함께.

전체 행을 두 번 복제

원하는 만큼 행을 복제하여 질문 카드 그리드를 만들 수 있습니다.

개별적으로 각 항목의 내용 및 하단 색상 변경

그러나 각 질문 카드를 고유하게 만들기 위해 내용과 하단 색상을 변경하는 것을 잊지 마십시오!

시사

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

데스크탑

이동하는

마지막 생각들

이 게시물에서는 Divi의 Internet Service Provider Layout Pack을 사용하여 대화형 질문 카드 그리드를 만드는 방법을 보여주었습니다. 디자인이 레이아웃 팩의 스타일과 일치하는지 확인했지만 이 방법을 사용하여 정보 페이지를 대화형 페이지로 변환할 수도 있습니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!