Divi에서 효과적인 CTA로 초청 연사 섹션을 디자인하는 방법

팟캐스트가 있든 WordCamp(또는 연사 행사)를 주최하든 상관없이 웹사이트에 초청 연사 섹션을 두는 것은 항상 좋은 생각입니다. 평가와 마찬가지로 초청 연사를 소개하는 것은 가치를 홍보하고 청중과의 신뢰를 구축하는 효과적인 방법입니다. 초청 연사 섹션은 다음 이벤트나 에피소드의 새로운 후보자를 소개하는 핵심 장소이기도 합니다. 이 튜토리얼은 우아한 패션으로 연사를 선보일 뿐만 아니라 새로운 연사가 효과적인 클릭 유도문안을 적용하도록 권장하는 초청 연사 섹션을 디자인하는 방법을 보여줍니다.

그러나 시작하기 전에 최종 디자인을 살짝 엿볼 수 있습니다.

엿보기

여기에서 제가 보여드릴 보너스 호버 효과도 있습니다.

시작하자!

YouTube 채널 구독

기본 구조 및 내용 구축

아직 하지 않았다면 새 페이지를 만들고 Divi Builder를 배포하여 프런트 엔드에서 빌드하십시오.

하나의 열 행이 있는 새 섹션 을 추가합니다.

다음 콘텐츠가 있는 행에 텍스트 모듈 을 추가합니다.

<h2>Guest Speaker</h2>

그런 다음 텍스트 모듈 바로 아래에 구분선 모듈을 추가 합니다.

이제 초청 연사를 수용 할 4열 구조 의 새 행 을 추가하겠습니다.

행의 첫 번째 열에 사람 모듈을 추가합니다.

다음과 같이 Person 모듈 콘텐츠를 업데이트합니다.

이름: [공백]
Facebook 프로필 URL: [지금은 "#" 추가]
Twitter 프로필 URL: [지금은 "#" 추가]
LinkedIn 프로필 URL: [지금은 "#" 추가]

설명에 다음을 추가합니다.

<h4>James <strong>Smith</strong></h4>
<hr style="width: 90px; float: left;">

참고: hr 태그는 너비가 90px이고 왼쪽으로 떠 있는 일부 인라인 스타일이 있는 구분선을 생성합니다. 성을 둘러싸고 있는 강력한 태그는 독특한 디자인 요소를 과감하게 만듭니다.

이제 콘텐츠가 준비되었으므로 사람 모듈 설정을 저장합니다.

방금 만든 사람 모듈을 복사하여 나머지 열 각각에 붙여넣어 4개의 열 각각에 동일한 사람 모듈이 있도록 합니다. 복사하여 붙여넣으려면 오른쪽 클릭 메뉴 옵션이나 cmd+c cmd+v(mac) 또는 ctrl+c ctrl+v(win) 단축키를 사용할 수 있습니다.

4열에서 사람 모듈의 설정을 열고 다음만 포함하도록 콘텐츠를 업데이트합니다.

이름: "이것이 당신일 수 있습니다!"
설명: "아래 버튼을 사용하여 이벤트에서 연설을 신청하세요."

설정을 저장합니다.

그런 다음 4열의 person 모듈 바로 아래에 버튼 모듈을 추가하고 버튼 텍스트 콘텐츠를 "지금 적용"으로 업데이트합니다. 그리고 설정을 저장합니다.

열 1-3의 처음 세 사람 모듈로 돌아가 각 초청 연사 초상화에 대한 이미지를 추가합니다. 높이와 너비 치수가 동일한 동일한 크기이고 모든 브라우저 크기(이상적으로는 600px x 600px)에서 열 너비를 설명할 수 있을 만큼 충분히 큰지 확인합니다.

이 시점에서 Guest Speak 레이아웃은 다음과 같아야 합니다.

게스트 스피커 레이아웃 스타일링

섹션 스타일링

섹션 설정을 열고 다음을 업데이트합니다.

배경 이미지: [Agent Layout에서 하나를 사용하고 있습니다.]

배경 그라데이션 왼쪽 색상: #293039
배경 그라데이션 오른쪽 색상: rgba(41,48,57,0.89)
상단 구분선 스타일: 스크린샷 참조
상단 디바이더 색상: #293039
상단 분배기 높이: 30vw

행 너비 변경

두 행의 너비가 같도록 하려면 다중 선택을 사용하여 두 행을 모두 선택하고 설정 아이콘 중 하나를 클릭하여 요소 설정을 엽니다.

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

사용자 정의 너비: 80%

이제 두 행 모두 동일한 사용자 정의 너비를 갖습니다.

헤드라인 스타일링

