Diviを使用してWebサイトのスワイプメニューバーを作成する方法

公開: 2019-04-24

毎週、次のプロジェクトに使用できる新しい無料のDiviレイアウトパックを提供します。 レイアウトパックの1つとして、Webサイトを次のレベルに引き上げるのに役立つユースケースも共有しています。

今週は、進行中のDiviデザインイニシアチブの一環として、Mortgage Broker LayoutPackを使用してWebサイトのスワイプメニューバーを作成する方法を紹介します。 これは、Webサイトにインタラクションを追加するための優れた方法です。 すべての画面サイズで同じユーザーエクスペリエンスが得られ、構築しているあらゆる種類のWebサイトでこの手法を使用できます。

それを手に入れよう！

プレビュー

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

デスクトップ

メニューバーをスワイプ

モバイル

メニューバーをスワイプ

Diviテーマオプションで固定ナビゲーションを無効にする

Diviテーマオプションに移動

始めましょう！ 最初に行う必要があるのは、WordPressWebサイトのDiviテーマオプションに移動することです。

メニューバーをスワイプ

固定ナビゲーションを無効にする

ここでは、固定ナビゲーションバーを無効にします。 このチュートリアルの後半で、ページのプライマリメニューバーを完全に削除するには、このオプションを無効にする必要があります。

  • 固定ナビゲーションバー：無効

メニューバーをスワイプ

ページのプライマリメニューバーを非表示

住宅ローンブローカーレイアウトパックのランディングページでビジュアルビルダーを有効にする

Mortgage Broker Layout Packのランディングページを使用して作成したページに移動し、VisualBuilderを有効にします。

メニューバーをスワイプ

ページ設定を開く

CSSコードを追加して、ページのプライマリメニューバーを非表示にします。 このコードを追加するには、ページ設定を開きます。

メニューバーをスワイプ

カスタムCSSコードを追加してプライマリメニューバーを非表示にする

次に、[詳細設定]タブに移動し、次のCSSコード行を[カスタムCSS]ボックスに配置します。 

#main-header {
display: none;
}

このコードを追加すると、プライマリメニューバーがページに表示されないようにするのに役立ちます。

メニューバーをスワイプ

Diviでカスタムメニューデザインを作成する

すべての画面サイズでヒーローセクションに十分なトップパディングがあることを確認してください

ページのプライマリメニューバーが削除されたので、代わりにスワイプメニューバーの追加を開始できます。 最初に行う必要があるのは、スワイプメニューバーが既存のコンテンツと重ならないように、ページの上部に十分なパディングがあることを確認することです。 特にMortgageBroker Layout Packのランディングページの場合、これは、列1のカスタムパディングがすべての画面サイズで「180px」のままであることを確認することを意味します。

  • トップパディング：180px

メニューバーをスワイプ

ページの下部に新しい通常のセクションを追加する

カスタムスワイプメニューバーの作成を開始します。 ページの下部に通常のセクションを追加します。

メニューバーをスワイプ

間隔

セクション設定を開き、デフォルトの上部と下部のパディングをすべて削除します。

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

メニューバーをスワイプ

行を追加する

カラム構造

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

メニューバーをスワイプ

背景色

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

  • 背景色：#ffffff

メニューバーをスワイプ

サイジング

次に、行の設定を開き、サイズ設定を変更して、行が画面の幅全体を占めるようにします。

  • カスタムガター幅を使用：はい
  • 側溝幅：1
  • 幅：100％
  • 最大幅：100％

メニューバーをスワイプ

間隔

次に、上下のパディングをすべて取り外します。

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

メニューバーをスワイプ

ボックスシャドウ

また、スワイプメニューバーとページ自体の間に十分な深さがあることを確認するために、ボックスシャドウを追加します。

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

メニューバーをスワイプ

画像モジュールの追加

会社のロゴをアップロードする

画像モジュールから始めて、スワイプメニューバーに表示するすべてのモジュールの追加を開始します。 幅226ピクセル、高さ100ピクセルの画像ファイルを使用してロゴをアップロードします。

メニューバーをスワイプ

配置

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

  • 画像の配置：中央

メニューバーをスワイプ

サイジング

次に、画像のサイズ設定を変更します。

  • 最大幅：75％（デスクトップ）、100％（タブレットと電話）

メニューバーをスワイプ

間隔

また、画像にカスタムの上下のパディングを追加します。

  • トップパディング：15px（タブレット）、25px（電話）
  • ボトムパディング：15px（タブレット）、25px（電話）

メニューバーをスワイプ

ボタンモジュールの追加

コピーを追加

必要な2番目のモジュールはボタンモジュールです。 選択したコピーをいくつか追加します。

