Diviでアイコンの切り替えを使用してヘッダーのスペースを節約する方法

公開: 2021-01-06

ヘッダーをデザインする方法は、Webサイトの残りの部分のトーンを設定します。そのため、要素と相互作用を追加する方法を考えることが重要です。もちろん、ロゴやメニュー項目などの基本事項を含めることもできますが、他の行動を促すフレーズも含めることをお勧めします。ただし、ヘッダーに追加するアイテムが多いほど、ヘッダーが圧倒される可能性があります。ヘッダーでさまざまな行動の呼びかけを紹介するためのクリーンでインタラクティブな方法を探している場合は、このチュートリアルを気に入るはずです。本日は、トグルアイコンを使用してヘッダーのスペースを節約する方法を紹介します。 JSONファイルも無料でダウンロードできます！

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

プレビュー

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

デスクトップ

アイコンを切り替えます

モバイル

アイコンを切り替えます

グローバルヘッダーテンプレートを無料でダウンロード

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

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

無料でダウンロード

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

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

1.ヘッダー構造を構築する

新しいグローバルヘッダーテンプレートを作成する

まず、Divi Theme Builderに移動し、新しいグローバルヘッダーまたはカスタムヘッダーの作成を開始します。

アイコンを切り替えます

セクション＃1を追加

グラデーションの背景

テンプレートエディタに入ると、セクションが表示されます。そのセクションの設定を開き、グラデーションの背景を適用します。

色1：#ffffff
色2：#eaeaea
グラデーションタイプ：線形
グラデーション方向：90度
開始位置：50％
終了位置：50％

アイコンを切り替えます

間隔

セクションの[デザイン]タブに移動し、デフォルトの上下のパディングをすべて削除します。

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

アイコンを切り替えます

ボックスシャドウ

ボックスシャドウも追加します。

影の色：rgba（0,0,0,0.06）

アイコンを切り替えます

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

アイコンを切り替えます

サイジング

モジュールをまだ追加せずに、行設定を開き、[デザイン]タブに移動して、次のようにサイズ設定を変更します。

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

アイコンを切り替えます

間隔

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

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

アイコンを切り替えます

主な要素CSS

次に、[詳細設定]タブに移動し、さまざまな画面サイズにいくつかの主要な要素のカスタムCSSコード行を適用します。このコードは、アイテムをデスクトップの垂直方向の中央に配置するのに役立ちます。

デスクトップ：

display: flex;
place-items: center;

タブレットと電話：

display: block;

アイコンを切り替えます

列1の設定

間隔

次に、列1の設定を開き、左右にパディングを適用します。

左パディング：5％
右パディング：5％

アイコンを切り替えます

主な要素

デスクトップの列のサイズを変更し、列のメイン要素にカスタムCSSを適用することで、タブレットと電話の列を「100％」に戻します。

デスクトップ：

width: 88% !important

タブレットと電話：

width: 100% !important;

アイコンを切り替えます

列2の設定

背景色

次に、列2の設定を開き、背景色を白に変更します。

背景色：#FFFFFF

アイコンを切り替えます

間隔

この列の間隔設定にも、レスポンシブパディング値をいくつか追加します。

トップパディング：
- デスクトップ：50px
- タブレットと電話：20px
ボトムパディング
- デスクトップ：50px
- タブレットと電話：20px
左パディング：1％
右パディング：1％

アイコンを切り替えます

主な要素CSS

デスクトップでも2番目の列のサイズを変更します。小さい画面サイズでは、これを「100％」に戻します。

デスクトップ：

display: flex;
place-items: center;
width: 12% !important;

タブレットと電話：

width: 100% !important;

アイコンを切り替えます

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

メニューを選択

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

アイコンを切り替えます

ロゴをアップロード

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

アイコンを切り替えます

背景色を削除する

次に、デフォルトの背景色を削除します。

アイコンを切り替えます

メニューテキスト設定

