Elementor – レスポンシブ機能の使い方

Elementorでウェブページを作っていて、
『スマホでは少し別なデザインにしたい』
と思ったことはありませんか？

最近ではスマホユーザーがデスクトップを上回ると言われています。

Elementorは最初からレスポンシブがサポートされており、様々な設定ができます。
この記事ではそれを説明していきます。

Elementorの使い方シリーズから他の記事も見つけられますよ。

レスポンシブのブレークポイントとは

この画像には２つの項目がハイライトされてます。

• タブレットのブレークポイント
• モバイルのブレークポイント

この二つの値を変換することで、いつページがタブレットやモバイルの状態に切り替わるのか設定できます。

三つのモード

Elementorでは画面の幅の大きさによって三つの状態があります。

デスクトップ

ページの幅がタブレットのブレークポイントと同じかそれより大きい場合、ページはデスクトップの状態にあると考えます。

タブレット

ページの幅がモバイルのブレークポイントと同じかそれより大きく、タブレットのブレークポイントより小さいとき、ページはタブレットの状態であると考えます。

モバイル

ページの幅がモバイルのブレークポイントより小さいとき、ページはモバイルの状態にあると考えます。

モバイルやタブレットモードでサイトを編集

このようにElementorのエディターで、左下の電話のアイコンをクリックします。
するとモバイルとタブレットとデスクトップから、どのモードにするか選択できます。
そして画像のようにモバイルを選択すると、現在制作してるページもスマホサイズになるんです。

設定からレスポンシブモードを切り替えることも可能

このようにウィジェットなどの設定画面の中に、小さいデスクトップのアイコンがあるです。これをクリックすると、三つのアイコンリストが出てくるので、設定したいモードをクリックします。
そうすると、画面がそのモードに切り替わります。

デスクトップ以外のモードで、スタイルを編集すると、そのモードだけに反映される

このようにモバイルモードでスタイルを変換しても、デスクトップモードには反映されません。
なのでスマホやタブレットだけでスタイルを変えたい時など、とても便利です。

ページの幅によって要素を隠す

詳細のレスポンシブタブの所に、三つの設定があります。

• デスクトップで隠す
• タブレットで隠す
• モバイルで隠す

これはそのままで、これらにチェックを入れると要素を隠すことができます。
例えばスマホだけに表示したいバナーなど、デスクトップとタブレットでは隠せるわけです。

---

レスポンシブは今の時代ウェブサイトに欠かせない要素です。
このようにElementorだと簡単に設定可能です。
是非試してみてくださいね。