Divi로 아름다운 팟캐스트 페이지를 만드는 방법

멋진 팟캐스트가 있습니다. 그러나 귀하의 웹 사이트에는 약간의 작업이 필요할 수 있습니다. 그것은 제 역할을 하지만 눈에 띄지 않습니다. 두려워하지 마세요, 팟캐스터! 난 당신이 덮여있어.

Divi를 사용하여 팟캐스트용으로 쉽게 업데이트할 수 있는 홈페이지뿐만 아니라 세련된 아카이브 페이지와 개별 에피소드용 템플릿을 만드는 간단한 방법을 알려 드리겠습니다.

오늘의 최종 제품: 3섹션 팟캐스트 홈페이지

좋은 팟캐스트가 유지해야 하는 개성을 잃지 않으면서 디자인을 최대한 단순하고 최소화하고 싶었습니다. 이 디자인은 신발과 행복에 중점을 둔 You're An All-Star 라는 가상의 인디 팟캐스트를 위한 것입니다. 그 주제를 반영한 ​​디자인을 원했습니다.

첫 번째 섹션은 사용자의 주의를 끌기 위해 밝은 색상을 사용하고 왼쪽에 팟캐스트에 대한 간략한 설명을 제공하며 Divi 오디오 모듈을 사용하여 즉시 들을 수 있는 팟캐스트 에피소드를 제공합니다.

사용자가 아래로 스크롤하면 미학이 선택된 에피소드 섹션으로 약간 이동합니다. 이 섹션에서는 다시 Divi 오디오 모듈을 사용하여 쉽게 액세스할 수 있는 콘텐츠와 쇼 아카이브를 방문할 수 있는 옵션을 제공합니다. 배경은 에피소드 자체에주의를 끌기 위해 시차입니다.

마지막 섹션은 단순히 이메일 수신 동의입니다. 모든 브랜드, 팟캐스트, 블로그, 회사에 하나가 필요하며 눈에 띄게 하기 위해 이 섹션을 다시 컬러 배경으로 전환하고 두 번째 섹션의 시차가 추가 주의를 환기시키는 데 도움이 될 만큼 충분히 작게 만들었습니다.

아래에서는 사이트의 각 모듈, 섹션 및 페이지에 스타일을 지정하고 생성한 방법에 대한 단계별 자습서를 제공합니다.

필요한 자산

이 디자인의 가장 큰 장점은 Divi 자체 외부에서 많은 리소스를 사용하지 않는다는 것입니다. 배경에 사용할 고해상도 이미지 5개와 에피소드에 사용하는 팟캐스트 아트 및 썸네일만 있으면 됩니다.

내 모든 이미지는 Unsplash에서 가져왔습니다(이 사이트의 모든 이미지는 이 컬렉션에서 찾을 수 있습니다). 미리보기를 사용하여 일부를 흑백으로 변환했지만 원하는 이미지 편집 소프트웨어를 사용할 수 있습니다. 거의 모든 옵션을 통해 회색조/흑백 옵션을 선택하거나 채도를 0으로 낮출 수 있습니다.

그 외에 필요한 모든 리소스는 Divi 내부에 있습니다. 그럼 가자!

팟캐스트 웹사이트 홈페이지: 첫 번째 섹션

WordPress 대시보드에서 새 페이지를 만들고 사이트의 첫 페이지로 설정하여 시작합니다. (편리하게 "집"이라고 이름을 지었습니다.)

이제 돌아가서 새 페이지를 편집하십시오. 오른쪽 사이드바의 페이지 속성 상자에서 기본 템플릿을 빈 페이지 템플릿으로 변경합니다.

먼저 3열 행을 만듭니다.

중간 열 내부에 Divi 분할기 모듈을 삽입하려고 합니다.

디바이더 설정 내부의 디자인 탭에서 높이를 600으로 설정합니다. 이렇게 하면 두 개의 외부 열(섹션의 주요 내용)이 분리된 상태로 유지될 뿐만 아니라 여러 섹션에 적절한 공백을 허용할 만큼 섹션 높이가 유지됩니다. 뷰포트 해상도. (모바일에서는 기본적으로 숨겨져 있습니다.)

