近年、デザインにおけるガラスモーフィズムの使用がますます人気になっています。すりガラスのような外観を使用して、要素にインタラクティブな外観と感触を与えることができます。 ElementsKit ガラスモルフィズムモジュール Elementor ベースのページや Web サイトにガラス モーフィズム スタイルを簡単に適用できます。 

Elementor ウィジェットに Glass Morphism 効果を追加する方法 #

You need ElementsKit プロ installed and activated to use the Glass Morphism feature.

以下の手順に従って、Elementor ウェブサイトにガラス風のスタイルを導入するための完全なチュートリアルを入手してください。

Step 1: Enable the Glass Morphism Module #

始めるには、Glass Morphismモジュールを手動で有効にする必要があります。そのためには、WordPressダッシュボードから、

• フォローする ElementsKit > モジュール
• を見つける ガラスの変形 モジュール
• Enable the toggle button next to it
• 次に、「変更内容を保存” button in the top right corner

Step 2: Add the Glass Morphism Effect #

製品アイテム、画像ギャラリー、価格セクション、比較などのスタイル設定に Glass Morphism 効果を追加できます。

これをする、 open any page or post and edit with Elementor. Then, insert a column or widget.

• Now, go to the Advanced Settings tab
• Expand the “ElementsKit ガラスモルフィズム” settings
• Click the edit icon and it will reveal all the features of Glass Morphism styling

Step 3: Features of ElementsKit Glass Morphism #

Let’s see how teh controls work.

ぼかし #

Define a blur value depending on how blurred the surface you want for the design. Blur effects bring a glass-like aesthetic to your design by adding colorful and transparent layers between design elements. Thus, it shows a multilayered appearance to the design.

輝度 #

Use the slider or add a custom value to adjust the brightness of the glass morphism design. 

対比 #

Define the degree of contrast. It will help to maintain the visual hierarchy while using multiple design elements simultaneously.

飽和 #

Use this slider or give a custom value to control the gray level in the element color. If you increase the saturation level, it will make your color more vibrant. Conversely, decreasing the saturation will cause the color tone to become dull.

グレースケール #

From here, you can apply gray shades to your design. You decide how light or dark the design will be in shades of gray. Selecting a higher range will bring the darkest version of the design. Whereas, entering a lower value will bring brightness to your design.

色相 #

Hue is a term used to describe the intensity of the blend between two colors. Here, you’re not changing the main color, you’re just adjusting how bright it is against its corresponding color.

たとえば、赤とピンクの 2 つの色を追加すると、デザインには 2 つの色相が含まれます。また、スライダーを使用して、両方の色の強度を変更できます。

この設定は0から360までのカラーホイールに基づいています。ここでは、

• 0は赤を表します。
• 120は緑を表します。
• 240は青を表します。

さあ、あなたの番です。ElelmentsKit の Glass Morphism 機能をすべて使用して、Elementor の Web サイトのどこにでも魅力的なすりガラスの外観を作成する方法を説明しました。