Divi의 새로운 열 필터 설정을 사용하여 놀라운 혼합 효과 만들기
게시 됨: 2019-08-09Divi의 새로운 열 필터 설정은 다양한 방법으로 사용할 수 있습니다. 이 게시물에서는 하나의 기본 행 배경 이미지와 열 콘텐츠를 혼합하는 방법을 보여줍니다. 모듈에 다양한 색상 그라디언트를 추가하고 놀라운 효과를 만들기 위해 열 "스크린" 혼합 모드를 추가합니다. 이 디자인이 다음 Divi 프로젝트에서 기둥 혼합 모드를 사용하는 데 영감을 주기를 바랍니다. JSON 파일도 무료로 다운로드할 수 있습니다!
가자!
시사
튜토리얼을 시작하기 전에 다양한 화면 크기에 따른 결과를 간단히 살펴보겠습니다.
데스크탑
이동하는
칼럼 블렌드 모드 레이아웃 무료 다운로드
무료 열 혼합 모드 레이아웃을 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.
무료로 다운로드
Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.
성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!
재창조를 시작합시다!
YouTube 채널 구독
3열 행이 있는 새 섹션 추가
3열 행이 있는 새 섹션을 추가하여 디자인을 시작합니다.
섹션 간격
섹션 설정을 열고 간격을 조정합니다.
- 왼쪽 및 오른쪽 여백: 3vw
- 상단 및 하단 패딩: 84px
행 설정
배경
모듈을 추가하기 전에 행 설정을 수정합니다. 배경색을 추가하여 시작합니다.
- 배경색: 중간 회색 #c4c4c4
그런 다음 배경 이미지를 업로드하고 혼합 모드를 사용하여 배경 색상을 이미지와 혼합합니다.
- 배경 이미지 혼합: 곱하기
사이징
다음 행의 크기 설정을 조정합니다.
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
- 열 높이 균등화: 예
- 폭: 100%
- 최대 너비: 100%
간격
기본 행 패딩도 제거하십시오.
- 상단 및 하단 패딩: 0px
박스 섀도우
행에 간단한 상자 그림자를 추가하여 계속하십시오.
- 박스 섀도우: 첫 번째 옵션
시계
가시성 탭에서 Z 인덱스를 조정합니다.
- Z-인덱스: 1
스타일 열 1
첫 번째 열의 설정을 입력합니다.
필터
필터 탭의 열에 화면 혼합 모드를 적용합니다.
- 혼합 모드: 화면
호버 변환 스케일
변환 옵션 그룹을 입력하고 호버 변환 스케일 설정을 수정하십시오.
- 변환 스케일: x 및 y 축 모두에서 105%
시계
열의 가시성 탭을 입력하고 오버플로 설정을 조정합니다.
- 수평 오버플로: 표시
- 수직 오버플로: 표시
전환
전환 탭으로 이동하여 전환 지속 시간을 조정하여 부드러운 전환을 만듭니다.
- 전환 시간: 500ms
열 1에 텍스트 모듈 추가
각 열에는 세 개의 텍스트 모듈이 있습니다. 선택한 H2 콘텐츠가 포함된 첫 번째 텍스트 모듈을 열 1에 추가하고 다음과 같이 설정을 조정합니다.
배경
색상 그라디언트로 배경 스타일을 지정합니다.
- 배경: 그라데이션
- 그라디언트 색상 1: #5498ff
- 그라디언트 색상 2: #16fff3
- 기울기 방향: 235도
- 시작 위치: 37%
간격
다음에 몇 가지 사용자 정의 간격 값을 추가하십시오.
- 상단 및 하단 패딩: 6vw
- 왼쪽 및 오른쪽 패딩: 3vw
제목 텍스트
제목 텍스트 설정을 입력하고 그에 따라 H2 텍스트 설정의 스타일을 지정합니다.
- 제목 2 글꼴 두께: 매우 굵게
- 제목 2 글꼴 스타일: TT
- 제목 2 텍스트 색상: 검정 #oooooo
- 제목 2 텍스트 크기:
- 데스크탑: 5vw
- 태블릿: 11vw
- 전화: 13vw
- 제목 2 줄 높이:
- 데스크탑: 4.3vw
- 태블릿: 9vw
- 전화: 10.5vw
필터
필터 설정으로 이동하여 화면 혼합 모드를 추가합니다.
- 혼합 모드: 화면
열 1에 두 번째 텍스트 모듈 추가
선택한 단락 내용을 사용하여 열 1에 두 번째 텍스트 모듈을 계속 추가합니다.
다음과 같이 텍스트 모듈의 스타일을 지정합니다.
배경
흰색 배경색을 추가합니다.
- 배경색: 흰색 #ffffffff
텍스트
디자인 탭을 입력하고 그에 따라 텍스트를 조정합니다.
- 텍스트 글꼴: 몬세라트
- 텍스트 정렬: 양쪽 맞춤
- 텍스트 색상: 다크 그레이 #333333
- 텍스트 크기:
- 데스크탑: 0.8vw
- 태블릿: 2vw
- 전화: 2.5vw
- 텍스트 문자 간격: -0.04vw
- 텍스트 줄 높이:
- 데스크탑: 2.7vw
- 태블릿: 5.5vw
- 전화: 6vw
간격
간격 설정도 조정하여 텍스트 주위에 빈 공간을 만듭니다.
- 상단 및 하단 여백: 0.5vw
- 상단 및 하단 패딩:
- 데스크탑: 5vw
- 태블릿 + 전화: 15vw
- 왼쪽 패딩: 5vw
- 오른쪽 패딩:
- 데스크탑: 5vw
- 태블릿 + 전화: 25vw
필터
마지막으로 필터 탭에서 화면 혼합 모드를 적용합니다.
- 혼합 모드: 화면
열 1에 세 번째 텍스트 모듈 추가
열 디자인을 완료하려면 일부 CTA 사본과 함께 세 번째 텍스트 모듈을 추가하십시오. 우리는 이 전체 모듈을 버튼으로 사용하고 있습니다.
다음과 같이 모듈의 스타일을 지정합니다.
링크 추가
링크 설정에서 원하는 링크를 추가하세요. 누군가 모듈의 아무 곳이나 클릭하는 즉시 다른 곳으로 리디렉션됩니다.
배경
첫 번째 텍스트 모듈과 일치하도록 배경 그라디언트의 스타일을 지정합니다.
- 배경: 그라데이션
- 배경 그라디언트 색상 1: #5498ff
- 배경 그라데이션 색상 2: #16fff3
- 기울기 방향: 235도
텍스트
디자인 탭을 입력하고 다음과 같이 텍스트의 스타일을 지정합니다.
- 텍스트 글꼴: 몬세라트
- 텍스트 글꼴 두께: 무거움
- 텍스트 글꼴 스타일: 밑줄
- 텍스트 밑줄 색상: 흰색 #ffffff
- 텍스트 색상: 블랙 #000000
- 텍스트 크기:
- 데스크탑: 1.5vw
- 태블릿: 3.3vw
- 전화: 4vw
- 텍스트 줄 높이: 1em
간격
모듈에서 텍스트가 더 잘 맞도록 간격 설정을 조정합니다.
- 상단 및 하단 패딩:
- 데스크탑: 2vw
- 태블릿: 6vw
- 전화: 9vw
- 왼쪽 패딩: 3vw
첫 번째 열을 두 번 복제
첫 번째 열을 완료했으면 행 설정을 열고 두 번째 및 세 번째 열을 삭제합니다. 그런 다음 첫 번째 열을 두 번 복제합니다. 물론 2열과 3열의 모듈을 약간 변경해야 합니다.
2열 / 텍스트 모듈 1 배경
- 배경 그라디언트 색상 1: #c870ff
- 배경 그라데이션 색상 2: #ff355a
열 2 / 텍스트 모듈 2 상자 그림자
- 박스 섀도우: 여섯 번째 옵션
- 상자 그림자 흐림 강도: 20px
- 상자 그림자 확산 강도: 17px
- 상자 그림자 색상: rgba(225,33,255,0.06)
2열 / 텍스트 모듈 3 배경
첫 번째 모듈과 일치하도록 세 번째 텍스트 모듈의 배경 그라데이션을 조정합니다.
- 배경 그라디언트 색상 1: #c870ff
- 배경 그라데이션 색상 2: #ff355a
열 3 / 텍스트 모듈 1 배경
세 번째 칼럼으로! 그에 따라 텍스트 모듈 1의 그라디언트 배경을 변경합니다.
- 배경 그라데이션 색상 1: #ff4800
- 배경 그라데이션 색상 2: #fc9a2a
2열 / 텍스트 모듈 3 배경
- 배경 그라데이션 색상 1: #ff4800
- 배경 그라데이션 색상 2: #fc9a2a
시사
이제 모든 단계를 거쳤으므로 다양한 화면 크기에 따른 결과를 최종적으로 살펴보겠습니다.
데스크탑
이동하는
랩입니다
이 게시물에서는 Divi의 열 설정을 사용하여 놀라운 블렌드 효과로 3열 디자인을 만드는 방법을 보여주었습니다. 우리는 당신이 만드는 모든 웹사이트에서 사용할 수 있는 아름다운 결과를 얻기 위해 모듈, 열 및 행 설정을 결합했습니다. 이 튜토리얼을 통해 자신만의 대안 디자인도 만들 수 있기를 바랍니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!