Diviの新しい列構造を使用した印象的なナビゲーションダッシュボードの作成

ホームページを構成するための新しくてユニークな方法をお探しですか？ ナビゲーションダッシュボードを作成するのが良い方法かもしれません。 このチュートリアルでは、さまざまな目的に使用できる見事なダッシュボードページをどのように正確に実現できるかを示します。

人々があなたのページをナビゲートする方法を変えたい場合でも、あなたの会社が提供するサービスを強調したい場合でも、ダッシュボードを作成することはあなたがあなたが考えていたものを正確に達成するのに役立ちます。 Diviの組み込みオプションのみを使用しており、それに加えて、使用できる明るいカラーパレットと暗いカラーパレットの両方を提供しています。 このチュートリアルは、EdoardoMercatiのデザインの1つに触発されています。

それを手に入れよう！

プレビュー

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

カラーパレット

開始する前に、明るいダッシュボードと暗いダッシュボードのどちらを作成するかを選択できます。 各カラーパレットに必要な色を以下に示します。 チュートリアルを終えたら使用できるように、これらのカラーコードを近くに置いてください。 カラーパレットに固有の色を使用する場合は、色番号を参照します。

光

• 色＃1： ＃f6f6f6（セクションの背景）
• 色＃2： #ffffff（列の背景）
• 色＃3： ＃333333（タイトルテキストの色）
• カラー＃4： ＃000000（ディバイダーカラー）
• 色＃5： ＃6F6B68（本文の色の宣伝文句）
• 色＃6： ＃e5e5e5（列の背景2）
• 色＃7： #ffffff（宣伝文句の背景色）

暗い

• 色＃1： ＃141414
• カラー＃2： ＃212121
• 色＃3： #ffffff
• 色＃4： #ffffff
• 色＃5： #dddddd
• カラー＃6： ＃212121
• カラー＃7： ＃333333

相互の色

• カラー＃7： ＃0457ff
• カラー＃8： ＃cc0432
• カラー＃9： ＃839e00
• カラー＃10： ＃c68e00

作成を始めましょう

新しい標準セクションを追加

背景色

ページに新しいセクションを追加することから始めます。 次に、セクション設定を開き、背景色を追加します。

• 背景色：色＃1（カラーパレットで検索）

間隔

上部と下部に余分なスペースを作成するために、カスタムパディングも適用します。

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

行＃1を追加

カラム構造

セクション設定の変更が完了したので、行の追加を開始できます。 最初の行に次の列構造を選択します。

列1の背景色

モジュールをまだ追加せずに、行の設定を開き、列1の背景色を追加します。

• 列1の背景色：色＃2（カラーパレットで検索）

サイジング

次に[デザイン]タブに移動し、行のサイズ設定を変更します。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：2
• 列の高さを等しくする：はい

間隔

最後に、行と最初の列にパディングを追加します。

• ボトムパディング：100px
• 列1の上部パディング：100px
• 列1の下部パディング：100px
• 列1の左パディング：50px
• 列1の右パディング：50px

タイトルテキストモジュールを列1に追加

H1テキスト設定

モジュールの追加を開始する時が来ました！ タイトルのテキストモジュールを追加することから始めます。 H1コピーを追加したら、モジュールの見出しテキスト設定を変更します。

• 見出しフォントの太さ：太字
• 見出しテキストの配置：左
• 見出しテキストの色：色＃3（カラーパレットで検索）
• 見出しのテキストサイズ：75px（デスクトップ）、55px（タブレット）、36px（電話）

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

仕切りの色

タイトルのテキストモジュールのすぐ下に、次の色のディバイダーモジュールを追加します。

• 仕切りの色：色＃4（カラーパレットで検索）

サイジング

次にサイズ設定を開き、仕切りの幅を調整します。

• 幅：27％

間隔

仕切りの上部にもスペースを追加します。

• トップマージン：50px

説明テキストモジュールを列1に追加

テキスト設定

この行の次の最後のモジュールは、説明テキストモジュールです。 コンテンツを追加したら、テキスト設定でテキストの向きを変更します。

• テキストの向き：正当化

サイジング

このモジュールのサイズ設定も変更します。

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

間隔

そして、カスタムマージンを使用してモジュールの上部にスペースを追加します。

• トップマージン：50px

列2に宣伝文モジュールを追加する

アイコン

これで、2番目の列に進むことができます。 まず、宣伝文句モジュールの1つを作成します。 その後、このモジュールのクローンを作成し、それに応じて変更できます。 宣伝文モジュールを追加してコンテンツを変更した後、お好みのアイコンを選択します。

背景色

宣伝文モジュールに背景色を追加して続行します。

• 背景色：カラー＃7（カラーパレットで検索）

背景パターン

次の小さなパターンをコンピューターに保存します。

次の設定とともに、背景画像としてアップロードします。

• 背景画像サイズ：実際のサイズ
• 背景画像の位置：中央
• 背景画像の繰り返し：繰り返し

アイコン設定

[デザイン]タブに移動し、[画像とアイコン]設定を開き、それに応じて設定を変更します。

• アイコンの色：色＃7（カラーパレットで検索）
• 円のアイコン：はい
• 円の色：#FFFFFF
• アイコンを使用フォントサイズ：33px

テキスト設定

次に、テキスト設定を開き、いくつかの変更を加えます。

• テキストの向き：中央
• テキストの色：明るい

タイトルテキスト設定

宣伝文モジュールのタイトルにもいくつかの追加の変更が必要です。

• タイトルフォントの太さ：超太字
• タイトルフォントスタイル：大文字

間隔

