Diviで幾何学的グリッドレイアウトを設計する方法

あなたのウェブサイトのための幾何学的なグリッドレイアウトをデザインすることは非常に美しいことができます。 私のお気に入りの幾何学的デザイン要素の1つは六角形です。 六角形を使用して、バランスの取れた調和のとれたグリッドレイアウトを設計できます（ミツバチの巣箱を考えてください）。 しかし、設計には課題が伴う可能性があります。 コンテンツの背景として機能するシェイプを作成しました。 次に、コンテンツを図形の中に収める必要があります。 次に、これらの形状がさまざまな画面サイズで正しく配置されていることを確認する必要があります。 しかし、心配しないでください。 思ったほど難しくはありません。

これらの幾何学的形状を作成することに関しては、いくつかの高度なカスタムCSSを使用してこれを実現する方法がありますが、最も簡単な方法は画像を作成することだと思います。 その後、残りの部分にDiviのパワーを使用できます。

このチュートリアルでは、Diviを使用して幾何学的なグリッドレイアウトを設計するために六角形の画像を作成することがいかに簡単であるかを示します。

始めましょう！

スニークピーク

これは、このチュートリアルで構築する幾何学的グリッド設計の概要です。

何が必要

• 六角形の画像を作成するためのフォトエディタ（私はSketchを使用します）。 または、今のところ、この画像をデスクトップにドラッグして使用することもできます。
  
• Diviテーマ（インストール済みおよびアクティブ）

六角形の背景画像の作成

六角形の背景画像を作成するには、フォトエディタSketchを使用します（Macの場合のみ）。 ただし、これは、Photoshop、Illustrator、Gimpなどの任意の数のフォトエディタで簡単に作成できる形状である必要があります。

チュートリアルのこの部分を気にしたくない場合は、今のところいつでもこの画像をデスクトップにドラッグできます。 これは暗い半透明の六角形の画像であり、背後の背景色が透けて見えることを考慮して、多くのデザインで機能するはずです。

スケッチで画像を作成する方法は次のとおりです。 まず、右上の挿入アイコンをクリックします。 次に、形状オプションにカーソルを合わせて、六角形の形状を選択します。

次に、Shiftキーを押しながらキャンバスをクリック（および押したまま）し、マウスをドラッグして形状を作成してから、マウスを放します。 Shiftキーを押したままにすると、形状に完全に正方形の寸法を作成できます。 次に、右側のサイドバーでシェイプのプロパティを次のように更新します。

サイズ：幅360、高さ360
側面：6
塗りつぶしの色：000000 hex、0 R、0 G、0 B、30 A（基本的にこれは不透明度30％の黒色です）

次に、画像をpngとしてエクスポートし、後で使用できるようにWordPressメディアライブラリにインポートします。

3列の最初のセクションの作成

この設計では、3つのセクションが互いに積み重なっており、それぞれに異なる列構造を保持する行があります。 最初のセクションには3列の構造があり、2番目のセクションには2つの列があり、3番目のセクションには1つの列しかありません。

最初のセクションを作成するには、新しいページを作成し、ビジュアルビルダーを展開して、新しいレイアウトを最初から作成します。 新しい通常のセクションが作成され、ビジュアルビルダーからセクションの列構造を選択するように求められます。 3列構造（3分の1、3分の1、3分の1）を選択します。

行の編集とモジュールの追加を開始する前に、セクション設定を次のように更新して、セクションに背景色のグラデーションを付けましょう。

背景のグラデーションの左の色：＃2b87da
背景グラデーションの右の色：rgba（0,0,0,0.6）

行の設定をカスタマイズし、六角形の画像を列の背景に追加します

探しているデザインを実現するには、3列の行の各列に背景画像を追加する必要があります。 したがって、各列について、六角形の画像（360px x 360pxである必要があります）を各列に追加します。 次に、背景画像のサイズを「実際のサイズ」に設定し、背景画像の繰り返しを「繰り返しなし」に設定します。

列1、2、および3の背景画像に対してこれを確認して実行してください。

次に、行の設定をカスタマイズして、六角形の背景画像が各列に正しく表示されるために必要な間隔を作成する必要があります。 この間隔は、応答性を維持し、モバイルの水平方向のスペースを最大化するのにも役立ちます。

