2020年08月27日

-Elementor-シェイプ区切りを使いこなそう

こんにちは、SeekNextの木谷です。

前回はHTMLウィジットを使用し、Twitterのタイムラインを表示する方法をご紹介しました。

今回はデザインのアクセントになる「シェイプ区切り」のご紹介です。意外とこの機能見落としがちですが、アクセントになるのでぜひ色々触ってみてください!

「シェイプ区切り」の設定場所

セクションの編集を選択しましょう。他の要素では表示されないので注意。

こんな風に上下設定ができます。なんと、区切りデザインの種類は18種類もあります!HPのデザインに合わせて色々選べそうですね!

早速色々使ってみよう(画像編)

①山

②ドロップ

③チルト

④波

今回はセクションの背景に画像を設定してみました。

早速使ってみよう(色指定編)

シェイプの色指定はもちろんできますが、画像では無く背景色を指定してみました。暦の上では秋なので、ハロウィンを意識したトゲトゲしい色使いになりましたが・・・

「幅」や「高さ」の指定もできるので、少しいじってみました。

また雰囲気がガラッと変わりますね!

組み合わせ次第で本当に色々なアレンジができます。なんか物足りない時のアクセントにぴったりなので、ぜひ色々いじってみてください!!

次回もお楽しみに!

Twitterにて情報発信や制作実績の公開も行っていますので、フォローよろしくお願いします!駆け出しエンジニアやプログラミング初心者のみなさん、必見です!