Elementorのシェイプ区切り あれこれ

Share on facebook
Share on twitter
Share on google
Share on pocket
Share on pinterest
shape_thumbnail

Elementorのシェイプ区切り 忘れてませんか?無料版の機能にもあるセクションのシェイプ区切りをご紹介します。いざという時にアクセントになったり、組み合わせると面白い演出が出来たりします。今回は基本の説明に加え、応用的使い方も大公開!

シェイプ区切りって?

セクションに紐づく機能で、スタイルの中にあります。

shape

実際使って見たのがこちら!

shape_demo

セクションの下部が半透明の斜めのラインで区切られています。これが「シェイプ区切り」です。シェイプ区切りのデザイン(タイプ)は全部で18種類!迷うくらい沢山あります。

シェイプ区切大図鑑

shape_yama

<設定可能項目> 色/幅/高さ/反転/最前面に移動

 

ドロップ

shape_drop

<設定可能項目> 色/高さ/反転(横)/反転(縦)/最前面に移動

 

クラウド

shape_cloud

<設定可能項目> 色/高さ/反転(横)/反転(縦)/最前面に移動

 

ジグザグ

shape_ziguzagu

<設定可能項目> 色/幅/高さ/最前面に移動

 

ピラミッド

shape_piramiddo

<設定可能項目> 色/幅/高さ/反転(横)/反転(縦)/最前面に移動

 

三角形

shape_sankaku

<設定可能項目> 色/幅/高さ/反転(上下)/最前面に移動

 

三角形非対称

shape_sankaku2

<設定可能項目> 色/幅/高さ/反転(横)/反転(縦)/最前面に移動

 

チルト

shape_chiluto

<設定可能項目> 色/高さ/反転(横)/最前面に移動

チルト透明

shape_chilttoumei

<設定可能項目> 色/幅/高さ/反転(横)/最前面に移動

 

ファン透明

shape_fan

<設定可能項目> 色/幅/高さ/最前面に移動

 

カーブ

shape_curve

<設定可能項目> 色/幅/高さ/反転(横)/反転(縦)/最前面に移動

 

カーブ非対称

shape_curves2

<設定可能項目> 色/幅/高さ/反転(横)/反転(縦)/最前面に移動

 

shape_wave

<設定可能項目> 色/幅/高さ/反転(横)/反転(縦)/最前面に移動

波ブラシ

shape_wavebrush

<設定可能項目> 色/幅/高さ/反転(横)/最前面に移動

 

波パターン

shape_wavepattern

<設定可能項目> 色/幅/高さ/反転(横)/反転(縦)/最前面に移動

 

矢印

shape_yazrushi

<設定可能項目> 色/幅/高さ/反転(縦)/最前面に移動

 

shape_book

<設定可能項目> 色/幅/高さ/反転(縦)/最前面に移動

基本的な使い方

区切りというくらいなので、セクションとセクションの区切りとして使うのが基本的な使い方となります。

操作としては、セクションを選択し、スタイルタブのシェイプ区切りで、上か下を選択、次にタイプ(デザイン)を選択し、それぞれの設定項目を設定!これだけで素敵な区切りが出来ます。

実際使ってみましょう。例えば、コーナー1とコーナー2があり、それぞれセクションは分かれています。コーナー1とコーナー2に関連性がある場合、「矢印」「分割」などを使い、上下のコーナーの関連性を表現出来ます。

shape_demo2

shape_demo3

反対にコーナー1と2の関連性を打ち消したい場合、つまりは「ここから話変わりますね!」的な際は、チルトやカーブが良いかもしれません。

shape_demo3

さらに、区切りという概念を取っ払い、背景デザインとしても可!

shape_demo5

 

色々なアレンジ

区切りとしてもデザインとしても使えるシェイプ区切りは、色々な機能を担ってくれます。背景との組み合わせや、上下のセクションの関係性など、用途は多岐に渡ります。その中でも自分が良く使う手法をご紹介します!

背景+シェイプ区切り

 

背景固定+下シェイプの組み合わせで、より上下のセクションの関係性を表現出来ます。その場合、シェイプの余白の背景色を下のセクションと合わせてあげるのがポイントです。

画像を背景にする事でレイヤー感が得られ、ちょっと凝ったデザインに見せる事が出来ます。

shape_sample02

さらに背景動画との組み合わせも、より一層シネマ感が出てインパクトのある表現が出来ます。

シェイプ区切り「矢印」でストーリを作る

先ほども登場しましたが、矢印でセクション同士の流れを作る時にも役立ちます。例えば上のセクションで課題や問題点を挙げ、下のセクションで解決策を定時するなど、アイデア次第で色々なストーリを演出出来ます。

shape_sample55

おじさん
おじさん
なんか良くありそぉ・・・

ランディングページなどで良く見かけますよね。セクション同士の関係性を表現するには「矢印」「分割」「本」などのシェイブ区切りが便利です。

まとめ

自分の場合は最初からシェイプ区切りを使う事はあまりなく、どちらかというと煮詰まった時に「入れてみるか」と採用する事が多い気がします。困った時に頼る存在のシェイプ区切りを是非活用してみて下さい。

10種類以上もあるのに、どうしてもイメージにあうシェイプ区切りが無い時は、背景画像を作ってしまう時もあります。今後種類が増えるといいなぁ〜と密かに思っております(笑)

合わせて読みたい記事

Elementorの基本「セクション」をマスターしよう!

Elementor 背景 攻略(前編)背景の種類と使い方

背景 攻略(後編)背景の種類と使い方

Elementor公式サイト

 

多くの人にElementorを知ってもらいたいので
\ SNSでシェアお願いします /
Share on facebook
Facebook
Share on twitter
Twitter

プロフィール

icon

 HTMLはなんとなく聞いた事があったけど、CSSって?っていうレベルの人間がこのElementorと出会い、ハマり、好きになってしまい・・・今や他社のサイト制作を受注するまでに至りました。
 プログラミングリテラシーがゼロのこの僕が、仕事でホームページ制作を請負うまでになり、今や個人事業主から中小企業まで年間のべ25〜30サイトの制作をElementorと共にやらせて頂いております。

自称:プロElementor
趣味:Elementor・デザイン・マーケティング

オススメ記事

ポップアップ!

こんな感じで横スライドイン!
なんてことも出来ます。