Divi:ブログモジュールを使用してブログページを作成する方法

Divi:ブログモジュールを使用してブログページを作成する方法

ブログモジュールを使用してブログページを作成しますか de ディビ?

通常、すべてのDiviレイアウトパックは エレガントなテーマ ブログのレイアウトを提供します。これは、ブログを非常にすばやく作成するのに役立ちます。 しかし、これらのブログページのXNUMXつを自分で作成する方法を見たいと思ったことはありませんか? 

この記事では、Diviのブログモジュールを使用してブログページを作成する方法を説明します。 それぞれの設定を段階的に見ていきます。

始めましょう!

調査

始める前に、まず、作成するものの概要を見てみましょう。

Diviブログモジュールを使用してブログページを作成する

新しいブログページを作成する

新しいページを作成する

まず、ページを作成します。 WordPressダッシュボードで、をクリックします ページ > アドオン.

ページにわかりやすいタイトルを付けます。

  • ページのタイトル:Diviのブログ

DiviBuilderに切り替えます

ページの中央にある紫色のボタンをクリックします。 Divi Builderを使用する .

ブログページタイトルのセクションを追加します

セクションをカスタマイズする

最初のセクションから始めます。 それらを開く セクションパラメータ .

スクロールして 背景 色を#f9f3fdに変更します。 管理者ラベルとしてブログを入力します。 セクション設定を閉じます。

  • 背景:#f9f3fd
  • 管理者ラベル:ブログ

ブログページのタイトルを作成する

次に、を追加します リーニュ タイトルのために。 緑色のアイコンを選択し、単一列の行を選択します。

次に、 テキストモジュール ラインで。

ブログタイトルテキストモジュールをカスタマイズする

それらを開く テキストモジュール設定 H1を選択します。 タイトルを追加する私たちのブログ。

  • フォント:タイトル1
  • テキスト:私たちのブログ

次に、[スタイル]タブ 配置を中央に設定します。 H1タイトルのテキストでは、フォントとしてCormorant Infantを選択し、太字にします。

  • テキストの配置:中央揃え
  • ヘッダーテキスト:H1
  • ヘッダーフォント:鵜幼児
  • ソフトライトヘッダー:太字のテキスト

Colorを#442854、Sizeを130px、LineHeightを0,8emに設定します。

  • カラー:#442854
  • デスクトップテキストサイズ:130px
  • 線の高さ:0,8em

最新の記事を作成し、行動を促すセクション

このセクションは、最新の記事とオプトインメールで構成されています。 

新しい行を追加 最初の行の下で、左2/3と右1/3の列デザインを選択します。

それらを開く ラインパラメータ 歯車のアイコンをクリックします。

を選択[スタイル]タブ、までスクロール スペーシング BottomInnerMarginに0pxを追加します。 設定を閉じます。

  • 下部内部マージン:0px

注目のブログ投稿モジュールを追加してカスタマイズします

次に、を追加します ブログモジュール 。 これには前回の記事が含まれます。 新しい行の左側の列にある灰色のプラスアイコンをクリックして、ブログモジュールを追加します。

中身

下 中身 、投稿数として1を入力します。

  • ポジション数:1

要素

スクロールして 要素 [作成者とページ付け]のチェックを外します。 残りはデフォルトのままにします。

  • 著者を表示:いいえ
  • ページネーションを表示:いいえ

配置

次に、 [スタイル]タブ レイアウトに[フルスクリーン]を選択し、注目の画像オーバーレイをオフにします。

  • モデル:フルスクリーン
  • 選択した画像オーバーレイ:無効

タイトルテキスト

スクロールして タイトルテキスト 。 H2を選択し、CormoranInfantを選択します。 [太字]を選択して、色を#442854に変更します。

  • 見出し2を挿入:HXNUMX
  • フォントタイトル:鵜幼児
  • ソフトライトタイトル:太字
  • タイトルテキストの色:#442854

フォントサイズを30ピクセルに設定します。 行の高さを1.1emに変更します。

  • サイズ:デスクトップ用に30ピクセル、タブレット用に20ピクセル、電話用に18ピクセル
  • タイトル行の高さ:1,1 em

本文

次に、下にスクロールして 本文 。 フォントにキャビンを選択し、色を#442854に変更し、行の高さを1,8emに変更します。

  • 警察隊:キャビン
  • 本文の色:#442854
  • ボディラインの高さ:1,8 em

テキストメタデータ

次に、下にスクロールして テキストメタデータ 。 パラメータを次のように設定します。

  • メタデータフォント:鵜の幼児
  • メタデータ薄暗いライト:通常
  • メタデータのコピースタイル:なし
  • メタデータテキストの色:#442854
  • メタデータのテキストサイズ:デスクトップ16ピクセル、タブレット15ピクセル、電話14ピクセル
  • メタデータ行の高さ:1,8 em

スペーシング

次に、下にスクロールして スペーシング 上マージンを0vwに変更します。

  • トップマージン:0vw

シャドーボックス

最後に、下にスクロールして シャドーボックス 無効にします。

  • シャドウボックス:無効にする

ブログの電子メールテキストモジュールを追加およびカスタマイズする

次に、右の列に移動して、 メールで召喚状を作成する 。 まず、右側の列にテキストモジュールを追加します。 灰色のプラスアイコンをクリックして、テキストを検索します。

中身

見出し2を選択し、「オファーを購読する」というテキストを入力します。

  • フォント:見出し2
  • テキスト:私たちのオファーを購読する

ヘッダーテキスト

以下のために テキスト タイトルの[CenterAlignment]を選択し、[H2]を選択し、[Cormorant Infant]を選択して、[Bold]に設定します。

  • テキストの配置:中央揃え
  • ヘッダーテキスト:H2
  • ヘッダーフォント:鵜幼児
  • ソフトライトヘッダー:太字

色を#442854に、サイズを32pxに、線の高さを0,95emに変更します。

  • ヘッダーテキストの色:#442854
  • ヘッダーテキストサイズ:32ピクセル
  • ヘッダー行の高さ:0,95 em
Diviブログモジュールを使用してブログページを作成する

スペーシング

最後に、下にスクロールして スペーシング 下の余白に10ピクセルを追加します。 テキストモジュールの設定を閉じます。

  • 下マージン:10px
Diviブログモジュールを使用してブログページを作成する

BlogEmailOptinモジュールを追加してカスタマイズする

それから私たちは行きます メールフォームを作成する 。 右側の列のテキストモジュールの下にEmailOptinモジュールを追加します。

中身

まず、タイトルと本文を削除します。

  • タイトル:なし
  • 本文:なし

スクロールして メールアカウント サービスプロバイダーを追加します。

次に、下にスクロールして 背景 背景色の選択を解除します。

  • 背景色を使用する:いいえ

フィールド

に入る [スタイル]タブ フィールドの背景色をrgba(255,255,255,0)に変更し、テキストの色を#442854に変更します。

  • 背景色フィールド:rgba(255,255,255,0)
  • テキストカラーフィールド:#442854

下にスクロールして フォントオプション フォントをキャビンに、サイズを16pxに、行の高さを1,8emに変更します。

  • フォントフィールド:キャビン
  • テキストサイズフィールド:16ピクセル
  • フィールド列の高さ:1,8 em

次に、フィールドの丸みを帯びた角を32pxに、境界線の幅を2pxに調整し、境界線の色を#442854に変更します。

  • 角丸長方形コントロール:32px
  • 境界線幅フィールド:2px
  • 境界線の色フィールド:#442854

ボタン

