Diviで列を価格プランに変える
公開: 2019-08-01Diviの新しい列オプションは、ワークフローに多くの新しい設計の可能性をもたらしました。 これらは、CSSコードの1行に触れることなく、複数のモジュールを統合するのに役立ちます。 この投稿では、Diviの組み込みオプションのみを使用して列を料金プランに変換します。 また、列ホバー変換オプションを試して、いくつかの素晴らしいホバー効果を実現します。 JSONも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
コラム料金プランのレイアウトを無料でダウンロード
無料の列価格プランのレイアウトを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
再作成を始めましょう！
私たちのYoutubeチャンネルを購読する
新しいセクションを追加
グラデーションの背景
作業中のページに新しい通常のセクションを追加し、セクション設定を開きます。 背景設定に移動し、線形グラデーションの背景を追加します。
- 色1：#ededed
- 色2：#ffffff
- 開始位置：30％
- 終了位置：30％
間隔
また、セクションに上部と下部のパディングを追加しています。
- トップパディング：200px
- ボトムパディング：200px
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、[詳細設定]タブに移動して、それに応じてサイズ設定を変更します。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 幅：80％（デスクトップとタブレット）、90％（電話）
- 最大幅：1400px（デスクトップ）、90％（タブレット）、100％（電話）
列1の設定
また、最初の列設定から始めて、列設定を変更する必要があります。 列1の設定を開きます。
グラデーションの背景
次のグラデーションの背景を列1に適用します。
- 色1：＃f7f7f7
- 色2：#ffffff
- グラデーションタイプ：ラジアル
- 半径方向：下
- 開始位置：31％
- 終了位置：31％
国境
列に「20px」の境界線半径も追加します。
ボックスシャドウ
また、ページに奥行きを持たせるために、微妙なボックスシャドウも追加します。
- ボックスシャドウブラー強度：80px
- 影の色：rgba（0,0,0,0.11）
デフォルトの変換スケール
この投稿のプレビューでわかるように、列はわずかに変換されています。 変換設定に移動し、変換スケールオプションがデフォルト状態で「100％」のままであることを確認します。
- 下：100％
- 右：100％
ホバー変換スケール
ホバー時に変換スケール値を変更します。
- 下：120％
- 右：120％
デフォルトの変換変換
また、変換変換設定を使用して、デスクトップの列を少し右に押しています。 次の入力を追加します。
- 下：34px（デスクトップ）、0px（タブレットと電話）
- 右：0px
ホバー変換翻訳
ホバー時に変換変換値を通常に戻します。
- 下：0px
- 右：0px
デフォルトの変換回転
変換回転設定に移動し、左側に次の値を追加します。
- 左：352度（デスクトップ）、0度（タブレットと電話）
ホバー変換回転
ホバー時に値を「0deg」に戻します。
- 左：0度
オーバーフロー
この投稿の後半で、列の下部にボタンを追加します。 そのボタンは、列の下の境界線と重なります。 これを可能にするには、列のオーバーフローを表示する必要があります。
- 水平方向のオーバーフロー：目に見える
- 垂直オーバーフロー：目に見える
デフォルトのZインデックス
次に、さまざまな画面サイズで列のzインデックスを変更します。 これにより、スタッキングを順番に保つことができます。
- Zインデックス：9（デスクトップ）、11（タブレットと電話）
ホバーZインデックス
ホバーすると、列が他の列の上に表示されるようにします。 これを実現するために、ホバー時にzインデックスを増やします。
- Zインデックス：11
トランジション
また、トランジション設定のトランジション期間を長くすることで、スムーズなトランジションを作成しています。
- 移行時間：500ms
列2の設定
2列目へ！ 先に進み、列の設定を開きます。
グラデーションの背景
次のグラデーションの背景設定を適用します。
- 色1：＃fff200
- 色2：#ffffff
- グラデーションタイプ：ラジアル
- 半径方向：下
- 開始位置：31％
- 終了位置：31％
国境
次に、境界半径の「20px」を追加します。
ボックスシャドウ
微妙なボックスシャドウと一緒に。
- ボックスシャドウブラー強度：50px
- 影の色：rgba（0,0,0,0.14）
デフォルトの変換スケール
2番目の列は、注目の料金プランです。 これが見過ごされないようにするために、変換スケール設定で列のサイズを大きくします。
- 下：112％（デスクトップ）、100％（タブレットと電話）
- 右：112％（デスクトップ）、100％（タブレットと電話）
ホバー変換スケール
ホバー時に変換スケール値を変更します。
- 下：120％
- 右：120％
オーバーフロー
次に、水平オーバーフローと垂直オーバーフローを変更します。
- 水平方向のオーバーフロー：目に見える
- 垂直オーバーフロー：目に見える
デフォルトのZインデックス
次に、可視性の設定に移動し、列のzインデックスを増やします。
- Zインデックス：10
ホバーZインデックス
ホバー時にzインデックスを変更します。
- Zインデックス：12
トランジション
そして、トランジション設定でトランジション期間を増やします。
- 移行時間：500ms
列3の設定
最後の3列目へ！ 列の設定を開きます。
グラデーションの背景
背景設定に移動し、次のグラデーション背景を追加します。
- 色1：＃f7f7f7
- 色2：#ffffff
- グラデーションタイプ：ラジアル
- 半径方向：下
- 開始位置：31％
- 終了位置：31％
国境
次に「20px」の境界線半径を追加します。
ボックスシャドウ
微妙なボックスシャドウと一緒に。
- ボックスシャドウブラー強度：80px
- 影の色：rgba（0,0,0,0.11）
デフォルトの変換スケール
列を変換する時が来ました！ デフォルトの変換スケール値が「100％」のままであることを確認してください。
- 下：100％
- 右：100％
ホバー変換スケール
ホバー時にこれらの値を変更します。
- 下：120％
- 右：120％
デフォルトの変換変換
また、いくつかのカスタム変換変換値を適用することにより、デスクトップの左側に列をプッシュしています。
- 下：-34px（デスクトップ）、0px（タブレットと電話）
- 右：0px
ホバー変換翻訳
ホバー時に値を「0px」に戻します。
- 下：0px
- 右：0px
デフォルトの変換回転
デフォルト状態で列を回転させて続行します。
- 左：8度（デスクトップ）、0度（タブレットと電話）
ホバー変換回転
ホバー時に左変換の回転値を「0px」に戻します。
- 左：0度
オーバーフロー
次にオーバーフローが表示されていることを確認します。
- 水平方向のオーバーフロー：目に見える
- 垂直オーバーフロー：目に見える
デフォルトのZインデックス
次に、可視性の設定に移動し、デフォルトのzインデックスが9であることを確認します。
- Zインデックス：9
ホバーZインデックス
ホバー時にzインデックスを変更します。
- Zインデックス：11
トランジション
そして、トランジション設定でトランジション期間を増やします。
- 移行時間：500ms
列1に宣伝文モジュールを追加する
表題を加える
最初の列にモジュールを追加し始めましょう！ 新しい宣伝文モジュールを追加し、タイトルを挿入します。
アイコンを選択
次にアイコンを選択します。
アイコン設定
[デザイン]タブに移動し、それに応じてアイコン設定を変更します。
- アイコンの色：＃000000
- アイコンの配置：上
- アイコンのフォントサイズを使用：はい
- アイコンフォントサイズ：50px
タイトル設定
次に、タイトルテキストの設定を変更します。
- タイトルフォント：ポピンズ
- タイトルテキストの配置：中央
- タイトルテキストの色：＃000000
- タイトルテキストサイズ：27px
間隔
また、トップマージンも追加します。
- トップマージン：80px
Dividerモジュールを列1に追加します
可視性
仕切りモジュールである2番目のモジュールに移ります。 [仕切りを表示]オプションが有効になっていることを確認してください。
- 仕切りを表示：はい
ライン
デザインタブに移動し、仕切りの色を黒に変更します。
- 線の色：＃000000
サイジング
サイズ設定も変更します。
- 仕切りの重量：6px
- 幅：14％
- モジュールの配置：中央
- 高さ：0px
間隔
最後に、トップマージンを追加します。
- トップマージン：50px
テキストモジュール＃1を列1に追加します
コンテンツを追加する
Divider Moduleのすぐ下にテキストモジュールを追加して続行し、選択したコンテンツを挿入します。
テキスト設定
[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- テキストフォント：ポピンズ
- テキストフォントの太さ：軽い
- テキストの配置：中央
- テキストの色：＃4f4f4f
- テキスト行の高さ：2.3em
間隔
いくつかのカスタムマージンとパディング値も追加します。
- トップマージン：50px
- トップパディング：10px
- ボトムパディング：10px
テキストモジュール＃2を列1に追加します
コンテンツを追加する
前のテキストモジュールのすぐ下に、別のテキストモジュールが必要です。 お好みのコンテンツを入力してください。
テキスト設定
[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- テキストフォント：ポピンズ
- テキストフォントの太さ：重い
- テキストの配置：中央
- テキストの色：＃000000
- テキストサイズ：47px
- テキスト行の高さ：1em
間隔
カスタムの上下マージンも追加します。
- トップマージン：50px
- 下マージン：80px
ボタンモジュールを列1に追加
コピーを追加
列1で必要な次の最後のモジュールは、ボタンモジュールです。 お好みのコピーを入力してください。
配置
[デザイン]タブに移動し、ボタンの配置を中央に変更します。
- ボタンの配置：中央
ボタンの設定
ボタンのスタイルも設定します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：17px
- ボタンのテキストの色：＃000000
- ボタンの背景色：#FFFFFF
- ボタンの境界線の幅：0px
- ボタンの境界線半径：100px
- ボタンフォント：ポピン
- ボタンのフォントの太さ：太字
間隔
また、いくつかのカスタムマージンとパディング値を追加します。
- トップマージン：50px
- 下マージン：-40px
- トップパディング：23px
- ボトムパディング：23px
- 左パディング：70px
- 右パディング：70px
ボックスシャドウ
そして、ボタンモジュールに微妙なボックスシャドウを与えることでそれを締めくくります。
- ボックスシャドウブラー強度：50px
- 影の色：rgba（0,0,0,0.3）
すべてのモジュールのクローンを作成し、残りの列に複製を配置します
列1のすべてのモジュールを完了したら、それらを2回クローンして、行の残りの2つの列に複製を配置できます。
宣伝文のアイコンとタイトルを変更する
複製ごとに宣伝文のアイコンとタイトルを変更してください。
テキストモジュールの内容を変更する
テキストモジュールのコンテンツと一緒に。
変更ボタン＃2
最後になりましたが、列2のボタンを開き、ボタンの設定を変更します。 この手順を完了すると、完了です。
- ボタンのテキストの色：#FFFFFF
- ボタンの背景色：＃8300E9
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Diviの新しい列オプションを使用して列を料金プランに変換する方法を紹介しました。 1行のCSSコードに触れることなく、料金プランをカスタマイズできます。 このチュートリアルでは、新しい列オプションがさまざまなモジュールを美しいデザインに統合するのにどのように役立つかを示します。 ご質問やご提案がございましたら、下のコメント欄にご遠慮なくお寄せください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。