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

어제 우리는 Divi의 비주얼 빌더를 사용하여 청취자들에게 절대적으로 깊은 인상을 줄 팟캐스트의 홈 페이지를 설정했습니다.

그들은 아름다운 기록 보관소로 향하고 내가 오늘 만드는 방법을 가르쳐 줄 메모 페이지를 보여줄 것입니다.

오늘의 최종 제품: 메모 및 아카이브 페이지 표시

페이지 자체는 홈페이지를 보완하도록 설계되었지만 해당 요소를 직접 반영하지는 않습니다.

쇼 노트 페이지에서 저는 모든 방문자가 브라우저에서 직접 에피소드를 듣고 해당 특정 에피소드의 하이라이트와 링크를 보고 이메일 목록에 등록할 수 있는 기회를 가질 수 있도록 하고 싶었습니다.

아카이브 페이지는 쇼 노트 페이지만큼 단순하지만 기능적입니다. 아카이브 페이지의 목적은 사용자가 빠르고 쉽게 백 카탈로그를 볼 수 있도록 하는 것입니다. 이것이 바로 이 페이지가 하는 일입니다. 쇼에 대한 빠른 발췌문을 통해 청취자는 쇼를 훑어보고 듣고 싶은 주제를 정확히 찾을 수 있습니다.

필요한 자산

어제와 마찬가지로 고해상도 배경 이미지가 필요합니다. 내가 사용한 두 개는 Unsplash의 이 컬렉션에 있습니다(어제 홈페이지의 배경도 포함됨). 미리보기에서 회색조로 편집했지만 모든 이미지 편집 소프트웨어에서 흑백/회색조 효과를 적용하거나 채도 슬라이더를 0으로 낮출 수 있습니다.

같은 스타일을 사용할 것이기 때문에 이미 홈페이지를 구축했다면 여러분의 삶도 조금 더 쉬워질 것입니다.

그게 다야, 그럼 건물을 짓자!

쇼 노트 페이지 만들기

쇼 노트는 WordPress의 "게시물"일 뿐이므로 대시보드로 이동하여 게시물 -> 새로 추가로 이동합니다.

프로그램의 개별 에피소드에 대한 프로그램 메모 페이지를 만들 때마다 이 작업을 수행합니다. 원하는 제목을 지정하고 URL 슬러그를 간단한 것으로 설정합니다(청취자가 에피소드가 끝난 후 기억할 수 있도록).

먼저 "Divi Builder 사용"을 클릭해야 합니다.

그것은 우리가 필요로 하는 다음 옵션들을 열어줄 것입니다. 쇼 노트에 사이드바를 사용하지 않을 것이기 때문에 페이지 오른쪽에서 게시물을 "전체 너비"로 설정합니다. 게시물 제목을 "숨기기"로 설정하여 게시물 자체의 작성자, 댓글 및 날짜와 같은 메타데이터가 표시되지 않도록 합니다.

그런 다음 Visual Builder에 들어가 보기 좋게 비어 있는 웹 페이지를 보고 싶을 것입니다.

가장 먼저 할 일은 페이지의 왼쪽 상단 모서리에 있는 파란색 섹션에 있는 톱니바퀴 아이콘을 클릭하여 섹션 설정으로 들어가는 것입니다.

거기에서 배경 이미지를 업로드하십시오. 설정으로 조금 더 아래로 스크롤하고 시차 효과 사용을 켭니다. Parallax Method를 기본값인 "True Parallax"로 둡니다.

해당 설정을 저장하면 다음과 같이 표시됩니다.

위의 최종 제품에 정확히 무엇이 없었습니까? 페이지에 내용을 추가하여 약간 확장해야 합니다.

녹색 +를 클릭하고 단일 열 행(왼쪽 상단 모서리에 있는 행)을 삽입합니다.

다음으로, 어제의 홈페이지를 이미 완료한 것을 기뻐할 것입니다. 행을 선택하자마자 요소를 선택하라는 창이 나타납니다. "라이브러리에서 추가"를 클릭하여 어제 저장한 팟캐스트 플레이어를 선택합니다.

나는 단순히 "Podcast 에피소드"라고 이름을 지었지만 다른 것을 선택했다면 선택했는지 확인하십시오.

Badabing-badaboom, 마술처럼 쇼 노트 페이지에 팟캐스트 에피소드가 추가되었습니다.

각각의 새로운 쇼 노트 페이지의 제목과 미디어(및 잠재적으로 에피소드 아트)를 편집해야 한다는 점을 염두에 두십시오. 방금 추가한 내용은 저장한 내용의 정확한 사본입니다.

실제 쇼 노트는 팟캐스트 플레이어 바로 아래로 이동하므로 플레이어 위에 마우스를 놓고 검은색 +를 누르십시오. 텍스트 모듈이 표시될 때까지 아래로 스크롤합니다. 페이지에 추가합니다.

