ディビ：ホバリング時またはクリック後に複数の要素のスタイルを変更する方法

パー ガエタン | Divi, Diviチュートリアル

複数の要素のスタイルを変更しますか? Divi ホバー時またはクリック後？

このチュートリアルでは、ホバーまたはクリックで複数の要素のスタイルを変更する方法を示します Divi. 

まず、組み込みの設計オプションを利用します。 Divi セクションのレイアウトを設計します。 

次に、カスタム CSS と組み合わせて使用​​できる簡単な jQuery スニペットを示し、ボタンにカーソルを合わせるかクリックしたときに、このセクションの任意の要素のスタイルを調整します。 

これは (特に初心者にとって) 複雑に聞こえるかもしれませんが、実行するのがいかに簡単であるかに驚くかもしれません。

のは、始めましょう！

概要

ここでは、このチュートリアルで実現する設計の簡単な概要を示します。

ボタンホバーで要素を変更する

ホバー時またはクリック後にいくつかのDivi要素のスタイルを変更します

ボタンをクリックした後の要素の変更

ホバー時またはクリック後にいくつかのDivi要素のスタイルを変更します

Divi Builderでページを作成することから始めましょう

参照： Divi: ホバー時に回転ホイール メニューを作成する方法

WordPress ダッシュボードから、 ページ>新規追加 新しいページを作成します。

タブに変換された区切り線

わかりやすいタイトルをつけてクリック DiviBuilderを使用する

その後、クリック 構築を開始 (ゼロから構築)

タブに変換された区切り線

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

パート 1: セクション レイアウトの設計

まず、XNUMX つの列を持つ新しい行を作成します。

セクション設定

モジュールを追加する前に、セクション設定を開き、以下を更新します。

  • 背景: #ffffff

セクション区切りを追加しましょう

  • ディバイダー（上）
    • スタイル: スクリーンショットを参照
    • 色: #ffffff
    • 高さ: 5vw
  • ディバイダー（下）
    • スタイル: キャプチャを参照
    • 色: #ffffff
    • 高さ: 5vw
    • パディング (上下): 6vw

画像（ホバー前）

XNUMX 列の行の左の列に、新しいイメージ モジュールを追加します。

次に、ハイライトしたい画像をアップロードします。 

タブの下 設計、配置を更新し、オプションを有効にします 強度 全幅.

  • 画像の配置: 中央揃え
  • 強度全幅: はい

画像 (ホバー時またはクリック後)

次に、ボタンをホバー/クリックしたときに表示される別の画像を作成します。

イメージを作成するには、前のイメージ モジュールを複製します。

次に、新しい画像をアップロードします。 ホバー/クリックすると他の画像が置き換えられるため、画像は他の画像と同じサイズである必要があります。

この画像では、絶対位置を指定します。 これにより、ページ上の実際のスペースを占有することなく、画像が他の画像の真上に配置されます。

  • ポジション: アブソリュート

タブの下 設計で、フィルタ オプションの下の不透明度を変更して、画像が完全に見えないようにします。

  • 不透明度: 0%

テキストモジュールを追加する

右側の列に、新しい Text モジュールを追加します。

次に、次の HTML コードをボックスに貼り付けます。 コンテンツ 本体から:

<h3><span>Créer</span> Votre Blog <span>avec BlogPasCher</span></h3>

テキスト内の一部の単語がタグで囲まれていることに注意してください スパン. これは、後でカスタム CSS を使用してこれらの単語をターゲットにしてカスタマイズする方法です。

タブの下 設計で、H3 スタイル オプションを次のように更新します。

  • 見出し 3:
    • フォント: モントセラト
    • フォントの太さ フォントの太さ: Ultra Bold
    • スタイル: TT
    • テキスト サイズ: 60 ピクセル (コンピューターとタブレット)、40 ピクセル (スマートフォン)
    • 文字間隔: 0,06em
    • 行の高さ: 2 em

次のセクションでは、スタイルの変更を開始するために使用するボタンを追加します。

ボタンのセクションを作成する

まず、現在のセクションの下に新しい通常のセクションを作成する必要があります。

次に、セクションの列に行を追加します。

ボタンを追加

列に、新しいモジュールを追加します ボタン.

ボタンのテキストを「続き...」に変更します。

タブに切り替えます 設計 ボタンのデザインを次のように更新します。

  • ボタンにカスタム スタイルを使用する: はい
  • テキストサイズ: 16px
  • 文字色：#ffffff
  • ボタンの背景 (デスクトップ): #4b4baf
  • ボタンの背景 (ホバー): #67ddc1
  • 境界線の幅: 0 ピクセル

また読みます： Divi: メニュー モジュールにハンバーガー アイコンを追加する方法

  • ボタンの文字間隔: 4px
  • フォント: モントセラト
  • フォントの太さ: セミボールド
  • ボタンのフォント スタイル: TT
  • 余白 (下): 0px
  • パディング (上下): 1.5em
  • パディング (左右): 4em

パート 2: CSS クラスを要素に追加する

設計が整ったので、カスタム コード (CSS と JQuery) を使用して残りの設計変更を行います。

