각 슬라이드의 특정 요소를 변경하도록 Divi 슬라이더를 사용자 정의하는 방법

슬라이더가 웹사이트의 스크롤 없이 볼 수 있는 부분을 극대화하는 데 훌륭하다는 것을 우리는 모두 알고 있습니다. 그들은 훌륭해! 사용자는 페이지를 아래로 스크롤하지 않고도 볼 수 있는 여러 CTA와 중요한 기능을 환영합니다. 그러나 슬라이드에서 슬라이드로 디자인과 콘텐츠를 너무 많이 변경하면 방문자가 주의를 산만하게 하거나 압도할 수 있습니다. 그렇기 때문에 이 튜토리얼에서는 각 슬라이드 전환 시 특정 요소만 변경하도록 Divi 슬라이더를 사용자 지정하는 방법을 보여 드리겠습니다. 이렇게 하면 각 슬라이드에서 특정 요소(예: 단일 단어 또는 버튼)만 변경하면서 슬라이더의 핵심 내용과 디자인 구성 요소를 일관되게 유지할 수 있습니다. 방문자는 변경 사항을 쉽게 처리하고 클릭 유도문안을 명확하게 이해할 수 있습니다.

뛰어들자!

Divi 슬라이더 미리보기

오늘의 튜토리얼에서 만들 Divi 슬라이더의 디자인과 기능을 살짝 들어보세요.

각 슬라이드의 본문 텍스트에서 한 단어만 변경되는 방식에 주목하십시오.

이 예에서 본문 텍스트 단어와 버튼 및 마침표의 색상이 슬라이드마다 어떻게 변경되는지 주목하십시오.

기본 개념 설명

기본적으로 Divi 슬라이더는 새 슬라이드로 전환될 때마다 설명 텍스트에 애니메이션을 적용하여 내용을 페이드 인하고 약간 위쪽으로 내용을 제자리로 이동합니다.

그러나 사용자 정의 CSS 한 줄로 텍스트의 위쪽 애니메이션을 비활성화할 수 있습니다. 그리고 슬라이드를 복제하고 배경을 제거하고 요소 중 하나만 변경하면(예: 본문 텍스트의 한 단어) 슬라이드마다 한 단어만 변경되는 것을 볼 수 있습니다.

이 개념을 사용하여 특정 텍스트, 단추 또는 색상만 변경하고 나머지 디자인 요소는 각 슬라이드에서 계속 사용할 수 있습니다.

시작하기

YouTube 채널 구독

이 튜토리얼에서는 Divi 테마가 설치되고 활성화되기만 하면 됩니다. 프론트 엔드의 Divi 빌더를 사용하여 처음부터 Divi 슬라이더를 빌드합니다.

시작하려면 새 페이지를 만들고 페이지 제목을 지정하세요. 그런 다음 클릭하여 Divi Builder를 사용하고 "처음부터 만들기" 옵션을 선택합니다. 그런 다음 버튼을 클릭하여 "프론트 엔드에서 빌드"를 클릭합니다.

이제 디자인을 시작할 준비가 되었습니다.

Divi 슬라이더 콘텐츠 설정

이 예에서는 전폭 슬라이더 모듈을 사용하지만 이 자습서는 일반 슬라이더 모듈에도 적용됩니다. 전체 너비 슬라이더 모듈이 있는 전체 너비 섹션을 페이지에 추가하는 것으로 시작해 보겠습니다.

