DiviのPersonモジュールでクリエイティブになる5つの方法
公開: 2019-01-03過去数か月間に行われたすべての新しいDivi機能の更新により、Webサイトを設計する際の可能性の範囲が明らかに拡大しました。 このチュートリアルでは、追加のCSSコードを使用せずにDivi PersonModuleを使用してクリエイティブにする5つの異なる方法を作成しました。 この投稿の主な目標は、次のDiviプロジェクトを開始する前に刺激を与えることです。 個人モジュールは、チームメンバーに関する詳細情報を共有したり、紹介文を共有したりするためによく使用されます。 これらの5つの異なる例を使用すると、ページのデザインを向上させる準備が整います。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
私たちのYoutubeチャンネルを購読する
例1を再作成する
新しいセクションを追加
最初の例の作成を始めましょう！ 新規または既存のページを開き、通常のセクションを追加します。
新しい行を追加
カラム構造
セクション設定を変更せずに、次の列構造を使用して新しい行を追加します。
サイジング
行設定を開き、サイズ設定にいくつかの変更を加えます。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
間隔
次に、間隔設定を開き、いくつかのカスタムパディング値を追加します。
- トップパディング：100px（デスクトップ）、80px（タブレットと電話）
- 下部のパディング：100px（デスクトップ）、80px（タブレットと電話）
- 左パディング：100px（デスクトップ）、30px（タブレット）、25px（電話）
- 右パディング：100px（デスクトップ）、30px（タブレット）、25px（電話）
列1に画像モジュールを追加
画像をアップロード
モジュールの追加を開始する時が来ました！ 最初の列に画像モジュールを追加し、選択した正方形の画像をアップロードします。
ボックスシャドウ
[デザイン]タブに移動し、微妙なボックスシャドウを適用して続行します。
フィルタ
フィルタ設定をいじって、画像に効果を追加することもできます。
- 飽和度：40％
- コントラスト：130％
個人モジュール＃1を列2に追加します
コンテンツを追加する
次に必要なモジュールはPersonモジュールです。 先に進み、2番目の列に1つ追加して、名前と位置のフィールドに入力します。
グラデーションの背景
このモジュールにグラデーションの背景を追加します。
- 色1：rgba（11,15,229,0.41）
- 色2：rgba（45,237,255,0.87）
- グラデーション方向：150度
タイトルテキスト設定
次に、デザインタブでタイトルテキストの設定を変更します。
- タイトルフォント：Baloo
- タイトルテキストの色：#ffffff
- タイトルテキストサイズ：20px
本文の設定
本文の設定も変更してください。
- ボディフォントの太さ：軽い
- 本文の色：#ffffff
間隔
そして、間隔設定にいくつかのカスタムマージンとパディング値を追加します。
- 左マージン：-4vw（デスクトップとタブレット）、0vw（電話）
- 右マージン：8vw（デスクトップとタブレット）、0vw（電話）
- トップパディング：25px
- ボトムパディング：25px
- 左パディング：20px
国境
また、モジュールに微妙な左の境界線を追加しています。
- 左ボーダー幅：3px
- 左の境界線の色：#ffffff
ボックスシャドウ
ページに奥行きを作成するのに役立つボックスシャドウとともに。
- ボックスシャドウブラー強度：80px
個人モジュール＃2を列2に追加します
コンテンツを追加する
前のモジュールのすぐ下に別の個人モジュールを追加します。 このモジュールを使用して、ソーシャルメディアのプロファイルと説明を表示しています。
アイコン設定
デザインタブに移動し、アイコン設定でアイコンの色を変更します。
- アイコンの色：＃50e8fe
間隔
大事なことを言い忘れましたが、間隔設定を開き、いくつかのカスタムパディング値を追加します。
- トップパディング：30px
- 左パディング：30px（デスクトップとタブレット）、0px（電話）
例2を再作成する
新しいセクションを追加
次の例に移りましょう！ ページに新しいセクションを追加します。
新しい行を追加
カラム構造
次の列構造を使用して、このセクションに新しい行を追加します。
列2の背景色
モジュールをまだ追加せずに、行の設定を開き、列2の背景色を追加します。
- 列2の背景色：＃f4f4f4
サイジング
次に、[デザイン]タブに移動し、サイズ設定を変更します。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
- 列の高さを等しくする：はい
間隔
間隔設定にもいくつかのカスタムパディング値を追加します。
- トップパディング：100px（デスクトップ）、80px（タブレットと電話）
- 下部のパディング：100px（デスクトップ）、80px（タブレットと電話）
- 左パディング：100px（デスクトップ）、30px（タブレット）、25px（電話）
- 右パディング：100px（デスクトップ）、30px（タブレット）、25px（電話）
列1に画像モジュールを追加
画像をアップロード
モジュールの追加を開始する時が来ました！ 必要な最初のモジュールは、列1の画像モジュールです。選択した画像をアップロードします。
ボックスシャドウ
次に、ボックスシャドウを画像に追加します。
- ボックスシャドウブラー強度：160px
フィルタ
フィルタ設定をいじることもできます。
- 飽和度：40％
- コントラスト：130％
個人モジュール＃1を列2に追加します
コンテンツを追加する
2番目の列で、必要な最初のモジュールはPersonモジュールです。 名前と位置のフィールドに入力します。
背景色
背景設定に移動し、透明な背景色を追加します。
- 背景色：rgba（255,255,255,0.7）
テキスト設定
次に、テキスト設定でテキストの向きを変更します。
- テキストの向き：中央
タイトルテキスト設定
タイトルテキストの設定も変更します。
- タイトルフォント：Abril Fatface
- タイトルテキストの色：＃000000
- タイトルテキストサイズ：40px
本文の設定
本文の設定とともに。
- ボディフォントの太さ：軽い
- 本文の色：＃000000
- 本文サイズ：15px
間隔
間隔の設定で負の左マージンを使用して重なりを作成しています。
- 左マージン：-21.64vw（デスクトップ）、-46.1vw（タブレット）、0vw（電話）
- トップパディング：30px
- ボトムパディング：30px
ボックスシャドウ
また、微妙なボックスシャドウも適用しています。
- ボックスシャドウブラー強度：80px
個人モジュール＃2を列2に追加します
コンテンツを追加する
列2に必要な2番目のモジュールは、別のPersonモジュールです。 ここでは、ソーシャルメディアのリンクと説明を追加しています。
アイコン設定
[デザイン]タブに移動し、アイコン設定でアイコンの色を変更して続行します。
- アイコンの色：＃000000
間隔
いくつかのカスタムマージンとパディング値も追加します。
- トップマージン：3vw
- トップパディング：30px
- ボトムパディング：30px
- 左パディング：30px
- 右パディング：30px
例3を再作成する
新しいセクションを追加
3番目の例に移ります！ ページに新しいセクションを追加します。
新しい行を追加
カラム構造
次に、次の列構造を使用してセクションに新しい行を追加します。
サイジング
行設定を開き、サイズ設定を変更します。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
- 列の高さを等しくする：はい
間隔
いくつかのカスタムパディング値も追加します。
- トップパディング：100px（デスクトップ）、80px（タブレットと電話）
- 下部のパディング：100px（デスクトップ）、80px（タブレットと電話）
- 左パディング：100px（デスクトップ）、30px（タブレット）、25px（電話）
- 右パディング：100px（デスクトップ）、30px（タブレット）、25px（電話）
個人モジュール＃1を列1に追加します
コンテンツを追加する
モジュールの追加を開始する時が来ました！ 最初のPersonモジュールを列1に追加し、名前と位置のフィールドに入力します。
背景色
次に、モジュールに背景色を追加します。
- 背景色：#ffffff
タイトルテキスト設定
タイトルテキストの設定も変更します。
- タイトルフォントの太さ：超太字
- タイトルテキストの色：＃000000
- タイトルテキストサイズ：40px
- タイトル文字の間隔：-4px
本文の設定
本文の設定も同様です。
- ボディフォントの太さ：軽い
- 本文の色：＃000000
- 本文サイズ：15px
間隔
間隔の設定に移動し、カスタムマージンとパディング値を追加して続行します。
- 上マージン：40px（デスクトップ）、0px（タブレットと電話）
- トップパディング：30px
- ボトムパディング：30px
- 左パディング：30px
- 右パディング：30px
国境
境界線設定の左上隅にも「20px」を追加します。
ボックスシャドウ
そして、モジュールにカラフルなボックスシャドウを付けます。
- ボックスシャドウブラー強度：140px
- 影の色：rgba（31,15,255,0.66）
個人モジュール＃2を列1に追加します
コンテンツを追加する
列1の2人目のモジュールに移ります。 このモジュールを使用して、ソーシャルメディアのリンクと説明を表示します。
背景色
次に、背景設定に移動し、白い背景色を追加します。
- 背景色：#ffffff
アイコン設定
アイコンの色も変更します。
- アイコンの色：＃000000
間隔
間隔設定にいくつかのカスタム間隔値を追加して続行します。
国境
そして、左下隅に「20px」を追加します。
ボックスシャドウ
最後になりましたが、ボックスシャドウを追加します。
- ボックスシャドウの垂直位置：50px
- ボックスシャドウブラー強度：140px
- ボックスシャドウスプレッド強度：-10px
- 影の色：rgba（2,219,219,0.26）
列2に画像モジュールを追加します
画像をアップロード
次に必要なモジュールは画像モジュールです。 先に進み、2番目の列に1つ追加して、選択した画像をアップロードします。
国境
このモジュールに、境界線の設定で角の丸い「20px」を指定します。
ボックスシャドウ
そして、微妙なボックスシャドウを追加します。
フィルタ
繰り返しになりますが、フィルター設定を自由に試して、画像の外観を変更してください。
例4を再作成する
新しいセクションを追加
4番目の例に移りましょう！ ページに新しいセクションを追加します。
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、サイズ設定を変更します。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
- 列の高さを等しくする：はい
間隔
間隔の設定も変更します。
- トップパディング：100px（デスクトップ）、80px（タブレットと電話）
- 下部のパディング：100px（デスクトップ）、80px（タブレットと電話）
- 左パディング：100px（デスクトップ）、30px（タブレット）、25px（電話）
- 右パディング：100px（デスクトップ）、30px（タブレット）、25px（電話）
個人モジュールを列1に追加
コンテンツを追加する
モジュールの追加を開始する時が来ました！ 個人モジュールを列1に追加し、すべてのフィールドに入力します。
アイコン設定
次に、アイコン設定に移動し、アイコンの色を変更します。
- アイコンの色：＃000000
テキスト設定
テキスト設定でもテキストの向きを変更します。
- テキストの向き：中央
タイトルテキスト設定
次に、タイトルテキストの設定を開き、いくつかの変更を加えます。
- タイトルフォントの太さ：超太字
- タイトルテキストの色：＃000000
- タイトルテキストサイズ：40px
- タイトル文字の間隔：-4px
本文の設定
本文の設定も変更してください。
- ボディフォントの太さ：軽い
- 本文の色：＃000000
- 本文サイズ：15px
- ボディラインの高さ：2em
間隔
また、間隔設定でカスタムパディング値を使用して形状を作成します。
- トップパディング：280px（デスクトップ）、200px（タブレット）、50px（電話）
- 下部のパディング：280px（デスクトップ）、200px（タブレット）、50px（電話）
- 左パディング：200px（デスクトップ）、150px（タブレット）、20px（電話）
- 右パディング：200px（デスクトップ）、150px（タブレット）、20px（電話）
国境
境界線設定の各コーナーに「700px」を追加して円を作成し、微妙な境界線も追加します。
- ボーダー幅：1px
- ボーダーカラー：＃333333
列2に画像モジュールを追加します
画像をアップロード
2番目の列に画像モジュールを追加して続行し、選択した正方形の画像をアップロードします。
間隔
このモジュールの間隔設定を変更します。
- トップマージン：7vw（デスクトップ）、-15vw（タブレット）、-5vw（電話）
- 左マージン：-5vw（デスクトップ）、0vw（タブレットと電話）
国境
モジュールの各コーナーに「1000px」を追加して、この画像から円の形を作成します。
ボックスシャドウ
微妙なボックスシャドウも追加します。
- ボックスシャドウブラー強度：160px
- ボックスシャドウスプレッド強度：-10px
フィルタ
そして、画像のフィルター設定をいじってデザインを完成させます。
- 飽和度：0％
- コントラスト：130％
例5を再作成する
新しいセクションを追加
次の最後の例に移りましょう！ ページに新しいセクションを追加します。
新しい行を追加
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
列1のグラジエントバックグラウンド
行設定を開き、列1のグラデーションの背景を追加します。
- 色1：#dddddd
- 色2：#ffffff
- 列1の勾配方向：90度
- 列1の開始位置：40％
- 列1の終了位置：40％
サイジング
次に、サイズ設定に移動して、いくつかの変更を加えます。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
間隔
行にいくつかのカスタムパディング値も追加します。
- トップパディング：100px（デスクトップ）、80px（タブレットと電話）
- 下部のパディング：100px（デスクトップ）、80px（タブレットと電話）
- 左パディング：100px（デスクトップ）、30px（タブレット）、25px（電話）
- 右パディング：100px（デスクトップ）、30px（タブレット）、25px（電話）
個人モジュールを列1に追加
コンテンツを追加する
モジュールの追加を開始する時が来ました！ 個人モジュールを列1に追加し、すべてのフィールドに入力します。
アイコン設定
次に、アイコン設定でアイコンの色を変更します。
- アイコンの色：＃000000
テキスト設定
テキスト設定でもテキストの向きを変更します。
- テキストの向き：右
タイトルテキスト設定
次に、タイトルテキストの設定にいくつかの変更を加えます。
- タイトルフォント：Chenla
- タイトルテキストの色：＃000000
- タイトルテキストサイズ：50px
- タイトル文字の間隔：-1px
本文の設定
本文の設定も同様です。
- ボディフォントの太さ：軽い
- 本文の色：＃000000
- 本文サイズ：15px
- ボディラインの高さ：2em
間隔
モジュールの間隔設定にいくつかのカスタムパディング値を追加して続行します。
- トップパディング：200px（デスクトップ）、100px（タブレットと電話）
- 下部のパディング：200px（デスクトップ）、100px（タブレットと電話）
- 左パディング：500px（デスクトップ）、250px（タブレット）、50px（電話）
- 右パディング：200px（デスクトップ）、100px（タブレット）、50px（電話）
国境
最後に、モジュールに境界線を追加します。
列2に画像モジュールを追加します
画像をアップロード
次に必要なモジュールは、列2の画像モジュールです。先に進んで、選択した正方形の画像をアップロードします。
間隔
次に、このモジュールの間隔設定にいくつかの変更を加えます。
- トップマージン：7vw（デスクトップ）、-2vw（タブレットと電話）
- 左マージン：-10vw（デスクトップ）、0vw（タブレットと電話）
ボックスシャドウ
イメージモジュールにもボックスシャドウを付けます。
- ボックスシャドウブラー強度：160px
- ボックスシャドウスプレッド強度：-10px
フィルタ
そして、それを締めくくるには、フィルター設定をいじってみてください。
- 飽和度：50％
- コントラスト：130％
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最後に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Divi PersonModuleを使用してクリエイティブになるための5つの異なる方法を紹介しました。 これらの例は、構築している任意のWebサイトに使用でき、各デザイン要素の設定を微調整することで独自の代替バージョンを作成できます。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！