Divi용 무료 테두리 이미지 5개 다운로드
게시 됨: 2018-10-01자신이나 고객을 위해 새 웹사이트를 구축할 때 사용할 수 있는 추가 리소스가 있다는 것은 항상 좋은 일입니다. 그렇기 때문에 매주 새로운 레이아웃 팩을 받을 수 있도록 하고 있습니다. 그러나 "테두리 이미지" 또는 Divi 디자인 요소의 한 면 또는 다른 면을 따라 사용할 수 있는 이미지와 같이 유용할 수 있는 다른 리소스도 있습니다. 이러한 테두리 이미지와 함께 Divi의 내장 옵션을 사용하면 놀라운 결과를 얻을 수 있습니다. 이 게시물에서는 아래에서 무료로 다운로드할 수 있는 5가지 테두리 이미지를 제공했습니다. 이러한 테두리 이미지를 유리하게 사용하고 멋진 최종 결과를 만드는 방법을 설명하겠습니다.
가자!
시사
이 게시물 아래에서 더 다운로드할 수 있는 다양한 테두리 이미지를 살펴보겠습니다. 각 모양에 대해 위쪽, 아래쪽, 왼쪽 및 오른쪽의 4가지 버전이 있습니다. 이 이미지를 사용하면 아래 처음 4개의 이미지에 표시된 것과 똑같은 결과를 얻을 수 있습니다.
무료로 이미지 파일 다운로드
무료 테두리 이미지를 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.
무료로 다운로드
Divi 뉴스레터에 가입하시면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.
성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!
접근하다
- 5개의 테두리 이미지가 모두 포함된 폴더를 다운로드하고 압축을 풀면 위쪽 테두리, 아래쪽 테두리, 왼쪽 테두리 및 오른쪽 테두리의 4개 하위 폴더를 찾을 수 있습니다.
- 즉, 사용할 수 있는 총 20개의 이미지 파일이 있습니다.
- 이 게시물의 뒷부분에서 각 경계면과 일치하는 관련 설정을 찾을 수 있습니다.
- 그 위에 테두리 이미지를 그라디언트 오버레이와 결합할 수 있습니다.
- 이 색상 오버레이는 이미지를 원하는 만큼 생생하거나 미묘하게 보이게 하는 데 도움이 됩니다.
- 이 테두리 이미지는 상업적 목적으로도 제한 없이 자유롭게 사용할 수 있습니다.
전체 디자인 만들기
새 섹션 추가
간격
테두리 이미지를 표시하는 데 사용한 전체 디자인을 만드는 것으로 시작하겠습니다. 새 페이지 또는 기존 페이지를 열고 새 일반 섹션을 추가하고 사용자 정의 패딩을 추가하십시오.
- 상단 패딩: 300px
- 하단 패딩: 300px
새 행 추가
열 구조
다음 열 구조를 사용하여 섹션에 새 행을 계속 추가합니다.
사이징
아직 모듈을 추가하지 않고 행 설정을 열고 크기 조정 설정으로 이동하여 행을 전체 너비로 만듭니다.
- 이 행을 전체 너비로 만들기: 예
열 1에 제목 텍스트 모듈 추가
H2 콘텐츠 상자 추가
몇 가지 모듈을 추가해 봅시다! 필요한 첫 번째 모듈은 텍스트 모듈입니다. 첫 번째 열에 하나를 추가하고 선택한 H2 사본을 콘텐츠 상자에 추가합니다.
제목 텍스트 설정
그런 다음 디자인 탭에서 H2 텍스트 설정을 일부 변경합니다.
- 제목 2 글꼴: Abril Fatface
- 제목 2 텍스트 크기: 80px(데스크톱), 70px(태블릿), 50px(전화)
간격
이 텍스트 모듈의 상단에 여백을 추가하여 계속하십시오.
- 상단 여백: 150px
열 1에 링크 텍스트 모듈 추가
콘텐츠 상자에 링크 추가
방금 추가한 제목 텍스트 모듈 바로 아래에 새 텍스트 모듈을 추가합니다. 이 텍스트 모듈을 버튼으로 사용하고 있으므로 CTA에 대한 링크를 추가해야 합니다.
링크 텍스트 설정
그런 다음 디자인 탭에서 링크 텍스트 설정을 변경합니다.
- 링크 글꼴 두께: 매우 굵게
- 링크 글꼴 스타일: 대문자
- 링크 텍스트 색상: #000000
- 링크 텍스트 크기: 21px
간격
이 텍스트 모듈과 이전 모듈 사이에 공간을 만들기 위해 상단 여백을 추가합니다.
- 상단 여백: 100px
국경
마지막으로 링크 텍스트 모듈에 미묘한 하단 테두리를 추가합니다.
- 하단 테두리 너비: 1px
- 하단 테두리 색상: #333333
2열에 설명 텍스트 모듈 추가
텍스트 설정
두 번째 열에는 설명 텍스트 모듈만 필요합니다. 콘텐츠 상자에 콘텐츠를 추가한 후 다음 텍스트 설정을 적용합니다.
- 텍스트 크기: 22px(데스크톱), 20px(태블릿), 18px(전화)
- 텍스트 줄 높이: 2.6em
- 텍스트 방향: 양쪽 맞춤
사이징
크기 조정 설정을 다른 화면 크기와도 일치시키십시오.
- 너비: 82%(데스크톱), 100%(태블릿 및 휴대폰)
간격
마지막으로 위쪽 및 아래쪽 여백을 추가합니다.
- 상단 여백: 100px
- 하단 여백: 100px
테두리 모양 추가
왼쪽 테두리 배경 설정
전체 디자인을 완료했으므로 이제 테두리 이미지를 추가할 수 있습니다! 왼쪽 테두리부터 시작하겠습니다. '왼쪽 테두리' 폴더에서 원하는 테두리 이미지를 찾아 섹션 배경 이미지로 업로드하세요. 그런 다음 다음 배경 이미지 설정을 적용합니다.
- 배경 이미지 크기: 실제 크기
- 배경 이미지 위치: 중앙 왼쪽
- 배경 이미지 반복: 반복 없음
오른쪽 테두리 배경 설정
또는 '오른쪽 테두리' 폴더에서 원하는 테두리 이미지를 찾아 다음 설정을 사용하여 섹션 배경으로 추가할 수 있습니다.
- 배경 이미지 크기: 실제 크기
- 배경 이미지 위치: 중앙 오른쪽
- 배경 이미지 반복: 반복 없음
상단 테두리 배경 설정
위쪽 테두리 이미지도 마찬가지지만 대신 다음 배경 설정을 사용합니다.
- 배경 이미지 크기: 실제 크기
- 배경 이미지 위치: 상단 중앙
- 배경 이미지 반복: 반복 없음
하단 테두리 배경 설정
또는 마지막으로 '하단 테두리' 폴더에서 하단 테두리 이미지를 찾아 다음 섹션 배경 설정과 결합할 수 있습니다.
- 배경 이미지 크기: 실제 크기
- 배경 이미지 위치: 하단 중앙
- 배경 이미지 반복: 반복 없음
반투명 오버레이를 사용하여 색상 혼합
포함된 각 테두리 모양에 대해 색상 오버레이도 추가할 수 있습니다. 이 오버레이를 사용하면 테두리 이미지를 더 섬세하게 보이게 할 수 있습니다. 오버레이를 추가하려면 섹션 설정으로 이동하여 테두리 배경 이미지 위에 그라데이션 배경을 추가하세요.
- 색상 1: #ffffff
- 색상 2: rgba(255,255,255,0.36)
- 기울기 방향: 141deg
- 배경 이미지 위에 그라디언트 배치: 예
시사
이제 모든 단계를 거쳤으므로 이러한 자유 경계 이미지를 사용하여 얻을 수 있는 몇 가지 잠재적인 디자인을 최종적으로 살펴보겠습니다.
마지막 생각들
이 게시물에서는 무료로 다운로드할 수 있는 5가지 테두리 이미지를 공유했습니다. 작업 중인 모든 웹사이트에 이러한 테두리 이미지를 제한 없이 사용할 수 있습니다. 모두 사용해 보고 멋진 디자인을 만들어 보시기 바랍니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!