固定の「最新エピソード」オーディオバーをDiviヘッダーに追加する方法
公開: 2020-05-28DiviでポッドキャストWebサイトをホストしている場合は、組み込みのオーディオモジュールをすでに使用している可能性が高くなります。 さて、最新のエピソードにスポットライトを当てる特別な方法を探しているなら、このチュートリアルを気に入るはずです。 今日は、Diviヘッダーに修正された最新エピソードのオーディオバーを含める方法を紹介します。 オーディオバーに注意を引くためのテキストモジュールループアニメーションが含まれ、オーディオバーを含むグローバルヘッダーテンプレートもダウンロードできるようになります。
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
オーディオバーヘッダーテンプレートを無料でダウンロード
無料のオーディオバーヘッダーテンプレートを入手するには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
Divi Theme Builderに移動し、グローバルヘッダーの作成を開始します
Diviテーマビルダーに移動します
WordPressWebサイトのバックエンドにあるDiviThemeBuilderにアクセスすることから始めます。
グローバルヘッダーの作成を開始します
次に、グローバルヘッダーの作成を開始します。
最新のエピソードオーディオバーでグローバルヘッダーを作成する
セクション設定
背景色
テンプレートエディタに入ると、セクションが表示されます。 そのセクションを開き、背景色を変更します。 このグローバルヘッダーをポッドキャストレイアウトパックに一致させますが、他の種類のデザインスタイルを自由に使用してください。
- 背景色：＃1a1844
間隔
次に、[デザイン]タブに移動し、さまざまな画面サイズにカスタムパディング値を追加します。
- トップパディング：50px（デスクトップ）、80px（タブレットと電話）
- ボトムパディング：0px
ボックスシャドウ
ヘッダーをページ/投稿コンテンツから分離するために、セクションにもボックスシャドウを追加します。
- ボックスシャドウブラー強度：80px
- 影の色：rgba（0,0,0,0.3）
行＃1を追加
カラム構造
次の列構造を使用して、セクションに最初の行を追加して続行します。
背景色
この列全体が最新のエピソードオーディオバー専用になります。 ただし、その前に、行の設定を開いて背景色を変更してください。
- 背景色：＃fe4943
サイジング
行のデザインタブに移動し、次にサイズ設定を変更します。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 幅：90％
- 最大幅：100％
間隔
カスタムの上下のパディングも追加しています。
- トップパディング：10px
- ボトムパディング：10px
国境
次に、境界線の設定に移動し、いくつかの丸い角を追加します。
- 左下：10px
- 右下：10px
ボックスシャドウ
ボックスシャドウも含まれています。
- ボックスシャドウブラー強度：50px
- 影の色：rgba（0,0,0,0.3）
ポジション
次に、[詳細設定]タブに移動して、行全体を修正します。 行のzインデックスも増やして、セクションに追加する2番目の行と重なるようにします。
- 位置：固定
- 場所：トップセンター
- Zインデックス：11
列1の可視性
列1のオーバーフローを非表示に設定して、行の設定を完了します。 これは、この投稿のプレビューで気付くことができたテキストアニメーションに役立ちます。 オーバーフローを非表示に設定することで、アニメーションが列コンテナを超えて非表示になっていることを確認します。
- 水平オーバーフロー：非表示
- 垂直オーバーフロー：非表示
列1にテキストモジュールを追加
コンテンツを追加する
1列目のテキストモジュールから始めて、モジュールを追加します。選択したコピーをいくつか追加します。
テキスト設定
モジュールの[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- テキストフォント：Open Sans
- テキストフォントスタイル：大文字
- テキストの色：#ffffff
- Txtサイズ：15px
- テキスト文字の間隔：3px
間隔
モジュールにも負の左マージンを追加します。 これは、ループアニメーションに役立ちます。
- 左マージン：-190％
アニメーション
最後になりましたが、テキストモジュールに次のループアニメーションを追加します。
- アニメーションスタイル：スライド
- アニメーションの方向：左
- アニメーション時間：9000ms
- アニメーション強度：30％
- アニメーションの開始不透明度：100％
- アニメーション速度曲線：線形
- アニメーションの繰り返し：ループ
列2にオーディオモジュールを追加します
すべてのコンテンツを削除
2列目では、必要なモジュールはオーディオモジュールのみです。 コンテンツが削除されていることを確認してください。
オーディオファイルのアップロード
次に、最新のエピソードを含むオーディオファイルをアップロードします。
背景色を削除する
次に、モジュールの背景色を削除します。
間隔
次に、[デザイン]タブに移動し、デフォルトのパディング値に「0px」を追加して削除します。
- トップパディング：0px
- ボトムパディング：0px
- 左パディング：0px
行＃2を追加
カラム構造
次の行に進みます。 この行には、ロゴ、メニュー、ソーシャルメディアのアイコンが含まれます。 次の列構造を選択します。
サイジング
モジュールをまだ追加せずに、行設定を開き、それに応じてサイズ設定を変更します。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 最大幅：100％
間隔
次に、デフォルトの上下のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
メニューモジュールを列1に追加
メニューを選択
次に、メニューモジュールを列1に追加し、選択したメニューを選択します。
ロゴをアップロード
次にロゴをアップロードします。
背景色を削除する
次に、デフォルトの白い背景色を削除します。
メニューテキスト設定
[デザイン]タブに移動し、メニューテキストの設定を次のように変更します。
- メニューフォント：Sansを開く
- メニューテキストの色：#ffffff（デスクトップ）、＃1a1844（タブレットと電話）
- メニューテキストサイズ：15px
- テキストの配置：右
ドロップダウンメニューのテキスト設定
ドロップダウンメニュー設定でもドロップダウンメニューの線の色を変更しています。
- ドロップダウンメニューの線の色：#ffffff
アイコン設定
アイコン設定のハンバーガーメニューアイコンの色と一緒に。
- ハンバーガーメニューアイコンの色：＃fe4943
サイジング
そして、サイズ設定でロゴの最大幅を割り当てて、モジュール設定を完了します。
- ロゴの最大幅：65％
ソーシャルメディアフォローモジュールを列2に追加
ソーシャルネットワークを追加する
2行目の2列目には、ソーシャルメディアフォローモジュールが必要です。 選択したソーシャルネットワークを追加します。
配置
モジュールの[デザイン]タブに移動し、モジュールの配置を変更します。
- モジュールの配置：中央
間隔
次に、いくつかのカスタムマージン値を追加します。
- トップマージン：20px
- 下マージン：-4％（タブレットと電話のみ）
国境
そして、モジュールの境界設定にいくつかの丸い角を追加して、ヘッダーを完成させます。 グローバルヘッダーが完成したら、Divi Theme Builderの変更をすべて保存し、Webサイトで結果を確認してください。
- すべてのコーナー：50vw
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Diviの組み込みオーディオモジュールを使用してクリエイティブにする方法を紹介しました。 具体的には、カスタムビルドのグローバルヘッダーに固定オーディオバーを含める方法を示しました。 これは、ポッドキャストの最新エピソードを強調するのに最適な方法です。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。