大事なことを言い忘れましたが、Blurb Moduleに必要なルックアンドフィールを与えるために、カスタムパディングを追加します。

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

宣伝文句モジュールを3回クローンし、残りの列に2を配置します

最初の宣伝文句モジュールが完成したので、先に進んで3回クローンを作成します。 重複の1つを最初の列に残し、残りの2つを行の残りの列に配置します。

新しい宣伝文モジュールを変更する

アイコンの変更

複製のそれぞれについて、使用されているアイコンを変更する必要があります。

背景色を変更する

同様に、背景色を選択した色またはカラーパレットの色の1つ（色＃8、＃9、または＃10）に変更する必要があります。

アイコンの色を変更する

アイコンの色を、背景に使用しているのと同じ色に変更します。

行＃2を追加

カラム構造

2番目の行には、次の列構造が必要です。

サイジング

行設定を開き、サイズ設定に移動して、行の幅を増やします。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：2

間隔

次に[間隔]設定を開き、行の上部と下部にカスタムパディングを追加します。

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

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

H2テキスト設定

行の列に必要な最初のモジュールは、タイトルのテキストモジュールです。 H2コンテンツを追加した後、H2テキスト設定を変更します。

• 見出し2フォントの太さ：太字
• 見出し2テキストの配置：左
• 見出し2テキストの色：色＃3（カラーパレットで検索）
• 見出しのテキストサイズ：32px

仕切りモジュールを追加

仕切りの色

タイトルのテキストモジュールのすぐ下に、次の色のディバイダーモジュールを追加します。

• 色：色＃4（カラーパレットで検索）

サイジング

次に、仕切りの幅を変更します。

• 幅：9％

間隔

最後に、仕切りの上部にスペースを追加します。

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

行＃3を追加

カラム構造

強調表示された機能を共有するには、新しい行に次の列構造を選択します。

列の背景色

行設定を開き、次の背景色を各列に追加します。

• 列の背景色：色＃6（カラーパレットで検索）

サイジング

次に、行の幅を増やします。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：2
• 列の高さを等しくする：はい

間隔

また、いくつかのパディングも追加します。

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

列1に宣伝文モジュールを追加する

アイコン

これで、さまざまなモジュールの追加を開始できます。 最初の列の宣伝文モジュールから始めます。 コンテンツを追加したら、お好みのアイコンを選択します。

背景色

次に、宣伝文句モジュールに背景色を付けます。

• 背景色：カラー＃7（カラーパレットで検索）

アイコン設定

[デザイン]タブに移動し、アイコンの設定を変更します。

• アイコンの色：#ffffff
• 円のアイコン：はい
• サークルカラー：カラー＃7（カラーパレットで検索）
• アイコンのフォントサイズを使用：はい
• アイコンフォントサイズ：33px

テキスト設定

宣伝文モジュールのテキストの向きも変更します。

• テキストの向き：中央

タイトルテキスト設定

次にタイトルテキスト設定に移動し、いくつかの変更を加えます。

• タイトルフォントの太さ：超太字
• タイトルフォントスタイル：大文字
• タイトルテキストの色：色＃3（カラーパレットで検索）

本文の設定

宣伝文モジュールの本文にも別の色が必要です。

• 本文の色：色＃5（カラーパレットで検索）

間隔

最後に、いくつかのカスタム間隔設定を宣伝文モジュールに追加します。

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

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

ボタンの配置

宣伝文モジュールのすぐ下で、先に進んでボタンモジュールを追加します。 その設定を開き、ボタンの配置を変更します。

• ボタンの配置：中央

ボタンの設定

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

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：15px
• ボタンのテキストの色：色＃3
• ボタンの境界線の幅：0px
• ボタンの境界線半径：0px
• フォントの太さ：超太字
• フォントスタイル：大文字

間隔

ボタンモジュールの下部にもマージンを追加します。

• 下マージン：30px

宣伝文句とボタンモジュールのクローンを3回作成し、残りの列に配置します

最初の列の両方のモジュールを3回複製し、それらを行の残りの列に配置します。

新しい宣伝文モジュールを変更する

アイコンの変更

複製された各宣伝文モジュールのアイコンを、選択した新しいアイコンに変更します。

アイコンの色を変更する

アイコンの色も変更します。 カラーパレットの＃8、＃9、＃10を自由に使用してください。

クローン行

行の検索とクローン化

ハイライトされた機能だけでなく、すべての機能を表示するために、タイトルを含む行のクローンを作成します。

行を配置

次に、作成した最後の行のすぐ下に配置します。

クローン行

行の検索とクローン化

強調表示された宣伝文句を含む行で同じことを行います。

行を配置

そして、それを新しいタイトルの下に配置します。

列構造の変更

この行に表示される機能を増やすために、列構造を4列ではなく5列に変更します。

列5列の背景色を追加

新しい列にも列の背景色を追加します。

• 列の背景色：色＃6（カラーパレットで検索）

宣伝文とボタンモジュールのクローンを作成し、列5に配置します

行の宣伝文句モジュールの1つを複製し、列5に複製を配置してスペースを埋めます。アイコンとアイコンの色も変更します。

5列の行のクローン

最後になりましたが、この5列の行のクローンを作成して、提供したいすべての機能を備えた2つの行を作成すれば、完了です。

プレビュー

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

最終的な考え

ダッシュボードは見栄えがよく、Webサイトでのユーザーナビゲーションを容易にすることができます。 この投稿では、Diviの組み込みオプションのみを使用して最初から作成できる2つのカラーパレットを備えた見事なダッシュボードデザインを共有しました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！