Diviで美しいポッドキャストページを作成する方法

あなたは素晴らしいポッドキャストを持っています。 しかし、あなたのウェブサイトはいくつかの作業が必要な場合があります。 それはその仕事をしますが、目立ちません。 ポッドキャスター、恐れることはありません！ 私はあなたをカバーしてもらいました。

Diviを使用して、ポッドキャスト用の簡単に更新できるホームページだけでなく、スタイリッシュなアーカイブページと個々のエピソードのテンプレートを作成する簡単な方法を説明します。

今日の最終製品：3セクションのポッドキャストホームページ

優れたポッドキャストが維持しなければならない個性を失うことなく、デザインをシンプルかつ最小限に抑えたかったのです。 このデザインは、靴と幸せに焦点を当てた、 You're AnAll-Starと呼ばれる架空のインディーポッドキャスト用です。 そのテーマを反映したデザインにしたかった。

最初のセクションでは、明るい色を使用してユーザーの注意を引き、左側のポッドキャストについて簡単に説明し、Diviオーディオモジュールを使用してポッドキャストのエピソードを提示し、すぐに聴けるようにします。

ユーザーが下にスクロールすると、美学は[選択されたエピソード]セクションにわずかに移動します。このセクションでは、Diviオーディオモジュールを使用して、簡単にアクセスできるコンテンツと、番組のアーカイブにアクセスするオプションを表示します。 背景は、エピソード自体に注意を引くための視差です。

最後のセクションは、単に電子メールのオプトインです。 すべてのブランド、ポッドキャスト、ブログ、および会社に1つ必要です。それを目立たせるために、このセクションをカラーの背景に戻し、2番目のセクションの視差がさらに注意を引くのに役立つように十分に小さくしました。

以下では、サイトの各モジュール、セクション、およびページをどのようにスタイル設定および作成したかについて、ステップバイステップのチュートリアルを提供します。

必要な資産

このデザインの素晴らしいところは、Divi自体以外に多くのリソースを必要としないことです。 必要なのは、背景に使用する5つの高解像度画像と、エピソードに使用するポッドキャストアートとサムネイルだけです。

私のすべての画像はUnsplashからのものです（このサイトのすべての画像はこのコレクションにあります）。 プレビューを使用してそれらの一部を白黒に変換しましたが、任意の画像編集ソフトウェアを使用できます。 それらのほとんどすべてで、グレースケール/白黒オプションを選択するか、彩度をゼロに下げることができます。

それ以外に、必要なすべてのリソースはDiviの内部にあります。 それでは、それを手に入れましょう！

ポッドキャストウェブサイトのホームページ：最初のセクション

WordPressダッシュボードに新しいページを作成し、それをサイトのフロントページとして設定することから始めます。 （私は都合よく私の名前を「ホーム」と名付けました。）

ここで、戻って新しいページを編集します。 右側のサイドバーの[ページ属性]ボックス内で、デフォルトのテンプレートを空白のページテンプレートに変更します。

まず、3列の行を作成します。

真ん中の列の中に、Diviディバイダーモジュールを挿入します。

仕切り設定内の[デザイン]タブで、高さを600に設定します。これにより、2つの外側の列（セクションのメインコンテンツ）が分離されるだけでなく、セクションの高さが十分に保たれ、ビューポートの解像度。 （デフォルトではモバイルでは非表示のままです。）

次に、左側の列に2つのテキストモジュールを追加します。 このプロジェクトでは、水平ヘッダーが適切ではないように見えるため、最初のテキストモジュールは単にタイトルになります。

[テキスト設定]の[コンテンツ]タブで、コンテンツボックスにタイトルを追加します。

[デザイン]タブで、テキストの色を「明るい」に更新し、テキストの向きを「中央」に変更します。 次に、テキストのフォントとサイズを調整します。 見た目が悪いので「SpecialElite」というフォントを選び、サイズを60に設定しました。また、テキスト行の高さを1emに設定しました。

それが処理されたら、2番目のテキストボックスに移動します。 これをポッドキャストの簡単な宣伝文として使用しています。