슬라이더의 내용 변경 사항을 볼 수 있도록 먼저 전체 너비 섹션에 어두운 배경색을 임시로 추가하겠습니다. 섹션 설정을 열고 검정색 배경색을 지정합니다(#222222).

기본 슬라이더 배경색이 가리고 있기 때문에 아직 볼 수 없습니다. 튜토리얼 뒷부분에서 섹션 배경 디자인을 마무리하기 위해 다시 원을 그리겠습니다.

이제 전체 너비 슬라이더 설정으로 이동하여 기본 슬라이드 중 하나를 삭제하고 하나만 남겨 보겠습니다. 그런 다음 슬라이드 설정을 엽니다.

다음과 같이 슬라이드 설정을 업데이트합니다.

제목: "더 많은 것을 제공하는 웹사이트..."
버튼 텍스트: "시작하기"

콘텐츠 아래에 다음 html을 추가합니다.

Business<span style="color: #EE164D;">.</span>

(이렇게 하면 단어 뒤의 점(또는 마침표)에 사용자 정의 색상이 추가됩니다.)

배경색: rgba(255,255,255,0)

설정을 저장합니다.

이제 슬라이드를 두 번 복제하여 총 3개의 슬라이드가 되도록 합니다.

두 번째 슬라이드 설정을 엽니다. 콘텐츠에서 "Business"라는 단어만 "Money"로 바꾸고 나머지 html, 제목 및 버튼 텍스트는 동일하게 유지합니다. 각 슬라이드에서 이 한 단어만 변경하려고 합니다. 그런 다음 설정을 저장합니다.

그런 다음 세 번째 슬라이드 설정을 엽니다. 콘텐츠에서 "비즈니스"라는 단어를 "성공"으로 바꾸고 설정을 저장합니다.

모두 완료되었습니다! 이것은 슬라이더 콘텐츠를 처리합니다.

설명 텍스트 애니메이션 최적화

슬라이더 콘텐츠가 배치된 후에는 텍스트가 각 슬라이드와 함께 이동하지 않도록 애니메이션을 비활성화해야 합니다. 이렇게 하려면 전체 너비 슬라이더 설정으로 이동하여 슬라이드 설명 아래에 다음 사용자 정의 CSS를 추가합니다.

animation-name: none;

이 예에서는 슬라이더 애니메이션을 자동으로 만들고 애니메이션 속도를 높여 사용자가 각 슬라이드에서 단어 변경 사항을 더 빨리 볼 수 있도록 하는 것이 좋습니다. 이렇게 하려면 디자인 탭으로 이동하여 다음을 업데이트하십시오.

자동 애니메이션: 켜짐
자동 애니메이션 속도(ms): 3000

지금까지의 결과를 확인해보세요. 위쪽 애니메이션 없이 각 슬라이더 변경 내용에서 한 단어만 표시되어야 합니다.

슬라이더 디자인

콘텐츠와 기능이 준비되면 슬라이더를 아름답고 우아한 디자인으로 스타일링할 수 있습니다.

전체 너비 슬라이더 설정을 열고 다음을 업데이트합니다.

텍스트 방향: 왼쪽
제목 글꼴: Lato
제목 글꼴 두께: Light
제목 텍스트 크기: 32px
제목 텍스트 그림자: 스크린샷 참조
제목 텍스트 그림자 흐림 강도: 0em(기본적으로 기본 텍스트 그림자를 제거함)

본문 글꼴: Lato
본문 텍스트 크기: 5vw(데스크톱), 50px(태블릿), 40px(스마트폰)
바디 라인 높이: 1.6em
바디 텍스트 섀도우: 스크린샷 참조
Body Text Shadow Blur Strength: 0em (기본적으로 기본 텍스트 그림자를 제거함)

버튼 텍스트 크기: 16px
버튼 배경색: #ee164d
버튼 테두리 너비: 8px
버튼 테두리 색상: #ee164d
버튼 테두리 반경: 0px
버튼 문자 간격: 1px
버튼 글꼴: Lato
버튼 정렬: 오른쪽

너비: 70%(데스크톱), 100%(태블릿), 100%(스마트폰)
모듈 정렬: 중앙

사용자 지정 패딩(데스크톱): 상단 19vw, 하단 8vw
맞춤 패딩(태블릿): 상단 19vw, 하단 4vw. 왼쪽 0px, 오른쪽 0px
맞춤 패딩(스마트폰): 상단 30vw, 하단 4vw, 왼쪽 0px, 오른쪽 0px

박스 섀도우: 스크린샷 참조
상자 그림자 수평 위치: -190px
상자 그림자 수직 위치: 60px
상자 그림자 색상: rgba(0,16,17,0.7)

마지막 단계로 슬라이더 화살표나 컨트롤이 표시되지 않도록 슬라이더 요소를 비활성화하겠습니다.

그것은 우리의 Divi 슬라이더 디자인을 처리합니다!

단면 스타일 사용자화

모든 슬라이드의 정적 배경 역할을 할 배경 이미지를 포함하여 나머지 디자인이 섹션에 추가됩니다. 섹션에 배경 이미지를 추가하면 슬라이더 모듈에 배경 이미지를 추가한 것처럼 한 이미지에서 다른 이미지로의 약간의 전환이 보이지 않기 때문에 이 용도에 더 좋습니다.

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

배경 이미지: [약 1920px x 800px 이미지 삽입]
배경 그라데이션 왼쪽 색상: rgba(0,16,17,0.45)
배경 그라데이션 오른쪽 색상: rgba(0,16,17,0.92)
시작 위치: 34%
최종 위치: 0%
배경 이미지 위에 그라디언트 배치: 예

다음으로 섹션에 다음과 같이 오른쪽 테두리를 지정합니다.

오른쪽 테두리 너비: 5vw
오른쪽 테두리 색상: #001011

마지막으로 디자인 프레임워크의 균형을 유지하는 데 도움이 되도록 섹션에 상자 그림자를 제공합니다.

박스 섀도우: 스크린샷 참조
상자 그림자 수평 위치: -200px
상자 그림자 수직 위치: -150px
상자 그림자 색상: rgba(0,16,17,0.74)

그게 다야!

Divi 슬라이더의 최종 디자인

사용자 정의 Divi 슬라이더의 최종 디자인은 다음과 같습니다.

슬라이드의 기능은 다음과 같습니다. 각 슬라이드에서 한 단어만 어떻게 변경되는지 확인하십시오.

모바일에서의 최종 디자인

태블릿

스마트 폰

다른 요소 변경 실험

더 창의적인 디자인과 기능을 위해 각 슬라이드에서 다른 요소를 변경하여 실험할 수 있습니다. 예를 들어, 각 슬라이드 버튼에 다른 색상을 지정하고 각 슬라이드의 새 버튼 색상과 마침표 색상을 일치시킬 수 있습니다.

다음은 그 모습입니다.

슬라이드 상자-그림자 색상 또는 기타 디자인 요소의 변경을 탐색할 수도 있습니다. 무수한 가능성이 있습니다!

마지막 생각들

이 사용자 지정 Divi 슬라이더 디자인과 기능은 기존 슬라이더에 대한 훌륭한 대안을 제공합니다. 디자인의 핵심은 변경되지 않으므로 각 슬라이드에서 변경되는 CTA의 중요한 측면을 더욱 강조합니다. 전환율을 높일 수 있는지 테스트할 수 있는 것 같습니다!

아래 의견에 어떻게 생각하는지 알려주십시오.

건배!