Divi에서 고정 오디오 콘텐츠 막대를 만드는 방법

고정 오디오 콘텐츠 막대를 추가하는 것은 사용자가 페이지 콘텐츠를 스크롤할 때 쉽게 액세스할 수 있도록 오디오 클립을 제공하는 좋은 방법입니다. 예를 들어, 팟캐스터는 에피소드 페이지 상단에 자신의 추천 오디오를 "고정"할 수 있으므로 사용자는 페이지 콘텐츠의 나머지 부분을 듣고 참여하면서 항상 해당 오디오 컨트롤에 액세스할 수 있습니다.

이 튜토리얼에서는 Divi에서 고정 오디오 콘텐츠 막대를 만들기 위해 Divi의 기본 제공 고정 위치 옵션을 사용하여 약간의 창의력을 발휘할 것입니다. 페이지의 기존 오디오 콘텐츠(예: 오디오 모듈이 있는 행)를 사용자가 스크롤하는 동안 오디오 콘텐츠를 넘길 때 창 상단에 유지되는 고정 오디오 콘텐츠 막대로 변환하는 방법을 보여 드리겠습니다. 또한 고정 상태가 활성화되면(또는 창 상단에 고정되면) 막대의 콘텐츠, 스타일 및 레이아웃을 변경하는 방법도 보여줍니다. 이 디자인의 부드러운 전환과 기능은 모든 Divi 웹사이트에서 오디오 콘텐츠를 보여줄 수 있는 독특한 솔루션을 제공합니다.

가자!

엿보기

다음은 이 튜토리얼에서 구축할 디자인을 간략하게 살펴보겠습니다.

다음은 오디오 콘텐츠를 고정 오디오 콘텐츠 막대로 전환하는 방법입니다.

다음은 페이지를 스크롤하는 동안 오디오 바에 참여할 수 있는 방법입니다.

무료로 레이아웃 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

섹션 레이아웃을 Divi 라이브러리로 가져오려면 Divi 라이브러리로 이동하십시오.

가져오기 버튼을 클릭합니다.

이식성 팝업에서 가져오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다.

그런 다음 가져오기 버튼을 클릭합니다.

완료되면 섹션 레이아웃을 Divi Builder에서 사용할 수 있습니다.

튜토리얼로 들어가 볼까요?

시작하는 데 필요한 것

시작하려면 다음을 수행해야 합니다.

1. 아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
2. WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드(비주얼 빌더)에서 페이지를 편집합니다.
3. "처음부터 빌드" 옵션을 선택합니다.

그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.

파트 1: Divi Builder에서 Podcast 사전 제작 레이아웃 팩 업로드

Divi에서 고정 오디오 바의 디자인을 시작하기 위해 미리 만들어진 팟캐스트 랜딩 페이지 레이아웃을 사용합니다. 설정 메뉴에서 "라이브러리에서 로드" 플러스 아이콘을 선택합니다. 그런 다음 팟캐스트 랜딩 페이지 레이아웃을 찾아 페이지에 로드합니다.

2부: 오디오 콘텐츠를 담을 고정 행 만들기

미리 만들어진 레이아웃의 맨 위 섹션에서 해당 맨 위 섹션 안의 행을 찾습니다. 그런 다음 기존 행 아래에 새 1열 행을 추가합니다.

행 설정

모듈을 추가하기 전에 새 행에 대한 설정을 열고 다음을 업데이트하십시오.

• 거터 폭: 1
• 폭: 100%
• 최대 너비: 100%
• 패딩(데스크톱): 10px 상단, 10px, 하단, 10% 왼쪽, 10% 오른쪽
• 패딩(태블릿 및 휴대전화): 상단 10픽셀, 하단 10픽셀, 왼쪽 10픽셀, 오른쪽 10픽셀

행을 고정하려면 고급 탭으로 이동하여 다음을 업데이트하십시오.

• 고정 위치: 상단에 고정

이렇게 하면 페이지를 아래로 스크롤할 때 행(곧 오디오 콘텐츠 표시줄)이 브라우저 창 상단에 고정됩니다.

3부: 오디오 콘텐츠 추가

행에 오디오 모듈 추가

그런 다음 상단 섹션의 첫 번째 행에서 방금 만든 새 행으로 기존(미리 ​​설계된) 오디오 모듈을 이동/끌어 놓습니다. 이것은 고정 오디오 플레이어 내부에 포함할 추천 오디오 역할을 합니다.

Blurb 모듈을 사용하여 CTA 추가

다음으로 고정 오디오 콘텐츠 표시줄의 오른쪽에 표시할 CTA를 만듭니다.

CTA를 만들려면 레이아웃의 상단 섹션에 재생 아이콘이 있는 광고 문구 모듈을 복사합니다.

그런 다음 상단 섹션의 두 번째 행에 있는 오디오 모듈 아래에 복제된 광고 문구 모듈을 붙여넣습니다.

4부: 오디오 콘텐츠 스타일 지정

오디오 모듈 스타일링

행이 고정 위치를 상속하면 오디오 모듈에 대해 다른 스타일을 지정하려고 합니다. 이렇게 하려면 오디오 모듈에 대한 설정을 열고 다음 고정 상태 옵션을 업데이트하십시오.

• 제목 텍스트 크기(고정): 14px
• 제목 줄 높이(고정): 1.3em
• 캡션 줄 높이(고정): 1.3em

