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

ヨッチヨッチ

こんにちは、ブログ運用メンターのヨッチです。

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

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

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

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

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

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

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

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

テンプレートを追加

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

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

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

タブレットで表示

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

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

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

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

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

設定項目のアイコン

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

スマホ表示

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

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

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

デスクトップ表示

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

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

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

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

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

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

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

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

ヨッチヨッチ

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

今は個人でも、戦略があればウェブサイトで稼ぐことができる時代です。
もし興味があれば、WordPressについて無料で学んでみませんか?

WPクエスト

【WPクエスト】冒険の扉に向かう