ユニークなヘッダーデザインのためにDiviのスライダーモジュールに垂直スライダー要素を追加する方法

Diviのスライダーモジュールには、箱の外で考えて見事なスライダーデザインを簡単に作成できるデザインオプションが満載です。 それで、今日、私たちはいくつかのことを（文字通り）好転させるつもりです。 次の投稿では、Diviのスライダーモジュールに垂直スライダー要素を追加します。 垂直要素（タイトルテキストやスライドコントロールなど）を備えたスライダーを使用すると、訪問者はより狭い列でより多くのスライドコンテンツと背景画像を表示できます（特にモバイルの場合）。 そして、垂直要素は全体的なデザインにさわやかなひねりを加えます。

これを行うには、Diviの回転回転オプションを使用してスライダー全体を回転させ、必要に応じて各スライド内の他の要素を逆回転させて、最新の垂直スライダーデザインを作成します。 まず、基本的なテクニックについて説明します。 次に、この垂直スライダーを使用して、完全にユニークなヘッダーデザインを作成します。

飛び込みましょう！

スニークピーク

Divi垂直スライダー要素レイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。

チュートリアルに行きましょう。

https://youtu.be/Nmuy9VAYo4M

私たちのYoutubeチャンネルを購読する

始めるために必要なもの

開始するには、次のものが必要です。

1. Diviテーマがインストールされ、アクティブになっています
2. フロントエンドでゼロから構築するために作成された新しいページ（ビジュアルビルダー）
3. 反時計回りに90度回転した2つの画像。 これは、OSの組み込みオプションを使用するか、簡単な写真編集アプリケーションを使用して簡単に実行できます。 メディア要素を編集して、WordPressで画像を直接回転させることもできます。
   

その後、Diviで傑作を作成する準備が整いました。

基本的な考え方

垂直スライダー要素の追加の背後にある基本的な考え方は、Diviの変換オプションを使用してスライダーモジュールを90度（時計回りまたは反時計回り）回転させ、ページに垂直に表示することです。 スライダー（またはスライド）の背景画像の場合、スライダーを回転させるたびに画像が直立して表示されるように、事前に（またはWordPress画像エディターを使用して）画像を回転させる必要があります。 これにより、スライダーコントロール、矢印、およびテキストが期待どおりに垂直に表示されます。 物事は文字通り向きを変えるので、トリッキーな部分はスライダーの高さと幅をカスタマイズすることです。 このスライダーのデザインは、2列以上のレイアウトで最適に機能します。

これを行う方法の簡単な例を次に示します。

2列の行がある通常のセクションで、左側の列にスライダーモジュールを追加します。

次に、それぞれタイトル、本文の文、および前に反時計回りに90度回転した背景画像を含むスライドをいくつか追加します。

次に、Diviの変換オプションを使用して、スライダーモジュールをz軸に沿って90度回転させます。

次に、スライダーに間隔（下のパディング）を追加して幅を追加し、テキストを各スライドの右側に揃えます。

結果は次のとおりです。

ご覧のとおり、コンセプトはシンプルですが、これらの垂直スライダー要素は、ユニークなデザインを作成するのに非常に役立ちます。

以下では、これらのユニークなスライダーデザインの1つを一緒に作成する方法について説明します。

独自のヘッダーデザインのためにDiviのスライダーモジュールに垂直スライダー要素を追加

セクションと行の作成

セクションの背景

2列の行を持つ通常のセクションを作成することから始めます。

行にモジュールを追加する前に、まずセクションを次の背景色で更新します。

背景色：＃24272a

行設定

次に、行にカスタムガター幅1を指定し、vw長さの単位を使用して幅を設定する必要があります。 vwの長さの単位を使用することは、後で垂直スライダーを応答させるために重要です。

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

側溝幅：1
幅：80vw（デスクトップとタブレット）、95vw（電話）
最大幅：80vw（デスクトップとタブレット）、95vw（電話）

次に、デザインのためにボックスシャドウを追加します。

ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：-10px
ボックスシャドウの垂直位置：0px
影の色：rgba（255,255,255,0.03）

テキストモジュールを使用して見出しコンテンツを追加する

最終的には2列目にスライダーを追加しますが、今のところ1列目にテキストを追加してヘッダータイトルを追加しましょう。これを行うには、1列目に2つのテキストモジュールを追加します。

タイトルのテキストモジュールを追加します

ヘッダータイトルを追加するには、列1にテキストモジュールを追加します。

次のh2見出しで本文の内容を更新します。

<h2>My Work</h2>

次に、以下を更新します。

