Diviのテーマビルダーを使用して回転グローバルヘッダーを作成する方法

公開: 2019-11-20

Divi Theme Builderがリリースされて以来、独自のグローバルヘッダーを作成するプロセスをガイドしてきました。 ページと投稿の左側に表示される回転されたグローバルヘッダーを作成する方法を示すことで、これを継続します。 ヘッダーの背景色は完全に透明であるため、ページ/投稿のコンテンツが透けて見えます。 スクロール中もグローバルヘッダーが左側に固定されていることを確認し、メニューもモバイル対応バージョンに変換しました。 このユースケースチュートリアルでは、デザインを最初から再作成する方法を示します。また、テンプレートのJSONファイルを無料でダウンロードすることもできます。

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

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

回転したグローバルヘッダー

モバイル

回転したグローバルヘッダー

回転したグローバルヘッダーテンプレートを無料でダウンロード

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

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

無料でダウンロード

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

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

1. Divi Theme Builderに移動し、グローバルヘッダーの作成を開始します

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

WordPressWebサイトのDiviThemeBuilderにアクセスすることから始めます。

回転したグローバルヘッダー

グローバルヘッダーの作成を開始します

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

回転したグローバルヘッダー

2.回転側グローバルヘッダーの作成を開始します

新しいセクションを追加

背景色

テンプレートエディタ内に入ると、すでにそこにあるセクションを開いて、さまざまな画面サイズで背景色を変更できます。

  • 背景色：rgba（0,0,0,0）（デスクトップ）、＃FFFFFF（タブレットと電話）

回転したグローバルヘッダー

サイジング

次に、セクションのサイズ設定を変更します。

  • 幅：5vw（デスクトップ）、100％（タブレットと電話）
  • 最小の高さ：100vw（デスクトップ）、自動（タブレットと電話）

回転したグローバルヘッダー

間隔

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

  • トップパディング：2vw
  • ボトムパディング：2vw

回転したグローバルヘッダー

ボックスシャドウ

次に、ボックスシャドウの設定に移動し、さまざまな画面サイズにカスタムボックスシャドウを追加します。

  • ボックスシャドウの水平位置：32px（デスクトップ）、0px（タブレットと電話）
  • ボックスシャドウブラー強度：49px
  • ボックスシャドウの広がりの強さ：0px（デスクトップ）、19px（タブレットと電話）
  • 影の色：rgba（0,0,0,0.12）

回転したグローバルヘッダー

デフォルトのメイン要素

また、セクションのメイン要素に数行のCSSコードを追加することで、回転したグローバルヘッダーが左側に固定されたままになるようにします。 

position: fixed;
top: 0;
display: flex;
flex-wrap: wrap;
align-content: center;

回転したグローバルヘッダー

メイン要素をホバーします

同じ行のCSSコードをセクションのホバーメイン要素にも追加してください。 

position: fixed;
top: 0;

回転したグローバルヘッダー

デフォルトの可視性

次に、可視性設定でzインデックスを増やします。

  • Zインデックス：99999

回転したグローバルヘッダー

ホバーの可視性

同じ値がホバーに適用されることを確認してください。

  • Zインデックス：99999

回転したグローバルヘッダー

新しい行を追加

カラム構造

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

回転したグローバルヘッダー

サイジング

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

  • カスタムガター幅を使用：はい
  • 側溝幅：1

回転したグローバルヘッダー

間隔

デフォルトの上下のパディングもすべて削除します。

  • トップパディング：0px
  • ボトムパディング：0px

回転したグローバルヘッダー

列の設定

主な要素（タブレットと電話）

タブレットと携帯電話では、まったく異なるルックアンドフィールを目指しています。 3つの異なるモジュールを並べて配置します。 そのためには、CSSコードを少し追加する必要があります。 列の設定を開き、[詳細設定]タブに移動して、次の行のCSSコードをタブレットと電話のメイン要素に挿入します。 

display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;

回転したグローバルヘッダー

画像モジュールを列に追加

ロゴをアップロード

モジュールの追加を開始する時が来ました！ 最初に必要なモジュールは画像モジュールです。 選択した半透明のロゴ画像ファイルをアップロードします。

回転したグローバルヘッダー

サイジング

