から Blurb モジュールを配置する方法を知りたい Divi 他をぼかしながら強調表示しますか？
どんなタイプでも サイトのWeb 構築していると、ある時点で、さまざまなサービス、ステージなどのリストを表示したくなる可能性があります。
このようなリストを魅力的な方法で作成する最も簡単な方法の XNUMX つは、次の Blurb モジュールを使用することです。 Divi。 Blurb モジュールを使用すると、 コンテンツ 無限のデザインの可能性を与えながら、リストから選択できます。
このチュートリアルでは、さらに一歩進んで、ホバー時に Blurb モジュールを強調表示し、表示されている他のモジュールをぼかす方法を示します。 これは、他の Blurb モジュールが読者の注意をそらすことなく、一度に XNUMX つの Blurb モジュールを強調するのに最適な方法です。
行こう。
概要
このチュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップコンピューター
モバイル版
Diviでデザインを始めましょう
新しいセクションを追加する
背景色
新しいページまたは作業中のページに通常のセクションを追加することから始めます。
相談することもできます： Divi: チーム メンバー セクションをカルーセルとして作成する方法
セクション設定を開き、背景色を変更します。
- 背景: #eaeaea
間隔
間隔の値も追加します。
- 余白（上下左右）：2vw
- パディング（上下）：0px
ボーダー
境界半径を追加してセクション パラメータを完成させます。
- 角丸：20px
新しい行を追加
カラムの構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
モジュールを追加せずに、回線設定を開いてサイジング設定を変更します。
- 列の高さを均等にする: はい
- 幅: 90%
- 最大幅: 1px
- 最小高さ: 500px (デスクトップ)、auto (タブレットとスマートフォン)
カスタム CSS (メイン要素)
位置合わせ コンテンツ 行のメイン要素に XNUMX 行の CSS コードを追加することで、列を変更します。
align-items: center;
Blurbモジュールを1列に追加します
コンテンツを追加する
このチュートリアル全体で使用する唯一のモジュールは Blurb モジュールです。
ただし、次のステップで共有する CSS クラスを追加する限り、このモジュールを任意のモジュールに置き換えることができます。
最初の Blurb モジュールを列 1 に追加し、 コンテンツ デvotre Choixの。
アイコンを選択します
次に、アイコンを選択します。
- アイコン使用 : はい
- アイコン: スクリーンショットを見る
背景のグラデーション (ホバー)
次に、ホバー時にのみ背景グラデーションを使用します。
- 勾配停止
- 20%: #ffffff
- 80%: #0f1bff
- グラデーションの種類: 線形
アイコン設定（デスクトップ）
タブに切り替えます 設計 モジュールのアイコン設定を次のように変更します。
- アイコンの色: #ffffff
- 画像/アイコンの角丸: 50px
- 画像/アイコンの境界線の幅: 5px
- ボーダーカラー：#ffffff
- 画像/アイコンの配置: 上
- 画像/アイコンの配置: 左
ホバーアイコンの設定
ホバー時にさまざまなアイコンの色を変更します。
- アイコンの色 (ホバー): #0f1bff
- 画像/アイコンの背景色 (ホバー): #f7f7f7
タイトルテキストの設定
タイトル テキストの設定を変更して続行します。
- タイトルのフォント: Source Sans Pro
- フォントの太さ：太字
- タイトルのフォント スタイル: TT (大文字)
ホバー タイトル テキストの設定
ホバー時のタイトル テキストの色を変更します。
- タイトル文字色：#ffffff
説明テキストの設定 (デスクトップ)
次に本文の設定です。
- 本文のフォント: Open Sans
- ボディラインの高さ: 2em
ホバー説明テキストの設定
ホバー時にテキストの色を使用します。
- 本文テキストの色 (ホバー): #ffffff
間隔
次に、間隔設定に移動し、カスタム パディング値を追加します。
- パディング (上下左右): 50px
ボックス シャドウ (デスクトップ)
ボックス シャドウも使用します。
- ボックス シャドウのぼかしの強さ: 80px
- ボックス シャドウの拡散強度: -20px
- 影の色: rgba(255,255,255,0.18)
ボックス シャドウ (ホバー)
ホバー シャドウの色を変更します。
- 影の色: rgba(0,0,0,0.18)
CSSクラス
ぼかし効果を発生させるには、CSS クラスを Blurb モジュールに割り当てる必要があります。 この記事の後半では、この CSS クラスを JQuery コードで使用します。
- CSS クラス: 宣伝文句
Blurb モジュールを XNUMX 回複製し、複製を残りの列に配置します。
列 1 の Blurb モジュールを完成させたら、それを XNUMX 回複製して、行の残りの列に複製を配置できます。
行全体のクローンを作成します
ページに表示する Blurb モジュールの数に応じて、行を何度でも複製できます。
Blurb モジュールを個別にカスタマイズする
もちろん、各 Blurb モジュールの個々のコンテンツを変更する必要があります。
新しい行を追加
カラムの構造
次の列構造を使用して、セクションに別の行を追加します。
間隔
行設定を開き、デフォルトで上下のパディングをすべて削除します。 これにより、この行が占有するスペースを減らすことができます。
- パディング（上下）：0px
コードモジュールを列に追加
JQuery と CSS コードを挿入する
コード モジュールを行列に追加し、JQuery および CSS コードを挿入して効果を実現します。
以下の印刷画面でわかるように、JQuery コードを script タグの間に、CSS コードを style タグの間に入れることを忘れないでください。
jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);
$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');
});
});.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}
概要
すべての手順を完了したので、さまざまな画面サイズでどのように表示されるかを最後に見てみましょう。
デスクトップコンピューター
モバイル版
今すぐDIVIをダウンロード!!!
まとめ
この記事では、共有する Blurb モジュールを使って創造性を発揮する方法を紹介しました。 サイトのWeb.
具体的には、表示されている他のモジュールをぼかして、ホバー時に Blurb モジュールを強調表示する方法を示しました。
このチュートリアルがあなたの次のプロジェクトのインスピレーションになることを願っています。 Divi. ご不明な点やご提案がございましたら、 コメントセクション それを議論する。
相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合。
また、私たちのガイドを参照することを躊躇しないでください WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
