で影とホバー効果を使用しますか? Divi 作成する コンテンツ インタラクティブで目立つ サイトのWeb ?
あなたのことを確認してください サイトのWeb 類似の Web サイトから際立つのは難しい場合があります。 しかし、そこにたどり着くと、ほとんどの場合、そこに費やされた努力と考えに見合うだけの価値があります。
作成方法をご紹介します コンテンツ ウェブサイト作成時にインタラクティブに Divi.
行こう！
概要
このチュートリアルに入る前に、期待できる結果を簡単に見てみましょう。
デスクトップコンピューター
モバイル
Diviで実現を始めましょう！
新しいセクションを追加する
背景色
新しいページを作成するか、既存のページを開いて通常のセクションを追加します。 セクション設定を開き、背景色を変更します。
- 背景: #03006d
スペーシング
次に、セクション間隔の設定に移動し、次のように変更します。
- パディング（上下）：50px
新しい行を追加
カラムの構造
次の列構造を使用してセクションに新しい行を追加して続行します。
サイズ剤
次に、サイズ設定に移動し、線が画面の全幅を埋めるようにします。
- カスタムガター幅を使用: はい
- ガター幅: 1
- 幅: 100%
スペーシング
次の間隔設定も変更してみましょう。
- パディング (右): 9vw (デスクトップ)、5vw (タブレットと電話)
- パディング (右): 5vw (タブレットと電話)
列1にテキストモジュールを追加します
コンテンツを追加する
行設定の編集が完了したら、最初の Text モジュールを列 1 に追加します。
最初の文字を段落テキストとして追加します。 そうして コンテンツ リストテキストとして表示したいものを選択します。
テキスト設定（デスクトップ）
次に、タブに移動します 設計デフォルトの段落テキスト設定を変更します。 セクションのテキストと背景には必ず同じ色を使用してください。
- フォントの太さ: 超太字
- 文字色：#03006d
- テキスト サイズ: 27vw (デスクトップ)、0vw (タブレットと電話)
- 行の高さ: 1,1 em
- テキストの影: キャプチャを参照
- 影のぼかしの強さ: 0,01em
- 影の色: #ffffff
- テキストの配置: 左
ホバーテキストの設定
素敵なホバー効果を作成するには、これらのホバー段落テキスト設定を変更する必要があります。
- テキストの色 (ホバー): #ffffff
- 影の色(ホバー) : rgba(255,255,255,0)
リスト設定（デスクトップ）
リスト設定に移動して続行します。
- フォントの太さ: ライト
- リストのテキストの色: #ffffff
- リストのテキスト サイズ: 0px (デスクトップ)、18px (タブレットとスマートフォン)
- スタイル位置: サークル
- 順序付けられていないリスト スタイルの位置: 外側
- 順序付けられていないリスト アイテムのインデント: 0px
ホバー時のテキスト設定を一覧表示 (Hover)
リストのテキストがホバー時に表示されるようにします。 これが、ホバー時のテキストのサイズを変更する理由です。
- 順序付けされていないリストのテキスト サイズ (ホバー): 18px
スペーシング
モジュール間隔の設定に移動して、そこでもいくつか変更を加えます。
- 余白 (下): 50px (タブレットとスマートフォン)
- マージン (右): -4vw (デスクトップ)、0vw (タブレットと電話)
テキスト モジュールを 4 回複製し、残りの列に複製を配置します
列 1 の最初のモジュールの変更が完了したので、モジュールを XNUMX 回複製します。 次に、各重複を残りの列に配置します。 必要なものに一致するように、各複製を変更します。
列 2 のテキスト モジュールを変更します。
コンテンツの編集
列 2 の複製を開き、内容を編集します。
間隔を変更
次に、間隔設定に移動し、カスタム マージン値を変更します。
- 余白 (下): 50px (タブレットとスマートフォン)
- 余白 (左右): -2vw (デスクトップ)、0vw (タブレットと電話)
- 右マージン: -2vw (デスクトップ)、0vw (タブレットと電話)
列 3 のテキスト モジュールを変更します。
コンテンツの編集
列 3 の複製の内容も変更します。
間隔を変更
デザインタブの間隔設定。
- マージン (左): 2,5 vw
- マージン (右): 1,5 vw
列 4 のテキスト モジュールを変更します。
コンテンツの編集
列 4 のテキスト モジュール設定を開き、そこでもコンテンツを編集します。
間隔を変更
次に、[デザイン] タブに移動し、[間隔] 設定でカスタム マージンの値を変更します。
- 余白 (左): -6vw
- 余白 (右): 2vw
列 5 のテキスト モジュールを変更します。
中身
最後の複製に道を譲ります。 コンテンツ領域でコンテンツを編集します。
間隔を変更
カスタム間隔設定付き。
- 余白 (左): -7vw
- 余白 (右): 3vw
概要
すべての手順を完了したので、さまざまな画面サイズでどのように表示されるかを最後に見てみましょう。
また読みます： Divi : 「全幅メニュー」モジュールのカートと検索アイコンをカスタマイズする方法
オフィス
モバイル
今すぐDIVIをダウンロード!!!
まとめ
私たちは、お客様の サイトのWeb 他のウェブサイトよりも際立っています。 Divi の組み込みオプションを使用すると、思う存分クリエイティブになれます。
この記事は、インタラクティブなホバー コンテンツを作成する方法の例です。
このチュートリアルがあなたの次のDiviプロジェクトに刺激を与えることを願っています。 懸念や提案がある場合は、 コメントセクション それを議論する。
相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