ボタンまでスクロールして、 カスタムボタンスタイルを使用する 。 サイズを18psに、ボタンの色を白に、ボタンの背景色を#442854に変更します。

  • ボタンにカスタムスタイルを使用する:はい
  • ボタンのテキストサイズ:18ピクセル
  • ボタンのテキストの色:#ffffff
  • 背景ボタン:#442854

境界線の半径を50ピクセルに、フォントをCormorant Infantに変更し、太字にします。

  • ボーダー半径ボタン:50px
  • フォントボタン:鵜の幼児
  • ソフトライトボタン:太字のテキスト

最後に、マージンをいくつか追加しましょう。 上マージンに20px、上と下のパディングに12px、左と右のパディングに32pxを入力します。 EmailOptin設定を閉じます。

  • 上マージンボタン:20ピクセル
  • 上下のパディングボタン:12ピクセル
  • ボタンの左右のパディング:32px

ブログ投稿リストに新しい行を追加します

今から アイテムのリストを作成する ページの。 まず、前のセクションの下に新しい単一列の行を追加します。

ライン設定

に移動 [スタイル]タブ 頂点の内側の余白に0pxを追加します。 ライン設定を閉じます。

  • 内側マージン頂点:0px

ブログモジュールをラインに追加します

追加する ブログモジュール 灰色のプラスアイコンをクリックして[ブログ]をクリックして、新しい行に移動します。

ブログ投稿フィードのスタイリング

ブログページのフィードを変更しましょう。

ブログフィードコンテンツ

それらを開く ブログモジュールの設定 投稿数として3を入力します。 これにより、画面に表示する投稿の数を選択できます。

3などの小さい数値を使用すると、最近の投稿に集中してページサイズを小さくすることができます。 これは、頻繁に投稿しない場合や、ページをすっきりさせたい場合に適しています。 ブログの流れに焦点を当てたい場合は、6〜9などの投稿をさらに表示することをお勧めします。

  • 投稿数:3

オフセットに1を入力します。 これにより、DiviはXNUMX番目のブログ投稿から開始するように指示されます。これにより、その上に表示されているブログ投稿に既に表示されているのと同じ記事を表示できなくなります。

  • ポストオフセット番号:1

要素

スクロールして 要素 。 注目の画像、日付、カテゴリスニペット、ページ付けを有効にします。 残りを無効にします。

  • 注目の画像を表示:はい
  • データ:はい
  • カテゴリ:はい
  • 抜粋:はい
  • ページネーション:はい

バックグラウンド

アクセス先 背景 グリッドタイルの背景色をrgba(255,255,255,0)に設定します

  • グリッドグリッドタイルの背景色:rgba(255,255,255,0)

レイアウトとオーバーレイ

次に、 [スタイル]タブ 。 レイアウトをグリッドに設定したままにします。 この上に掲載されているブログ投稿には、全幅レイアウトを選択しました。 このブログフィードには、デフォルトのオプションであるグリッドレイアウトを使用します。 注目の画像オーバーレイを無効にします。

  • レイアウト:グリッド
  • 選択した画像オーバーレイ:無効

タイトルテキスト

以下のために タイトルテキスト 、H2を選択します。 Cormorant Infantを選択し、Boldに設定して、色に#442854と入力します。

  • 見出し2を挿入:HXNUMX
  • フォントタイトル:鵜幼児
  • ソフトライトタイトル:太字
  • タイトルテキストの色:#442854

テキストサイズとして20pxを選択します。 線の高さを1,1emに設定します。

  • タイトルテキストサイズ:デスクトップ20px
  • タイトル行の高さ:1,1 em

本文

スクロールして 本文 キャビンを選択します。 色を#442854に設定します。

  • 警察隊:キャビン
  • 本文の色:#442854

線の高さを1,8emに設定します。

  • 線の高さ:1,8 em

テキストメタデータ

スクロールして テキストメタデータ そして鵜の幼児を選択します。 ウェイトを通常に、スタイルをなしに、色を#442854に設定します。

  • メタデータフォント:鵜の幼児
  • メタデータ薄暗いライト:通常
  • メタデータのコピースタイル:なし
  • メタデータテキストの色:#442854
  • メタデータテキストサイズ:デスクトップ16ピクセル、タブレット15ピクセル、電話14ピクセル
  • メタデータ行の高さ:1,8 em

ページネーションテキスト

それでは、 ページネーション 。 フォントには、Cormorant Infantを選択し、Boldを選択して、色を#442854に変更します。

  • フォントショーのページネーション:鵜の幼児
  • ページングソフトライトを表示:太字
  • テキストの色表示ページ番号:#442854

スペーシング

次に、 間隔 上部に0vwマージンを追加します。 これにより、モジュールが前のモジュールと重複するのを防ぎます。

  • トップマージン:0vw

国境

スクロールして 国境 四隅すべてに0pxと入力します。 これにより、マップの正方形の形状が得られます。

  • 角丸長方形グリッドレイアウト:0px

シャドーボックス

最後に、下にスクロールして ボックスシャドウ 無効にします。 ブログ設定を閉じます。 ブログセクションが終了しました。

  • シャドウボックス:なし

ブログページに新しい「召喚状」セクションを追加します

それから私たちは行きます 「召喚状」セクションを作成する ページの。 このセクションには、視差フルスクリーンの背景画像、連絡先情報、およびソーシャルフォローリンクが含まれています。

新しいセクションを追加する

青いアイコンをクリックして 新しい通常のセクションを追加します ページの下部にあります。

  • セクション:通常

[行動を促すフレーズ]セクションのスタイルを設定する

それらを開く セクションパラメータ 歯車のアイコンをクリックします。

バックグラウンド

スクロールして 背景 [画像]タブを選択します。 背景画像というラベルの付いた灰色のアイコンをクリックします。

メディアライブラリからフルスクリーン画像を選択します。 [視差効果を使用]を選択し、視差メソッドとして[CSS]を選択します。

  • 背景画像
  • 視差効果を使用する:はい
  • 視差法:CSS

[管理ラベル]まで下にスクロールして、フィールドに「フッター」と入力します。 これは、セクションを追跡するのに役立ちます。

  • 管理者タグ:フッター

次に、 [スタイル]タブ.

  • 内部マージン:10vw(上と下)

新しい行を追加

緑のプラスアイコンをクリックして 単一の列に行を追加します 私たちのコンテンツのために。

サイズ剤

それらを開く ラインパラメータ [スタイル]タブに移動します。

  • 最大幅:320ピクセル

タイトルテキストモジュール

召喚状のセクションにはタイトルが表示されます。 これを作成するには、 テキストモジュールを追加する ラインで。

タイトルテキストをカスタマイズする

タイトルを追加し、フォントを見出し3に変更します。

  • フォント:見出し3
  • テキスト:Diviについて

ヘッダーテキスト

に移動 [スタイル]タブ までスクロールします 字幕テキスト 。 位置合わせの中心を選択し、H3を選択し、鵜の幼児を選択し、太字に設定して、色を白にします。

  • テキストの配置:中央
  • ヘッダーテキスト:H3
  • ヘッダーフォント:鵜幼児
  • ソフトライトヘッダー:太字
  • ヘッダーテキストの色:#ffffff
  • ヘッダーテキストサイズ:デスクトップの場合は42ピクセル、タブレットの場合は20ピクセル、電話の場合は16ピクセル
  • ヘッダー行の高さ:1,1 em

スペーシング

最後に、下にスクロールして スペーシング 下の余白に10ピクセルを追加します。 モジュール設定を閉じます。

  • 下マージン:10px

アドレスのテキストモジュール

