Elementor Call to Actionウィジェットでスタイリッシュなボックスレイアウト!その3(Elementor Pro版)

前回に引き続きCall to Actionウィジェット。今回はCall to Actionを使い写真にエフェクトをかけます。?

今回も結論先に言っちゃいますがこのデザインを作ります。?

カーソルが重なった時に明るくなったり、ぼかしが消えたり、カラーになったり色々出来ます。

この記事下のDEMOボタンより確認お願いします。

はじめに

左パネルの一般エレメント>Call to Actionウィジェットを「新しいセクションの追加」へドラッグ&ドロップ。

設定の方法は前回の記事を参考に今回はCSSフィルタの部分を説明します。

Elementor Call to Actionウィジェットでスタイリッシュなボックスレイアウト!その2(Elementor Pro版)

Elementor Call to Actionウィジェットでスタイリッシュなボックスレイアウト!その1(Elementor Pro版)

左カラムのウィジェット(上)の設定

カーソルが重なると明るくなる写真です。左パネルのスタイルエリアのHover EffectsからBackgroundのOverlay Colorから色を設定します。

左カラムのウィジェット(下)の設定

カーソルが重なるとぼかしがなくなる写真です。左パネルのスタイルエリアのHover EffectsからBackgroundのCSS FiltersからBlur(ぼかし)を設定します。

右カラムのウィジェットの設定

カーソルが重なるとモノクロ写真からカラー写真に切り替わります。さきほど同様の処理でCSS FiltersからSaturation(彩度)を0に設定します。

あとがき

Photoshopを使わなくても明度や彩度の調整から、ぼかしなど作れるためWeb制作がとても楽になりましたね。??‍✈️

DEMO

Elementorカテゴリ

Announce

New
arrival

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.

Announce

New
arrival

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.