次に、[デザイン]タブに移動し、さまざまな画面サイズで幅を変更します。

  • 幅：4vw（デスクトップ）、12vw（タブレット）、16vw（電話）

回転したグローバルヘッダー

変換スケール

次に変換スケール設定を変更して、モジュールのサイズを増やします。

  • 右：170％（デスクトップ）、100％（タブレットと電話）
  • 下：170％（デスクトップ）、100％（タブレットと電話）

回転したグローバルヘッダー

変換翻訳

そして、デスクトップに下部の変換変換値を追加して、モジュールを右にプッシュします。

  • 下：1vw（デスクトップ）、0vw（タブレットと電話）

回転したグローバルヘッダー

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

メニューを選択

次に必要なモジュールはメニューモジュールです。 お好みのメニューを選択してください。

回転したグローバルヘッダー

背景色を削除する

次に、モジュールの背景色を削除します。

回転したグローバルヘッダー

レイアウト

次に、[デザイン]タブに移動し、レイアウト設定を変更します。

  • スタイル：中央揃え
  • ドロップダウンメニューの方向：下向き

回転したグローバルヘッダー

デフォルトのメニューテキスト

メニューのテキスト設定も変更します。

  • アクティブリンクの色：#cecece
  • メニューフォント：Montserrat
  • メニューフォントの太さ：太字
  • メニューテキストの色：＃000000
  • メニューテキストサイズ：0.9vw（デスクトップ）、2vw（タブレット）、2.5vw（電話）

回転したグローバルヘッダー

メニューテキストにカーソルを合わせる

ホバー時にメニューテキストの色を変更します。

  • メニューテキストの色：#afafaf

回転したグローバルヘッダー

ドロップダウンメニュー

ドロップダウンメニューの設定にもいくつか変更を加えています。

  • ドロップダウンメニューの線の色：＃000000
  • ドロップダウンメニューのテキストの色：＃000000

回転したグローバルヘッダー

アイコン

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

  • ハンバーガーメニューアイコンの色：＃000000

回転したグローバルヘッダー

間隔

また、さまざまな画面サイズにカスタムマージン値を追加します。

  • トップマージン：18vw（デスクトップ）、0vw（タブレットと電話）
  • 下マージン：18vw（デスクトップ）、0vw（タブレットと電話）
  • 左マージン：-13vw（デスクトップ）、0vw（タブレットと電話）
  • 右マージン：-13vw（デスクトップ）、0vw（タブレットと電話）

回転したグローバルヘッダー

変換回転

次に、回転効果を作成するために、モジュールの変換回転値を試してみましょう。

  • 左：270度（デスクトップ）、0度（タブレットと電話）

回転したグローバルヘッダー

ソーシャルメディアフォローモジュールを列に追加

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

ソーシャルメディアフォローモジュールに移ります。これは、ローテーションされたグローバルヘッダーを完成させるために必要な次の最後のモジュールです。 お好みのソーシャルネットワークをいくつか追加します。

回転したグローバルヘッダー

ソーシャルネットワークスタイルをリセットする

各ソーシャルネットワークの設定を個別にリセットして続行します。 これは、背景色を取り除くのに役立ちます。

回転したグローバルヘッダー

配置

次に、モジュールの[デザイン]タブに移動し、さまざまな画面サイズでモジュールの配置を変更します。

  • 配置：左（デスクトップ）、右（タブレットと電話）

回転したグローバルヘッダー

アイコン設定

最後になりましたが、アイコンの設定も変更してください。

  • アイコンの色：＃000000
  • カスタムアイコンサイズを使用：はい
  • アイコンフォントサイズ：2.1vw

回転したグローバルヘッダー

3.ビルダーの変更を保存して結果を表示する

すべてのモジュールを完了したら、テンプレートを保存し、Divi Theme Builderを終了して、Webサイトで結果を表示できます。

回転したグローバルヘッダー

回転したグローバルヘッダー

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

回転したグローバルヘッダー

モバイル

回転したグローバルヘッダー

最終的な考え

この投稿では、Diviの新しいテーマビルダーを使用して回転したグローバルヘッダーを作成する方法を紹介しました。 また、メニューバーをモバイルで非常にモバイルフレンドリーなバージョンに変換しました。 特に選択しない限り、作成したグローバルヘッダーはすべての投稿とページに表示されます。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。