別のテキストモジュールを追加する あなたの住所のために。

物理アドレステキストモジュールのスタイルを設定する

住所テキスト

住所を段落テキストとして追加します。

  • スタイル:段落
  • テキスト:あなたの住所

段落テキスト

次に、のテキストに移動します [スタイル]タブ セミボールドのCormorantInfantを選択し、白に設定します。

  • フォント:鵜の幼児
  • ソフトライトテキスト:セミボールド
  • テキストの色テキスト:#ffffff
  • テキストテキストサイズ:デスクトップの場合は28ピクセル、タブレットの場合は20ピクセル、電話の場合は16ピクセル
  • テキスト行の高さ:1,2 em

モジュールを追加してソーシャルネットワークでフォローしてください

最後のモジュールはモジュールです ソーシャルネットワークでフォローしてください 。 行の一番下に追加します。

スタイライズソーシャルメディアモジュールでフォローしてください

まずは [スタイル]タブ この時。 [モジュールの配置の中心]を選択し、アイコンの色を#442854に変更します。

  • モジュールの配置:中央
  • アイコンの色:#442854

スクロールして ボード角を丸くするために23ピクセルを追加します。

  • 角丸長方形:32px

ソーシャルネットワークを追加してカスタマイズする

今、に戻ります [コンテンツ]タブ 含めたいソーシャルネットワークを追加します。 灰色のプラスアイコンをクリックします。

Diviブログモジュールを使用してブログページを作成する

それらを開く 各ソーシャルネットワークの設定 、ネットワークを選択し、アカウントにリンクを追加します。 背景色を#f9f3fdに設定します。 サブモジュール設定を閉じます。

  • ソーシャルネットワーク:あなたの選択
  • アカウントリンクURL:あなたのリンク
  • 背景色:#f9f3fd
Diviブログモジュールを使用してブログページを作成する

ブログページを保存して、ビジュアルビルダーを終了します

最後に、 ページを保存する 右下隅にあるを選択します VisualBuilderを終了します ページの上部にあります。 あなたはあなたの仕事を見る準備ができています。

ブログページのプレビュー

これが私たちの結果です。

Diviブログモジュールを使用してブログページを作成する

今すぐDIVIをダウンロード!!!

結論

そう ! これは、Diviを使用してブログページを作成する方法を示しています。 

Divi Builderを使用すると、興味深いレイアウトを簡単に作成できます。各モジュールを使用するには、複数の方法があります。 このチュートリアルで説明したように、同じページで複数のバージョンのブログモジュールを使用して、さまざまな方法でブログフィードを表示することができます。

懸念や提案がある場合は、 コメントセクション それを議論する。

ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi:史上最高のWordPressテーマ.

しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.

...

Divi:スライド式でレスポンシブなサイドメニューを作成する方法

Divi:スライド式でレスポンシブなサイドメニューを作成する方法

Diviでスライド式でレスポンシブなサイドメニューを作成したいですか?

Webサイトを作成するとき、どのようなヘッダーを作成するのか疑問に思うことがよくあります。 Webで最もよく使用されるのは、上部の水平メニューバーですが、スライドメニューなどの他のオプションもあります。 

スライドメニューは、ほとんどの場合、グローバルヘッダーが占めるスペースを制限するのに役立ちます。 そのため、訪問者が右上隅にあるハンバーガーアイコンをクリックしたときに、スライドメニューを表示させることができます。 

したがって、スライドアウトメニューを使用すると、Webサイトに追加のインタラクションを追加するのに役立ちます。

したがって、このチュートリアルでは、Diviのテーマビルダーを使用して作成する方法を示します。

始めましょう!

調査

このチュートリアルに飛び込む前に、まず、得られる結果を見てみましょう。

テーマビルダーに移動し、グローバルヘッダーを作成します

テーマビルダーに移動します

開始するには、WordPressダッシュボードにあるDiviメニューからテーマビルダーに移動し、[グローバルヘッダーの追加]をクリックします。

グローバルヘッダーを作成する

[グローバルヘッダーの作成]を選択して続行します。

ヘッダースタイルを作成する

セクション設定

背景色

テンプレートエディタに入ると、セクションが表示されます。 このセクションを開き、背景色を透明にします。

  • 背景:rgba(255,255,255,0)

スペーシング

[スタイル]タブに切り替えて、下と上の余白をすべて削除します。

  • 内側マージン頂点:0px
  • 下部内部マージン:0px

投稿する

次に、[詳細設定]タブに移動し、位置設定を変更して、セクションの位置を変更します。

  • 位置:固定
  • 場所:トップセンター

最初の行を追加します

カラムの構造

セクションの設定が完了したら、次の列構造を使用して新しい行を追加します。

サイズ剤

モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。

  • 最大幅:97%
  • 最大幅:100%

スペーシング

間隔の設定を変更します。

  • ピーク内部マージン:1%
  • 下部内部マージン:0px

主な要素

次に、[詳細設定]タブに移動し、メインの行要素にXNUMX行のCSSコードを追加します。 これは、行の列の内容を垂直方向に揃えるのに役立ちます。

display: flex;

align-items: center;

列1に画像モジュールを追加します

ロゴをダウンロードする

1列目の画像モジュールから始めて、モジュールを追加します。ロゴをアップロードします。

Diviでスライド式でレスポンシブなサイドメニューを作成する

列3にテキストモジュールを追加します

コンテンツ領域に3つのスペースを追加します

<spanclass="line line-1"></span>

<spanclass="line line-2"></span>

<spanclass="line line-3"></span>

背景色

モジュールの背景色を変更します。

  • 背景:rgba(0,0,0,0.04)

テキスト設定

次に、[スタイル]タブに切り替えて、テキスト行の高さを削除します。 これにより、追加したスコープを完全に制御できるようになります。

  • テキスト行の高さ:0em

サイズ剤

モジュールのサイズ設定パラメータを変更します。

  • 最大幅:120ピクセル
  • テキストの配置:右

スペーシング

そして、モジュールを正方形に変換して、モジュールパラメータを完成させます。 このために、間隔設定でカスタムパディング値を使用します。

  • 内側マージン頂点:40px
  • 下部内部マージン:60px
  • 左内側マージン:40px
  • 右内側マージン:40px

XNUMX行目を追加

カラムの構造

次の行! この行を使用して、スライドメニュー全体をデザインします。 次の列構造を使用します。

背景色

モジュールを追加せずに、行設定を開き、次のように背景色を変更します。

  • 背景:#e7e0e2

背景画像

また、パターン化された背景画像を使用します。 お好みの背景パターンを使用できます。

  • 背景画像サイズ:実寸
  • 背景画像の位置:中央
  • 背景画像を繰り返す:繰り返し

サイズ剤

次に、[スタイル]タブに切り替えて、それに応じてサイズ設定を変更します。

  • カスタムガター幅を使用:はい
  • 列間隔:1
  • 最大幅:20%(デスクトップ)、40%(タブレット)、60%(電話)
  • 高さ:100vh

スペーシング

また、さまざまな画面サイズの間隔設定を変更します。

  • サミットの内部マージン:10 vw(デスクトップ)、30 vw(タブレット)、40 vw(電話)

国境

そして、左の境界線を追加して、ラインパラメータを完成させます。

  • 左ボーダー幅:10px
  • 左ボーダーの色:#24394a
  • 左ボーダースタイル:ダブル

列にテキストモジュールを追加します

コンテンツを追加する

最初のテキストモジュールメニュー項目を追加する時が来ました! コピーをコンテンツ領域に追加します。

リンクを追加

