Divi用の無料のCTAコラムスワイプヒーローセクションデザインをダウンロードする

あなたのページのヒーローセクションは、それが得ることができるすべての注目に値します。 あなたのウェブサイトが何であるか、そしてあなたのターゲットオーディエンスがどのように振る舞うかに応じて、あなたのヒーローセクションをスタイリングする無限の方法があります。 一部のWebサイトでは、圧倒的なエクスペリエンスを作成せずに、複数列のCTAカードを配置すると便利な場合があります。 それにアプローチするための優れた方法は、列スワイプCTAカードを作成することです。 今日のDiviチュートリアルでは、このテクニックに取り組む見事なデザインをゼロから作成する方法を紹介します。 JSONファイルも無料でダウンロードできます！

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

プレビュー

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

デスクトップ

モバイル

ヒーローセクションを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

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

再作成を始めましょう！

新しいセクションを追加

グラデーションの背景

作業中のページに新しいセクションを追加し、セクション設定を開いて、グラデーションの背景を挿入します。

• 色1：#ffffff
• 色2：＃f5ede5
• グラデーション方向：90度
• 開始位置：17％
• 終了位置：17％

間隔

[デザイン]タブに移動し、さまざまな画面サイズにカスタムの上下のパディングを追加します。

• トップパディング：5vw（デスクトップ）、10vw（タブレット）、13vw（電話）
• 下部のパディング：5vw（デスクトップ）、10vw（タブレット）、13vw（電話）

行＃1を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

背景色

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

• 背景色：＃fff6ed

サイジング

[デザイン]タブに移動し、行のサイズ設定も変更します。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 幅：60vw（デスクトップ）、100％（タブレットと電話）
• 最大幅：100％
• 行の配置：右

間隔

また、間隔設定にいくつかのカスタムパディング値を追加しています。

• トップパディング：6vw
• ボトムパディング：6vw
• 左パディング：5.5vw
• 右パディング：24vw

国境

次に境界線の設定に移動し、次の設定を使用して左側の境界線を追加します。

• 左ボーダー幅：6px
• 左ボーダーの色：#FFFFFF

ボックスシャドウ

微妙なボックスシャドウを追加して、ヒーローセクションに奥行きを作成します。

• ボックスシャドウブラー強度：100px
• 影の色：rgba（0,0,0,0.22）

CSSクラス

また、[詳細設定]タブでCSSクラスを使用します。 この投稿の後半で、このCSSクラスを使用してスクロールバーを非表示にします。

• CSSクラス：スワイプ-スクロールバー

主な要素

水平スクロール/スワイプを作成するには、列を水平に配置する必要があります。 これを行うには、行のメイン要素にカスタムCSSコードを追加します。

display: grid;
grid-template-columns: repeat(6, 100%);
grid-column-gap: 2vw;

オーバーフロー

可視性の設定に移動し、行のオーバーフローを変更します。

• 水平オーバーフロー：スクロール
• 垂直オーバーフロー：非表示

列の設定

行の設定が完了したら、最初の列の設定を開くことができます。

グラデーションの背景

グラデーションの背景を追加します。

• 色1：rgba（245,237,229,0.91）
• 色2：rgba（219,34,65,0.84）
• 開始位置：35％
• 終了位置：81％
• 背景画像の上にグラデーションを配置：はい

背景画像

背景画像と一緒に。

• 背景画像サイズ：カバー
• 背景画像の位置：中央
• 背景画像の繰り返し：繰り返しなし

間隔

[デザイン]タブに移動し、さまざまな画面サイズにカスタムパディング値を追加します。

• トップパディング：4vw（デスクトップ）、10vw（タブレット）、12vw（電話）
• 下部のパディング：4vw（デスクトップ）、10vw（タブレット）、12vw（電話）
• 左パディング：2vw（デスクトップ）、5vw（タブレット）、7vw（電話）
• 右パディング：2vw（デスクトップ）、5vw（タブレット）、7vw（電話）

国境

境界線設定の各コーナーに「20px」の境界線半径を追加して続行します。

主な要素

この作業を行う上でのもう1つの重要な部分は、列のメイン要素に1行のCSSコードを追加することです。

width: 100% !important;

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

H3コンテンツを追加する

モジュールの追加を開始する時が来ました！ 必要な数のモジュールを追加して、好みに合わせてスタイルを設定できます。 ただし、この投稿のプレビューで共有されたものとまったく同じ例を再現したい場合は、テキストモジュールから始めて、H3コンテンツを挿入してください。

H3テキスト設定

[デザイン]タブに移動し、それに応じてH3テキスト設定を変更します。

• 見出し3フォント：ポピンズ
• 見出し3フォントの太さ：軽い
• 見出し3テキストの色：＃e92640
• 見出し3テキストサイズ：1.5vw（デスクトップ）、3.5vw（タブレット）、4.5vw（電話）

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

コンテンツを追加する

次に必要なモジュールは、別のテキストモジュールです。 選択した段落の内容を入力します。

テキスト設定

次にテキスト設定に移動し、いくつかの変更を加えます。

• テキストフォント：ポピンズ
• テキストフォントの太さ：軽い
• テキストの色：＃e92640
• テキストサイズ：0.8vw（デスクトップ）、1.9vw（タブレット）、2.8vw（電話）

間隔

また、列スワイプカードにスペースを作成するために、下マージンを追加しています。

• 下マージン：18vw（デスクトップ）、30vw（タブレット）、42vw（電話）

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

コピーを追加

