ボタンをクリックするだけで画像を変更しますか? ページ·ビルダー Elementor ? この新しいチュートリアルでは、その方法を説明します。

本日何についてお話したいかわからない場合は、次のビデオをご覧ください。

それでは、ここにいる理由に戻りましょう。

また読みます: Elementorでテキストにカーソルを合わせて画像を変更する方法

このチュートリアルを完了するには、次のものが必要です。 ElementorのProバージョンのこのバージョンでのみサポートされているカスタム CSS コードを使用するためです。Elementor.

2列のセクションを作成してから、サイドパネルで定義します。 横柄 シュール 最小の高さそして、 最小の高さ クリックしましょう VH スライダーをに設定します 100.

画像ウィジェットを左の列にドラッグして、ライブラリから画像を挿入しましょう。

Page BuilderElementorでボタンをクリックするだけで画像を変更できます

右の列に、 タイトルウィジェット 「ChooseTheBest」というタイトル。 タブ内 形式 クリックしましょう タイポグラフィ を変更します 1での行の高さ.

また見なさい: 画像を変更する方法Elementorでテキストにカーソルを合わせる

タイトルウィジェットの下に、 テキストエディタウィジェット.

タイトル ウィジェットの上で、セパレータ ウィジェットをタブにドロップしましょう 中身、つかみましょう 270 幅について。 [要素を追加]の[テキスト]をクリックして、次のように入力します。 トレンド テキストとして。 タブ内 形式、グリースを変更し、 ギャップ シュール 2.

また発見: Elementorを使用して画像の上にテキストを表示する方法

[テキスト]セクションで、をクリックします タイポグラフィ、フォントを変更しましょう、 サイズ シュール 18グリース シュール 600.

エディター ウィジェットの下 コンテンツ、ファイルを提出しましょう 内部セクション、内部セクションの列のXNUMXつを削除し、後者にドロップします。 ボタンウィジェット

サイドパネルとタブに移動してボタンを変更しましょう 中身、 クリック アイコンライブラリ シュール アイコン アイコンを挿入します ショッピングバッグ、上のボタンの内容もクリアしましょう テキスト

タブに行きましょう 形式 ボタンのと 境界半径、 クリック % つかむ 50 すべての縁石半径と 内部マージン、つかみましょう 20.

をクリックしてボタンの色を変更して、ボタンの色をカスタマイズしましょう 古典的な のために 背景タイプ 画像のハイライト色に合わせて色を変えてみましょう。

次に、タブをクリックします 高度な 私たちのボタンの、そして ポジショニング 選択しましょう インライン(自動)。 の詳細セクション詳細設定タブ、つかみましょう 10 のために 右マージン.

このボタンを4回複製して、これらのボタンの色を変更してみましょう。

次に、画像ウィジェットを4回複製してから、画像を変更します。

L 'で詳細設定タブ、つかみましょう すべての画像 フィールドで CSSクラス 私たちの各画像の。

その後、フィールドで CSS ID 赤のハイライトのある画像の場合はred-image、緑のハイライトのある画像の場合はgreen-image、茶色のハイライトのある画像の場合はbrown-imageというように入力します。

私たちを選択しましょう セクション とで詳細設定タブ、 現場で カスタム CSSは、次のコードスニペットをコピーして貼り付けます。

.all-images{
    display: none;
}
#red-image{
    display: block;
}

(このセクションがない場合はProバージョンがありません。続行する場合は、バージョンをアップグレードする必要があります)

次に、HTMLウィジェットをページにドロップし、次のコードスニペットをコピーしてHTMLコードセクションに貼り付けます。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').on('click', function(){
        var showme = $(this).attr('data-showme')
        
        $('.all-images').hide()
        $('#' + showme).show()
    })
})
</script>

フィールドで最初のボタンを選択しましょう カスタム属性 から 属性セクション、次のコードスニペットをコピーして貼り付けます。

data-showme|IMAGE-ID-NAME

ボタンのIDでIMAGE-ID-NAME部分を変更してみましょう。これらは、赤の画像、緑の画像、青の画像のIDなどです。

したがって、ボタンごとに、IMAGE-ID-NAMEコードを適切なボタンの色に変更しましょう。

ボタンをテストしながら、作業を更新し、デスクトップ、タブレット、スマートフォンモードでプレビューします。

スマートフォンモードでは、たとえば、ボタンを中央に配置したり、余白を減らしたりすることができます。

これで、このタスクを簡単に実行できました。

Elementor Proを今すぐ入手!

まとめ

そこにそれがある ! テキストにカーソルを合わせて画像を変更する方法を示すこの記事は以上です。 そこへの行き方について懸念がある場合は、内でお知らせください commentaires.

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

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

...