Es tentador soltar una página de destino completa y pulsar convertir. Para una página larga, trabajar sección por sección es más rápido en general y mucho más fácil de verificar.
Por qué conviene dividir en secciones
- Una unidad más pequeña es fácil de revisar a simple vista. Puedes saber de un vistazo si un hero se convirtió correctamente; no puedes saberlo sobre cuarenta secciones a la vez.
- Evitas importar por accidente la cabecera del sitio, el pie de página y el banner de cookies.
- Si una sección se convierte mal, corriges esa fuente y la vuelves a ejecutar sola en lugar de rehacerlo todo.
- El anidamiento se mantiene menos profundo, porque no arrastras los contenedores externos de la página.
Dos maneras de dividir en secciones
El selector visual
Carga la página y luego usa el selector visual para pasar el cursor sobre la vista previa renderizada y hacer clic en el bloque que quieras. Extrae el marcado de ese elemento y, además, trae consigo la hoja de estilos de la página, de modo que un bloque cuyo estilo vive en un archivo CSS basado en clases se convierte con sus estilos intactos.
La raíz de copia
Convierte la página completa una vez, abre el mapa de estructura y haz clic en el icono de destino en la fila que quieras. Esa fila se convierte en la raíz de copia y solo se exporta su subárbol; los contenedores externos se descartan. También puedes excluir filas individuales con el icono de cruz.
Un flujo de trabajo que escala
- Convierte y pega primero el hero. Deja bien el espaciado, las fuentes y los estados de hover de los botones.
- Baja por la página una sección a la vez, pegando cada una debajo de la anterior.
- Después de cada dos o tres secciones, revisa las tres vistas de dispositivo. Detectar un problema de diseño responsive a tiempo es mucho más barato que al final.
- Guarda en la biblioteca de plantillas de Elementor todo lo que vayas a reutilizar (una fila de características, un bloque de testimonios) a medida que avanzas.
Mantén las secciones separadas
Resiste la tentación de fusionar todo en un contenedor gigante. Mantener un Contenedor de nivel superior por sección coincide con cómo se construyen normalmente las páginas de Elementor, facilita reordenar y te permite definir fondos y rellenos a nivel de sección sin pelearte con el árbol.
Por qué el selector lleva consigo la hoja de estilos
Hay una sutileza aquí que decide si la división funciona en absoluto. En una página cuyo estilo vive en CSS basado en clases en el <section class="hero"> no te dice nada sobre cómo se ve .hero.
Así que, cuando confirmas una selección, el selector no devuelve solo el elemento. Antepone los bloques de estilo propios de la página al marcado extraído, de modo que el fragmento llega autocontenido y se convierte con su apariencia intacta. Sus propios estilos de resaltado están etiquetados y se excluyen, para que nada de la interfaz del selector se filtre en tu salida.
Por esto funciona seleccionar una sección de una página de Tailwind o Bootstrap, mientras que copiar el outerHTML de esa sección desde las herramientas de desarrollo y pegarlo te daría marcado sin estilos. Si extraes a mano en lugar de usar el selector, copia también los bloques de estilo; de lo contrario, estarás convirtiendo un esqueleto.
Qué método de división usar en cada situación
Las dos rutas no son intercambiables, y elegir la equivocada cuesta tiempo:
- Usa el selector cuando tengas la página completa y quieras una parte de ella. Es visual, resuelve el problema de la hoja de estilos por ti y nunca cargas el resto de la página en el convertidor. Ideal para extraer un hero de una referencia de estilo de la competencia o de una plantilla grande.
- Usa la raíz de copia cuando quieras varias partes de una página. Convierte una vez y luego vuelve a exportar distintos subárboles sin volver a ejecutar el análisis cada vez. Ideal para trabajar de forma sistemática en una página que pretendes reconstruir por completo.
Vigila el anidamiento sobre la marcha
Dividir en secciones tiene un efecto secundario que la gente nota tarde: cada fragmento llega arrastrando todos los niveles de envoltorio que estuvieran por encima en el origen. Pega cuatro fragmentos y puedes acabar con cuatro secciones a cuatro profundidades diferentes, lo que hace que la página final sea inconsistente de editar aunque se vea bien.
El mapa de estructura muestra la profundidad máxima de anidamiento de cada conversión. Échale un vistazo por fragmento y apunta a la misma profundidad baja cada vez; normalmente, estableciendo la raíz de copia uno o dos niveles más abajo en lugar de aceptar el envoltorio más externo. Aquí, la consistencia entre secciones importa más que la cifra absoluta.
Una nota sobre cabeceras, pies de página y banners de cookies
La conversión de página completa recoge todo lo que hay en el cuerpo, lo que en una página real significa la cabecera del sitio, el pie de página, una barra de cookies y posiblemente un widget de chat. Nada de eso pertenece a tu sección, y eliminarlo después en Elementor es más lento que no importarlo nunca.
Este es el argumento práctico más fuerte para dividir en secciones. También evita una sorpresa desagradable concreta: una cabecera importada con posición fija se degrada a absoluta durante la conversión — deliberadamente, para que no pueda cubrir todo tu sitio —, lo que deja un bloque con forma de cabecera flotando sobre tu sección hasta que lo encuentras y lo eliminas.
Cuándo está bien convertir la página completa
Las páginas cortas — un hero, dos o tres secciones y una llamada a la acción en el pie — se convierten limpiamente en una sola pasada. El enfoque sección por sección demuestra su valor en páginas de marketing largas y en cualquier página cuyo marcado no se haya escrito pensando en la conversión.
Una regla razonable: si puedes ver toda la página en tres alturas de scroll y no tiene elementos cromados del sitio, conviértela completa. Cualquier cosa más larga, o capturada de un sitio en vivo en lugar de creada como bloque independiente, es más rápida en secciones.