今年、ライフタイムメンバーおよびブラックフライデーの新規顧客として提供する独占的なランディングページの1つは、見事なUIキットランディングページです。 このレイアウトには、Diviの最高の組み込みデザインの組み合わせと、Webサイトを次のレベルに引き上げる高品質のモックアップが含まれています。 この投稿では、それを手に入れて効果的に使用する方法を紹介します。

現在生涯のお客様である場合、またはブラックフライデーセール中に新しいアカウントを購入またはアップグレードした場合は、このレイアウトを今すぐダウンロードできます。

独占的なブラックフライデーUIキットのランディングページを入手する

このユースケースに入る前に、新しいエレガントテーマメンバーになるか、既存のアカウントをアップグレードするか、すでに私たちの生涯メンバーになることで取得できる、排他的なブラックフライデーUIキットランディングページに手を置く必要があります。 あなたが本当にすでに生涯会員であるならば、あなたは私たちの会員エリアにログインして、ここで私たちの排他的なランディングページのすべてをダウンロードすることができます。 他のすべての人は、チュートリアルの残りの部分を実行する前に、下のボタンを使用して購入またはアップグレードする必要があります。

それが消える前に取引を主張してください！

Diviの列構造を使用して製品と機能を美しくリストする

この投稿の残りの部分では、ブラックフライデーの取引を利用したか、すでに生涯メンバーであり、ブラックフライデーのUIキットのランディングページにアクセスできることを前提としています。

メンバーエリアから新しいUIキットランディングページをダウンロードしたら、以下のビデオを見て、セットアップがいかに簡単かを確認できます。 また、このチュートリアルに従って、サイトをさらにカスタマイズできるようにすることをお勧めします。

このユースケースの投稿では、Diviの新しい列構造を使用して、機能や製品を驚くほど一覧表示する方法を紹介します。 私たちが扱うデザインは、UIキットのランディングページと見栄えがよく、ページ上のスペースを効果的かつ美しい方法で使用することができます。

プレビュー

さまざまな画面サイズでの結果を見てみましょう。

ホバーとアニメーション

また、さまざまなデザイン要素に微妙なホバーとアニメーションの設定を追加します。 これにより、次の相互作用が得られます。

始めましょう！

UIキットのランディングページを使用して新しいページを追加する

最初に行う必要があるのは、ダウンロードしてアップロードしたUIキットのランディングページを使用して新しいページを作成することです。 その方法がわからない場合は、この投稿の前の部分にある、ステップバイステップでガイドするビデオを確認してください。

ページ上の機能セクションを見つける

レイアウトをアップロードしたら、ページの機能セクションが表示されるまで下にスクロールします。

既存の行を削除する

このセクションにある最後の2行を削除します。 これらの行の内容を機能/製品リストに置き換えます。

行を含む行の下に新しい行を追加します

カラム構造

次の列構造を使用して、セクションに新しい行を追加します。

サイジング

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

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：はい
• 列の高さを等しくする：はい

間隔

このデザインがすべての画面サイズで見栄えがするように、さまざまなカスタムマージンとパディング値を使用します。

• トップマージン：100px
• 下マージン：100px
• トップパディング：87px
• 列1の上部パディング：100px（デスクトップ）、0px（タブレットと電話）
• 列2の上部パディング：100px（デスクトップ）、0px（タブレットと電話）
• 列3の上部パディング：100px（デスクトップ）。 0px（タブレットと電話）
• 列3の下部パディング：50px（タブレットと電話）
• 列4の左パディング：10px（電話のみ）
• 列4の右パディング：10px
• 列5の左パディング：5px（デスクトップとタブレット）、10px（電話）
• 列5の右パディング：5px（デスクトップとタブレット）、10px（電話）
• 列6左パディング：10px
• 列6左パディング：10px（電話のみ）

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

コンテンツを追加する

モジュールの追加を開始する時が来ました！ テキストモジュールを番号付きの最初の列に追加します。

デフォルトの背景色

このモジュールに背景色を追加します。

• 背景色：＃0f0f0f

背景色にカーソルを合わせる