텍스트 설정의 콘텐츠 탭에서 WYSIWYG 편집기에 메모를 입력하고 디자인 탭으로 이동합니다.

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

텍스트 색상: 라이트
텍스트 방향: 왼쪽
텍스트 글꼴: Special Elite
텍스트 글꼴 크기: 20px
텍스트 텍스트 색상: #ffffff

저장하면 반짝이는 새 텍스트 블록과 이와 유사한 페이지가 표시됩니다.

쇼 노트 페이지의 홈 스트레치에 도달했습니다. 두 가지 요소만 남았습니다. 검은색 +를 다시 클릭하고 어제 저장한 버튼 템플릿을 추가합니다.

어제와 같이 사용자를 아카이브로 데려가는 대신, 이것은 사용자를 홈 페이지로 되돌릴 것입니다. 버튼의 설정 페이지로 이동하여 URL을 간단한 백슬래시로 설정합니다.

/home 또는 이와 유사한 것으로 이동하지 않는 이유는 무엇입니까? 글쎄, 백슬래시만 사용하면 사용자가 웹사이트의 첫 페이지가 무엇이든 상관없이 사용자를 안내할 것입니다. 그리고 같은 사이트에 있기 때문에 도메인을 옮겨도 버튼에 영향을 주지 않습니다. 그것은 항상 집으로 돌아갈 것입니다. 정확히 당신이 원하는 것입니다!

버튼의 나머지 설정을 살펴보고 작성하십시오. 동일한 창에서 열어서 버튼 텍스트를 "Return Home"(또는 원하는 대로)으로 변경하고 버튼 정렬을 "Right"로 변경합니다(둘 다 콘텐츠에 방해가 되지 않도록 하고 세워두기 위해). 내용). 디자인 탭의 스타일은 Divi 라이브러리에서 가져와야 합니다.

이제 멋진 탐색 버튼이 생겼으며 여러 페이지에서 사용할 수 있도록 라이브러리에 추가하는 것이 좋습니다.

마지막으로 이메일 등록을 설정하여 사용자에게 팟캐스트에 대한 뉴스를 최신 상태로 유지하기 위해 달콤하고 달콤한 이메일 주소를 받도록 하겠습니다.

이를 위해 우리는 완전히 새로운 단일 열 행을 원합니다. 따라서 녹색 +를 클릭하고 제자리에 넣으십시오. 그런 다음 드롭다운에서 Email Optin 모듈을 추가합니다. 어제와 마찬가지로 모듈 설정으로 이동하여 WYSIWYG 편집기에 표시할 제목과 원하는 클릭 유도문안을 입력하십시오.

또한 버튼 자체에 원하는 텍스트를 추가하십시오. 나는 완전히 독특한 "구독"을 선택했습니다.

이메일 서비스 제공업체와 목록을 선택하십시오(어제부터 목록을 선택하지 않으면 전체 모듈이 라이브 상태일 때 페이지에 표시되지 않는다는 점을 기억하십시오).

배경 RGBA를 투명으로 변경합니다.

디자인 탭에서 헤더 글꼴을 "Special Elite"로, 크기를 36px로 설정합니다.

또한 Body Font를 "Special Elite"로 설정하고 크기를 16px로 설정합니다.

이 사이트의 다른 거의 모든 것과 달리 Email Optin 모듈에 테두리를 사용하고 싶습니다. 따라서 "User Border"를 yes로 이동하고 색상을 #ffffff로 설정하고 Custom Padding을 모든 면에서 15px로 설정합니다.

완료되면 고급 탭으로 이동하여 사용자 정의 CSS 아래의 기본 요소에 추가하여 모듈의 모서리를 둥글게 만듭니다.

border-radius:10px;

작업을 저장하면 이메일 수신이 가능합니다!

쇼 노트 페이지에 필요한 유일한 다른 것은 다른 페이지에서 사용하기 위해 이 모듈을 저장하는 것입니다. 사이트 전체에서 이메일 선택 항목이 일관되게 유지되기를 원하므로 이를 전역 항목으로 저장할 것입니다. 모듈 위로 마우스를 가져갈 때 "라이브러리에 추가 버튼"을 클릭하고 "이 항목을 전역 항목으로 만들기" 확인란을 선택했는지 확인합니다.

이제 여러 페이지에서 사용할 수 있는 단일 요소가 있습니다. 그리고 각 모듈을 개별적으로 변경할 수 있는 위의 팟캐스트 플레이어 및 버튼과 달리 변경하면 모든 인스턴스에 반영됩니다.