メニューバーをスワイプ

配置

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

  • ボタンの配置：中央

メニューバーをスワイプ

ボタンの設定

次にボタンの外観を変更します。

  • ボタンにカスタムスタイルを使用する：はい
  • ボタンのテキストサイズ：0.8vw（デスクトップ）、1.4vw（タブレット）、2.1vw（電話）
  • ボタンのテキストの色：#ffffff
  • ボタンの背景色：＃40eccc
  • ボタンの境界線の幅：0px
  • ボタンの境界線半径：50px
  • ボタンの文字間隔：2px
  • ボタンフォント：ラト
  • フォントの太さ：重い
  • フォントスタイル：大文字

メニューバーをスワイプ

メニューバーをスワイプ

間隔

そして、カスタムのマージンとパディング値を使用して、必要な形状を作成します。

  • トップマージン：15px
  • 下マージン：15px
  • トップパディング：15px
  • ボトムパディング：15px
  • 左パディング：40px
  • 右パディング：40px

メニューバーをスワイプ

テキストモジュール＃1を追加

コンテンツボックスにメニュー項目を追加

スワイプメニューバーに必要な次のモジュールはテキストモジュールです。 ここでは、コンテンツボックスにページタイトルを追加します。

メニューバーをスワイプ

リンクを追加

リンク設定に移動し、テキストモジュールに正しいリンクを追加します。

メニューバーをスワイプ

背景色

次に背景色を変更します。

  • 背景色：＃f2f2f2

メニューバーをスワイプ

テキスト設定

次に、テキスト設定を変更します。

  • テキストフォント：Lato
  • テキストフォントの太さ：太字
  • テキストの色：＃000000
  • テキストサイズ：0.9vw（デスクトップ）、1.9vw（タブレット）、2.4vw（電話）
  • テキストの向き：中央

メニューバーをスワイプ

間隔

また、モジュールにカスタムの上部と下部のパディングも追加します。

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

メニューバーをスワイプ

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

テキストモジュールの変更が完了したら、先に進んで5回クローンを作成できます。

メニューバーをスワイプ

コピーの変更

これらの複製のそれぞれでページタイトルを変更してください。

メニューバーをスワイプ

リンクの変更

リンクと一緒に。

メニューバーをスワイプ

背景色を変更する

次に、2番目、4番目、6番目のメニュー項目の背景色を変更します。

  • 背景色：#ffffff

メニューバーをスワイプ

行にカスタムCSSを追加する

主な要素

ここで、スワイプメニューバーがページの上部に固定されるようにするには、行のメイン要素に数行のCSSコードを追加する必要があります。 

position:fixed;
top: 0px;
z-index: 99;

メニューバーをスワイプ

列の主要要素

また、列をグリッドに変換して、スクロールできるようにします。 以下のCSSコードに表示されるパーセンテージは、各モジュールがグリッド内で占めるスペースの量を示しています。 グリッドの外観を変えたい場合は、これらの値を変更できます。 

overflow-x: scroll;
display: grid;
grid-template-columns: 15% 45% 25% 25% 25% 25% 25% 25%;

メニューバーをスワイプ

列CSSクラス

また、スクロールバーを削除するために、CSSクラスも行に追加します。

メニューバーをスワイプ

スクロールバーを削除する

ページ上

ページ設定を開き、CSSコードの次の行を[カスタムCSS]ボックスに追加することで、ページ自体のスクロールバーを削除できます。 

.swipe-menu::-webkit-scrollbar {
display: none;
}

メニューバーをスワイプ

メニューバーをスワイプ

ウェブサイト全体

各ページのスクロールバーを個別に非表示にする同じ手順を繰り返したくない場合は、Diviテーマオプションに移動し、[一般]タブを下にスクロールして次の行を追加することにより、CSSコードをWebサイト全体に適用することもできます。カスタムCSSボックスへのCSSコードの変換： 

.swipe-menu::-webkit-scrollbar { display: none; }

メニューバーをスワイプ

メニューバーをスワイプ

セクションとしてグローバルアイテムとして保存

スワイプメニューバーが正しく機能したら、それをグローバルアイテムとしてDiviライブラリに保存し、他のページでも使用できます。

メニューバーをスワイプ

プレビュー

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

デスクトップ

メニューバーをスワイプ

モバイル

メニューバーをスワイプ

最終的な考え

この投稿では、Diviを使用して作成するWebサイトのスワイプメニューバーを作成する方法を示しました。 これは、Webサイトに別の次元を追加するための優れた手法です。 このチュートリアルは、進行中のDiviデザインイニシアチブの一部であり、毎週、デザインツールボックスに何か特別なものを入れようとしています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！