アコーディオンウィジェットの5つのクリエイティブな使い方:Elementorでグラフや画像などを埋め込む方法

ウェブ開発者はよく"アコーディオンウィジェット"(アコーディオン)を使ってコンテンツを整理することができます。アコーディオンウィジェットは、レイヤー化されたフォーム、折りたたまれたボックスでコンテンツを表示したり隠したりできるので、ページをすっきりと見せ、ユーザーとのインタラクション体験を向上させます。アコーディオンウィジェットは入れ子要素アコーディオン その代わりに、各セクションで以下のような柔軟性を提供します。画像、ボタン、ビデオなど、他のデザイン要素を入れ子にする。その他

5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容

ステップ1: アコーディオンウィジェットの追加

  1. Elementorエディタを開くWordPressの ウェブページもしかしたらカードElementorページエディタで、Elementorページエディタを開きます。
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. アコーディオンウィジェットの追加左ウィジェットバーで検索 "アコーディオン"ウィジェット。見つけたら、ページのデザインエリアにドラッグします。
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容

ステップ2:アコーディオン項目の設定

  1. アコーディオン・アイテムの作成デフォルトでは、Elementorのアコーディオンウィジェットには3つの初期項目が含まれています。これは"追補「をクリックしてアイテムを追加するか、"X"不要な項目を削除します。
  2. アコーディオン項目のタイトルと内容の編集アコーディオンの各項目には"キャプション「そしてエレメント(CSS ID、アイコンなど)」を入力します。各項目のタイトル部分をクリックすると、タイトルを「グラフィカルプレゼンテーション」「ビデオプレゼンテーション」などに変更するなど、テキストを編集することができ、ユーザーが各項目の内容を理解しやすくなります。
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容

アコーディオン・アイテムへのクリエイティブ・コンテンツの埋め込み

1.アコーディオン項目にチャートを埋め込む

チャートはデータを視覚化し、詳細なプレゼンテーションのためにアコーディオン項目に配置するのに適しています。

動く::

  1. アコーディオンアイテムのコンテンツエリアをクリックします。
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. HTML "または "ショートコード "ウィジェットを追加します。
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. チャートコードを貼り付けてください。 グーグル チャート もしかしたら チャート 生成されたコードのスタイルとサイズを調整して、チャートがアコーディオンのコンテンツに合うようにします。
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容

というわけで、最初の部分のアイコン追加は終了です。

2.アコーディオン内の埋め込み画像ギャラリー

画像ギャラリーは、製品プレゼンテーションやケーススタディに特に適しており、ユーザー体験をより視覚的なものにします。

動く::

  1. アコーディオンアイテムのコンテンツエリアにドラッグ&ドロップ "画像ギャラリー「ウィジェット
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. 表示したい画像をアップロードし、ギャラリーのレイアウト(グリッド、整列、ウォーターフォールなど)を設定します。 回転効果次に Elementorの「画像カルーセル」ウィジェット.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. アコーディオンを開いたときにギャラリーが整然と見えるように、画像のサイズを変更し、整列させます。

3.動画コンテンツの埋め込み

動画を埋め込むことで、ユーザーはより直感的な方法で情報を視覚化することができ、製品のデモンストレーションやチュートリアルに適しています。

動く::

  1. アコーディオン・アイテムのコンテンツ・エリアに"ビデオ「ウィジェット
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. 動画のリンクを貼り付けてください。 ユーチューブ もしかしたら ヴィデオ).
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. 自動再生やミュートなど、動画の再生オプションを設定したり、ページスタイルに応じて動画のサイズを変更したりできます。
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容

4.ユーザーを誘導するボタンの追加

アコーディオンにボタンを追加することで、ユーザーを次のようなアクションに導くことができます。詳細ページまたはフォームへジャンプ.

