Diviの無料のモーション証言レイアウトをダウンロードする
公開: 2020-04-30お客様の声が多くの企業とそのウェブサイトの重要な部分であることは周知の事実です。 彼らはあなたが提供するサービスやあなたが提供する製品に信頼感を追加します。 あなたの証言を表示する方法に特別な注意を払うことはしばしば報われます。 Diviを使用すると、紹介文のセクションをスタイル設定する方法がたくさんあります。それに専用の紹介文モジュールもあります。 ただし、証言にインタラクションを追加する独自の方法を探している場合は、この投稿を気に入るはずです。 Diviの新しいスクロール効果で構築された美しいカスタムモーションの声のレイアウトを共有しています。 また、段階的にデザインを再現します！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
モーションの声のレイアウトを無料でダウンロード
フリーモーションの紹介文のレイアウトに手を置くには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
再作成を始めましょう！
新しいセクションを追加
背景色
作業中のページに新しいセクションを追加することから始めます。 セクション設定を開き、背景色を黒に変更します。
- 背景色：＃000000
間隔
セクションの[デザイン]タブに移動し、さまざまな画面サイズにカスタムの上下のパディングを追加します。
- トップパディング：10％（デスクトップ）、20％（タブレット）、30％（電話）
- 下部のパディング：10％（デスクトップ）、20％（タブレット）、30％（電話）
行＃1を追加
カラム構造
次の列構造を使用して最初の行を追加します。
列にテキストモジュールを追加
H2コンテンツを追加する
この行の列に必要な最初のモジュールは、H2コンテンツを含むテキストモジュールです。
H2テキスト設定
テキストモジュールのデザインタブに移動し、それに応じてH2テキスト設定を変更します。
- 見出し2フォント：Questrial
- 見出し2テキストの配置：中央
- 見出し2テキストサイズ：85px（デスクトップ）、45px（タブレット）、35px（電話）
- 見出し2文字の間隔：2px
- 見出し2行の高さ：1.1em
Dividerモジュールを列に追加
可視性
次に、テキストモジュールのすぐ下にディバイダーモジュールを追加し、[ディバイダーを表示]オプションが有効になっていることを確認します。
- 仕切りを表示：はい
回線設定
モジュールの[デザイン]タブに移動し、次のようにライン設定を変更します。
- 線の色：＃161616
- 線のスタイル：実線
- ライン位置：上
サイジング
サイズ設定も変更します。
- 仕切りの重量：14px
- 幅：13％（デスクトップ）、20％（タブレット）、30％（電話）
- モジュールの配置：中央
行＃2を追加
カラム構造
次の行へ！ この行は、私たちの最初の証言に捧げられます。 次の列構造を使用します。
デスクトップの背景画像
次に、この投稿の冒頭でダウンロードできたダウンロードフォルダーにある青いデスクトップの背景画像をアップロードします。
- 背景画像サイズ：フィット
- 背景画像位置：中央
タブレット＆電話の背景画像
小さい画面サイズでは、青色の背景画像の回転バージョンを使用しています。 この背景画像はダウンロードフォルダにもあります。
- 背景画像サイズ：フィット
- 背景画像の位置：中央
サイジング
行のデザインタブに移動し、サイズ設定で最大幅を変更します。
- 最大幅：2000px
間隔
間隔の設定にもいくつか変更を加えます。
- トップマージン：100px
- トップパディング：15％
- ボトムパディング：15％
水平モーションスクロール効果
次に、[詳細設定]タブに移動し、スクロール効果で水平方向の動きを有効にします。
- 水平方向の動きを有効にする：はい
- 開始オフセット：-4
- ミッドオフセット：0（50％）
- 終了オフセット：0
- モーションエフェクトトリガー：要素の上部
フェードインおよびフェードアウトスクロール効果
カスタムのフェードインおよびフェードアウトスクロール効果も追加します。
- フェードインとフェードアウトを有効にする：はい
- 開始時の不透明度：0％（19％）
- 中程度の不透明度：100％（25％から88％）
- 終了不透明度：0％（93％）
- モーショントリガー効果：要素の上部
列にテキストモジュールを追加
コンテンツを追加する
この行で必要な最初のモジュールはテキストモジュールです。 コンテンツボックスに紹介文のコンテンツを配置します。
テキスト設定
[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- テキストフォント：Questrial
- テキストフォントの太さ：太字
- テキストの色：#ffffff
- テキストサイズ：50px（デスクトップ）、30px（タブレット）、25px（電話）
- テキスト行の高さ：1.5em
- テキストの配置：中央
サイジング
次に、デザインタブでさまざまな画面サイズの幅を変更します。
- 幅：63％（デスクトップ）、100％（タブレットと電話）
- モジュールの配置：中央
個人モジュールを列に追加
コンテンツを追加する
次のモジュールであるPersonモジュールに進みます。 名前、位置、ソーシャルメディアのリンクを追加します。
画像をアップロード
次に、選択した正方形の画像をアップロードします。
アイコン設定
デザインタブに移動し、アイコン設定でアイコンの色を変更します。
- アイコンの色：＃2b302e
画像
いくつかの丸い角を追加して、画像を円に変えます。
- すべてのコーナー：100px
タイトルテキスト設定
次に、タイトルテキストの設定を次のように変更します。
- タイトルフォント：Questrial
- タイトルフォントの太さ：太字
- タイトルテキストの色：#ffffff
- タイトルテキストサイズ：24px
本文の設定
本文の設定にも変更を加えます。
- ボディフォント：Questrial
- 本文の色：#ffffff
- 本文サイズ：15px
位置テキスト設定
位置テキストの設定も変更しています。
- 位置フォント：Questrial
- 位置テキストの色：＃1b66ff
- 位置テキストサイズ：17px
サイジング
さまざまな画面サイズにわたる幅とともに。
- 幅：25％（デスクトップ）、100％（タブレットと電話）
- モジュールの配置：中央
間隔
次に間隔設定に移動し、上マージンを追加します。
- トップマージン：100px
主な要素
すべてのコンテンツがPersonモジュールで整列されていることを確認するために、[詳細設定]タブに移動し、モジュールのメイン要素に2行のCSSコードを追加します。
display: flex; align-items: center;
メンバー画像
小さい画面サイズでも、メンバー画像要素にカスタム幅を使用します。
タブレット：
width: 20% !important;
電話：
width: 30% !important; margin-right: 5%;
行＃2のクローン
お客様の声を含む行が完成したら、行全体のクローンを1回作成できます。
行の背景画像を変更する
デスクトップの背景画像と小さい画面サイズから始めて、この重複する行にいくつかの変更を加える必要があります。 背景画像の赤いバージョンはダウンロードフォルダにあります。
行間隔の変更
次の行に負の上部マージンを追加します。
- トップマージン：-15％
人物モジュールの位置のテキストの色を変更する
そして、Person Module設定で位置テキストの色を変更して、重複する行設定を完了します。
- 位置テキストの色：＃ff233e
最後の行のクローン
重複する紹介文の行が完成したら、クローンを作成できます。
行の背景画像を変更する
ダウンロードフォルダにある黄色のバージョンを使用して、行の背景画像を変更します。
人物モジュールの位置のテキストの色を変更する
人物モジュールの設定でも位置のテキストの色を変更すれば完了です。
- 位置テキストの色：＃ffbc1b
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、無料でダウンロードできた美しいモーションの声のレイアウトを共有しました！ カスタムの背景を使用し、Diviのスクロール効果ですべての紹介文を強調することができました。 デザインも段階的に再現しました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。