Divi의 변환 설정으로 가계도를 만드는 방법

게시 됨: 2019-05-03

웹사이트를 위한 가계도를 만들려고 시도했지만 접근 방법을 정확히 몰랐습니까? 글쎄요, 오늘의 Divi 튜토리얼에서는 그 방법을 정확히 보여드릴 것입니다. 가계도를 만드는 것 외에도 모든 화면 크기에서 반응을 유지하도록 하고 있습니다. 가계도 생성이 완료되면 언제든지 원하는 대로 이미지, 텍스트 및 디자인을 수정하고 라이브 준비를 할 수 있습니다! 이 가계도 디자인을 바로 시작하고 싶으십니까? JSON 파일을 무료로 다운로드하여 만들고 있는 웹사이트에 추가할 수 있습니다!

시작하겠습니다.

시사

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

데스크탑

가계도

이동하는

가계도

패밀리 트리 레이아웃을 무료로 다운로드하십시오

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

파일 다운로드
무료로 다운로드

무료로 다운로드

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

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

YouTube 채널 구독

가족 구성원 포지셔닝

새 섹션 추가

간격

만들기 시작합시다! 가장 먼저 해야 할 일은 작업 중인 페이지에 새 일반 섹션을 추가하는 것입니다. 섹션 설정을 열고 뷰포트 너비를 사용하여 사용자 지정 상단 및 하단 패딩을 추가합니다.

  • 탑 패딩: 8vw
  • 하단 패딩: 8vw

행 #1 추가

열 구조

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

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 행이 섹션과 화면의 전체 너비를 차지하도록 합니다.

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

간격

바탕 화면에서 행의 왼쪽과 오른쪽에 공백을 추가하기 위해 뷰포트 너비 단위를 사용하여 사용자 지정 왼쪽 및 오른쪽 패딩을 추가합니다.

  • 상단 패딩: 0px
  • 하단 패딩: 0px
  • 왼쪽 패딩: 15vw(데스크톱), 0vw(태블릿 및 전화)
  • 오른쪽 패딩: 15vw(데스크톱), 0vw(태블릿 및 전화)

열에 이미지 모듈 추가

이미지 업로드

모듈 추가를 시작할 시간입니다! 가장 먼저 필요한 것은 Image Module입니다. 너비와 높이가 '180px'인 이미지를 업로드하세요.

조정

그런 다음 디자인 탭으로 이동하여 이미지 정렬을 변경합니다.

  • 이미지 정렬: 중앙

사이징

다음으로 크기 설정을 수정합니다.

  • 폭: 49%
  • 모듈 정렬: 중앙

국경

그리고 테두리 설정에서 각 모서리에 높은 값을 추가하여 이미지를 원으로 바꿉니다. 우리는 '20vw'를 사용하고 있지만 원하는 높은 숫자를 사용할 수 있습니다.

열에 텍스트 모듈 추가

콘텐츠 추가

다음 모듈인 텍스트 모듈로 넘어갑니다. 여기에 가족 구성원의 이름을 추가합니다.

배경색

그런 다음 배경 설정으로 이동하여 배경색을 흰색으로 변경합니다.

  • 배경색: #ffffff

텍스트 설정

다음으로 텍스트 설정을 수정합니다. 가계도에 대한 또 다른 모양과 느낌을 만들고 싶다면 이 설정을 자유롭게 사용하십시오.

  • 텍스트 글꼴: Open Sans
  • 텍스트 색상: #000000
  • 텍스트 크기: 0.8vw(데스크톱), 1.2vw(태블릿), 1.9vw(전화)
  • 텍스트 줄 높이: 0.4em
  • 텍스트 방향: 중앙

간격

간격 설정으로 이동하여 사용자 지정 여백 및 패딩 값을 추가합니다. 이 값은 텍스트 모듈의 모양을 지정하고 이미지 모듈과 약간 겹치도록 만드는 데 도움이 됩니다.

  • 최고 여백: -0.5vw
  • 왼쪽 여백: 1vw
  • 오른쪽 여백: 1vw
  • 상단 패딩: 2vw(데스크톱), 4vw(태블릿), 5vw(전화)
  • 하단 패딩: 2vw(데스크톱), 4vw(태블릿), 5vw(전화)

국경

테두리 설정으로 이동하여 위쪽 테두리도 추가합니다.

  • 상단 테두리 너비: 5px
  • 상단 테두리 색상: #000000

박스 섀도우

상자 그림자와 함께 페이지에 깊이를 만듭니다.

  • 상자 그림자 수직 위치: 10px
  • 상자 그림자 흐림 강도: 50px
  • 그림자 색상: rgba(0,0,0,0.17)

Z 인덱스

텍스트 모듈이 이미지 모듈 위에 유지되도록 하기 위해 텍스트 모듈의 가시성 설정에서 Z 인덱스를 높일 것입니다.

  • Z 인덱스: 2

행을 세 번 복제

첫 번째 행을 만들고 그 안에 있는 모든 모듈을 수정했으면 계속해서 행을 세 번 복제할 수 있습니다. 이것은 튜토리얼의 다음 단계에서 시간을 절약하는 데 도움이 됩니다. 이 행 각각은 가계도에서 다른 수준을 만드는 데 사용됩니다.

행 #1 사용자 정의

두 모듈 모두 7회 복제

