CTA가 시각적으로 더 매력적 일수록 전환율이 높아집니다. CTA를 디자인하는 방법은 여러 가지가 있지만이 기사에서는 반투명 이미지와 열이 겹치는 멋진 CTA 열 템플릿을 만드는 방법을 보여 드리겠습니다. 아래의 다운로드 폴더에서 반투명 이미지를 찾을 수 있지만 다른 이미지를 자유롭게 사용하십시오. 또한 무료로 JSON 파일을 다운로드 할 수 있습니다!
가자.
미리보기
튜토리얼을 시작하기 전에 다양한 화면 크기에서 어떻게 보이는지 간단히 살펴 보겠습니다.
재현을 시작합시다!
새 섹션 추가
문맥
새 페이지를 만들거나 기존 페이지에 새 일반 섹션을 추가하여 시작하십시오. 그런 다음 설정 섹션으로 이동하여 그라데이션 배경을 추가합니다.
- 배경 : 그라디언트
- 그라디언트 색상 그라디언트 : 매우 밝은 회색 #efefef
- 배경색 2 : 흰색 #ffffff
- 그라디언트 유형 : 방사형
- 레이디 얼 방향 : 중심
- 시작 위치 : 52 %
- 최종 게재 순위 : 50 %
간격
디자인 탭으로 전환하고 간격 설정에서 채우기를 조정합니다.
- 상단 및 하단 패딩
- 사무실 : 0vw
- 스타킹 장식
- 태블릿 + 전화 : 70vw
새 행 추가
기둥 구조
다음 열 구조를 사용하여 새 행을 계속 추가하십시오.
크기 조정
그런 다음 선의 너비와 최대 너비를 조정하십시오.
- 너비 : 100 %
- 최대 너비 100 %
텍스트 모듈 추가
H2 및 텍스트 컨텐츠 추가
이제 모듈을 추가할 차례입니다! 먼저 텍스트 모듈을 추가하고 일부를 삽입하십시오. 내용 H2 및 원하는 단락.
텍스트
디자인 탭으로 전환하고 다음과 같이 텍스트 스타일을 지정합니다.
- 글꼴 텍스트 : Open Sans
- 텍스트의 정렬 : 중심
- 텍스트 색상 : 녹색 #5bba1b
- 텍스트 크기 :
- 사무실 : 1.2vw
- 태블릿 : 2.8vw
- 전화 번호 : 3.6vw
- 텍스트 문자의 간격 : 0.2vw
- 텍스트 줄의 높이 : 1.8em
제목 2 텍스트
단락 텍스트의 스타일을 지정한 후 텍스트 H2의 스타일도 지정하십시오.
- 섹션 : H2
- H2 폰트 무게 : Doppio One
- H2 텍스트 정렬 : 가운데
- 텍스트 색상 H2 : #3d3d3d
- H2 텍스트 크기 :
- 사무실 : 4.4vw
- 태블릿 : 5.9vw
- 전화 번호 : 6.9vw
간격
그리고 상단에 작은 패딩을 추가하십시오.
- 상단 패딩 : 212px
분류 모듈 추가
시계
텍스트 모듈 아래에 분할 모듈을 추가하고 가시성을 "예"로 설정하십시오.
- 가시성 : 예
라인
그런 다음 구분 기호의 색을 변경하십시오.
- 선 색상 : 진한 회색 #545454
크기 조정
이제 구분 기호의 크기가 작아 보이도록 조정하십시오.
- 분리기 무게 : 4px
- 너비 : 9 %
- 모듈의 정렬 : 중심
간격
음수 위쪽 여백을 추가하십시오.
- 상단 마진 :
- 사무실 : -40px
- 태블릿 + 전화 : -15px
새 행 추가
기둥 구조
동일한 크기의 열 XNUMX 개가있는 새 행을 계속 추가합니다. 이것이 CTA 컬럼 디자인의 기초가 될 것입니다.
문맥
모듈을 추가하기 전에 선 매개 변수의 배경에 그라디언트를 추가하십시오.
- 배경 : 그라디언트
- 1 배경색 그라데이션 : 흰색 #ffffff
- 그라데이션 배경색 2 : 투명
- 그라디언트 유형 : 방사형
- 레디얼 스티어링 센터
- 시작 위치 : 42 %
- 최종 게재 순위 : 50 %
크기 조정
이제 선의 크기를 조정하십시오.
- 너비 : 100 %
- 최대 너비 : 100 %
간격
그런 다음 간격 설정으로 이동하여 사용자 지정 패딩 값을 추가합니다.
- 상단 장식품 : 22vw
- 하단 패딩 : 10vw
- 좌우 패딩 : 10vw
1 열 설정
문맥
1 열을 열고 그라데이션 배경을 추가하여 계속하십시오.
- 배경 : 그라디언트
- 그라데이션 배경색 : 파란색 #2a4eed
- 그라데이션 배경색 2 : 밝은 파란색 #91f5f7
- 그라디언트 유형 : 선형
- 기울기 방향 : 38deg
- 시작 위치 : 23 %
경계
그런 다음 테두리 설정에서 열의 둥근 모서리를 정의하십시오.
- 둥근 모서리 : 모든 모서리에서 2vw
그림자 상자
미묘한 상자 그늘도 추가하십시오.
- 상자 그림자 : 두 번째 옵션
- 상자 그림자 가로 위치 : 6px
- 상자 그림자 세로 위치 : -10px
- 박스 그림자 흐림 효과 : 50px
오버 플로우
열의 오버플로도 표시되는지 확인하십시오.
- 가로 및 세로 오버플로 : 표시
2 열 설정
문맥
두 번째 열로 이동하여 다음 그라데이션 배경을 추가하십시오.
- 배경 : 그라디언트
- 배경 그라디언트 색상 하나 : #1ba038
- 두 가지 색상 배경 그라디언트 : #c6f727
- 그라디언트 유형 : 선형
- 기울기 방향 : 38deg
- 시작 위치 : 23 %
경계
또한 열에 테두리 반경을 추가하십시오.
- 둥근 모서리 : 네 모서리의 2vw
그림자 상자
미묘한 상자 그늘.
- 상자 그림자 : 두 번째 옵션
- 상자 그림자 가로 위치 : 6px
- 상자 그림자 세로 위치 : -10px
- 박스 그림자 흐림 효과 : 50px
변신 로봇
이 열은 다른 열보다 약간 높습니다. 이 효과를 만들기 위해 2 열의 변환 변환 설정을 조정합니다.
- 변압기 번역 :
- 사무실 : -8vw, y 축
- 태블릿 + 전화 : 30vw, Y 축
오버 플로우
또한이 열의 오버플로를 표시하십시오.
- 가로 및 세로 오버플로 : 표시
3 열 설정
문맥
마지막 열과 마지막 열로 넘어 갑시다! 그라데이션 배경을 추가하십시오.
- 배경 : 그라디언트
- 그라데이션 배경색 하나 : #f0562c
- 두 가지 색상 배경 그라데이션 : #f1a526
- 그라디언트 유형 : 선형
- 기울기 방향 : 38deg
- 시작 위치 : 23 %
경계
디자인 탭으로 전환하고 각 모서리에 테두리 반경을 추가합니다.
- 둥근 모서리 : 모든 모서리에 2vw.
그림자 상자
상자 그늘도 추가하십시오.
- 상자 그림자 : 두 번째 옵션
- 상자 그림자 가로 위치 : 6px
- 상자 그림자 세로 위치 : -10px
- 박스 그림자 흐림 효과 : 50px
변신 로봇
더 작은 화면 크기에서는 사용자 지정 변환 변환 값을 사용하여 열의 위치를 변경해야합니다.
- 변압기 번역 :
- 태블릿 + 전화 : 60vw
오버 플로우
마지막으로 오버플로 설정을 조정하십시오.
- 가로 및 세로 오버플로 : 표시
이미지 모듈 추가
컷 아웃 반투명 이미지 가져 오기
열 매개 변수를 모두 만들었 으면 이제 모듈을 추가 할 차례입니다. 열 1에 이미지 모듈을 추가하고 선택한 반투명 이미지를 업로드합니다. 이 기사의 시작 부분에서 다운로드 할 수 있었던 압축 폴더에서 우리가 사용한 이미지를 찾을 수 있습니다.
크기 조정
모듈을 전체 너비로 만듭니다.
- 전폭 모드로 전환 : 예
간격
그런 다음 사용자 정의 여백 및 채우기 값을 추가하십시오.
- 상단 마진 :
- 사무실 : -11vw
- 태블릿 + 전화 : -24vw
- 패딩 왼쪽과 오른쪽 :
- 사무실 : 5vw
- 태블릿 + 전화 : 20vw
사다리를 호버로 전환
변환 설정에서 배율 변환 옵션을 사용하여 이미지에 미묘한 호버 효과를 추가합니다.
- 호버에서 변형 스케일 : 두 축에서 120 %.
Z-색인
이미지가 열 상단에 나타나도록하려면 고급 탭에서 z 인덱스 값을 늘립니다.
- Z- 색인 : 1
이미지 모듈 복제 및 드래그
이제 이미지 모듈을 두 번 복제하고 나머지 두 열에 복제본을 배치합니다. 이 프로세스는 유선 모드에서 더 쉽습니다.
- 이미지 모듈을 두 번 복제하여 시작
- 그런 다음 새 이미지 모듈을 2 및 3 열로 끕니다.
- 다른 이미지 다운로드
텍스트 모듈 추가
H3 콘텐츠 추가
열 1의 이미지 아래에 텍스트 모듈을 추가하고 일부를 삽입하십시오. 내용 당신이 선택한 H3.
제목 3 텍스트
디자인 탭으로 전환하고 H3 텍스트 설정에 스타일을 적용합니다.
- 텍스트 제목 : H3
- H3 폰트 : Doppio One
- H3 폰트 무게 : 굵게
- H3 정렬 : 중심
- H3 텍스트 색상 : 흰색 #ffffff
- H3 텍스트 크기 :
- 사무실 : 1.8vw
- 태블릿 : 5vw
- 전화 번호 : 6vw
텍스트 모듈 복제 및 드래그
텍스트 모듈을 두 번 복제하고 나머지 두 열에 복제본을 배치하십시오.
- 텍스트 모듈을 두 번 복제하여 시작하십시오.
- 그런 다음 2 열과 3 열의 그림 모듈 아래로 드래그합니다.
- 변경 내용 각각의 새로운 텍스트 모듈에서
텍스트 모듈 추가
콘텐츠 추가
제목 모듈 아래에 새 텍스트 모듈을 추가하십시오. 콘텐츠 영역에 단락 콘텐츠를 추가합니다.
텍스트
이제 다음과 같이 텍스트 스타일을 지정하십시오.
- 글꼴 텍스트 : Open Sans
- 텍스트 색상 : 흰색 #ffffff
- 텍스트 크기 :
- 사무실 : 0.6vw
- 태블릿 : 2vw
- 전화 번호 : 2.8vw
- 텍스트 줄의 높이 : 2.2em
간격
텍스트를 가운데에 맞추려면 다음과 같이 모듈의 간격을 조정하십시오.
- 낮은 마진 :
- 사무실 : 5vw
- 태블릿 + 전화 : 10vw
- 패딩 좌우
- 사무실 : 5vw
- 태블릿 + 전화 : 14vw
텍스트 모듈 복제 및 드래그
텍스트 모듈을 두 번 복제하고 복제본을 나머지 두 열로 끕니다.
- 텍스트 모듈을 두 번 복제하여 시작하십시오.
- 그런 다음 2 및 3 열에 복제본을 배치하십시오.
- 각 사본의 내용 변경
버튼 모듈 추가
콘텐츠 추가
마지막 모듈로 가자! 선택한 사본을 사용하여 1 열에 버튼 모듈을 추가하십시오.
링크 추가
모듈의 링크 옵션에 링크를 삽입하십시오.
조정
이제 버튼 모듈을 정렬하십시오.
- 정렬 : 중심
버튼 스타일
다음과 같이 버튼을 호출하십시오.
- 버튼 텍스트의 크기 :
- 사무실 : 1vw
- 태블릿 : 2vw
- 전화 번호 : 3vw
- 버튼 텍스트 색상 : 밝은 파란색 #2a4eed
- 버튼 배경색 : 흰색 #ffffff
- 버튼 테두리의 반경 : 50vw
- 버튼 글꼴 : Double One
- 글꼴 무게 : 굵게
- 버튼 색상 : 밝은 파란색 #2a4eed
간격
간격 설정에서 사용자 정의 여백 및 패딩 값을 추가하여 버튼 모양을 만들고 하단에 겹침을 만듭니다.
- 낮은 마진 :
- 사무실 : -1.7vw
- 태블릿 : -4vw
- 전화 번호 : -6vw
- 실내 장식품 상단 및 하단 :
- 사무실 : 1vw
- 태블릿 + 전화 : 3vw
- 패딩 좌우
- 사무실 : 4vw
- 태블릿 + 전화 : 10vw
그림자 상자
마지막으로 버튼에 미묘한 상자 음영을 추가하십시오.
- 상자 그림자 : 첫 번째 옵션
- 상자 그림자의 가로 위치 : 0px
- 상자 세로 위치의 그림자 : 2px
- 박스 그림자 흐림 효과 : 50px
버튼 모듈 복제 및 드래그
이전 모듈과 마찬가지로 버튼을 두 번 복제하고 사본의 나머지 두 열에 복제본을 배치하십시오.
- 버튼 모듈을 두 번 복제
- 2 및 3 열에 복제본 배치
버튼 2 아이콘 텍스트 및 색상
2 열에서 버튼 및 버튼 모듈 아이콘 색상을 변경합니다.
- 버튼 텍스트 색상 : 녹색 # 1ba038
- 아이콘 색상 : # 1ba038
버튼 3 아이콘 텍스트 및 색상
마지막 열의 버튼으로 동일한 작업을 수행하면 완료됩니다!
- 버튼의 텍스트 색상 : 주황색 #f0562c
- 아이콘 색상 : # f0562c
끝내기
이 기사에서는 반투명 이미지를 사용하여 멋진 CTA 컬럼 디자인을 만드는 방법을 보여주었습니다. 열 오버플로 설정을 사용했습니다. Divi 이미지와 버튼이 매끄럽게 겹칠 수 있습니다. 다음 프로젝트에서 이 디자인을 사용해 보세요. Divi 의견 섹션에서 어떻게 진행되는지 알려주십시오!
