コーディングの知識がなくてもカスタム Elementor ウィジェットを構築する方法

Elementor ウィジェットは、ナビゲーション メニュー、ボタン、画像ボックス、FAQ セクションなどのページ構築要素を追加するのに役立ちます。いくつかの Elementor アドオンには Elementor ウィジェットが付属していますが、これらのアドオンで必要なウィジェットをすべて入手できるとは限りません。

ここで、ニーズを満たすためにカスタム Elementor ウィジェットが必要になります。 ElementsKit には、必要なウィジェットをすぐに構築できる機能が備わっています。

この投稿では、コーディングを行わずに最小限の方法でカスタム Elementor ウィジェットを構築する方法を説明します。

さあ、進めましょう…さあ！

ウィジェットとは何ですか?

ウィジェットは、特定のタスクを完了するために使用される小さな GUI アプリケーションを指します。ウィジェットは、ボタン、チェック ボックス、ダイアログ ボックス、スクロール バー、検索ボックス、地図、時計、訪問者カウンターなど、Web サイトのあらゆる要素になります。

例として Elementor ページ ビルダーを考えてみましょう。このページビルダーには多数の機能が装備されています 組み込みウィジェット。最高の無料 Elementor ウィジェットを追加して、Web ページをデザインできます。

ただし、必要に応じて、Elementor のカスタム ウィジェットを作成することもできます。そしてその ElementsKit ウィジェット ビルダー そうするのに役立ちます!

ElementsKit Widget Builder を使用してカスタム ウィジェットを構築する利点

ウィジェットが Web サイトに優れた機能を追加することは誰もが知っています。ただし、カスタム タスクを実行するのに適切なウィジェットを見つけることはほぼ不可能です。その場合、カスタム ウィジェットを構築する以外に選択肢はありません。

また、ウィジェット ビルダーを使用すると、このカスタム ウィジェットの構築プロセスがこれまでより簡単になります。ウィジェット ビルダーを使用する主な利点を見てみましょう。

• コーディングの知識がなくてもカスタム ウィジェットを構築できます
• ウィジェットは完全にレスポンシブです
• 要素をドラッグ アンド ドロップして視覚的にウィジェットを作成します
• 構造化コンテンツをサポート
• スタンドアロンのコードエディターが含まれています
• 複数のフィールドタイプなどをサポートします。

これらは、ElementsKit ウィジェット ビルダーの主な利点です。 

ElementsKit (無料) を使用してカスタム Elementor ウィジェットを構築するにはどうすればよいですか?

完全に機能するウィジェットは、Web サイト構築エクスペリエンスを大幅に向上させます。したがって、Web サイト用のカスタム Elementor ウィジェットを構築することが不可欠です。

カスタム Elementor ウィジェットを構築する方法を知りたいですか?ここでは、ElementsKit ウィジェット ビルダーを使用して無料のカスタム Elementor ウィジェットを構築する手順を段階的に説明します。

前提条件

Elementor カスタム ウィジェットを構築するには、次のプラグインが必要です。

• エレメンター
• ElementsKit

これらのツールを WordPress Web サイトにインストールしてアクティブ化したら、Elementor カスタム ウィジェットの作成を開始します。

ステップ #1: ウィジェット ビルダーをオンにする

ウィジェット構築プロセスを開始するには、ダッシュボード パネルからウィジェット ビルダー モジュールがオンになっていることを確認してください。

これをオンにするには、ElementsKit ダッシュボード パネルに進み、 モジュール。モジュールセクションで、「Widget Builder」モジュールを見つけてオンにします。

ウィジェット ビルダーがオンかオフかを確認するプロセスは次のとおりです。

ウィジェットビルダーをオンにする

「」をクリックすることを忘れないでください。変更内容を保存モジュールをオンまたはオフにした後、' ボタンを押します。

ステップ #2: ウィジェットを作成する

新しいウィジェットを作成するには、次の手順に進みます。 ElementsKit > ウィジェットビルダー。新しいページには、「」という新しいボタンがあることに気づくでしょう。新しく追加する”。そのボタンをクリックすると、Elementor の左側のパネルに新しいウィジェットが作成されます。

新しいウィジェットの作成

このページからウィジェットのタイトル、アイコン、カテゴリをカスタマイズできるようになりました。カスタム ウィジェットにウィジェットのタイトルとアイコンを追加します。 Font Awesome アイコン ライブラリの任意のアイコンを使用できます。

ウィジェットのタイトルとアイコンのカスタマイズ

ウィジェットに名前を付けるときは、タスクとの関連性を保つようにしてください。関連するアイコンをウィジェットに追加します。

ステップ #3: 新しいウィジェットのカスタマイズ

Elementor ウィジェットの開発が完了したので、今度はカスタマイズします。 Elementor 用の新しいカスタム ウィジェットを構築するのに、深いコーディング知識は必要ありません。 ElementsKit ウィジェット ビルダーを使用すると、プロセスがこれまでよりスムーズになります。 

ElementsKit ウィジェットを左側のパネルからドラッグし、中央のパネルにドロップするだけです。ドロップされたウィジェットは、右側のボードに変数を自動的に作成します。

その変数をクリックすると、コード エディターに自動的に組み込まれます。必要に応じて、コード エディターを使用して HTML、CSS、JavaScript マークアップを追加できます。

新しいウィジェットを構築するかカスタマイズを行った後、「保存」ボタンをクリックすれば完了です。

詳細なプロセスは次のとおりです –

新しいウィジェットの構築

これらのコントロールを [スタイル] タブまたは [詳細設定] タブに追加することもできます。

ステップ #4: ウィジェット フィールドの変更