そして、ホバーで背景色を変更します。

• 背景色：＃ff5400

背景画像

メディアライブラリにあるアイコン画像の1つを背景に追加することもできます。

• 背景画像サイズ：実際のサイズ
• 背景画像の位置：中央
• 背景画像の繰り返し：繰り返しなし

デフォルトのテキスト設定

テキスト設定を変更して続行します。

• テキストフォント：Muli
• テキストフォントの太さ：軽い
• テキストの色：#ffffff
• テキストサイズ：80px（デスクトップと電話）、40px（電話）
• テキスト行の高さ：1em

• テキストの影の色：## ffffff
• テキストの向き：左

デフォルトの間隔

カスタムパディングを追加して、正方形を作成します。

• トップパディング：200px
• 左パディング：50px（電話のみ）
• 右パディング：50px（電話のみ）

ホバー間隔

ホバー時に間隔設定を変更します。

• 左パディング：100px

国境

UIキットのランディングページに合わせて、微妙な丸みを帯びた角も追加しています。 コーナーのそれぞれに「20px」を追加します。

ボックスシャドウ

次のボックスシャドウを使用して、モジュールにも色を追加します。

• ボックスシャドウの水平位置：20px
• ボックスシャドウの垂直位置：-50px
• ボックスシャドウスプレッド強度：17px
• 影の色：＃593aff

アニメーション

最後になりましたが、テキストモジュールに非常に微妙なスライドアニメーションを追加します。

• アニメーションスタイル：スライド
• アニメーションの方向性：右
• アニメーション強度：3％

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

可視性

次に必要なモジュールはディバイダーモジュールです。 先に進み、2番目の列に1つ追加します。 [仕切りを表示]オプションが有効になっていることを確認してください。

• 仕切りを表示：はい

色

次に仕切りの色を変更します。

• 色：#ffffff

間隔

最初の列のテキストモジュールをオーバーラップさせるために、さまざまな画面サイズに応じて調整するいくつかのカスタムマージン値を使用します。

• トップマージン：30px
• 左マージン：-200px（デスクトップとタブレット）、0px（電話）
• 右マージン：200px（デスクトップとタブレット）、0px（電話）

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

コンテンツを追加する

次のコラムへ！ ここで、最初に必要なモジュールは、タイトルのテキストモジュールです。 先に進み、最初の機能または製品のタイトルを追加します。

見出しテキストの設定

次に、見出しのテキスト設定に移動し、UIキットレイアウトパックに一致するようにいくつかの変更を加えます。

• 見出し3フォント：Muli
• 見出し3フォントの太さ：軽い
• 見出し3のテキストの色：#ffffff
• 見出し3テキストサイズ：30px（デスクトップとタブレット）、18px（電話）

間隔

このモジュールを左に押すために、いくつかのカスタム間隔値を使用します。

• トップマージン：20px
• 下マージン：20px
• 左マージン：-180px（デスクトップとタブレット）、0px（電話）
• 左パディング：20px（デスクトップとタブレット）、50px（電話）
• 右パディング：20px（デスクトップとタブレット）、50px（電話）

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

コンテンツを追加する

次に必要なモジュールは、説明テキストモジュールです。 先に進み、機能または製品の説明を入力します。

テキスト設定

次にテキスト設定を変更します。

• テキストの色：rgba（255,255,255,0.5）
• テキスト行の高さ：2.2em

間隔

いくつかのカスタム間隔値を使用して、このモジュールも左に押します。

• 左マージン：-180px（デスクトップとタブレット）、0px（電話）
• 左パディング：20px（デスクトップとタブレット）、50px（電話）
• 右パディング：20px（デスクトップとタブレット）、50px（電話）

3列目にボタンモジュールのクローンを作成して配置

3列目に必要な最後のモジュールはボタンモジュールです。 時間を節約するために、ページ上の既存のボタンのクローンを作成し、追加した他の2つのモジュールのすぐ下に複製を配置します。

コンテンツの変更

ボタンモジュールの内容を変更します。

間隔を変更する