ただし、カスタム コードの追加を開始する前に、ボタンにホバー/クリックしたときに変更するすべての要素に CSS クラスを追加する必要があります。

セクションに CSS クラスを追加する

セクションに CSS クラスを追加するには、セクション設定を開き、タブをクリックします。 高機能. 次に、次の CSS クラスを入力します。

  • CSS クラス: et-change-style_section

画像モジュールに CSS クラスを追加する

次に、左側の列の最初の画像の設定を開き、次の CSS クラスを追加します。

  • CSS クラス: et-before-image

これは、ボタンのホバー/クリックの「前」に表示される画像になります。

レイヤー モーダルを使用して、XNUMX 番目の画像 (不透明度フィルターで非表示になっている画像) の設定を開き、次の CSS クラスを追加します。

  • CSS クラス: et-after-image

これは、ボタンをホバリング/クリックした「後」に表示される画像になります。

Text モジュールに CSS クラスを追加する

次に、次の CSS クラスを右側の列のテキスト モジュールに追加します。

  • CSS クラス: et-style-text

Button モジュールに CSS クラスを追加する

最後に、次のようにカスタム CSS クラスを下部のセクションのボタンに追加します。

  • CSS クラス: et-toggle-button

後でコードでホバー/クリック機能のボタンをターゲットにするために、このクラスが必要です。

パート 3: カスタム コードを追加して、ホバーまたはクリックでスタイルを変更する

すべての CSS クラスが配置されたので、必要なコードを追加して、ボタンにカーソルを合わせたりクリックしたりしたときに、これらすべての要素のスタイルを変更できます。

コード モジュールを追加する

コードを追加するには、下部セクションのボタンの下にコード モジュールを追加します。

jQuery コードを貼り付けます

次に、次の JQuery を貼り付けます。 コードを HTML ドキュメント (JS ファイルではなく) に追加するときは、必ずスクリプト タグでコードをラップしてください。

(function($) {
    $(document).ready(function(){
        $('.et-toggle-button').hover(function(){
            $('.et-change-style_section').toggleClass('et-change-style_active');
            var $this = $(this);
            $this.toggleClass('et-toggle-button_active');
        });
    });
})( jQuery );

カスタム CSS で要素のスタイルを変更する

コード モジュールを開き、次のカスタム CSS を JQuery スクリプトの上に貼り付けます。必要なスタイル タグで必ずラップしてください。

.et_pb_section.et-change-style_section.et-change-style_active {
  background-color:#484db0 !important;
}

次に、次の追加 CSS をスタイル タグに貼り付けます。

.et-change-style_active .et-after-image {
  filter: opacity(100%);
}
.et-change-style_active .et-before-image {
  filter: opacity(0%);
}

次に、残りの CSS をスタイル タグ内に貼り付けます。

.et-change-style_active .et-style-text h3, .et-change-style_active .et-style-text p {
  color: #ffffff;
}
.et-change-style_active .et-style-text h3 span {
  color: #67ddc1;
}
.et-toggle-button_active {
  transform: scale(1.1);
  background-color: #67ddc1 !important;
}  
.et-change-style_active, .et-before-image, .et-after-image, .et-style-text h3  {
  transition: all 0.3s;
}

これらの CSS スニペットは、同じ概念を使用して、セクション (またはボタン) に新しいクラスがある場合に要素のスタイルを変更します。

ホバー時のDivi要素

最終結果（概要）

コードを追加したら、変更を保存し、ページを開いて結果を表示します。 ボタンにカーソルを合わせると、対象のアイテムがどのように変化するかに注目してください。

ホバー時またはクリック後にいくつかのDivi要素の外観を変更します

クリックでスタイルを変更

クリック機能を追加するには、現在の JQuery を次のものに置き換えます (再度、スクリプト タグでラップされていることを確認してください)。

(function($) {
    $(document).ready(function(){
        $('.et-toggle-button').click(function(e){
            e.preventDefault();
            $('.et-change-style_section').toggleClass('et-change-style_active');
            var $this = $(this);
            $this.toggleClass('et-toggle-button_active');
            if ($this.hasClass('et-toggle-button_active')){
                $this.text('Précédent...');
            } else {
                $this.text('Suite...');
            }
        });
    });
})( jQuery );

これが最終結果です。

ホバー時またはクリック後にいくつかのDivi要素のスタイルを変更します

今すぐDIVIをダウンロード!!!

まとめ

何かにカーソルを合わせたりクリックしたりしたときに、ページ上の複数の要素をターゲットにしてスタイルを設定できることは、Web デザインで役立つスキルです。 

この手法は、さまざまなユースケース (前後、CTA など) に使用できます。

もちろん、CSS と JS/JQuery を少し知っていると役に立ちます。 しかし、このチュートリアルで見たように、驚くべき結果を得るために深いコーディング知識は必要ありません!

このチュートリアルがあなたの次のDiviプロジェクトに刺激を与えることを願っています。 懸念や提案がある場合は、 コメントセクション それを議論する。

相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.

しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.

...

コメントを投稿

あなたのメールアドレスは公開されません。 必須フィールドは、マークされています *

このサイトでは、望ましくないものを減らすためにAkismetを使用しています。 コメントデータの使用方法の詳細.