次のように行設定を更新します。

カスタム幅を使用：はい
単位： ％
カスタム幅：100％
カスタムガター幅を使用：はい
側溝幅：2
列の高さを等しくする：はい

カスタムパディング（デスクトップ）：0px上、0px下、10％左、10％右
カスタムパディング（タブレット）：0％左、0％右

今のところ、行の設定を保存します。

各列への宣伝文モジュールの追加

最初の列に新しい宣伝文モジュールを追加し、次のように宣伝文の設定を更新します。

コンテンツ：「あなたのコンテンツはここにあります。 このテキストをインラインで、またはモジュールのコンテンツ設定で編集または削除してください。」 （六角形の画像内のスペースは限られているため、これは短くしてください）
アイコンを使用：はい
アイコンを選択します（明らかに必要な人）

次に、次のように設計設定を更新します。

アイコンの色：＃66d1ff
アイコンフォントサイズ：66px
テキストの向き：中央
テキストの色：明るい
幅：360px（六角形の背景画像と同じ幅）
モジュールの配置：中央
カスタムパディング：上85px、下85px、左10％、右10％

最初に六角形の前に表示するコンテンツを追加することが重要です。これにより、宣伝文句モジュールの間隔を調整して、背景画像を完全に表示する方法を学びます。 85pxの上下のパディングを追加したことに注意してください。 これは、ブラウザをモバイルデバイスのサイズに調整する場合でも、六角形の背景を表示するのに十分です。

宣伝文モジュールを保存したら、コピーを先に進めて2列目と3列目に貼り付け、3つすべての宣伝文句が表示されるようにします。

これで、宣伝文の最初の行に六角形の背景が正常に追加されました。

2列の2番目のセクションの作成

2番目のセクションを作成するには、先に進んで最初のセクションを複製し、セクション設定を次の背景色で更新します：rgba（0,0,0,0.6）そして既存のグラデーションを削除します。

次に、行の列構造を2列に変更し、右下の列にある余分なモジュールを削除します。

次のように行設定を更新します。

側溝幅：3
カスタムマージン（デスクトップ）：-145pxトップ
カスタムマージン（タブレット）：-70pxトップ
カスタムパディング（デスクトップ）：左24％、右24％

上のセクションの宣伝文の間に六角形の背景を配置するために、左右にさらにパディングを追加しました（両側に24％のパディングがあると、かなり近くなります）。 また、行のパディングが増えたことによる列スペースの減少に対応するために、ガター幅を3に戻しました。 次に、-145pxのマージンを使用して、行を少し引き上げました。

ご覧のとおり、グリッドレイアウトがまとまっています。

1つの列で3番目のセクションを作成する

最後のセクションについては、セクションセクションを複製してください。 次に、最初のセクションに移動し、背景のグラデーションをコピーして、作成した3番目のセクションに貼り付けます。 次に、グラデーションカラープレビューにカーソルを合わせたときに「スイッチ」アイコンをクリックして、グラデーションを反転します。 次に、3番目のセクションの背景色を削除します。

次に、行の列構造を1つの列に更新し、余分な宣伝文句モジュールを削除します。

小さなブラウザウィンドウで六角形の画像の背景を他の宣伝文句に合わせて拡大縮小するには、行にパディングを追加する必要があります。 これにより、六角形の画像が他の画像と一致するように少し押しつぶされます。 これは、デザインをより一貫性のあるものにするためのほんの小さな詳細です。

行設定で、次のようにカスタムパディングを更新します。

カスタムパディング（デスクトップ）：左37％、右37％

それでは、幾何学的グリッドレイアウトの最終結果を確認しましょう。

これがモバイルでの様子です。

さまざまな画面サイズに調整する方法は次のとおりです。

最終的な考え

このチュートリアルでは、六角形の背景を列に追加して幾何学的グリッドを作成する方法を示しますが、これと同じ手法を簡単に適用して、必要な背景画像を追加できます。 これはあなたのウェブサイトを際立たせるために美しいレイアウトを設計するための多くの扉を開きます。

次のプロジェクトに役立つことを願っています。コメントでお返事をお待ちしております。

乾杯！