그리고 거기에는 쇼 노트 페이지 템플릿이 있습니다! 또한 전체 페이지를 라이브러리에 저장하여 가져오기만 하면 각 에피소드에 필요한 요소를 변경할 수 있습니다.

이제... 기록 보관소로! 결승선이 눈앞에!

아카이브 페이지 구축

WordPress 대시보드로 이동하여 새 페이지 추가로 이동하고 이름을 지정하고(내 이름은 "아카이브") Divi Visual Builder를 엽니다. 쉬워요.

거기에 도착하면 텍스트 모듈이 있는 새로운 단일 열 행을 추가하십시오.

설정으로 이동하여 WYSIWYG 편집기에 페이지 제목을 입력합니다.

디자인 탭에서 텍스트 색상을 밝게, 방향을 가운데로 설정합니다. 글꼴을 "Special Elite"로, 글꼴 크기를 50px로 설정합니다.

모바일에서 텍스트가 잘 보이도록 하려면 상단 및 하단 여백을 40px로 변경해야 합니다.

작업을 저장하고 준비를 마치고 아카이브에 배경을 추가할 준비를 하십시오! 파란색 + 상자의 설정을 열고 배경 이미지를 선택하고 Show Notes에서 했던 것처럼 시차를 설정합니다. 다시 말하지만, 미리보기를 사용하여 이 하나의 회색조를 만들었습니다.

디자인 탭에서 상단 및 하단 패딩을 각각 55px 및 176px로 설정하여 아카이브에 얼마나 많은 게시물이 있는지에 관계없이 전체 페이지에서 시차 효과를 볼 수 있도록 합니다.

왜 175 대신 176px입니까? 저는 반항아이기 때문에 그렇습니다.

작업을 저장하면 다음이 표시됩니다.

다음으로 새 단일 열 행을 추가합니다. 이번에는 블로그 모듈을 삽입합니다. 이렇게 하면 설정한 WordPress 루프가 무엇이든 표시되며, 청취자가 예상할 내용을 알 수 있도록 발췌 및 제목이 되기를 원합니다.

설정으로 이동하여 다음과 같이 콘텐츠 탭에서 옵션을 업데이트합니다.

게시물 번호: 10(또는 귀하의 사이트에 가장 적합하다고 생각하는 모든 것 – 이 번호가 표시된 후 페이지가 매겨집니다)
콘텐츠: 발췌 부분 표시(사용자가 플레이어에서 에피소드를 클릭하여 들을 수 있기를 원하기 때문)
추천 이미지 표시: 예
그리드 타일 배경색: rgba(73,73,73,0.72)

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

레이아웃: 그리드
헤더 글꼴: Special Elite
헤더 텍스트 색상: #ffffff
본문 글꼴: Special Elite
본문 색상: #ffffff
메타 글꼴: 특수 엘리트
메타 텍스트 색상: #ffffff
테두리 사용: 예
테두리 색상: #ffffff
테두리 너비: 1px
테두리 스타일: 단색

모든 설정이 완료되면 마지막으로 스타일을 지정해야 합니다. 그리드 자체에는 각 상자에 날카로운 사각형 모서리가 있으며 사이트의 나머지 부분과 일치하도록 10px 테두리 반경을 원합니다.

WordPress 대시보드 -> Divi -> 테마 옵션으로 이동한 다음 사용자 정의 CSS까지 아래로 스크롤합니다. 다음 코드를 상자에 추가하여 개별 발췌 상자의 모서리를 둥글게 만듭니다.

.et_pb_post {
 border-radius: 10px;
}

".et_pb_post"는 Divi가 해당 상자를 전체적으로 조정하는 데 사용하는 CSS 클래스입니다.

그런 다음 모든 작업을 저장합니다.

남은 일은 라이브러리에서 Return Home 버튼을 추가하는 것뿐입니다. 검은색 +를 클릭하여 블로그 모듈과 동일한 행에 추가합니다.

Hot digity dog, 방금 아카이브 페이지 설정을 마쳤습니다.

축하 해요! 아카이브 페이지 설정을 완료했습니다. 화면 하단의 보라색 +를 클릭하여 아카이브 페이지를 템플릿으로 저장하면 버킷 목록에서 다른 항목을 확인할 수 있습니다. 어제와 오늘 사이에 완전히 작동하는 팟캐스트 플레이어, 홈페이지, 아카이브, 및 개별 쇼노트용 템플릿입니다.

결론적으로

그리고 그게 다야! 두 개의 팟캐스트 페이지 자습서를 따라와 주셔서 감사합니다. 이 링크에서 첫 번째 Divi로 아름다운 팟캐스트 페이지를 만드는 방법을 볼 수 있습니다. 질문이나 의견이 있으시면 아래에 남겨주세요. 최선을 다해 답변해 드리겠습니다!