メニュー項目に関連するリンクを追加して続行します。

  • モジュールリンクURL:#

背景色

次に、背景色を変更します。

  • 背景:rgba(216,210,212,0.35)

テキスト設定

次に、[スタイル] 3タブに切り替えて、テキスト設定を次のように変更します。

  • テキストフォント:Domine
  • ソフトライトテキスト:太字テキスト
  • テキストカラーテキスト:#000000
  • テキストテキストサイズ:1vw(デスクトップ)、2vw(タブレット)、3vw(電話)
  • テキストの配置:中央揃え

スペーシング

さまざまな画面サイズにカスタム間隔値を追加して、モジュール設定を完了します。

  • 下マージン:1vw(デスクトップ)、2vw(タブレット)、3vw(電話)
  • ピーク内部マージン:1vw
  • 下部内部マージン:1vw

テキストモジュールのクローン(メニュー項目ごとに1つのモジュール)

最初のメニュー項目テキストモジュールを完了すると、必要な回数だけクローンを作成できます。 モジュールがウィンドウの高さを超えないようにしてください。

重複するテキストモジュールのコンテンツとリンクを編集する

各重複テキストモジュールのコンテンツとリンクを編集します。

ボタンモジュールを列に追加

コピーを追加

この行で必要な最後のモジュールはButtonモジュールです。 選択したコピーを追加します。

リンクを追加

また、リンクを追加します。

  • ボタンリンクURL:#

Alignement

[スタイル]タブに切り替えて、ボタンの配置を変更します。

  • ボタンの配置:中央に配置

ボタンの設定

ボタンモジュールを次のようにカスタマイズして続行します。

  • ボタンにカスタムスタイルを使用する:はい
  • ボタンのテキストサイズ:0,7 vw(デスクトップ)、1,5 vw(タブレット)、2,5 vw(電話)
  • ボタンのテキストの色:#000000
  • 背景ボタン:rgba(0,0,0,0)
  • ボタンの境界線の色:#24394a
  • ボーダー半径ボタン:0ピクセル
  • ボタンの文字間隔:4px
  • フォントボタン:開くなし
  • ソフトライトボタン:太字のテキスト
  • コピースタイルボタン:TT

スペーシング

そして、さまざまな画面サイズにカスタム間隔値を追加して、モジュール設定を完了します。

  • トップマージン:5vw
  • ピーク内部マージン:1vw(デスクトップ)、2vw(タブレット)、3vw(電話)
  • 内側マージン下部:1vw(デスクトップ)、2vw(タブレット)、3vw(電話)
  • 左内部マージン:1,8 vw(デスクトップ)、3 vw(タブレット)、4 vw(電話)
  • 右内側マージン:1,8 vw(デスクトップ)、3 vw(タブレット)、4 vw(電話)
Diviでスライド式でレスポンシブなサイドメニューを作成する

スライド機能を追加

メニューアイコンテキストモジュールにCSSIDを追加します

すべての要素が揃ったので、レスポンシブなスライディングメニュー効果を作成します。 まず、最初の行のXNUMX番目の列にあるテキストモジュール(スコープを含む)を開き、[詳細設定]タブでカスタムCSSIDを使用します。 このCSSIDを使用して、コードにクリック関数を作成します。

  • CSS ID:スライドインオープン

行#2にCSSクラスを追加します

次に、XNUMX行目を開き、[詳細設定]タブに移動して、カスタムCSSクラスを追加します。 クリックすると、線がスライドします。

  • CSSクラス:slide-in-menu-container
Diviでスライド式でレスポンシブなサイドメニューを作成する

ライン#2の位置を変更します

この行も再配置します。 サイズ設定のさまざまな画面サイズで、水平オフセットが線幅とどのように一致するかに注目してください。

  • 位置:絶対
  • 場所:右上
  • 水平オフセット:-20%(デスクトップ)、-40%(タブレット)、-60%(電話)
Diviでスライド式でレスポンシブなサイドメニューを作成する

2行目の不透明度を変更します

そして、デフォルト状態で不透明度を0にします。

opacity: 0;

コードモジュールを最初の行のXNUMX番目の列に追加します

CSSコードを挿入します

クリック機能効果を作成し、ハンバーガーアイコンの譜表のスタイルを設定するには、CSSコードが必要です。 最初の行のXNUMX番目の列にコードモジュールを追加し、 次のCSSコード行をスタイルタグの間に配置します。 以下の印刷画面でわかるように:

#slide-in-open{

cursor: pointer;

}

.line{

display: block;

position: absolute;

height: 4px;

width: 100%;

background: #24394A;

border-radius: 9px;

opacity: 1;

-webkit-transition: .1s ease-in-out;

-moz-transition: .1s ease-in-out;

-o-transition: .1s ease-in-out;

transition: .1s ease-in-out;

}

.line-2{

top: 10px;

}

.line-3{

top: 20px;

}

#slide-in-open.open .line-1{

top: 10px;

-webkit-transform: rotate(135deg);

-moz-transform: rotate(135deg);

-o-transform: rotate(135deg);

transform: rotate(135deg);

}

#slide-in-open.open .line-2{

display: none;

}

#slide-in-open.open .line-3{

top: 10px;

-webkit-transform: rotate(-135deg);

-moz-transform: rotate(-135deg);

-o-transform: rotate(-135deg);

transform: rotate(-135deg);

}

.slide-in-menu {

right: 0!important;

opacity: 1!important;

}

.slide-in-menu-container {

-webkit-transition: all0.5s ease !important;

-moz-transition: all0.5s ease !important;

-o-transition: all0.5s ease !important;

-ms-transition: all0.5s ease !important;

transition: all0.5s ease !important;

}

JQueryコードを挿入します

また、クリック機能用にJQueryを追加する必要があります。 あなたを確認してください スクリプトタグの間にコードを配置する 、以下の印刷画面でわかるように:

jQuery(function($){$('#slide-in-open')。click(function(){$(this).toggleClass('open'); $('。slide-in-menu-container') .toggleClass('slide-in-menu');});});

テーマビルダーの変更を保存し、結果をWebサイトに表示します

グローバルヘッダーのすべての要素を完了したら、すべての変更を保存して結果をサイトに表示するだけです。

調査

すべての手順を完了したので、最後に結果を見てみましょう。

結論

結論として、この記事では、レスポンシブスライディングメニューを作成するためにDiviのテーマビルダーを使用する方法を示しました。 このために、Diviの最高の組み込み要素とオプションをカスタムクリック関数コードと組み合わせました。 したがって、スライドアウトメニューの設計に集中し、コードでグローバルヘッダーの機能部分を処理することができます。 

ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

Divi:グローバルヘッダーに連絡フォームを追加する方法

Divi:グローバルヘッダーに連絡フォームを追加する方法

グローバルヘッダーに連絡フォームを追加する必要がありますか?

Diviのテーマビルダーを使用してWebサイトのカスタムヘッダーを作成すると、CTA(Call to Action)を追加するための完璧な方法を探していることに気付くでしょう。 これを行うXNUMXつの方法は、ドロップダウン連絡フォームを追加することです。 

これにより、ヘッダーの全体的な外観をきれいに保ちながら、スクロールせずに連絡を取ることができます。 

このチュートリアルでは、DiviといくつかのJQueryおよびCSSコードを使用してドロップダウン連絡フォームを作成する方法を示します。

始めましょう!

調査

このチュートリアルに入る前に、取得する結果のプレビューを見てみましょう。

diviのグローバルヘッダーに連絡フォームを追加する

グローバルヘッダーを作成する

テーマビルダーに移動します