이제 왼쪽 열에 두 개의 텍스트 모듈을 추가합니다. 이 프로젝트의 경우 가로 헤더가 어울리지 않아 첫 번째 텍스트 모듈은 단순히 제목이 될 것이라고 결정했습니다.

텍스트 설정의 콘텐츠 탭에서 콘텐츠 상자에 제목을 추가합니다.

디자인 탭에서 텍스트 색상을 "밝음"으로 업데이트하고 텍스트 방향을 "중앙"으로 변경합니다. 그런 다음 텍스트 글꼴과 크기를 조정합니다. 나는 고민된 모양 때문에 "Special Elite" 글꼴을 선택하고 크기를 60으로 설정했습니다. 또한 Text Line Height를 1em으로 설정합니다.

처리가 완료되면 두 번째 텍스트 상자로 이동할 차례입니다. 우리는 이것을 팟캐스트에 대한 빠른 안내문으로 사용하고 있습니다.

콘텐츠 탭에서 다음 옵션을 업데이트합니다.

내용 : 설명에 대한 텍스트를 입력합니다(iTunes 및 기타 서비스에서 사용하는 설명의 잘린 버전을 제안합니다)
배경색 : rgba(0,0,0,0.4)

디자인 탭에서 텍스트 색상으로 "Light"를 선택하고 이전 상자에서와 같이 텍스트 방향으로 "Center"를 선택합니다. 또한 텍스트 글꼴을 20px 크기의 "Special Elite"로 설정합니다.

마지막으로 전체 텍스트 상자 주위에 10px의 패딩을 추가합니다.

그런 다음 고급 탭으로 이동하여 사용자 정의 CSS에서 기본 요소 필드에 다음을 입력하여 텍스트 상자의 모서리를 둥글게 만듭니다.

border-radius: 10px;

이 작업을 완료하면 새 사이트의 처음 두 열이 완료된 것입니다! 만세! 페이지 하단의 보라색 원을 클릭하고 녹색 저장 버튼을 눌러 작업을 저장합니다.

잘했습니다!

하지만 조금 더 시각적으로 매력적으로 보이게 하려면 섹션의 배경을 설정해야 하므로 파란색(섹션) 상자의 설정으로 이동하여 배경 이미지를 업로드합니다. 저는 1920×1280 해상도를 유지하는 경향이 있습니다.

지금쯤이면 다음과 같이 보일 것입니다.

지금쯤이면 다음과 같이 자문할 수 있습니다. “팟캐스트는 어떻습니까? 그것은 팟캐스트 사이트이고 우리는 아직 팟캐스트로 아무것도 하지 않았습니다!” 당신이 완전히 옳습니다. 따라서 행의 세 번째 열에 있는 오디오 모듈을 선택하여 오디오를 재생해 보겠습니다.

기본 오디오 모듈은 이 사이트에서 사용하려는 테마와 정확히 맞지 않으므로 다음에서 가져오겠습니다.

이에:

오디오 모듈의 설정을 엽니다. 오디오 필드는 자신의 파일을 사용하는 호스트에 업로드하거나 사용하는 팟캐스팅 서비스의 미디어 파일에 직접 연결할 수 있는 곳입니다. 저는 Libsyn을 사용하므로 미디어 URL을 가져와서 붙여넣었습니다.

(재미있는 사실: 이 모듈을 통해 사이트에서 재생을 클릭하는 사람도 Libsyn 대시보드에서 다운로드로 계산됩니다. 점수!)

그런 다음 연결한 에피소드의 제목을 제목 아래에, 이름을 아티스트 이름 아래에 입력하고 싶을 것입니다(또는 쇼에서 사용하는 모든 것. 신발에 대한 가상 팟캐스트의 경우 Chuck Taylor 이외의 다른 것을 어떻게 선택할 수 있습니까? ). 앨범 제목은 팟캐스트의 이름이 됩니다.

