両側に画像がある時のレイアウト

両側に画像を表示させる場合のパターン 〜オプション1〜

私は、テキストブロックです。このテキストを変更するには、[編集]ボタンをクリックします。ここからはテキストブロックの例文が並びます。テキストを入力する場合これらを消去して入力してください

私たちについて詳しく読む

<解説>

WPBakeryでの設定は以下の通りです。

 

 

3分割した行を作成したあと、両側に画像を設置します。
その際の注意点は2点です。

1、画像が中央揃え(Center)になっていること。
2、2番目のカラム(ボックス)も中央揃えになっていること。

 

ただ、このレイアウトだとスマホ表示した時に、このように「We we are」の上下に縦長が画像が表示されます。 画像2枚を一緒に横並びにしたい場合は「オプション2」を試して下さい。

両側に画像を表示させる場合のパターン

オプション2

私は、テキストブロックです。このテキストを変更するには、[編集]ボタンをクリックします。ここからはテキストブロックの例文が並びます。テキストを入力する場合これらを消去して入力してください

私たちについて詳しく読む

<解説>

こちらは、このようにスマホでの表示のみ違うレイアウトになるよう設定したものです。

 

スマホでの表示例

 

 

WPBakeryでの設定は以下の通りです。

 

基本的な作りは『オプション1』と同じです。

注意するところは、パソコン用の表示コンテンツと、スマホ用を別途用意し、それぞれのデバイスで表示・非表示を設定します。

 

 

1、行の中にもう一つ行を入れ込みます。(これにより、レスポンシブ設定が可能になります)

 

2、画像の入っているカラム編集(鉛筆マーク)をクリックすると、設定画面が開きます。
『Responsive Options』タブをクリックし、下記のように設定します。

 

 

 

 

3、次に、スマホのみで表示させる画像のResponsive Options の設定を下記のように行います。

 

 

 

以上です。

この機能を覚えておけば、パソコンとスマホでのコンテンツ表示の有無を調整することができます。
「オフセット」については、ややこしいので流してくださって結構です。