動く::

  1. アコーディオンアイテムのコンテンツエリアにドラッグ&ドロップ "ボタン「ウィジェット
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. ボタンのテキストを入力してください。さらに詳しく「またはお問い合わせ".
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. ボタンのリンクを設定し、スタイルオプションでボタンの色とサイズをカスタマイズします。
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容

5.コンタクトフォームを埋め込んでインタラクションを強化

アコーディオンアイテムにコンタクトフォームを追加することで、ユーザーはページを離れることなく対話することができます。

動く::

  1. 利用する WPForms もしかしたら コンタクトフォーム7 などのプラグインを使ってコンタクトフォームを作成することができます。
  2. フォームから生成されたショートコードをクリップボードにコピーします。
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. アコーディオン・アイテムのコンテンツ領域で、" をドラッグします。ショートコード"ウィジェットにフォームのショートコードを貼り付けます。フォームがページのデザインスタイルと一致するようにスタイルを調整してください。
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容

カスタム・アコーディオン・スタイル

コンテンツの埋め込みが完了したら、Elementでアコーディオンのスタイルをさらにカスタマイズして、ページ全体のスタイルに合わせることができます。

  1. スタイル設定の拡張の左側。タイプ"タブでは、アコーディオンタイトルの色、フォント、背景色を調整できます。
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. アコーディオンアイコンの調整を参照されたい。エレメント"探せ"アイコン"セクションで、展開されたアイコンと折りたたまれたアイコンのスタイルをカスタマイズできます。
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. スペーシングとアニメーションの最適化"上級"設定により、アコーディオンの間隔、ボーダー、トランジション・アニメーション効果を調整し、スムーズなユーザー体験を実現できます。
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容

概要

アコーディオンウィジェットは、ページレイアウトをより簡潔にし、コンテンツを折りたたんだり広げたりすることでユーザーエクスペリエンスを向上させる、ウェブ開発でよく使われるコンテンツプレゼンテーションツールです。Elementorでアコーディオンウィジェットを追加するのはとても簡単で、開発者はチャート、画像、動画、ボタン、問い合わせフォームなどを埋め込んで、各アコーディオンアイテムをより生き生きとしたインタラクティブなものにすることができます。カスタムスタイルを使えば、開発者はページのニーズに合わせてアコーディオンの外観やアニメーションを調整し、美しく機能的なコンテンツ表示を作成することもできます。

アコーディオンウィジェット(アコーディオン)を使用する際によくある問題と解決法を以下に示します:

  1. アコーディオン・アイテムは広げたり収納したりできません。
    • ラショナル通常はJavaScriptのコンフリクトや他のプラグインの干渉が原因です。
    • 治療他のプラグインを無効にしてみてください。Elementorと関連するすべてのプラグインが最新であることを確認してください。
  2. アコーディオン項目が空白です
    • ラショナルコンテンツエリアが正しく追加されていないか、読み込みエラーが発生しました。
    • 治療アコーディオンの各項目の内容が記入されていることを再チェックし、内容が正しくフォーマットされていることを確認します(HTML、ショートコードなど)。
  3. スタイルが有効になりません
    • ラショナルカスタムスタイルはテーマや他のプラグインのスタイルによって上書きされます。
    • 治療: Elementorのスタイル設定で優先順位の高いカスタムCSSを使用するか、テーマのスタイルを確認し、それに応じて調整してください。

お問い合わせ
記事が読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ!
電話:020-2206-9892
QQ咨询:1025174874
Eメール:info@361sale.com
勤務時間:月~金、9:30~18:30、祝日休み
投稿者:photon fluctuations、リツイート(帰属表示付き):https://www.361sale.com/ja/22410

好き (0)
前へ 1日前
次のページ 23時間前

おすすめ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

お問い合わせ

020-2206-9892

QQ咨询:1025174874

Eメール:info@361sale.com

勤務時間:月~金、9:30~18:30、祝日休み

客服微信
WordPress サイトで問題が発生した場合は、以下を参照してください。作業指示書の提出当社の技術チームが、プロフェッショナルな修復サービスをご提供いたします。