ElementsKit のこのギャラリー ウィジェットを使用すると、Elementor WooCommerce 製品画像を Web サイトに表示できます。この Elementor ギャラリー ウィジェットを使用して、Elementor 製品ギャラリーをカスタマイズすることもできます。また、Web サイトに Elementor フォト ギャラリー ウィジェットを追加するのに数分もかかりません。
WordPress でギャラリーを作成するにはどうすればよいでしょうか。プラグインなしで WooCommerce 製品ギャラリー スライダーを追加できますが、コーディングが苦手な方には難しいでしょう。Elementor ギャラリーを追加するにはコーディングが必要です。そのため、ElementsKit を使用してギャラリーを作成するのが最も簡単な方法です。
WordPressでギャラリーを作成する方法 #
編集したいページまたはコンテンツ > Elementorで編集 > ウィジェット > ElementsKit > ギャラリー
![](https://wpmet.com/wp-content/uploads/2022/06/Gallery.gif)
1. ギャラリーコンテンツ #
- コンテンツをクリックすると展開します
- ラベルの追加
- 画像を追加
- 画像をアップロードする
- 新しいアイテムを追加
![Elementor WooCommerce製品ギャラリーを表示する方法](https://help.wpmet.com/wp-content/uploads/2020/04/Screenshot_40-1-1024x453.png)
新しいアイテムを追加すると、画像の数が増え、ギャラリーで表示できるようになります。
フィルターラベル- フィルター ラベル名を追加または編集して、Elementor WooCommerce 製品ギャラリーをカスタマイズします。
![ElementsKitを使用してElementor WooCommerce製品ギャラリーを表示する](https://help.wpmet.com/wp-content/uploads/2020/04/Screenshot_44-1-1024x416.png)
2. レイアウト #
スタイル– レイアウトセクションではスタイルを選択できます グリッドまたは Masonary。下の画像は、グリッド スタイルで画像がどのように表示されるかを示しています。
![ElementsKit を通じて Elementor ギャラリーにスタイルを追加する](https://help.wpmet.com/wp-content/uploads/2020/04/Screenshot_41-1-1024x420.png)
列を選択- 画像ギャラリーを列ごとに表示します。ここでは、必要に応じて列番号を設定することもできます。
![WordPressでギャラリーを作成する方法](https://help.wpmet.com/wp-content/uploads/2020/04/Screenshot_42-1-1024x424.png)
画像のアスペクト比- あなたはできる 画像のアスペクト比を制御する それに応じて、レイアウトから範囲スライダーを使用して画像サイズを簡単に設定できます。
![ElementsKit を使用した Elementor 製品ギャラリーのコンテンツ編集](https://help.wpmet.com/wp-content/uploads/2020/04/Screenshot_43-1-1024x428.png)
3. 設定 #
その他の編集オプションはすべてここにあります。
- 「すべて」フィルターラベル- 追加 全て
- コンテンツの配置- デスクトップ、タブ、モバイルのビューを選択します。その後、 ライトボックスを表示 オプションを「表示」に設定し、アイコンを設定する 左/中央/右 画像の
- 位置合わせ– アイコンを設定する 上/中央/下 画像の
![](https://wpmet.com/wp-content/uploads/2020/04/imp.png)
フィルターラベルを表示– ラベル名を表示するには、それを有効にする必要があります '見せる'すると、指定したラベル名が表示されます。
![ElementsKitを使用してWordPressでギャラリーを表示する方法](https://help.wpmet.com/wp-content/uploads/2020/04/Screenshot_55-1-1024x417.png)
ライトボックスを表示–
- 表示または非表示 ライトボックス
- 設定した場合 '見せる' それから ライトボックスアイコンをアップロード あなたの選択に応じて
- 画像スライドショーを表示– 選択に応じてTRUEまたはFALSEを設定します
![WordPress で ElementsKit を使用してギャラリーを表示する](https://help.wpmet.com/wp-content/uploads/2020/04/Screenshot_56-1-1024x410.png)
再度、アイコンを選択すると、画像上にアイコンが表示され、より多くの機能が表示されます。 画像スライドショーを表示 スライドショーを表示します。
そして、アイコンを前述のように配置することができます。 コンテンツの調整 そして 位置合わせ.
![ElementsKitでElementorギャラリーをカスタマイズする](https://help.wpmet.com/wp-content/uploads/2020/04/Screenshot_45-1-1024x435.png)
- アイコンをクリックすると ページを 全画面表示
- ズームイン 画像
- クリックしてください 右側のアイコンをクリックすると右側の画像が表示されます
- クリックしてください 左側のアイコンをクリックすると左側の画像が表示されます
![コンテンツギャラリーのコンテンツを編集する](https://help.wpmet.com/wp-content/uploads/2020/04/Screenshot_48-1-1024x416.png)
画像は以下でシェアできます Facebook、Twitter、ピン それをクリックするか、画像をダウンロードしてください。
![ElementsKitでElementorギャラリーを表示する方法](https://help.wpmet.com/wp-content/uploads/2020/04/Screenshot_47-1024x519.png)
キャプションと説明を表示– 設定セクションでは 表示/非表示 オプション キャプションと説明.
![WordPressにギャラリーを追加する方法](https://help.wpmet.com/wp-content/uploads/2020/04/Screenshot_54-1-1024x408.png)
今、 ギャラリーコンテンツへ移動 もう一度書いて画像を表示したい場合は キャプションと説明.
![WordPressにギャラリーを追加する方法](https://help.wpmet.com/wp-content/uploads/2020/04/Screenshot_51-1-1024x418.png)
アップロードした画像をクリックするとキャプションと説明が表示されます
- に行く ギャラリーを編集 > 画像をクリック 編集する
- キャプションを書く
- 説明を書く
- ギャラリーの挿入をクリック
![ElementsKitを使用してWordPressでギャラリーを表示する方法](https://help.wpmet.com/wp-content/uploads/2020/04/Screenshot_52-1-1024x464.png)
最後に画像をご覧ください キャプションと説明が表示されます 今すぐ画像をご覧ください。
![ElementsKit を使用して WordPress で Elementor ギャラリーを表示する](https://help.wpmet.com/wp-content/uploads/2020/04/Screenshot_53-1-1024x402.png)
表示順序 - から 設定セクション 注文を選択 デフォルトまたはランダム Elementor WooCommerce 製品ギャラリー画像の位置を編集します。
![ElementsKit を使用して Elementor WooCommerce ギャラリー画像の順序を変更する](https://help.wpmet.com/wp-content/uploads/2020/04/Screenshot_57-1-1024x401.png)
ElementsKit は、WordPress ギャラリー ウィジェットでよく使用されるプラグインです。このドキュメントで、ElementsKit ウィジェットのシンプルなシステムについて理解していただければ幸いです。また、Web サイト用のフォト ギャラリー ウィジェットの重要性も理解していただければ幸いです。