透明な画像を使用してDiviで美しいCTA列のオーバーラップを作成する
公開: 2019-08-29CTAが視覚的に魅力的であるほど、コンバージョン率が向上する可能性が高くなります。 CTAを設計する方法はたくさんありますが、この投稿では、半透明の画像と列のオーバーラップを使用して美しいCTA列のデザインを作成する方法を紹介します。 半透明の画像は下のダウンロードフォルダにありますが、他の画像を自由に使用してください。 JSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
CTA列レイアウトを無料でダウンロード
無料のCTA列レイアウトを利用するには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
私たちのYoutubeチャンネルを購読する
再作成を始めましょう！
新しいセクションを追加
バックグラウンド
新しいページを作成するか、既存のページに新しい通常のセクションを追加することから始めます。 次に、セクション設定に移動し、グラデーションの背景を追加します。
- 背景：グラデーション
- 背景グラデーションカラー1：非常に明るい灰色#efefef
- 背景グラデーションカラー2：白#ffffff
- グラデーションタイプ：ラジアル
- 半径方向：中心
- 開始位置：52％
- 終了位置：50％
間隔
デザインタブに移動し、間隔設定でパディングを調整します。
- 上部と下部のパディング
- デスクトップ：0vw
- ボトムパディング
- タブレット+電話：70vw
新しい行を追加
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
サイジング
次に、行の幅と最大幅を調整します。
- 幅：100％
- 最大幅100％
テキストモジュールを追加
H2とテキストコンテンツを追加する
モジュールを追加する時が来ました！ まず、テキストモジュールを追加し、選択したH2と段落のコンテンツを挿入します。
文章
[デザイン]タブに移動し、次のようにテキストのスタイルを設定します。
- テキストフォント：Open Sans
- テキストの配置：中央
- テキストの色：緑＃5bba1b
- 文字サイズ：
- デスクトップ：1.2vw
- タブレット：2.8vw
- 電話：3.6vw
- テキスト文字の間隔：0.2vw
- テキスト行の高さ：1.8em
見出し2テキスト
段落テキストのスタイルを設定した後、H2テキストもスタイル設定します。
- 見出し：H2
- H2フォントの太さ：Doppio One
- H2テキストの配置：中央
- H2テキストの色：非常に濃い灰色＃3d3d3d
- H2テキストサイズ：
- デスクトップ：4.4vw
- タブレット：5.9vw
- 電話：6.9vw
間隔
そして、いくつかのトップパディングを追加します。
- トップパディング：212px
仕切りモジュールを追加
可視性
テキストモジュールの下に、仕切りモジュールを追加し、可視性を「はい」に設定します。
- 可視性：はい
ライン
次に仕切りの色を変更します。
- 線の色：ダークグレー＃545454
サイジング
次に、仕切りのサイズを調整して、小さく見えるようにします。
- 仕切りの重量：4px
- 幅：9％
- モジュールの配置：中央
間隔
負のトップマージンも追加します。
- トップマージン：
- デスクトップ：-40px
- タブレット+電話：-15px
新しい行を追加
カラム構造
3つの同じサイズの列を持つ新しい行を追加して続行します。 これがCTAカラム設計の基礎になります。
バックグラウンド
モジュールを追加する前に、行設定の背景にグラデーションを追加します。
- 背景：グラデーション
- 背景色のグラデーション1：白#ffffff
- 背景色のグラデーション2：透明
- グラデーションタイプ：ラジアル
- ラジアルディレクションセンター
- 開始位置：42％
- 終了位置：50％
サイジング
次に、行のサイズを調整します。
- 幅：100％
- 最大幅：100％
間隔
次に間隔設定に移動し、いくつかのカスタムパディング値を追加します。
- トップパディング：22vw
- ボトムパディング：10vw
- 左右のパディング：10vw
列1の設定
バックグラウンド
列1の設定を開いて続行し、グラデーションの背景を追加します。
- 背景：グラデーション
- 背景グラデーションカラー1：青＃2a4eed
- 背景のグラデーションカラー2：ライトブルー＃91f5f7
- グラデーションタイプ：線形
- グラデーション方向：38度
- 開始位置：23％
国境
次に、境界線の設定で列の角を丸くします。
- 丸みを帯びたコーナー：すべてのコーナーで2vw
ボックスシャドウ
微妙なボックスシャドウも追加します。
- ボックスシャドウ：2番目のオプション
- ボックスシャドウの水平位置：6px
- ボックスシャドウの垂直位置：-10px
- ボックスシャドウブラー強度：50px
オーバーフロー
列のオーバーフローも表示されていることを確認してください。
- 水平および垂直オーバーフロー：目に見える
列2の設定
バックグラウンド
2番目の列に移動し、次のグラデーションの背景を追加します。
- 背景：グラデーション
- 背景グラデーションカラー1：＃1ba038
- 背景のグラデーションカラー2：＃c6f727
- グラデーションタイプ：線形
- グラデーション方向：38度
- 開始位置：23％
国境
列にも境界線の半径を追加します。
- 丸みを帯びたコーナー：4つのコーナーすべてに2vw
ボックスシャドウ
微妙なボックスシャドウと一緒に。
- ボックスシャドウ：2番目のオプション
- ボックスシャドウの水平位置：6px
- ボックスシャドウの垂直位置：-10px
- ボックスシャドウブラー強度：50px
変身
この列は他の列より少し高い位置にあります。 この効果を作成するために、列2の変換変換設定を調整します。
- 変換翻訳：
- デスクトップ：-8vw、y軸
- タブレット+電話：30vw、y軸
オーバーフロー
この列のオーバーフローも表示します。
- 水平および垂直オーバーフロー：目に見える
列3の設定
バックグラウンド
次の最後のコラムへ！ グラデーションの背景を追加します。
- 背景：グラデーション
- 背景グラデーションカラー1：＃f0562c
- 背景のグラデーションカラー2：＃f1a526
- グラデーションタイプ：線形
- グラデーション方向：38度
- 開始位置：23％
国境
[デザイン]タブに移動し、各コーナーに境界線の半径を追加します。
- 丸みを帯びたコーナー：すべてのコーナーで2vw。
ボックスシャドウ
ボックスシャドウも追加します。
- ボックスシャドウ：2番目のオプション
- ボックスシャドウの水平位置：6px
- ボックスシャドウの垂直位置：-10px
- ボックスシャドウブラー強度：50px
変身
画面サイズが小さい場合は、カスタム変換変換値を使用して列を再配置する必要があります。
- 変換翻訳：
- タブレット+電話：60vw
オーバーフロー
最後に、オーバーフロー設定を調整します。
- 水平および垂直オーバーフロー：目に見える
画像モジュールの追加
切り抜いた半透明の画像をアップロードする
すべての列設定が完了したら、モジュールを追加します。 画像モジュールを列1に追加し、選択した半透明の画像をアップロードします。 使用した画像は、この投稿の冒頭でダウンロードできたzipフォルダーにあります。
サイジング
モジュールを全幅にします。
- 全幅を強制：はい
間隔
次に、カスタムマージンとパディング値を追加します。
- トップマージン：
- デスクトップ：-11vw
- タブレット+電話：-24vw
- 左右のパディング：
- デスクトップ：5vw
- タブレット+電話：20vw
ホバーでスケールを変換
変換設定の変換スケールオプションを使用して、画像に微妙なホバー効果を追加しています。
- ホバー時の変換スケール：両方の軸で120％。
Zインデックス
画像が列の上に表示されるようにするために、[詳細設定]タブのzインデックス値を増やします。
- Zインデックス：1
画像モジュールの複製とドラッグ
次に、イメージモジュールのクローンを2回作成し、残りの2つの列に複製を配置します。 このプロセスは、ワイヤーフレームビューで簡単です。
- まず、イメージモジュールを2回複製します
- 次に、新しいイメージモジュールを列2と3にドラッグします
- 別の画像をアップロードする
テキストモジュールを追加する
H3コンテンツを追加する
列1の画像の下に、テキストモジュールを追加し、選択したH3コンテンツを挿入します。
見出し3テキスト
デザインタブに移動し、H3テキスト設定のスタイルを設定します。
- 見出しテキスト：H3
- H3フォント：Doppio One
- H3フォントの太さ：太字
- H3アライメント：センター
- H3テキストの色：白#ffffff
- H3テキストサイズ：
- デスクトップ：1.8vw
- タブレット：5vw
- 電話：6vw
テキストモジュールの複製とドラッグ
テキストモジュールのクローンを2回作成し、残りの2つの列に複製を配置します。
- まず、テキストモジュールを2回複製します
- 次に、それらを2列目と3列目の画像モジュールの下にドラッグします。
- 新しいテキストモジュールごとにコンテンツを変更します
テキストモジュールを追加する
コンテンツを追加する
タイトルモジュールの下に、新しいテキストモジュールを追加します。 コンテンツボックスに段落コンテンツを追加します。
文章
次に、テキストのスタイルを次のように設定します。
- テキストフォント：Open Sans
- テキストの色：白#ffffff
- 文字サイズ：
- デスクトップ：0.6vw
- タブレット：2vw
- 電話：2.8vw
- テキスト行の高さ：2.2em
間隔
テキストを中央に配置するには、モジュールの間隔を次のように調整します。
- 下マージン：
- デスクトップ：5vw
- タブレット+電話：10vw
- 左右のパディング
- デスクトップ：5vw
- タブレット+電話：14vw
テキストモジュールの複製とドラッグ
テキストモジュールのクローンを2回作成し、複製を残りの2つの列にドラッグします。
- まず、テキストモジュールを2回複製します
- 次に、重複を2列目と3列目に配置します
- 複製ごとにコンテンツを変更する
ボタンモジュールの追加
コンテンツを追加する
最後のモジュールへ！ 選択したコピーを使用して、ボタンモジュールを列1に追加します。
リンクを追加
モジュールのリンクオプションにリンクを挿入します。
配置
次に、ボタンモジュールを位置合わせします。
- 配置：中央
ボタンのスタイル
次に、ボタンのスタイルを次のように設定します。
- ボタンのテキストサイズ：
- デスクトップ：1vw
- タブレット：2vw
- 電話：3vw
- ボタンのテキストの色：明るい青＃2a4eed
- ボタンの背景色：白#ffffff
- ボタンの境界半径：50vw
- ボタンフォント：Doppio One
- ボタンのフォントの太さ：太字
- ボタンアイコンの色：ブライトブルー＃2a4eed
間隔
間隔の設定にカスタムの余白とパディングの値を追加して、ボタンの形を整え、重なりを作成します。
- 下マージン：
- デスクトップ：-1.5vw
- タブレット：-4vw
- 電話：-6vw
- 上部と下部のパディング：
- デスクトップ：1vw
- タブレット+電話：3vw
- 左右のパディング
- デスクトップ：4vw
- タブレット+電話：10vw
ボックスシャドウ
最後になりましたが、ボタンに微妙なボックスシャドウを追加します。
- ボックスシャドウ：最初のオプション
- ボックスシャドウの水平位置：0px
- ボックスシャドウの垂直位置：2px
- ボックスシャドウブラー強度：50px
ボタンモジュールの複製とドラッグ
前のモジュールと同様に、ボタンのクローンを2回作成し、行の残りの2つの列に複製を配置します。
- ボタンモジュールのクローンを2回作成する
- 重複を2列目と3列目に配置します
ボタン2のテキストとアイコンの色
列2のボタンモジュールのボタンとアイコンの色を変更します。
- ボタンのテキストの色：緑＃1ba038
- アイコンの色：＃1ba038
ボタン3テキストとアイコンの色
最後の列のボタンでも同じことを行うと、完了です。
- ボタンのテキストの色：オレンジ＃f0562c
- アイコンの色：＃f0562c
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
それはラップです
この投稿では、半透明の画像を使用して美しいCTA列のデザインを作成する方法を紹介しました。 Divi列のオーバーフロー設定を使用して、画像とボタンをシームレスにオーバーラップさせました。 次のDiviプロジェクトでこのデザインを使用してみて、コメントセクションでそれがどのように行われるかをお知らせください。