Diviでグローバルヘッダーをアニメーション化する方法

あなたのヘッダーはあなたのウェブサイトの最も重要な部分の1つです。 それはあなたのページ、投稿、行動への呼びかけを結びつけます。 これは、訪問者が自動的に探しに行くものの1つでもあるため、探しているものを見つけるのに時間を無駄にすることはありません。 ヘッダーを強調する方法をお探しの場合は、この投稿をお楽しみください。 Diviのテーマビルダーを使用してカスタムビルドのグローバルヘッダーをアニメーション化する方法を紹介します。 可能性は無限大ですが、すぐに始めることができる2つのアニメーションの例を紹介します。 JSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズの2つの例を簡単に見てみましょう。

例1

デスクトップ

モバイル

例2

デスクトップ

モバイル

アニメーショングローバルヘッダーを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

私たちのYoutubeチャンネルを購読する

1. Divi Theme Builderに移動し、グローバルヘッダーの作成を開始します

Diviテーマビルダーに移動します

WordPressバックエンドのDiviテーマビルダーに移動することから始めます。

ゼロからグローバルヘッダーを構築する

[グローバルヘッダーの追加]をクリックし、[グローバルヘッダーの作成]を選択して続行します。

2.グローバルヘッダーブロックデザインを構築する

セクション設定

間隔

テンプレートエディタに入ると、グローバルヘッダーの作成を開始できます。 後で2つの異なるコンテナにアニメーションを追加できるように、「ブロック」デザインが進行中であることを確認しています。 列+モジュール。 テンプレートエディタ内で気付くセクションを開き、デフォルトの上下のパディングをすべて削除します。

• トップパディング：0px
• ボトムパディング：0px

ボックスシャドウ

次にボックスシャドウを追加します。

• ボックスシャドウブラー強度：80px
• 影の色：rgba（13,60,216,0.24）

Zインデックス

また、[詳細設定]タブでもセクションのzインデックスを増やすようにしてください。 これにより、グローバルヘッダーコンテンツがすべてのページ/投稿コンテンツの上に表示されるようになります。

• Zインデックス：99999

新しい行を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

サイジング

モジュールをまだ追加せずに、行の設定を開き、行が画面の幅全体を占めるようにします。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 列の高さを等しくする：はい
• 幅：100％
• 最大幅：100％

間隔

次に、デフォルトの上下のパディングをすべて削除します。

• トップパディング：0px
• ボトムパディング：0px

可視性

行のオーバーフローも「表示」に設定してください。

• 水平方向のオーバーフロー：目に見える
• 垂直オーバーフロー：目に見える

列設定（3つすべて）

背景色

行の設定が完了したら、列のスタイルも設定する必要があります。 各列を開き、それに応じて背景色を変更します。

• 列1の背景色：#efefef
• 列2の背景色：＃ffcb0f
• 列3の背景色：＃2848ff

間隔

各列にもカスタムの上部と下部のパディングを追加します。

• トップパディング：0.5vw（デスクトップ）、1vw（タブレットと電話）
• ボトムパディング：0.5vw（デスクトップ）、1vw（タブレットと電話）

主な要素

また、すべての列のコンテンツが垂直方向の中央に配置されるように、各列のメイン要素に3行のCSSコードを追加します。

display: flex;
flex-direction: column;
justify-content: center;

列1Zインデックス

最後になりましたが、列1の設定を開き、可視性設定のzインデックスを増やします。

• Zインデックス：10

メニューモジュールを列1に追加

メニューを選択

列1のメニューモジュールから始めて、モジュールを追加します。選択したメニューを選択します。

ロゴをアップロード

次にロゴをアップロードします。

背景を削除

モジュールの背景色を削除して続行します。

レイアウト

[デザイン]タブに移動し、次の設定がレイアウトに適用されることを確認します。

• スタイル：左揃え
• ドロップダウンメニューの方向：下向き

メニューテキスト設定

次にテキスト設定のスタイルを設定します。

• メニューフォント：Montserrat
• メニューテキストの色：＃000000
• メニューテキストサイズ：0.7vw（デスクトップ）、2vw（タブレット）、3vw（電話）

ドロップダウンメニューの設定

ドロップダウンメニューの設定と一緒に。

• ドロップダウンメニューの線の色：#ffffff

アイコン設定

また、ハンバーガーメニューのアイコンの色も変更します。

• ハンバーガーメニューアイコンの色：＃2848ff

サイジング

さまざまな画面サイズでロゴの最大幅を変更して続行します。

• ロゴの最大幅：6vw（デスクトップ）、9vw（タブレット）、13vw（電話）

間隔

そして、左右の余白を追加して、モジュールの設定を完了します。

