Diviのポストコンテンツモジュールとセクションディバイダーを使用してヘッダーとボディをブレンドする方法
公開: 2019-12-13これまでに、Diviの組み込みセクションディバイダーに慣れてきました。 彼らは私たちが構築するウェブサイトにその余分なタッチを追加するのに役立ちます。 これらは2つの異なるセクション間のスムーズな移行としても機能しますが、Diviのテーマビルダーでは、その移行を作成する方法が少し異なります。 この投稿では、そこにたどり着くために必要な手順を説明します。 テンプレートJSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
セクションディバイダーページテンプレートを無料でダウンロード
無料のセクション仕切りページテンプレートを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
私たちのYoutubeチャンネルを購読する
1. Diviテーマビルダーに移動し、新しいテンプレートを追加します
Diviテーマビルダーに移動します
まず、Diviテーマビルダーに移動します。
ページの新しいテンプレートを追加する
そこで、プラスアイコンをクリックして新しいテンプレートを作成します。
ブレンド効果をすべてのページに適用する場合は、[すべてのページ]を選択します。 他のタイプのテンプレートでも同じ効果を機能させることができますが、各テンプレートに上部セクションの仕切りを個別に含める必要があります。 新しいテンプレートを作成したら、カスタムヘッダーの作成を開始します。
2.カスタムヘッダーを作成します
セクション設定
グラデーションの背景
テンプレートエディタ内に、セクションがあります。 そのセクションを開き、グラデーションの背景を追加します。
- 色1：＃d13232
- 色2：＃fc6a3c
間隔
セクションにカスタムの上部と下部のパディングも追加します。
- トップパディング：1vw（デスクトップ）、2vw（タブレットと電話）
- 下部のパディング：1vw（デスクトップ）、2vw（タブレットと電話）
Zインデックス
また、ヘッダーがすべてのコンテンツの上に表示されるようにするために、表示設定のzインデックスを増やします。
- Zインデックス：99999
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 幅：100％
- 最大幅：100％
間隔
上下のパディングもすべて取り外します。
- トップパディング：0px
- ボトムパディング：0px
主な要素
大事なことを言い忘れましたが、行のメイン要素に2行のCSSコードを追加することで、列のコンテンツを中央に配置し、小さい画面サイズで列を並べて表示できるようにします。
display: flex; align-items: center;
列1に画像モジュールを追加
ロゴをアップロード
すべてのセクションと行の設定が完了したら、列1の画像モジュールから始めてモジュールを追加します。背景が透明なロゴをアップロードします。
配置
次に、モジュールの[デザイン]タブに移動し、画像の配置を変更します。
- 画像の配置：中央
サイジング
さまざまな画面サイズでモジュールの幅も変更します。
- 幅：6vw（デスクトップ）、13vw（タブレット）、17vw（電話）
メニューモジュールを列2に追加
メニューを選択
2番目の列には、メニューモジュールが必要です。 お好みのメニューを選択してください。
背景色を削除する
モジュールの背景色を削除して続行します。
レイアウト
デザインタブに移動し、レイアウトを変更します。
- スタイル：左揃え
- ドロップダウンメニューの方向：下向き
メニューテキスト
次に、それに応じてメニューテキストのスタイルを設定します。
- メニューフォント：Oswald
- メニューフォントの太さ：軽い
- メニューのフォントスタイル：大文字
- メニューテキストの色：#ffffff（デスクトップ）、＃202332（タブレットと電話）
- メニューテキストサイズ：0.8vw（デスクトップ）、2vw（タブレット）、2.5vw（電話）
- メニューの文字間隔：0.1vw
ドロップダウンメニュー
ドロップダウンメニュー設定でもドロップダウンメニューの線の色を変更します。
- ドロップダウンメニューの線の色：#ffffff
アイコン
そして、白いハンバーガーメニューアイコンの色を使用して、モジュールの設定を完了します。
- ハンバーガーメニューアイコンの色：#ffffff
ボタンモジュールを列3に追加
コピーを追加
最後のコラムへ！ そこで必要なモジュールはボタンモジュールだけです。 選択したコピーをいくつか追加します。
配置
モジュールのデザインタブに移動し、ボタンの配置を変更します。
- ボタンの配置：中央
ボタンの設定
ボタン設定でボタンのスタイルを設定して続行します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：0.6vw（デスクトップ）、1vw（タブレット）、1.5vw（電話）
- ボタンのテキストの色：＃000000
- ボタンの背景色：#FFFFFF
- ボタンの境界線の幅：0px
- ボタンの境界線半径：100px
- ボタンの文字間隔：2px
- ボタンフォント：Sansを開く
- ボタンのフォントの太さ：太字
- ボタンのフォントスタイル：大文字
間隔
そして、さまざまな画面サイズにカスタムパディングを追加して、モジュールの設定を完了します。
- トップパディング：0.8vw（デスクトップ）、1.6vw（タブレット）、2.2vw（電話）
- ボトムパディング：0.8vw（デスクトップ）、1.6vw（タブレット）、2.2vw（電話）
- 左パディング：1.5vw（デスクトップ）、2.5vw（タブレット）、3.5vw（電話）
- 右パディング：1.5vw（デスクトップ）、2.5vw（タブレット）、3.5vw（電話）
3.カスタムボディを構築し、トップディバイダーを追加します
テンプレートのカスタムヘッダーが完成したら、先に進んでカスタムボディの作成を開始します。
セクション設定
トップディバイダー
繰り返しになりますが、ページのセクションに気付くでしょう。 そのセクションを開き、上部の仕切りを追加します。
- 仕切りスタイル：リストで検索
- 仕切りの色：＃fc6a3c
- 仕切りの高さ：6vw
- ディバイダー水平リピート：15x
- 仕切りフリップ：垂直
- 仕切りの配置：セクションの内容の上に
間隔
セクションの[デザイン]タブに移動し、デフォルトの上下のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
行設定を開き、次のようにサイズ設定を変更します。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 幅：100％
- 最大幅：100％
間隔
デフォルトの上下のパディングもすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
投稿コンテンツモジュールを列に追加
ここで、すべてのページコンテンツを表示するには、投稿コンテンツモジュールを行に追加する必要があります。 このモジュールは、Diviを使用してページ自体の内部に作成したレイアウトを表します。 この遷移を製品ページ（動的コンテンツが含まれるテンプレートなど）に追加する場合は、別のアプローチが行われます。 覚えておくべき唯一の重要なことは、テンプレートの本体の最初のセクションに上部の仕切りを追加する必要があるということです。 仕切りの色が、グローバルヘッダーの背景に使用されている色と同じであることを確認してください。
3.ビルダーの変更を保存して結果を表示する
テンプレートの本文が完成したら、変更を保存してWebサイトで結果を表示できます。
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Diviのセクションディバイダーと投稿コンテンツモジュールを使用して、テンプレートのヘッダーと本文をブレンドする方法を示しました。 分周器の遷移は、すべてのページにすぐに適用されます。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。