Elementor で WordPress Toggle コンテンツをデザインする方法

複数のセクションがあるコンテンツ、またはオプションを提供するコンテンツを表示する最良の方法は何ですか?

たとえば、価格設定ページには、月次、年次、生涯取引などのさまざまなタイプの価格設定スキームが含まれる場合があります。これらすべての取引を 1 ページに表示するのは、顧客にとって面倒な場合があります。コンテンツを利用するにはかなり下までスクロールする必要があります。

では、必要な情報とコンテンツをすべて保持しながら、ページをクリーンで最小限にするには、これをどのように分類しますか?

ここでコンテンツの切り替えが役に立ちます。スマートなインターフェースを備えたインタラクティブなコンテンツを作成できます。 

WordPress に関しては、トグルコンテンツを作成する方法はたくさんあります。ただし、最も簡単な方法はElementorを使用することです。この記事では、Elementor を使用して WordPress Toggle Content を作成する手順を説明します。

トグルコンテンツとは何ですか?

トグル機能を使用すると、ユーザーは Web ページ上のコンテンツの表示を制御できます。通常、コンテンツの切り替えは、コンテンツのさまざまなバージョンまたはセクションを表示するために Web サイトで使用されます。

コンテンツを切り替えると、コンテンツの一部だけがビューポートに表示され、他の部分はタブまたはタイトルの下にラップされます。ユーザーがタブをクリックすると、その下のコンテンツのみが表示されます。

たとえば、月次と年次の 2 つの価格設定取引がある価格ページなどです。トグルコンテンツを使用すると、毎月または年間の取引のいずれか 1 つだけが画面に表示されます。 

ユーザーが月次タブをクリックすると、月次セールが表示されます。同様に、年間タブを開くと、年間セールが表示されます。

WordPress で高度な Elementor トグルコンテンツを作成するためのステップバイステップガイド

利用可能な WordPress トグル プラグインは数多くありますが、WordPress で高度な Elementor トグル ボタンを作成する最も簡単な方法は、ElementsKit に付属しています。

ElementsKit の Advanced Toggle ウィジェットは、WordPress の切り替えコンテンツに追加機能を追加します。最も多くのカスタマイズ可能なオプションを使用して、コンテンツをよりスタイリッシュな方法で表示できます。

ElementsKit の Advanced Toggle ウィジェットを使用して、洗練された WordPress トグル コンテンツを作成する方法を次に示します。

ステップ 1: Elementor トグルボタンのスタイルを選択する

高度な切り替えウィジェットを使用するには、まずウィジェットを Elementor デザインにドラッグ アンド ドロップします。その後、切り替えコンテンツを設定し、そのスタイルをカスタマイズできるようになります。

ElementsKit Advanced Toggle ウィジェットには 2 つの異なるスタイルのボタンが付属しています。スタイルが異なるだけでなく、機能も異なります。 

スタイル 1 では、複数のタブを表示できます。これらのタブの下で、切り替えコンテンツを追加できます。表示するオプションが複数ある場合は、このスタイルを選択できます。

スタイル 2 は、従来のトグル ボタンを使用して 2 つのコンテンツを切り替えるものです。このスタイルを選ぶと、 最初の 2 つのタブのみが表示されます。 2 つのコンテンツを切り替える一般的なトグル ボタンが表示されます。 

このチュートリアルでは、スタイル 1 を使用して、よりカスタマイズ可能なオプションを示します。

ステップ 2: Wordpress のトグルメニューにタブを追加する

ElementsKit Advanced トグル ウィジェットを使用すると、クリックするだけでタブを追加できます。新しいタブを追加するには、[項目を追加] ボタンをクリックします。タブの内容ごとに、 タイトル, インジケーターの背景色, タイトルの色 通常の場合は個別に、ホバー効果は各タブに個別に適用されます。さらに、デフォルトでタブを表示したい場合は、 このタブを開いたままにしてください 特徴。

さらに、次のように設定できます。 位置合わせ タブを右、左、または中央に切り替えます。というオプション Ajaxを有効にする も利用可能です。

ステップ 3: Elementor に WordPress トグルコンテンツを追加するにはどうすればよいですか?

コンテンツ作成プロセスにより、これは「高度な」ウィジェットを切り替えます。文字通り、Elementor エディターを離れることなく、各タブのコンテンツをデザインできます。これにより、トグル ボタンを編集しているのと同じページ内でコンテンツを作成およびカスタマイズできるため、大きな利点が得られます。

トグルコンテンツを作成するには、 コンテンツセクションをクリックします トグルボタンの下にあります。あ ウィジェットエリア 画面にポップアップ表示されます。このインターフェイスでは、すべての Elementor 要素と ElementsKit 要素を使用してトグル コンテンツをデザインできます。次のオプションがあります 独自のデザインを作成する または 保存されたテンプレートを使用する。さらに、 ElementsKit テンプレート ライブラリ 素晴らしいWordPressトグルコンテンツを作成します。

ステップ 4: ElementsKit を使用して Elementor トグル ボタンをカスタマイズする

ElementsKit を使用すると、Elementor トグル ボタンのカスタマイズが簡単かつ柔軟になります。の中に スイッチコンテナセクション (「スタイル」タブの下)、選択できます。 背景の種類 トグルボタンの場合は、設定します パディング, ボックスシャドウ スタイル、そして 境界半径.

のために トグルスイッチ、境界線の半径とボックスの影を設定するオプションも利用できます。

さらに、 コンテンツ セクションでは、 タイポグラフィ タブのタイトルを切り替えます。

これだよ！ これでトグルコンテンツの準備が整いました。トグルコンテンツを追加して、Web デザインをよりスタイリッシュでダイナミックにすることができるようになりました。

詳細については、次のドキュメント全体を参照してください。 ElementsKit Advanced Toggle ウィジェットの使用方法.

Elementor トグル ボタンの作成に ElementsKit を選択する理由は何ですか?

あなたが尋ねるかもしれない非常に正当な質問は次のとおりです。 利用可能なすべてのWordPressトグルプラグインの中で、なぜElementsKitを選ぶのですか？ 1 行で答えると、これはすべての高度な機能を備えた高度なトグル ウィジェットです。

詳しく説明すると、ElemensKit には高度なコンテンツ作成機能があります。 Elementor 切り替えウィジェットのほとんどは、2 つのコンテンツのみを切り替えるオプションを提供します。 ElementsKit を使用すると、特定のスタイルで必要なだけトグル コンテンツを作成できます。さらに、同じエディターで Elementor トグル ボタンとトグル コンテンツを作成できます。これにより、WordPress でのコンテンツ作成の切り替えがこれまでより簡単になります。さらに、既製のテンプレートを使用することもできます。

選ぶ理由はここにあります ElementsKit の高度な切り替えウィジェット Elementor で WordPress 切り替えコンテンツを作成するには:

• 高度なコンテンツ作成。
• トグルコンテンツを無制限に追加できます。
• エディターを離れることなく、トグル ボタンを作成し、トグル コンテンツを 1 か所でデザインできます。
• Elementor を使用して洗練されたトグル コンテンツをデザインします。
• セクションをユーザーにとって対話型にします。
• スクロール時間を短縮してエンゲージメントを向上させます。

一言で言えば

WordPress のコンテンツの切り替えは、Web サイトのユーザー エクスペリエンスを向上させる優れた方法です。トグルを使用すると、Web サイトの外観を変更して、よりインタラクティブにすることができます。 

トグルコンテンツを作成する際、ElementsKit は最も柔軟で高度な機能を提供します。上記のガイドに従った場合は、Elementor トグル ボタンを簡単に作成できるはずです。