動的サイトタイトルとタグラインをDiviグローバルヘッダーに追加する方法

公開: 2020-05-15

動的なサイトタイトルとタグラインをDiviグローバルヘッダーに追加する方法を知っていると、DiviWebサイトを構築するときに役立ちます。そして、それを行う理由はいくつかあります。まず、すべてのサイトにロゴがあるわけではありません。サイトのタイトルは、ロゴの代わりになります。もう1つの理由は、誰もが見ることができるサイトに関する重要な情報を含めることで、ブランドを後押しすることです。

このチュートリアルでは、動的なサイトタイトルとタグラインをDiviグローバルヘッダーに追加する方法を示します。このソリューションは、WordPressのバックエンドからサイトのタイトルとタグラインを動的にプルします。さらに、Diviのすべての強力なデザインオプションを使用して、タイトルとタグラインを好きなようにカスタマイズできます。

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。

動的に表示されているヘッダーの上部中央にあるサイトのタイトルとタグラインに注目してください。

ダイナミックサイトタイトルとタグラインDiviグローバルヘッダーテンプレートを無料でダウンロード

このチュートリアルのグローバルヘッダーテンプレートを入手するには、まず下のボタンを使用してダウンロードする必要があります。ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

テンプレートをインポートするには、Divi> ThemeBuilderに移動します。

ページの右上にある移植性アイコンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

完了すると、グローバルヘッダーテンプレートがDiviテーマビルダーで利用できるようになります。

チュートリアルに取り掛かりましょう。

WordPressのサイトタイトルとタグライン

すべてのWordPressサイトには、サイトのタイトルとタグラインがあります。サイトタイトルは基本的にサイトの名前であり、タグラインは通常サイトの内容を説明する短い文です。

WordPressをインストールするときにサイトのタイトルを追加して忘れることは珍しくありません。

また、タグラインが存在することに気付いていない人もいますが、更新に時間がかかることはほとんどありません。さらに、Diviテーマを使用する場合、サイトのタイトルとタグラインはデフォルトではサイトに表示されないため、無視するのは簡単です。ただし、サイトのタイトルとタグラインはどちらもWebサイトの重要な要素であり、検索エンジンによって認識されます。

WordPressダッシュボードに移動し、[設定]> [一般]に移動すると、WordPressでサイトのタイトルとタグラインをいつでも見つけて更新できます。

または、テーマカスタマイザーを使用して別のルートをたどり、一般設定でサイトタイトルを更新することもできます。

WordPressのバックエンドのどこにサイトのタイトルとタグラインが存在するかがわかったので、それらをDiviヘッダーに追加する方法を見てみましょう。

Diviのグローバルヘッダーに動的サイトタイトルとタグラインを追加する方法

既製のグローバルヘッダーテンプレートのインポート

このチュートリアルでは、完全なヘッダーを最初から作成するのではなく、動的なサイトのタイトルとタグラインを既存のヘッダーに追加する方法に集中します。これにより、時間を節約し、明快さを向上させることができます。したがって、このヘッダーデザインをすぐに開始するには、4番目のテーマビルダーパックから事前に作成されたグローバルヘッダーテンプレートをインポートします。

テーマビルダーパックをダウンロードしたら、ファイルを解凍して、デフォルトのWebサイトテンプレートJSONファイルを見つけます。

次に、Divi> ThemeBuilderに移動します。

右上の移植性アイコンをクリックします。移植性ポップアップ内で、デフォルトのWebサイトテンプレートJSONファイルを選択し、インポートボタンをクリックします。

テンプレートがテーマビルダーに追加されたら、フッターテンプレートを削除し、クリックしてグローバルヘッダーを編集します。

動的サイトタイトルとタグラインをヘッダーに追加する

テンプレートレイアウトエディタ内に、すでにデザインされた既成のヘッダーが表示されます。すぐにカスタマイズを開始できます。

ロゴを移動する

開始するには、ロゴを表示している画像モジュールを（動的に）上の行の中央の列から上の行の左の列にドラッグします。