다음으로 녹색을 띤 청록색을 완전히 투명한 배경으로 변경해 보겠습니다. 색상은 중요하지 않습니다. 투명도 막대를 맨 아래로, 또는 RGBA의 마지막 숫자가 0이 될 때까지 밉니다.

커버 아트 이미지의 경우 이 특정 에피소드의 썸네일이나 iTunes 및 다른 곳에서 사용하는 팟캐스트 아트를 사용하는 것이 가장 좋습니다.

팟캐스트 세부 정보가 정렬되면 디자인 탭으로 이동하여 이 플레이어를 여러분의 것으로 만들 수 있습니다.

텍스트 색상 옵션으로 "밝음"을 선택합니다. 글꼴을 "Special Elite"로, 제목 크기를 50px, 캡션 크기를 20px로 설정합니다.

나는 또한 이 특정 플레이어의 상단 여백을 50px로 설정했는데, 이 여백은 플레이어를 섹션에서 수평으로 중앙에 유지하고 모바일로 바꿀 때 요소 사이에 적절한 간격을 허용하기 때문입니다. (스마트폰 아이콘을 클릭하지 않는 한 설정은 모든 뷰포트 크기에 적용됩니다.)

배경이 투명하기 때문에 첫 번째 열의 텍스트 상자와 일치하도록 모서리를 둥글게 할 필요가 없으므로 저장을 누르십시오.

이 팟캐스트 플레이어는 쇼의 주인공이기 때문에 매번 다시 만들 필요가 없으므로 이 모듈을 Divi 라이브러리에 저장하여 사이트 전체에 쉽게 복제할 수 있도록 하고 필요에 따라 수정합니다.

원하는 템플릿 이름을 입력하고 "이 항목을 전역 항목으로 설정"을 선택하지 마십시오. 이 시리즈의 2부에서는 해당 옵션을 사용할 예정이지만 지금은 사용하지 않습니다.

괜찮아! 하나의 요소만 더하면 첫 번째 섹션이 완성됩니다. (그래도 걱정하지 마십시오. 가장 관련이 있습니다.)

대부분의 팟캐스트는 청취자가 에피소드에서 논의된 내용으로 돌아가 다시 방문할 수 있도록 블로그를 유지하거나 메모를 보여줍니다. 귀하의 팟캐스트도 다르지 않습니다. 팟캐스트의 쇼노트에 링크를 추가하는 것은 전혀 어렵지 않습니다.

세 번째 열에 새 텍스트 블록을 만들고 설정을 열고 원하는 링크 텍스트를 입력합니다. 이 예에서는 "쇼 노트 읽기"가 자명합니다.

도구 모음에서 아이콘을 클릭하여 링크를 추가하고 쇼 노트의 URL을 입력/붙여넣기합니다. (다시 2부에서 쇼 노트용 블로그 게시물을 만들고 스타일을 지정하는 방법을 보여드리겠습니다.) WordPress 영구 링크 구조가 "게시물 이름"으로 설정되어 있으므로 이 에피소드를 위해 작성한 게시물입니다.

(참고: 도메인 정보를 입력하지 않고 슬러그만 입력하면 도메인 정보에 관계없이 사용자를 해당 페이지로 안내하도록 WordPress에 지시하는 것입니다. 이는 도메인을 변경하는 경우에 매우 유용하며 링크가 끊어지는 것을 방지하는 데 도움이 됩니다!)

해당 링크를 저장하기만 하면 준비가 완료됩니다!

또한 팟캐스트 플레이어에서 했던 것과 같은 방식으로 이 모듈을 라이브러리에 저장해야 합니다.

짜잔! 나만의...잠깐. 어 오. 당신의 쇼 노트 링크는… is…추합니다!

하지만 걱정하지 마세요. 못생긴 링크는 쉽게 고칠 수 있습니다! 텍스트 모듈의 설정을 사용하여 텍스트 색상을 변경하더라도 링크이기 때문에 이러한 단어에는 영향을 미치지 않습니다.

Divi -> Theme Options의 Custom CSS 필드로 이동하여 맨 아래에 입력합니다.