이 모든 작업은 오디오 콘텐츠가 고정 막대에서 수직 공간을 많이 차지하지 않도록 텍스트와 간격을 약간 줄이는 것입니다.

다음으로 고정 상태에서 오디오 모듈의 너비를 다음과 같이 변경하려고 합니다.

• 너비(데스크톱): 80%
• 너비(끈적임): 100%
• 최대 너비(고정): 100%

다음으로 오디오 모듈의 간격을 다음과 같이 조정해야 합니다.

• 여백: 위쪽 0px, 아래쪽 0px
• 패딩: 위쪽 0px, 아래쪽 0px, 왼쪽 0px, 오른쪽 20px

마지막으로 텍스트를 왼쪽 정렬하고 오디오 플레이어 버튼과 슬라이더에 고유한 색상을 추가하려면 고급 설정에서 몇 가지 사용자 정의 CSS 스니펫을 추가해야 합니다.

고정 탭 아래의 오디오 제목 에만 다음 CSS를 추가합니다.

text-align:left;

고정 탭 아래에서만 오디오 메타에 다음 CSS를 추가합니다.

text-align:left !important;

고정 탭 아래에만 있는 플레이어 버튼에 다음 CSS를 추가합니다.

color: #fe4943;

고정 탭 아래에만 있는 현재 플레이어 슬라이더에 다음 CSS를 추가합니다.

background: #2c4ca3;

Blurb CTA 스타일링

다음으로 모든 에피소드를 보기 위해 모의 CTA 역할을 할 광고 모듈의 스타일을 지정합니다.

먼저 광고 문구의 본문 내용에 "모든 에피소드"라는 텍스트를 추가합니다.

디자인 탭에서 다음을 업데이트합니다.

• 본문 글꼴: Lato
• 본문 글꼴 두께: 굵게
• 본문 글꼴 스타일: TT
• 본문 텍스트 크기: 10px
• 본문 문자 간격: 2px
• 바디 라인 높이: 1.3em

그런 다음 광고 아이콘의 크기를 조정합니다.

• 아이콘 글꼴 크기: 50px

그런 다음 다음과 같이 모듈의 크기를 조정합니다.

• 콘텐츠 너비: 100%
• 폭: 20%

이제 콘텐츠 탭으로 돌아가서 다음과 같이 광고 문구의 배경을 추가합니다.

• 배경색: #1a1844
• 배경 이미지: [이미지 추가]
• 배경 이미지 혼합: 광도

행이 고정 상태에 도달하고 오디오 컨트롤 막대가 창 상단에 고정될 때까지 이 모듈을 처음에는 보이지 않게 숨겨야 합니다. 이를 위해 데스크탑에서 모듈을 숨기고 모듈을 고정 상태로 표시하는 몇 가지 CSS 스니펫을 추가할 수 있습니다.

고급 탭에서 다음 사용자 지정 CSS를 업데이트합니다.

기본 요소 CSS(데스크톱):

display:none;

기본 요소 CSS(고정):

display:block;

광고 이미지 CSS:

margin-bottom: 10px

파트 5: 고정 상태에서 오디오 바 콘텐츠의 정렬 변경

현재 고정 행에는 서로 위에 쌓인 두 개의 모듈이 있는 열이 하나만 있습니다. 따라서 고정 막대는 오디오 모듈 아래에 CTA 문구를 표시합니다. 이것은 끈끈한 막대를 위한 너무 많은 수직 공간을 차지할 것이고 보기에 좋지 않을 것입니다.

열 내에서 모든 것이 수평 및 수직으로 정렬되도록 합니다. CSS flex 속성을 사용하여 고정 상태에서 모듈의 레이아웃을 조정할 수 있습니다.

이렇게 하려면 두 모듈이 모두 포함 된 열에 대한 설정을 엽니다.

고급 탭에서 다음 사용자 지정 CSS를 기본 요소에 추가합니다.

주요 요소(데스크톱):

display:flex;
flex-direction:column;

주요 요소(고정):

display:flex;
flex-direction: row;
align-items:center;
justify-content:center;

그게 다야! 결과를 검토해 보겠습니다.

최종 결과

행이 고정 상태에 있을 때 데스크탑의 디자인은 다음과 같습니다.

그리고 여기 모바일에서의 디자인이 있습니다.

다음은 라이브 페이지에서 오디오 콘텐츠 고정 막대 마술이 작동하는 방식에 대한 몇 가지 비디오 클립입니다.

마지막 생각들

Divi의 고정 위치 옵션은 웹 디자이너에게 강력한 도구가 될 수 있습니다. 이 튜토리얼에서는 고급스럽고 창의적인 방법으로 Divi의 스티키 스타일 옵션을 사용하여 스티키 오디오 콘텐츠 바를 만드는 방법을 보여주었습니다. 이 튜토리얼에서 소개된 독특한 기술 중 하나는 flex 속성을 사용하여 고정 행의 내용을 정렬하는 방법이었습니다. 고맙게도 Divi's에는 고급 사용자 지정 CSS 블록을 사용하여 고정 상태에 사용자 지정 코드 조각을 추가하여 우리가 필요로 하는 디자인 유연성을 제공하는 편리한 방법이 있습니다. 바라건대 이것은 다음 프로젝트에서 하나를 만드는 데 영감을 줄 것입니다.

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

건배!