[コンテンツ]タブで、次のオプションを更新します。

コンテンツ：説明のテキストを入力します（iTunesやその他のサービスで使用する説明の切り捨てられたバージョンをお勧めします）
背景色：rgba（0,0,0,0.4）

前のボックスで行ったように、[デザイン]タブで、テキストの色として[明るい]を選択し、テキストの向きとして[中央]を選択します。 また、テキストフォントを20pxサイズの「SpecialElite」に設定します。

最後に、テキストボックス全体の周りに10pxのパディングを追加します。

その後、[詳細設定]タブに移動し、[カスタムCSS]で、これを[メイン要素]フィールドに入力して、テキストボックスの角を丸めます。

border-radius: 10px;

それが済んだら、新しいサイトの最初の2列が完成します。 やったー！ ページの下部にある紫色の円をクリックし、緑色の保存ボタンを押して、作業内容を保存します。

素晴らしい仕事です！

ただし、もう少し視覚的に魅力的にするには、セクションの背景を設定する必要があるため、青い（セクション）ボックスの設定に移動して、背景画像をアップロードします。 私は1920×1280の解像度を維持する傾向があります。

これで、次のようなものが表示されるはずです。

今では、次のように自問しているかもしれません。「ポッドキャストはどうですか？ これはポッドキャストサイトであり、ポッドキャストについてはまだ何もしていません！」 あなたは完全に正しいです。 それでは、行の3番目の列にある（ご想像のとおり）オーディオモジュールを選択して、オーディオを実行してみましょう。

デフォルトのオーディオモジュールは、このサイトで使用するテーマに正確に適合していないため、次のように説明します。

これに：

オーディオモジュールの設定を開きます。 オーディオフィールドでは、使用するホストに独自のファイルをアップロードすることも、使用するポッドキャスティングサービスのメディアファイルに直接リンクすることもできます。 私はLibsynを使用しているので、メディアのURLを取得して貼り付けました。

（おもしろい事実：このモジュールを介してサイトで再生をクリックした人は、Libsynダッシュボードのダウンロードとしてもカウントされます。スコア！）

次に、リンクしたエピソードのタイトルを[タイトル]に、自分の名前を[アーティスト名]（またはショーで通り過ぎるもの）に配置します。靴に関する架空のポッドキャストでは、チャックテイラー以外のものを選択するにはどうすればよいですか？ ）。 アルバムタイトルはポッドキャストの名前になります。

次に、その緑がかった青緑色を完全に透明な背景に変更しましょう。 色は関係ありません。 透明度バーを一番下までスライドさせるか、RGBAの最後の桁が0になるまでスライドさせます。

カバーアートの画像には、この特定のエピソードのサムネイルか、iTunesやその他の場所で使用しているポッドキャストアートのいずれかを使用するのが最適です。

ポッドキャストの詳細が並べ替えられたら、[デザイン]タブに移動して、このプレーヤーを自分のものにすることができます。

[テキストの色]オプションで[ライト]を選択します。 フォントを「SpecialElite」に、タイトルサイズを50pxに、キャプションサイズを20pxに設定します。

また、この特定のプレーヤーの上部マージンを50pxに設定しました。これは、このマージンによってプレーヤーがセクションの水平方向の中央に配置され、モバイルに切り替えるときに要素間の間隔が広くなるためです。 （この設定は、スマートフォンアイコンをクリックしない限り、すべてのビューポートサイズに適用されます。）

背景が透明なので、最初の列のテキストボックスに一致するように角を丸める必要がないので、[保存]をクリックします。

このポッドキャストプレーヤーはショーの主役であるため、毎回再作成する必要はありません。このモジュールをDiviライブラリに保存します。これにより、サイト全体で簡単に複製できます。必要に応じて編集します。

必要なテンプレート名を入力し、「これをグローバルアイテムにする」にチェックを入れないでください。 このシリーズのパート2ではそのオプションを使用しますが、現時点では使用しません。