a:link, a:visited, a:active {
    color: #ffffff;
}
 
a:hover {
 color: #ffffff;
 font-weight: bold;
 text-decoration: underline;
}

이렇게 하면 텍스트를 흰색으로 유지합니다(사이트의 나머지 텍스트와 일치하여 대부분의 다른 링크처럼 밑줄이 그어져 있는지 확인하고 마우스를 가져갔을 때 굵게 표시).

저장했는지 확인하고 이제 팟캐스트 플레이어가 완성되었습니다!

이 첫 번째 섹션의 마지막 조정을 위해 행 설정(녹색 상자)을 클릭합니다.

"사용자 정의 너비 사용"을 선택하십시오. 단위가 백분율로 설정되어 있는지 확인하고 슬라이더를 80 위로 이동합니다. 이렇게 하면 해당 행이 사용자가 가진 뷰포트 크기의 80%를 차지하게 되어 모든 것이 뭉치는 것을 방지할 수 있습니다.

팟캐스트의 새 웹사이트 상단 섹션도 마찬가지입니다! 지금쯤이면 다음과 같이 보일 것입니다.

저장하면 대부분의 작업이 완료됩니다! 그리고 Divi의 라이브러리 기능 덕분에 다음 몇 섹션은 순식간에 지나갈 것입니다! 그냥 봐.

팟캐스트 웹사이트 홈페이지: 두 번째 섹션

이 섹션은 팟캐스트의 선택된 에피소드를 보여주고 사용자가 아카이브(쇼 노트 페이지와 같이 2부에 제공됨)를 방문할 수 있도록 합니다.

가장 먼저 할 일은 섹션 맨 아래에 있는 파란색 +를 클릭하고 일반 섹션을 추가하여 실제로 새 섹션을 만드는 것입니다. 그렇게 하면 비주얼 빌더에 또 다른 파란색 상자가 생성됩니다. 단일 열 행에 추가합니다.

그 자리에 있으면 위에서 했던 것과 같은 방식으로 배경을 추가해 보겠습니다. 이번에는 섹션 설정에서 "시차 옵션 사용"을 선택하려고 합니다. "CSS" 대신 "True Parallax" 드롭다운을 유지합니다.

이것은 홈페이지에서 시차와 함께 사용할 유일한 섹션입니다. 이 효과를 아껴서 사용하면 강조하고 싶은 내용에 더 많은 관심을 불러일으킬 수 있다고 생각합니다.

저장한 다음 행에 새 텍스트 상자를 삽입합니다. "Selected Episodes"를 입력하고 WYSIWYG 편집기 중앙에 놓고 설정으로 이동하여 텍스트 글꼴을 "Special Elite"로, 텍스트 크기를 50px로 만듭니다. 이제 다음과 같이 표시되어야 합니다.

그 아래에서 녹색 +를 클릭하여 새 3열 행을 만들고 첫 번째 열에 "라이브러리 탭에서 추가"를 입력합니다. (지금은 이러한 라이브러리 옵션이 모두 제공되지는 않지만 나중에 제공됩니다!)

"팟캐스트 에피소드" 또는 위에서 플레이어 이름을 지정한 이름을 선택합니다. 그런 다음 그 아래에 다른 모듈을 추가하고 라이브러리로 다시 이동한 다음 저장된 "노트 링크 표시" 모듈을 추가합니다. 다음이 표시될 때까지 세 열 모두에 대해 이 작업을 수행합니다.

원하는 에피소드를 모두 추가할 때까지 이 작업을 계속하십시오. 제목, 앨범 아트를 편집하고 각 에피소드에 대한 메모 링크를 표시합니다. 방금 두 번째 행을 추가하고 두 번째 열만 채워서 디자인이 내가 선택한 배경에 맞도록 했습니다.

이 섹션에 남은 유일한 것은 "아카이브 찾아보기" 버튼을 추가하는 것입니다. 녹색 +를 클릭하여 맨 아래에 새 행을 만들고 단일 열 레이아웃을 사용합니다. "버튼" 모듈을 삽입합니다. 이렇게 하면 매우 읽기 어려운 버튼(물론 배경에 따라 다름)이 만들어지며 여기에는 몇 가지 간단한 스타일이 필요합니다.