WordPressダッシュボードにあるDiviメニューからテーマビルダーに移動し、[グローバルヘッダーを追加]をクリックします。

[グローバルヘッダーの作成]を選択します。

ヘッダースタイルを作成する

セクション設定

背景色

テンプレートエディタに入ると、セクションが表示されます。 このセクションを開き、背景色を変更します。

  • 背景:#FFFFFF

スペーシング

次に、デフォルトの上部と下部の内側の余白をセクションから削除します。

  • 内側マージン頂点:0px
  • 下部内部マージン:0px

シャドーボックス

また、微妙なボックスシャドウを適用します。

  • ボックスシャドウブルー強度:50px
  • 字幕フォントの色:rgba(0,0,0,0.15)

新しい行を追加します

カラムの構造

次の列構造を使用して、セクションに新しい行を追加します。

サイズ剤

モジュールを追加せずに、行設定を開き、次のようにサイズ設定を変更します。

  • カスタムガター幅を使用:はい
  • 列間隔:1
  • カラムの高さを調和させる:はい
  • 最大幅:95%
  • 最大幅:100%

スペーシング

次に、カスタムの上下のパディングを追加します。

  • ピーク内部マージン:1vw
  • 下部内部マージン:1vw

主な要素

メインの行要素にCSSコードをXNUMX行追加して、すべての列のコンテンツを揃えます。

align-items: center;

列2のZ添え字

また、レスポンシブデザインのために、XNUMX番目の列のz-index値が高くなっていることを確認します。

  • Zインデックス:12

画像モジュールを列1に追加します

ロゴをダウンロードする

モジュールの追加を開始する時が来ました! 列1の画像モジュールから始めます。ロゴをアップロードします。

Alignement

次に、モジュールの配置を変更します。

  • 画像の配置:中央揃え

サイズ剤

幅も変更します。

  • 最大幅:3vw(デスクトップ)、5vw(タブレット)、7vw(電話)

メニューモジュールを列2に追加します

メニューを選択

XNUMX番目の列では、メニューモジュールを追加します。

配置

[モジュールスタイル]タブに切り替えて、レイアウトスタイルを変更します。

  • スタイル:中央揃え

メニューテキストの設定

次に、モジュールメニューのテキスト設定を変更します。

  • フォントメニュー:開くなし
  • 薄暗いメニュー:セミボールド
  • メニューテキストの色:#000000
  • メニューテキストサイズ:0,8 vw(デスクトップ)、2 vw(タブレット)、3 vw(電話)
  • メニューの文字間隔:1px

ドロップダウンメニューのテキスト設定

次に、ドロップダウンメニューから線の色を変更します。

  • ドロップダウンメニューの線の色:#007dff

アイコン

ハンバーガーメニューのアイコンの色を変更します。

  • ハンバーガーメニューアイコンの色:#007dff
diviのグローバルヘッダーに連絡フォームを追加する

テキストモジュールを列3に追加します

メッセージを追加

XNUMX番目のモジュールに移りましょう! 選択したメッセージを含むテキストモジュールを追加します。

背景色

背景色を追加します。

  • 背景色:#007dff
グローバルヘッダーに連絡フォームを追加する

テキスト設定

モジュールデザインタブに切り替え、それに応じてテキスト設定を変更します。

  • テキストフォント:Open Sans
  • ソフトライトテキスト:太字
  • テキストの色テキスト:#ffffff
  • テキストテキストサイズ:0,8 vw(デスクトップ)、2 vw(タブレット)、3 vw(電話)
  • テキストの配置:中央揃え
グローバルヘッダーに連絡フォームを追加する

サイズ剤

次に、モジュールのサイズ設定パラメーターを変更します。

  • 最大幅:33%
  • モジュールの配置:中央
グローバルヘッダーに連絡フォームを追加する

スペーシング

次に、カスタムの上部と下部のパディングを追加します。

  • 上部内部マージン:0,8 vw(デスクトップ)、2 vw(タブレットと電話)
  • 内部マージン低:0,8 vw(デスクトップ)、2 vw(タブレットと電話)
グローバルヘッダーに連絡フォームを追加する

国境

そして、境界線の半径を追加してモジュールのパラメーターを完成させます。

  • 角丸長方形:100px

列3に別のテキストモジュールを追加します

コンテンツ領域にシンボルを追加します

次のモジュール、つまり別のテキストモジュールに移りましょう。 コンテンツ領域に次の矢印記号を追加します:'▼'。

グローバルヘッダーに連絡フォームを追加する

テキスト設定

モジュールデザインタブに切り替え、それに応じてテキスト設定を変更します。

  • テキストフォント:Open Sans
  • テキストの色:#007fff
  • テキストテキストサイズ:3vw
  • テキスト行の高さ:0em
  • テキストの配置:中央揃え
グローバルヘッダーに連絡フォームを追加する

Zインデックス

モジュールのz-indexも増やしましょう。

  • Zインデックス:11

お問い合わせフォームモジュールを列3に追加します

選択した全幅フィールドを追加します

XNUMX番目の列に必要な次の最後のモジュールは、お問い合わせフォームモジュールです。 必要な全幅フィールドを追加します。

タイトルを追加する

タイトルも使用してください。

背景色

次に、背景色を変更しましょう。

  • 背景色:#e7f2ff

フィールド設定

モジュールの[スタイル]タブに移動して、フィールド設定を変更してみましょう。

  • 背景色フィールド:#ffffff
  • フィールドテキストの色:#dddddd
  • フォーカステキストの色:#007dff
  • 頂点パディングフィールド:1vw(デスクトップ)、2vw(タブレット)、3vw(電話)
  • 下部のパディングフィールド:1vw(デスクトップ)、2vw(タブレット)、3vw(電話)
  • フォントフィールド:開くなし
  • フィールドテキストサイズ:0,7 vw(デスクトップ)、1,8 vw(タブレット)、3 vw(電話)

タイトルテキストの設定

タイトルテキストの設定を編集します。

  • 見出し3を挿入:HXNUMX
  • ソフトライトタイトル:太字
  • テキストの配置:中央揃え
  • タイトルテキストの色:#007dff
  • タイトルテキストサイズ:1 vw(デスクトップ)、2,5 vw(タブレット)、3,5 vw(電話)
  • タイトル行の高さ:1,6 em

キャプチャテキスト設定

キャプチャテキスト設定あり。

  • フォントキャプチャ:Open Sans
  • キャプチャテキストの色:#007dff

ボタン設定

ボタンをカスタマイズして続行します。

  • ボタンにカスタムスタイルを使用する:はい
  • ボタンのテキストサイズ:0,8 vw(デスクトップ)、2 vw(タブレット)、3 vw(電話)
  • ボタンのテキストの色:#ffffff
  • 背景ボタン:#007dff
  • 境界線幅ボタン:0ピクセル
  • ボタンの境界線の半径:100ピクセル
  • フォントボタン:開くなし
  • ソフトライトボタン:太字のテキスト
  • ボタンマージン:1vw
  • トップパディングボタン:1vw(デスクトップ)、2vw(タブレットと電話)
  • 下部のパディングボタン:1vw(デスクトップ)、2vw(タブレットと電話)
  • 左パッドボタン:2vw(デスクトップ)、7vw(タブレットと電話)
  • 右パッドボタン:2vw(デスクトップ)、7vw(タブレットと電話)

スペーシング

