フッター ドロワーは、 サイトのWeb、ユーザーが簡単にアクセスできる追加のコンテンツを保存するためです。 フッター ドロワーは、ボタンをクリックするかホバーすることで開閉できる Web コンテンツ コンテナー (Divi セクションのようなもの) です。 これは、プレミアム コンテンツを少し隠しておくようなものです。
このチュートリアルでは、Divi でフローティング フッター ドロワーを設計します。 フッター ドロワーをグローバル フッター領域に追加します。 ウェブサイトのテンプレート 通常のフッター コンテンツでフッター ドロワーにサイト全体でアクセスできるようにします。
これから使用するプロセスを使用すると、Diviセクション（およびそのコンテンツ）を数分でフッタードロワーに変換できます。
フッター引き出しテンプレートをディビサイトに追加する方法
このモデルを追加すると、 ウェブサイトのテンプレート あなたのDiviサイトにデフォルトで（ある場合）。 テスト サイトに追加することをお勧めします。これにより、実際のサイトで問題が発生することはありません。
独自に固定フッター ドロワー テンプレートをインポートするには サイトのWeb、ダウンロード zip ファイルを解凍して、JSON ファイルにアクセスします。
次に、WordPressダッシュボードに移動し、Divi>テーマビルダーに移動します。
次に、ページの右上にある移植性アイコンをクリックします。
ポータビリティ ウィンドウで、解凍したばかりの JSON ファイルを選択し、[インポート前にバックアップをダウンロード] オプションを選択します。 ウェブサイトのテンプレート オーバーライドしたくないデフォルト。
次に、[インポート]ボタンをクリックします。
最後に、変更をテーマジェネレーターに保存し、ライブページを表示して、固定フッターバーを確認します。
さて、チュートリアルに移りましょう。
パート1：グローバルフッターの追加
Diviテーマジェネレーターでは、デフォルトのWebサイトテンプレートを更新して、デフォルトのフッターを新しいフッターに置き換えることができます。
グローバルフッターを作成するには、WordPressダッシュボードに移動し、Divi> ThemeBuilderに移動します。 次に、デフォルトのWebサイトテンプレート内の[グローバルフッターを追加]スペースをクリックします。
次に、ドロップダウンリストから[Build GlobalFooter]オプションを選択します。
定義済みレイアウトをグローバルフッターレイアウトに追加する
これにより、モデルレイアウトエディタが展開され、構築を開始する方法についてXNUMXつの選択肢がすぐに表示されます。 「事前定義されたレイアウトを選択」オプションを選択します。
[ライブラリからロード]ポップアップウィンドウで、文房具のランディングページのレイアウトを見つけます。 次に、[このレイアウトを使用する]をクリックします。
事前作成されたレイアウトから不要なコンテンツを削除する
レイアウトがエディターにロードされたら、設定メニューのレイヤーアイコンをクリックして、[レイヤー]ポップアップボックスを展開します。 次に、最後のXNUMXつを除くレイアウトのすべてのセクションを削除します。
XNUMXつのセクションを移動してラベルを付ける
セクションを削除すると、「Footer」というタイトルのセクションと「Howitworks」というタイトルのXNUMXつのセクションが作成されます。 「フッター」セクションをレイアウトの一番上に移動します。
下のセクションの文言を「FooterDrawer」に変更します。 これは、フッタードロワーのコンテンツとして使用するセクションになります。
パート2：固定フッタードロワーの作成
セクションのXNUMXつをフッターとして指定し、もうXNUMXつをフッタードロワーとして指定したので、固定フッタードロワーの作成を開始する準備が整いました。 フッタードロワーを切り替えるために使用するぼかしアイコンを作成することから始めましょう。
フッター引き出しボタンの作成
新しい行を追加
下部のフッターセクションで、列に新しい行を追加します。
新しい行に「DrawerButton」というラベルを付けます。これは、引き出しの開閉を切り替えるために使用されるボタンが含まれる行だからです。 次に、行をセクションの先頭に移動します。
行のパディング
モジュールを追加する前に、行設定を開き、次のようにパディングを更新します。
- パディング：0px high、0px low
セクションのパディング
次に、[フッタードロワー]セクションで設定を開き、次のようにパディングを更新します。
フッタードロワーを切り替えるクリック可能なボタンを作成するために、アイコン付きのブラーモジュールを使用します。 そして、Blurbポッドコンテナの正方形の形状と円形のアイコンを組み合わせることで、独特の水滴の形状を実現します。
方法は次のとおりです。
Blurbモジュールを追加する
セクションの上部にある「ドロワーボタン」の行にプレゼンテーションテキストモジュールを追加します。
ぼかしコンテンツ/アイコン
次に、デフォルトのタイトルと本文のコンテンツを削除し、左上隅を指す矢印アイコンを選択します（スクリーンショットを参照）。 後で回転させるため、部分的に回転したアイコンを使用しています。
ブラーブデザイン
次に、プレゼンテーションテキストを次のように入力します。
- 背景色：＃081540
次に、次のように設計パラメーターを更新します。
- アイコンの色：#eeeeee
- サークルアイコン：はい
- 円の色：＃081540
- アイコンのフォントサイズを使用する：はい
- アイコンのフォントサイズ：17ピクセル
プレゼンテーションテキストサイズ
次のようにモジュールに高さと幅を与えます：
- 幅：30px
- 高さ：30px
これにより、円のアイコンがテキストコンテナにオーバーフローして、水滴の形が作成されます。
ぼかしの位置
次に、プレゼンテーションテキストにセクションの上部中央の絶対位置を指定します。
- ポジション：絶対
- 場所：トップセンター
ぼかし変換設定
これで、変換オプションを使用して、ぼかし/アイコンを上に回転させ、セクションコンテナのすぐ上に配置できます。 これで、ブラウザウィンドウの下のセクションを非表示にすると、アイコンは表示/クリック可能なままになります。
次の項目を更新します。
- 変換変換X軸：-50％
- Y軸変換の変換：-250％
- Z軸の回転を変換：-45度
次に、デフォルトのアイコンアニメーションを削除します。
- 画像/アイコンアニメーション：アニメーションなし
JQueryを使用してドロワーを切り替えるので、テキスト/アイコンを、コードの後半で使用するCSSクラスのクリック可能な要素としてターゲットにする必要があります。 次のCSSクラスを追加します。
- CSSクラス：ターゲットドロワー
フッター引き出しセクション設定
次に、変換変換オプションを使用して「フッタードロワー」セクションを非表示にします。 セクション設定を開き、以下を更新します。
- 変換変換Y軸：100％
ここで変換を使用することの利点は、パーセンテージ値がアイテムの実際のサイズに基づいていることです。 したがって、Y軸の100％は、セクションの高さに直接比例します（任意の時点での高さに関係ありません）。 つまり、要素はそれ自体の高さとして正確な距離だけ下に移動します。
Footer Drawerを表示に戻すには、セクションに追加した変換変換を逆にする必要があります。 これを行うには、CSSクラスで要素をターゲットにし、アイコンをクリックして変換変換を無効にする必要があります（セクション全体を元の位置に戻します）。
CSSクラスをフッターの引き出しセクションに追加する
[詳細設定]タブで、次のCSSクラスを追加します。
- CSSクラス：has-transform
フッター引き出し部固定位置
最後のステップでは、フッタードロワーを固定して、（アイコン付きで）ブラウザーウィンドウの下部に浮かぶようにする必要があります。
「フッタードロワー」セクションの位置を次のように更新します。
- 位置：固定
- 場所：左下
- Zインデックス：13
モバイルコンテンツをオフにする
タブレットと電話の両方に適合するフッタードロワーのコンテンツの量が限られているため（画面の高さが制限されているため）、不要なアイテムを無効にするか、ディスプレイから非表示にする必要があります。 この例では、セクションレイアウトの中央の行を非表示にします。
「フッタードロワー」セクションの最後からXNUMX番目の行の設定を開きます。 [詳細設定]タブで、表示オプションを更新して、電話とタブレットの回線をオフにします。
カスタムコードを追加する
フッタードロワーにクリックアンドトグル機能を追加するには、カスタムCSSとJQueryをページに追加する必要があります。 これを行うには、ボタンに使用されるBlurbモジュールの下に新しいコードモジュールを作成します。
次に、次のコードをコード領域に貼り付けます。
.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;} .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation'); $('.has-transform').toggleClass('toggle-drawer-animation'); }); });})( jQuery );
変更を保存
エディターを終了する前に、レイアウトを保存することを忘れないでください。
また、テーマジェネレータに変更を保存します。
最終結果
これで、あなたのページのどのページにも移動できるようになりました サイトのWeb 最終結果を確認します。
最終的な考え
フローティングフッタードロワーが役立つことを願っています プロモート コンテンツを楽しくアクセスしやすい方法で提供します。 他の引き出しと同じように、思いついたものを何でも詰め込むことができます。
その他のリソース
以下は、Diviの内部機能でより多くのことを達成するのに役立つチュートリアルのリストです。
翻訳元： エレガントなテーマ