섹션 제목 "Guest Speakers"가 포함된 텍스트 모듈의 설정을 열고 다음을 업데이트합니다.

제목 2 글꼴: 몬세라트
제목 2 글꼴 두께: 굵게
제목 2 글꼴 스타일: TT
제목 2 텍스트 정렬: 오른쪽
제목 2 텍스트 색상: #74bf46
제목 2 텍스트 크기: 70px(데스크톱), 50px(스마트폰)

설정을 저장합니다.

이제 Divider 설정을 열고 다음을 업데이트하십시오.

색상: #ffffff
높이: 0px
너비: 90px
모듈 정렬: 오른쪽

Person 모듈 스타일 지정

모든 사람 모듈에 동일한 초기 스타일을 지정하고 싶기 때문에 다중 선택을 사용하여 각 모듈을 선택한 다음 모듈 중 하나의 설정 아이콘을 클릭하여 요소 설정 모달을 배포합니다.

다음 요소 설정을 업데이트합니다.

아이콘 색상: #74bf46
제목 글꼴: Montserrat
제목 글꼴 두께: Light
제목 텍스트 색상: #ffffff
제목 텍스트 크기: 20px
본문 글꼴: 몬세라트
본문 색상: #ffffff
본문 문자 간격: 2px
바디 라인 높이: 1.8em

CTA 사람 모듈 스타일 지정

우리는 이 사람 모듈을 연설 참여를 신청하기 위해 새로운 초청 연사를 끌어들이는 행동 촉구로 사용하고 있습니다. 따라서 빈 공간을 표시하는 창의적인 방법으로 기본 이미지(실루엣)를 활성 상태로 둘 수 있습니다. 그러나 디자인을 완성하기 위해 추가해야 할 몇 가지 스타일 조정이 있습니다. 4열의 person 모듈 설정을 열고 다음을 업데이트합니다.

이미지 테두리 너비: 18px
이미지 테두리 색상: #d2d2d2
이미지 불투명도: 50%

제목 글꼴 두께: 굵게
제목 줄 높이: 1.5em

이제 버튼의 스타일을 지정하는 일만 남았습니다. 버튼 모듈 설정을 열고 다음을 업데이트하십시오.

버튼 텍스트 색상: #293039
버튼 배경색: #74bf46
버튼 테두리 반경: 50px
버튼 글꼴: 몬세라트
글꼴 두께: 굵게

이제 최종 결과를 살펴보겠습니다.

보너스 팁: 이미지 줌 호버 효과

Divi에서 사용할 수 있는 모든 내장 호버 옵션을 잊지 마십시오. 사실, 우리 블로그에서 이러한 호버 효과에 대한 영감을 주는 자습서를 볼 수 있습니다. 그러나 이 디자인의 경우 상자 밖에서 약간 생각하고 마우스를 가져가면 인물 이미지가 약간 확대(또는 크기 조정)되도록 하는 몇 가지 CSS 스니펫을 제공할 것이라고 생각했습니다.

사람 모듈을 구분하기 위해 미묘한 호버 효과를 찾고 있다면 다음과 같이 하십시오.

다중 선택을 사용하여 열 1, 2 및 3에서 개인 모듈을 선택합니다. 요소 설정을 엽니다. 고급 탭에서 기본 요소 아래에 다음 CSS를 입력합니다.

overflow: hidden;

이 코드는 확장 이미지가 모듈 컨테이너 외부로 확장되는 것을 방지합니다.

다음으로 Member Image 아래에 다음 CSS를 추가하십시오.

transition: all 0.3s; 

이렇게 하면 이미지 크기가 축소될 때 부드러운 전환이 추가됩니다.

호버에 CSS를 추가하려면 호버 아이콘을 클릭하고 호버 탭을 선택하고 다음 CSS를 입력합니다.

transform: scale(1.1) translateY(-4.5%);

이것은 이미지를 약간 더 큰 크기로 조정(또는 확장)하고 약간 위로 이동합니다.

이제 이미지에 마우스 오버 시 미묘한 확대/축소 효과가 나타납니다.

마지막 생각들

글쎄, 나는 당신이 이 튜토리얼을 즐겼거나 최소한 몇 가지 유용한 디자인 팁을 남겼기를 바랍니다. 이 게스트 스피커 섹션 레이아웃은 다양한 방법으로 사용할 수 있습니다. 또 다른 완벽한 응용 프로그램은 직원 페이지에서 현재 직원을 동시에 나열하고 다른 사람들이 직책에 지원하도록 권장하는 것입니다. 우리와 몇 가지 아이디어를 자유롭게 공유하십시오.

아래 의견에서 여러분의 의견을 기다리겠습니다.

건배!