次のモジュールであるボタンモジュールに進みます。 お好みのコピーを入力してください。

ボタンの設定

[デザイン]タブに移動し、それに応じてボタンの設定を変更します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：0.8vw（デスクトップ）、1.8vw（タブレット）、2.5vw（電話）
• ボタンのテキストの色：＃f5ede5
• ボタンの境界線の幅：1px
• ボタンの境界線の色：＃f5ede5
• ボタンの境界線半径：5px
• ボタンフォント：ポピン

間隔

さまざまな画面サイズにカスタムパディング値を追加して、ボタンのサイズを大きくします。

• トップパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• 下部のパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• 左パディング：3vw（デスクトップ）、5vw（タブレット）、7vw（電話）
• 右パディング：3vw（デスクトップ）、5vw（タブレット）、7vw（電話）

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

可視性

次に必要なモジュールはディバイダーモジュールです。 [仕切りを表示]オプションが有効になっていることを確認してください。

• 仕切りを表示：はい

ライン

デザインタブに移動し、線の色を変更します。

• 線の色：＃f5ede5

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

コンテンツを追加する

この列で必要な次の最後のモジュールは、別のテキストモジュールです。 選択した段落の内容を入力します。

テキスト設定

[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

• テキストフォント：ポピンズ
• テキストフォントの太さ：軽い
• テキストの色：＃f5ede5
• テキストサイズ：0.8vw（デスクトップ）、1.9vw（タブレット）、2.8vw（電話）
• テキスト行の高さ：2.3em

間隔

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

• トップマージン：2vw

カラムを最大5回クローンし、他のCTAに再利用する

最初の列とその中のすべてのモジュールを完了すると、表示する列スワイプCTAカードの数に応じて、列全体を最大5回複製できます。 ボタンのリンクとともに、重複する各列のすべてのコピーを必ず変更してください。

行＃2を追加

カラム構造

2列目へ！ この行を使用して、前の行とのオーバーラップを作成します。 次の列構造を選択します。

サイジング

モジュールをまだ追加せずに、行設定を開き、それに応じてサイズ設定を調整します。

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

間隔

投稿の後半で、必要なモジュールを追加し、モジュールが最初の行の一部であるように見せるために、負の上部オーバーラップを作成します。 これは、デザインのスペースを占めるために2行目がまったく必要ないことを意味します。 そのため、デフォルトの上下の行のパディングをすべて削除します。

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

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

H1コンテンツを追加する

モジュールの追加を開始する時が来ました！ 最初のテキストモジュールから始めて、選択したH1コンテンツを入力します。

H1テキスト設定

[デザイン]タブに移動し、それに応じてH1テキスト設定を変更します。

• 見出しフォント：ポピン
• 見出しのテキストの色：＃e92741
• 見出しのテキストサイズ：3vw（デスクトップ）、5vw（タブレット）、7vw（電話）

間隔

次に、マージン値をいくつか追加します。

• トップマージン：-35vw（デスクトップ）、7vw（タブレット）、10vw（電話）
• 左マージン：5vw
• 右マージン：12vw

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

コンテンツを追加する

必要な2番目のモジュールは別のテキストモジュールです。 選択した段落の内容を入力します。

テキスト設定

[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

• テキストフォント：ポピンズ
• テキストフォントの太さ：軽い
• テキストの色：＃e92741
• テキストサイズ：0.8vw（デスクトップ）、1.9vw（タブレット）、2.8vw（電話）
• テキスト行の高さ：2.8em

間隔

テキストモジュールにもいくつかのカスタムマージン値を追加しています。

• トップマージン：2vw（デスクトップ）、7vw（タブレット）、10vw（電話）
• 下マージン：2vw（デスクトップ）、7vw（タブレット）、10vw（電話）
• 左マージン：5vw
• 右マージン：13vw（デスクトップ）、5vw（タブレットと電話）

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

コピーを追加

次に必要なモジュールはボタンモジュールです。 お好みのコピーを入力してください。

ボタンの設定

次に、[デザイン]タブに移動し、ボタンのスタイルを設定します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：0.9vw
• ボタンのテキストの色：＃e92741
• ボタンの背景色：＃f5ede5
• ボタンの境界線の幅：0px
• ボタンの境界線半径：5px
• ボタンフォント：ポピン

間隔

また、いくつかのカスタム間隔値を追加することにより、ボタンのサイズを拡大しています。

• トップマージン：2vw
• 左マージン：5vw
• トップパディング：1.5vw（デスクトップ）、2.5vw（タブレット）、3vw（電話）
• ボトムパディング：1.5vw（デスクトップ）、2.5vw（タブレット）、3vw（電話）
• 左パディング：6vw（デスクトップ）、9vw（タブレット）、15vw（電話）
• 右パディング：6vw（デスクトップ）、9vw（タブレット）、15vw（電話）

ボックスシャドウ

微妙なボックスシャドウを追加して、ボタンモジュールのデザインを完成させます。

• ボックスシャドウの垂直位置：20px
• ボックスシャドウブラー強度：50px
• ボックスシャドウスプレッド強度：-5px
• 影の色：rgba（0,0,0,0.19）

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、美しいコラムスワイプヒーローセクションを無料で共有し、それを最初から再現する方法も示しました。 これは、あまりにも圧倒的に見えるデザインを持たずに、ヒーローセクションで複数のCTAカードを紹介するのに最適な方法です。 このチュートリアルを楽しんでいただけたでしょうか。質問や提案がある場合は、下のコメントセクションに残してください。

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