絞れば、出てくる、アイディア。

【Elementor】コンテナの中にコンテナを並べる方法

【Elementor】コンテナの中にコンテナを並べる方法

Elementorで、コンテナの中にコンテナを並べる方法を紹介します。
横、または縦に並べて、画像と説明文を並べたりするなど、従来の「内部セクション」のように使う方法を紹介します!

1. に並べる方法

Elementorの編集画面から、「+」ボタンをクリックして、新しいコンテナの構造を選択します

Elementorの編集画面から、「+」ボタンをクリックして、新しいコンテナ構造を選択します。

一番左上の、縦方向に矢印が書いてある四角をクリックします。(「列方向」という構造にします)

↑一番左上の、縦方向に矢印が書いてある四角をクリックします。(「列方向」という構造にします)

大きなコンテナ(外枠部分)が追加されたら、その中に2つコンテナを配置していきます。 左側の「要素」から「コンテナ」をドラッグ&ドロップします。

大きなコンテナ外枠部分)が追加されたら、その中に2つコンテナを配置していきます。
左側の「要素」から「コンテナ」をドラッグ&ドロップします。

大きなコンテナの中に、縦に2つコンテナを並べる事ができました!

大きなコンテナの中に、2つコンテナを並べる事ができました!

例えば、上のコンテナに「画像」、下のコンテナに「見出し」を入れることができます。

↑例えば、上のコンテナ「画像」下のコンテナ「見出し」を入れるとこのようになります。

大きなコンテナの背景を設定すれば、2つのコンテナの背景を設定することができます。

2. に並べる方法

Elementorの編集画面から、「+」ボタンをクリックして、新しいコンテナの構造を選択します

Elementorの編集画面から、「+」ボタンをクリックして、新しいコンテナ構造を選択します。

上段の左から2番目の、横方向に矢印が書いてある四角をクリックします。(「行方向」という構造にします)

↑上段の左から2番目の、横方向に矢印が書いてある四角をクリックします。(「行方向」という構造にします)

大きなコンテナ(外枠部分)が追加されたら、その中に2つコンテナを配置していきます。 左側の「要素」から「コンテナ」をドラッグ&ドロップします。

大きなコンテナ外枠部分)が追加されたら、その中に2つコンテナを配置していきます。
左側の「要素」から「コンテナ」をドラッグ&ドロップします。

大きなコンテナの中に、横に2つコンテナを並べる事ができました!

大きなコンテナの中に、2つコンテナを並べる事ができました!

例えば、左のコンテナに「画像」、右のコンテナに「見出し」を入れるとこのようになります。

↑例えば、左のコンテナ「画像」右のコンテナ「見出し」を入れるとこのようになります。

大きなコンテナの背景を設定すれば、2つのコンテナの背景を設定することができます。

大きなコンテナの背景を設定すれば、2つのコンテナの背景を設定することができます。

まとめ〜

今回は、Elementorでコンテナの中にコンテナを縦方向、または、横方向に並べる方法を紹介しました!

アップデートによって「内部セクション」が無くなってしまいましたが、コンテナを駆使して、ぜひ色んなデザインのウェブサイトを作ってみてください😆

2024-12-08
Sunday

weblemonの筆者

YUKINKO

20代後半のWEBマーケター&WEBデザイナー
新卒で商社に入社しWEBマーケターとして勤務後、
カナダに渡航し現地企業のWEB制作と
マーケティング支援を行う。
現在は帰国し某企業でWEBマーケターをしています。

 自分がWEBマーケター・WEBデザイナーとして
仕事をしているときに気になった事を
調べた経緯を残しておきたいなという思いと、
それを誰かのお悩み解決に
役立てることができたらいいなと思っています。

“ネコとレモンのWEBマーケ&デザインブログ”
みたいな感じで覚えてもらえたら嬉しいです😺🍋

POPULAR POST

LATEST POST