ウィジェットの作成中に、すべてのウィジェットのフィールドまたは要素をカスタマイズできます。たとえば、ラベル名、プレースホルダー、デフォルト値などをカスタマイズできます。

ただし、カスタマイズ オプションはすべてのパネルで同じではありません。コントロール パネルが異なれば、入力フィールドも異なります。

ウィジェットフィールドのカスタマイズ

プロのヒント: 同じコントロールを複数回追加する場合、名前は一意である必要があります。そうしないと、変数の競合が発生します。

ステップ #5: 新しく構築されたウィジェットをプレビューする

新しく構築されたウィジェットは、既存の Elementor ウィジェットとまったく同じように機能します。新しく構築されたカスタム ウィジェットは、Elementor パネルで使用できるようになります。新しいウィジェットを確認するには、新しい Web ページを開き、ウィジェットを新しい Web ページにドラッグ アンド ドロップします。

新しいウィジェットを確認する

プロのヒント: すべての ElementsKit コントロールを追加して、Elementor ウィジェット ビルダーを介して Elementor カスタム ウィジェットを構築できます。より多くの Elementor コントロールにアクセスするには、ElementsKit プロ バージョンを入手してください。

ElementsKit ウィジェット ビルダーの詳細については、以下のビデオをご覧ください。

ElementsKit でサポートされるコントロール フィールドのリスト

ElementKit は、カスタム ウィジェットを構築するための多くのコントロール フィールドを提供します。サポートされている制御フィールドのリストは次のとおりです –

• 文章 – テキストフィールドはテキスト入力を取得するために使用されています。
• 番号 – ユーザーは、番号制御フィールドを介して番号を入力できます。
• テキストエリア – textarea フィールドは、数字、テキスト、記号などを入力するために使用されます。
• ウィシウィグ – WordPress TinyMCE リッチテキスト エディターです。
• コード – このコントロールは、Ace エディターに基づいたコード エディターを追加します。
• 隠れた – 非表示の入力フィールドは、コントロール パネルに入力フィールドを提供せずに、データをデータベースに直接保存するために使用されます。
• スイッチャー – スイッチャーは、チェックボックスを派手に表現したものです。 Web ページのさまざまなブロックや要素を表示/非表示にするために使用されます。
• 選択する – 選択オプションでは、ユーザーが選択できる複数のオプションが提供されます。ドロップダウン メニューにオプションが表示されます。 
• 選ぶ – [選択] は、アイコンやその他のスタイルまたは配置設定を含むボタンまたはボタンのグループを表示するために使用されます。
• 色 – アルファ スライダーが詰め込まれたカラー ピッカー フィールドを有効にします。
• フォント – フォント コントロールを使用すると、ユーザーは Google フォント ライブラリからフォントを選択できます。
• 日付時刻 – 日時ライブラリは、 Flatpicr ライブラリ をクリックして日付と時刻を選択します。 
• URL – URL フィールドにはボタン付きのリンクが表示されます。同じタブまたは新しいタブ内でリンクを開くボタンを設定したり、nofollow にすることができます。
• メディア – ユーザーはこのセクションを使用してさまざまなメディアを選択できます。WordPress メディア ライブラリからのメディア ファイルが表示されます。
• アイコン – アイコン コントロールを使用すると、ユーザーは Font Awesome および ElementsKit lite アイコン ライブラリからアイコンを追加できます。ユーザーは、WordPress メディア ライブラリからカスタム アイコン ライブラリをアップロードすることもできます。
• スライダー – スライダーは、数値範囲を選択するために使用されるドラッグ可能なスケールです。
• 寸法 – 寸法コントロールは、要素に適切な場所を設定するための 4 つの入力パネルで構成されます。入力パネルは上、右、下、左です。 
• 国境 – ユーザーは境界線の種類、幅、色をカスタマイズできます。
• 背景 – 背景コントロールを使用すると、ユーザーは背景画像、ビデオ、色を追加できます。ビデオに静的カラーまたはグラデーションカラーを追加できます。
• ボックスシャドウ – ボックス シャドウでは、ボックスの周囲に 5 種類の異なる影が表示されます。水平影、垂直影、影のぼかし、影の広がり、カラフルな影が含まれます。
• テキストシャドウ – ボックス シャドウと同様に、テキスト シャドウ コントロールにも 4 つの異なるコントロールが用意されています。水平方向の影、垂直方向の影、影のぼかし、文字の周囲のカラフルな影です。
• タイポグラフィ – タイポグラフィにより、ユーザーはフォント ファミリー、フォント サイズ、フォントの太さ、フォント スタイル、行の高さ、テキスト変換、および文字間隔をカスタマイズできます。
• 画像の寸法 – 画像の寸法コントロールは、画像の高さ、幅、および適用ボタンで構成されます。
• 選択2 – 選択コントロールのようなドロップダウン メニューも作成されますが、より多くのスタイルとデザインが追加されます。
• ホバーアニメーション – このコントロールは、Hover.css ライブラリに基づいてさまざまな選択ボックスにアニメーションを追加します。
• 入場アニメーション – 入口アニメーション コントロールを使用すると、Animate.css ライブラリに基づいてボタンの外観をカスタマイズできます。

これらは、カスタム Elementor ウィジェットの構築中に使用できる ElementsKit ウィジェット ビルダーのコントロールです。

最後の言葉

これにより、ElementsKit を利用してカスタム Elementor ウィジェットを簡単に構築できるようになります。 ElementsKit には、Elementor ページ構築の労力を最小限に抑える可能性のある大量の組み込みウィジェットが付属しています。

同時に、お気に入りの Elementor カスタム ウィジェットを作成する最小限の方法も提供します。次は、あなたが ElementsKit をインストールして選択し、Elementor カスタム ウィジェットを構築する際にアドオンのメリットを享受する番です。