Divi의 평가 모듈을 스타일링할 수 있는 5가지 환상적인 방법
게시 됨: 2019-01-02방문자가 웹 사이트에서 항상 찾는 한 가지는 평가입니다. 그들은 신뢰성을 나타내며 귀하의 웹 사이트를 방문할 때 리드 또는 잠재 고객이 갖는 의사 결정 프로세스에 영향을 미칩니다. 공유할 강력한 평가를 확인하는 것 외에도 시각적으로 매력적으로 만드는 것도 중요한 역할을 합니다. 이 게시물에서는 기본 제공 옵션만 사용하면서 Divi Testimonial Module의 스타일을 지정할 수 있는 5가지 환상적인 방법을 보여 드리겠습니다.
가자!
시사
튜토리얼을 시작하기 전에 다양한 화면 크기에서 최종 결과를 살펴보겠습니다.
데스크탑
이동하는
예제 #1 다시 만들기
YouTube 채널 구독
새 섹션 추가
첫 번째 예부터 시작하겠습니다! 새 페이지를 만들고 일반 섹션을 추가합니다.
새 행 추가
열 구조
다음 열 구조를 사용하여 새 행을 계속 추가합니다.
사이징
아직 모듈을 추가하지 않고 행 설정을 열고 크기 조정 설정을 일부 변경합니다.
- 이 행을 전체 너비로 만들기: 예
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
열 1에 이미지 모듈 추가
이미지 업로드
모듈 추가를 시작할 시간입니다! 필요한 첫 번째 모듈은 1열의 이미지 모듈입니다. 계속해서 원하는 정사각형 이미지를 업로드하세요.
필터
그런 다음 필터 설정으로 이동하여 다양한 효과를 사용해 보십시오.
- 채도: 40%
- 대비: 126%
열 1에 버튼 모듈 추가
사본 추가
열 1에서 필요한 두 번째이자 마지막 모듈은 버튼 모듈입니다. 선택한 사본을 추가하십시오.
버튼 설정
그런 다음 버튼 설정으로 이동하여 버튼 모양을 변경합니다.
- 버튼에 사용자 정의 스타일 사용: 예
- 버튼 텍스트 크기: 14px
- 색상 1: #5400ff
- 색상 2: #00fff6
- 기울기 방향: 100deg
- 버튼 테두리 너비: 0px
- 글꼴 두께: 매우 굵게
- 글꼴 스타일: 대문자
간격
사용자 정의 간격 값도 추가하십시오.
- 상단 패딩: 10px
- 하단 패딩: 10px
- 왼쪽 패딩: 30px
- 오른쪽 패딩: 30px
박스 섀도우
그리고 은은한 박스 섀도우로 마무리합니다.
- 상자 그림자 흐림 강도: 80px
- 그림자 색상: rgba(0,0,0,0.3)
2열에 평가 모듈 추가
콘텐츠 추가
두 번째 열에서 우리가 필요로 하는 유일한 모듈은 평가 모듈입니다. 다른 필드와 콘텐츠 상자에 일부 콘텐츠를 추가합니다.
배경색
다음으로 약간 투명한 배경색을 추가합니다.
- 배경색: rgba(255,255,255,0.96)
견적 아이콘 설정
견적 아이콘 설정도 변경하십시오.
- 견적 아이콘 색상: #0c0c0c
- 견적 아이콘 배경색: rgba(245,245,245,0)
본문 설정
그런 다음 본문 설정을 수정합니다.
- 본문 글꼴: Verdana
- 바디 라인 높이: 1.7em
간격
간격 설정에서 다른 사용자 정의 여백 및 패딩 값을 추가하여 계속하십시오.
- 상단 여백: 15vw(데스크톱 및 태블릿), 0vw(전화)
- 하단 여백: 50px(태블릿 및 휴대전화)
- 왼쪽 여백: -10vw(데스크톱 및 태블릿), 0vw(전화)
- 오른쪽 여백: 5vw
- 상단 패딩: 70px
- 하단 패딩: 70px
- 왼쪽 패딩: 50px
- 오른쪽 패딩: 50px
국경
왼쪽 테두리도 추가하십시오.
- 왼쪽 테두리 너비: 7px
- 왼쪽 테두리 색상: #5400ff
박스 섀도우
마지막으로, Testimonial Module을 형성하기 위해 미묘한 상자 그림자를 추가합니다.
- 상자 그림자 흐림 강도: 80px
- 상자 그림자 확산 강도: -10px
- 그림자 색상: rgba(0,0,0,0.49)
두 모듈을 모두 복제하고 3열과 4열에 중복 배치
1열과 2열의 모듈 수정을 완료하면 모듈을 복제하고 나머지 두 열에 복제본을 배치할 수 있습니다.
이미지 변경
두 번째 평가의 이미지를 변경하는 것을 잊지 마십시오.
버튼 그라데이션 배경 변경
버튼 그라데이션 배경도 변경하십시오.
- 색상 1: #ff001d
- 색상 2: #3700ff
- 기울기 방향: 100deg
평가 테두리 색상 변경
그리고 테두리 색상을 새 버튼 그라데이션 배경과 일치시킵니다.
- 왼쪽 테두리 색상: #ff001d
예제 #2 다시 만들기
새 섹션 추가
두 번째 예시로! 페이지에 새 일반 섹션을 추가합니다.
새 행 추가
열 구조
섹션을 변경하지 않고 다음 열 구조를 사용하여 새 행을 추가합니다.
사이징
계속해서 행 설정을 열고 크기 조정 설정을 변경합니다.
- 이 행을 전체 너비로 만들기: 예
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
간격
다음으로, 행과 열에 몇 가지 사용자 정의 패딩 값을 추가합니다.
- 왼쪽 패딩: 200px(데스크톱), 30px(태블릿), 25px(전화)
- 오른쪽 패딩: 200px(데스크톱), 30px(태블릿), 25px(전화)
- 열 1 왼쪽 패딩: 5px(데스크톱), 0px(태블릿 및 휴대전화)
- 열 1 오른쪽 패딩: 2.5px(데스크톱), 0px(태블릿 및 휴대전화)
- 열 2 왼쪽 패딩: 2.5px(데스크톱), 0px(태블릿 및 휴대전화)
- 2열 오른쪽 패딩: 2.5px(데스크톱), 0px(태블릿 및 휴대전화)
- 3열 왼쪽 패딩: 2.5px(데스크톱), 0px(태블릿 및 휴대전화)
- 3열 오른쪽 패딩: 5px(데스크톱), 0px(태블릿 및 휴대전화)
열 1에 비디오 모듈 추가
동영상 링크
열 1에서 필요한 첫 번째 모듈은 비디오 모듈입니다. 이 비디오를 귀하의 평가 비디오에 연결하십시오.
이미지 오버레이
이미지 오버레이도 추가합니다.
열 1에 평가 모듈 추가
콘텐츠 추가
열 1에 필요한 두 번째이자 마지막 모듈은 평가 모듈입니다. 평가 세부 정보를 추가하여 시작하십시오.
견적 아이콘 비활성화
그런 다음 요소 설정에서 인용 아이콘을 비활성화합니다.
- 견적 아이콘 표시: 아니요
배경색
다음으로 흰색 배경을 추가합니다.
- 배경색: #ffffff
본문 설정
본문 설정도 수정합니다.
- 본문 색상: #000000
- 본문 문자 간격: -0.5px
- 바디 라인 높이: 1.7em
간격
그리고 간격 설정에서 사용자 지정 여백 및 패딩 값을 추가합니다.
- 하단 여백: 30px(태블릿 및 휴대폰)
- 상단 패딩: 50px
- 하단 패딩: 50px
- 왼쪽 패딩: 80px
- 오른쪽 패딩: 80px
국경
또한 모듈 하단 왼쪽 및 오른쪽 둥근 모서리에 '30px'를 제공합니다.
박스 섀도우
마지막으로 깊이를 만들기 위해 Testimonial Module에 미묘한 상자 그림자를 제공합니다.
- 상자 그림자 흐림 강도: 80px
- 상자 그림자 확산 강도: -10px
- 그림자 색상: rgba(0,0,0,0.3)
모듈을 세 번 복제하고 나머지 열에 중복 배치
열 1에서 두 모듈을 모두 수정했으면 두 모듈을 복제하고 나머지 두 열에 복제본을 배치합니다.
비디오 링크, 콘텐츠 및 이미지 오버레이 변경
새로운 평가의 비디오 링크, 콘텐츠 및 이미지 오버레이를 변경하는 것을 잊지 마십시오.
예제 #3 다시 만들기
새 섹션 추가
세 번째 예시로! 페이지에 새 일반 섹션을 추가합니다.
새 행 추가
열 구조
다음 열 구조를 사용하여 새 행을 계속 추가합니다.
열 1 배경색
그런 다음 배경 설정으로 이동하여 첫 번째 열에 배경색을 추가합니다.
- 열 1 배경색: #f9f9f9
2열 배경색
두 번째 열에는 흰색 배경색이 필요합니다.
- 2열 배경색: #ffffff
사이징
그런 다음 크기 설정으로 이동하여 거터 너비를 제거합니다.
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
간격
다음에 몇 가지 사용자 정의 간격 값을 추가하십시오.
- 상단 패딩: 0px
- 하단 패딩: 0px
- 왼쪽 패딩: 0px
- 오른쪽 패딩: 0px
- 열 1 상단 패딩: 100px
- 열 1 하단 패딩: 100px
- 열 1 왼쪽 패딩: 50px
- 열 1 오른쪽 패딩: 50px
- 열 2 상단 패딩: 100px
- 2열 하단 패딩: 100px
- 열 2 왼쪽 패딩: 50px
- 열 2 오른쪽 패딩: 50px
국경
그리고 각 테두리를 '20px'로 지정합니다.
박스 섀도우
마지막으로 행에 상자 그림자를 지정하십시오.
- 상자 그림자 흐림 강도: 80px
열 1에 평가 모듈 추가
콘텐츠 추가
모듈 추가를 시작할 시간입니다! 열 1에서 필요한 첫 번째 모듈은 평가 모듈입니다. 내용을 추가합니다.
이미지 업로드
이미지 설정에서 이미지를 업로드하여 계속하십시오.
견적 아이콘 비활성화
다음으로 견적 아이콘을 비활성화합니다.
- 견적 아이콘 표시: 아니요
배경색 비활성화
배경색도 비활성화하십시오.
- 배경색 사용: 아니오
본문 설정
계속해서 디자인 탭으로 이동하여 본문 설정을 변경합니다.
- 본문 글꼴: Abril Fatface
- 본문 색상: #000000
- 본문 텍스트 크기: 20px
열 1에 텍스트 모듈 추가
콘텐츠 추가
열 1에서 필요한 두 번째 모듈은 텍스트 모듈입니다. 콘텐츠 상자에 평가 사본을 추가합니다.
간격
그런 다음 디자인 탭으로 이동하여 사용자 지정 위쪽 및 아래쪽 여백을 추가합니다.
- 상단 여백: 50px
- 하단 여백: 50px
열 1에 이미지 모듈 추가
회사 로고 업로드
열 1에서 필요한 세 번째이자 마지막 모듈은 이미지 모듈입니다. 이 모듈을 사용하여 평가와 관련된 회사 로고를 추가할 수 있습니다.
모든 모듈을 복제하고 2열에 중복 배치
1열의 모든 모듈을 수정했으면 계속해서 복제할 수 있습니다. 그렇게 하면 두 번째 열에 복제본을 배치합니다.
평가 이미지 변경 및 복사
이미지와 함께 사용후기의 내용을 변경했는지 확인하세요.
예제 #4 다시 만들기
새 섹션 추가
네 번째 예시로! 페이지에 새 섹션을 추가합니다.
새 행 추가
열 구조
다음 열 구조를 사용하여 섹션에 새 행을 계속 추가합니다.
열 1 배경 이미지
행 설정을 열고 첫 번째 열에 배경 이미지를 추가합니다.
- 열 1 배경 이미지 반복: 반복 없음
3열 배경 이미지
세 번째 열에 대해서도 동일한 작업을 수행합니다.
- 열 3 배경 이미지 반복: 반복 없음
사이징
그런 다음 크기 설정으로 이동하여 몇 가지를 변경합니다.
- 이 행을 전체 너비로 만들기: 예
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
- 열 높이 균등화: 예
간격
다음으로 기본 상단 및 하단 패딩을 제거합니다.
- 상단 패딩: 0px
- 하단 패딩: 0px
열 1에 평가 모듈 추가
콘텐츠 추가
첫 번째 열에 평가 모듈을 추가하여 계속하십시오. 그렇게 하면 평가 세부정보를 추가합니다.
그라데이션 배경
모듈에 그라데이션 배경도 지정하십시오.
- 색상 1: #8b32ff
- 색상 2: #ff35ae
- 기울기 방향: 120deg
견적 아이콘 설정
그런 다음 아이콘 설정을 일부 변경합니다.
- 견적 아이콘 색상: #000000
- 견적 아이콘 배경색: #ffffff
텍스트 설정
그리고 텍스트 설정에서 텍스트 색상을 변경합니다.
- 텍스트 색상: 라이트
간격
모듈에 정사각형 모양을 주기 위해 간격 설정에 사용자 지정 패딩을 추가할 것입니다.
- 상단 패딩: 100px
- 하단 패딩: 100px
- 왼쪽 패딩: 100px
- 오른쪽 패딩: 100px
박스 섀도우
또한 미묘한 상자 그림자를 사용하여 평가에 깊이를 더하고 싶을 것입니다.
- 상자 그림자 흐림 강도: 80px
- 상자 그림자 확산 강도: -10px
- 그림자 색상: #ff35ae
기본 필터
이 평가의 이면에 있는 아이디어는 마우스를 가져가면 평가가 사라지고 이미지가 표시된다는 것입니다. 이 효과를 얻기 위해 필터 설정에서 불투명도 필터를 사용할 것입니다. 기본 불투명도가 '100%'인지 확인하십시오.
- 불투명도: 100%
호버 필터
그리고 호버에서 모든 불투명도를 제거하십시오.
- 불투명도: 0%
평가 모듈을 3열에 복제
열 1에서 평가 모듈 수정을 완료했으면 복제하고 세 번째 열에 복제본을 배치합니다.
그라데이션 배경 변경
다음 복제본의 그라디언트 배경을 변경합니다.
- 색상 1: #32b0ff
- 색상 2: #89009e
- 기울기 방향: 120deg
복제 행
그리고 전체 행을 복제합니다.
평가 그라디언트 배경 제거 및 배경색 변경
다음으로 해야 할 일은 평가 모듈의 그라데이션 배경을 제거하고 대신 흰색 배경색을 사용하는 것입니다.
- 배경색: #ffffff
평가 텍스트 설정 변경
그라데이션 배경을 제거한 후에는 텍스트 설정에서 텍스트 색상을 변경할 수 있습니다.
- 텍스트 색상: 어두운
예제 #5 다시 만들기
새 섹션 추가
이 튜토리얼의 다음이자 마지막 예제로 넘어갑니다! 페이지에 새 일반 섹션을 추가합니다.
배경색
섹션의 배경색을 변경합니다.
- 배경색: #ededed
새 행 추가
열 구조
그런 다음 다음 열 구조를 사용하여 새 행을 추가합니다.
사이징
크기 설정도 일부 변경합니다.
- 이 행을 전체 너비로 만들기: 예
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 2
열 1에 텍스트 모듈 추가
콘텐츠 추가
첫 번째 열에 텍스트 모듈을 추가하여 계속하십시오. 콘텐츠 상자에 평가 사본을 추가합니다.
배경색
그리고 모듈의 배경색을 변경합니다.
- 배경색: #ffffff
텍스트 설정
그런 다음 디자인 탭으로 이동하여 텍스트 설정에서 텍스트 방향을 변경합니다.
- 텍스트 방향: 중앙
간격
사용자 정의 여백 값도 추가하십시오.
- 왼쪽 여백: 50px(데스크톱 및 태블릿), 20px(전화)
- 오른쪽 여백: 50px(데스크톱 및 태블릿), 20px(전화)
열 1에 평가 모듈 추가
콘텐츠 추가
Text Module 바로 아래에 Testimonial Module을 추가할 수 있습니다. 저자 이름, 직위 및 회사 이름 필드를 입력합니다.
이미지 업로드
이미지 설정에서도 이미지를 업로드합니다.
그라데이션 배경
그리고 그라데이션 배경을 추가합니다.
- 색상 1: #5b32ff
- 색상 2: #32e5f2
- 기울기 방향: 100deg
견적 아이콘 설정
디자인 탭으로 이동하여 견적 아이콘 설정을 변경하여 계속 진행합니다.
- 견적 아이콘 색상: #000000
- 견적 아이콘 배경색: #ffffff
텍스트 설정
텍스트 설정에서 텍스트 방향도 변경하십시오.
- 텍스트 방향: 중앙
- 텍스트 색상: 라이트
본문 설정
다음으로, 본문 텍스트 설정을 가지고 놀아보세요.
- 본문 글꼴 두께: 매우 굵게
- 본문 글꼴 스타일: 대문자
- 본문 텍스트 크기: 15px
- 본문 문자 간격: -0.5px
- 바디 라인 높이: 2.1em
간격
이 모듈과 텍스트 모듈 사이에 겹침을 만들기 위해 약간의 음수 상단 여백을 추가합니다.
- 상단 여백: -25px
박스 섀도우
그리고 Testimonial Module에 은은한 박스 섀도우를 주어 후기 디자인을 완성합니다.
- 상자 그림자 흐림 강도: 80px
- 그림자 색상: rgba(0,0,0,0.3)
두 모듈을 두 번 복제하고 나머지 열에 중복 배치
열 1의 모듈 수정을 완료하면 두 번 복제하고 나머지 두 열에 복제본을 배치할 수 있습니다.
추천 콘텐츠 및 이미지 변경
모듈에서 사용되는 내용과 이미지를 변경했는지 확인하십시오.
평가 그라데이션 배경 변경
그라데이션 배경과 함께.
- 색상 1: #a632ff
- 색상 2: #f7a131
- 색상 1: #3281ff
- 색상 2: #2cf483
시사
이제 모든 단계를 거쳤으므로 다양한 화면 크기에서 최종 결과를 살펴보겠습니다.
데스크탑
이동하는
마지막 생각들
이 게시물에서 우리는 Divi Testimonial Module을 스타일링할 수 있는 5가지 환상적인 방법을 보여주었습니다. 튜토리얼을 단계별로 안내하고 기본적으로 작업 중인 모든 웹사이트에서 사용할 수 있는 사용후기를 만들었습니다. 질문이나 제안 사항이 있는 경우 아래 댓글 섹션에 댓글을 남겨주세요.