이미지 배경 및 상자 그림자 옵션을 Divi와 결합하는 방법
게시 됨: 2017-11-02이 Divi 게시물에서는 이미지 모듈의 배경 및 그림자 옵션을 결합하는 방법을 보여줍니다. 이 게시물은 상상력을 자극하고 새로운 Divi 기능이 기존 기능과 어떻게 작동하여 창의적인 결과를 이끌어낼 수 있는지 보여주기 위한 것입니다. 창작 과정을 돕기 위해 4가지 조합을 만들었으며 단계별로 재현하는 방법을 보여줍니다. 예제를 살펴보겠습니다.
첫 번째 예
데스크탑
이동하는
두 번째 예
데스크탑
이동하는
세 번째 예
데스크탑
이동하는
네 번째 예
데스크탑
이동하는
이미지 배경 및 상자 그림자 옵션을 Divi와 결합하는 방법
YouTube 채널 구독
첫 번째 예
이제 이 게시물에서 기대할 수 있는 것을 보여주었으므로 Divi 내에서 추가 CSS 코드 없이 몇 단계만 수행하여 다음 예제를 다시 만드는 방법을 살펴보겠습니다.
2열 행 추가
열 1 배경색
표준 섹션에 2열 행을 추가하고 1열 배경색으로 'rgba(12,113,195,0.11)'를 선택합니다.
간격
그런 다음 디자인 탭으로 이동합니다. 첫 번째 열의 상단 여백에 '200px'를 추가하고 하단 패딩에 '150px'를 추가합니다.
첫 번째 열에 이미지 모듈 추가(데스크톱 및 태블릿)
사이징
그런 다음 생성한 행의 첫 번째 열에 이미지 모듈을 추가합니다. 이 이미지 모듈은 데스크톱 및 태블릿에만 적용됩니다. 가장 먼저 해야 할 일은 너비를 '94%'로 변경하는 것입니다.
간격
그런 다음 간격 하위 범주를 열고 '이미지 아래 공간 표시' 옵션을 활성화하고 상단 여백에 '-150px'를 추가하고 이미지의 왼쪽 여백에 '-110px'를 추가합니다.
박스 섀도우
탭을 더 아래로 스크롤하여 이미지에 다음 상자 그림자를 적용합니다.
- 상자 그림자 수평 위치: 80px
- 상자 그림자 수직 위치: 80px
- 상자 그림자 흐림 강도: 0px
- 상자 그림자 확산 강도: 6px
- 그림자 색상: rgba(173,173,173,0.79)
- 상자 그림자 위치: 외부 그림자
시계
마지막으로 고급 탭으로 이동하여 모바일에서 이미지 모듈을 비활성화합니다.
클론 이미지 모듈(전화)
Image Module의 데스크탑 및 태블릿 버전에 사용한 대부분의 설정은 모바일 버전에서도 동일합니다. 그렇기 때문에 이미지 모듈을 복제하고 모바일 화면과 일치하도록 몇 가지 추가 변경 작업을 수행합니다.
상자 그림자 변경
가장 먼저 변경해야 할 것은 상자 그림자입니다. 데스크탑 설정을 사용하는 대신 다음 설정을 사용하십시오.
- 상자 그림자 수평 위치: 33px
- 상자 그림자 수직 위치: 78px
- 상자 그림자 흐림 강도: 0px
- 상자 그림자 확산 강도: 6px
- 그림자 색상: rgba(173,173,173,0.79)
- 상자 그림자 위치: 외부 그림자
시계
다음이자 마지막으로 해야 할 일은 이 두 번째 이미지 모듈의 가시성을 변경하는 것입니다. 전화에서 비활성화하는 대신 태블릿과 데스크톱 모두에서 비활성화하십시오.
두 번째 예
다음으로 데스크탑에서 다음과 같은 두 번째 예가 있습니다.
2열 행 추가
행 그라데이션 배경
작업 중인 섹션에 새로운 2열 행을 추가하고 다음 그라데이션 배경을 사용합니다.
- 첫 번째 색상: rgba(237,240,0,0.55)
- 두 번째 색상: rgba(255,255,255,0)
- 그라디언트 유형: 방사형
- 방사형 방향: 중심
- 시작 위치: 50.8%
- 최종 위치: 50.8%
사이징
디자인 탭으로 이동하여 '이 행을 전체 너비로 만들기' 옵션을 활성화합니다.
간격
마지막으로 두 번째 열에 '200px'의 상단 패딩을 추가합니다.
첫 번째 열에 이미지 모듈 추가
간격
행 설정이 완료되면 첫 번째 열에 이미지 모듈을 추가합니다. 디자인 탭에서 Spacing 하위 범주를 열고 위쪽, 오른쪽, 아래쪽 및 왼쪽 패딩에 '30px'를 추가합니다.
박스 섀도우
동일한 탭을 아래로 스크롤하고 Box Shadow 하위 범주에 대해 다음 설정을 사용합니다.
- 상자 그림자 수평 위치: 0px
- 상자 그림자 수직 위치: 2px
- 상자 그림자 흐림 강도: 56px
- 상자 그림자 확산 강도: 12px
- 그림자 색상: rgba(0,0,0,0.3)
- 상자 그림자 위치: 외부 그림자
이미지 모듈 복제 및 두 번째 열에 배치
두 번째 열 내의 이미지 모듈에 대한 설정은 동일합니다. 계속해서 이미지 모듈을 복제하고 두 번째 열에 배치하십시오.
세 번째 예
계속해서 다음 결과를 얻는 방법을 보여 드리겠습니다.
1열 행 추가
열 1 배경색
1열 행을 추가하고 첫 번째 열의 배경색으로 'rgba(193,145,163,0.6)'를 선택합니다.
이미지 모듈 추가
그라데이션 배경 이미지
그런 다음 이미지 모듈을 열에 추가하고 다음 그라데이션 배경을 사용합니다.
- 첫 번째 색상: #e2e2e2
- 두 번째 색상: rgba(255,255,255,0)
- 그라디언트 유형: 선형
- 기울기 방향: 180deg
- 시작 위치: 50%
- 최종 위치: 50%
국경
디자인 탭으로 이동하여 다음 설정을 테두리 하위 범주에 적용합니다.
- 테두리 사용: 예
- 테두리 색상: #000000
- 테두리 너비: 3px
- 테두리 스타일: 단색
사이징
다음으로 이미지 모듈에 다음 너비를 추가합니다.
- 데스크탑: 85%
- 태블릿 및 전화: 100%
간격
그런 다음 Spacing 하위 범주를 열고 다음 패딩 및 여백을 이미지 모듈에 적용합니다.
- 왼쪽 여백: 80px(데스크톱), 0px(태블릿 및 휴대폰)
- 상단, 오른쪽, 하단 및 왼쪽 패딩: 30px
박스 섀도우
마지막으로 다음 설정으로 상자 그림자를 추가합니다.
- 상자 그림자 수평 위치: 0px
- 상자 그림자 수직 위치: 0px
- 상자 그림자 흐림 강도: 0px
- 상자 그림자 확산 강도: 39px
- 그림자 색상: rgba(0,0,0,0.22)
- 상자 그림자 위치: 외부 그림자
네 번째 예
그리고 마지막으로; 다시 만드는 방법을 보여줄 마지막 예는 다음과 같습니다.
2열 행 추가
2열 행을 추가하여 시작합니다. 이 행은 이 게시물에서 처리한 이전 예와 달리 추가 설정이 필요하지 않습니다.
첫 번째 열에 이미지 모듈 추가
그라데이션 배경
방금 만든 행의 첫 번째 열에 이미지 모듈을 추가하고 다음 그라데이션 배경을 사용합니다.
- 첫 번째 색상: rgba(255,255,255,0)
- 두 번째 색상: rgba(92,0,158,0.46)
- 그라디언트 유형: 선형
- 기울기 방향: 138deg
- 시작 위치: 55%
- 최종 위치: 55%
간격
그런 다음 디자인 탭으로 이동하여 간격 하위 범주에 대해 다음 설정을 사용합니다.
- 이미지 아래 공간 표시: 예
- 오른쪽 패딩: 30px
- 하단 패딩: 30px
첫 번째 열에 두 번째 이미지 모듈 추가
배경색
계속해서 이전 이미지 모듈 바로 아래에 다른 이미지 모듈을 추가하고 'rgba(96,96,96,0.42)'를 배경색으로 사용합니다.
간격
그런 다음 디자인 탭으로 이동하여 간격 하위 범주에 대해 다음 설정을 사용합니다.
- 이미지 아래 공간 표시: 예
- 상단 여백: -250px(데스크톱), -150(태블릿), -100(전화)
- 오른쪽 여백: -150px(데스크톱), 0px(태블릿 및 휴대폰)
- 왼쪽 여백: 150px
- 상단 패딩: 30px
- 왼쪽 패딩: 30px
박스 섀도우
마지막으로 Box Shadow 하위 범주를 열고 다음 설정을 사용합니다.
- 상자 그림자 수평 위치: 0px
- 상자 그림자 수직 위치: 2px
- 상자 그림자 흐림 강도: 0px
- 상자 그림자 확산 강도: 24px
- 그림자 색상: #e2e2e2
- 상자 그림자 위치: 외부 그림자
마지막 생각들
이 게시물에서 공유한 예는 Divi의 상자 그림자 및 배경 옵션을 사용할 수 있는 범위의 일부일 뿐입니다. 이미지 모듈을 사용하여 웹사이트의 전체적인 모양과 느낌을 향상시키는 독특한 디자인을 만들 수 있습니다. 질문이나 제안 사항이 있는 경우 아래 댓글 섹션에 댓글을 남겨주세요.
중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!
Creative Stall/Shutterstock.com의 추천 이미지