ランディングページ全体を投入して変換ボタンを押したくなるものです。長いページでは、セクションごとに作業する方が全体として速く、確認もはるかに簡単です。
スライスが有効な理由
- 小さな単位は目で確認しやすくなります。ヒーローが正しく変換されたかは一目で分かりますが、40ものセクションを一度に確認することはできません。
- サイトのヘッダー、フッター、クッキーバナーを誤って取り込むことを避けられます。
- 1つのセクションの変換結果が悪い場合、そのソースを修正して単独で再実行すればよく、すべてをやり直す必要がありません。
- ページの外側のラッパーを持ち込まないため、ネストが浅くなります。
スライスする2つの方法
ビジュアルピッカー
ページを読み込み、ビジュアルピッカーを使ってレンダリングされたプレビューにカーソルを合わせ、必要なブロックをクリックします。その要素のマークアップを取得し、さらに重要なことに、ページのスタイルシートも一緒に取り込むため、クラスベースのCSSファイルでスタイルが定義されているブロックでも、スタイルを保ったまま変換されます。
コピールート
ページ全体を一度変換し、構造マップを開いて、目的の行にあるターゲットアイコンをクリックします。その行がコピールートになり、そのサブツリーだけがエクスポートされ、外側のラッパーは破棄されます。各行を個別に除外するには、×アイコンを使用します。
スケールするワークフロー
- 最初にヒーローを変換して貼り付けます。余白、フォント、ボタンのホバー状態まで正しく整えます。
- ページを下へ移動し、1セクションずつ、前のセクションの下に貼り付けていきます。
- 2〜3セクションごとに、3つのデバイス表示を確認します。レスポンシブの問題を早期に発見する方が、最後に発見するよりはるかに低コストです。
- 再利用するもの（機能行、お客様の声ブロックなど）は、作業しながらElementorテンプレートライブラリに保存します。
セクションを分けて保つ
すべてを1つの巨大なコンテナにまとめようとしないでください。セクションごとにトップレベルのコンテナを1つ保つと、Elementorページの通常の構築方法と一致し、並べ替えが簡単になり、ツリーと格闘せずにセクションレベルの背景や余白を設定できます。
ピッカーがスタイルシートを一緒に持ち込む理由
ここには、スライスが機能するかどうかを左右する微妙な点があります。ドキュメントヘッド内のクラスベースのCSSでスタイルが定義されているページでは、要素自身のマークアップにはスタイル情報がほとんど含まれていません。つまり、<section class="hero">は、.heroがどのように見えるかを何も教えてくれません。
そのため、選択を確定すると、ピッカーは要素だけを返すのではありません。抽出したマークアップにページ自身のスタイルブロックを前置するので、スライスは自己完結した状態で届き、見た目を保ったまま変換されます。ピッカー自身のハイライト用スタイルはタグ付けされて除外されるため、ピッカーのUIが出力に漏れることはありません。
これが、TailwindやBootstrapのページからセクションを選ぶと機能する理由です。devtoolsからそのセクションのouterHTMLをコピーして貼り付けた場合は、スタイルのないマークアップになってしまいます。ピッカーを使わずに手動で抽出する場合は、スタイルブロックもコピーしてください。そうしないと、骨組みを変換することになります。
状況に応じたスライス方法の選び方
2つの方法は互換ではなく、間違った方法を選ぶと時間を失います。
- ページ全体があり、その一部だけが欲しい場合はピッカーを使います。視覚的で、スタイルシートの問題を自動的に処理し、ページの残りをコンバーターに読み込むことはありません。競合風のリファレンスや大きなテンプレートからヒーローを抜き出すのに最適です。
- 1つのページの複数の部分が欲しい場合はコピールートを使います。一度変換してから、分析を毎回やり直さずに異なるサブツリーを再エクスポートできます。完全に作り直す予定のページを体系的に下へ進めるのに最適です。
作業しながらネストを監視する
スライスには、後になって気づく副作用があります。各スライスは、ソース内でその上にあったラッパーの階層数をそのまま引き継いで届きます。4つのスライスを貼り付けると、4つのセクションが異なる深さになり、見た目は問題なくても完成したページの編集が一貫しなくなる可能性があります。
構造マップには、各変換の最大ネスト深度が表示されます。スライスごとにそれを確認し、毎回同じ浅い深さを目指してください。通常は、最も外側のラッパーを受け入れるのではなく、コピールートを1〜2レベル下に設定します。ここでは、絶対的な数値よりもセクション間の一貫性が重要です。
ヘッダー、フッター、クッキーバナーについての注意
ページ全体を変換すると、body内のすべてを取り込みます。実際のページでは、サイトのヘッダー、フッター、クッキーバー、場合によってはチャットウィジェットまで含まれます。それらはセクションに属しておらず、後からElementorで削除するのは、最初から取り込まないより遅くなります。
これは、スライスを支持する最も強力な実践的理由です。また、特定の不快な驚きも避けられます。インポートされた固定位置のヘッダーは、変換中に意図的に絶対位置へダウングレードされます。そうしないとサイト全体を覆ってしまうためです。その結果、見つけて削除するまで、セクションの上にヘッダー形のブロックが浮かぶことになります。
ページ全体を変換しても問題ない場合
短いページ（ヒーロー、2〜3のセクション、フッターCTA）は、1回のパスで問題なく変換できます。セクションごとのアプローチは、長いマーケティングページや、変換を意識してマークアップが書かれていないページで真価を発揮します。
妥当なルール：ページ全体がスクロール3画面分以内に収まり、サイト共通部分がない場合は、ページ全体を変換します。それより長い場合や、スタンドアロンブロックとして作成されたものではなくライブサイトから取得したものは、スライスで行う方が速くなります。