わかった！ もう1つの要素と、最初のセクションが完了しました。 （ただし、心配しないでください。それらすべての中で最も関与しています。）

ほとんどのポッドキャストは、リスナーがエピソードで議論されたことに戻って再訪するためのブログまたはショーノートを保持しています。 あなたのポッドキャストも同じです、きっと。 ポッドキャストのshownotesにリンクを追加するのはまったく簡単です。

3番目の列に新しいテキストブロックを作成し、設定を開いて、必要なリンクテキストを入力します。 この例では、それは自明の「ショーノートを読む」です。

ツールバーのアイコンをクリックしてリンクを追加し、ショーノートのURLを入力/貼り付けします。 （ここでも、パート2で、ショーノートのブログ投稿を作成してスタイルを設定する方法を説明します。）WordPressのパーマリンク構造を「投稿名」に設定しているので、私がしなければならないのは、スラッグを入力することだけです。このエピソードのために書いた投稿。

（補足：ドメイン情報を入力せず、スラッグのみを入力することで、ドメイン情報に関係なく、ユーザーをそのページに誘導するようにWordPressに指示します。これは、ドメインを変更する場合に非常に役立ち、リンク切れを防ぐのに役立ちます！）

そのリンクを保存するだけで、準備が整います。

また、ポッドキャストプレーヤーと同じ方法で、このモジュールをライブラリに保存する必要があります。

出来上がり！ あなた自身の…待ってください。 ええとああ。 あなたのショーノートのリンクは…醜いです！

でも心配はいりません。 醜いリンクは簡単に修正できます！ テキストモジュールの設定を使用してテキストの色を変更しても、これらの単語はリンクであるため、影響を受けません。

Divi –>テーマオプションの[カスタムCSS]フィールドに移動し、下部にこれを入力します。

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

これにより、テキストが白のままになります（サイトの残りのテキストと同じように、他のほとんどのリンクと同じように下線が引かれていることを確認し、マウスでカーソルを合わせると太字になります）。

必ず保存してください。これでポッドキャストプレーヤーが完成しました。

そして、この最初のセクションの最後の微調整については、[行の設定]（緑色のボックス）をクリックします。

「カスタム幅を使用」を選択します。 単位がパーセンテージに設定されていることを確認し、スライダーを80に移動します。これを行うと、その行がユーザーのビューポートのサイズの80％を占めるようになり、すべてがまとまらないようになります。

ポッドキャストの新しいウェブサイトのトップセクションもそうです！ 今ではこんな感じになっているはずです。

それを保存すれば、そのように、ほとんどの作業が完了します！ そして、Diviのライブラリ機能のおかげで、次のいくつかのセクションが飛んでいきます！ ちょうど見る。

ポッドキャストウェブサイトのホームページ：2番目のセクション

このセクションでは、ポッドキャストの選択されたエピソードを紹介し、ユーザーがアーカイブにアクセスできるようにします（これは、ショーノートページのように、パート2にあります）。

最初に行うことは、セクションの下部にある青い+をクリックして、通常のセクションを追加することにより、実際に新しいセクションを作成することです。 そうすることで、ビジュアルビルダーに別の青いボックスが作成されます。 単一列の行に追加します。

それが整ったら、上記と同じ方法で背景を追加しましょう。今回は、セクション設定で「視差オプションを使用」を選択します。 「CSS」ではなく「TrueParallax」のドロップダウンを維持します。

これは、ホームページの視差で使用する唯一のセクションです。 効果を控えめに使用することで、強調したいコンテンツに注意を向けることができると思います。

保存してから、新しいテキストボックスを行に挿入します。 「SelectedEpisodes」と入力し、WYSIWYGエディターの中央に配置し、設定に進んで、テキストフォントを「SpecialElite」、テキストサイズを50pxにします。 あなたは今このようなものを見るはずです：

その下にある緑色の+をクリックして新しい3列の行を作成し、最初の列に「[ライブラリから追加]タブ」と入力します。 （現在、これらすべてのライブラリオプションを使用できるわけではありませんが、後で使用できます！）