召喚状モジュールを追加して、サイトのタイトルとタグラインを表示する

次に、新しいCall to Actionモジュールを一番上の行の中央の列（ロゴがあった場所）に追加します。

Call to Actionモジュールを使用して、サイトのタイトルとタグラインを表示します。

ただし、コンテンツの追加を開始する前に、まず背景色を使用しないを選択します。

動的サイトタイトルの追加

コンテンツ設定の下で、タイトル入力ボックスにカーソルを合わせ、[動的コンテンツを使用]アイコンをクリックします。次に、リストから「サイトタイトル」を選択します。

動的サイトタグラインを追加する

次に、本文領域にカーソルを合わせて、「動的コンテンツを使用」アイコンを選択します。次に、リストから「サイトタグライン」を選択します。

動的ホームページリンクを追加

特にロゴを置き換える場合は、クリックするとサイトのタイトルがホームページにリダイレクトされるのが一般的です。モジュール全体をホームページにリダイレクトするには、ホームページリンクを動的コンテンツとしてモジュールリンクURLに追加します。

サイトのタイトルとタグラインのテキストデザイン

これで、サイトのタイトルとタグラインがヘッダーに動的に表示されます。今やらなければならないのは、スタイリングを追加することだけです。サイトのタイトルをデザインするにはタイトルテキストをカスタマイズし、タグラインをデザインするには本文テキストをカスタマイズする必要があることを忘れないでください。

[デザイン]タブにジャンプして、以下を更新します。

タイトルフォント：Heebo
タイトルフォントの太さ：太字
タイトルフォントスタイル：TT
タイトルテキストサイズ：32px（デスクトップ）、24px（タブレットと電話）
タイトル文字の間隔：0.3em
ボディフォント：Roboto
ボディフォントスタイル：斜体
本文の色：
本文サイズ：13px
本文の文字間隔：0.1em
ボディラインの高さ：1em

中央揃えを支援するには、次のカスタムCSSをプロモーションの説明に追加して、本文の下のデフォルトのパディングを削除します。

padding-bottom: 0px

追加の設計調整

チュートリアルのこの最後の部分では、ヘッダーにいくつかの追加のデザイン調整を加えて、アイテムが各列の垂直方向の中央に配置されるようにし、ボタンに独自のデザインを与えます。また、タグラインに前後の波線を追加します（キック用のみ）。

列/コンテンツを垂直方向に中央揃え

現在、一番上の行は、flexプロパティを使用する「EqualizeColumnHeights」アクティブです。小さなcssスニペットを追加して、すべての列が行内の垂直方向の中央に配置されるようにすることで、これを利用できます。これを行うには、一番上の行の設定を開き、次のCSSをメイン要素に追加します。

align-items: center;

ボタンで列を更新する

次に、一番上の行の列3の設定を開き、背景色とパディングを取り出します。

ボタンの背景を更新する

次に、ボタンモジュールの設定を開き、次のように新しい背景グラデーションで背景を更新します。

グラデーションの背景左の色：#ffffff
グラデーションの背景の正しい色：＃1dbf73
グラデーション方向：135度
開始位置：10％
終了位置：0％

タグラインへの前後の文字の追加

各動的コンテンツ要素は、歯車アイコンをクリックして編集できます。タグラインに前後の文字を追加するには、タグラインを含むアクション呼び出しモジュールの設定を開き、サイトのタグライン動的コンテンツの編集アイコンをクリックします。次に、入力の前後に文字を追加します。

最終結果

結果を表示するには、サイトの任意のページを開きます。ダイナミックなサイトタイトルとタグラインが美しく表示されるはずです！

これがタブレットと電話でどのようにスタックするかです。

最終的な考え

動的なサイトタイトルとタグラインを使用してグローバルヘッダーをカスタマイズできるのは本当に素晴らしいことです。多くのサイトで役立つもののようです。また、ロゴに加えてサイトのタイトルとタグラインを含めて、ブランド表現をさらに強化するというアイデアも気に入っています。

コメントでお返事をお待ちしております。

乾杯！