見出し2フォント：Karla
見出し2のテキストの色：#ffffff
見出し2テキストサイズ：5vw（デスクトップ）、60px（タブレット）、50px（電話）
パディング：上15％、下20％、左5％、右5％

ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：60px
ボックスシャドウの垂直位置：0px
影の色：＃9a2508

本文コンテンツ用のテキストモジュールを追加する

次に、列1の最初のテキストモジュールの下に新しいテキストモジュールを追加します。今のところ、デフォルトのコンテンツのままにしておくことができます。

次に、以下を更新します。

テキストテキストの色：#cccccc
幅：70％
モジュールの配置：右
マージン：-5％トップ
パディング：下5％、左10％、右5％

ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：0px
ボックスシャドウの垂直位置：10px
影の色：rgba（255,255,255,0.03）

垂直スライダーの作成

これで、垂直スライダー要素を使用してスライダーを作成する準備が整いました。

これを行うには、列2にスライダーモジュールを追加します。

2つのデフォルトスライドのうち最初のスライド設定を開きます。

デフォルトの本文テキストを切り詰めて、1行のテキストを含めます。 次に、以前に反時計回りに90度回転した背景画像を追加します。

次に、2番目のデフォルトのスライドについても同じことを行い、異なる背景画像を指定します。

スライダーを回転させる

次に、変換回転オプションを使用してスライダーを回転します。

変換回転z軸：90度

スライダーの高さ

スライダーの幅は自動的に列の100％にまたがるので、心配する必要はありません。 列は80vw（行幅）の50％であるため、基本的に幅はデフォルトで40vwになります。 次に、スライダーにデスクトップで40vwの高さを一致させてから、高さをタブレットで80vw、電話で95vwに調整する必要があります。

以下を更新します。

高さ：40vw（デスクトップ）、80vw（タブレット）、95vw（電話）

次に、パディングを調整して、テキストを垂直スライダーの右側に揃えます。

パディング（デスクトップ）：0px上、21vw下、0px左、0px右
パディング（タブレット）：42vwボトム
パディング（電話）：50vwボトム

テキスト設定を更新する

タイトルと本文を次のように調整します。

テキストの配置：左
タイトルフォント：Karla
タイトルテキストサイズ：32px
タイトルラインの高さ：1.3em
本文の文字間隔：3px
ボディラインの高さ：1.8em

ボタンのスタイリング

ボタンのスタイルと位置を設定するには、以下を更新します。

ボタンのテキストサイズ：16px
ボタンの背景色：＃9a2508
ボタンの境界線の幅：0px
ボタンの文字間隔：2px
ボタンのフォントの太さ：半太字
ボタンアイコン：プラス記号（スクリーンショットを参照）
ボタンの配置：右
ボタンマージン：上10％、下10％

背景グラデーション

垂直スライダーのタイトルテキストの背景を作成するには、次のようにスライダーに背景のグラデーションを追加します。

背景のグラデーションの左の色：＃9a2508
背景グラデーションの右の色：rgba（0,0,0,0）
開始位置：12％
終了位置：0％
背景画像の上にグラデーションを配置：はい

注：必要に応じて、背景のグラデーションの正しい色の不透明度を調整して、スライド画像のオーバーレイを作成できます。

カスタムCSSでボタンとスライダーの矢印を回転させる

ボタンはまだ垂直なので、CSSのスニペットを使用して前の位置に回転して戻す必要があります。 次のCSSをスライドボタンに追加します。

transform: rotate(-90deg);

スライダーの矢印については、同じcssのスニペットを追加して、上下ではなく左右を指すようにすることができます。 そして、そこにいる間、矢印のサイズを大きくすることもできます。 次のCSSをに追加します

transform: rotate(-90deg);
font-size: 80px;

それでおしまい！

最終結果を確認してみましょう。

最終結果

そして、ここではタブレットと電話にあります。

垂直要素を微調整して、新しいデザインを自由に探索してください。 これは、ボタンを左側に配置し、テキストをオーバーレイした同じデザインの例です。

最終的な考え

Diviのスライダーモジュールを回転させると、スライダーに垂直方向のデザイン要素をすばやく効果的に追加できます。 本当に、唯一の挑戦的な部分は、サイズと間隔を素晴らしく応答性の高いものにすることです。 しかしありがたいことに、Diviには十分な組み込みオプションがあり、すべてのデバイスで見栄えがするようにデザインを簡単に調整できます。

この垂直スライダーのデザインは、ヘッダー以外のサイトの他の領域でもうまく機能します。 これは、より狭い列レイアウトで注目の製品や紹介文を紹介するために使用されていることがわかります。

うまくいけば、これはあなたの次のプロジェクトのためにあなたにいくつかのインスピレーションを与えるでしょう。

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

乾杯！