Divi의 새로운 옵션을 사용하여 아름다운 이미지 테두리를 만드는 방법
게시 됨: 2017-09-27오늘의 Divi 튜토리얼에서는 다음에 구축할 웹사이트에서 아름다운 이미지 테두리를 만드는 방법을 보여드리겠습니다. 이 게시물의 목적은 사용 중인 이미지(및 웹사이트의 나머지 부분)와 일치하는 아름다운 결과를 만드는 방법을 보여주는 것입니다.
새로운 Divi 옵션을 사용하면 그 어느 때보다 쉽게 놀라운 결과를 얻을 수 있습니다. 우리가 만드는 방법을 보여줄 약간만 수정하면 웹 디자인을 다음 단계로 끌어올릴 수 있습니다. 우리가 공유할 8가지 예제는 모두 Divi Builder 및 Image Module이 제공하는 내장 옵션 외에는 사용하지 않습니다.
엿보기
이 게시물에서 기대할 수 있는 결과를 살펴보겠습니다.
Divi의 새로운 옵션을 사용하여 아름다운 이미지 테두리를 만드는 방법
YouTube 채널 구독
그라데이션 배경
아름다운 이미지 테두리를 얻을 수 있는 첫 번째 가능성은 그라디언트 배경만 사용하는 것입니다. 다양한 그라데이션 배경 설정을 실험하여 간단하면서도 우아한 결과를 얻을 수 있습니다. 그라데이션 배경만으로 구성된 이미지 테두리의 세 가지 예를 보여 드리겠습니다.
기준
우리가 다룰 첫 번째 예는 가장 단순하고 겸손한 것입니다. 표준 그라디언트 이미지 테두리. 결과는 다음과 같이 생성하는 방법을 보여줍니다.
콘텐츠 탭
콘텐츠 탭에서 그라데이션 배경을 선택하여 시작합니다. 이 예에서는 다음 설정을 사용했습니다.
- 첫 번째 색상: #081e8c
- 두 번째 색상: #764f9b
- 그라디언트 유형: 선형
- 기울기 방향: 269deg
- 시작 위치: 40%
- 최종 위치: 60%
디자인 탭
다음이자 마지막으로 해야 할 일은 이미지에 패딩을 추가하는 것입니다. 간단합니다. 디자인 탭으로 이동하여 위, 아래, 오른쪽 및 왼쪽 패딩에 '10px'를 추가합니다.
측면
다음으로 이미지의 왼쪽과 오른쪽에만 표시되는 이미지 테두리가 있습니다. 이러한 종류의 이미지 테두리를 사용하면 테두리 자체에 너무 많은 초점을 두지 않고도 이미지에 멋진 추가 터치를 제공할 수 있습니다.
콘텐츠 탭
이러한 유형의 이미지 테두리를 얻으려면 먼저 다음 그라데이션 배경을 이미지에 추가하십시오.
- 첫 번째 색상: rgba(255,255,255,0)
- 두 번째 색상: #0a8da8
- 그라디언트 유형: 선형
- 기울기 방향: 166deg
- 시작 위치: 29%
- 최종 위치: 52%
디자인 탭
디자인 탭에서 필요한 것은 오른쪽과 왼쪽에 대한 패딩의 '10px'뿐입니다.
원 코너
계속해서 웹 사이트의 이미지에 대한 모서리 배경을 만들 수도 있습니다. 이 유형의 테두리는 이미지 내에서 사용되는 색상을 강조하고 싶을 때 사용하면 좋습니다.
콘텐츠 탭
세 번째 이미지 예의 경우 다음 그라데이션 배경을 사용합니다.
- 첫 번째 색상: rgba(58,8,1,0.58)
- 두 번째 색상: rgba(41,196,169,0)
- 기울기 방향: 152deg
- 시작 위치: 34%
- 최종 위치: 28%
디자인 탭
그런 다음 각 패딩에 '20px'를 추가합니다.
이미지 테두리 및 그라데이션 배경
또 다른 가능성은 그라디언트 배경을 이미지 테두리와 결합하는 것입니다. 이것 역시 다음 네 가지 예에서 목격할 수 있는 것처럼 놀라운 결과를 제공할 수 있습니다.
미묘한 그라데이션
그라데이션 배경과 이미지 테두리의 첫 번째 조합은 심플하면서도 아름답습니다. 그라디언트 배경과 테두리에 같은 색상을 사용하여 이미지 테두리가 뭔가 색으로 채워지는 느낌이 듭니다.
콘텐츠 탭
이미지에 다음 그라데이션 배경 설정을 추가하여 시작합니다.
- 첫 번째 색상: rgba(255,255,255,0)
- 두 번째 색상: #777777
- 그라디언트 유형: 선형
- 기울기 방향: 180deg
- 시작 위치: 65%
- 최종 위치: 78%
디자인 탭
디자인 탭으로 이동하여 테두리 하위 범주에서 다음 설정을 사용합니다.
- 테두리 사용: 예
- 테두리 색상: #777777
- 테두리 너비: 3px
- 테두리 스타일: 단색
마지막으로 모든 패딩 옵션에 '7px'의 패딩을 추가합니다.
모양
다음으로 방문자의 주의를 끌기에 좋은 예가 있습니다. 이 경우 이미지 자체에는 대부분 밝은 색상이 포함되어 있어 어두운 테두리와 균형이 잘 잡힙니다.
콘텐츠 탭
이 이미지 테두리에 필요한 그라데이션 배경 설정은 다음과 같습니다.
- 첫 번째 색상: rgba(53,0,188,0.1)
- 두 번째 색상: #680061
- 그라디언트 유형: 방사형
- 방사형 방향: 중심
- 시작 위치: 80%
- 최종 위치: 80%
디자인 탭
디자인 탭으로 이동하여 다음 테두리를 사용합니다.
- 테두리 사용: 예
- 테두리 색상: #9a00bc
- 테두리 너비: 1px
- 테두리 스타일: 단색
아래로 스크롤하여 이미지에 다음 패딩을 추가합니다.
- 상단: 7px
- 오른쪽: 5px
- 하단: 7px
- 왼쪽: 5px
이중 테두리
이중 테두리를 그라데이션 배경과 함께 사용하면 놀라운 결과를 얻을 수도 있습니다. 구경하다:
콘텐츠 탭
이 예에서 사용한 그라데이션 배경색은 다음과 같습니다.
- 첫 번째 색상: rgba(224,43,32,0.61)
- 두 번째 색상: rgba(12,113,195,0.87)
- 그라디언트 유형: 방사형
- 방사형 방향: 중심
- 시작 위치: 71%
- 최종 위치: 93%
디자인 탭
계속해서 Border 하위 범주에 대해 다음 설정을 사용합니다.
- 테두리 사용: 예
- 테두리 색상: #f4f4f4(섹션 배경색과 일치)
- 테두리 너비: 8px
- 테두리 스타일: 더블
그리고 이미지의 상하좌우 패딩에 '10px'를 추가합니다.
삼각형 모서리
계속해서 점선 테두리와 함께 그라데이션 배경 옵션을 사용하여 테두리에 작은 모서리를 만들 수도 있습니다.
콘텐츠 탭
위에 표시된 이미지 테두리를 얻으려면 다음 그라데이션 배경 설정을 사용하십시오.
- 첫 번째 색상: rgba(163,103,6,0)
- 두 번째 색상: #e09900
- 그라디언트 유형: 방사형
- 방사형 방향: 중심
- 시작 위치: 97%
- 최종 위치: 97%
디자인 탭
디자인 탭에서 다음 테두리 설정도 필요합니다.
- 테두리 사용: 예
- 테두리 색상: #e09900
- 테두리 너비: 2px
- 테두리 스타일: 점선
마지막으로 위쪽, 아래쪽, 왼쪽 및 오른쪽 패딩에 대해 '8px'의 패딩이 필요합니다.
패턴 및 그라데이션 배경
스포트라이트에 넣고 싶은 마지막 가능성은 패턴과 그라디언트 배경을 동시에 사용하는 것입니다. 이를 통해 이미지의 모양과 느낌을 가지고 놀 수 있습니다.
장난꾸러기
이 테두리에는 이미지 자체에서도 사용되는 두 가지 색상의 그라데이션 배경이 포함됩니다. 배경 패턴도 추가하면 이미지가 웹 사이트에 좀 더 분위기를 줍니다.
콘텐츠 탭
마지막 예에서는 다음 그라데이션 배경 설정을 사용합니다.
- 첫 번째 색상: rgba(4,49,96,0.51)
- 두 번째 색상: rgba(119,74,15,0.51)
- 그라디언트 유형: 선형
- 기울기 방향: 180deg
- 시작 위치: 0%
- 최종 위치: 100%
디자인 탭
다음으로 패턴 배경도 추가합니다. 이 예제에서 사용한 패턴은 Toptal에서 가져온 것입니다. 모든 종류의 용도로 패턴을 사용할 수 있습니다. FAQ에 언급된 대로 코드 내에서 패턴을 크레딧으로 지정했는지 확인하세요. 패턴 배경을 추가했으면 다음 설정도 사용하십시오.
- 배경 이미지 크기: 표지
- 배경 이미지 위치: 중앙
- 배경 이미지 반복: 반복 없음
- 배경 이미지 혼합: 곱하기
마지막으로 해야 할 일은 이미지의 위쪽, 아래쪽, 오른쪽 및 왼쪽 패딩에 '12px'의 패딩을 추가하는 것입니다.
마지막 생각들
이 게시물에서 우리는 아름다운 이미지 테두리를 만드는 몇 가지 다른 방법을 보여 주었습니다. 이러한 옵션은 추가 CSS를 사용하지 않고 새로운 Divi 옵션으로 수행할 수 있는 작업에 대한 관점을 제공합니다. 질문이나 제안 사항이 있는 경우 아래 댓글 섹션에 댓글을 남겨주세요!
중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!
미스터 에스테틱의 특집 이미지 / Shutterstock.com