モジュールのデザインタブに移動し、それに応じてメニューテキスト設定を変更します。

メニューフォント：プレイフェアディスプレイ
メニューテキストフォント：プレイフェアディスプレイ
メニューテキストの色：＃000000
メニューテキストサイズ：19px
メニューラインの高さ：1.4em
テキストの配置：右

アイコンを切り替えます

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

次に、ドロップダウンメニューの線の色を変更します。

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

アイコンを切り替えます

アイコン設定

アイコン設定でもアイコンの色を変更してください。

ショッピングカートのアイコンの色：＃000000
検索アイコンの色：＃000000
ハンバーガーメニューアイコンの色：＃000000

アイコンを切り替えます

サイジング

そして、次のようにサイズ設定を変更して、モジュール設定を完了します。

ロゴの最大幅：200px
幅：100％
モジュールの配置：中央

アイコンを切り替えます

宣伝文モジュール＃1を列2に追加します

コンテンツボックスを空のままにします

2番目の列に進みます。トグルアイコンを作成するには、タイトルとコンテンツのない宣伝文モジュールを使用します。最初のトグルアイコンを作成することから始め、次にモジュールを再利用して他の2つのトグルアイコンを追加します。宣伝文モジュールを追加したら、タイトルとコンテンツボックスが空であることを確認します。

アイコンを切り替えます

アイコンを選択

次に、お好みのアイコンを選択します。

アイコンを切り替えます

アイコン設定

モジュールの[デザイン]タブに移動し、アイコンの設定を次のように変更します。

アイコンの色
- デフォルト：#dbdbdb
- ホバー：＃000000
アイコンの配置：上
アイコンの配置：中央
アイコンのフォントサイズを使用：はい
アイコンのフォントサイズ：200％

アイコンを切り替えます

サイジング

サイズ設定も変更します。

コンテンツの幅：100％
幅：32％

アイコンを切り替えます

主な要素と宣伝文の画像CSS

そして、Blurb Moduleの[Advanced]タブのカスタムCSSオプションに2つのCSSコード行を追加して、モジュール設定を完了します。

主な要素：

display: inline-block;

宣伝文句：

margin-bottom: 0px !important

アイコンを切り替えます

宣伝文句モジュールを2回クローンする

最初のトグルアイコンの宣伝文句を完了したら、それを2回複製できます。

アイコンを切り替えます

アイコンの変更

複製ごとにアイコンを変更してください。

アイコンを切り替えます

2.トグルアイテムを追加します

セクション＃2を追加

サイジング

ヘッダーの基礎を設定したので、トグルアイテムを含める必要があります。そのために、前のセクションのすぐ下に新しいセクションを追加します。セクション設定を開き、このセクションの高さが「0px」であることを確認します。これにより、セクションがヘッダーデザインのスペースを占有するのを防ぐことができます。このセクションが必要な唯一の理由は、トグルアイテムを表示するためです。

高さ：0px

アイコンを切り替えます

間隔

セクションの[デザイン]タブに移動し、デフォルトの上下のパディングをすべて削除します。

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

アイコンを切り替えます

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

アイコンを切り替えます

サイジング

モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。

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

アイコンを切り替えます

間隔

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

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

アイコンを切り替えます

ポジション

そして、行全体を再配置します。この行を絶対にすると、行がデザイン内のスペースを占有するのを防ぐのに役立ちます。

位置：絶対
場所：右上隅

アイコンを切り替えます

テキストモジュール＃1を列2に追加します

コンテンツボックスに電話番号を追加する

トグルアイテムを追加する時が来ました！まず、電話番号を追加します。列2に新しいテキストモジュールを追加し、コンテンツボックスに電話番号を挿入します。

アイコンを切り替えます

背景色

次に、黒の背景色を追加します。

背景色：＃000000

アイコンを切り替えます

テキスト設定