さまざまな画面サイズでカスタムパディング値を使用します。

  • ピーク内部ヘッドルーム:4vw(デスクトップ)、6vw(タブレットと電話)
  • 内部マージン下部:4vw(デスクトップ)、6vw(タブレットと電話)
  • 左内側マージン:2vw(デスクトップ)、6vw(タブレットと電話)
  • 右内部マージン:2vw(デスクトップ)、6vw(タブレットと電話)

国境

次に、境界線の設定を変更します。

  • 角丸長方形の入力:10px

主な要素、連絡先のタイトル、キャプチャCSS

[詳細設定]タブにCSSの小さな変更をいくつか追加して、モジュール設定を完了します。

主な要素:

01border-radius: 20px;

連絡先のタイトル:

01margin-bottom: 1vw;

キャプチャ:

01margin-top: 1.5vw;

要素をカスタマイズして、ワンクリックでお問い合わせフォームを作成します

列3の高さを追加します

すべてのモジュールを配置したら、エフェクトを作成します。 目的の結果を得るための最初のステップは、3列の設定を開き、[詳細設定]タブにカスタムのレスポンシブ高さを追加することです。

デスク :

01height: 3vw;

タブレット:

01height: 5vw;

電話:

01height: 6vw;

ボタンと矢印にCSSクラスを追加します

次に、同じCSSクラスを列3の最初のXNUMXつのテキストモジュールに追加します。

  • CSSクラス:show-contact

連絡先フォームにCSSクラスを追加する

お問い合わせフォームモジュール用のカスタムCSSクラスも必要になります。

  • CSSクラス:contact-form-module

お問い合わせフォームモジュールを非表示

連絡先フォームモジュールのメイン要素にCSSコードの行を追加して続行します。 これにより、クリックする前にモジュールを非表示にできます。

01display: none;

JQueryとCSSコードを使用してコードモジュールを列3に追加します

クリック関数を作成するには、JQueryコードが必要です。 カスタムCSSコードも使用します。 コードを含む新しいコードモジュールを列2に追加します。 スクリプトタグの間にJQueryコードを配置し、スタイルタグの間にCSSコードを配置してください。

jQuery(function($){

$(".show-contact").click(function() {

$('.contact-form-module').slideToggle();

});

});

.show-contact {

cursor: pointer;

}

.et-menu>li {

padding-left: 0.7vw !important;

padding-right: 0.7vw !important;

}

調査

すべての手順を完了したので、最後に結果を見てみましょう。

diviのグローバルヘッダーに連絡フォームを追加する

結論

この記事では、カスタムヘッダーにドロップダウン連絡フォームを追加する方法を説明しました。

ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

Divi:ホバーで記事の抜粋を表示する方法

Divi:ホバーで記事の抜粋を表示する方法

Diviでホバーに記事の抜粋を表示する方法を知りたいですか?

ホバーでブログ投稿スニペットをプレビューすると、それらのスニペットを完全に破棄することなく、ブログ投稿のコンパクトなグリッドレイアウトを維持するための効果的な方法になります。 

したがって、最初にスニペットを非表示にしてから、グリッド内の投稿にカーソルを合わせるとスニペットを表示するという考え方です。 したがって、読者はより多くの投稿を見ることができ、興味のある投稿の抜粋を見ることができます。

したがって、このチュートリアルでは、Diviのホバートグル効果に関するこのブログ投稿スニペットを作成する方法を示します。 

のは、始めましょう!

調査

まず、このチュートリアルで作成する内容の概要を示します。

Diviでホバーに関する記事の抜粋を表示する

ブログモジュールレイアウトの作成

まず、ブログ投稿の基本的なレイアウトを作成する必要があります。 このチュートリアルでは、列に行を追加し、その列にブログモジュールを挿入します。

行を作成する

まず、セクションにXNUMX列の行を挿入します

線幅

次に、回線設定に移動します。 次に、[スタイル]タブの[サイズ設定]で、幅を次のように変更します。

  • 最大幅:90%
  • 最大幅:1200px
Diviでホバーに関する記事の抜粋を表示する

ブログモジュールを追加する

次に、前に作成した行の列にブログモジュールを挿入します。

ブログモジュールの設定

次に、ブログモジュールの設定に移動し、[コンテンツ]タブの[要素]で、[続きを読むボタンを表示]オプションを[はい]に設定します。

次に、[スタイル]タブに移動し、[テンプレート]で、ブログのレイアウトとして「グリッド」テンプレートを選択します。

最後に、[詳細設定]タブに移動し、次のCSSクラスを追加します。 

CSSクラス:toggle-blog-excerpt

その後、次のステップで、このクラスをカスタムCSSコードのセレクターとして使用します。

コードモジュールを使用してカスタムCSSを追加します。

この時点で、ブログ投稿はグリッドに配置され、カスタムCSSクラスがブログメニューに追加されています。 したがって、このCSSクラスセレクターを使用して、このブログモジュールを具体的にターゲットにし、記事にカーソルを合わせたときにトグル効果を追加します。

CSSを追加するには、Codeモジュールを使用します。 これを行うには、ブログモジュールの下にコードモジュールを追加します。

次に、ホバーで記事スニペットのトグル効果を作成するために必要な以下のカスタムCSSを貼り付けます。 何よりも、必要なスタイルタグの間にCSSコードを貼り付けてください。

  1. @media all and (min-width981px) {
  2.   /* add transition for post content*/
  3.   .toggle-blog-excerpt .et_pb_post .post-content {
  4.     -webkit-transitionall 500ms !important;
  5.     transitionall 500ms !important;
  6.   }
  7.   /* keep post content visible in visual builder */
  8.   body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
  9.     visibility:visible;
  10.     opacity1;
  11.     max-height:none;
  12.   }
  13.   /* hide post content */
  14.   .toggle-blog-excerpt .et_pb_post .post-content {
  15.     visibilityhidden;
  16.     opacity0;
  17.     max-height:0px;
  18.   }
  19.   /* show post content when hovering over post item */
  20.   .toggle-blog-excerpt .et_pb_post:hover .post-content {
  21.     visibilityvisible;
  22.     opacity:1;
  23.     max-height500px;
  24.   }
  25.   /* set min-height for all post items */
  26.   .toggle-blog-excerpt .et_pb_post {
  27.     min-height400px
  28.   }
  29. }

これまでに得られた結果を見てみましょう。

結果

Diviビルダーを使用してブログモジュールにスタイルを追加しましょう

ブログ投稿スニペットのトグル効果を提供するCSSが配置されたので、Diviビルダーを使用してブログモジュールにスタイルを追加できます。

この例では、スタイルに最小限の調整を加えますが、独自のスタイルも自由に検討してください。

記事のタイトルスタイル

  • 薄暗いタイトル:太字のテキスト
  • タイトルテキストの色:#6D6A7E
  • タイトルテキストサイズ:20px
  • タイトル行の高さ:1.3em
Diviでホバーに関する記事の抜粋を表示する

テキストスタイル「続きを読む」

  • 続きを読む薄暗い光:太字のテキスト
  • 続きを読むコピースタイル:TT
  • テキストの色続きを読む:#6D6A7E
  • 文字間隔続きを読む:1px
  • 線の高さ続きを読む:3.5em

テキストページネーションの表示を変更します

  • ページネーションを表示する薄暗いライト:太字のテキスト
  • テキストの色表示ページ番号:#6D6A7E
  • レタースペーシングショーのページ番号:1px
  • ページネーションを表示コピースタイル:TT
Diviでホバーに関する記事の抜粋を表示する

境界線を削除する

  • グリッドレイアウトの境界線の幅:0px

ホバーシャドウボックススタイル

  • シャドウボックス:スクリーンショットを参照
  • 開始位置:0px
  • ボックスシャドウブラー強度:38px
  • 字幕フォントの色:rgba(109,106,126,0.25)

