この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
2019年3月4日にワードプレスのページビルダープラグイン「Elementor」がver2.5にアップデートしました！
アップデートによりフリーハンドでWebデザインをすることができるようになりました！
どういうことかは下のGifを見てもらったら一目瞭然です。
このように各ウィジェットを自由自在にページに配置することができるようになりました。
今までもマージンを数値で調整することにより位置調整は可能でしたが、ドラッグ＆ドロップで位置調整ができるのは楽ですね。
これは「絶対配置」という機能になります。
今回はElementorでの絶対配置の設定方法と注意点について解説をしていきます。
Elementorって何？という方はこちらの記事で解説しています。
直感操作OK！ページビルダー無料プラグイン『Elementor』の基本操作
Elementorで絶対配置を使用してウィジェットを移動する方法
上の例では画像を移動させましたが、ウィジェット(要素)であれば画像でなくても絶対配置の機能を使えます。
テキストやボタンのウィジェットなど自由に動かせます。
絶対配置を適用する
まずは絶対配置を設定したいウィジェットを選択し、詳細タブをクリック。
次に「Custom Positioning」をクリック。(まだ日本語に翻訳されていませんが、今後日本語翻訳されるかと思います。)
位置の「absolute」を選択。
設定はこれだけで、あとは自由自在に動かせます。
ウィジェットの幅を変更する
方法は二つあります。
ひとつはウィジェットの水色の枠線を掴んで狭める(ドラッグ＆ドロップ)方法。
もしくは、「Custom Positioning」で、幅を「カスタム」を選択。
Custom Widthの値を調整。
スマホ、タブレットの絶対配置も調整可能
PC表示で絶対配置を調整しても、スマホやタブレットでも同じように表示されるわけではありません。
PC上の絶対配置で設定したため、小さいデバイスでは大きく表示が崩れます。
ですので、スマホやタブレットは別に調整する必要があります。
今回はスマホ表示で説明していきます。
まず、左下のメニューからレスポンシブモードでモバイルを選択します。
表示が大きく崩れているのが分かります。
PC表示の時と同じ操作で各ウィジェットの配置やサイズを設定していきます。
すると、PCの際の配置とスマホの際の配置で自動で切り替わるようになります。
絶対配置の注意点
Webデザインにとって非常に便利に思われる絶対配置ですが、実は一般的にレスポンシブデザインの観点からは悪い評価となっています。
その理由は２つあります。
ただ、安心してください。Elementorで正しい設定を行えば2点の理由には当てはまりません。
- PC、スマホ、タブレット表示で見た際に表示崩れが起きる。
- ページ自体の横幅を超えたウィジェット配置を行うと無駄な水平スクロールが発生してしまう。
1に関しては、ElementorではPC、スマホ、タブレットで個別設定が可能になっていますので、すべて設定したら表示崩れは起きません。
2に関してもすぐに問題を解消できるようになっています。
不要な水平スクロールをなくす方法
不要な水平スクロールとは何かというと、下記画像のような現象です。
紫グラデーションの丸い画像がページの規定幅を超えています。
表示されなくても構わないのにご丁寧に横スクロールできるようになっていますね。
まず、無駄な水平スクロールの原因となっているセクションをクリックします。
「レイアウト」⇒Overflowを「Hidden」に選択します。
Overflow：Hiddenというのは、はみ出したコンテンツはスクロールせずに隠しておきますよということです。
まとめ
Elementorの絶対配置はフリーハンドで直感的にWebデザインができるので、素晴らしい機能です！
ただ、設定を間違えると、表示崩れを引き起こすので、ページの全体に絶対配置を適用すると、1ページ作成するのに逆に多くの時間を要してしまうかもしれません。
ですので、絶対配置を利用するのはページの中で1，2か所程度に控えめにしておくのがいいでしょう。
ここぞというところだけに使用するのがいいですね。
- PC、スマホ、タブレットの位置サイズ調整
- Overflow Hiddenの設定
この2点だけは忘れないようにしておけば、絶対配置は重宝する機能になるはずです。
