Divi용 무료 다목적 판매 배너 디자인 다운로드

다용도 판매 배너가 있으면 프로모션이 대세인 중요한 시기에 확실히 도움이 되고 시간을 절약할 수 있습니다. 이것이 바로 이 Divi용 다목적 판매 배너를 무료 다운로드로 제공하는 이유입니다! 이 판매 배너는 몇 가지 텍스트와 배경 이미지를 약간만 조정하면 필요에 맞게 쉽게 사용자 지정할 수 있습니다. Divi에서 판매 배너를 디자인하는 것은 웹에서 종종 약간 거칠게 보이는 이미지 배너에 만족할 필요가 없을 만큼 충분히 쉽습니다. 그래서 무료 다운로드 외에도 처음부터 Divi에서 판매 배너를 디자인하는 방법을 보여 드리겠습니다.

시작하자!

포함 사항

다운로드에 포함된 판매 배너 디자인을 살펴보세요.

무료로 판매 배너 디자인 다운로드

판매 배너 디자인을 무료로 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하시면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

Divi 라이브러리에 레이아웃 로드

파일을 다운로드한 후 압축을 풉니다. "sales-banner-design.json"이라는 파일이 포함되어 있음을 알 수 있습니다. 이것은 Divi 라이브러리에 로드할 것입니다. 이제 WordPress 대시보드로 이동하여 Divi > Divi 라이브러리로 이동합니다. 그런 다음 페이지 상단의 가져오기 버튼을 클릭합니다. 이식성 팝업 창에서 가져오기 탭을 선택하고 sales-banner-design.json 파일을 선택합니다. 그런 다음 Divi Builder 레이아웃 가져오기 버튼을 클릭합니다.

이제 레이아웃을 페이지로 가져오려면 새 페이지를 만들고 시각적 빌더를 배포하기만 하면 됩니다. 그런 다음 "미리 만들어진 레이아웃 선택"을 선택합니다. 라이브러리에서 로드 팝업에서 "저장된 레이아웃" 탭을 선택한 다음 목록에서 판매 배너 디자인 레이아웃을 클릭합니다. 그게 다야!

Divi에서 처음부터 판매 배너를 만드는 방법

섹션 배경 추가

시작하려면 새 페이지를 만드세요. 페이지에 제목을 지정한 후 시각적 빌더를 배포하고 "처음부터 빌드" 옵션을 선택합니다. 그런 다음 한 열 행이 있는 새 섹션을 추가합니다.

행에 모듈을 추가하기 전에 섹션에 배경 그라디언트 색상을 지정합니다(이 시점에서 색상은 중요하지 않습니다. 판매에 사용할 모든 흰색 디자인 요소를 보려면 배경색만 있으면 됩니다. 배너.)

판매 배너의 행 사용자 정의

모듈을 행에 추가하기 전에 먼저 행에 사용자 정의 너비를 700px로 지정하고 행이 아래에 추가할 다른 행 위에 잘 놓이도록 상단 또는 하단 간격을 제거하겠습니다. 행 설정으로 이동하여 다음을 업데이트합니다.

맞춤 너비: 700px
거터 폭: 1
사용자 정의 여백: 0px 상단, 0px, 하단
맞춤 패딩: 위쪽 0px, 아래쪽 0px

이제 행을 두 번 복제하여 총 3개의 동일한 행이 되도록 합니다. 이것들은 우리의 판매 배너를 만드는 데 사용됩니다.

인접 텍스트가 있는 상단 테두리 프레임 추가

판매 배너를 만들기 위해 왼쪽에 텍스트가 있는 상단 테두리로 시작합니다. 이를 위해 우리는 구분자 모듈과 텍스트 모듈을 사용할 것입니다. 먼저 새 텍스트 모듈을 만들고 콘텐츠 상자에 몇 단어의 콘텐츠를 추가합니다.

내용: "온라인 전용"

디자인 탭으로 이동하여 다음을 업데이트합니다.

텍스트 글꼴 두께: 굵게
텍스트 글꼴 스타일: TT
텍스트 텍스트 색상: rgba(255,255,255,0.9)
텍스트 텍스트 크기: 15px
텍스트 문자 간격: 2px
텍스트 줄 높이: 1em
너비: 22%(데스크톱), 25%(태블릿), 40%(스마트폰)
모듈 정렬: 왼쪽
맞춤 여백: 위쪽 0px, 아래쪽 -15px
맞춤 패딩: 위쪽 0px, 아래쪽 0px

이 사용자 지정 여백은 구분선이 아직 추가되지 않았기 때문에 다소 시기상조이지만 곧 추가될 구분선에 완벽하게 인접하도록 텍스트를 정렬해야 합니다.

이제 같은 행의 텍스트 모듈 아래에 구분선 모듈을 추가합니다. 그런 다음 다음과 같이 구분선 설정을 업데이트합니다.

색상: rgba(255,255,255,0.9)
디바이더 위치: 하단
디바이더 무게: 15px
높이: 15px
너비: 78%(데스크톱), 75%(태블릿), 60%(스마트폰)
모듈 정렬: 오른쪽
맞춤 여백: 위쪽 0px, 아래쪽 0px
맞춤 패딩: 위쪽 0px, 아래쪽 0px

물론 필요에 따라 디자인을 사용자 지정할 때 텍스트 모듈의 너비에 따라 테두리 너비를 조정해야 합니다.

다음으로 디바이더를 다음에 디자인할 행의 오른쪽 테두리에 연결하기 위해 디바이더 모듈을 하나 더 추가해야 합니다.

이를 위해 분배기 모듈을 복제하고 다음을 업데이트하십시오.

너비: 15px
맞춤 여백: -1px 하단

인접 텍스트가 있는 하단 테두리 프레임 추가

