Elementorのレイアウトがプレビューで崩れてしまう現象の直し方
- 2024年7月3日
- 2024年7月3日
- Elementorの使い方
Elementorでレイアウトしたページが、プレビューで崩れてしまう! そんな現象に遭遇したことはありませんか?
この記事では、その原因と解決方法を紹介します。
プレビュー画面の表示がおかしいなと思ったら、以下に紹介する2つの原因をチェックしてみてください。
症状
横に並べたのに縦に並んでしまう、コンテナが重なって表示されてしまうなど、Elementorの編集画面通りにプレビュー画面が表示されない!?
原因1 – Elementorのキャッシュ
プレビューの表示が崩れる一番の原因はキャッシュです。
CSSを生成しなおせば解決することができます。
解決方法
WordPressの「ダッシュボード」を表示して 「Elementor」を選択し、次に「ツール」を選択します。
「Regenerate CSS & Files」をクリックして「変更を保存」します。
キャッシュが原因の場合は、これで正しく表示されるようになります。
原因2 – Elementorのコンテナ
コンテナの追加オプションでHTMLタグを「a（リンク）」に指定しているが、リンク先を入力していない場合、プレビュー画面が崩れます。
解決方法
表示が崩れているコンテナを選択し、「追加オプションの設定」を確認します。
1.リンクが必要ない場合
HTMLタグを「デフォルト」「div」などに指定しなおしましょう。
2.リンクが必要な場合
リンクの指定箇所にリンク先を入力しましょう。
コンテナの設定に問題があった場合は、これで正しく表示されるようになります。
まとめ
プレビュー画面の表示がおかしいな、と思ったら、
- Elementorの「Regenerate CSS & Files」でCSSを再生成してみる
- Elementorのコンテナの設定を確認してみる
どちらかの方法で殆どの場合は解決することが出来ます。試してみてくださいね。