• 左マージン：2vw
• 右マージン：2vw

列1にコードモジュールを追加する

VWの応答性のためのCSSコードを挿入する

これで、メニューモジュールで、テキストサイズと間隔の値にビューポート幅の単位を使用しました。 これは、2行に分割することなく、さまざまなデスクトップ画面サイズに最大8つのメニュー項目を配置できるようにするために行いました。 メニュー項目間のスペースもvwユニットで作成されていることを確認する必要があります。 これを行うには、コードモジュールを列1に追加し、CSSコードの次の行を挿入します。

<style>
.et-menu>li {
padding-left: 1vw !important;
padding-right: 1vw !important;
}
</style>

ソーシャルメディアフォローモジュールを列2に追加

ソーシャルネットワークを追加する

次のコラムでは、ソーシャルメディアフォローモジュールが必要です。 選択したソーシャルネットワークを追加します。

ソーシャルネットワークスタイルを個別にリセットする

各ネットワークの設定をリセットして続行します。

配置

モジュールの配置を変更して、モジュールの設定を完了します。

• モジュールの配置：中央

ボタンモジュールを列3に追加

コピーを追加

次の最後の列に進みます。 そこでは、ボタンモジュールのみが必要になります。 選択したコピーをいくつか追加します。

配置

デザインタブに移動し、ボタンの配置を変更します。

• ボタンの配置：中央

ボタンの設定

ボタンのスタイルを設定して、モジュールの設定を完了します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：1vw（デスクトップ）、1.2vw（タブレット）、2vw（電話）
• ボタンのテキストの色：#ffffff
• ボタンの境界線の幅：0px

• ボタンの境界線半径：0px
• ボタンフォント：Montserrat
• ボタンのフォントの太さ：超太字
• ボタンのフォントスタイル：大文字

3.一致するアニメーションを要素に追加します

グローバルヘッダーアニメーションコンボ＃1

列1のアニメーション

グローバルヘッダーを作成したので、アニメーションを追加します。 最初のアニメーションを再作成するには、列1の設定を開き、次のアニメーションを追加します。

• アニメーションスタイル：ズーム
• アニメーションの方向性：上
• アニメーションの開始不透明度：100％

列2のアニメーション

次のアニメーション設定を次の列2に追加します。

• アニメーションスタイル：ズーム
• アニメーションの方向：下
• アニメーションの遅延：500ms
• アニメーションの開始不透明度：100％

列3のアニメーション

次のアニメーションを列3に割り当てて、列の設定を完了します。

• アニメーションスタイル：ズーム
• アニメーションの方向性：上
• アニメーションの遅延：1000ms
• アニメーションの開始不透明度：100％

モジュールアニメーション（3つのモジュールすべて）

列の設定が完了したら、各モジュールを個別に開き、次のアニメーションを使用します。

• アニメーションスタイル：フェード
• アニメーションの遅延：1500ms

グローバルヘッダーアニメーションコンボ＃2

列1のアニメーション

代わりに2番目のアニメーションセットを再作成したいですか？ 列1の設定を開き、次のアニメーションを追加します。

• アニメーションスタイル：スライド
• アニメーションの方向性：上
• アニメーションの開始不透明度：100％

列2のアニメーション

次の列2には、次のアニメーション設定を使用します。

• アニメーションスタイル：スライド
• アニメーションの方向性：上
• アニメーションの遅延：500ms
• アニメーションの開始不透明度：100％

列3のアニメーション

そして、次のアニメーション設定を列3に適用して、列の設定を完了します。

• アニメーションスタイル：スライド
• アニメーションの方向性：上
• アニメーションの遅延：1000ms
• アニメーションの開始不透明度：100％

モジュールアニメーション（3つのモジュールすべて）

次に、各モジュールを個別に開き、次のアニメーションを追加します。

• アニメーションスタイル：スライド
• アニメーションの方向：下
• アニメーションの遅延：1500ms

4.ビルダーの変更を保存して結果を表示する

アニメーションの設定が完了したら、グローバルヘッダーを保存し、テーマビルダーを終了して、Webサイトで結果を表示できます。

プレビュー

すべての手順を完了したので、さまざまな画面サイズの例を最後に見てみましょう。

例1

デスクトップ

モバイル

例2

デスクトップ

モバイル

最終的な考え

このチュートリアルでは、Diviの組み込みオプションとテーマビルダーを使用してグローバルヘッダーをアニメーション化する方法を示しました。 これは、Webサイトのヘッダーに注意を引くための優れた方法です。 Diviの組み込みアニメーションオプションにより、可能性は無限大です。 始めるのに役立つように、2つの異なる例を示しました。 JSONファイルも無料でダウンロードできました！

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。