Divi의 Person 모듈로 창의력을 발휘하는 5가지 방법
게시 됨: 2019-01-03지난 몇 달 동안 발생한 모든 새로운 Divi 기능 업데이트는 웹사이트를 디자인할 때 가질 수 있는 가능성의 범위를 부인할 수 없이 확장했습니다. 이 튜토리얼에서는 추가 CSS 코드를 사용하지 않고 Divi Person Module로 창의력을 발휘할 수 있는 5가지 방법을 만들었습니다. 이 게시물의 주요 목표는 다음 Divi 프로젝트를 시작하기 전에 영감을 주는 것입니다. Person 모듈은 종종 팀 구성원에 대한 추가 정보를 공유하거나 평가를 공유하는 데 사용됩니다. 이 5가지 예를 통해 페이지 디자인을 향상시킬 수 있습니다.
가자!
시사
튜토리얼을 시작하기 전에 다양한 화면 크기에서 결과를 간단히 살펴보겠습니다.
데스크탑
이동하는
YouTube 채널 구독
예제 #1 다시 만들기
새 섹션 추가
첫 번째 예제를 만들어 봅시다! 새 페이지나 기존 페이지를 열고 일반 섹션을 추가합니다.
새 행 추가
열 구조
섹션 설정을 수정하지 않고 다음 열 구조를 사용하여 새 행을 추가합니다.
사이징
행 설정을 열고 크기 조정 설정을 일부 변경합니다.
- 이 행을 전체 너비로 만들기: 예
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
간격
그런 다음 간격 설정을 열고 사용자 지정 패딩 값을 추가합니다.
- 상단 패딩: 100px(데스크톱), 80px(태블릿 및 휴대폰)
- 하단 패딩: 100px(데스크톱), 80px(태블릿 및 휴대폰)
- 왼쪽 패딩: 100px(데스크톱), 30px(태블릿), 25px(휴대전화)
- 오른쪽 패딩: 100px(데스크톱), 30px(태블릿), 25px(전화)
열 1에 이미지 모듈 추가
이미지 업로드
모듈 추가를 시작할 시간입니다! 첫 번째 열에 이미지 모듈을 추가하고 원하는 정사각형 이미지를 업로드합니다.
박스 섀도우
디자인 탭으로 이동하여 미묘한 상자 그림자를 적용하여 계속하십시오.
필터
필터 설정을 사용하여 이미지에 효과를 추가할 수도 있습니다.
- 채도: 40%
- 대비: 130%
열 2에 사람 모듈 #1 추가
콘텐츠 추가
다음으로 필요한 모듈은 Person 모듈입니다. 계속해서 두 번째 열에 하나를 추가하고 이름 및 위치 필드를 채우십시오.
그라데이션 배경
이 모듈에 그라데이션 배경을 추가합니다.
- 색상 1: rgba(11,15,229,0.41)
- 색상 2: rgba(45,237,255,0.87)
- 기울기 방향: 150deg
제목 텍스트 설정
그런 다음 디자인 탭에서 제목 텍스트 설정을 변경합니다.
- 제목 글꼴: Baloo
- 제목 텍스트 색상: #ffffff
- 제목 텍스트 크기: 20px
본문 설정
본문 설정도 수정합니다.
- 본문 글꼴 두께: Light
- 본문 색상: #ffffff
간격
그리고 간격 설정에서 사용자 지정 여백 및 패딩 값을 추가합니다.
- 왼쪽 여백: -4vw(데스크톱 및 태블릿), 0vw(전화)
- 오른쪽 여백: 8vw(데스크톱 및 태블릿), 0vw(전화)
- 상단 패딩: 25px
- 하단 패딩: 25px
- 왼쪽 패딩: 20px
국경
또한 모듈에 미묘한 왼쪽 테두리를 추가하고 있습니다.
- 왼쪽 테두리 너비: 3px
- 왼쪽 테두리 색상: #ffffff
박스 섀도우
페이지에 깊이를 만드는 데 도움이 되는 상자 그림자와 함께.
- 상자 그림자 흐림 강도: 80px
열 2에 사람 모듈 #2 추가
콘텐츠 추가
이전 모듈 바로 아래에 다른 Person 모듈을 추가합니다. 이 모듈을 사용하여 소셜 미디어 프로필과 설명을 표시합니다.
아이콘 설정
디자인 탭으로 이동하여 아이콘 설정에서 아이콘 색상을 변경합니다.
- 아이콘 색상: #50e8fe
간격
마지막으로 간격 설정을 열고 사용자 정의 패딩 값을 추가하십시오.
- 상단 패딩: 30px
- 왼쪽 패딩: 30px(데스크톱 및 태블릿), 0px(전화)
예제 #2 다시 만들기
새 섹션 추가
다음 예제로 넘어갑니다! 페이지에 새 섹션을 추가합니다.
새 행 추가
열 구조
다음 열 구조를 사용하여 이 섹션에 새 행을 추가합니다.
2열 배경색
아직 모듈을 추가하지 않고 행 설정을 열고 열 2 배경색을 추가하십시오.
- 2열 배경색: #f4f4f4
사이징
그런 다음 디자인 탭으로 이동하여 크기 설정을 일부 변경합니다.
- 이 행을 전체 너비로 만들기: 예
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
- 열 높이 균등화: 예
간격
간격 설정에서도 일부 사용자 정의 패딩 값을 추가하십시오.
- 상단 패딩: 100px(데스크톱), 80px(태블릿 및 휴대폰)
- 하단 패딩: 100px(데스크톱), 80px(태블릿 및 휴대폰)
- 왼쪽 패딩: 100px(데스크톱), 30px(태블릿), 25px(휴대전화)
- 오른쪽 패딩: 100px(데스크톱), 30px(태블릿), 25px(전화)
열 1에 이미지 모듈 추가
이미지 업로드
모듈 추가를 시작할 시간입니다! 필요한 첫 번째 모듈은 1열의 이미지 모듈입니다. 선택한 이미지를 업로드합니다.
박스 섀도우
그런 다음 이미지에 상자 그림자를 추가합니다.
- 상자 그림자 흐림 강도: 160px
필터
필터 설정을 가지고 놀 수도 있습니다.
- 채도: 40%
- 대비: 130%
열 2에 사람 모듈 #1 추가
콘텐츠 추가
두 번째 열에서 필요한 첫 번째 모듈은 Person 모듈입니다. 이름 및 위치 필드를 입력합니다.
배경색
배경 설정으로 이동하여 투명한 배경색을 추가합니다.
- 배경색: rgba(255,255,255,0.7)
텍스트 설정
그런 다음 텍스트 설정에서 텍스트 방향을 변경합니다.
- 텍스트 방향: 중앙
제목 텍스트 설정
제목 텍스트 설정도 변경합니다.
- 제목 글꼴: Abril Fatface
- 제목 텍스트 색상: #000000
- 제목 텍스트 크기: 40px
본문 설정
본문 설정과 함께.
- 본문 글꼴 두께: Light
- 본문 색상: #000000
- 본문 텍스트 크기: 15px
간격
간격 설정에서 약간의 음수 왼쪽 여백을 사용하여 겹침을 만들고 있습니다.
- 왼쪽 여백: -21.64vw(데스크톱), -46.1vw(태블릿), 0vw(전화)
- 상단 패딩: 30px
- 하단 패딩: 30px
박스 섀도우
그리고 미묘한 상자 그림자도 적용합니다.
- 상자 그림자 흐림 강도: 80px
열 2에 사람 모듈 #2 추가
콘텐츠 추가
2열에서 필요한 두 번째 모듈은 또 다른 Person 모듈입니다. 여기에 소셜 미디어 링크와 설명을 추가합니다.
아이콘 설정
계속해서 디자인 탭으로 이동하여 아이콘 설정에서 아이콘 색상을 변경합니다.
- 아이콘 색상: #000000
간격
사용자 정의 여백 및 패딩 값도 추가하십시오.
- 최고 마진: 3vw
- 상단 패딩: 30px
- 하단 패딩: 30px
- 왼쪽 패딩: 30px
- 오른쪽 패딩: 30px
예제 #3 다시 만들기
새 섹션 추가
세 번째 예시로! 페이지에 새 섹션을 추가합니다.
새 행 추가
열 구조
그런 다음 다음 열 구조를 사용하여 섹션에 새 행을 추가합니다.
사이징
행 설정을 열고 크기 설정을 변경합니다.
- 이 행을 전체 너비로 만들기: 예
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
- 열 높이 균등화: 예
간격
사용자 정의 패딩 값도 추가하십시오.
- 상단 패딩: 100px(데스크톱), 80px(태블릿 및 휴대폰)
- 하단 패딩: 100px(데스크톱), 80px(태블릿 및 휴대폰)
- 왼쪽 패딩: 100px(데스크톱), 30px(태블릿), 25px(휴대전화)
- 오른쪽 패딩: 100px(데스크톱), 30px(태블릿), 25px(전화)
열 1에 개인 모듈 #1 추가
콘텐츠 추가
모듈 추가를 시작할 시간입니다! 첫 번째 사람 모듈을 열 1에 추가하고 이름 및 위치 필드를 입력합니다.
배경색
그런 다음 모듈에 배경색을 추가합니다.
- 배경색: #ffffff
제목 텍스트 설정
제목 텍스트 설정도 수정합니다.
- 제목 글꼴 두께: 매우 굵게
- 제목 텍스트 색상: #000000
- 제목 텍스트 크기: 40px
- 제목 문자 간격: -4px
본문 설정
본문 설정에 대해서도 동일한 작업을 수행합니다.
- 본문 글꼴 두께: Light
- 본문 색상: #000000
- 본문 텍스트 크기: 15px
간격
계속해서 간격 설정으로 이동하여 사용자 지정 여백 및 패딩 값을 추가합니다.
- 상단 여백: 40px(데스크톱), 0px(태블릿 및 휴대폰)
- 상단 패딩: 30px
- 하단 패딩: 30px
- 왼쪽 패딩: 30px
- 오른쪽 패딩: 30px
국경
테두리 설정에서도 왼쪽 상단에 '20px'를 추가합니다.
박스 섀도우
그리고 모듈에 다채로운 상자 그림자를 제공합니다.
- 상자 그림자 흐림 강도: 140px
- 그림자 색상: rgba(31,15,255,0.66)
열 1에 사람 모듈 #2 추가
콘텐츠 추가
1열의 2인칭 모듈로 이동합니다! 이 모듈을 사용하여 소셜 미디어 링크와 설명을 표시합니다.
배경색
그런 다음 배경 설정으로 이동하여 흰색 배경색을 추가합니다.
- 배경색: #ffffff
아이콘 설정
아이콘 색상도 변경합니다.
- 아이콘 색상: #000000
간격
간격 설정에서 몇 가지 사용자 정의 간격 값을 추가하여 계속하십시오.
국경
그리고 왼쪽 하단에 '20px'를 추가합니다.
박스 섀도우
마지막으로 상자 그림자를 추가합니다.
- 상자 그림자 수직 위치: 50px
- 상자 그림자 흐림 강도: 140px
- 상자 그림자 확산 강도: -10px
- 그림자 색상: rgba(2,219,219,0.26)
2열에 이미지 모듈 추가
이미지 업로드
다음으로 필요한 모듈은 이미지 모듈입니다. 두 번째 열에 하나를 추가하고 원하는 이미지를 업로드하세요.
국경
테두리 설정에서 이 모듈에 둥근 모서리를 '20px'로 지정합니다.
박스 섀도우
그리고 미묘한 상자 그림자를 추가하십시오.
필터
다시 말하지만 필터 설정을 자유롭게 사용하여 이미지 모양을 변경하십시오.
예제 #4 다시 만들기
새 섹션 추가
네 번째 예시로! 페이지에 새 섹션을 추가합니다.
새 행 추가
열 구조
다음 열 구조를 사용하여 섹션에 새 행을 계속 추가합니다.
사이징
아직 모듈을 추가하지 않고 행 설정을 열고 크기 설정을 수정합니다.
- 이 행을 전체 너비로 만들기: 예
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
- 열 높이 균등화: 예
간격
간격 설정도 변경하십시오.
- 상단 패딩: 100px(데스크톱), 80px(태블릿 및 휴대폰)
- 하단 패딩: 100px(데스크톱), 80px(태블릿 및 휴대폰)
- 왼쪽 패딩: 100px(데스크톱), 30px(태블릿), 25px(휴대전화)
- 오른쪽 패딩: 100px(데스크톱), 30px(태블릿), 25px(전화)
열 1에 사람 모듈 추가
콘텐츠 추가
모듈 추가를 시작할 시간입니다! 열 1에 사람 모듈을 추가하고 모든 필드를 채웁니다.
아이콘 설정
그런 다음 아이콘 설정으로 이동하여 아이콘 색상을 변경합니다.
- 아이콘 색상: #000000
텍스트 설정
텍스트 설정에서 텍스트 방향도 변경하십시오.
- 텍스트 방향: 중앙
제목 텍스트 설정
그런 다음 제목 텍스트 설정을 열고 몇 가지를 변경합니다.
- 제목 글꼴 두께: 매우 굵게
- 제목 텍스트 색상: #000000
- 제목 텍스트 크기: 40px
- 제목 문자 간격: -4px
본문 설정
본문 설정도 수정합니다.
- 본문 글꼴 두께: Light
- 본문 색상: #000000
- 본문 텍스트 크기: 15px
- 바디 라인 높이: 2em
간격
그리고 간격 설정에서 사용자 정의 패딩 값을 사용하여 모양을 만듭니다.
- 상단 패딩: 280px(데스크톱), 200px(태블릿), 50px(전화)
- 하단 패딩: 280px(데스크톱), 200px(태블릿), 50px(전화)
- 왼쪽 패딩: 200px(데스크톱), 150px(태블릿), 20px(전화)
- 오른쪽 패딩: 200px(데스크톱), 150px(태블릿), 20px(전화)
국경
테두리 설정에서 각 모서리에 '700px'를 추가하여 원을 만들고 미묘한 테두리도 추가합니다.
- 테두리 너비: 1px
- 테두리 색상: #333333
2열에 이미지 모듈 추가
이미지 업로드
계속해서 두 번째 열에 이미지 모듈을 추가하고 원하는 정사각형 이미지를 업로드합니다.
간격
이 모듈의 간격 설정을 수정합니다.
- 상단 여백: 7vw(데스크톱), -15vw(태블릿), -5vw(전화)
- 왼쪽 여백: -5vw(데스크톱), 0vw(태블릿 및 전화)
국경
모듈의 각 모서리에 '1000px'를 추가하여 이 이미지에서 원 모양을 만듭니다.
박스 섀도우
미묘한 상자 그림자도 추가하십시오.
- 상자 그림자 흐림 강도: 160px
- 상자 그림자 확산 강도: -10px
필터
그리고 이미지의 필터 설정을 가지고 놀면서 디자인을 마칩니다.
- 채도: 0%
- 대비: 130%
예제 #5 다시 만들기
새 섹션 추가
다음이자 마지막 예제로! 페이지에 새 섹션을 추가합니다.
새 행 추가
열 구조
다음 열 구조를 사용하여 새 행을 계속 추가합니다.
열 1 그라데이션 배경
행 설정을 열고 열 1 그라데이션 배경을 추가합니다.
- 색상 1: #dddddd
- 색상 2: #ffffff
- 열 1 기울기 방향: 90deg
- 열 1 시작 위치: 40%
- 열 1 끝 위치: 40%
사이징
그런 다음 크기 설정으로 이동하여 몇 가지를 변경합니다.
- 이 행을 전체 너비로 만들기: 예
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
간격
행에 일부 사용자 정의 패딩 값도 추가하십시오.
- 상단 패딩: 100px(데스크톱), 80px(태블릿 및 휴대폰)
- 하단 패딩: 100px(데스크톱), 80px(태블릿 및 휴대폰)
- 왼쪽 패딩: 100px(데스크톱), 30px(태블릿), 25px(휴대전화)
- 오른쪽 패딩: 100px(데스크톱), 30px(태블릿), 25px(전화)
열 1에 사람 모듈 추가
콘텐츠 추가
모듈 추가를 시작할 시간입니다! 열 1에 사람 모듈을 추가하고 모든 필드를 채웁니다.
아이콘 설정
그런 다음 아이콘 설정에서 아이콘 색상을 변경합니다.
- 아이콘 색상: #000000
텍스트 설정
텍스트 설정에서 텍스트 방향도 변경하십시오.
- 텍스트 방향: 오른쪽
제목 텍스트 설정
그런 다음 제목 텍스트 설정을 일부 변경합니다.
- 제목 글꼴: Chenla
- 제목 텍스트 색상: #000000
- 제목 텍스트 크기: 50px
- 제목 문자 간격: -1px
본문 설정
본문 설정에 대해서도 동일한 작업을 수행합니다.
- 본문 글꼴 두께: Light
- 본문 색상: #000000
- 본문 텍스트 크기: 15px
- 바디 라인 높이: 2em
간격
모듈의 간격 설정에 몇 가지 사용자 정의 패딩 값을 추가하여 계속하십시오.
- 상단 패딩: 200px(데스크톱), 100px(태블릿 및 휴대폰)
- 하단 패딩: 200px(데스크톱), 100px(태블릿 및 휴대폰)
- 왼쪽 패딩: 500px(데스크톱), 250px(태블릿), 50px(전화)
- 오른쪽 패딩: 200px(데스크톱), 100px(태블릿), 50px(전화)
국경
마지막으로 모듈에 테두리를 추가합니다.
2열에 이미지 모듈 추가
이미지 업로드
다음으로 필요한 모듈은 2열에 있는 이미지 모듈입니다. 원하는 정사각형 이미지를 업로드하세요.
간격
그런 다음 이 모듈의 간격 설정을 약간 변경합니다.
- 상단 여백: 7vw(데스크톱), -2vw(태블릿 및 전화)
- 왼쪽 여백: -10vw(데스크톱), 0vw(태블릿 및 전화)
박스 섀도우
이미지 모듈에 상자 그림자도 지정합니다.
- 상자 그림자 흐림 강도: 160px
- 상자 그림자 확산 강도: -10px
필터
그리고 무엇보다도 필터 설정을 가지고 놀아보세요.
- 채도: 50%
- 대비: 130%
시사
이제 모든 단계를 거쳤으므로 다양한 화면 크기에서 결과를 최종적으로 살펴보겠습니다.
데스크탑
이동하는
마지막 생각들
이 게시물에서 우리는 Divi Person Module로 창의력을 발휘하는 5가지 방법을 보여주었습니다. 구축 중인 모든 웹 사이트에 이 예제를 사용하고 각 디자인 요소의 설정을 조정하여 자신만의 대체 버전을 만들 수 있습니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!