아래쪽 테두리 프레임을 만들기 위해 위쪽 행의 위쪽 테두리 프레임에서 만든 것과 동일한 요소를 사용할 수 있습니다. 이번에는 15px 너비의 디바이더 모듈부터 시작하겠습니다. 계속해서 15px 디바이더 모듈을 복사하여 세 번째(하단) 행에 붙여넣습니다. 그런 다음 오른쪽 대신 왼쪽으로 모듈 정렬을 업데이트합니다.

그런 다음 맨 위 행에서 더 긴 디바이더 모듈을 복사하여 맨 아래 행의 15px 디바이더 아래에 붙여넣습니다. 그런 다음 다음을 조정합니다.

너비: 75%(데스크톱), 70%(태블릿), 50%(스마트폰)
모듈 정렬: 왼쪽

마지막으로 맨 위 행의 텍스트 모듈을 복사하고 맨 아래 행의 두 구분 모듈 아래에 붙여넣습니다. 그런 다음 다음을 업데이트합니다.

내용: “11월 1일부터 시작”
너비: 25%(데스크톱), 30%(태블릿), 50%(스마트폰)
모듈 정렬: 오른쪽
사용자 정의 여백: -15px 상단, 0px 하단
맞춤 패딩: 15px 왼쪽

중간 행에 텍스트 모듈 추가

이제 주요 판매 배너 텍스트를 포함할 텍스트 모듈을 중간 행에 추가할 준비가 되었습니다. 3개의 텍스트 모듈을 서로 쌓을 것입니다. 계속해서 첫 번째 텍스트 모듈을 중간 행에 추가하십시오.

그런 다음 다음을 업데이트합니다.

내용: "전부 20% 할인"
배경색: rgba(255,255,255,0.9)

텍스트 글꼴 두께: 반 굵게
텍스트 글꼴 스타일: TT
텍스트 텍스트 색상: #000000
텍스트 텍스트 크기: 34px(데스크톱), 20px(스마트폰)
텍스트 문자 간격: 2px
텍스트 줄 높이: 1em
텍스트 방향: 중앙
맞춤 패딩: 상단 2vw, 하단 2vw, 왼쪽 5vw, 오른쪽 5vw

텍스트가 섹션 배경과 혼합되도록 하는 화면 혼합 모드 효과를 최대화하려면 흰색 배경 위에 텍스트를 검정색으로 지정하는 것이 중요합니다. 잠시 후 행에 화면 혼합 모드를 추가할 것입니다.

이제 다음 텍스트 모듈의 디자인을 시작하기 위해 텍스트 모듈을 복제하십시오. 그런 다음 다음 html로 콘텐츠를 업데이트합니다.

<h2 style="border: 7px solid #000000;">Fall Sale</h2>

인라인 스타일은 단순히 제목 텍스트 주위에 검은색 테두리를 추가합니다. 다시 말하지만 검은색은 화면 혼합 모드에서 작동하여 텍스트와 함께 섹션 배경을 노출합니다.

그런 다음 다음을 업데이트합니다.

제목 2 글꼴 두께: 굵게
제목 2 글꼴 스타일: TT
제목 2 텍스트 색상: #000000
제목 2 텍스트 크기: 100px(데스크톱), 80px(태블릿), 60px(스마트폰)
제목 2 글자 간격: 2px
맞춤 여백: 0px 상단
맞춤 패딩: 위쪽 0px, 아래쪽 0px

마지막 텍스트 모듈의 경우 이 중간 행의 첫 번째 텍스트 모듈을 복제하고 두 번째 텍스트 모듈 아래에 붙여넣습니다.

그런 다음 다음을 업데이트합니다.

내용: "지금 쇼핑하기"
텍스트 글꼴 스타일: TT, U(밑줄)
맞춤 여백: 0px 상단
맞춤 패딩: 상단 1vw, 하단 2vw

가운데 줄 스타일링

이 디자인의 마지막 단계는 중간 행에 테두리를 추가하고 화면 혼합 모드 효과를 추가하는 것입니다. 이렇게 하려면 중간 행 설정을 열고 다음을 업데이트하십시오.

맞춤 패딩: 왼쪽 15px, 오른쪽 15px
오른쪽 테두리 너비: 15px
오른쪽 테두리 색상: rgba(255,255,255,0.9)
왼쪽 테두리 너비: 15px
왼쪽 테두리 색상: rgba(255,255,255,0.9)
혼합 모드: 화면

화면 혼합 모드를 사용하면 텍스트가 배경 이미지를 혼합하여 텍스트를 통해 멋진 효과를 볼 수 있습니다!

최종 결과를 확인하세요.

판매 배너에 링크 추가

이것은 판매 배너이므로 배너에서 클릭 가능한 공간을 최대화하여 전환을 늘리고 싶을 것입니다. 이렇게 하려면 전체 중간 행에 링크를 추가할 수 있습니다. 중간 행 설정을 열고 행 링크 URL을 입력하여 원하는 페이지로 리디렉션하기만 하면 됩니다.

독특한 디자인을 위해 다른 섹션 배경 추가하기

이 새로운 판매 배너 디자인을 사용하면 배경 이미지를 쉽게 업데이트하여 독특한 디자인을 만들 수 있습니다.

다음은 몇 가지 예입니다.

마지막 생각들

이 판매 배너 디자인이 일년 내내 필요한 모든 웹 프로모션에 유용하기를 바랍니다. 디자인은 완전히 새로운 모양을 위해 새로운 텍스트와 섹션 배경 이미지로 쉽게 업데이트할 수 있는 다목적 판매 배너 역할을 하도록 제작되었습니다. 비디오 배경도 추가할 수 있습니다!

댓글로 여러분의 의견을 기다리겠습니다.

건배!