Elementorテーマチュートリアル：Elementorテーマに画像と動画のポップアップを実装する方法（無料版）

ポップアップするプレビュー画像や動画は、ウェブサイトをデザインする際にとても便利なインタラクションです。Elementor用ハッピーアドオン 無料で強力なウィジェットが提供されています。ライトボックス(ライトボックス）ガジェット画像や動画のポップアップ・ウインドウ表示効果をコーディングなしで簡単に実現し、ページのインタラクティブ性とビジュアル・アピールを高めることができます。

この記事ではハッピーアドオン画像や動画のポップアップを実装し、より魅力的なページにするための実践的なヒントを提供する。

ElementorのHappy Addonsとは何ですか？

Elementor用ハッピーアドオン ElementorはElementorの拡張プラグインです。ウィジェットやエフェクトのパワフルで柔軟なデザインを多数提供し、ユーザーがより効率的にプロフェッショナルなレベルのウェブサイトページを構築できるようサポートします。個人ブログ、Eコマースサイト、企業サイト、クリエイティブポートフォリオなど、用途は様々です。ハッピーアドオン どちらも非常に役に立つ。

プラグインの特徴

リッチ・ウィジェット・コンポーネント::ハッピーアドオン 以上内蔵 100ウィジェット(ウィジェット)、コンテンツ・プレゼンテーション、インタラクティブ機能、レイアウト支援など幅広い側面をカバーしている。

無料で、Proバージョンと互換性があります：プラグイン無料版歌で応えるプロフェッショナル版2つのモードがあります。無料版にはすでに多くの実用的な機能が含まれており、ウェブサイト構築の基本的なニーズのほとんどに適しています。プロフェッショナル版では、より高度な特殊効果と商用利用コンポーネントをアンロックし、複雑なページや企業レベルのプロジェクトに適しています。
豊富なスタイルとアニメーションのサポートフローティングアニメーション、回転、拡大縮小、透明度、フィルターなどがサポートされています。 CSSアニメーション効果その結果、より視覚的に魅力的なページになります。コーディングなしでダイナミックなページ効果を作成できます。
既製のテンプレート・スニペット：Happy Addons オフィシャルサイトではプレハブ・デザイン・テンプレートユーザーは ライブコピーの特徴自分のウェブサイトにワンクリックでコピーできるので、デザインや開発の効率が劇的に向上します。

ハッピーアドンの仕組み

使い方1：ボタントリガー式ライトボックス（ボタンタイプ）

1.ウィジェットの追加

ある エレメンタ エディターで "ライトボックス"をクリックし、ページ・キャンバスにドラッグする。

2.ボタンテキストとアイコンの設定

クリック "タイプ"を選択します。ボタン"タイプです。ボタンのテキストはカスタマイズ可能で、アイコンはアイコンライブラリから適切なものを選ぶことができる。

3.ポップアップ・コンテンツの種類を選択する

クリック "ライトボックス・タイプ"オプションで、表示するコンテンツの種類を選択できる：

ビデオ
写真（イメージ）

ビデオ設定（ビデオライトボックス）：

バッキング ユーチューブそしてヴィデオそしてセルフホスト
動画ファイルはメディアライブラリから直接アップロード可能
ビデオ再生の開始時間と停止時間を設定し、必要なクリップのみを表示することができます。

画像設定（画像ライトボックス）：

メディアライブラリーから選択可能写真コンテンツのポップアッププレビューとして

4.スタイルのカスタマイズ

で "タイプ"タブでは、ボタンの色、ボーダー、タイポグラフィ、ホバー状態などを設定して、ウェブサイトのスタイルに合ったビジュアルスタイルを作成できます。

使い方2：画像トリガーライトボックス（画像タイプ）

1.トリガータイプの切り替え

左側の設定パネルの一番上のドロップダウンメニューで、トリガータイプを"画像".

2.画像の選択

2つの画像を設定する必要がある：

ページに表示される画像(トリガー）
クリックするとプレビュー画像が表示されます。(ポップアップウィンドウの内容）

どちらの画像もメディアライブラリーから選択できる。

3.スタイル設定

スタイル]タブでは、画像ボタンに角丸、ボーダー、シャドウを追加したり、CSSフィルタを使用して高度な画像効果を得ることもできます。

上級者向けヒント：テキストのみのボタントリガーを作成する

背景色のついたボタンは使いたくないが、テキストでライトボックスをトリガーしたい場合は、次のようにします：

ボタンの内側の余白（パディング）を取り除く
背景色を透明に設定する
カスタム・フォント・カラーとホバー・ステート

これにより、ハイパーリンクのように見えるテキストのみのボタンが作成され、ポップアップ効果が発動する。

ディスプレイ効果

概要

レバレッジ Elementor用ハッピーアドオン 提供 ライトボックス ウィジェットは、コードを一行も書くことなく、ページにインタラクティブ性と美しさを加えることができ、訪問者がコンテンツの表示にもっと集中できるようにし、全体的なユーザーエクスペリエンスを向上させます。もっとWordPress関連の知識を知りたい方は光子ゆらぎネットワーク毎日の更新はいつでも可能だ。WordPressチュートリアルと情報、そして最も雰囲気のある交流のコミュニティお互いにコミュニケーションを取り、一緒に前進していくことができるだろう！

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み