Diviでスライディングプッシュサイドバーを作成する方法

サイドバーは素晴らしい場合がありますが、スペースの無駄になる場合もあります。 そのため、スライド式プッシュサイドバーを作成することは、ページのメインコンテンツからユーザーの注意をそらさないサイドバーを探している人にとって最適なオプションです。 さらに、この種のサイドバーは、ユーザーがいつでもサイドバーを表示または非表示にするオプションを提供します。

スライドプッシュ効果は、サイドバーをビューポートに合わせるために、ページのメインコンテンツを同時にプッシュ（またはスクイーズ）しながら、サイドバーがページの左側からスライドインするという点で独特です。 つまり、サイドバーをスライドさせてページをプッシュします。

サイドバーが構築されると、メニューやフォームを含むすべてのタイプのアプリケーションに対応する多用途のツールになります。

それを手に入れよう！

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。

レイアウトを無料でダウンロード

このチュートリアルのスライドプッシュサイドバーレイアウトに手を置くには、最初に下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

ページまたはテンプレートに追加するには、新しいセクションを追加し、ライブラリからセクションレイアウトを選択する必要があります。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
3. 「既成のレイアウトを選択」オプションを選択します。
   
4. イベントレイアウトパックを選択し、クリックしてイベントホームページレイアウトを使用します。
   

Diviでスライディングプッシュサイドバーを作成する方法

スライディングプッシュサイドバーを作成するには、新しい通常のセクションを使用する必要があります。 ボタンをクリックすると開く固定サイドバーになるようにセクションのサイズと位置を設定し、右側のメインコンテンツ領域を押して（そして押して）サイドバー用のスペースを作ります。

セクションの構築

まず、ページに新しい通常のセクションを追加しましょう。

次に、ページ上部のセクションを移動します。

セクション設定

セクション設定を開き、固定する位置を次のように更新します。

• 位置：固定
• Zインデックス：9999

[デザイン]タブで、サイズと間隔を次のように更新します。

• 幅：350px（デスクトップとタブレット）、100％（電話）
• 高さ：100％
• パディング：上100px、下0px

パディングは、ページ上部のヘッダー用のスペースを確保するためのものです。

次に、[詳細設定]タブで、セクションにCSSクラスを指定します。

• CSSクラス：et-push-sidebar

cssクラスを配置したら、セクションに背景色を付けます。

• 背景色：＃1a1e36

より目立つ分離を作成するには、[デザイン]タブに戻り、右の境界線を追加します。

• 右ボーダー幅：2px
• 右の境界線の色：#eeeeee

これで、サイドバーのメインコンテナとして機能するセクションが処理されます。 次に、サイドバーを開いてから閉じるように切り替えるために使用する2つのボタンの作成を開始します。

サイドバーの切り替えボタンの作成

サイドバーを切り替えるために使用される2つのボタンがあります。 最初のボタンは「X」アイコンで、モバイル版のサイドバーを開いた後に閉じます。 「X」は宣伝文句モジュールを使用して作成されます。 2つ目は、垂直テキストで回転し、サイドバー/セクションに完全に隣接して配置される宣伝文モジュールを使用して作成するメインのトグルボタンです。

それを手に入れましょう。

ボタンの行の作成

セクション/サイドバー内に新しい1列の行を作成します。

行設定を開き、以下を更新します。

• 側溝幅：1
• 幅：100％
• パディング：0px上、0px下

[詳細設定]タブで、位置オプションを次のように更新します。

• 位置：絶対
• Zインデックス：1

「X」閉じるアイコンの作成

「X」閉じるアイコンを作成するには、行に宣伝文モジュールを追加します。 クリックするのが少し難しいので、レイヤーモーダルを使用して新しいモジュールを追加する方が簡単な場合があります。

コンテンツ

次に、宣伝文の設定を開きます。 [コンテンツ]タブで、タイトルと本文のコンテンツを取り出し、宣伝文にXアイコンを追加します。

• アイコンを使用：はい
• アイコン：x（スクリーンショットを参照）

設計

[デザイン]タブで、以下を更新します。

• アイコンの色：#eeeeee
• 画像-アイコンの配置：左
• アイコンのフォントサイズを使用：はい
• アイコンフォントサイズ：40px
• 幅：50px

次に、次の変換変換プロパティを追加して、アイコンを少し下げます。

• 変換変換X：100px
• 変換変換Y：-10px

高度

[詳細設定]タブで、タブレットとデスクトップの宣伝文句を無効にして、電話のディスプレイにのみ表示されるようにします。

• オンを無効にする：タブレットとデスクトップ

次に、CSSクラスを宣伝文に追加し、固定位置を指定して、電話のディスプレイでサイドバーのコンテンツをスクロールしたときに表示されたままになるようにします。

• CSSクラス：et-slide-push-close
• 位置：固定
• 場所：右上

これで「X」の閉じるアイコンボタンが処理されます。

メインサイドバーの切り替えボタンの作成

メインサイドバーの切り替えボタンを作成するには、既存の「X」アイコンの宣伝文の下に宣伝文モジュールを追加します。

コンテンツ

タイトルを更新し、クリックして下矢印アイコンを使用します。

• タイトル：イベント情報
• アイコンを使用：はい
• アイコン：下矢印（スクリーンショットを参照）

次に、宣伝文に背景色を追加します。

• 背景色：#eeeeee

設計

[デザイン]タブで、以下を更新します。

