お問い合わせ

何を探していますか？

によるユアン・マック
2024年4月14日

ホームページ: フッター

プロジェクトの 2 番目のナビゲーションとして機能する再利用可能なフッターを設計します。

サイトをナビゲートするゲストがページの下部に到達したら、プロジェクトにつながる 2 番目のナビゲーションを表示し、ソーシャル メディア プロファイルに簡単にアクセスできるフッターでインタラクションを促します。プロジェクトで繰り返し使用できるようにフッターをシンボルに変換することで、今後のデザインにかかる時間を節約できます。 

このチュートリアルでは、次の手順に従って、各ページの最後にナビゲーション用の再利用可能なフッターを含める方法を説明します。

  1. フッターの構造を作成する
  2. フッターのスタイルを設定する
  3. フッターをシンボルに変換する

参加して 資源を入手する このチュートリアルに必要です。

フッター構造を作成する

ホームページのレイアウトでは、ナビゲーションと3つの ゾーンそれぞれにメイン画像、クライアント プロジェクト、お問い合わせフォームが含まれています。 

4つ目を紹介しましょう ゾーン フッターを保存するには: 

  1. アクセス パネルを追加
  2. 挿入 ゾーン に ナビゲーター 既存の3の下に配置します ゾーン

「Zone」クラスを新しいクラスに適用することができます ゾーン 以前にスタイル設定した上部と下部の 60 ピクセルのパディングを維持するには、次のようにします。 

  1. 開く スタイルパネル
  2. クリックして セレクターフィールド
  3. 「ゾーン」を選択 既存のクラス

含める 容器 新しい ゾーン 要素をきちんと整理するには:

  1. アクセス パネルを追加
  2. ドロップする 容器 新しい ゾーン
  3. 選ぶ 容器 をクリックして セレクターフィールド
  4. 「コンテナ」を選択 既存のクラス

覚えて： 要素にクラスを割り当てると、この要素に対して実行されたすべてのスタイル変更がそのクラスに保存されます。新しい要素でクラスを再利用して、確立したクラスから保存されたスタイルを自動的に適用できます。 

フッターのスタイルを設定する

意図的な視覚的な繰り返しは賞賛に値するデザインアプローチです。ページ上部のナビゲーションに統合されたロゴを反映するために、フッターにロゴを組み込みましょう。 

  1. アクセス アセットパネル
  2. ロゴ（例：Logo.svg）を 容器 最新の ゾーン

紹介する divブロック フッターコンテンツを含めるには:

  1. アクセス パネルを追加
  2. 挿入 divブロック 内部の 容器 
  3. を選択 divブロック をクリックして セレクターフィールド
  4. クラスを割り当てる（例：「フッターホルダー」） 
  5. ロゴを「フッターホルダー」にドラッグします divブロック サイズを変更します（例：187 x 27ピクセル）

「フッターホルダー」のコンテンツを揃える divブロック 中央に： 

  1. 「フッターホルダー」を選択します divブロック アクセス スタイルパネル > レイアウト
  2. 示す 画面 として フレックス
  3. セット 方向 に 垂直 そして 整列 に 中心

含めてみましょう 段落 フッターにロゴを配置し、ロゴとの間にスペースを確保します。

  1. アクセス パネルを追加 そして挿入する 段落 に 容器 ロゴの下
  2. ロゴを選択してアクセス スタイルパネル > 間隔
  3. 下部に30ピクセル追加 マージン

防止するために 段落 幅いっぱいに広がる 容器最大幅の制限を設定しましょう: 

  1. を選択 段落 
  2. アクセス スタイルパネル > サイズ
  3. 指定する 最大W （最大幅）600ピクセル
  4. 余分なテキストを削除してください 段落

最初にフッターにナビゲーションリンクを挿入します。 コレクションリスト: 

  1. アクセス パネルを追加 そしてドロップ コレクションリスト 「フッターホルダー」内 divブロック 下の 段落
  2. 「プロジェクト」を選択して ソース ドロップダウンのコレクションリストの設定 ポップアップで接続 グループ化

下部ナビゲーションを完成させるためには、 接続部 に アセンブリ要素:

  • 開始する パネルを組み込む そして引っ張る 接続部 いずれにでも アセンブリ要素

リマインダー： あ 接続部 は、 除算要素クリック可能なハイパーリンクとして機能する点が異なります。 接続セクション.

紹介しましょう ドキュメントセクション 新たに組み込まれた 接続部 下部ナビゲーション内でユーザーが操作できるものを提供するため:

  • 開始する パネルを組み込む そして引っ張る ドキュメントセクション 内部の 接続部

プリセットのハイパーリンク デザインを削除するには、すべてのハイパーリンクの外観を変更しましょう。

  1. 選ぶ 接続部
  2. 起動する デザインパネル に移動し、 識別子フィールド
  3. 選択する すべてのハイパーリンク から HTMLタグ

プリセットの下線をオフにして、明確なハイパーリンクの色を選択します。

  1. アクセス デザインパネル > タイポグラフィ
  2. 定義する 装飾 「なし」として
  3. クリックしてください パレット 新しい色合いを設定します（例：「アイボリー」）

