ポップアップを開く方法を理解する必要がある Elementor グーテンベルクで?

オンライン コミュニティでは、議論の余地があることが常に XNUMX つあります。ポップアップです。 ポップアップを使用するかどうか疑問に思う人もいます。 しかし、私たちの意見では、作成したポップアップがシンプルで魅力的で、ユーザーにとって煩わしくない場合、ポップアップは問題ありません。

すでにポップアップを作成しているとしましょう Elementor WordPress Gutenberg エディターで開きたい。 ブログの投稿やページにポップアップを展開したいからです。 気になるのですが、こんなことは可能でしょうか? ええ、答えはイエスです。それは可能です。

この記事ではポップアップを開く方法を説明します。 Elementor グーテンベルクで。

WordPress Gutenberg Editor で Elementor ポップアップを開く方法

ステップ 1: ポップアップを準備する

作成したポップアップ テンプレートに移動します。 Elementor を初めて使用し、ポップアップの作成方法を学習したい場合は、次のチュートリアルをご覧ください。 先取特権.

ポップアップの作成が完了したら、アイテム設定パネルの左下隅にある歯車アイコン ( ️ ) をクリックして、ポップアップ パネルを開きます。 ポップアップ設定パネルで、タブに移動します 高度な フィールドにセレクターを追加します セレクターで開く . 

必ずピリオド記号をプレフィックスとして追加してください (例: .popup12345).

Gutenberg で Elementor ポップアップを開く

指定したセレクターを追加したら、ポップアップ テンプレートを更新または公開することを忘れないでください。

レマルク: タブで 表示条件 あなたのポップアップの にポップアップを表示するように構成します サイト全体; これにより、ポップアップ全体にアクセスできます サイトのWeb. また、定義したセレクターによってポップアップを表示するため、トリガーを定義する必要もありません。

Gutenberg で Elementor ポップアップを開く

ステップ 2: Gutenberg でポップアップを開く

次に、WordPress Gutenberg エディターでポップアップを開きます。

WordPress の Gutenberg エディターに移動します。 新しいものを作成できます コンテンツ (ページ/出版物) または コンテンツ 既存。 次に、ポップアップを表示するトリガーとして使用するブロックを選択します。

このチュートリアルでは、Buttons ブロックを使用します。

Gutenberg で Elementor ポップアップを開く

ポップアップを表示するトリガーとして使用するブロックを決定したら、[設定] に移動します。 ブロック – > 高度。 次に、 指定された CSS クラス で 追加の CSS クラス ( es ) チャンプ。

Gutenberg で Elementor ポップアップを開く

良い。 それでおしまい。 どのように機能したかを確認するには、プロジェクトを公開して新しいウィンドウで開きます。

Gutenberg で Elementor ポップアップを開く

ElementorProを今すぐ入手!!!

まとめ

この記事では、WordPress の Gutenberg エディターで Elementor ポップアップを簡単に開く方法を説明します。この記事がお役に立てば幸いです。最後になりましたが、ポップアップの成功は、ユーザーが コンテンツ 関連性があり、説得力のある行動喚起です。

そこに着く方法について懸念がある場合は、以内にお知らせください commentaires.

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

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

...