Diviの変換オプションを使用したポラロイドヒーローセクションの作成

クリエイティブなヒーローセクションは、ウェブサイトを印象的で特別なものにします。 このポラロイドヒーローセクションのデザインは、ヴィンテージの放浪癖の感覚を呼び起こします。 列変換オプションを使用することにより、ポラロイドをテーブルに広げたように、好きなように配置できます。

このポラロイドヒーローセクションのデザインを、独自の正方形の画像で再現できます。 JSONファイルも無料でダウンロードできます！

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

プレビュー

デスクトップ

モバイル

ポラロイドヒーローセクションデザインを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

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

再作成を始めましょう

新しいセクションを追加

作業中のページに新しいセクションを追加することから始めます。

ボトムディバイダー

ミントグリーンの下部仕切りを追加します。

• 仕切りの配置：下
• ディバイダースタイル：＃12
• 仕切りの色：ミントグリーン＃d2f2d0
• 仕切りの高さ：23vw

間隔

セクションの間隔を調整します。

• トップマージン：7vw
• 下マージン：0px
• 上下のパディング：0px

新しい行を追加

カラム構造

セクションに新しい行を追加して続行します。 次の列構造を選択します。

サイジング

次に、行のサイズを調整します。

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

間隔

次に、間隔設定で上下のパディングを調整します。

• 上下のパディング：0px

画面

行のメイン要素にCSSコードを1行追加して、小さい画面サイズで列を並べて表示します。

• カスタムCSS–メイン要素：表示：フレックス;

display: flex;

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

正方形の画像をアップロード

画像モジュールを列1に追加し、正方形の画像をアップロードします。

配置

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

• モジュールの配置：中央

サイジング

次に、モジュールを全幅にします。

• 全幅を強制：はい

列1にテキストモジュールを追加

コンテンツを追加する

テキストモジュールを追加し、いくつかのコンテンツを挿入します。 「ポラロイド」という言葉を使います。

文章

テキストフォントのスタイルを設定します。

• テキストフォント：Advent Pro
• テキストの配置：中央
• テキストの色：非常に濃い灰色＃474747
• 文字サイズ：
  • デスクトップ：1vw
  • タブレット+電話：2vw
• テキスト文字の間隔：0.1vw
• テキスト行の高さ：1.8em

サイジング

サイズ設定の幅には「100％」を使用します。

• 幅：100％

間隔

次に、間隔を調整します。

• トップマージン：1vw

モジュールを2回クローンし、残りの列に複製を配置します

複製の画像とコピーを変更する

複製された各画像モジュールの画像を変更します。 デザインで必要な場合は、テキストの内容も変更してください。

列1の設定

バックグラウンド

行の列1の設定を開いて続行します。 背景を白に設定して、ポラロイド効果を作成します。

• 背景色：白#ffffff

間隔

下のパディングを追加して、より広いポラロイドの下の境界線を作成します。

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

国境

境界線を追加して、ポラロイドビジュアルを完成させます。

• 4辺の境界線の幅：1vw
• 上部の境界線の幅：2vw
• 右ボーダー幅：2vw
• 下の境界線の幅：1vw
• 左ボーダー幅：2vw
• ボーダーカラー：ホワイト#ffffff

ボックスシャドウ

微妙なボックスシャドウを追加して、列1の設定を完了します。

• ボックスシャドウ：＃1

列1の設定を拡張する

列設定を拡張するには、[スタイルの拡張]オプションを使用します。

• メインの行設定ウィンドウに戻り、最初の列タブの右側にある3つのドットをクリックします。
• 「アイテムスタイルの拡張」を選択し、「この行全体で」を選択します。

列1の変換スタイル

次に、最初の列の変換設定を調整します。

• 変換変換：x軸-11vw、y軸-6vw
• 変換回転：341度、最初のオプション

列2変換スタイル

次に、2番目の列の変換設定を調整します。

• 変換変換：x軸-22w、y軸0vw
• 変換回転：10度、最初のオプション

列3変換スタイル

最後に、列3の変換設定を調整します。

• 変換スケール：両方の軸の68％
• 変換変換：x軸-46w、y軸12vw
• 変換回転：31度、最初のオプション

新しいセクションを追加

バックグラウンド

新しいセクションを追加し、そのセクションにミントグリーンの背景を適用します。

• 背景色：ミントグリーン＃d2f2d0

ボトムディバイダー

セクションに下部の仕切りを付けます。

• 仕切りの配置：下
• ディバイダースタイル：＃12
• 仕切りの色：白#ffffff
• 仕切りの高さ：23vw

間隔

デフォルトの上部パディングを削除します。

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

新しい行を追加

カラム構造

3列の新しい行を追加して続行します。

行スタイルをコピーして貼り付ける

ワイヤーフレームビューを使用して、最初のセクションから行スタイルをコピーして貼り付けます