私たちの ドキュメントセクション 私たち グループ化 各プロジェクトのタイトルの自動抽出を可能にする情報:

  1. 選択してください ドキュメントセクション 内部の 接続の選択
  2. ラベルの歯車アイコンをタップすると、 ドキュメントセクションの 構成
  3. 「プロジェクトからテキストを取得する」にチェックを入れます
  4. 「フィールドを選択」ドロップダウンを展開し、統合するフィールドを指定します。 ドキュメントセクション （例：「プロジェクトの指定」）

私たちは活用します 格子 プロジェクトの指定を構造化されたレイアウトで紹介します。

  1. を選択 グループ化リスト
  2. アクセス デザインパネル > 配置
  3. 割当 画面 として 格子

デフォルトでは、プロジェクトの指定は 2 x 2 の形式で表示されます。プロジェクトの指定を 1 行に分散してみましょう。

  1. を選択 格子 を押して 格子を修正 下に 配置 の中に デザインパネル
  2. 1つの横にある「削除」記号を押します 行 除去のため
  3. クリック 列 「プラス記号」を2回押すと2が追加されます 列

私たちの中の要素間に均等に分散された空間を定式化しましょう 格子:

  1. を選択 格子
  2. アクセス デザインパネル > 配置
  3. 定義する 整列 「要素の配置：中央」

隙間を作る 声明 そしてその 格子:

  1. 選ぶ 声明
  2. 下限を定義する 間隔 30ピクセルまで

フッターにcategoryの融合を確立しましょう セグメント:

  1. を選択 セグメント フッターを囲む
  2. 起動する デザインパネル に移動し、 識別子フィールド
  3. 既存の「セグメント」categoryを投稿し、新しい統合category（例：「フッター」）を入力します。

貴重な情報: 融合 category は、別の category に基づいて構築された独自の category です。この独立したグループにより、プライマリ category にスタイル変更を適用して、独自のバリアントを作成できます。融合カテゴリの詳細をご覧ください。

「フッターセグメント」を変更してみましょう 背景シェード:

  1. アクセス デザインパネル > 背景
  2. クリックしてください パレット 主なブランド色にシェードを設定します

ラッパー内に 3 つのソーシャル ネットワーキング ボタンを含めてみましょう。

  1. 開始する パネルを組み込む
  2. ドラッグ 除算要素 「フッターホルダー」に 除算要素 下 グループ化リストラッパー
  3. アクセス デザインパネル に移動し、 識別子フィールド
  4. タイトル 除算要素 category（例：「ソーシャルラッパー」）

紹介すべき 接続セクション 「ソーシャルラッパー」の内側 除算要素 クリック可能な接続を生成するには:

  1. 開始する パネルを組み込む ドラッグして 接続部 「ソーシャルラッパー」に
  2. 起動する リソースパネル ソーシャルメディアを挿入する 写真 に 接続部 （例：「ツイッター」）
  3. を選択 接続部、タップして 識別子フィールド category（例：「ソーシャルリンク」）を追加します
  4. 「ソーシャルリンク」をさらに2回コピーして貼り付けると、合計3つのソーシャルメディア接続が作成されます。

2つの補足的な社会的つながりを強化しましょう ピクチャー:

  1. 2番目のソーシャルハイパーリンクを2回クリックします 写真 「代替画像」を選択します 
  2. 新鮮なソーシャルを選ぶ 写真 から ライブラリパネル （例：「インスタグラム」） 
  3. 前の2つのアクションを繰り返して3番目のアクションを交換する 写真 （例：「LinkedIn」）

ソーシャル ハイパーリンクを均等に分散し、十分なスペースを確保します。 

  1. 「ソーシャルハイパーリンク」を選択
  2. 展開する デザインパネル > 間隔
  3. 左と右を組み込む マージン 10ピクセル
  4. 「ソーシャルラッパー」を選ぶ
  5. 展開する デザインパネル > 間隔
  6. トップを組み込む マージン 30ピクセル

述べる： を押すと、要素の反対側にマージンやパディングをすぐに追加できます。 オプション (Macの場合) または 代替 （Windowsの場合）、 マージン または パディング コントロール。 

各「ソーシャル ハイパーリンク」に URL を組み込みます。 

  1. 「ソーシャルハイパーリンク」を選択し、ラベルの歯車アイコンをタップしてリンク設定を開きます。
  2. ソーシャルチャンネルの外部URLを URLフィールド
  3. 残りの2つの「ソーシャルハイパーリンク」に対して、前の2つのアクションをやり直します。

プロジェクト リンクをフッター テキストの残りの部分よりも目立たせるために、テキストの太さを変更してみましょう。 

  1. 選択してください コレクションリスト
  2. 展開する デザインパネル > タイポグラフィ
  3. フォントを調整する 重さ より大きな数字に変更（例：「600 – 半太字」） 

フッターをシンボルに変換する

フッターを シンボル プロジェクト全体での再利用を容易にするため: 

  1. 選択してください セグメント フッター項目を網羅する
  2. ラベルを右クリックして セグメント メニューから「シンボルを確立する」を選択します
  3. 名前を割り当てる シンボル （例：「フッター」） 

述べる： 速やかに生成するために シンボル ショートカットキーを使用して、変換したい要素を選択します。 シンボル、そしてヒット コマンド + シフト + A (Macの場合) または コントロール + シフト + A (Windows の場合)。 

ページをセンス良く締めくくり、訪問者を引き付ける印象的な方法です。

ユアン・マック
Ewan Mak による最新の投稿 (すべてを見る)

関連記事

によるユアン・マック
更新日