ElementsKit を使用して 4 つの簡単なステップで Elementor イメージ マスキングを適用する

画像マスキング要素の追加

WordPress サイトを作成する際には、あらゆる側面を活用して素晴らしい Web サイトを構築する必要があります。 Elementor イメージ マスキングは、WordPress サイトに独自性と美しさを加えるための最も便利な機能の 1 つです。これにより、画像全体の外観を数秒で変更できるためです。

残念ながら、Elementor には画像マスキングを追加するためのデフォルト設定がありません。ただし、画像マスキング機能を提供する ElementsKit などの他の Elementor アドオンを使用することで、この機会を利用できます。 

それでも、適切なガイドラインに従わずに Elementor に画像マスクを追加すると混乱する可能性があります。

そのため、私たちは次のように示しました。 Elementor で写真をマスキングする最良のプロセス このブログ投稿では、最高の Elementor アドオンを使用して —ElementsKit!

Elementor の画像マスキングとは何ですか?

画像マスキングとは、 優れた技術 WordPress の画像を美しくする。 Elementor 画像にユニークな形を与え、より魅力的なものにすることができます。 WordPress では、画像マスキング用に別の要素を取得します。これを使用すると、技術的な知識やスキルがなくても画像をマスクできます。それに加えて、次のことができます。 WordPress の画像を編集する 数秒以内に。

WordPress 画像を魅力的にする以外にも、Elementor 画像マスキングには他の利点もあります。それが何なのか気になりますか?イメージ マスキング モジュールの利点をすべて探求するために掘り下げ続けてください。

WordPress で画像マスキングを使用する必要があるのはなぜですか?

Elementor Image マスキングは、独自の画像を作成するのに適しているだけでなく、画像に関連するいくつかの問題も解決します。たとえば、サイトに画像全体を表示したくない場合や、画像全体を表示することがブランドに合わない場合などです。このような場合、次のことができます。 一部のセクションを非表示にする 画像の、共有する予定の正確な部分を表示します。

これとは別に、画像マスキングは次の理由でも役立ちます。

  1. よくある退屈なウェブサイトを、 魅力的なサイト それはあなたの 後ろの競争相手.
  2. エンゲージメントが高まったため、 売上も伸びるだろうし.
  3. 画像マスキング機能は品質に大きな違いをもたらす可能性があります。これにより、 全体的な品質 WordPress の画像の。
  4. あなたはできる 商品を美しく宣伝する あなたのサイトで。

この優れた機能を活用したい場合は、最後まで使い続けてください。これにより、技術的な専門知識がなくても、オンラインで写真をマスクすることができます。したがって、WordPress 画像をマスクするプロセス全体を学び続けてください。

WordPress で画像マスキングを追加する手順

ElementsKit の画像マスキング モジュール

画像マスキング機能を備えたWordPressプラグインが多数見つかります。のような ElementsKitオールインワンの Elementor アドオンには、84 以上の他の要素とともに画像マスキング機能があります。 ElementsKitはElementor互換のプラグインなので、画像マスキングを含むあらゆる機能をドラッグ&ドロップで利用できます。

したがって、初心者でもあまり心配する必要はありません。以下の手順に従うだけで、Elementor カスタム マスクが画像に追加されます。

ステップ 1: Elementor と ElementsKit をインストールします。

最初のステップで必要なことは、 インストールしてアクティベートする サイト上の 2 つのプラグイン。 1つは エレメンター そしてもう一つは ElementsKit。また、ElementsKit のプロ機能であるため、プロ版を入手する必要があります。プラグインをインストールして有効化したら、2 番目のステップに進みます。

ステップ 2: 画像マスキング モジュールを有効にします。

ElementsKit のマスキング モジュールを有効にします。まず、あなたのところにアクセスしてください 管理パネル そして (1.) ElementsKit をクリックします。 次に、に行きます (2.) 「モジュール」タブ そして (3.) マスキングを有効にする モジュール。ついに、 (4.)「変更を保存」をクリックします。 ボタン。

ElementsKit の Elementor イメージ マスキング モジュールを有効にする

ステップ 3: Elementor マスキングを追加します。

マスキングモジュールを有効にした後、次の方法で新しいページを追加します。 (1.) 新規追加をクリック 「ページ」タブの下のオプション。次に、 を押します。 (2.) Elementorで編集する ボタンをクリックしてカスタムマスクを追加します。

マスキング画像を追加するための新しいページを作成します

画像ウィジェットを検索します 検索ボックスでウィジェットを見つけた後、 ドラッグアンドドロップしてください プラスアイコンをクリックします。

マスキング機能を利用した画像追加

ここでは、次の領域を調整してカスタム画像を追加する必要があります。

  • 画像を選択してください: メディア ライブラリから画像を選択するか、ここからファイルをアップロードします。
  • 画像サイズ: 画像に適したサイズを選択してください。
  • 配置: 画像の配置を選択します。
  • キャプション: ここから画像にキャプションを追加できます。
  • リンク: ここから画像へのリンクを追加できます。
画像をカスタマイズして独自の形状を追加します

画像を挿入して編集したら、 ElementsKitマスキングをクリックします タブと 「マスキング」を有効にする オプション。次に、次の領域を編集します。

  • 形状タイプ: 画像の形状タイプを選択します。
  • 形状を選択してください: ここでは、アップロードした画像のさまざまな形状が見つかります。 WordPress 画像を表示したい図形をクリックします。
  • 位置: ここからポジションを選択してください。
  • 繰り返す: このオプションを使用すると、作成した Elementor イメージ マスクに繰り返しを追加できます。
  • サイズ: このオプションから画像のサイズを選択します。
ElementsKit を使用して Elementor イメージ マスキングをカスタマイズする

ステップ 4: マスキング イメージを公開します。

ここで最後のステップが始まります — 「公開」を押します ボタンをクリックして、Elementor イメージのマスキングを現実のものにします。

ElementsKit を使用してマスクされた WordPress イメージを公開する

次に、マスクされた WordPress イメージをプレビューします。マスキング画像の最終的な外観は次のとおりです。

ElementsKit で構築されたマスクされた WordPress イメージの最終的な外観

以上が、ElementsKit の画像マスキング機能を使って WordPress 画像の形状をカスタマイズする方法です。このプロセス全体には数分もかかりません。 Elementor に画像マスキングを追加するには、次のチュートリアル ビデオを確認することもできます。

WordPress 画像をマスクする

ビジネス目的でも個人使用でも、今日では誰もがウェブサイトを持っています。したがって、注目を集めることができない一般的な Web サイトを作成する可能性が依然として高くなります。しかし、今ではチャンスが増えているため、状況は変わりつつあります。画像マスキングは、WordPress 画像をより美しく、魅力的にするために使用できるユニークな機能の 1 つです。

この優れた機能を最も簡単かつ最短の方法で利用する方法はすでに学習しました。上記の手順を 1 つずつ実行して、サイト用のエレガントなマスク画像を作成してください。 ElementsKit 次のような他の優れた機能も提供します 画像ホットスポット, WPMLの互換性, Zoomミーティング, カウントダウンタイマー, モーダルポップアップ, フリップボックスオーバーレイとホバーこれらの機能により、技術的な知識がなくても、競争力のある変換サイトを構築できます。


コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です