「ポッドキャストエピソード」または上記のプレーヤーに名前を付けたものを選択します。 次に、その下に別のモジュールを追加し、ライブラリに再度移動して、保存した「ShowNotesLink」モジュールを追加します。 これが表示されるまで、3つの列すべてに対してこれを実行します。

必要なエピソードをすべて追加するまで、これを続けます。 各エピソードのタイトル、アルバムアート、ショーノートのリンクを編集します。 デザインを選択した背景に合わせるために、2行目を追加し、2列目のみを入力しました。

このセクションに残されているのは、「アーカイブの参照」ボタンを追加することだけです。 緑の+をクリックして一番下に新しい行を作成し、単一の列レイアウトを使用します。 「ボタン」モジュールを挿入します。 これにより、非常に読みにくいボタンが作成され（もちろん、背景によって異なります）、簡単なスタイルが必要になります。

Buttonモジュールの設定を開き、アーカイブとなるページのURLスラッグを入力します。 わかりやすい「/ archives」を使用し、「Browse the Archives」というテキストを使用して、ボタン自体を中央に配置しました。

[設定]タブで、[ボタンにカスタムスタイルを使用する]をクリックし、背景色を「#ffffff」に、テキストの色を「＃000000」（それぞれ白と黒）に設定します。

次に、境界線の半径を10pxに設定し、フォントを「Special Elite」に設定し、[ボタンの追加]アイコンを[デフォルト]から[いいえ]に変更して、ボタンの角を丸めます。

最後に、ボタンホバーの境界線の半径を10pxに変更して、ボタンの上にマウスを置いたときに丸くなるようにします。

これをライブラリに保存して、他のボタンのスタイルを使用できるようにしました。

これで、2番目のセクションは完了です。 ポッドキャスター、ほぼ完了です。 文字通り、3番目に丸めています。

ポッドキャストウェブサイトのホームページ：第3セクション

これは、静的な背景上の単一のモジュールになります。
まず、セクション2で行ったように、倍幅の列を持つ新しい青いボックスを作成し、メニューから「EmailOptin」モジュールを選択します。

これが点灯しているのがわかりますが、これは私たちのデザインにはまったく適合していません。 ただし、これは非常に簡単な修正です。

モジュールの設定に移動し、次のオプションを更新します。

タイトル：タイトルを意図的に空白のままにしました
コンテンツ：Call to Actionの宣伝文を追加し、中央に配置します。
サービスプロバイダー：私はMailchimpを使用しているので、ここで使用しました。
背景色：透明; これにより、ボタン自体も透明になります。

あとは、メールサービスが提供されていることを確認するだけです。そうしないと、ビルダーを保存して終了した後、フォームが表示されません。 Mailchimpを使用している場合は、サポートドキュメントにAPIキーの検索に関する優れたドキュメントがあります。

キーを取得したら、WordPressダッシュボードに移動し、もう一度Divi –>テーマオプションに移動して、適切な名前の「MailchimpAPIキー」フィールドにMailchimpAPIキーを入力します。

それが保存された後、美しい完成したページを作成する前に残した唯一のステップは、3番目のセクションの背景を設定することです。 最終製品は次のようになります。

できたね！ やったー！ これで、ポッドキャスト用の完全に機能するホームページができました。 記録を打ち、それについて世界に伝える時が来ましたよね？

明日：ポッドキャスト用の美しいアーカイブとショーノートページの作成

あなたは今素晴らしいホームページを持っているので、あなたはあなたが持っている最も素晴らしいコンテンツを紹介することができます。 しかし、あなたのファンが真の狂信者になると、彼らはあなたのショーを深く掘り下げたいと思うでしょう。

明日は、ポッドキャストエピソードのアーカイブ全体のシンプルでありながら美しいページと、各エピソードで話し合ったことを読者に伝え、登録する機会を与える各エピソードの個別のページをまとめる方法を紹介します。あなたの超驚くべき電子メールリストのために。

また明日ね！

メモページを表示：

アーカイブページ：