Diviを使用した1ページのポケットベル用のカスタム列サイドナビゲーションの作成
公開: 2019-07-251ページのポケットベルを作成する場合、ナビゲーションのユーザーエクスペリエンスはまったく異なります。 人々はページを離れることを意図していませんが、あなたは彼らの滞在をユーザーフレンドリーにしたいのです。 そのため、ほとんどのポケットベルはページ内アンカーリンクを使用します。 これらのアンカーリンクを従来のトップメニューに配置するか、代わりにサイドナビゲーションを選択できます。 このチュートリアルでは、Diviの新しい列オプションを使用して、ページの美しい列サイドナビゲーションデザインを作成する方法を紹介します。 すべての要素を100ビューポートの高さに合わせて、フルスクリーンエクスペリエンスを作成します。 JSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
コラムサイドナビゲーションレイアウトを無料でダウンロード
無料の列側ナビゲーションレイアウトに手を置くには、最初に下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
再作成を始めましょう！
私たちのYoutubeチャンネルを購読する
新しい空白ページを作成する
最初に行う必要があるのは、新しい空白のページを作成することです。 完了したら、VisualBuilderに切り替えます。
新しいセクションを追加
背景色
すべてのページコンテンツを1つのセクション、1行、2列に収めます。 背景色が白の新しい通常のセクションをページに追加します。
- 背景色：#FFFFFF
間隔
セクションのデフォルトの上部と下部のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
新しい行を追加
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、それに応じてサイズ設定を変更します。
- 列の高さを等しくする：はい
- 幅：100％
- 最大幅：100％
- 高さ：100vh
間隔
間隔設定に移動し、デフォルトの上下のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
列1の設定
一般的な行の設定が完了したら、列1の設定を開きます。
背景色
白い背景色を追加します。
- 背景色：#FFFFFF
ボックスシャドウ
微妙なボックスシャドウと一緒に。
- ボックスシャドウの水平位置：80px
- ボックスシャドウブラー強度：75px
- 影の色：rgba（0,0,0,0.07）
変換スケール
デスクトップの列のサイズも縮小しています。
- 下：75％（デスクトップ）、100％（タブレットと電話）
- 右：75％（デスクトップ）、100％（タブレットと電話）
変換翻訳
次に、いくつかのカスタム変換変換設定を使用して、列の位置を変更します。
- 下：-5vw（デスクトップ）、0px（タブレットと電話）
- 右：0px
列2の設定
列2の設定を開いて続行します。
間隔
[デザイン]タブに移動し、さまざまな画面サイズで次の左右のパディング値を追加します。
- 左パディング：2vw（デスクトップ）、4vw（タブレット）、5vw（電話）
- 右パディング：2vw（デスクトップ）、4vw（タブレット）、5vw（電話）
CSSクラス
投稿の後半で、スムーズスクロールを追加し、スクロールバーを非表示にします。 そのためには、カスタムCSSクラスを列に追加する必要があります。
- CSSクラス：スクロール列
可視性
2番目の列に追加するモジュールは、ページのコンテンツを表します。 スクロールできるように、オーバーフロー設定を変更します。
- 水平オーバーフロー：非表示
- 垂直オーバーフロー：スクロール
メニュー項目テキストモジュールを列1に追加
コピーを追加
モジュールの追加を始めましょう！ 最初のメニュー項目テキストモジュールを列1に追加し、選択したコンテンツをいくつか追加します。
リンクを追加
メニュー項目にアンカーリンクを追加します。
- モジュールリンクURL：www.yourwebsite.com/yourpage/#home
テキスト設定
[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- テキストフォント：Montserrat
- テキストの配置：中央
- テキストの色：＃383838
- テキストサイズ：3vw
- テキスト文字の間隔：-3px（デスクトップ）、-2px（タブレット）、-1px（電話）
間隔
次に、カスタムの上部マージン値と下部マージン値を追加します。
- トップマージン：23vw（デスクトップ）、3vw（タブレットと電話）
- 下マージン：3vw（デスクトップ）、2vw（タブレット）、1vw（電話）
メニュー項目を2回クローンする
最初のメニュー項目を完了したら、それを2回複製します。
両方の複製の内容を変更する
両方の複製のメニュー項目の内容を変更します。
両方の複製のリンクを変更する
アンカーリンクと一緒に。
- 複製1：/＃about
- 複製2：/＃services
両方の複製の間隔を変更する
それに応じて間隔の値を変更して、複製を完了します。
- トップマージン：3vw（デスクトップ）、2vw（タブレット）、1vw（電話）
- 下マージン：3vw（デスクトップ）、2vw（タブレット）、1vw（電話）
Dividerモジュールを列1に追加します
可視性
列1の最初のテキストモジュールと2番目のテキストモジュールの間にディバイダーモジュールを追加します。[ディバイダーの表示]オプションが有効になっていることを確認します。
- 仕切りを表示：はい
ライン
次に線の色を変更します。
- 線の色：＃ffebc9
サイジング
サイズ設定と一緒に。
- 仕切りの重量：1vw
- 高さ：0px
クローンディバイダーモジュール
Divider Moduleのクローンを作成し、複製を2番目のTextModuleの下に配置します。
ソーシャルメディアフォローモジュールを列1に追加
ソーシャルネットワークを追加する
列1で必要な次の最後のモジュールは、ソーシャルメディアフォローモジュールです。 選択したソーシャルネットワークを追加します。
配置
次に、[デザイン]タブに移動し、モジュールの配置を変更します。
- モジュールの配置：中央
間隔
次にマージン値を変更します。
- トップマージン：12vw（デスクトップ）、5vw（タブレットと電話）
- 下マージン：3vw（タブレットと電話）
国境
そして、それぞれの角に「50vw」を追加して、円形を作成します。
列2に画像モジュールを追加します
画像をアップロード
2列目へ！ 必要なすべてのモジュールを追加しますが、アンカーリンクで参照する各モジュールにCSSIDを追加することを忘れないでください。 この投稿のプレビューに表示されたとおりのデザインを再現する場合は、まず画像モジュールを追加して、選択した画像をアップロードします。
配置
[デザイン]タブに移動し、左側の画像の配置を選択します。
- 画像の配置：左
サイジング
次に、サイズ設定を変更します。
- 全幅を強制：はい
間隔
そして、いくつかの正しいパディングを追加します。
- 右パディング：20vw
CSS ID
最後に、[詳細設定]タブに移動し、最初のCSSIDを追加します。 これが最初のメニュー項目のアンカーリンクと一致することを確認してください。
- CSS ID：ホーム
タイトルテキストモジュールを列2に追加
H2コンテンツを追加する
次のモジュールであるテキストモジュールに進みます。 お好みのH2コンテンツを入力してください。
H2テキスト設定
[デザイン]タブに移動し、それに応じてH2テキスト設定を変更します。
- 見出し2フォント：Montserrat
- 見出し2テキストの配置：左
- 見出し2のテキストの色：＃383838
- 見出し2テキストサイズ：2vw（デスクトップ）、4vw（タブレット）、5vw（電話）
- 見出し2文字の間隔：-1px
間隔
次に、いくつかのカスタムマージン値を追加します。
- トップマージン：6vw（デスクトップ）、10vw（タブレット）、12vw（電話）
- 下マージン：2vw（デスクトップ）、4vw（タブレット）、6vw（電話）
Dividerモジュールを列2に追加します
可視性
次に必要なモジュールはディバイダーモジュールです。 [仕切りを表示]オプションが有効になっていることを確認してください。
- 仕切りを表示：はい
ライン
線の色を変更します。
- 線の色：＃ffebc9
サイジング
それに応じてサイズ設定を変更します。
- 仕切りの重量：15px
- 幅：16％
- モジュールの配置：左
列2に本文テキストモジュールを追加します
コンテンツを追加する
選択した段落コンテンツを含む別のテキストモジュールを2番目の列に追加します。
テキスト設定
[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- テキストフォント：Roboto
- テキストの配置：正当化
- テキストの色：＃a8a8a8
- テキストサイズ：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- テキスト文字の間隔：1px
- テキスト行の高さ：2vw（デスクトップ）、3.5vw（タブレット）、4.5vw（電話）
間隔
次に、いくつかのカスタム間隔値を追加します。
- トップマージン：3vw（デスクトップ）、5vw（タブレット）、7vw（電話）
- 下マージン：3vw（デスクトップ）、5vw（タブレット）、7vw（電話）
- 右マージン：20vw（デスクトップとタブレット）、5vw（電話）
ボタンモジュールを列2に追加
コンテンツを追加する
選択したコピーを含むボタンモジュールを追加して続行します。
配置
デザインタブで左ボタンの配置を選択します。
- ボタンの配置：左
ボタン
それに応じてボタン設定を変更します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- ボタンのテキストの色：#ffffff
- ボタンの背景色：＃0072ff
- ボタンの境界線の幅：0px
- ボタンの境界線半径：0px
- ボタンフォント：Montserrat
- ボタンのフォントの太さ：半太字
間隔
また、間隔の値も試してみてください。
- トップマージン：4vw（デスクトップ）、6vw（タブレット）、8vw（電話）
- 下マージン：4vw（デスクトップ）、6vw（タブレット）、8vw（電話）
- トップパディング：1.5vw（デスクトップ）、3vw（タブレット）、4vw（電話）
- ボトムパディング：1.5vw（デスクトップ）、3vw（タブレット）、4vw（電話）
- 左パディング：3vw（デスクトップ）、6vw（タブレット）、8vw（電話）
- 右パディング：3vw（デスクトップ）、6vw（タブレット）、8vw（電話）
列2のすべてのモジュールのクローンを2回作成し、同じ順序で配置します
列2のすべてのモジュールを完了したら、それらを2回クローンして、正しい順序で配置できます。
重複イメージモジュール＃1 CSSIDを変更する
最初に複製されたイメージモジュールのCSSIDを変更します。
- CSS ID：約
重複イメージモジュール＃2 CSSIDを変更します
2番目の複製イメージモジュールについても同じようにします。
- CSS ID：サービス
スクロールバーを非表示にしてスムーズスクロールを追加
ページ設定を開く
次に、スムーズなスクロール効果を作成し、列2のスクロールバーを非表示にするために、CSSコードを数行追加します。 ページ設定を開きます。
カスタムCSSを追加する
次に、[詳細設定]タブに移動し、CSSコードを追加します。 このステップを完了すると、完了です。
.scroll-column::-webkit-scrollbar {
display: none;
}
.scroll-column {
scroll-behavior: smooth;
}
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Diviの新しい列オプションを使用して、ポケットベル用の美しい列側ナビゲーションを作成する方法を示しました。 これは、Webサイトのユーザーエクスペリエンスを向上させるのに役立つアンカーリンクをページに追加するための優れた方法です。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。