最終結果

結論

結論として、このチュートリアルに示されているように、いくつかのCSSスニペットを追加すると、ブログ投稿スニペットをロックするために必要な機能を提供し、優れたホバー効果を得ることができます。 

この方法で最も重要なことは、Diviの統合オプションを使用して、ブログモジュールに必要に応じてスタイルを追加できることです。 さらに、ホバー効果の追加など、投稿要素をカスタマイズできます。 

うまくいけば、これはあなたのDiviウェブサイトのブログにデザインと機能性のさらなる後押しを与えるのに役立つでしょう。 コメントであなたの経験について教えてください。

Divi:フルスクリーンメニューモジュールを使用してグローバルヘッダーを作成する方法

Divi:フルスクリーンメニューモジュールを使用してグローバルヘッダーを作成する方法

Diviのフルスクリーンメニューモジュールを使用してグローバルヘッダーを作成しますか?

ヘッダーは、あらゆるWebサイトの最も重要な要素のXNUMXつであり、 ユーザーエクスペリエンス。 ナビゲーションメニューは、ユーザーがWebサイトで何を見つけることができるかをユーザーに知らせ、必要な情報を見つけるのに役立ちます。 

さらに、セカンダリメニューバーは、召喚状を強調したり、オファーを宣伝したりするのに最適なスペースになります。 ヘッダーは通常すべてのページに表示されるため、Webサイトの最も重要な部分のXNUMXつであることは言うまでもありません。 これは、ブランディングを紹介し、Webサイトの他の部分のデザインと一貫性のあるヘッダーを作成する絶好の機会です。

Diviのテーマビルダーオプションを使用すると、カスタムグローバルヘッダーを作成し、Webサイト全体でヘッダーおよびメニューモジュールの外観をカスタマイズできます。 

このチュートリアルでは、Diviのフルスクリーンメニューモジュールを使用してグローバルヘッダーを作成する方法を紹介します。

のは、始めましょう!

調査

これが、設計するグローバルヘッダーのプレビューです。

テーマビルダーを開く

この例ではグローバルヘッダーを作成しているので、WordPressDiviメニューにある「ThemeBuilder」に移動しましょう。 [グローバルヘッダーの追加]を選択してから、[グローバルヘッダーの作成]を選択します。

Divi:フルスクリーンメニューモジュールを使用してグローバルヘッダーを作成する方法

セカンダリメニューバーを作成します

グローバルヘッダーレイアウトを最初に開くと、通常のセクションがプリロードされています。 これをセカンダリメニューバーに変更します。このメニューバーは、全幅メニューの上にあり、召喚状のテキストとボタンが含まれています。
まず、セクション設定を開き、背景色を追加します。

  • 背景:#92A8A1

次に、セクションマージン。

  • 内側マージン頂点:0px
  • 下部内部マージン:0px
Divi:フルスクリーンメニューモジュールを使用してグローバルヘッダーを作成する方法

次に、行を挿入します。 この例では、以下に示すレイアウトを使用します。

行設定の[スタイル]タブの[サイズ設定]で、列の高さを調整します。

  • カラムの高さを調和させる:はい

次に、上マージンと下マージンを次のように設定します。

  • トップインナーマージン:5px
  • 下部内側マージン:5px

セカンダリヘッダー要素を垂直方向に配置する必要があるため、メイン行要素にカスタムCSSを追加します。

1. align-items:center;

Divi:フルスクリーンメニューモジュールを使用してグローバルヘッダーを作成する方法

これでラインが設定されたので、コンテンツのモジュールを挿入できます。 まず、左側にテキストモジュールを挿入します。

テキストコンテンツを編集します。 これは、召喚状を含めたり、オファーを宣伝したりするのに最適な場所です。

  • テキスト:「私たちのメーリングリストに参加して、ご注文の10%オフを受け取りましょう!」 »»

テキストモジュールの[スタイル]タブにアクセスし、次のようにパラメータを変更します。

  • フォント「テキスト」:ポピン
  • 「テキスト」薄暗いライト:中
  • 「テキスト」のテキストの色:#FFFFFF

次に、右側にボタンモジュールを追加します。

ボタンのテキストを追加します。

  • テキスト:「無料見積もりを取得」

[スタイル]タブで、ボタンを中央に揃えます。

  • ボタンの配置:中央

次に、ボタンの外観をカスタマイズしましょう。

  • 「ボタン」にカスタムスタイルを使用する:はい
  • ボタンのテキストサイズ:14px
  • ボタンのテキストの色:#FFFFFF
  • 背景ボタン:#2F5349
  • ボタンの境界線の幅:0px
  • ボーダー半径ボタン:50px
  • ボタンの文字間隔:1px
  • ボタンフォント:ポピン

フルスクリーンメニューモジュールを追加する

セカンダリメニューが設計されたので、メインメニューに移動できます。 フルスクリーンメニューモジュールを使用してメニューを作成します。 グローバルヘッダーに新しいフルスクリーンセクションを追加します。

フルスクリーンメニューモジュールを選択して挿入します

次に、フルスクリーンメニューの設定をカスタマイズします。

  • アクティブリンクの色:#2F5349
  • フォントメニュー:ポピン
  • 薄暗いライトメニュー:セミボールド
  • コピースタイルメニュー:TT
  • メニューテキストの色:#000000
  • ホバーメニューのテキストの色:#2F5349
  • メニューテキストサイズ:15px
  • メニューの文字間隔:2px

ハンバーガーメニューのアイコンの色を黒に変更します。

  • ハンバーガーメニューアイコンの色:#000000
Divi:フルスクリーンメニューモジュールを使用してグローバルヘッダーを作成する方法

メニューにロゴを追加する前に、サイズ設定オプションを変更しましょう。 Diviの組み込みのレスポンシブオプションを使用して、PCとモバイルで異なる最大高さを設定します。

  • PCの最大ロゴ高さ:3vw
Divi:フルスクリーンメニューモジュールを使用してグローバルヘッダーを作成する方法
  • モバイルでの最大ロゴの高さ:6vw

次に、フルスクリーンメニューにロゴを追加します。

最後に、ユーザーがWebサイトをスクロールしたときにメインメニューを画面の上部に残したいので、これにはDiviの組み込みのスティッキースティッキー設定を使用します。

  • スティッキーポジション:上にスティック

これで、グローバルヘッダーの設計が完了しました。

事前定義されたレイアウトで新しいページを作成します

全幅のヘッダーとメニューの動作を確認するために、Diviライブラリから事前定義されたレイアウトで新しいページを作成しましょう。 この例では、パッケージのフローリングホームページを使用します フロアレイアウト.

Webサイトに新しいページを追加してタイトルを付け、[DiviBuilderを使用する]オプションを選択します。

この例では、Diviライブラリから作成済みのレイアウトを使用しているため、[レイアウトの選択]を選択します。

「フローリングホームページ」レイアウトを見つけて選択します。

「レイアウトの選択」を選択して、ページにレイアウトを追加します。

これでデザインが完成しました!

最終結果

結論

上で述べたように、ヘッダーとナビゲーションメニューは、Webサイトのユーザーエクスペリエンスの中心です。 これで、Diviの「フルスクリーンメニュー」モジュールを使用して、見事な全体的なヘッダーを設計することがいかに簡単であるかがわかりました。 

幸い、Diviのテーマビルダーを使用すると、Webサイトのメニューとヘッダーのあらゆる側面を制御でき、数回クリックするだけで完全にカスタムでユニークなデザインを作成できます。

