WordPress ウェブサイトで画像を表示する退屈なスタイルから脱却したいですか? ElementsKit の画像ボックス テンプレートをお試しください。
ElementsKit(完全なElemetorアドオン)は、 19種類の画像ボックステンプレート さまざまな効果やアニメーションを備えた画像を表示します。また、テキスト、見出し、ボタン、URL、アイコンなどを追加することもできます。
これらの要素はすべて完全にカスタマイズ可能です。さらに、ElementKit イメージ ボックス テンプレートを使用して、Elementor の任意の要素を削除したり含めたりすることができます。
✨✨ 必要なプラグイン:
👉👉 エレメンター: Elementorプラグインをダウンロード
👉👉 要素キット: ElementsKitプラグインをダウンロード
ElementsKitを使用して画像ボックスを作成する #
- Elementorで新しい投稿/ページを作成したり、エキサイティングな投稿/ページを開設しましょう
- クリックしてください ElementsKit アイコン
- を選択してください 「イメージボックス」 カテゴリーから
![画像ボックスのカテゴリを選択](https://wpmet.com/wp-content/uploads/2023/03/Select-the-image-box-category.jpg)
- 見ることができます 19種類のテンプレート (無料11個、プレミアム8個) 画像ボックス用
- クリックしてください プラス記号 (+) プレビューを見る
![画像ボックステンプレートを挿入](https://wpmet.com/wp-content/uploads/2023/03/insert-image-box-template.jpg)
- クリック の上 "入れる"
- あなたのページ/投稿に表示されます
- これで、画像ボックステンプレートのスタイルやその他のプロパティを編集できます。
- カスタマイズ後、 をクリックします。 "公開"
![ElementsKit を使用して画像ボックスを作成する方法](https://wpmet.com/wp-content/uploads/2023/03/How-to-Create-Image-Box-Using-ElementsKit.jpg)
ElementsKit画像ボックステンプレートをカスタマイズする #
左側のサイドバーから、画像ボックスのレイアウト、コンテンツ、各要素のスタイルをカスタマイズできます。さらに、詳細設定から、単一の要素またはレイアウト全体の詳細なカスタマイズを行うことができます。
レイアウトのカスタマイズ #
- コンテンツの幅(ボックスまたは全幅)を選択します
- カスタム幅を設定する
- 列間隔、高さ、垂直方向の配置、オーバーフローをカスタマイズする
- ストレッチセクションのオン/オフ
![ElementsKit 画像ボックスレイアウトのカスタマイズ](https://wpmet.com/wp-content/uploads/2023/03/Highcompressed1.jpg)
コンテンツのカスタマイズ #
👉 画像
- 画像を変更する
- 画像サイズをカスタマイズする
- コンテンツエリアを設定する
- 等高を有効または無効にする
- URLを有効または無効にする
👉 体
- タイトルテキストを変更する
- タイトルHTMLタグをカスタマイズする
- タイトルの配置を設定する
👉 ボタン
- ボタンを有効または無効にする
- ボタンのラベルテキストをカスタマイズする
- URLを追加
- アイコンの追加/削除
- アイコンの位置を設定する
![ElementsKit 画像ボックスコンテンツのカスタマイズ](https://wpmet.com/wp-content/uploads/2023/03/ElementsKit-Image-box-content-Customization-.jpg)
スタイルのカスタマイズ #
👉 シャドウライン
- 左または右の影の線を選択します
- カスタム幅を設定する
- ボックスシャドウをカスタマイズする
- 背景の種類、色をカスタマイズする
- 背景画像を設定する
👉 画像
- カスタムの境界線の半径とパディングを設定する
- 通常またはホバースタイルの画像の不透明度をカスタマイズします
👉 体
- 境界線の種類、border-radius を設定する
- 背景画像、タイプ、色をカスタマイズする
- カスタムパディング、ボックスシャドウの色を設定する
- タイトルの間隔、書体、色を設定する
👉 ボタン
- パディング値、アイコンのフォントサイズをカスタマイズ
- ボタンのテキストと背景色を変更する
- 通常またはホバーのプロパティを設定する
- 境界線の種類、境界線の半径、ボックスの影を設定する
![](https://wpmet.com/wp-content/uploads/2023/03/ElementsKit-Image-box-style-Customization-.jpg)
高度なカスタマイズ #
- レイアウトの余白、パディング、幅、位置、Zインデックスをカスタマイズします
- 要素のモーション効果を設定します (例: フェードイン、ズームインアップ、バウンスイン、左スライドインなど)
- 応答性と属性をカスタマイズする
- 追加の変更のためにカスタムCSSを挿入する
![](https://wpmet.com/wp-content/uploads/2023/03/ElementsKit-Image-box-Advanced-Customization-1.gif)
ElementsKit の画像ボックス テンプレートを使用すると、Web サイトの画像をもっと興味深い方法で紹介できるようになります。また、ご質問やご提案がありましたら、お気軽にお問い合わせください。