Elementor – レスポンシブ機能の使い方
Elementorでウェブページを作っていて、
『スマホでは少し別なデザインにしたい』
と思ったことはありませんか?
最近ではスマホユーザーがデスクトップを上回ると言われています。
Elementorは最初からレスポンシブがサポートされており、様々な設定ができます。
この記事ではそれを説明していきます。
Elementorの使い方シリーズから他の記事も見つけられますよ。
レスポンシブのブレークポイントとは
この画像には2つの項目がハイライトされてます。
- タブレットのブレークポイント
- モバイルのブレークポイント
この二つの値を変換することで、いつページがタブレットやモバイルの状態に切り替わるのか設定できます。
三つのモード
Elementorでは画面の幅の大きさによって三つの状態があります。
デスクトップ
ページの幅がタブレットのブレークポイントと同じかそれより大きい場合、ページはデスクトップの状態にあると考えます。
タブレット
ページの幅がモバイルのブレークポイントと同じかそれより大きく、タブレットのブレークポイントより小さいとき、ページはタブレットの状態であると考えます。
モバイル
ページの幅がモバイルのブレークポイントより小さいとき、ページはモバイルの状態にあると考えます。
モバイルやタブレットモードでサイトを編集
このようにElementorのエディターで、左下の電話のアイコンをクリックします。
するとモバイルとタブレットとデスクトップから、どのモードにするか選択できます。
そして画像のようにモバイルを選択すると、現在制作してるページもスマホサイズになるんです。
設定からレスポンシブモードを切り替えることも可能
このようにウィジェットなどの設定画面の中に、小さいデスクトップのアイコンがあるです。これをクリックすると、三つのアイコンリストが出てくるので、設定したいモードをクリックします。
そうすると、画面がそのモードに切り替わります。
デスクトップ以外のモードで、スタイルを編集すると、そのモードだけに反映される
このようにモバイルモードでスタイルを変換しても、デスクトップモードには反映されません。
なのでスマホやタブレットだけでスタイルを変えたい時など、とても便利です。
ページの幅によって要素を隠す
詳細のレスポンシブタブの所に、三つの設定があります。
- デスクトップで隠す
- タブレットで隠す
- モバイルで隠す
これはそのままで、これらにチェックを入れると要素を隠すことができます。
例えばスマホだけに表示したいバナーなど、デスクトップとタブレットでは隠せるわけです。
レスポンシブは今の時代ウェブサイトに欠かせない要素です。
このようにElementorだと簡単に設定可能です。
是非試してみてくださいね。