버튼 모듈의 설정을 열고 아카이브가 될 페이지의 URL 슬러그를 입력하십시오. 나는 명백한 "/archives"를 사용하고 "Browse Archives"라는 텍스트를 사용한 다음 버튼 자체를 중앙에 배치했습니다.

설정 탭에서 "버튼에 사용자 정의 스타일 사용"을 클릭하고 배경색을 "#ffffff"로, 텍스트 색상을 "#000000"(각각 흰색과 검정색)으로 설정합니다.

그런 다음 테두리 반경을 10px로 설정하고 글꼴을 "Special Elite"로 설정하고 단추 추가 아이콘을 "기본값"에서 "아니요"로 변경하여 단추 모서리를 둥글게 만들고 싶습니다.

마지막으로 Button Hover Border Radius를 10px로 변경하여 버튼 위에 마우스를 놓으면 둥글게 됩니다.

나는 이것을 내 라이브러리에 저장하여 진행하면서 다른 버튼의 스타일을 사용할 수 있습니다.

그리고 그것으로 두 번째 섹션이 완료되었습니다. 거의 다 됐어요, 팟캐스터! 말 그대로 세 번째로 반올림합니다!

팟캐스트 웹사이트 홈페이지: 세 번째 섹션

이것은 정적 배경 위에 단일 모듈이 될 것입니다.
먼저 섹션 2에서 했던 것처럼 두 배 너비의 열이 있는 새 파란색 상자를 만들고 메뉴에서 "Email Optin" 모듈을 선택합니다.

우리의 디자인에 전혀 맞지 않는 불이 켜진 것을 보게 될 것입니다. 그래도 아주 쉬운 수정입니다.

모듈의 설정으로 이동하여 다음 옵션을 업데이트합니다.

제목: 제목을 의도적으로 비워 두었습니다.
콘텐츠: 행동 유도 문구를 추가하고 중앙에 배치합니다.
서비스 제공업체: 저는 Mailchimp를 사용하기 때문에 여기로 이동했습니다.
배경색: 투명; 이것은 또한 버튼 자체를 투명하게 만듭니다.

이메일 서비스가 제공되었는지 확인하는 일만 남았습니다. 그렇지 않으면 빌더를 저장하고 종료한 후 양식이 표시되지 않습니다. Mailchimp를 사용하는 경우 지원 문서에서 API 키 찾기에 대한 훌륭한 문서를 찾을 수 있습니다.

키가 있으면 WordPress 대시보드로 이동하여 Divi –> 테마 옵션으로 다시 이동한 다음 적절한 이름의 "Mailchimp API 키" 필드에 Mailchimp API 키를 입력합니다.

저장한 후 아름답고 완성된 페이지를 만들기 전에 남은 유일한 단계는 세 번째 섹션의 배경을 설정하는 것입니다. 최종 제품은 다음과 같아야 합니다.

훌륭해! 만세! 이제 팟캐스트를 위한 모든 기능을 갖춘 홈페이지가 생겼습니다. 기록을 세우고 세상에 알려야 할 때입니다. 그렇죠?

내일: 팟캐스트를 위한 아름다운 아카이브 만들기 및 메모 페이지 표시

이제 멋진 홈페이지가 생겼으므로 가장 멋진 콘텐츠를 선보일 수 있습니다. 하지만 팬이 진정한 광신도가 된다면 당신의 쇼에 깊이 빠져들고 싶어할 것입니다.

내일 저는 팟캐스트 에피소드의 전체 아카이브를 위한 단순하지만 아름다운 페이지와 각 에피소드에서 귀하가 토론한 내용을 독자에게 알려주고 구독할 기회를 주는 각 에피소드의 개별 페이지를 구성하는 방법을 보여 드리겠습니다. 당신의 놀라운 이메일 목록을 위해.

내일 봐요!

메모 페이지 표시:

아카이브 페이지: