Diviで独自のボタンレイアウトを作成するためにボタンを絶対に配置する方法
公開: 2020-02-26Diviの組み込みの位置オプションは、ボタンを含むDivi要素を正確に配置するための便利な設計ツールです。 ほとんどの場合、ドキュメント（またはページ）のフローを維持するボタンのデフォルトの静的位置に依存しています。 ただし、ボタンを完全に配置する方法を知っていれば、Diviコンテンツ用にいくつかのユニークで実用的なボタンレイアウトを作成できます。
このチュートリアルでは、Diviの宣伝文句モジュールに独自のアクセントを付ける4つの異なるボタンレイアウトを作成する方法を示します。 これは、Webサイトで宣伝文を使用するときに便利です。
始めましょう。
スニークピーク
このチュートリアルで作成する4つのボタンのレイアウトを簡単に確認してください。
Diviボタンのレイアウトを無料でダウンロード
このチュートリアルのボタンレイアウトデザインを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
レイアウトをページにインポートするには、zipファイルを抽出し、JSONファイルをDiviBuilderにドラッグするだけです。
チュートリアルに取り掛かりましょう。
始めるために必要なもの
開始するには、次のことを行う必要があります。
- まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
- WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
- 「最初から構築」オプションを選択します。
その後、Diviでデザインを開始するための空白のキャンバスが作成されます。
ボタンレイアウトの作成＃1：デュアルボトムボタン
4つのボタンレイアウトの最初の部分では、宣伝文句モジュールの下にデュアルボトムボタンを作成します。 これは、2つのCTAを必要とするコンテンツ（サービスなど）を特集するための優れたオプションです。 さらに、これは、ボタンを同じ高さの列の下部に固定するための優れた方法です。
まず、セクションに2列（0ne half 1/2）行を追加します。
行設定
- カスタムガター幅を使用：はい
- 側溝幅：2
- 列の高さを等しくする：はい
- 幅：100％
- マージン：50px下
- パディング：0px上、0px下
列1の設定
- 背景色：＃2e3858
- パディング：50px下
この下部のパディングは、絶対位置のボタンを追加するときに必要なスペースを作成します。
宣伝文のモジュール設計
次に、宣伝文モジュールを列1に追加します。
次に、次のように画像を宣伝文モジュールにアップロードします。
設計設定に移動し、以下を更新します。
- 画像/アイコンの配置：左
- タイトルフォント：PT Sans
- タイトルフォントの太さ：太字
- タイトルテキストの色：#ffffff
- タイトルテキストサイズ：38px
- タイトル文字の間隔：2px
- 本文の色：#ffffff
- 画像幅：40％
- コンテンツの幅：100％
- 幅：100％
- パディング：50px、上、50px下、30px左、30px右
デュアルボトムボタンの追加
ボタン＃1のデザイン
宣伝文モジュールの下に新しいボタンモジュールを追加します。
次に、ボタンの設定を次のように更新します。
- ボタンのテキストサイズ：16px
- ボタンのテキストの色：#ffffff
- ボタンの背景色：＃2dc3a3
- ボタンの境界線の幅：0px
- ボタンの境界線半径：0px
- ボタンの文字間隔：2px
- ボタンフォント：PT Sans
- ボタンのフォントの太さ：太字
- ボタンのフォントスタイル：TT
- マージン：0px下
- パディング：上1em、下1em、左1.5em、右2.5em
ボタン＃1絶対位置決め
ボタンを列の左下に完全に配置するには、以下を更新します。
- 位置：絶対
- 場所：左下
Diviは、組み込みのクリック可能なロケーショングリッドでこれを簡単にします。 ボタンを列の下部に揃えたいので、オフセット値は必要ありません。
ボタン＃2のデザインと位置
ボタン＃2を作成するには、前のボタンモジュールを複製します。
複製は前のボタンの上に直接スタックされるため、ビジュアルビルダーを使用している場合は、何も起こらなかったように見える場合があります。 クリックしてボタンモジュールの設定を開き、以下を更新します。
- 背景色：＃df4570
- 位置の場所：右下
次に、現在空の列2を消去し、列1を複製して、右側の列にも正確に複製されたデザインを取得します。
ボタンレイアウト＃1の結果
結果を確認してください。 右の列のコンテンツが列をページのさらに下に押していることに注意してください。ただし、ボタンは絶対に配置されているため、ボタンは引き続き下部を抱き締めて、対称的なデザインにしています。
ボタンレイアウト＃2の作成：3つのサイドボタン
次のボタンレイアウトでは、1つの列の宣伝文句モジュールの右側に3つのボタンを配置します。
この次のボタンレイアウトデザインをジャンプスタートするには、前の行を複製します。
宣伝文句の設定
宣伝文の設定を次のように更新します。
- 背景色：＃df4570
- 画像幅：60％
- 幅：56％（デスクトップとタブレット）、100％（電話）
これにより、3ボタンのレイアウトを追加するために、宣伝文の右側に必要な部屋が作成されます。
ポジショニングボタン＃1
ボタン＃1を配置するには、左下隅にある緑色のボタンのボタン設定を開き、以下を更新します。
- 位置：絶対（デスクトップとタブレット）、相対（電話）
- 場所：右上
- 垂直オフセット：20％（デスクトップとタブレット）、0％（電話）
- 水平オフセット：5％（デスクトップとタブレット）、0％（電話）
ポジショニングボタン＃2
ボタン＃2を配置するには、配置したボタンを複製します。 右下の赤いボタンは不要なので削除できます。
次に、複製ボタンの設定を開き、以下を更新します。
- 背景色：＃df4570
次に、垂直オフセットを増やしてボタンを少し下に移動します。
- 垂直オフセット：35％
ポジショニングボタン＃3
最後に、前のボタンを複製して以下を更新することにより、このプロセスをもう一度繰り返します。
- 背景色：＃3599e5
- 垂直オフセット：50％
ボタンレイアウト＃2の結果
3ボタンレイアウトの最終結果を確認してください。
ボタンレイアウト＃3の作成：散在および拡大縮小されたボタン
この次のレイアウトでは、ボタンをもう少し散発的に配置してから、変換スケールを使用していくつかのボタンのサイズを調整します。
開始するには、3ボタンレイアウトを含む前の行を複製します。
宣伝文句の設定
次に、列1の宣伝文モジュールの設定を開き、以下を更新します。
- 幅：60％
- 背景色：透明
- 幅：60％
- モジュールの配置：中央
- テキストの配置：中央
- モジュールの配置：中央
- ボーダー幅：2px
- ボーダーカラー：rgba（255,255,255,0.15）
- テキストテキストサイズ：20px
- マージン：50pxトップ
ボタン＃1の配置
- 垂直オフセット：8％
- 水平オフセット：-7％
ボタン＃2の配置
- 位置位置：右上
- 垂直オフセット：34％
- 水平オフセット：-10％
- 変換スケール：80％
ボタン＃3の配置
- 位置位置：右下
- 垂直オフセット：-3％
- 水平オフセット：5％
- 変換スケール：138％
行設定
- 側溝幅：4
- 幅：80％（デスクトップ）
ボタンレイアウト＃3結果
最終結果を確認してください。
ボタンレイアウトの作成＃4：プルタブボタン
この最後のボタンレイアウトでは、宣伝文の右上にいくつかのプルタブを作成します。
デザインをジャンプスタートするには、ボタンレイアウト＃2の行を複製します。
列の設定
次に、列＃1の背景設定を次のように更新します。
- 背景色（デスクトップ）：なし（デフォルト）
- 背景色（電話）：＃2e3858
[詳細設定]タブで、可視性オプションを更新して、オーバーフローが電話のディスプレイに表示されないようにします。
- 水平オーバーフロー（電話）：非表示
- 垂直オーバーフロー（電話）：非表示
プルタブボタン＃1の位置
これで、現在列にある3つのボタンをプルタブボタンとして使用できます。 トップボタンの設定を開き、以下を更新します。
- 垂直オフセット：0px
- 水平オフセット：0px
タブのボタンを使用するので、宣伝文句モジュールの後ろから突き出たときに中央に表示されるように、右側のアイコン用のスペースを確保する必要があります。 先に進み、ボタンのパディングを次のように更新します。
- パディング：左2em、右3em
次に、次のカスタムCSSをAfter要素に追加します。
padding-left: 10px;
次に、電話の水平オフセットを次のように更新します。
- 水平オフセット（電話）：-134px
これにより、ボタンの左側が電話ディスプレイの列の外側に非表示になり、ホバー/クリック時にボタン全体が表示されます。
プルタブボタン＃2の配置
2番目の引き出しボタンを配置するには、前のボタンを複製し、複製の背景色を更新します。
- 背景色：＃df4570
次に、次のように位置を更新します。
- 垂直オフセット：63px
次に、電話ディスプレイの次の位置オプションを更新します。
- 位置（電話）：相対
- 垂直オフセット（電話）：0％
プルタブボタン＃3の配置
最後に、3番目のプルタブボタンを配置するには、前のボタンモジュールを複製します。 次に、複製ボタンモジュールの設定を開き、以下を更新します。
- 背景色：＃3599e5
- 垂直オフセット：126px
3番目のボタンを配置したら、Cmd（またはCtrl）を押しながら各ボタンモジュールをクリックして、Diviの複数選択機能を使用します。
次に、ボタンモジュールの1つの設定を開き、ホバー時に次の変換変換を追加します。
- 変換変換X軸（ホバー）：68％
これにより、ホバー時に3つのボタンすべてが、右に68％移動することで、プルタブ機能で更新されます。
宣伝文のモジュールの配置
このボタンレイアウトでは、3つのボタンを部分的に非表示にする宣伝文モジュールが必要です。 したがって、宣伝文句に100％の幅を与えてから、右マージンを使用してボタンタブの必要な部分を公開します。 次に、宣伝文句に高いZインデックスを付けて、ボタンの上に配置されるようにするだけです。
宣伝文モジュールの設定を開き、以下を更新します。
- 幅：自動
- マージン：50px右
- 位置：相対
- Zインデックス：11
次に、背景色を更新します。
- 背景色：＃2e3858
行設定
宣伝文句とプルタブボタンが終了したら、行の設定を開き、幅を更新して、これらのタブに移動する余地を与えます。
- 幅：80％
列2を削除してから、列1を複製して、それぞれで同じデザインになるようにします。
次に、列1の設定を開き、次のZインデックスを付けます。
- Zインデックス：12
これにより、1列目のボタンがホバー時に2列目のコンテンツの背後に隠れないようになります。
必要に応じて、各ボタンのアイコンをニーズに合わせて更新できます。
ボタンレイアウト＃4結果
プルタブボタンレイアウトの最終結果を確認してください。
最終結果
最終的な考え
ボタンを配置することは、Diviの無限のボタンレイアウトへの扉を絶対に開きます。 このチュートリアルが、Diviで絶対位置を最適に使用する方法を理解するのに役立つことを願っています。 変換オプションやZインデックスなどの他の便利な組み込み機能により、デザインは絶対に配置されたボタンになります。
コメントでお返事をお待ちしております。
乾杯！