Diviのグローバルヘッダーオプションを使用して、ヘッダーとナビゲーションメニューをカスタマイズしましたか? コメントであなたの考えを教えてください!

Divi:Builderテーマでグローバルヘッダーを作成する方法

Divi:Builderテーマでグローバルヘッダーを作成する方法

Diviを使用してWebサイトのグローバルヘッダーを作成する必要がありますか?

ページまたは投稿に別のヘッダーを割り当てていない限り、グローバルヘッダーはWebサイトのいたるところに表示されます。

始めましょう!

調査

これが、設計するグローバルヘッダーのプレビューです。

メインメニューを構成する

WordPressサイトの外観設定でメニューを作成することから始めます。

Diviの下のテーマビルダーオプションにアクセスします

Diviテーマオプションで、テーマビルダーをクリックします。 そこに入ると、デフォルトのWebサイトテンプレートが表示されます。

グローバルヘッダーを追加して作成します

デフォルトのWebサイトテンプレートでは、カスタムグローバルヘッダー、グローバルボディ、およびグローバルフッターの作成を開始できます。 [グローバルヘッダーの追加]をクリックし、[グローバルヘッダーの作成]をクリックして続行してプロセスを開始します。

セクション設定

サイズ剤

ページにあるセクション設定を開き、[スタイル]タブで、さまざまな画面サイズのサイズを変更します。

  • 最大幅:100%
  • 最大幅:1280px(PCおよびタブレットの場合)、100%(モバイルの場合)

スペーシング

上下の内部マージンをすべて削除します

  • 内側マージン頂点:0px
  • 下部内部マージン:0px

国境

次に、セクションの左下隅と右下隅に境界線の半径を追加します。

  • 左下:50px
  • 右下:50px

シャドーボックス

微妙なボックスシャドウも追加しましょう。

  • ボックスシャドウブラー強度:60px
  • 字幕フォントの色:rgba(0,0,0,0.13)

可視

  • 水平オーバーフロー:表示
  • 垂直オーバーフロー:表示

ヘッダーに新しい行を割り当てます

一般的なセクション設定が完了したので、行の追加を開始できます。 合計でXNUMX行必要になります。 XNUMXつはヘッダー専用で、もうXNUMXつはメニュー項目を表示できるようにします。 次の列構造を使用して新しい行を追加することにより、ヘッダーから始めます。

ライン設定

背景設定

線にモジュールを追加せずに、線の設定を開き、背景色を変更します。

  • 背景:#38383F

サイズ剤

次に、行サイズパラメータを変更します。

  • カスタムガター幅を使用:はい
  • 列間隔:1
  • 最大幅:100%
  • 最大幅:100%

鑑賞

次に、このCSSコードの行をメインの行要素に追加して、小さい画面で列が隣り合って表示されるようにします。

01 display: flex;

列1に画像モジュールを追加します

ロゴをダウンロードする

行の設定が完了したら、モジュールの追加を開始します。 列1に画像モジュールを追加し、ロゴをアップロードします。

Alignement

[スタイル]タブに移動し、画像を左揃えにします。

サイズ剤

モジュールの幅も変更します。

スペーシング

また、カスタムマージン値を追加します。

DiviBuilderテーマでグローバルヘッダーを作成する

列2にソーシャルメディア追跡モジュールを追加します

ソーシャルネットワークを追加する

XNUMX列目に行きましょう。 そこで、ソーシャルメディア追跡モジュールが必要になります。 選択したソーシャルネットワークを追加します。 ソーシャルメディアはいくつでも追加できます。

DiviBuilderテーマでグローバルヘッダーを作成する

ソーシャルネットワークの背景色

次に、各ソーシャルネットワークを個別に開き、背景色を完全に透明な色に変更します。

  • 背景色:rgba(0,0,0,0)
DiviBuilderテーマでグローバルヘッダーを作成する

Alignement

通常のモジュール設定に戻り、モジュールの完全な配置を変更します。

アイコン

アイコンの設定も変更してください。

  • アイコンの色:#FFFFFF
  • カスタムアイコンサイズを使用する:はい
  • アイコンのフォントサイズ:16px(PCおよびタブレット)、12px(電話)

スペーシング

上マージンを追加します。

3列目にボタンモジュールを追加します

XNUMX番目の列に移動し、選択したテキストを含むButtonモジュールを追加します。

Alignement

[スタイル]タブでボタンの配置を変更します。

ボタンの設定

次のようにボタン設定をカスタマイズします。

  • ボタンにカスタムスタイルを使用する:はい
  • ボタンのテキストサイズ:12px(デスクトップ)、10px(タブレット)、8px(電話)
  • ボタンのテキストの色:#ffffff
  • 背景ボタン:#ffae25
  • ボタンの境界線の幅:0ピクセル
  • ボーダー半径ボタン:0ピクセル
  • ボタンの文字間隔:5ピクセル(デスクトップ)、3ピクセル(タブレットと電話)
  • フォントボタン:開くなし
  • ソフトライトボタン:太字のテキスト
  • コピーボタンスタイル:TT

スペーシング

マージン値をカスタマイズします。

メニューバーに新しい行を割り当てる

グローバルヘッダー専用の行を入力したら、すぐ下に別の行を追加できます。

ライン設定

サイズ剤

モジュールをまだ追加せずに、ライン設定を開き、[スタイル]タブでサイズ設定を変更します。

スペーシング

次に、すべての下部と上部の余白を削除します。

メニューモジュールを列に追加します

メニューを選択

次に、メニューモジュールを列に追加し、このチュートリアルの最初の部分で作成したメニューを選択します。

配置

[スタイル]タブに切り替えて、次のようにレイアウト設定を変更します。

接続

また、[スタイル]タブでアクティブなリンクの色を変更します。

  • アクティブなリンクの色:#ffae25
DiviBuilderテーマでグローバルヘッダーを作成する

ドロップダウンメニュー

ドロップダウンメニュー設定のドロップダウンメニューの線の色についても同じようにします。

  • ドロップダウン行の色:#ffae25

アイコン

  • ハンバーガーメニューアイコンの色:#ffae25

メニューテキスト

メニューテキスト設定付き。

  • メニューフォント:プラタ
  • メニューテキストの色:#000000

ヘッダーとメニューバーを上に表示します

セクション設定を開く

XNUMX行目を完了したら、セクションがページと投稿の上部に表示されるようにするだけです。 これを行うには、セクション設定を再度開きます。

メイン要素にカスタムCSSを追加する

次に、[詳細設定]タブに移動し、セクションのメイン要素に数行のCSSコードを追加します。

01 position: fixed;

02 top: 0;

03 left: 0;

04 right: 0;

グローバルヘッダーとテーマビルダーのオプションを保存する

グローバルヘッダーデザイン全体が完了したら、テンプレートレイアウトを終了する前に、必ずデザインを保存してください。 テンプレートレイアウトが終了したら、テーマビルダーの変更全体を保存して完了です。

調査

すべての手順を完了したので、最後に結果を見てみましょう。

DiviBuilderテーマでグローバルヘッダーを作成する

結論

この記事では、Diviの新しいテーマビルダーを使用してカスタムグローバルヘッダーを作成する方法を説明しました。 このチュートリアルでは、美しいヘッダーを作成して、Webサイト全体または特定のカスタム投稿タイプに適用するのがいかに簡単かを示します。 

テーマビルダーを使用してWebサイトをカスタマイズするのに役立つことを願っています。

ご質問やご提案がございましたら、にコメントを残してください コメントセクション 以下。

...