Diviでユニークなフレームデザインを作成するための再利用可能なレイアウト
公開: 2018-09-27Diviを使用して行の独自のフレームデザインを作成することは、ページコンテンツをクリエイティブにステージングするための便利な（そして楽しい）方法です。 Diviのセクションディバイダーをコンパクトな行構造と組み合わせることで、コンテンツをフレーミングするための無数のデザインの可能性を探ることができます。 このテクニックは、以前のチュートリアルやいくつかの既成のレイアウトで紹介されているのを見たことがあるかもしれません。 しかし、今日は、このデザイン手法を自分で探求する簡単な方法を紹介したいと思いました。 このチュートリアルでは、ライブラリに保存できる再利用可能なセクションレイアウトをすばやく作成する方法を紹介します。 次に、そのレイアウトを使用して、新しいフレームデザインと配色を調べることができます。 レイアウトは、独自のデザインで行を構成することで機能するため、すべての列構造とモジュールを行内で使用できます。
始めましょう。
再利用可能なフレームデザインレイアウトの作成
はじめに、1列のレイアウトで新しいセクションを作成しましょう。 この時点でモジュールを追加する必要はありません。 代わりに、最初に行とセクションを設計して、後で必要なコンテンツを行に入力できるようにします。
行を設計する
次のように行設定を更新します。
背景色：＃333333
行の配置：中央
カスタム幅：775px
側溝幅：2
カスタムパディング：上130px、下130px、左50px、右50px
カスタムマージン：0px上、0px下
セクションを設計する
次のようにセクション設定を更新します。
背景色：#ffffff
トップディバイダースタイル：スクリーンショットを参照
トップディバイダーカラー：#ffffff
ボトムディバイダースタイル：スクリーンショットを参照
ボトムディバイダーカラー：#ffffff
次に、上下のパディングを0pxに設定し、次のように境界線を使用して上下のスペースを作成します。
カスタムパディング：0px上、0px下
トップボーダー幅：5vw
上枠の色：#ffffff
下の境界線の幅：5vw
下の境界線の色：#ffffff
上部と下部の境界線を使用してセクションの間隔を作成すると、行と重なるセクション仕切りに使用できるスペースが最大になります。 このようにして、デザインに任意の仕切りの高さを選択できます。
レイアウトをライブラリに保存します
フレーム付き行デザインの基本的なレイアウト構造は以上です。 この時点で、将来の設計でセクションレイアウトを使用するために、このセクションをDiviライブラリに保存します。
セクションメニューの[ライブラリに保存]アイコンをクリックします。
次に、レイアウトの名前（「行フレームレイアウト」など）を入力し、[ライブラリに保存]ボタンをクリックします。
フレームデザイン＃1の完了
将来の作業のためにセクションレイアウトを保存したので、行にコンテンツを追加して、最初の設計例を完成させましょう。
列構造の変更
このデザインでは、6列の画像ギャラリーを追加するとよいと思います。 小さな列構造により、狭い行の内側にうまくフレーム化された画像の小さなクラスターを作成できます。
これを行うには、最初に行構造を6列のレイアウトに変更します。
行へのコンテンツの追加
次に、3つの画像モジュール（画像付き）を各列に追加します。 サイズやサイズが異なる（横向きではなく）縦向きの画像を使用しています。
これが最終的なデザインです。
ボーナスデザインのヒント
フレーミングデザインの可能性をさらに探求する前に、フレームをページの片側に拡張するための簡単なトリックを指摘したいと思います。 これを行うには、セクション設定に移動し、次のように背景グラデーションを追加します。
背景グラデーション左の色：＃333333
背景のグラデーションの正しい色：#ffffff
グラデーション方向：90度
開始位置：50％
終了位置：0％
このデザインをチェックしてください。
さまざまなフレームデザインとコンテンツのレイアウトをカスタマイズする
このシンプルなレイアウトのエキサイティングな可能性は控えめに言ってもたくさんあります。 配色、仕切りスタイル、列レイアウト、モジュールコンテンツをカスタマイズすることで、さまざまなレイアウトデザインを作成できます。 さらに、「検索と置換」などのクールなDivi機能を使用して、数回クリックするだけで広範囲の配色を変更できます。
レイアウトを更新するための基本的なプロセスは次のとおりです。
- 保存したセクションレイアウトをページにロードします
- 「検索と置換」を使用して、セクションの配色を更新します。
- 仕切りのスタイルを変更する
- 新しい背景と列構造で行をカスタマイズします。
- 列にモジュールを追加する
このプロセスで、新しいデザインを探索することはかなり楽しいはずです！ 続けましょう。
フレームデザイン＃2
この次の設計では、前に作成した保存済みセクションレイアウトを使用します。 これを行うには、クリックしてビジュアルビルダーに新しいセクションを追加します。 次に、[ライブラリから追加]タブを選択し、リストからセクションレイアウトをクリックします。
これで、新しいデザインのセクションをカスタマイズする準備が整いました。
このレイアウトに使用される配色を変更するために、検索と置換機能を使用して、いくつかのDiviデザインパワーを呼び出すことができます。 複製されたセクションのセクション設定に移動し、背景色を右クリックして、[検索と置換]を選択します。
検索と置換モーダルで、以下を更新します。
内：このセクション
置換：＃443850
[すべて置換]を選択します
これにより、セクションの背景、境界線、および仕切りに使用されていた白い色が新しい色に置き換えられます。
次に、セクション設定を新しい仕切りスタイルで更新します。
次に、行の設定を白い背景色とボックスシャドウで更新して、行の新しいフレームデザインを完成させます。
コンテンツについては、宣伝文句を使用した5列のレイアウトを試してみましょう。 先に進み、行の列レイアウトを5列レイアウトに更新します。
次に、最初の列に宣伝文を追加します。 デフォルトのコンテンツテキストを取り出し、タイトルテキストのみを残します。 次に、宣伝文句の画像を星のアイコンに置き換えます。 次のように設計設定を更新します。
アイコンの色：＃7d8491
アイコンフォントサイズ：80px
テキストの向き：中央
宣伝文モジュールを複製し、次のように設定を更新します。
アイコンの色：＃8cd845
アイコンフォントサイズ：50px
次に、これら2つのモジュールを複製するか、コピーして5つの列全体のパターンに貼り付け、各列に3つのモジュールを配置します。
これが最終的なデザインです。
フレームデザイン＃3
3番目のフレーム設計では、最初に、2番目の設計で以前に行ったように、保存したセクションレイアウトをロードする必要があります。
その後、（前のデザインで行ったように）セクションの背景色の検索と置換を使用して、セクションの背景、仕切り、境界線に使用されている白い色を素敵な青い色に置き換えることができます。 これを行うには、セクション設定に移動し、背景色を右クリックして、[検索と置換]を選択します。 次に、以下を更新します。
内：このセクション
置換：＃1e3888
[すべて置換]を選択します
次に、セクションの仕切りを新しい上部と下部の仕切りスタイル（雲）で更新します。
次に、行の設定に移動します。 次のように、行にグラデーションの背景を付けます。
背景グラデーションの左の色：デフォルト（＃2b87da）
背景グラデーションの右の色：＃1E3888（セクションの背景と同じ色）
グラデーションタイプ：放射状（列に丸みを帯びた「雲のような」感触を与えるため）
終了位置：83％（行の端を少し隠すため）
これで、フレーム化された行にコンテンツを追加するだけです。 行にCallTo Actionモジュールを追加し、次のように設定を更新しましょう。
リンク入力ボックスに「＃」を追加してボタンを表示します
背景色を使用：いいえ
タイトルテキストの色：＃ffc338
ボタンのテキストの色：＃ffc338
これが最終的なデザインです。
モバイルはどうですか？
あなたが疑問に思っていた場合に備えて。 モバイルデバイスでのデザインは次のようになります。
最終的な考え
このチュートリアルで作成されたフレームデザインは、完全に洗練されたデザインピースを紹介するのではなく、デザインの可能性を強調することを目的としています。 そのため、フレームのデザインに集中し、基本的な内容の例を使用しました。 うまくいけば、それらは少なくとも、さまざまなセクションの仕切り、配色、およびコンテンツで遊ぶことによって、新しいデザインを探求するようにあなたを刺激するでしょう。
コメントでお返事をお待ちしております。
乾杯！