• まず、最初のセクション内の行メニューの右側にある3つのドットをクリックします。 「行スタイルのコピー」を選択します。
• 次に、2番目のセクションの行メニューの右側にある3つのドットをクリックします。 「行スタイルの貼り付け」を選択します。

列設定のコピーと貼り付け

ここで、最初の行の列設定をコピーして、新しい行の列1と2に貼り付けます。

• まず、最初の行の行設定を開きます。
• 次に、最初の列タブの右側にある3つのドットをクリックして、[アイテムスタイルのコピー]を選択します。
• 次に、新しい行まで下にスクロールして、[設定]タブを開きます。
• 最後に、最初の列の右側にある3つのドットをクリックして、[アイテムスタイルの貼り付け]を選択します。

列1の変換スタイル

次に、列1の変換スタイルを調整します。

• 変換スケール：両方の軸の75％
• 変換変換：x軸-8w、y軸-14vw
• 回転の変換：35度の最初のオプション

列2変換スタイル

次に、列2の変換スタイルを変更します。

• 変換変換：x軸-17w、y軸2vw
• 変換回転：346度第1オプション

画像モジュールの追加

画像モジュールの複製とドラッグ

次に、ワイヤーフレームビューに戻り、2つの画像モジュールを複製してドラッグします。

• まず、最初のセクションの最初の画像モジュールを2回複製します。
• 次に、それらを2番目のセクションの1番目と2番目の列にドラッグします。
• 各モジュールの画像を新しい正方形の画像に変更します。

テキストモジュールを追加する

テキストモジュールの複製とドラッグ

画像の後、テキストモジュールで同じことを行います。 最初のセクションから複製し、2番目のセクションにドラッグします。

• ワイヤフレームビューで、最初のセクションの最初の列のテキストモジュールを2回複製します。
• 次に、新しいテキストモジュールを2番目のセクションの1列目と2列目にドラッグします。
• コンテンツを変更したい場合は、今すぐ変更してください。

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

コンテンツを追加する

3番目の列のプラス記号をクリックして、テキストモジュールを追加します。 H2と段落のコンテンツをいくつか挿入します。

文章

次のようにテキストのスタイルを設定します。

• テキストフォント：Advent Pro
• テキストの配置：中央
• テキストの色：ダークグレー＃848484
• 文字サイズ：
  • デスクトップ：1vw
  • タブレット+電話：1.9vw
• テキスト文字の間隔：0.1vw
• テキスト行の高さ：
  • デスクトップ：1.2em
  • タブレット+電話：1.3em

見出しテキスト

次に、H2テキストのスタイルを設定します。

• 見出し：H2
• H2フォント：Adamina
• H2フォントの太さ：太字
• H2フォントの色：非常に濃い灰色＃444444
• H2フォントサイズ：
  • デスクトップ：2vw
  • タブレット+電話：3vw
• H2文字間隔：4px
• H2ラインの高さ：
  • デスクトップ：1.7vw
  • タブレット+電話：1.5vw

サイジング

次に、サイズを調整します。

• 幅：
  • デスクトップ：60％
  • タブレット：91％
  • 電話番号：100％
• モジュールの配置：中央

間隔

最後に、間隔を調整します。

• トップマージン：-12vw

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

コピーを追加

テキストの下のプラス記号をクリックして、ボタンモジュールを追加します。 ボタンにコピーを追加します。

配置

ボタンの配置を変更します。

• 配置：中央

カスタムボタンスタイル

それに応じてボタンのスタイルを設定します。

• ボタンのテキストサイズ：
  • デスクトップ：1vw
  • タブレット：2.4vw
  • 電話：2.3vw
• ボタンの境界線の幅：0px
• ボタンのテキストの色：黒＃000000
• ボタンの文字間隔：4px
• ボタンフォント：Advent Pro
• ボタンのフォントの太さ：太字

間隔

トップマージン値を適用します。

• トップマージン：2vw

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

可視性

ボタンの下に仕切りを追加し、次のようにスタイルを設定します。

• 可視性：はい

ライン

仕切りに明るい緑色を付けます。

• 線の色：＃55f252

サイジング

仕切りのサイズ設定を変更すれば完了です。

• 仕切りの重量
  • デスクトップ：7px
  • タブレット+電話：4px
• 幅：
  • デスクトップ：10％
  • タブレット+電話：30％
• モジュールの配置：中央

プレビュー

さまざまな画面サイズにわたるポラロイドヒーローセクションの完成したデザインをもう一度見てみましょう。

デスクトップ

モバイル

それはラップです！

この投稿では、Diviの変換オプションを使用してポラロイドヒーローセクションを再作成する方法を紹介しました。 これは、ページのヒーローセクションで複数の画像を紹介するのに最適な方法です。 このデザインがあなた自身のクリエイティブなヒーローセクションのデザインに影響を与えることを願っています！ ご不明な点がございましたら、下のコメント欄にコメントを残してください。