概要ページを作成するときは、チーム メンバーの紹介も行いたいと思うでしょう。 そうすることで、 訪問者 ビジネスの背後にいる人々と交流します。 スクロールでチーム メンバーのセクションをアニメーション化する方法を探している場合は、このチュートリアルが役立つかもしれません。 自動スクロールのチーム メンバー カルーセルを作成します。 訪問者 ページをスクロールします。
デモンストレーション
チュートリアルに入る前に、さまざまな画面サイズでの結果を見てみましょう。
着想の始まり
新しいセクションを追加する
スペーシング
作業中のページに新しい通常のセクションを追加することから始めます。 セクション設定を開き、さまざまな画面サイズにカスタムパディングを追加します。
- 上部パディング：200ピクセル（デスク）、100ピクセル（タブレットと電話）
- 下パディング：200px（デスク）、100px（タブレットと電話）
オーバーフロー
デザインに水平スクロールバーが表示されないようにするために、[詳細設定]タブでセクションのオーバーフローを非表示にします。
- 水平オーバーフロー：非表示
- 垂直オーバーフロー：非表示
行＃1を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加し続けます。
サイズ剤
モジュールをまだ追加せずに、行設定を開き、[デザイン]タブに切り替えて、サイズ設定で幅と最大幅を変更します。
- 幅：90％
- 最大幅：1580ピクセル
スペーシング
また、カスタムの上部および下部パディングを追加します。
- 上部パディング：100px
- 下部のパディング：100px
テキストモジュールを列に追加します
H2コンテンツを追加
最初のテキスト モジュールから始めてモジュールを追加します。 入力してください コンテンツ H2はお好みで。
H2テキスト設定
モジュールデザインタブに移動し、H2テキスト設定を次のように変更します。
- フォントタイトル2：流砂
- フォントタイトル2：半太字
- アイテム2のテキストの色：＃000000
- ヘッダー2テキストサイズ：70ピクセル（デスクトップ）、50ピクセル（タブレット）、40ピクセル（電話）
分離モジュールをカラムに追加します
可視
次に、分離モジュールを追加します。 「セパレーターの表示」オプションが有効になっていることを確認してください。
- 区切りを表示：はい
ライン
次に、回線設定に変更を加えます。
- 線の色：＃edf000
- 線のスタイル：単色
- 行の位置：上
サイズ剤
そして、それに応じて寸法パラメータを変更して、モジュールパラメータを完成させます。
- デバイダ重量：20px
- 幅：11％
- モジュールの配置：左
- 高さ：20px
行を追加する＃2
カラム構造
次の列へ！ 次の列構造を使用します。
サイズ剤
モジュールを追加せずに、行パラメーターを開き、次のようにサイズ変更パラメーターを変更します。
- カスタムのガター幅を使用：はい
- 側溝幅：2
- 幅：100％
- 最大幅：100％
スペーシング
次に、小さい画面のみに左右のパディングを追加します。
- 左パディング：5％（タブレットと電話のみ）
- 右パディング：5％（タブレットと電話のみ）
列パラメーター（5x）
ここで、このチュートリアルの次のXNUMXつのステップで、列にいくつかの変更を加えます。 行の各列にXNUMXつの手順を適用します。
グラデーションの背景
まず、各列にグラデーションの背景を追加します。
- 1カラー：rgba（255,255,255,0）
- 2カラー：rgba（0,0,0,0,84）
- 勾配タイプ：線形
- 開始位置：25％
- 終了位置：86％
- 背景画像の上にグラデーションを配置する：はい
背景画像
次に、選択した背景画像をアップロードします。 この背景画像は各チームメンバーを表しているため、列ごとに異なる画像を使用してください。
- 背景画像サイズ：カバー
- 背景画像の位置：中央
主な要素
各列のメインタブレット要素にカスタムCSSを追加して、列の設定を完了します。 これらのCSSコードの行は、XNUMXつを並べて配置するのではなく、タブレット上で列を上下に配置するのに役立ちます。
幅：100％！重要;マージン：50px 0px 50px 0px！重要;
列に人物モジュールを追加する
コンテンツを追加する
チーム メンバーに関する情報を共有するには、人物モジュールを使用します。 最初の Person モジュールを列 1 に追加し、 コンテンツ デvotre Choixの。
画像を削除する
次に、画像を削除します。 代わりに、列の背景画像を使用します。
背景画像
次に、モジュールの背景画像として画像オーバーレイを追加します。 このチュートリアルの最初にあるフォルダをダウンロードすると、使用しているものを見つけることができます。
- 背景画像サイズ：カバー
- 背景画像の位置：中央
タイトルテキストの設定
モジュールデザインタブに移動し、タイトルテキスト設定を次のように変更します。
- タイトルレベル：H3
- タイトルフォント：流砂
- タイトルのフォントの太さ：太字
- タイトルのテキストの色：#ffffff
- タイトルのテキストサイズ：230％
本文の設定
本文の設定も変更します。
- ボディフォント：Open Sans
- 本文の色：#ffffff
- ボディラインの高さ：2,2 em
テキスト設定の配置
次に、位置のテキスト設定に変更を加えます。
- フォント位置：Open Sans
- 位置テキストの色：＃edf000
スペーシング
そして、間隔設定にカスタムパディング値を追加して、モジュール設定を完了します。
- 上部パディング：70％
- 下詰め：10％
- 左パディング：10％
- 右パディング：10％
Personモジュールを4回複製する
Personモジュールを完了すると、モジュール全体をXNUMX回複製できます。
残りの列に複製を配置します
行の残りの XNUMX 列に重複したモジュールを配置します。 も必ず変更してください コンテンツ.
行を自動スクロールカルーセルに変える
行＃2のサイズを変更する
この行を自動スクロールチームメンバーのカルーセルに変えるには、行の設定を再度開き、サイズ設定の幅と最大幅を変更する必要があります。
- 幅：180％
- 最大幅：220％（デスク）、100％（タブレットと電話）
行＃2の水平移動を追加します
[詳細設定]タブのスクロール効果設定に水平方向の動きを追加してライン設定を完了すると、完了です。
- 水平移動を有効にする：はい
- 開始オフセット：
- オフィス：2,5
- タブレットと電話：0
- 平均オフセット：0（40％で）
- 終了オフセット：
- オフィス：-25（62％）
- タブレットと電話：0
- トリガーモーション効果：要素の中央
概要
すべての手順を完了したので、さまざまな画面サイズでどのように表示されるかを最後に見てみましょう。
オフィス
最終的な考え
このチュートリアルでは、組み込みのスクロール効果を使って創造性を発揮する方法を示しました。 Divi。 具体的には、美しい自動スクロールのチーム メンバーのカルーセルを再作成しました。 とき 訪問者 ページをスクロールすると、カルーセルの別の部分が表示されます。
