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

Elementorのインナーセクション ウィジェットとは?

Share on facebook
Share on twitter
Share on google
Share on pocket
Share on pinterest
innersection_thumbnail

Elementorのインナーセクション とは?

こんな時ありませんか?

inse01

2カラム欲しいのに「プロフィール」をセンターに置く為に1カラムで作り、こまった事、ありませんか?残念ながら通常、セクション内に複数のカラム編成(つまり、1カラムと2カラムを混在)の様な事は出来ません。

おばさん
おばさん
良くわからないわ・・・


inner-ng4

こんなイメージです。1つのセクションに複数のカラム構成を含める事が出来ません。そんな時に役立つのが、 Elementorのインナーセクション ウィジェットです!どんなウィジェットなのか、使い方など紹介していきたいと思います。

icon-innersection

簡単にセクションやカラム、インナーセクションについて解説している動画がありますので、お時間ある場合はご覧下さい。

どんな事が出来るの?

いくつかインナーセクションを使ったレイアウト作例を紹介したいと思いますう。デザインは適当なので、突っ込まないで下さい(汗)

【作例1】inner-profile01

1セクション1カラム内に見出しウィジェット(プロフィール)の下にインナーセクションを追加し、右に画像ウィジェット、左にテキストエディターを入れたパターンです。オーソドックスな使い方です。YouTube動画内でも説明しておりますが、背景色が単色であれば、2セクションで対応しても問題ないと思います。

【作例2】
inner-profile02

1セクション1カラム内に見出しウィジェット(サービス紹介)の下に4カラムのインナーセクションを追加し、アイコンボックスを並べたパターンです。

また、インナーセクションに背景が設定出来るため、背景「白」ボーダー丸み「24%」ボックスシャドーを設定する事で、一つのブロックとして表現する事が可能です。

【作例3】
inner-profile03

1セクション1カラム内に見出しウィジェット(サービス紹介)の下に、5カラムのインナーセクションを追加し、作例2のカラム幅を狭め一番右のカラム幅を広めに取り、一番右のカラム背景に女性の画像を設定、スペースウィジェットで背景を表示させたパターンです。

インナーセクションで出来ない事。

インナーセクションは、インナーセクションの中にインナーセクションを配置する事が出来ません。また、次のイメージの様に・・・

inner-ng1

複数カラムの下に、1カラムとしてインナーセクションを配置する事が出来ません。入れようとしても、下の動画の様に1〜3カラムの内部にインナーセクションを配置する様になってしまいます。

上記のイメージの様に、複数カラム構成の下にウィジェットを配置したい場合、複数カラムのインナーセクションウィジェットを先に配置し、その下に通常のウィジェットを配置する事で、3カラム→1カラムが可能となります。

inner-ng2

アイデア次第では、3カラム→1カラム→3カラムという構成も可能です。

inner-ng3

複数のカラム構成が混ざったセクションを作成する場合は、インナーセクションを上手く使う事で、表現可能となります。

注意?インナーセクションの乱用

個人的推察になってしまいますが、複数カラムのインナーセクションを多用する事で、要素が増加してしまい、読み込み速度に影響が出るとか出ないとか・・・Googleスピードテストで「過大な DOM サイズの回避」の部分にどうやら該当する様です。とは言え、通常使用する程度であれば問題ないと思いますが、インナーセクションを使わなくても対処出来る部分は節約する方が良いかもしれません。

<参考ページ>

[blogcard url=”https://eng-entrance.com/what-is-dom”

まとめ

インナーセクションを理解する事で、レイアウトの幅が広がります。特に、カラムレイアウトだけではなく、背景の多重構造やレイヤー感を演出するのにも便利です。その際はマージンやパディングも合わせて習得する事で、表情豊かなサイトになると思います!

マージンとパディング を操る。

ぜひ皆さんも、インナーセクションを使ってみて下さい!

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

プロフィール

icon

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

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

オススメ記事

ポップアップ!

vb_header
<注意事項>
・お問い合わせ頂きました内容により、
 ご回答・ご返信出来ない場合がございます。
・ご質問やお悩みに関する内容について、
 記事にて「匿名」にて取り上げさせて頂くことも御座います。
・上記の内容についてご了承・ご同意の上、本フォームよりお送り下さい。

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