Diviで4コーナー固定ナビゲーションを作成する方法

ユニークなナビゲーションデザインは、どんなウェブサイトにも少しエッジを与えることができます。 たとえば、4コーナーの固定ナビゲーションは、Webサイトのデザインを操作するためのより多くのオプションを視聴者に提供するための優れた方法です。 実際、サイト全体のUXデザインに別のレイヤーを追加します。

この投稿では、独自の4コーナー固定ナビゲーションを作成する方法を紹介します。 わずかに異なる2つのスタイルを作成する方法を説明しますが、これらは氷山の一角にすぎません。 ナビゲーションはDiviの組み込み要素を使用して作成されるため、カスタマイズの可能性は無限大です。

このアイデアが、今後のDiviプロジェクト用の素晴らしい4コーナー固定ナビゲーションデザインを作成するきっかけになることを願っています。

始めましょう。

プレビュー

今日作成する4コーナーナビゲーションを簡単に見てみましょう。 最初のスタイルはボタンを画面の境界に配置し、もう1つのスタイルは内部フロートを備えています。

スタイル＃1

スタイル＃2

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

新しい空白ページを作成する

新しいページを開き、Diviで編集する前に、[ページ属性]で[空白ページ]を選択します。 その後、DiviBuilderを有効にします。

暗号通貨のランディングページレイアウトをアップロードする

Divi Visual Builderに入ったら、[PremadeLayouts]タブからCryptocurrencyLayoutPackのランディングページをアップロードします。

2.4列の行で新しいセクションを作成します

4列の行を持つ新しい通常のセクションを追加する

4つのナビゲーション項目を作成するには、4列の行を持つ新しいセクションが必要です。 ページの一番下までスクロールして、新しい通常のセクションを追加します。 次に、4つの同じサイズの列を持つ行を選択します。

セクションのデフォルトのパディングを削除する

モジュールを追加する前に、上部と下部に「0px」を追加して、セクションのパディングを削除してください。 また、セクションに背景色やグラデーションの背景がないことを再確認してください。

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

Zインデックスを増やす

スクロールするときに、このセクションを他のセクションよりも上に配置する必要があります。 そのため、セクションのZインデックス値を増やす必要があります。 これを行うには、[詳細設定]タブを開き、表示設定に移動してZインデックスを増やします。

• Zインデックス：10

3.行のサイズを調整します

次に、行のサイズ設定を調整する必要があります。 [デザイン]タブを開き、それに応じて設定を調整します。

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

行のデフォルトのパディングを削除します

ページの下部にスペースが残っていないことを確認するには、行のデフォルトのパディングを削除します。 [デザイン]タブで、上部と下部の両方のパディングの間隔入力を「0px」に変更します。

列にモジュールを追加します。

次に、左から右に向かって、各列にいくつかのモジュールを追加します。

• 列＃1：画像
• 列＃2：ボタン
• 列＃3：ソーシャルメディアフォロー
• 列＃4：ボタン

4.各列のスタイルを設定します

列＃1-画像モジュール

会社のロゴを追加する

列＃1のイメージモジュールを開きます。 ロゴをアップロードします（幅220px、高さ100px）。 ロゴが中央に配置されている透明な画像であることを確認してください。

モジュールの位置合わせ

ロゴをページの左上隅に配置する必要があるため、モジュールを左に揃える必要があります。 画像モジュールの[デザイン]タブを開き、左側の[画像の配置]を選択します。

• 配置：左

モジュールの位置を修正するためのカスタムCSSの追加

モジュールの位置が固定されていることを確認するには、[詳細設定]タブに移動し、カスタムCSSをメイン要素に追加します。

position: fixed;
top: 0;
left: 0;

列＃2 –ボタン

ボタンを追加する

次に、列＃2にボタンモジュールを追加します。

ボタンのスタイルを設定する

[コンテンツ]タブで、ボタンのテキストを追加します。

• コンテンツ-テキスト：ビットコインの鉱山

次に、[デザイン]タブで、左側のボタンの配置を選択します。

• 配置：左