モジュールの[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

テキストフォント：プレイフェアディスプレイ
テキストの色：#ffffff
テキストサイズ：27px
テキストの配置：中央

アイコンを切り替えます

サイジング

幅も100％であることを確認してください。

幅：100％

アイコンを切り替えます

間隔

次に、間隔設定にいくつかのカスタムパディング値を追加します。

トップパディング：10％
ボトムパディング：10％
左パディング：2％
右パディング：2％

アイコンを切り替えます

クローンテキストモジュール

最初のトグルアイテムのテキストモジュールを完了したら、それを1回複製します。

アイコンを切り替えます

コンテンツをメールアドレスに変更する

コンテンツボックスのコンテンツを変更します。

アイコンを切り替えます

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

選択したソーシャルネットワークを追加する

次に、ソーシャルメディアフォローモジュールを列2に追加します。必要な数のソーシャルネットワークを追加します。

アイコンを切り替えます

各ソーシャルネットワークの背景色を白に変更します

次に、ソーシャルネットワークごとに個別に背景色を白に変更します。

背景色：#FFFFFF

アイコンを切り替えます

背景色

次に、一般的なモジュール設定に戻り、黒い背景色を使用します。

背景色：＃000000

アイコンを切り替えます

配置

モジュールの[デザイン]タブに移動し、モジュールの配置を変更します。

モジュールの配置：中央

アイコンを切り替えます

アイコン設定

アイコン設定でもアイコンの色を変更してください。

アイコンの色：＃000000

アイコンを切り替えます

サイジング

次に、サイズ設定に「100％」の幅を適用します。

幅：100％

アイコンを切り替えます

間隔

カスタムの上下のパディングも適用します。

トップパディング：10％
ボトムパディング：10％

アイコンを切り替えます

国境

そして、境界線の設定にいくつかの丸い角を追加して、モジュール設定を完了します。

すべてのコーナー：100px

アイコンを切り替えます

3.機能を追加します

連続したCSSIDを宣伝文モジュールの最初のセクションに追加する

すべての要素が配置されたので、トグル効果の追加を開始できます。最初に行う必要があるのは、各宣伝文モジュールを個別に開き、連続したCSSIDを追加することです。

ぼかし1：ヘッダー-cta-1
宣伝文2：ヘッダー-cta-2
宣伝文3：ヘッダー-cta-3

アイコンを切り替えます

連続するCSSIDをトグルアイテムに追加する

トグルアイテムモジュールについても同じことを行います。 CSS IDの末尾の番号は、前の手順でアイコンに使用したCSSIDと一致している必要があります。

テキストモジュール1：ヘッダーアイテム-1
テキストモジュール2：ヘッダーアイテム-2
ソーシャルメディアフォローモジュール：header-item-3

アイコンを切り替えます

すべてのトグルアイテムに絶対位置を追加

そして、トグルアイテムのそれぞれを1つずつ絶対に回します。これを行うには、ワイヤフレームモードに移行することをお勧めします。

位置：絶対
場所：右上

アイコンを切り替えます

セクション＃1の最初の列にコードモジュールを追加する

すべてのCSSIDが配置されたので、クリック機能を機能させるためのコードを追加できます。列1のメニューモジュールのすぐ下に新しいコードモジュールを追加します。

アイコンを切り替えます

CSSコードを挿入

以下の印刷画面でわかるように、スタイルタグの間に次のCSSコード行を追加します。

[id*="header-cta"]{
cursor: pointer;
}
[id*="header-item"] {
visibility: hidden;
opacity: 0;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.show-item {
visibility: visible;
opacity: 1;
}
.highlight-icon{
color: #000 !important;
}

アイコンを切り替えます

JQueryコードを挿入する

カスタムJQueryコードもいくつか追加しています。 以下の印刷画面でわかるように、スクリプトタグの間にコードを追加します。

jQuery(function($){
$(document).ready(function(){
 
$('[id*="header-cta"]').click(function() {
 
var $selector = $(this).attr('id').replace('cta', 'item');
var $item = $('#' + $selector);
 
$item.toggleClass('show-item');
$('[id*="header-item"]').not($item).removeClass('show-item');

var $icon = $(this).find('.et-pb-icon');
var $allIcons = $('[id*="header-cta"]').find('.et-pb-icon');
  
$icon.toggleClass('highlight-icon');
$allIcons.not($icon).removeClass('highlight-icon');
  
});
 
});
});

アイコンを切り替えます

4.ヘッダー+アイテムの切り替えをスティッキーにする

セクション＃1をスティッキーにする

大事なことを言い忘れましたが、ヘッダーを回してアイテムをスティッキーに切り替えることもできます。目的の結果を作成するには、両方のセクションがスティッキーであり、[周囲のスティッキー要素からのオフセット]オプションが有効になっていることを確認する必要があります。最初のセクションを粘着性にします。

スティッキーポジション：トップに固執
スティッキーの下限：なし
周囲の粘着要素からのオフセット：はい
トランジションのデフォルトスタイルとスティッキースタイル：はい

アイコンを切り替えます

セクション2をスティッキーにする

セクション2についても同じようにします。それだけです。

スティッキーポジション：トップに固執
スティッキーの下限：なし
周囲の粘着要素からのオフセット：はい
トランジションのデフォルトスタイルとスティッキースタイル：はい

アイコンを切り替えます

プレビュー

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

デスクトップ

アイコンを切り替えます

モバイル

アイコンを切り替えます

最終的な考え

この投稿では、ヘッダー内でトグルアイコンを使用する方法を紹介しました。誰かがアイコンをクリックするとすぐにトグルアイテムが表示され、ヘッダーデザインのスペースを大幅に節約できます。このアプローチはユーザーの行動に焦点を合わせており、圧倒的なヘッダーデザインをデザインする必要をなくすのに役立ちます。 JSONファイルも無料でダウンロードできました！ご不明な点がございましたら、下のコメント欄にコメントを残してください。

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

Diviでアイコンの切り替えを使用してヘッダーのスペースを節約する方法

プレビュー

デスクトップ

モバイル

グローバルヘッダーテンプレートを無料でダウンロード

無料でダウンロード

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

1.ヘッダー構造を構築する

新しいグローバルヘッダーテンプレートを作成する

セクション＃1を追加

グラデーションの背景

間隔

ボックスシャドウ

新しい行を追加

カラム構造

サイジング

間隔

主な要素CSS

列1の設定

間隔

主な要素

列2の設定

背景色

間隔

主な要素CSS

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

メニューを選択

ロゴをアップロード

背景色を削除する

メニューテキスト設定

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

アイコン設定

サイジング

宣伝文モジュール＃1を列2に追加します

コンテンツボックスを空のままにします

アイコンを選択

アイコン設定

サイジング

主な要素と宣伝文の画像CSS

宣伝文句モジュールを2回クローンする

アイコンの変更

2.トグルアイテムを追加します

セクション＃2を追加

サイジング

間隔

新しい行を追加

カラム構造

サイジング

間隔

ポジション

テキストモジュール＃1を列2に追加します

コンテンツボックスに電話番号を追加する

背景色

テキスト設定

サイジング

間隔

クローンテキストモジュール

コンテンツをメールアドレスに変更する

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

選択したソーシャルネットワークを追加する

各ソーシャルネットワークの背景色を白に変更します

背景色

配置

アイコン設定

サイジング

間隔

国境

3.機能を追加します

連続したCSSIDを宣伝文モジュールの最初のセクションに追加する

連続するCSSIDをトグルアイテムに追加する

すべてのトグルアイテムに絶対位置を追加

セクション＃1の最初の列にコードモジュールを追加する

CSSコードを挿入

JQueryコードを挿入する

4.ヘッダー+アイテムの切り替えをスティッキーにする

セクション＃1をスティッキーにする

セクション2をスティッキーにする

プレビュー

デスクトップ

モバイル

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