WordPressのテーマビルダープラグイン「Elementor」のファンブログ

Elementorの見出し ウィジェットを使い倒す。

Share on facebook
Share on twitter
Share on google
Share on pocket
Share on pinterest
headline_thumbnail

Elementorの見出し

Elementorの見出し ウィジェットは何かと役立ちます。でも・・・デフォルトのままだとデザインが味気ない・・・そこで、今回は見出しウィジェットのデザインの限界を目指すべく、とことん使って見ることにしました!

基本的な使い方はこちらでおさらい!
【 ウィジェットマニュアル 】ヘッドライン(見出し)全設定項目解説!

ちなみに、今回の記事には多くの作例があります。が、「良いデザインでしょ!」と自慢する訳ではなく、こうゆうことが出来るんだよ!というあくまで機能紹介ですので、デザインセンスはスルーして下さい。

ボーダー×見出しウィジェット

ウィジェットの見た目をコントロールする部分と言えば、「スタイル」に目が行きがちだが、実は詳細にこそデザインに役立つ項目があります。その1つ、「ボーダー」です。ただの枠線ですが、丸みや影などを加えることで、様々な表現が可能です。

いたってシンプルにボーダーで枠を設定、角には丸みを加える。

hl_border

思い切って太めの線を使うことで、見出し感を出します。

さらにボックスシャドーを加えたのがこちら

hl_border2

hl_border22
(画像をクリックして見て下さい)

そして、やりたい放題な作例がこちら!

hl_border3

hl_border33
(画像をクリックして見て下さい)

シンプルにブログ風見出し

hl_border4

hl_border44
(画像をクリックして見て下さい)

これもシンプルにボーダーサンド!

hl_border5

hl_border55
(画像をクリックして見て下さい)

背景×見出しウィジェット

セクションやカラムの背景は多用することが多いかと思いますが、実はウィイジェットにも背景を設定することが出来ます。

詳しくはこちらの記事を参考にご覧下さい。
Elementor 背景 攻略(前編)背景の種類と使い方

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

 

まずはシンプルに背景色のみ設定

hl_bg1

hl_bg11
(画像をクリックして見て下さい)

グラデーション背景を使い、もう1色を透過させることでボーダー的な使い方をしてみました。

hl_bg2

hl_bg22
(画像をクリックして見て下さい)

グラデーションの境界のぼかしを無くし、ツートンにしてみました。(配色は気にしないで下さい)

hl_bg3

hl_bg33
(画像をクリックして見て下さい)

背景に画像を入れてみた!その①

hl_bg4

hl_bg44
(画像をクリックして見て下さい)

hl_bg5

hl_bg55

(画像をクリックして見て下さい)

ボーダーと背景と見出しウィジェット

ボーダーと背景を組み合わせる事で、様々な表現が可能になります。ここでは、作例のみ紹介します!

hl_sample1

↑背景画像にハンコイラストを入れ、下線を加え左下に丸みを加えた作例

hl_sample2

↑背景をグラデーションにし、境界をぼやかさずに角度をつけ、太めの枠線に丸みを強くつけた作成

hl_sample5

↑左にボーダーを入れ、背景を同色でグラデーションでマーカーライン風に設定した作例

hl_sample6

↑グラデーション背景を下部ギリギリに設定し、角を丸くし影をつけた作例

hl_sample7

↑背景に背景色と画像を加え、テキストシャドーで立体感を出し、右側角だけに丸みを付けた作例

見出し以外のウィジェットにも使える

text_sample1

テキストウィジェットに枠線を加える事で、1コーナーとして目立たせる事も出来ます。この様にウィジェットにも背景とボーダーが使える事を覚えて置くと、表現の幅が広がります。

個人的な意見ですが、ウィジェットの背景・ボーダーを使うのは最後にして、まずはセクションやカラムの背景やボーダーで調整すると良いかもしてません。

背景については、別の記事でまとめてますので、是非参考にご覧下さい。

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

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

 

まとめ

今回は使い方というより、事例集的な記事になりました。「へぇ〜こんな事も出来るんだ〜」と思って頂けたら幸いです。

Elementorに限らずツール系全般に言える事ですが、使い込むほどに便利になって行きます。特にElementorはその要素が強く、アイデア次第では複雑なデザインも可能になります。アイデアに煮詰まったら、普段触らない様なパラメーターをグリグリといじってみるのも良いかもしれません。

自分の場合、そんな煮詰まった時にウィジェットの背景やボーダーで打開策がよく見つかります。ので、是非覚えておくと良いかもです!

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

プロフィール

icon

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

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

オススメ記事

もくじ

ポップアップ!

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