Diviで独自のトグルを使用して完全な分割画面レイアウトを作成する方法
公開: 2020-05-06分割画面レイアウトは、美しくバランスの取れた型破りなデザインをDiviWebサイトに追加するための優れた方法です。 Diviの新しい位置オプションを使用すると、隣接する2つのDiviセクションを使用して分割画面レイアウトデザインを作成できます。 これにより、DiviBuilderを使用してさらにユニークな分割画面レイアウトを構築するための扉が開かれます。 このチュートリアルでは、Diviで独自のトグルを使用して完全な分割画面レイアウトを作成しながら、いくつかの独自のデザイン機能について説明します。
始めましょう。
スニークピーク
これは、このチュートリアルで構築するデザインの概要です。
開くを切り替えます
閉じたトグル
モバイル
レイアウトを無料でダウンロード
このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
レイアウトをページにインポートするには、zipファイルを抽出し、JSONファイルをDiviBuilderにドラッグするだけです。
チュートリアルに取り掛かりましょう。
始めるために必要なもの
開始するには、次のことを行う必要があります。
- まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
- WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
- 「最初から構築」オプションを選択します。
その後、Diviでデザインを開始するための空白のキャンバスが作成されます。
パート1：2つのセクションで分割画面レイアウトを作成する
このデザインでは、2つのDiviセクションを互いに隣接して配置して分割画面デザインを作成する新しい手法を紹介します。 まず、デフォルトのセクションに1列の行を追加します。 これで、最初のセクションの設計が始まります。
セクション1設定
この2つのセクションの最初のセクションでは、次の設計設定を追加することから始めましょう。
バックグラウンド
- 背景画像を追加する
- グラデーションの背景左の色：#ffffff
- グラデーションの背景左の色：rgba（255,255,255,0.45）
サイズと間隔
次に、セクションがブラウザの幅の50％、ブラウザの高さの100％を占めるように、サイズと間隔を更新します。
- 幅：50％（デスクトップ）、100％（タブレットと電話）
- 最小の高さ：900px（デスクトップ）、なし（タブレットと電話）
- 高さ：100vh（デスクトップ）、自動（タブレットと電話）
- パディング：0px上、0px下
トップディバイダー
- トップディバイダースタイル：スクリーンショットを参照
- トップディバイダーカラー：＃333333
- トップディバイダーの高さ：50vh（デスクトップ）、10vh（タブレットと電話）
- トップディバイダー水平リピート：0.5x（デスクトップ）、1x（タブレットと電話）
- トップディバイダーの配置：セクションコンテンツの下
ボトムディバイダー
- ボトムディバイダースタイル：スクリーンショットを参照
- ボトムディバイダーカラー：＃02c39a
- ボトムディバイダーの高さ：50vh（デスクトップ）、30vh（タブレットと電話）
- ボトムディバイダー水平リピート：0.5x（デスクトップ）、1x（タブレットと電話）
- ボトムディバイダーの配置：セクションコンテンツの下
第2節
セクション1を複製する
分割画面レイアウトの右側を占める隣接セクションを作成するには、セクション1を複製します。
次に、次のように設定を更新します。
ポジション
- 位置：絶対（デスクトップ）、相対（タブレットと電話）
- 場所：右上
- Zインデックス：10
バックグラウンド
- 背景色：なし/白
トップディバイダーの更新
- トップディバイダースタイル：スクリーンショットを参照
- トップディバイダーカラー：＃02c39a
- トップディバイダー水平リピート：1x
- トップディバイダーフリップ：垂直
仕切りは、セクション1の隣接する上部ヘッダーと完全に整列する必要があります。
ボトムディバイダー
- ボトムディバイダースタイル：スクリーンショットを参照
- ボトムディバイダーカラー：＃f0f3bd
- ボトムディバイダー水平リピート：1x
- ボトムディバイダーフリップ：垂直
パート2：セクション1タイトルとメニュー
2つのセクションのレイアウトの準備ができたので、各セクションにコンテンツを追加し始めることができます。
タイトルの作成
まず、左側のセクションに大きなタイトルを作成します。
行設定
テキストモジュールを追加する前に、セクション1の行の行設定を次のように更新する必要があります。
- 側溝幅：1
- 幅：100％
- 最大幅：100％
- パディング：上0px、下0px、右10％
- 位置：絶対（デスクトップ）、相対（タブレットと電話）
- 場所：中道左派
テキストモジュール
行の設定が完了したら、行をセクション内で垂直に配置する必要があります。 次に、新しいテキストモジュールを行に追加します。
テキストコンテンツ
テキストモジュールの設定を開き、次のコンテンツを更新します。
<h1>Divi <br />Web <br />Design</h1>
テキストデザイン
次に、テキストデザイン設定を次のように更新します。
- 見出しフォント：ポピン
- 見出しフォントの太さ：太字
- 見出しテキストの配置：右
- 見出しのテキストサイズ：10vw
- 見出し線の高さ：1.2em
- パディング：残り5％
メニューの作成
このレイアウトでは、隣接するセクションが2つあるため、セクションの一方または両方に6列のレイアウトを追加する機会があります。 これは、セクションの下部に素敵なアイコンメニューを作成するのに最適です。
その方法は次のとおりです…
新しい行を追加
下部のメニューを作成するには、セクション1の行の下に新しい1列の行を追加します。後で列を複製して6つの列すべてを作成するため、最初に1列のレイアウトを追加します。
行設定
次に、次の行設定を更新します。
- 側溝幅：1
- 幅：100％
- 最大幅：100％
- パディング：0px上、0px下
- 位置：絶対（デスクトップ）、相対（タブレットと電話）
- 場所：左下
- Zインデックス：3
宣伝文モジュール
次に、新しい行に宣伝文句モジュールを追加します。
宣伝文の内容
次に、宣伝文の内容を次のように更新します。
- タイトル：ビジネス
- アイコン：建物
宣伝文句のスタイリング
次に、次のように設計設定を更新します。
- アイコンの色：＃333333
- アイコンフォントサイズ：40px
- テキストの配置：中央
- タイトルテキストサイズ：12px
次に、次のカスタムCSSを宣伝文画像に追加します
margin-bottom: 10px;
重複する列
1列目にアイコンがデザインされたので、列全体を5回複製することで、他の5つのアイコンの作成とデザインをスピードアップできます。
宣伝文のコンテンツを更新する
6つの列/アイコンがすべて作成されたら、戻って各宣伝文のタイトル、アイコン、およびURLを更新します。
パート3セクション2トグル
セクション1が完了したので、分割画面レイアウトの右側のセクションにトグルを追加し始めることができます。 左側の各タイトルの大きな単語に対応する合計3つのトグルがあります。 各トグルには、デスクトップ上でカスタムの絶対位置が与えられ、トグルを所定の位置に保持します。
行設定
トグルモジュールの追加を開始する前に、行のサイズと間隔を最適化する必要があります。 右側のセクションの行の行設定を開き、以下を更新します。
- 側溝幅：1
- 幅：100％
- 最大幅：100％（デスクトップ）、なし（タブレットと電話）
- 高さ：100％
カラムの高さ
行の高さがセクションの高さに等しいので、列に対して同じことを行う必要があります。 これを行うには、次のカスタムCSSを列のメイン要素に追加します。
height: 100%;
トップトグルモジュール
列の高さを設定したら、最初のトグルモジュールを行に追加しましょう。
コンテンツを切り替える
次に、トグルコンテンツを「Divi」というタイトルで更新し、次の本文コンテンツに貼り付けます。
Your content goes here. Edit or remove this text inline or in the module Content settings. Your content goes here. <a href="#">| Learn More ></a>
トグルデザイン
トグルのデザインを次のように更新します。
- アイコンの色：＃333333
- アイコンフォントサイズ：40px
- トグル背景色を開く：透明
- クローズドトグル背景色：透明
- オープンタイトルのテキストの色：＃333333
- タイトルテキストの色：＃333333
- タイトルフォント：ポピンズ
- タイトルフォントの太さ：超軽量
- タイトルテキストサイズ：40px
- 本文の色：＃333333
- リンクフォントの太さ：＃333333
- リンクフォントの太さ：太字
- リンクフォントスタイル：TT
- リンクテキストの色：＃333333
- リンク文字の間隔：3px（デスクトップ）、5px（ホバー）
サイズと位置を切り替えます
- 幅：50％（デスクトップ）、80％（タブレットと電話）
- 最大幅：400px
- ボーダー幅：0px
- アイコンカスタムCSSの切り替え：
left:-60px;
- 位置：絶対（デスクトップ）、相対（タブレットと電話）
- 垂直オフセット：22％
- 水平オフセット：50％
- Zインデックス：2
トグルモジュールに追加されたカスタムCSSは、トグルの左側のサイズにトグルアイコンを配置します。 また、位置設定では、ブラウザの幅に合わせて拡大縮小する長さのパーセンテージ単位を使用して、トグルを絶対位置に配置します。
ボトムトグルモジュール
トップトグルを複製
下部のトグルを作成するには、作成したトグルを複製します。
位置を更新
次に、レイヤーボックスを使用して重複するトグル設定を開き、次のように位置オフセットを更新します。
- 垂直オフセット：70％
ミドルトグルモジュール
ボトムトグルを複製
中央のトグルを作成するには、下部のトグルを複製します。
位置を更新
次に、以下を更新します。
- 場所：左中央
- 水平オフセット：19px
サイズを更新
- 幅：95％
- 最大幅：500px
カスタムCSS
オプションのデザイン機能の場合、メイン要素にカスタムCSSスニペットを追加して、タイトルの右側にテキストを配置できます。
これを行うには、次のCSSをメイン要素に貼り付けます。
display:flex; align-items:center;
仕切り線
トグルが配置されたので、いくつかの分割線を追加して、上部と下部のトグルを左側のセクションの対応する単語に接続できます。
トップディバイダーモジュール
上部の仕切り線を作成するには、上部のトグルの下に新しい仕切りモジュールを追加します。
仕切りの設計
次に、仕切りの設計設定を次のように更新します。
- 線の色：＃333333
- 線の位置：垂直方向の中央
- 仕切りの重量：2px
- 幅：50％
- 変換変換Y軸：29px
- 変換変換X軸：-12px
- アニメーションスタイル：スライド
- アニメーションの方向性：右
- アニメーション時間：2000ms
- アニメーション強度：10％
- アニメーションの開始不透明度：100％
仕切りの可視性と位置
今、私たちがする必要があるのは、モバイルで仕切りを非表示にし、上部のトグルと揃うように配置することです。
- 無効にする：電話とデスクトップ
- 位置：絶対
- 垂直オフセット：22％
- Zインデックス：1
ボトムディバイダーモジュール
重複したトップディバイダーモジュール
下の仕切りを作成するには、上の仕切りモジュールを複製します。
位置を更新
次に、位置オフセットを更新して、下部のトグルに合わせます。
- 垂直オフセット：70％
最終結果
完了したら、ライブページで最終結果を確認してください。
開くを切り替えます
閉じたトグル
モバイル
最終的な考え
この完全な分割画面レイアウトは、今後の多くの設計に役立ついくつかの独自の設計手法を備えています。 デュアルセクションは、無数のカラムの組み合わせとセクションディバイダーの設計を提供します。 また、トグルを配置する機能は、重要な情報を正確に配置するのに役立ちます。 お役に立てば幸いです。
コメントでお返事をお待ちしております。
乾杯！