独立労働者 — 420 | ウェブサイトの構築 | ランディング ページ: グリッドベースのヒーロー セクション

を考えると、 ヘッダ category ができたので、カスタマイズしてみましょう:

1. 利用したい新しいフォントを選択してください デザインパネル > 文章 > フォント
2. フォントの 厚さ ドロップダウンから

変更する ヘッダ 色相:

1. アクティブ化する カラーピッカー ツールイン シェード パネル
2. 上にマウスを移動 背景画像 当初 セクション単位 色相を選択して 写真
3. 必要に応じて色相を微調整します。 色 そして 半透明性 スライダー

データブロックにさらにデータを追加してみましょう。 セクション:

1. 開く コンポーネントパネルを含める ドラッグして セクション プライマリタイトルコンテンツに セクション単位
2. 下に配置する ヘッダ 以前含めた 

追加 ボタン データブロックに:

1. ドラッグ タブ から コンポーネントパネルを含める プライマリタイトルコンテンツに セクション単位
2. 下に置いて エリア 追加したばかり 
3. を2回クリックします タブ 言葉遣いを調整し、名前を変更します（たとえば、「会話しましょう」）。  
4. categoryを タブ （「ボタン」など） 

レイアウトの均一性を保つためにタブの色合いを変更します。

1. 選ぶ タブ
2. デフォルトの色相サンプルをヒット デザインパネル > 背景> 色
3. 使用した色調に切り替えます ヘッダ

現在追加したコンテンツ用のスペースを確保しましょう。 

追加 空間 下端まで ヘッダ:

1. ヒット ヘッダ
2. ロック解除 デザインパネル > 分離 
3. ベースを設定する 空間 20ピクセルまで

すでに「ボタン」のcategoryを添付しているので、それをコピーして貼り付けることができます。 タブ 合計2となる要素 ボタン:

1. 初期評価 タブ
2. コピー/貼り付け タブ
3. 次の項目を2回クリックします タブの 文言を変更して（例：「当社のプロジェクトを見る」）

注記： コンポーネントを変更すると、 タブ クラスは両方に影響します ボタン これらは category (「ボタン」など) が似ているため、すぐに使用できます。 

例えば、 空間 1の右側 タブ、 空間 増加は両方で起こる ボタン: 

1. いずれかを選択してください ボタン
2. ロック解除 デザインパネル > 分離 
3. 正しい設定 空間 10ピクセルまで

重なり合うレイアウトを設計する

重なり合うレイアウトは、 グリッド コンポーネントは互いに重なり合っています。この図では、データブロックが重なり合うように形成します。 背景画像. 

プライマリタイトルコンテンツを選択する セクション単位. 

その 配置 設定されている オート、最初に取得可能なセルを取得します グリッド — 右上のセル。 

右下のセルに配置しましょう グリッド: 

1. ロック解除 デザインパネル > グリッドチャイルド > 配置
2. 主要タイトルコンテンツの配置を確立する セクション単位 に マニュアル
3. ドラッグして セクション単位 右下のセルに

同じプロセスをプライマリタイトルで繰り返しましょう 写真:

1. プライマリタイトルを選択する 写真
2. ロック解除 デザインパネル > グリッドチャイルド > 配置
3. 配置を確立する 写真 に マニュアル
4. 右下のハンドルをドラッグして 写真 両方にわたって グリッド 列と行を全体をカバーする グリッド 

データをインターネット上で表示できるようにするには 写真、変更する セクション単位 背景色: 

1. メインタイトルコンテンツを選択する セクション単位
2. ロック解除 デザインパネル > 背景 > 色
3. サンプルをクリックして色相を選択します（たとえば白）

行と列のサイズや数量を微調整します グリッド: 

1. 主要タイトルセグメントを評価する セクション単位 （主要な要素）
2. プレス 入力 または調整をクリック グリッド シンボル 

現在セグメントの高さは オートこれを正確なサイズに変更してみましょう。 

1. と書かれたバーをクリックします オート 頂上の横 グリッド 行をクリックすると、行のサイズ変更メニューが表示されます。 

2. 一番上の行を1 FR（分数単位）として指定します
3. 2行目も同じ手順を繰り返します 

各行に 1 つの FR を割り当てると、柔軟な FR を使用して、各行がビューポートの高さの 50% を占めることになります。 

行の高さを変更するには、上記の手順を繰り返します。上の行を 1 FR に維持し、下の行を自動に切り替えると、上の行は使用可能なスペースをすべて利用し、下の行の高さは行内のコンテンツに基づいて自動的に調整されます。 

クリック 終わり 編集を完了するには グリッド. 

次に、コンテンツを強化して見た目を改善しましょう。

調整する 見出し余白:

1. を選択 見出し
2. アクセス スタイルパネル > 間隔
3. 上部をタップ マージン 0ピクセルに変更します
4. 下部をタップ マージン 20ピクセルに変更します

微調整する 段落の余白: 

1. を選択 段落
2. アクセス スタイルパネル > 間隔
3. デフォルトの下部を調整する マージン 30ピクセルまで 

コンテンツブロック内の要素の間隔も管理できます。 見出し, 段落、 そして ボタン:

1. ホームヒーローコンテンツを選択 divブロック
2. アクセス スタイルパネル > 間隔
3. パディング（要素内のスペース）を調整する
4. プレス シフト、そして内側にドラッグ パディング 4辺すべてを30ピクセルに変更するコントロール

本文（全ページ）タグを修正

変更する 本文（全ページ）タグ サイトの準備を整えて時間を節約します。たとえば、 フォント とともに 本文（全ページ）タグ 選択した内容はデフォルトに影響します フォント プロジェクト全体の要素に対して。 

の 体 要素は、どのページでもトップレベルの要素として機能します。 本文（全ページ）タグ:

1. 起動する ナビゲーター そして、 体
2. クリック セレクタ フィールドを選択し、 本文（全ページ）鬼ごっこ ドロップダウンから

調整する時間 フォント のために 本文（全ページ）タグ:

1. クリック セレクタ フィールドを選択し、 本文（全ページ）鬼ごっこ ドロップダウンから 
2. アクセス タイポグラフィ > フォント フォントを選択します（例：「Source Sans Pro」）
3. 変更する フォントサイズ 15ピクセルまで
4. 変更する フォント ライン 身長 1.4とハイフン（-）を入力して、単位なしの測定値1.4に変換します。

単位なしの行の高さを使用すると、 フォントの 行の高さと フォント サイズ。単位なしの行の高さについて詳しくご覧ください。 

以前にオーバーライドが設定されていないテキスト要素は、 本文（全ページ）タグ. 

これで、魅力的なヒーロー セクションが装備されました。あなたはヒーローです!