その後、カスタムボタンスタイルを[はい]にスライドし、それに応じて値を調整します。

• カスタムボタンスタイル：はい
  • ボタンのテキストサイズ：デスクトップ; 25px、タブレット：20px、電話：20px
  • ボタンのテキストの色：白、＃ffffff
  • ボタンの背景色：グラデーション
    • 上の色：＃1c076d、下の色：＃185475
    • グラデーションタイプ：線形
  • ボタンの境界線の半径：7ピクセル
  • ボタンフォント：Tantillium Web（レイアウトと同じ）
  • ボタンアイコンを表示：はい
  • ボタンアイコン：トラフィックコーン
  • ボタンアイコンの色：白、＃ffffff
  • ボタンアイコンの配置：右

モジュールの位置を修正するためのカスタムCSSの追加

最後に、[詳細設定]タブを開き、カスタムCSSを追加して、モジュールの位置をページの左下隅に固定します。

position: fixed;
bottom: 0;
left: 0;

列＃3 –ソーシャルメディアのフォロー

ソーシャルメディアフォローモジュールを追加する

3番目の列に進みます。 今回は、ソーシャルメディアフォローモジュールが必要です。 選択した3つのソーシャルネットワークを追加します。

次に、[デザイン]タブで、適切な[モジュールの配置]を選択します。

• 配置：右

ソーシャルメディアアイコンのスタイルを設定する

最初のソーシャルネットワークの個々の設定を開き、[デザイン]タブに移動して、それに応じてアイコン設定を変更します。

• アイコンの色：白#ffffff
• カスタムアイコンサイズを使用：はい
  • アイコンのフォントサイズ：デスクトップ; 25px、タブレット：20px、電話：20px
• 背景：なし

アイテムスタイルをコピーして貼り付ける

メインのソーシャルメディアフォローウィンドウに戻り、最初のアイテムを右クリックして、[アイテムスタイルのコピー]を選択します。 次に、残りの2つのソーシャルネットワークを右クリックして、スタイルを貼り付けます。

モジュールにカスタムCSSを追加する

最後に、[詳細設定]タブで、次のCSSコードを追加して、モジュールをページの右上隅に固定します。

position: fixed; 
top: 0; 
right: 0;

列＃4 –ボタン

モジュール＃2からモジュールスタイルをコピーして調整する

モジュール＃4のボタンをモジュール＃2のボタンとまったく同じに見せるために、[モジュールスタイルのコピー]オプションを使用します。 まず、列2のボタンモジュールを右クリックし、[モジュールスタイルのコピー]をクリックして、列4のボタンモジュールに貼り付けます。

次に、[コンテンツ]タブの設定を変更します。 まず、テキストの内容を変更します。

• テキスト：「MineforBitcoin」から「ReadourBlog」まで

次に、ボタンの配置を変更します。

• 配置：左から右へ

最後に、[詳細設定]タブでカスタムCSSコードを変更します。

• コードを次のように変更します。

position: fixed; 
bottom: 0; 
right: 0;

結果

5.カスタムCSSを変更して、2番目のStyleExampleを実現します

最初のスタイルの例では、コーナーがコーナーに貼り付けられています。 2番目のスタイルを取得するには、CSSコードを調整して、コーナーモジュールを少し内側に浮かせる必要があります。

4つのモジュールすべての[詳細設定]タブでカスタムCSSを調整するだけです

モジュール＃1

position: fixed; 
top: 1vw; 
left: 1vw;

モジュール＃2

position: fixed; 
bottom: 2vw; 
left: 2vw;

モジュール＃3

position: fixed; 
top: 3vw; 
left: 2vw;

モジュール＃4

position: fixed; 
bottom: 2vw; 
right: 2vw;

最終結果

結論

このチュートリアルでは、Diviを使用して4コーナーの固定ナビゲーションで実行できることのほんの一部をざっと説明します。 最終的には、提供されているカスタムCSSを保持している限り、各列に任意のモジュールを選択できます。 このクリエイティブなチュートリアルが、独自の4コーナー固定ナビゲーションを作成するきっかけになることを願っています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！