• アイコンの色：＃1a1e36
• 画像/アイコンの配置：左
• アイコンのフォントサイズを使用：はい
• アイコンフォントサイズ：25px
• タイトルフォント：Overpass
• タイトルフォントの太さ：太字
• タイトルフォントスタイル：TT
• タイトルテキストの色：＃1a1e36
• タイトル文字の間隔：2px
• タイトルラインの高さ：1.2em
• パディング：上0.6em、左1em、右1em
• 丸みを帯びた角：下の2つの角に5px

セクションの外側に宣伝文を配置して回転するには、次のように変換オプションを使用します。

• 変換変換Y：100px
• 変換回転Z：-90度
• 変換の原点：右上

高度

[詳細設定]タブで、以下を更新します。

• CSSクラス：et-slide-push-toggle
• 位置：絶対
• 場所：右中央

コードモジュールを使用したカスタムコードの追加

2つのボタンが完成したら、サイドバーに必要なスライドプッシュ機能を提供するカスタムコードを追加する準備が整いました。

コードを追加するには、まず、同じ列にコードモジュールを追加します。

次に、次のコードをコードモジュールに貼り付けます。

<style>
  #page-container, #et-main-area, .et-push-sidebar, .et-slide-push-toggle .et-pb-icon {
    transition: all 300ms !important;
  }
/*
 * use if using blank template with no header or footer
 * 
  #page-container.et-push-sidebar-active {
    margin-left: 350px;
  }
*/  
  #page-container.et-push-sidebar-active #et-main-area {
    margin-left: 350px;
  }  
  .et-push-sidebar {  
    transform: translateX(-100%);
  }
  .et-fb .et-push-sidebar {  
    transform: translateX(0%);
  }
  .et-push-sidebar-active .et-push-sidebar {
    transform: translateX(0%);
  }
  .et-slide-push-toggle, .et-slide-push-close {
    cursor:pointer;
  }
  .et-push-sidebar-active .et-slide-push-toggle .et-pb-icon {
    transform: rotate(180deg);
  }
@media all and (max-width: 767px) {
  .et-push-sidebar-active .et-push-sidebar {
    overflow: scroll !important;
    overscroll-behavior: contain;
  }
  #page-container.et-push-sidebar-active #et-main-area, #page-container.et-push-sidebar-active {
    margin-left: 0px;
  }  
}  
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.et-slide-push-toggle').click(function(){
      $('#page-container').toggleClass('et-push-sidebar-active');
    });
    $('.et-slide-push-close').click(function(){
      $('#page-container').removeClass('et-push-sidebar-active');
    });    
  });
})( jQuery );   
</script>

サイドバーコンテンツ行の作成

最初に作成した行は、サイドバーを機能させるボタンとコード用でした。 この次の行はサイドバーのコンテンツ用です。

サイドバーコンテンツ行を作成するには、サイドバー/セクションの最初の行の下に新しい1列の行を追加します。

行設定

新しい行の設定を開き、以下を更新します。

• 幅：100％
• 高さ：100％
• パディング：上5％、下5％、左5％、右5％

[詳細設定]タブで、オーバーフローオプションを次のように更新します。

• 水平オーバーフロー：スクロール（デスクトップとタブレット）、自動（電話）
• 垂直オーバーフロー：スクロール（デスクトップとタブレット）、自動（電話）

サイドバーをコンテンツ/モジュールで埋める

サイドバーの準備ができたので、必要に応じてサイドバーの2番目の行にモジュールを追加するだけです。 この例では、イベントのホームページレイアウトからモジュールをコピーして、行の列に貼り付けています。

最終結果

ライブページで最終結果を確認してください。

スライドプッシュサイドバーをページテンプレートに追加する

デフォルトですべてのページでこのサイドバーを使用する場合は、Diviテーマビルダーを使用してサイドバー/セクションをページテンプレートに追加する必要があります。

セクションレイアウトをDiviライブラリに保存

これを行うには、まず、サイドバーの作成に使用されたセクションをDiviライブラリに保存します。 これを行うには、レイヤーモーダルのサイドバーにある3つのドットをクリックし、レイアウト名を追加して、ライブラリに保存します。

新しいページテンプレートを作成する

次に、テーマビルダーに移動して新しいテンプレートを作成し、そのテンプレートをすべてのページに割り当てます。

スライドサイドバーをページテンプレートに追加する

次に、クリックしてページテンプレートを編集します。

テンプレートレイアウトエディタ内に、新しい全幅セクションを追加します。

次に、全幅投稿コンテンツモジュールをセクションに挿入します。

次にをクリックします。 全幅セクションの上に新しいセクションを作成します。 次に、[ライブラリから追加]タブをクリックし、ライブラリからスライディングプッシュサイドバーセクションのレイアウトを選択します。

完了したら、ボディレイアウトエディタを使用して必要に応じてサイドバーを編集できます。

テーマビルダーの設定を保存する

テーマビルダーへの変更を必ず保存してください。

これで、すべてのページにサイドバーが表示されます。

最終的な考え

スライド式プッシュサイドバーは、ページのメインコンテンツから離れることなく（または気を散らすことなく）最前線にとどまるサイドバーという、両方の長所をお探しの方に最適なオプションです。 登録フォーム、メールオプトイン、メニューなど、さまざまな用途にご利用いただけます。

コメントでお返事をお待ちしております。

乾杯！