サービスページをデザインするときは、 訪問者 あなたが提供するさまざまなサービスすべてに注意してください。 多くの場合、彼らが探しているのは XNUMX つの特定のサービスだけですが、サービス構造に合理化された方法を提供すれば、その可能性が高くなります。 訪問者 それらすべてに対処します。
このチュートリアルでは、スクロール効果を使って創造性を発揮する方法を紹介します。 Divi シームレスなサービス移行を作成します。 また、JSON ファイルを無料でダウンロードすることもできます。
行こう。
可能な結果
チュートリアルに入る前に、さまざまな画面サイズでの結果を見てみましょう。
1、要素の構造を再作成します
セクション＃1を追加
スペーシング
作業中のページに新しいセクションを追加することから始めます。 セクション設定を開き、さまざまな画面サイズでパディング値を変更します。
- 上部のパディング：80px（デスクトップおよびタブレット）、0px（電話）
- 下部のパディング：80px
新しい行を追加
カラム構造
次の列構造を使用して、新しい行の追加を続けます。
サイズ剤
モジュールを追加せずに、ラインパラメータを開き、寸法パラメータに次の変更を適用します。
- カスタムのガター幅を使用：はい
- 側溝幅：1
- 幅：90％
- 最大幅：1580ピクセル
スペーシング
次に、カスタムの上部と下部のマージンを追加します。
- 上余白：200px
- 下マージン：200px
1列にテキストモジュールを追加します
H2コンテンツを追加
モジュールを追加します。列 1 のテキスト モジュールから始めます。 コンテンツ H2はお好みで。
H2テキスト設定
モジュールデザインタブに移動し、H2テキスト設定を次のように変更します。
- タイトル2警察：四半期ごと
- ヘッダー2テキストサイズ：80ピクセル（デスクトップ）、50ピクセル（タブレット）、40ピクセル（電話）
- 頭のライン2の高さ：1.2em
スペーシング
次に、タブレットと電話のマージンを低くします。
- 下マージン：50ピクセル（タブレットとスマートフォンのみ）
2列にテキストモジュールを追加します
コンテンツを追加する
XNUMX 番目の列に進みます。 そこで必要となる最初のモジュールは、特定の内容を含むテキスト モジュールです。 コンテンツ 説明。
テキスト設定
モジュールデザインタブに切り替え、それに応じてテキスト設定を変更します。
- 文字フォント：キャビン
- テキストのフォントスタイル：大文字
- テキストの色：＃000000
- テキストサイズ：18ピクセル（デスクトップ）、15ピクセル（タブレット）、13ピクセル（電話）
- テキストの文字間隔：3px（デスクトップ）、1px（タブレットと電話）
- テキスト行の高さ：3em
カラム2に分離モジュールを追加する
可視
このコラムで必要な次の最後のモジュールは、分離モジュールです。 「セパレーターの表示」オプションが有効になっていることを確認してください。
- 区切りを表示：はい
ライン
次に、モジュールの線の色を変更します。
- 線の色：＃000000
サイズ剤
次に、サイジングパラメータに変更を加えます。
- デバイダ重量：3px
- 幅：28％
スペーシング
上マージンも追加します。
- 上余白：10px
セクション＃2を追加
スペーシング
次の通常のセクションに移りましょう。 セクションからデフォルトの上部パディングを削除します。
- 上部パディング：0px
オーバーフロー
オーバーフローも非表示にします。
- 水平オーバーフロー：非表示
- 垂直オーバーフロー：非表示
新しい行を追加
カラム構造
次の列構造を使用して、最初の行を続けて追加します。
サイズ剤
モジュールを追加せずに、ラインパラメータを開き、寸法パラメータにアクセスして、次の変更を加えます。
- カスタムのガター幅を使用：はい
- 側溝幅：1
- 列の高さの均等化：はい
- 幅：90％
- 最大幅：1580ピクセル
スペーシング
次に、デフォルトの上部および下部のパディングをすべて削除します。
- 上部パディング：0px
- 下部のパディング：0px
列1の設定
背景色
次に、列1の設定を開き、背景色を変更します。
- 背景色：＃f7f7f7
スペーシング
さまざまな画面サイズにカスタムパディング値を追加して、列の設定を完了します。
- 上部パディング：200ピクセル（デスク）、100ピクセル（タブレットと電話）
- 下パディング：200px（デスク）、100px（タブレットと電話）
- 左パディング：8％
- 右パディング：8％
列2の設定
スペーシング
列2の設定を開いて続行します。[詳細設定]タブに移動し、さまざまな画面サイズにカスタムパディング値を追加します。
- 上パディング：100px（デスクトップ）、50px（タブレットと電話）
- 下部のパディング：200px
- 左パディング：150ピクセル（デスク）、0ピクセル（タブレットと電話）
カラム1に分離モジュールを追加する
可視
最初の列で、必要な最初のモジュールは分離モジュールです。 「セパレーターの表示」オプションが有効になっていることを確認してください。
- 区切りを表示：はい
ライン
次に、モジュールの線の色を変更します。
- 線の色：＃000000
サイズ剤
また、サイジングパラメータを変更します。
- デバイダ重量：3px
- 幅：50％
1列にテキストモジュールを追加します
H3コンテンツを追加
列 1 で次に必要なモジュールは、次のテキスト モジュールです。 コンテンツ H3。
H3テキスト設定
モジュールデザインタブに切り替えて、H3テキスト設定を変更します。
- タイトル3警察：四半期ごと
- アイテム3のテキストの色：＃000000
- アイテム3テキストサイズ：50ピクセル（デスクトップ）、40ピクセル（タブレット）、35ピクセル（電話）
- 頭のライン3の高さ：1.1em
2列にテキストモジュールを追加します
コンテンツを追加する
XNUMX列目で必要な最初のモジュールは、説明コンテンツを含むテキストモジュールです。
テキスト設定
モジュールのテキスト設定を次のように変更します。
- 文字フォント：キャビン
- テキストのフォントスタイル：大文字
- テキストサイズ：18ピクセル（デスクトップ）、15ピクセル（タブレット）、13ピクセル（電話）
- テキストの文字間隔：3px（デスクトップ）、1px（タブレットと電話）
- テキスト行の高さ：3em
2列にボタンモジュールを追加します
コピーを追加
次に必要な最後のモジュールはボタンモジュールです。 お好みのコピーを入力してください。
ボタン設定
次に、ボタンのスタイルを設定します。
- ボタンにカスタムスタイルを使用：はい
- ボタンのテキストサイズ：20ピクセル
- ボタンのテキストの色：#ffffff
- ボタンの背景色：＃000000
- ボタンの境界線の幅：0px
- ボタンのフォント：四半期
- ボタンのフォントの太さ：太字
スペーシング
また、カスタムパディングを追加します。
- 上部パディング：50px
- 下部のパディング：50px
- 左パディング：100px
- 右パディング：100px
役職
そして、それに応じてボタンを再配置します。
- ポジション：絶対
- 場所：左下
必要な回数だけ行を複製する
行全体とそのすべてのモジュールを完了すると、行全体をXNUMX回複製できます。
すべてのコンテンツを変更する
内容はすべて重複する行で編集してください。
2.スクロール効果を適用する
最初の行のスクロール効果
水平移動
セクションのすべての行を完了したら、スクロール効果を追加します。 セクションの最初の行を開き、水平方向の動きを追加します。
- 水平移動を有効にする：はい
- 開始オフセット：-5
- 平均オフセット：0（26％で）
- 終了オフセット：0
- トリガーモーション効果：要素の中央
フェードインとフェードアウト
また、着信および発信フェードエフェクトを使用します。
- フェードインとフェードアウトを有効にする：はい
- 初期不透明度：100％
- 平均不透明度：100％（50％で）
- 不透明度の終了：0％（53％まで）
- トリガーモーション効果：要素の中央
中段スクロール効果
上下動
次に、セクションの最初の行と最後の行の間のすべての行にスクロール効果を追加します。 最初に垂直移動を使用します。
- 垂直移動を有効にする：はい
- 開始オフセット：-4
- 平均オフセット：0（26％で）
- 終了オフセット：0
- モーショントリガー効果：要素の中央
フェードインとフェードアウト
また、イン/アウトフェードエフェクトをアクティブにします。
- フェードインとフェードアウトを有効にする：はい
- 初期不透明度：0％
- 平均不透明度：100％（27％から50％）
- 終了オフセット：0（53％）
- トリガーモーション効果：要素の中央
最終行スクロール効果
上下動
次に、セクションの最後の行を開き、次の垂直移動を追加します。
- 垂直移動を有効にする：はい
- 開始オフセット：-4
- 平均オフセット：0（26％で）
- 終了オフセット：0
- トリガーモーション効果：要素の中央
フェードインとフェードアウト
着信および発信のフェード効果があれば完了です。
- フェードインとフェードアウトを有効にする：はい
- 初期不透明度：0％
- 平均不透明度：100％（27％から50％）
- 不透明度の終了：100％（53％まで）
- トリガーモーション効果：要素の中央
最終結果
すべての手順を完了したので、さまざまな画面サイズでどのように表示されるかを最後に見てみましょう。
最終的な考え
この記事では、スクロール効果を使用して美しいサーブ トランジションを作成する方法を紹介しました。 Divi. XNUMX つのサーブが消える前に、もう XNUMX つのサーブが現れ始め、目に優しい素晴らしいトランジションを提供します。 このアプローチは、個々のレベルで各サービスを強調するのに役立ちます。 JSON ファイルを無料でダウンロードすることもできました。 ご質問やご提案がありましたら、下のコメント セクションにコメントを残してください。
