Elementorでスマホ・タブレットのレスポンシブデザインを編集する方法

ヨッチヨッチ

こんにちは!Web集客コンサルタントのヨッチです。
プロフィールを見る

Elementorはパソコンで使うことが前提ですが、スマホなどのデザインは編集できるのでしょうか?
結論からお伝えすると、スマホ・タブレットのレスポンシブデザインにも対応しています。

デフォルトである程度は整ったデザインになっていますが、細部の調整は必要です。
この記事では、Elementorでどうやってスマホ・タブレット用のデザインを編集するのか解説します。

現在主流のスマホにも対応させて、より洗練されたデザインのページを作りませんか?

記事の内容を動画でまとめました!

ヨッチヨッチ

記事について、動画ですべてお話ししています。
補足も交えて解説しているので、気になる方はこちらもどうぞ。

【Elementor】スマホ・タブレットのデザインを編集する方法

それでは、エレメンターでスマホ・タブレットのデザイン編集をやっていきましょう!

まず最初に、エレメンターの編集画面を開きます。

エレメンターの編集画面を開く

デザイン編集するために、いくつかテンプレートを追加してみましょう。

テンプレートを追加

現在はパソコンで表示されていますが、スマホ・タブレットの表示は左下のアイコンから変更できます。

スマホ・タブレットの表示は左下のアイコンから変更できる

タブレットで表示した状態です。

タブレットで表示

この状態でウィジェットを選択してデザインを変更すると、タブレット用として保存されます。

タブレット用として保存される

今回は、カラム幅が88%だったところを100%に変更してみました。
このように、細部のデザインも簡単にカスタマイズできます。

設定項目のアイコンからもデバイスを変更できる

また、左下のデバイスアイコンからだけでなく、設定項目のアイコンからもデバイスを変更できます。
「画像」「レイアウト」など、デバイスごとにデザイン変更できる項目に表示されています。

設定項目のアイコン

スマホを選択すると、プレビューもスマホ表示に切り替わりました。

スマホ表示

さらに付け加えると、プレビュー画面の上にあるアイコンからも変更できます。

プレビュー画面の上にあるアイコンからも変更できる

デスクトップに戻してみました。

デスクトップ表示

このように、各デバイスの表示を切り替えたり、デザインを調整したりできます。

自分で追加したウィジェットは、デバイスごとのデザインが崩れやすいです。
ページのクオリティを高めるなら、スマホ・タブレットの表示も確認しながら作成すると良いでしょう。

僕が作成したLPも、各デバイスの表示を確認しながら作ってみました。
スマホ・タブレットもしっかりデザイン済みなので、デバイスごとに比較してみてはどうでしょうか?

【まとめ】レスポンシブデザインに対応しよう!

エレメンターを使っていると、ついついパソコン表示ばかり見てしまうこともあると思います。

意外と忘れがちですが、やはりスマホを利用している方はかなり多いです。
タブレットはそこまで多くありませんが、念のため確認しておきたいですね。

デザイン済みのパーツは、最初からレスポンシブデザインに対応しています。
テンプレートをそのまま使う場合は、そこまで気にしなくても良いでしょう。

自分でウィジェットを追加したときなど、改めてチェックしておくと安心です。
せっかくエレメンターでかっこいいページを作るなら、全デバイスで見栄えよく仕上げてみませんか?

ヨッチヨッチ

ここまで読んでいただきまして、ありがとうございます!
ブログでお会いできたご縁に、心から感謝しています。

PS. 訪問者様へのお願い

当サイトは僕が一人で管理していて、記事数は550本以上あります。
なので、記事によってはリンク切れなどが発生している場合があります。

もしお気づきの点がありましたら、下にあるコメント欄からご報告いただけると嬉しいです。
もちろん、記事の感想とかメッセージも大歓迎です!

どんなコメントも励みになっていて、かならず返信しています。
本当にありがとうございます。

コメント欄に移動する