このモジュールも左に押しています。 お気づきのとおり、列3のすべてのモジュールが2列のスペースを占めています。 この種のアプローチにより、必要な結果に一致する別の列構造を作成できます。

• トップマージン：50px
• 左マージン：-160px（デスクトップとタブレット）、50px（電話）
• 右マージン：50px（電話のみ）

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

画像をアップロード

次のコラムへ！ 4列目に画像モジュールを追加し、選択した画像をアップロードします。 この例では、500×500の画像サイズを使用しましたが、他の画像サイズも自由に試してみてください。

ボックスシャドウ

このモジュールに微妙なボックスシャドウを追加します。

• 影の色：#ffffff

アニメーション

さらに、画像にスライドアニメーションを追加します。

• アニメーションスタイル：スライド
• アニメーションの方向：左
• アニメーションの遅延：100ms
• アニメーション強度：3％

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

コンテンツを追加する

画像モジュールのすぐ下に、選択したコンテンツを含むタイトルのテキストモジュールを追加します。

デフォルトの背景色

このモジュールの背景色を変更します。

• 背景色：＃0f0f0f

背景色にカーソルを合わせる

そして、ホバー時に別の背景色を使用します。

• 背景色：＃593aff

見出しテキストの設定

UIキットのランディングページに一致するように見出しテキストの設定を変更して続行します。

• 見出し4フォント：Muli
• 見出し4フォントの太さ：軽い
• 見出し4テキストの色：#ffffff
• 見出し4テキストサイズ：23px（デスクトップとタブレット）、18px（電話）

デフォルトの間隔

次に、いくつかのカスタム間隔値を追加します。

• トップパディング：50px
• 左パディング：30px
• 右パディング：30px

ホバー間隔

そして、ホバー時にこれらの値を変更して、適切なトランジションを作成します。

• ボトムマージン：50px
• トップパディング：20px
• ボトムパディング：20px

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

コンテンツを追加する

4列目に必要な2番目で最後のモジュールは、説明テキストモジュールです。 選択したコンテンツを入力します。

背景色

次に背景色を変更します。

• 背景色：＃0f0f0f

テキスト設定

そして、テキスト設定を変更します。

• テキストの色：rgba（255,255,255,0.5）
• テキスト行の高さ：2.2em

間隔

すっきりとしたルックアンドフィールを作成するには、このモジュールにカスタムパディングを追加します。

• ボトムパディング：50px
• 左パディング：30px
• 右パディング：30px

国境

大事なことを言い忘れましたが、モジュールの下の2つの角に「20px」を追加します。

列4のすべてのモジュールのクローンを作成し、残りの列に2回配置します

画像とコンテンツの変更

列4に必要なすべてのモジュールが揃ったので、先に進んでこれらすべてのモジュールのクローンを2回作成し、残りの2つの列に複製を配置できます。 コンテンツと画像を変更して、多様性を生み出します。

行を必要な回数だけクローンします（リストアイテムの数に応じて）

最初のリストアイテムが完成しました！ これで、紹介したい機能や製品の数に応じて、この行を何度でも複製できます。

クローンの内容を変更する

重複するものごとに、コンテンツを変更する必要があります。

色の検索と置換

Diviの検索と置換機能を使用して、リストアイテムのカラーパレットをすばやく変更することもできます。

ホバーの背景色を変更する

カラーパレットを変更したら、数値テキストモジュールのホバー背景色も変更するようにしてください。

• 背景色：＃593aff

背景画像を変更する

大事なことを言い忘れましたが、表示を許可している機能や製品に応じて、リストから別のアイコンを選択することもできます。

最終的な考え

このユースケースは、ブラックフライデーの顧客および生涯メンバーと6つの無料限定版ランディングページを共有するブラックフライデーディールの一部です。 これらの日に私たちの権限を与えられたコミュニティに参加し、メンバーになることによって、あなたは得るでしょう：

• すべてが25％オフ
• 6つのランディングページすべてを無料で
• 私たちの素晴らしいテーマとプラグインへのアクセス
• ボーナス賞

チャンスをつかんで、今日メンバーになりましょう！