おかげで、WordPress でホットスポットを使用してインタラクティブな画像を作成する方法を知りたいですか? Elementor 必須アドオン？
画像は情報伝達の優れたツールです。 画像を通じて伝えられる情報、および視覚的な形全体が理解しやすく、覚えやすいことは誰もが知っています。
Web のコンテキストでは、多くの画像形式を使用できます。 インフォグラフィック、写真、漫画、イラストなど…。
何かの構造、都市のランドマーク、地図、道順などの Web コンテンツを作成する場合、ホットスポットを使用した画像構築は優れたアイデアです。
このタイプのコンテンツのアイデアは、伝えている情報を読者が簡単に理解できるようにするインタラクティブな画像を提供することです。 各ホットスポットにツールチップを含む画像にホットスポットを追加できます。 ここに例があります。
あなたが持っている場合 ウェブサイト WordPress に基づいているため、ホットスポットを含む画像を作成するのはそれほど難しくありません。 モジュールを使用して作成できます エッセンシャルアドオン .
Essential Addons モジュールとは何ですか?
Essential Addons はアドオンですElementor。 これは 2 万以上ダウンロードされている最も人気のある MOD の 60 つです。 このアドオンは、約 XNUMX 個の追加ウィジェットを Elementor.
Essential Addons が提供するウィジェットの XNUMX つは、 EA 画像ホットスポット これを使用してインタラクティブな画像を作成できます。 Essential Addons 自体はフリーミアム アドオンですが、EA Image Hotspots ウィジェットはこのバージョンでのみ使用できるため、Hotspots で画像を作成するにはプロ バージョンを使用する必要があります。
Essential Addons モジュールを使用して Hotspots でイメージを作成する方法
まず、WordPress に Elementor および Essential Addons モジュールをインストールする必要があります。 Essential Addons のプロ版は、 ウェブサイト 正式。 一方、Elementor の場合は、無料版を使用できます。
また見なさい： Elementor でグローバル ウィジェットを使用する方法
Elementor の無料版は、 WordPressのプラグイン プラグインインストーラーの検索ボックスに「elementor」と入力してインストールできます（プラグイン – >追加).
Elementor と Essential Addons がインストールされたら、新しいページを作成します (ページ – >追加）または新品（アイテム – > 追加)そしてElementorで編集します。 ボタンをクリックすると、Elementor エディターにリダイレクトされます。 エレメントで編集する.
ホットスポットを含む画像を作成する前に、最初にレイアウトを設定できます。 これを行うには、左パネルの左下隅にある歯車アイコンをクリックして、ページ設定パネルを開きます。
また読みます： Elementorの投稿ウィジェットの使い方
ドロップダウン メニューでレイアウトを設定する レイアウト
編集ボックスのプラス アイコンをクリックして新しいセクションを追加し、左側のパネルから EA Image Hotspots ウィジェットを追加します。
左パネルの画像ピッカーをクリックして、画像を追加します。
オプションを開く ホットスポット をクリックして、アクセス ポイントを追加します。 デフォルトでは、EA 画像ホットスポット ウィジェットにはホットスポットが含まれています。 デフォルトのアクセス ポイントをクリックして、その内容を編集できます。
デフォルトでは、アクセス ポイント タイプは に設定されています。 アイコン. あなたはそれをに変更することができます テキスト または去る 見よ あなたがそれを望むなら。
タブをクリックします POSITION アクセスポイントの位置を設定します。 スライダーをドラッグして X と Y の位置を設定します。
タブをクリックします ツールチップ ツールチップのコンテンツを追加します。 ツールチップを有効にして、エディターにコンテンツを追加します。 ツールチップの位置を上、下、左、右のいずれかに設定することもできます。
さらにホットスポットを追加するには、ボタンをクリックするだけです 要素を追加 セクションで ホットスポット 上記の手順を繰り返して、ホットスポットの位置、ツールヒントのコンテンツ、およびツールヒントの位置を設定します。
セクションを開く ツールチップ設定 ツールチップのサイズとアニメーション効果を設定します。
タブに移動します 形式 ホットスポットとツールチップのスタイルを設定します。 まず、オプションを開きます 画像 画像サイズを設定します。
セクションを開く ホットスポット ホットポットをカスタマイズします。 サイズ、アイコンの色 (選択したホットスポットの種類によってはテキスト)、背景色、境界線の半径などを設定できます。
また発見： Elementor に関連アイテムを追加する方法
セクションを開く ツールチップ ツールチップをカスタマイズします。 背景色、テキスト色、タイポグラフィ (フォント サイズ、フォント ファミリー、フォント スタイル) および幅を設定できます。
ここまでで、ホットスポットを含むイメージを正常に作成できました。 結果に満足するまで、左側のパネルをいじって、ホットスポットで画像をカスタマイズできます。 完了したら、ボタンをクリックできます PUBLISH ページを公開します。
ホットスポットのある画像を Gutenberg に追加する
作業中の記事のサポート資料としてホットスポットを含む画像を追加したい場合は、プラグインを使用して Gutenberg (デフォルトの WordPress エディター) と統合できます。 グーテンベルクのエレメンターブロック. このプラグインを使用すると、Elementor テンプレートを Gutenberg ブロックとして使用できます。
上記のホットスポットを含む画像を Elementor セクション テンプレートとして保存するには、セクション ハンドルを右クリックし、 テンプレートとして保存する.
モデルに名前を付けて、ボタンをクリックします 登録者.
ホットスポットを含む画像を追加する記事を開きます。 新しいブロックを追加し、選択します Elementor ライブラリ 作成したばかりのホットスポットを含む画像テンプレートを選択します。
ElementorProを今すぐ入手!!!
まとめ
ここに ！ 方法を示すこの記事は以上です Elementor と Essential Addons のおかげで、WordPress のホットスポットでインタラクティブな画像を作成できます. そこに行く方法について懸念がある場合は、 commentaires.
ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