가계도의 첫 번째 수준을 사용자 정의하기 시작합시다! 와이어프레임 모드로 전환하고 행의 두 모듈을 7번 복제합니다. 완료되면 행의 백엔드는 다음과 같아야 합니다.

가계도

열 주요 요소 CSS

우리는 전체 열을 그리드로 바꾸고 있습니다. 열에는 총 16개의 모듈이 있어야 합니다. 이 16개의 모듈을 8개의 그리드 열에 배치할 것입니다. 이것은 8개의 그리드 열이 각각 2개의 모듈을 포함한다는 것을 의미합니다. 하나의 이미지 모듈과 하나의 텍스트 모듈. 첫 번째 행의 행 설정을 열고 열 기본 요소에 다음 CSS 코드 행을 추가합니다. 

display: grid;
grid-template-columns: repeat(8, 12.5%);

가계도

행 #2 사용자 정의

두 모듈 모두 3회 복제

두 번째 줄로! 여기서는 두 모듈을 모두 3번 복제합니다.

가계도

열 주요 요소

행의 열 기본 요소에 다음 CSS 코드 행을 추가하여 열을 4개의 그리드 열이 있는 그리드로 전환합니다. 

display: grid;
grid-template-columns: repeat(4, 25%);

4개의 열이 있는 기존 행 열 구조를 선택하는 대신 이 접근 방식을 사용하는 이유는 더 작은 화면 크기에서 모든 것이 100% 반응을 유지하기를 원하기 때문입니다.

가계도

행 #3 사용자 정의

두 모듈 모두 복제

세 번째 줄로! 각 모듈을 한 번씩 복제합니다.

가계도

열 주요 요소

그런 다음 열 기본 요소에 다음 CSS 코드 줄을 추가합니다. 

display: grid;
grid-template-columns: repeat(2, 50%);

가계도

행 #4 사용자 정의

행 간격

다음 행과 마지막 행으로! 여기서 우리가 해야 할 일은 행 패딩 값을 수정하는 것뿐입니다.

  • 상단 패딩: 0px
  • 하단 패딩: 0px
  • 왼쪽 패딩: 31vw
  • 오른쪽 패딩: 31vw

가계도

이미지 모듈을 사용하여 가족 구성원 연결하기

행 #1 추가

열 구조

이제 모든 가족 구성원을 정렬했으므로 연결을 시작할 수 있습니다! 그렇게 하려면 첫 번째 행과 두 번째 행 사이에 새 행을 추가하십시오.

가계도

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 크기 값을 변경합니다.

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

가계도

간격

다음으로 간격 설정으로 이동하여 사용자 정의 패딩 값을 추가하십시오.

  • 상단 패딩: 0px
  • 하단 패딩: 0px
  • 왼쪽 패딩: 15vw(데스크톱), 0vw(태블릿 및 전화)
  • 오른쪽 패딩: 15vw(데스크톱), 0vw(태블릿 및 전화)

가계도

열에 이미지 모듈 추가

일러스트레이션 업로드

그런 다음 이미지 모듈을 추가하고 이 게시물의 시작 부분에서 다운로드한 폴더에서 찾을 수 있는 그림을 업로드합니다.

가계도

사이징

Image Module의 크기 조정 설정으로 이동하여 'Force Fullwidth' 옵션을 활성화합니다.

  • 강제 전폭: 예

가계도

간격

간격 설정에서 '이미지 아래 공간 표시' 옵션을 비활성화했는지 확인하십시오.

  • 이미지 아래 공간 표시: 아니오

가계도

행을 두 번 복제하고 위치 변경

행과 그 안의 이미지 모듈 수정을 완료했으면 계속해서 두 번 복제하십시오. 이에 따라 복제본을 배치합니다.

가계도

행 #1 사용자 정의

이미지 모듈을 세 번 복제

첫 번째 행으로 돌아가서 모듈을 3번 복제합니다.

가계도

열 주요 요소

행의 열 기본 요소에 다음 CSS 코드 행을 추가하여 4개의 그리드 열이 있는 그리드에 이러한 이미지 모듈을 배치합니다. 

display: grid;
grid-template-columns: repeat(4, 25%);

가계도

행 #2 사용자 정의

클론 이미지 모듈

두 번째 행으로 이동하여 Image Module을 한 번 복제합니다.

가계도

열 주요 요소

행의 열 기본 요소에 다음 CSS 코드 행을 추가하여 두 개의 그리드 열이 있는 그리드에 두 모듈을 배치합니다. 

display: grid;
grid-template-columns: repeat(2, 50%);

가계도

행 #3 사용자 정의

간격 변경

다음 및 마지막 복제로 넘어갑니다. 여기에서 사용자 정의 패딩 값을 변경하기만 하면 완료됩니다!

  • 상단 패딩: 0px
  • 하단 패딩: 0px
  • 왼쪽 패딩: 27vw
  • 오른쪽 패딩: 27vw

가계도

시사

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

데스크탑

가계도

이동하는

가계도

마지막 생각들

이 게시물에서 우리는 Divi로 현대적인 가계도를 만드는 방법을 보여주었습니다! 우리가 다시 만든 가계도는 모든 화면 크기에서 멋지게 보입니다. 이 튜토리얼을 시작할 때 JSON 파일을 무료로 다운로드하고 바로 시작할 수도 있었습니다. 질문이나 제안 사항이 있으면 아래 댓글 섹션에 댓글을 남겨주세요!