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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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