Bloques y editor: cómo maquetar sin plugins de más

El capítulo de gestores de contenido del Web Almanac 2025 abre su apartado de constructores con una estimación. «Estimates suggest that around 60% of WordPress sites use a page builder». Traducción nuestra: según estimaciones, alrededor del 60 % de los sitios WordPress usa un constructor de páginas. El capítulo no dice de dónde sale la cifra. Lo que sí hace es advertir un riesgo.

Mientras tanto, WordPress cambió. La versión 7.1, del 19 de agosto de 2026, permite dar a los bloques estilos distintos para celular y para tableta, y trae un bloque de pestañas. La 7.0, de mayo, permite ocultar bloques por dispositivo y agregó bloques de iconos y de migas de pan. La 6.9, de diciembre de 2025, trajo el acordeón. Hasta hace poco, esas funciones pedían un constructor, un plugin o CSS propio.

Esta guía es para quien administra su propio sitio y quiere una página que se vea bien sin cargar tres plugins para lograrlo. Dice con qué bloque se arma cada sección, qué sigue pidiendo un plugin y cómo comprobar que la página quedó ligera.

Esto vas a encontrar abajo.

• Alrededor de 60 de cada 100 sitios WordPress usan un constructor, según una estimación del Web Almanac 2025 que el propio capítulo no documenta.
• WordPress 7.1 trae estilos por tamaño de pantalla: hasta 480 píxeles para celular y hasta 782 para tableta, por defecto, según su nota técnica.
• Ocultar un bloque en celular no lo quita de la página. Desde la 7.0 se oculta con CSS, y el bloque sigue en el HTML que descarga el visitante.
• Elementor midió su propia estructura: un título y cuatro cajas de icono usaban 37 elementos div con su sistema viejo y 23 con el nuevo.
• El plugin que devuelve el editor clásico sigue en más de 8 millones de sitios, y su página todavía promete soporte hasta 2024, o el tiempo que sea necesario.
• El plan Essential de Elementor Pro cuesta 60 dólares al año: 1,088.06 pesos al tipo de cambio FIX del 5 de octubre de 2026, y 1,262.15 con 16 % de IVA.

En México, el 97.3 % de quienes usan internet se conecta con un celular inteligente, según el INEGI. Por eso esta guía piensa primero en la pantalla chica.

Dos avisos antes de empezar. Lo que sigue se prueba en una copia del sitio, no en el que está publicado. Y no recomiendo ningún constructor ni ninguna biblioteca de bloques: cuando un caso pide un plugin, digo qué revisar para elegirlo.

Las citas de documentos en inglés van en su idioma original, seguidas de una traducción nuestra, y cada una está enlazada en «Fuentes y metodología».

Lo que dicen los datos sobre constructores y bloques

El HTTP Archive publica el Web Almanac, un informe sobre cómo está hecha la web, armado con los datos de su rastreo. Su capítulo de gestores de contenido de 2025, firmado por Vahe Arabian y publicado el 15 de enero de 2026, trae una sección dedicada a los constructores de WordPress. Los datos del Almanac de ese año salieron del rastreo de julio de 2025.

Seis de cada diez, según una estimación sin fuente

La cifra del 60 % abre la sección. Conviene leerla como lo que es: una estimación que el capítulo no documenta. No trae enlace ni método.

Lo que sí trae método es la gráfica de los cinco constructores más usados. Elementor aparece arriba, y el pie de la figura 12.6 da sus cifras: «43% adoption on mobile and 42% on desktop». Traducción nuestra: 43 % de adopción en celular y 42 % en escritorio. El editor de bloques de WordPress, que el Almanac cuenta como un constructor más, queda en 18 %. La participación de Elementor es 2.39 veces la del editor de bloques.

El capítulo también compara con el año anterior.

Constructor	2024	2025	Cambio
Elementor	56 %	43 %	13 puntos menos
WPBakery	21 %	13 %	8 puntos menos
Divi	14 %	10 %	4 puntos menos
Editor de bloques de WordPress	Sin cifra	18 %	Creció, según el texto

Lo dice así: «Elementor remained the most widely used page builder, but its share dropped from about 56% to 43%». Traducción nuestra: Elementor siguió siendo el constructor más usado, pero su participación bajó de cerca de 56 % a 43 %. Y del editor de bloques: «The WordPress Block Editor grew to around 18%». Traducción nuestra: el editor de bloques de WordPress creció a cerca de 18 %.

Hay un detalle que el capítulo no aclara. No dice sobre qué base se calculan esos porcentajes. Las cuatro cifras de 2025 suman 84, lo que encaja con un reparto entre sitios que usan algún constructor. Es una lectura nuestra, no del Almanac. Lo seguro es la dirección: los tres constructores grandes perdieron participación, y el editor de bloques ganó.

Lo que el propio Almanac advierte

El mismo apartado pone el riesgo por escrito. «Page builders often generate more complex DOM structures and larger CSS and JavaScript bundles, raising performance risks at scale». Traducción nuestra: los constructores de páginas con frecuencia generan estructuras del DOM más complejas y paquetes de CSS y JavaScript más grandes, lo que aumenta los riesgos de rendimiento a gran escala.

El DOM es el árbol de elementos de una página: cada caja, cada título, cada botón. Más cajas son más trabajo para el navegador.

Y el capítulo cuenta hacia dónde se mueven los fabricantes. «In response, major builders are moving closer to WordPress core conventions». Traducción nuestra: en respuesta, los constructores grandes se están acercando a las convenciones del núcleo de WordPress. La frase siguiente lo concreta. «Newer efforts prioritize block-native output, reduced reliance on shortcodes, and deeper integration with the Block Editor and FSE». Traducción nuestra: los esfuerzos más nuevos priorizan una salida nativa en bloques, depender menos de los códigos cortos (shortcodes) e integrarse más con el editor de bloques y con la edición completa del sitio.

Los constructores grandes van hacia los bloques. Ese es el dato.

El capítulo también mide el peso. La página mediana de WordPress en celular pesa 2,894 KB. Del JavaScript da dos medianas, la de Joomla y la de WordPress: «loading medians of 453 KB and 638 KB on mobile devices». Traducción nuestra: cargan medianas de 453 KB y 638 KB en celulares. Los 638 son de WordPress. Y del CSS: «Squarespace and WordPress load the most CSS, with Squarespace reaching a median of 165 KB on mobile and WordPress following at 119 KB». Traducción nuestra: Squarespace y WordPress cargan más CSS que los demás, con una mediana de 165 KB en celular para Squarespace y de 119 KB para WordPress.

Para pasarlo a segundos, uso la conexión que simula PageSpeed Insights para celular. La documentación de Lighthouse la fija en «Throughput: 1.6Mbps down / 750 Kbps up». Traducción nuestra: velocidad de 1.6 megabits por segundo de bajada y 750 kilobits de subida. Con esa conexión, cada megabyte tarda 5 segundos solo en bajar.

Lo que pesa, mediana de WordPress en celular	Kilobytes	Tiempo solo de descarga
Página completa	2,894	14.47 s
JavaScript	638	3.19 s
CSS	119	0.60 s

Una advertencia antes de usar esa tabla. Son medianas de las páginas WordPress que mide el Almanac, con constructor y sin él. El Almanac no las separa. Sirven para ver el orden de magnitud, no para culpar a una herramienta.

Lo que Elementor midió de su propia estructura

Una prueba de que la estructura pesa la publicó el propio Elementor. Su ayuda tiene un artículo, «Analyze Flexbox container performance», es decir, cómo analizar el rendimiento de los contenedores flexibles. Se publicó en septiembre de 2022 y se modificó en mayo de 2026. Compara el sistema viejo de secciones y columnas con los contenedores flexibles, su sistema más nuevo, armando el mismo diseño de las dos formas.

El diseño de prueba es chico: un título arriba y una sección interna de cuatro columnas, con una caja de icono en cada una. Cinco piezas en total. Un div, en el HTML, es la caja genérica que envuelve a otras.

Cómo se armó	Elementos div	Líneas de código
Secciones y columnas	37	105
Contenedores	23	76
Diferencia	14 menos	29 menos

Son 37.8 % menos elementos div y 27.6 % menos líneas, con el mismo resultado en pantalla. La comparación fue solo del HTML. Y deja una idea útil para cualquier herramienta: cada caja que envuelve a otra suma código, y eso se puede medir.

Lighthouse, la prueba que da el número del 0 al 100 en PageSpeed, pone umbrales para ese árbol. En su página «Avoid an excessive DOM size», es decir, cómo evitar un DOM demasiado grande, lo explica en dos frases. «Warns when the body element has more than ~800 nodes». Traducción nuestra: advierte cuando el cuerpo de la página tiene más de unos 800 nodos. «Errors when the body element has more than ~1,400 nodes». Traducción nuestra: marca error cuando tiene más de unos 1,400.

Mi criterio, y va como criterio: para un sitio nuevo en 2026, empezaría con bloques y un tema de bloques, y agregaría un constructor solo cuando una medición o una necesidad concreta lo pidiera. No al revés. El constructor resuelve problemas reales, pero el editor ya resuelve varios de los que justificaban instalarlo. Y la cuenta de elementos del propio Elementor muestra que la estructura extra no sale gratis.

El editor clásico sigue en más de 8 millones de sitios

Hay otro dato que conviene tener a la vista. El plugin que devuelve el editor anterior a los bloques, Classic Editor, es oficial de WordPress y tiene más de 8 millones de instalaciones activas, según su página en el directorio. Su calificación es de 4.9 sobre 5.

Su descripción promete soporte con una fecha que ya pasó. «Classic Editor is an official WordPress plugin, and will be fully supported and maintained until 2024, or as long as is necessary». Traducción nuestra: Classic Editor es un plugin oficial de WordPress y tendrá soporte completo y mantenimiento hasta 2024, o el tiempo que sea necesario.

Del 31 de diciembre de 2024 al 7 de octubre de 2026 van 645 días. La segunda mitad de la frase es la que lo mantiene vivo: según su página en el directorio, al 7 de octubre de 2026 su última actualización era de hace cuatro meses.

La cifra de instalaciones dice cuánto se usa, no por qué. Puede ser costumbre, un sitio viejo que nadie tocó o un constructor que reemplaza al editor de todos modos. La página no lo dice, y yo tampoco lo sé. Lo que sí sé es que esos sitios pueden probar en una copia casi todo lo de este artículo, en cuanto activen el editor de bloques. La pantalla de Estilos, eso sí, pide un tema de bloques.

Lo que WordPress agregó entre 2023 y 2026

Para saber si hoy hace falta un constructor, primero hay que saber qué trae el editor. Casi todo lo que sigue llegó entre 2023 y 2026, y la visibilidad por dispositivo y los estilos por pantalla llegaron en 2026.

Del editor de 2018 a los temas de bloques de 2022

WordPress 5.0, del 6 de diciembre de 2018, estrenó el editor de bloques. Cada párrafo, imagen o título pasó a ser una pieza que se mueve y se configura por separado. El proyecto se conoce como Gutenberg, y un plugin con ese nombre sirve de banco de pruebas: funciones como la cuadrícula aparecen ahí primero y después pasan a WordPress.

La segunda etapa llegó con la 5.9, del 25 de enero de 2022. Esa versión trajo la edición completa del sitio y el primer tema por defecto hecho de bloques en la historia de WordPress. En un tema de bloques, el encabezado, el pie y las plantillas también se arman con bloques, desde el editor del sitio.

Desde el estreno del editor van 2,862 días. Casi ocho años.

6.2 a 6.8: CSS propio, cuadrícula, patrones y fuentes

La 6.2, del 29 de marzo de 2023, permitió agregar CSS propio al sitio o a un bloque desde el editor. Sirve para un ajuste fino sin plugin.

La 6.3, del 8 de agosto de 2023, trajo varias piezas de maquetación de golpe. La primera fue la disposición en cuadrícula. Un artículo del blog para desarrolladores de WordPress, de Justin Tadlock, lo resume. «Grid layout support first landed in Gutenberg 15.5 and officially shipped with WordPress 6.3». Traducción nuestra: el soporte para la disposición en cuadrícula llegó primero en Gutenberg 15.5 y salió oficialmente con WordPress 6.3.

En esa misma versión llegó el bloque Detalles (Details). El anuncio lo explica así. «Use the Details block to avoid spoiling a surprise, create an interactive Q&A section, or hide a long paragraph under a heading». Traducción nuestra: usa el bloque Detalles para no arruinar una sorpresa, crear una sección interactiva de preguntas y respuestas o esconder un párrafo largo bajo un título.

También los patrones sincronizados, que antes se llamaban bloques reutilizables. El anuncio dice que se puede elegir sincronizarlos «so that one change applies to all parts of your site». Traducción nuestra: para que un solo cambio se aplique en todas las partes del sitio. Y dos más: el historial de estilos, para volver a un diseño anterior, y la relación de aspecto de las imágenes.

La 6.5, del 2 de abril de 2024, trajo la biblioteca de fuentes para los temas de bloques: instalar, quitar y activar tipografías sin código. Y la conexión de bloques con campos personalizados, que sirve para mostrar datos sin crear bloques propios.

La 6.6, del 16 de julio de 2024, resolvió un problema de los patrones sincronizados: que eran idénticos en todas partes. El anuncio lo pone así. «Make content changes in each instance of a synced pattern while maintaining a consistent style across them». Traducción nuestra: cambia el contenido de cada copia de un patrón sincronizado y mantén el mismo estilo en todas.

La 6.6 también sumó la pieza que hoy se usa para las tarjetas. Su nota técnica sobre la cuadrícula lo dice en una línea. «Group block now has a Grid variation». Traducción nuestra: el bloque Grupo ahora tiene una variación Cuadrícula. Es el bloque Cuadrícula (Grid) que aparece al insertar.

La 6.8, del 15 de abril de 2025, llevó el libro de estilos a los temas clásicos que tienen estilos del editor o un archivo theme.json. Es la pantalla donde se ven todos los estilos del sitio juntos.

6.9: acordeón y bloques ocultos

La 6.9 salió el 2 de diciembre de 2025. Entre los bloques nuevos que nombra su guía de campo para desarrolladores están el Acordeón (Accordion), uno para fórmulas matemáticas, uno para listar términos y dos para comentarios. Del primero dice: «The new Accordion Block in 6.9 supports custom styling and pattern capabilities». Traducción nuestra: el nuevo bloque Acordeón de la 6.9 admite estilos propios y funciones de patrón.

La misma guía presenta una función que después creció. «WordPress 6.9 allows editors to hide and reveal blocks with a simple click». Traducción nuestra: WordPress 6.9 permite a quien edita ocultar y mostrar bloques con un solo clic.

Hay tres cosas más de esa versión que tocan el diseño. Las notas, que permiten dejar comentarios sobre un bloque concreto, como en un documento compartido. Una opción de tipografía que ajusta el tamaño del texto para llenar su contenedor. Y un cambio de rendimiento: los temas clásicos empezaron a cargar los estilos de cada bloque solo cuando la página lo usa.

7.0: visibilidad por dispositivo, iconos y migas de pan

La 7.0, llamada Armstrong, salió el 20 de mayo de 2026. Para maquetar, la novedad principal es esta. «Hide and reveal blocks based on device, without affecting other viewports». Traducción nuestra: oculta y muestra bloques según el dispositivo, sin afectar a las demás pantallas. Más adelante, en «Ocultar por dispositivo: se ve menos, pero sigue en la página», está lo que esa función hace y lo que no hace.

La misma versión trajo dos bloques que antes pedían un plugin o código propio. «Deliver clear site navigation with the new Breadcrumbs block, and add more detail to your designs with the new Icons block». Traducción nuestra: ofrece una navegación clara con el nuevo bloque de migas de pan, y agrega más detalle a tus diseños con el nuevo bloque de iconos.

Y tres cambios más. El menú que se abre en celular ahora se diseña con bloques y patrones. Las fuentes se administran desde una página propia para cualquier tipo de tema. «Install, upload and manage your font collection from the new dedicated font management page, with support for block, hybrid and classic themes». Traducción nuestra: instala, sube y administra tu colección de fuentes desde la nueva página de gestión de fuentes, compatible con temas de bloques, híbridos y clásicos. Y los patrones se comportan como una sola unidad al editarlos, algo que se explica en «Lo que cambió en 7.0: editar solo el contenido».

7.1: estilos para celular y tableta, y pestañas

La 7.1, llamada Mary Lou, salió el 19 de agosto de 2026. Es la versión que trae los estilos por pantalla. Su anuncio resume la novedad en una línea. «WordPress 7.1 brings more responsive controls directly into the Site Editor». Traducción nuestra: WordPress 7.1 lleva más controles responsivos directamente al editor del sitio.

La nota técnica de esa función, del 5 de agosto, da los detalles. Hay dos pantallas además de la base: celular, hasta 480 píxeles de ancho, y tableta, de más de 480 a 782. Son los anchos por defecto. El estilo normal del bloque vale para todas las pantallas, y en escritorio es el único que se usa. Y la función aplica a casi todo. «They can be applied to all block types (and their block style variations) that use core block supports such as typography, color, background, border, dimensions, spacing, and layout». Traducción nuestra: se pueden aplicar a todos los tipos de bloque, y a sus variaciones de estilo, que usen funciones de bloque del núcleo, como tipografía, color, fondo, borde, dimensiones, espaciado y disposición.

Según el anuncio, la misma versión trajo el bloque Pestañas (Tabs). «Organize content into tabbed panels instead of showing everything at once». Traducción nuestra: organiza el contenido en paneles con pestañas, en lugar de mostrarlo todo a la vez. El anuncio también nombra una mejora para los botones. «Give Button blocks distinct styles for hover, focus, and active states directly in the editor’s style controls». Traducción nuestra: da a los bloques Botón estilos distintos para cuando el cursor pasa encima, cuando tienen el foco y cuando se presionan, desde los controles de estilo del editor.

Según el anuncio, en la 7.1 participaron más de 800 personas, y más de 170 lo hicieron por primera vez.

La versión vigente al 7 de octubre de 2026 es la 7.1.3, de mantenimiento y seguridad, publicada un día antes.

Lo que las comparativas no alcanzaron a ver

Revisé cuatro de los primeros resultados en español al buscar cómo maquetar en WordPress con bloques. Una comparativa le da al editor de bloques, en su tabla, solo puntos de quiebre básicos, y no menciona nada de la 7.0 ni de la 7.1. Otra dice que la 7.0 trajo controles por bloque para tableta y celular, cuando esa versión trajo la visibilidad por dispositivo y los estilos por pantalla llegaron en la 7.1. Una guía llama versión actual a la 6.1. Ninguna menciona las pestañas.

En parte es cuestión de tiempo: la 7.1 tiene 49 días. Pero la consecuencia para quien decide es concreta: en las páginas que revisé, las razones para instalar un constructor se escribieron antes de esa versión.

Mi criterio, y va como criterio: antes de decidir entre constructor y bloques, actualizaría una copia del sitio a la 7.1 y armaría ahí la página que más me preocupa. Una tarde con la versión actual dice más que cualquier comparativa, incluida esta, porque prueba tu diseño con tu tema.

Las cajas que ordenan una página

Antes de diseñar una sección hay que entender las cajas. Un constructor las llama secciones, columnas o contenedores. En el editor de bloques, esta guía usa cinco: Grupo, Fila, Pila, Cuadrícula y Columnas. Con ellas se arma el esqueleto de una página.

Una advertencia sobre los nombres. Los bloques aparecen en español si tu WordPress está en español, pero la traducción puede variar entre versiones. Por eso, al presentar cada bloque pongo entre paréntesis su nombre en inglés, que es el que usa la documentación oficial.

Grupo: el contenedor de casi todo

La referencia oficial de bloques describe el Grupo (Group) en una línea. «Gather blocks in a layout container». Traducción nuestra: reúne bloques en un contenedor de disposición.

Es la caja básica. Le das un color de fondo, un relleno y un ancho, y adentro pones lo que haga falta: un título, un párrafo, una imagen, otros grupos. Si vienes de un constructor, piensa en una sección.

Una regla práctica que me funciona: cada franja horizontal de la página es un grupo. La franja de bienvenida, la de servicios, la de preguntas, la de contacto. Así, cuando quieras mover una sección completa, mueves un solo bloque.

El Grupo tiene además un ajuste discreto. En los ajustes avanzados se elige qué etiqueta lleva en el HTML: una sección, un encabezado, un pie, un artículo. La referencia lo registra como el atributo tagName. No cambia cómo se ve. Cambia cómo lo leen el navegador, los lectores de pantalla y los buscadores.

Fila y Pila

La Fila (Row) acomoda en horizontal. Su página de documentación lo dice así. «Row block is one of the container blocks that can be used to arrange blocks in a single horizontal line». Traducción nuestra: el bloque Fila es uno de los bloques contenedores que sirven para acomodar bloques en una sola línea horizontal.

La misma página detalla sus ajustes. Puedes alinear lo que va adentro, cambiar la orientación y permitir que los bloques bajen a otra línea cuando no quepan. Y cada bloque de la fila puede ocupar solo el espacio que necesita, llenar el espacio libre, tener un ancho máximo o tener un ancho fijo.

La Pila (Stack) hace lo mismo en vertical. Un tutorial de Learn WordPress, el sitio de cursos del proyecto, explica que Fila y Pila son variaciones del Grupo. Es decir, la misma caja con otra dirección.

Para qué sirve cada una, con ejemplos concretos.

• Fila: el logo a la izquierda y el menú a la derecha; dos botones uno junto al otro; un precio con su etiqueta.
• Pila: una tarjeta con título, texto y botón, con el mismo espacio entre los tres.

Si cambias de opinión, no hay que rehacer nada. Según la documentación de Fila, el bloque se convierte en Grupo, Pila, Cuadrícula, Portada, Columnas o Detalles desde el botón de transformar.

Cuadrícula

La Cuadrícula (Grid) es la caja para tarjetas iguales: servicios, productos, testimonios, miembros de un equipo. Como se vio arriba, la disposición en cuadrícula llegó con la 6.3, y el bloque, como variación del Grupo, con la 6.6. Ahorra mucho trabajo de diseño en celular.

El artículo de Justin Tadlock en el blog para desarrolladores resume su truco principal. «Basically, you can create equal-width columns based on a minimum width that you define». Traducción nuestra: básicamente, puedes crear columnas del mismo ancho a partir de un ancho mínimo que tú defines.

Eso significa que no le dices cuántas columnas quieres en cada pantalla. Le dices cuánto debe medir como mínimo cada tarjeta, y el navegador acomoda las que quepan por renglón. En una pantalla ancha caben varias. En un celular, si el mínimo es amplio, una.

El autor lo comprueba con sus propios ejemplos, y escribe que todos «break down on smaller screen sizes like tablets and mobile phones without issue». Traducción nuestra: se acomodan sin problema en pantallas más chicas, como tabletas y celulares.

Para una página de servicios, eso quita un problema de diseño en celular sin escribir una sola regla especial.

Columnas, y cuándo no usarlas

Columnas (Columns) divide un espacio en partes. Cada columna es una caja propia, y cada una puede tener un ancho distinto. En la referencia, el bloque trae el atributo isStackedOnMobile: en pantallas chicas, las columnas se apilan una debajo de otra.

Funciona. Pero tiene un costo que no se ve. Columnas mete una caja por cada columna, aunque adentro haya un solo bloque. En una Cuadrícula, los bloques van directo dentro del contenedor.

Mi criterio, y va como criterio: usaría Columnas solo cuando las partes tienen anchos distintos a propósito, como un texto ancho junto a una foto angosta. Para tarjetas iguales, Cuadrícula; para cosas en línea, Fila. Cada caja de más es un elemento más que el navegador tiene que dibujar, y la prueba de Elementor que vimos al principio mostró cuánto se acumulan.

El espacio entre bloques

El bloque Espaciador (Spacer) existe para esto. La referencia lo describe así. «Add white space between blocks and customize its height». Traducción nuestra: agrega espacio en blanco entre bloques y ajusta su altura.

El detalle es que el Espaciador es un bloque más: ocupa un lugar en la página como cualquier otro. Para separar secciones hay otras dos vías que no agregan elementos. Una son los márgenes y el relleno de cada bloque, en su panel de estilos. La otra es el espaciado entre bloques de los estilos globales, que se define una vez para todo el sitio.

Desde la 7.1, además, el relleno y los márgenes pueden ser distintos en celular y en tableta. Lo detallo en «Estilos para celular y tableta».

Una página de inicio, sección por sección

Con las cajas claras, toca armar algo. Uso como ejemplo la página de inicio de un despacho contable inventado, con siete secciones. Son una portada con una frase y un botón, los servicios en tarjetas, quiénes somos con una foto, preguntas frecuentes, horarios por sucursal, las últimas entradas del blog y el menú. Cada una se arma con bloques del núcleo.

La portada de arriba

La primera franja de la página es una Portada (Cover). La referencia la describe en una línea. «Add an image or video with a text overlay». Traducción nuestra: agrega una imagen o un video con un texto encima.

Sus ajustes cubren lo básico de una portada. La referencia lista, entre sus atributos, la altura mínima, la opacidad de la capa de color que va sobre la imagen, el punto focal y la opción de usar la imagen destacada de la página. El punto focal decide qué parte de la foto queda visible cuando la pantalla la recorta, y en celular eso importa: una foto horizontal en una pantalla vertical pierde los lados.

La opacidad de la capa no es un detalle de gusto. Un texto blanco sobre una foto clara no se lee. Con la capa más oscura, el texto se lee sin cambiar la foto.

Aquí está la imagen más pesada de la página, y probablemente la que mide el LCP, el tiempo hasta que se pinta el elemento más grande. Desde la 6.3, WordPress marca con prioridad alta la imagen que calcula que será la del LCP. Lo que conviene revisar a mano es lo contrario: que esa imagen no lleve carga diferida. Está explicado con detalle en cómo acelerar una tienda WooCommerce, y vale igual para cualquier página.

Mi criterio, y va como criterio: en la portada pondría una sola imagen, comprimida y del tamaño en que se muestra, en lugar de un video o un carrusel. Es lo primero que ve quien llega, y cada cosa de más ahí retrasa lo que se pinta primero.

Medios y texto

La sección de quiénes somos lleva una foto del equipo y un párrafo al lado. Para eso existe Medios y texto (Media & Text). Su descripción oficial empieza así. «Set media and words side-by-side». Traducción nuestra: pon medios y palabras lado a lado.

Se parece a dos columnas, pero trae ajustes propios para la imagen. Como Columnas, tiene el atributo isStackedOnMobile, que en pantalla chica pone la imagen y el texto uno debajo del otro. Además, tiene un punto focal propio y una opción para que la imagen llene todo su lado.

Si la foto va a la derecha en una sección y a la izquierda en la siguiente, la página gana ritmo sin un solo plugin. Es un ajuste de posición del mismo bloque.

Botones

El botón de la portada es un bloque Botones (Buttons), que agrupa uno o varios botones en línea. Cada uno tiene su texto, su enlace, su color y su borde.

La novedad está en la 7.1. Como se vio arriba, cada botón puede tener estilos distintos cuando el cursor pasa encima, cuando tiene el foco del teclado y cuando se presiona, desde los controles de estilo del editor. Antes, eso dependía del tema, de CSS propio o de un plugin.

El estilo del foco no es decoración. Es lo que ve quien navega con el teclado para saber dónde está. Si cambias los colores del botón, revisa que el foco se siga notando.

Además del color, cuenta lo que dice el botón. Para el texto, sirve lo que contamos en cómo crear una oferta para tus clientes.

Preguntas frecuentes con Detalles y Acordeón

Para preguntas y respuestas hay dos bloques, y no son iguales.

Detalles (Details) llegó en la 6.3. Muestra una línea, y al hacer clic se abre el texto escondido. Según la referencia, entre sus atributos están el texto visible y si empieza abierto. Es el más simple de los dos.

Acordeón (Accordion) llegó en la 6.9. La referencia lo describe así. «Displays a foldable layout that groups content in collapsible sections». Traducción nuestra: muestra una disposición plegable que agrupa el contenido en secciones que se pueden contraer.

No es un solo bloque. Según el blog para desarrolladores de WordPress, son cuatro bloques anidados: el acordeón contiene secciones, y cada sección lleva un título y un panel. Y la referencia le da atributos que Detalles no tiene: uno de cierre automático (autoclose), uno para el nivel de título (headingLevel) y dos para el icono.

Para la página del despacho, la regla que uso es esta. Una o dos preguntas sueltas dentro de un texto, Detalles. Un bloque de diez preguntas con el mismo diseño, Acordeón. Y si el atributo de nivel de título hace lo que su nombre indica, las preguntas pueden quedar dentro del orden de encabezados de la página.

Pestañas

El despacho tiene tres sucursales con horarios distintos. Es un caso hecho para unas Pestañas (Tabs), que llegaron en la 7.1. La referencia las describe así. «Display content in a tabbed interface to help users navigate detailed content with ease». Traducción nuestra: muestra el contenido en una interfaz de pestañas para ayudar a navegar contenido detallado con facilidad.

Las pestañas sirven para contenido paralelo: lo mismo, en versiones distintas. Horarios por sucursal, planes, especificaciones por modelo. No sirven para esconder algo que cualquier visitante debería leer, porque quien no hace clic no lo ve.

En celular, revisa los nombres de las pestañas. En una pantalla angosta, los nombres cortos caben mejor: Centro, Norte, Sur.

Iconos y migas de pan

Las tarjetas de servicios llevan un icono cada una. Desde la 7.0 hay un bloque Icono (Icon), que la referencia describe en cuatro palabras. «Insert an SVG icon». Traducción nuestra: inserta un icono SVG. Sus atributos permiten girarlo y voltearlo.

Un SVG es un dibujo hecho de instrucciones, no de píxeles: se ve nítido en cualquier tamaño. Antes, para poner iconos había que recurrir a un plugin, a una fuente de iconos o a imágenes sueltas.

Las migas de pan, ese camino del tipo Inicio › Servicios › Contabilidad, también llegaron en la 7.0. El bloque Migas de pan (Breadcrumbs) tiene atributos para elegir el separador y para mostrar u ocultar el inicio y la página actual. En la página de inicio no hacen falta. En las páginas interiores ayudan a ubicarse.

La lista de entradas del blog

La sección de últimas entradas es un Bucle de consulta (Query Loop). La referencia lo describe como un bloque avanzado que muestra entradas según los criterios que elijas, con el diseño que elijas.

Adentro van otros bloques: el título de la entrada, su imagen destacada, la fecha, el extracto. Y la plantilla de entradas que va adentro puede acomodarse en cuadrícula, así que las entradas se reacomodan en celular, igual que las tarjetas de servicios.

Si el blog del despacho todavía está vacío o casi, esta sección puede esperar. Una lista con dos entradas de hace un año dice lo contrario de lo que quieres. Sobre qué publicar, está cómo crear contenido que atraiga visitas.

El menú

El menú es el bloque Navegación (Navigation). En celular se convierte en un botón que abre el menú encima de la página; su atributo overlayMenu decide cuándo pasa eso.

La 7.0 cambió esa capa. Su anuncio lo dice así. «Design and build your menu overlay with blocks and patterns, fully customizable with the styles you want visitors to see». Traducción nuestra: diseña y arma la capa de tu menú con bloques y patrones, y personalízala por completo con los estilos que quieras que vean tus visitantes.

En la práctica, el menú del celular ya no tiene que ser una lista simple. Puede llevar un botón de contacto, un teléfono o un buscador, armados con los mismos bloques del resto de la página.

Patrones: diseñar una vez y usar muchas

La página del despacho tiene tarjetas de servicios que se repiten en otras páginas. Y el despacho quiere un recuadro de contacto al final de casi todas sus páginas. Armar eso cada vez es perder la tarde. Para no hacerlo existen los patrones.

Un patrón es un conjunto de bloques guardado con nombre. La referencia describe el bloque Patrón (Pattern) en una línea. «Reuse this design across your site». Traducción nuestra: reutiliza este diseño en todo tu sitio.

Sincronizados y sin sincronizar

Al crear un patrón, el editor pregunta si lo quieres sincronizado. La respuesta cambia todo.

Sin sincronizar, el patrón es un molde. Lo insertas y obtienes una copia. Si después cambias el molde, las copias que ya pusiste no se enteran. Sirve para empezar algo que después vas a cambiar: la estructura de una página de servicio, por ejemplo.

Sincronizado, el patrón es una sola pieza que aparece en varios lugares. Como decía el anuncio de la 6.3, la idea es que un solo cambio se aplique en todo el sitio. Si el despacho cambia de teléfono, se cambia una vez en el recuadro de contacto y queda bien en todas las páginas.

Las partes de plantilla (Template Part) son la versión grande de lo mismo. La referencia las describe así. «Edit the different global regions of your site, like the header, footer, sidebar, or create your own». Traducción nuestra: edita las distintas regiones globales de tu sitio, como el encabezado, el pie o la barra lateral, o crea las tuyas. El encabezado del sitio es una sola pieza, y si la cambias, cambia en todas las páginas.

Anulaciones: el mismo diseño, otro texto

Un patrón sincronizado tenía un problema: era idéntico en todas partes. Si querías el mismo diseño de tarjeta con textos distintos, no servía.

La 6.6 lo resolvió con las anulaciones, que el anuncio de esa versión describió como se vio arriba: cambiar el contenido de cada copia y mantener el mismo estilo en todas. Quien arma el patrón marca qué bloques se pueden cambiar en cada copia, como el título y el texto, y el resto queda fijo.

Para el despacho, eso es una tarjeta de servicio. El diseño vive en un solo lugar. El nombre del servicio y su descripción cambian en cada tarjeta. Si mañana se decide que las tarjetas lleven borde, se cambia el patrón y cambian todas.

Lo que cambió en 7.0: editar solo el contenido

La 7.0 cambió cómo se comportan los patrones al editar una página. Una nota técnica de marzo de 2026 lo explica. Según la nota, «unsynced patterns and template parts inserted into the editor now default to contentOnly mode, prioritizing the editing of text and media without exposing the deeper block structure or style controls». Traducción nuestra: los patrones sin sincronizar y las partes de plantilla que se insertan en el editor ahora quedan por defecto en modo de solo contenido. Ese modo da prioridad a editar textos y medios sin mostrar la estructura interna de bloques ni los controles de estilo.

Para quien solo cambia textos, es una ventaja. Ya no mueve por accidente una columna al corregir una frase.

Para quien diseña, hay una salida. La misma nota la describe. «A user can click an ‘Edit pattern’ button or double click the body of a pattern, and a spotlight mode engages». Traducción nuestra: se puede hacer clic en un botón de editar patrón o doble clic en el cuerpo del patrón, y se activa un modo que lo resalta. Según la nota, en ese modo hay edición completa. Y para quien desarrolla, la nota nombra el ajuste que desactiva ese comportamiento: disableContentOnlyForUnsyncedPatterns.

Bloquear para que nadie mueva el diseño

Si otra persona edita el sitio, como quien lleva las redes del despacho, hay una herramienta más. La documentación para desarrolladores la presenta así. «The Block Locking API allows you to restrict actions on specific blocks within the Editor». Traducción nuestra: la API de bloqueo de bloques permite restringir acciones sobre bloques concretos dentro del editor.

Desde el editor, el bloqueo tiene dos opciones. Según la misma página, «The locking UI has options for preventing blocks from being moved within the content canvas or removed». Traducción nuestra: la interfaz de bloqueo tiene opciones para evitar que los bloques se muevan dentro del lienzo o se eliminen.

Y hay un tercer nivel, el de solo contenido, que es el que la 7.0 aplicó a los patrones. La documentación lo distingue del bloqueo. Dice que la edición de solo contenido «hides all design tools, while still allowing for the ability to edit the content of the blocks». Traducción nuestra: esconde todas las herramientas de diseño y deja editar el contenido de los bloques.

Mi criterio, y va como criterio: en un sitio que edita más de una persona, bloquearía el movimiento y la eliminación de las secciones principales de la página de inicio. Cuesta un minuto. Y evita la llamada de un lunes preguntando por qué desapareció la sección de servicios.

Estilos globales: el diseño en un solo lugar

Los patrones resuelven lo que se repite. Los estilos globales resuelven lo que debe ser igual en todas partes: colores, fuentes, tamaños, espacios. Y aquí el tipo de tema importa.

Temas de bloques y temas clásicos

La documentación de WordPress define la pantalla de Estilos así. «Styles is a feature that allows you to set the overall aesthetics and layout of your site at a global level, instead of editing individual blocks or pages». Traducción nuestra: Estilos es una función que permite definir la estética y la disposición general del sitio a nivel global, en lugar de editar bloques o páginas uno por uno.

La frase siguiente marca el límite. «It is included in block themes and requires WordPress 5.9 or higher». Traducción nuestra: está incluida en los temas de bloques y requiere WordPress 5.9 o superior.

Un tema de bloques es el que se arma completo con bloques, incluidos el encabezado y el pie. Un tema clásico usa plantillas de código, y su diseño se cambia desde el personalizador o desde los ajustes del propio tema. Una pista rápida para saber cuál tienes: con un tema de bloques, el menú Apariencia muestra Editor; con uno clásico, muestra Personalizar. Si el panel de administración de WordPress todavía te es nuevo, conviene empezar por qué es WordPress y por qué sigue siendo útil.

Los temas clásicos no se quedaron atrás del todo. La 6.8 llevó el libro de estilos a los que tienen estilos del editor o archivo theme.json. Y la 7.0 llevó la administración de fuentes, que ya tenían los temas de bloques, a los híbridos y a los clásicos.

Un ejemplo de tema de bloques es Twenty Twenty-Five, uno de los temas oficiales de WordPress. Su página en el directorio dice que tiene más de un millón de instalaciones activas, que va en la versión 1.5, actualizada el 20 de mayo de 2026, y que pide WordPress 6.7. Entre sus etiquetas están las de tema de bloques y variaciones de estilo.

Mi criterio, y va como criterio: si tu sitio usa un tema clásico que funciona, no lo cambiaría solo por leer este artículo. Pero si vas a cambiar de tema de todos modos, elegiría uno de bloques. La pantalla de Estilos solo existe ahí, y es la que sustituye buena parte de lo que se le pedía a un constructor.

theme.json, sin código

Detrás de los estilos de un tema de bloques hay un archivo. La documentación para desarrolladores lo define así. «theme.json is a configuration file that lets you define the global settings, styles, and more for your theme». Traducción nuestra: theme.json es un archivo de configuración que permite definir los ajustes globales, los estilos y más para tu tema. La frase que sigue agrega algo. «The file works with both block and classic themes». Traducción nuestra: el archivo funciona con temas de bloques y con temas clásicos.

No hace falta abrirlo para cambiar el diseño. La misma página explica por qué. «Each part of that design is handled directly in theme.json, and the user can further customize it through the built-in Styles interface». Traducción nuestra: cada parte de ese diseño se maneja directamente en theme.json, y el usuario puede personalizarlo más desde la pantalla de Estilos integrada.

En la práctica, el tema trae una paleta, unas fuentes y unos tamaños, y tú los cambias desde Estilos. La documentación dice que esos cambios afectan todo el sitio. «The styles you set from within the Styles interface impact your entire site». Traducción nuestra: los estilos que defines desde la pantalla de Estilos afectan todo tu sitio.

Desde ahí también se cambia el aspecto de un tipo de bloque en todo el sitio: todos los botones, todos los títulos. Y desde la 7.1, esos estilos pueden variar por pantalla. La documentación de los estilos responsivos pone un ejemplo: que todos los títulos sean más chicos en celular.

Si el tema trae variaciones de estilo, se cambia la apariencia completa con un clic. La documentación las describe así. «With these style variations, you are presented with alternate versions of your block theme with different combinations of colors, fonts, typography, spacing, block settings, and more». Traducción nuestra: con estas variaciones de estilo ves versiones alternativas de tu tema de bloques con distintas combinaciones de colores, fuentes, tipografía, espaciado, ajustes de bloques y más.

Fuentes y CSS adicional

Desde la 6.5, las fuentes se administran en el editor, con la biblioteca de fuentes de los temas de bloques. Y desde la 7.0, en una página propia que sirve para cualquier tipo de tema, como se vio arriba.

Cada familia de fuentes, y a veces cada grosor, es un archivo que el visitante descarga. Dos familias con dos grosores cada una pueden ser cuatro archivos.

Para lo que los controles no alcanzan está el CSS adicional. La página de la versión 6.2 lo anunció así. «Add CSS to your site, or your blocks, for another level of control over your site’s look and feel». Traducción nuestra: agrega CSS a tu sitio o a tus bloques para tener otro nivel de control sobre el aspecto de tu sitio.

Sirve para un ajuste fino: una sombra, un detalle de un bloque concreto. Si te descubres escribiendo decenas de líneas, probablemente hay un bloque o un ajuste que ya lo hace.

Responsivo sin constructor

Una idea que circula es que sin un constructor no se controla cómo se ve una página en el celular. Hasta la 7.0, de mayo de 2026, tenía algo de cierto. En 2026 hay tres herramientas, y conviene saber cuál usar para qué.

Lo que se reacomoda solo

Buena parte del trabajo responsivo lo hacen los bloques sin que toques nada. Ya aparecieron arriba, pero vale juntarlos.

• Cuadrícula: con un ancho mínimo por tarjeta, el navegador decide cuántas caben por renglón.
• Columnas y Medios y texto: tienen el ajuste para apilarse en pantalla chica.
• Fila: puede dejar que sus bloques bajen a otra línea cuando no caben.
• Navegación: el menú se convierte en un botón que abre una capa.

Si la página se arma con esas cajas, buena parte del diseño para celular ya está resuelta antes de abrir cualquier ajuste. Lo que falta son los detalles: un título demasiado grande, un relleno demasiado ancho, una pieza que sobra.

Ocultar por dispositivo: se ve menos, pero sigue en la página

Para la pieza que sobra, la 7.0 trajo la visibilidad por dispositivo. Se elige en qué pantallas no se ve un bloque: celular, tableta o escritorio. La opción está en las herramientas del bloque y en la vista de lista.

Ahora, lo que la función hace por dentro. La nota técnica de la 7.0 lo dice en dos frases cortas. «Blocks hidden by viewport are rendered in the DOM». Traducción nuestra: los bloques ocultos por tamaño de pantalla se generan en el DOM. «The hiding happens in the CSS». Traducción nuestra: el ocultamiento ocurre en el CSS.

Es decir, el bloque oculto en celular viaja completo al celular. Está en el HTML que se descarga, cuenta en el tamaño del DOM y el navegador lo procesa. Lo único que no hace es pintarse en pantalla.

Hay una excepción: la opción de ocultar el bloque del todo, la que trajo la 6.9. Según la misma nota, esa sí impide que el bloque se genere, y entonces desaparece de la página. Un bloque así es, en la práctica, un bloque guardado para después.

¿Y las imágenes del bloque oculto? Depende. Una guía de web.dev sobre la carga diferida dice que Chrome, Safari y Firefox no descargan una imagen con carga diferida si está escondida con display: none. Vale igual si la regla está en la imagen o en un elemento que la contenga. La guía no dice lo mismo de las imágenes que se piden de inmediato, y la nota de WordPress no dice qué regla de CSS usa para ocultar. Si te importa, revísalo en la pestaña de red del navegador, como se explica en «Cómo medir si una página quedó ligera».

Mi criterio, y va como criterio: ocultaría por dispositivo solo piezas chicas, como un botón o una línea de texto. Si estoy por ocultar una sección completa en celular, me preguntaría primero si hace falta en escritorio. Y si necesito una versión distinta de la sección para cada pantalla, probaría con los estilos de la 7.1 antes que con dos copias, una oculta en cada pantalla. Las dos copias viajan en cada visita.

Estilos para celular y tableta

La herramienta grande es la de la 7.1. Su documentación la presenta en una línea. «Responsive styles let you give a block different settings depending on the screen size it’s viewed on». Traducción nuestra: los estilos responsivos permiten dar a un bloque ajustes distintos según el tamaño de la pantalla en que se ve.

Las pantallas son tres. La documentación define el celular así. «Screens 480px wide and narrower». Traducción nuestra: pantallas de 480 píxeles de ancho o menos. Y la tableta así. «Screens wider than 480px, up to 782px». Traducción nuestra: pantallas de más de 480 píxeles, hasta 782. El estilo normal vale para todos los anchos, y es el que se usa en celular y en tableta mientras no les pongas otro.

Los pasos, según la misma documentación, son cuatro.

1. En la barra superior, abre el menú de vista (View, en la interfaz en inglés) y activa los estilos responsivos (Responsive styles).
2. Cambia la vista a tableta o a celular.
3. Selecciona el bloque.
4. En el panel de ajustes del bloque, cambia el estilo: el tamaño de la letra, el relleno, lo que necesites.

Mientras estás en la vista de tableta o celular, el panel muestra una etiqueta con el nombre del dispositivo. Así sabes que lo que cambias no toca el escritorio.

Hay un límite que conviene conocer antes de frustrarse. «Controls in the block toolbar, such as text alignment, apply to every screen size no matter which device view is selected». Traducción nuestra: los controles de la barra de herramientas del bloque, como la alineación del texto, se aplican a todos los tamaños de pantalla, sin importar qué vista de dispositivo esté seleccionada. Lo que tiene versión por pantalla es lo que está en los paneles de estilo: tipografía, color, fondo, bordes, dimensiones, espaciado y disposición.

Y un detalle que sale de cómo están escritas las reglas. La nota técnica de la 7.1 da los rangos exactos: el celular va hasta 480 píxeles y la tableta empieza en más de 480. Los rangos no se enciman. De ahí sale una deducción nuestra, que la nota no dice con estas palabras: si cambias algo solo en tableta, el celular no lo hereda y se queda con el estilo normal. Si quieres el mismo cambio en los dos, hay que hacerlo en los dos.

Dos cosas más de esa nota. Los estilos de celular y tableta se guardan dentro del propio bloque, junto a su estilo normal. Y un tema puede cambiar esos dos anchos desde su archivo theme.json; si el tuyo lo hace, las cifras de 480 y 782 no aplican.

Cómo revisarlo en un celular de verdad

La vista de celular del editor es una aproximación. Sirve para trabajar, no para dar por terminada una página. La prueba final se hace en un teléfono, con la página publicada en la copia del sitio.

Lo que reviso, en este orden.

1. Que no haya desplazamiento hacia los lados. Si la página se mueve horizontalmente, algo es más ancho que la pantalla: una tabla, una imagen con ancho fijo, una fila que no baja de línea.
2. Que el texto se lea sin acercar. Ni títulos que ocupen media pantalla ni párrafos diminutos.
3. Que los botones se toquen con el pulgar sin pegarle al de al lado.
4. Que el menú abra y cierre, y que tenga lo que importa: contacto y teléfono.
5. Que lo oculto esté oculto y lo visible, visible, en las dos orientaciones.

Si no tienes a la mano un teléfono con pantalla chica, el modo de dispositivo de las herramientas para desarrolladores del navegador se acerca más que la vista del editor.

Lo que todavía pide un plugin

Hasta aquí, todo salió del núcleo. Pero el editor no lo trae todo, y un artículo que solo diga lo que sí hace estaría vendiendo algo. Esto es lo que, revisada la referencia oficial de bloques el 7 de octubre de 2026, todavía pide un plugin o un servicio externo.

Formularios

La referencia de bloques del núcleo no tiene un bloque de formulario de contacto. Trae formularios para otras cosas, como el de búsqueda y el de comentarios, pero no uno para que un cliente te escriba.

Así que el formulario de contacto del despacho, el de citas o el de suscripción vienen de un plugin o de un servicio de correo que da su propio código. Es uno de los plugins que tiene sentido instalar.

Un formulario recoge datos personales: nombre, correo, teléfono. En México, la Ley Federal de Protección de Datos Personales en Posesión de los Particulares pide informar a quien te los da mediante un aviso de privacidad. Cómo resolverlo para una lista de suscriptores está en empezar una lista de correo. Información general, no asesoría legal.

Al elegir el plugin, dos preguntas. La primera, si guarda cada mensaje en tu base de datos y si puedes apagar esa opción cuando con el correo te basta. La segunda, si carga sus archivos en todas las páginas o solo en la que tiene el formulario.

Carruseles

No hay bloque de carrusel ni de deslizador en la referencia. Si necesitas fotos que pasen solas, hace falta un plugin.

Antes de instalarlo, una pregunta: ¿qué ve quien no espera a la segunda foto? Lo que ve es la primera. Una Cuadrícula con tres imágenes muestra las tres a la vez, se reacomoda en celular y no pide código extra.

Si el carrusel va en la portada, recuerda lo dicho en «La portada de arriba» sobre el LCP.

Tabla de contenido

Aquí hay un matiz. La referencia sí lista un bloque de tabla de contenido, pero lo marca como experimental. No es una pieza estable del núcleo.

Mientras eso cambia, hay dos caminos. Un plugin de tabla de contenido, o una lista hecha a mano con enlaces a los títulos. Para lo segundo, cada bloque Título (Heading) tiene, en sus ajustes avanzados, un campo de ancla HTML: le pones un nombre y lo enlazas desde la lista con un numeral delante.

Para un artículo largo, la lista hecha a mano tarda unos minutos y no carga nada extra.

Ventanas emergentes y animaciones

La referencia no trae ventanas emergentes. Tampoco animaciones de entrada. Entre las funciones de estilo que nombra la nota técnica de la 7.1 están la tipografía, el color, el fondo, el borde, las dimensiones, el espaciado y la disposición, y ninguna es una animación. Los estilos de botón de la 7.1 cambian el aspecto al pasar el cursor o al presionar: son estados, no animaciones.

Si la ventana emergente es para pedir el correo o para el aviso de cookies, viene de un plugin o del servicio que uses para eso. Y si las animaciones son para que la página se vea más viva, piénsalo dos veces: cada una agrega código que el celular del visitante tiene que descargar y ejecutar.

Una biblioteca de bloques, no tres

Existen plugins que agregan decenas de bloques de una vez: pestañas, contadores, tablas de precios, testimonios. Algunos de esos bloques ya los trae el núcleo, según la versión que tengas.

El problema no es una biblioteca. Son tres. Cada una trae su CSS, sus actualizaciones y su propio código que mantener al día. Y cuando dos hacen lo mismo, la página puede terminar con dos juegos de pestañas de estilos distintos en dos secciones contiguas. Para revisar qué hace cada plugin en tu sitio y cuáles sobran, está qué son los plugins y cuáles sí valen la pena.

Mi criterio, y va como criterio: si necesitara un bloque que el núcleo no trae, instalaría una sola biblioteca y la usaría para todo lo que le falte al editor. Antes de agregar una segunda, revisaría si la primera ya lo tiene. Y cada vez que salga una versión mayor de WordPress, revisaría qué bloques de la biblioteca ya trae el núcleo, para dejar de depender de ellos en las páginas nuevas.

El costo de equivocarse con un constructor

Un constructor no es un mal plugin. Puede ser, eso sí, un plugin difícil de quitar. La diferencia importa el día que quieres cambiar de herramienta, de tema o de diseño, y descubres dónde quedó guardado tu trabajo.

Dónde queda guardado tu diseño

Los bloques de WordPress se guardan como HTML con marcas. La documentación para desarrolladores lo explica así. «Blocks are stored in the database or within HTML templates using a unique HTML-based syntax, distinguished by HTML comments that serve as clear block delimiters». Traducción nuestra: los bloques se guardan en la base de datos o en plantillas HTML con una sintaxis propia basada en HTML. La distinguen unos comentarios HTML que marcan con claridad dónde empieza y dónde termina cada bloque.

En la práctica, una entrada hecha con bloques es HTML legible con unos comentarios en medio. Si un día abres esa entrada en otro editor, el texto, los títulos y las imágenes siguen ahí, en su orden.

Con un constructor, el diseño queda en el formato del constructor. Cómo es ese formato y qué pasa al desactivarlo depende de cada fabricante, y conviene buscarlo en su documentación antes de construir cuarenta páginas.

Lo que pasa al desactivar

Elementor tiene una página de preguntas sobre su versión gratuita y su versión Pro. Sobre borrar el plugin, tranquiliza. «The work you did with Elementor will not be deleted when the plugin is deleted». Traducción nuestra: el trabajo que hiciste con Elementor no se borra cuando se borra el plugin.

Sobre la Pro, advierte. «If you deactivate or delete Elementor Pro, your site will be unable to display the advanced designs you created with Elementor Pro». Traducción nuestra: si desactivas o borras Elementor Pro, tu sitio no podrá mostrar los diseños avanzados que creaste con Elementor Pro.

Las dos frases conviven. El trabajo no se borra, pero lo que dependía de la versión Pro deja de verse. Que algo no se borre no quiere decir que se siga viendo igual.

Divi, de Elegant Themes, lo explicó en su propio blog en septiembre de 2024. Sobre su versión 4 dice que «Divi used WordPress’s native shortcode system to organize its builder elements». Traducción nuestra: Divi usaba el sistema nativo de códigos cortos de WordPress para organizar los elementos de su constructor. Un código corto es una etiqueta entre corchetes que un plugin convierte en diseño. Y describe lo que pasaba sin el plugin: «If you have ever disabled Divi and visited a page you built with the Divi Builder». Traducción nuestra: si alguna vez desactivaste Divi y visitaste una página que hiciste con el Divi Builder. Según el mismo texto, lo que se veía eran esos códigos.

El mismo artículo se titula «Divi 5 Waves Goodbye To Shortcodes», es decir, Divi 5 se despide de los códigos cortos. Encaja con lo que el Almanac dijo de los constructores grandes: se están acercando a las convenciones del núcleo. No pude confirmar en el sitio del fabricante si Divi 5 ya salió como versión estable. Un texto suyo de enero de 2026 la programaba para el 26 de febrero.

Licencias que se renuevan, en pesos

La versión Pro de Elementor se paga por año. Su página de precios, consultada el 7 de octubre de 2026, tiene entre sus planes dos para un solo sitio. Essential cuesta 5 dólares al mes, con pago anual de 60, y Advanced Solo, 7 al mes, con pago anual de 84. Según la misma página, las ventanas emergentes empiezan en el Advanced Solo. El Essential incluye un constructor de formularios, con una nota. «Forms submissions not available in this plan». Traducción nuestra: los envíos de formularios no están disponibles en este plan.

Con el tipo de cambio FIX del Banco de México del 5 de octubre de 2026, 18.1343 pesos por dólar, quedan así.

Plan	Dólares al año	Pesos sin IVA	Pesos con 16 % de IVA	Al mes, con IVA	Cinco años, con IVA
Essential	60	1,088.06	1,262.15	105.18	6,310.74
Advanced Solo	84	1,523.28	1,767.01	147.25	8,835.03

La versión de la página que pude leer no dice si el precio de estos dos planes cambia al renovar. Tampoco dice si se cobra IVA en México, así que la tabla da las dos cifras. Información general, no asesoría fiscal.

El precio en pesos también se mueve con el tipo de cambio. Cada peso que sube el dólar encarece 69.60 pesos al año el Essential con IVA, y 97.44 el Advanced Solo. Con el dólar a 17 pesos, el Essential con IVA sale en 1,183.20; a 20 pesos, en 1,392.00.

¿Y si no renuevas? Elementor lo responde en su ayuda. Sin renovar, dice, «you will no longer be able to update Elementor Pro or add Pro features to your site». Traducción nuestra: ya no podrás actualizar Elementor Pro ni agregar funciones Pro a tu sitio. Y agrega que «you may only have limited access to existing Pro features». Traducción nuestra: puede que solo tengas acceso limitado a las funciones Pro que ya tienes.

La misma página agrega una advertencia. «Updating the free version of Elementor without updating the Pro version can lead to compatibility problems and cause issues with your site». Traducción nuestra: actualizar la versión gratuita de Elementor sin actualizar la versión Pro puede provocar problemas de compatibilidad y fallas en tu sitio.

Es decir, una licencia vencida no apaga el sitio, pero lo deja con dos piezas que avanzan a ritmos distintos. Si revisas tus suscripciones cada mes, esta va en la lista; la forma de hacerlo está en qué gastos deberías revisar cada mes.

Migrar no siempre se paga con la licencia

La cuenta rápida es simple: si dejo el constructor, me ahorro la licencia. Pero migrar cuesta horas. Con un ejemplo inventado, a 200 pesos la hora, esto es lo que cuesta pasar las páginas a bloques, medido en años de licencia Essential con IVA.

Páginas	1 hora cada una	2 horas cada una	3 horas cada una
5	0.79 años	1.58 años	2.38 años
15	2.38 años	4.75 años	7.13 años
40	6.34 años	12.68 años	19.02 años

Solo el sitio chico, con páginas sencillas, recupera la migración en menos de dos años de licencia. Y si usas la versión gratuita del constructor, la licencia que te ahorras es cero: la migración no se paga con licencias.

Eso no quiere decir que no convenga migrar. Quiere decir que la razón tiene que ser otra: una página más ligera, menos dependencia de un fabricante, un sitio que cualquiera puede editar. Y que la forma de hacerlo importa.

Mi criterio, y va como criterio: no migraría un sitio completo de golpe. Haría las páginas nuevas con bloques, pasaría a bloques cada página vieja cuando le tocara rediseño, y mediría antes y después. Y no desinstalaría el constructor hasta el día en que ninguna página lo use.

Cómo medir si una página quedó ligera

Decir que una página quedó ligera no sirve de nada sin un número. Con el navegador de escritorio basta para tener tres: cuántos elementos tiene la página, cuánto CSS carga y cuánto JavaScript. Las instrucciones son para Chrome; otros navegadores tienen herramientas parecidas.

Contar los elementos de la página

Abre la página en la copia del sitio, ya publicada. Haz clic derecho en cualquier parte, elige Inspeccionar y ve a la pestaña Consola. Escribe esto y presiona Enter.

document.body.querySelectorAll('*').length

El número que aparece es la cantidad de elementos que hay dentro del cuerpo de la página. Es una cuenta aproximada: Lighthouse hace la suya, y las dos pueden no coincidir con exactitud.

Como se vio al principio, Lighthouse advierte arriba de unos 800 nodos en el cuerpo de la página y marca error arriba de unos 1,400. No son una frontera mágica. Son la señal de que vale revisar qué cajas sobran.

La cuenta sirve sobre todo para comparar. La misma página armada de dos formas, o la misma página antes y después de un cambio. Quedarse en que la página se siente lenta, sin un número, es uno de los errores comunes al empezar un negocio en línea.

El peso del CSS y del JavaScript

En las mismas herramientas, ve a la pestaña Red y recarga la página. Arriba hay filtros por tipo de archivo. Elige CSS y mira la barra de abajo: dice cuántos archivos se pidieron y cuánto se transfirió. Luego haz lo mismo con el filtro JS.

Lo transferido es lo que viajó por la red, normalmente comprimido. Lo que el navegador tiene que leer después es más, y también aparece en esa barra como recursos.

Como referencia, el Almanac da medianas de WordPress en celular de 119 KB de CSS y 638 KB de JavaScript. No son una meta ni un límite. Una mediana dice que la mitad de las páginas WordPress medidas, con constructor y sin él, carga menos que eso, y la otra mitad, más. Úsalas como orden de magnitud: si tu página está muy por encima, ahí hay dónde buscar.

Hay una tercera herramienta útil: la pestaña de cobertura de Chrome. Se abre desde el menú de más herramientas, y al recargar la página dice qué parte de cada archivo de CSS y de JavaScript no se usó en esa página. Un archivo de estilos de un plugin que se carga entero para un solo botón aparecería ahí con casi todo sin usar.

Para el resto de lo que hace lenta una página, como las imágenes, la caché y el servidor, está cómo mejorar la velocidad de tu sitio web.

Antes y después de quitar un plugin

Con esos tres números se puede probar cualquier cambio. El método es corto.

1. En la copia del sitio, elige una página y apunta sus tres números: elementos, CSS transferido y JavaScript transferido.
2. Haz el cambio: desactiva el plugin, pasa la página a bloques o quita la sección que sobra.
3. Revisa que la página se vea y funcione como antes.
4. Mide otra vez, de la misma forma y con la misma página.

Una tabla sencilla basta para llevar el registro.

Página	Cambio	Elementos	CSS transferido	JavaScript transferido
Inicio, antes	Ninguno
Inicio, después	Sin la biblioteca de bloques

PageSpeed Insights sirve para lo mismo, con una precaución. Su prueba de laboratorio corre en el momento. Sus datos de usuarios reales cubren los 28 días anteriores, según la documentación de Google, así que un cambio de hoy tarda semanas en notarse ahí.

Mi criterio, y va como criterio: mediría cada cambio por separado, en la copia, antes de pasarlo al sitio publicado. Si quito dos plugins a la vez y la página mejora, no sé cuál de los dos pesaba. Y repetiría la medición un par de veces, porque una sola prueba puede salir con ruido de la conexión.

Cómo pasar una página de constructor a bloques

Si decides migrar, la regla es una: una página a la vez, en una copia del sitio. Lo que sigue es el orden que usaría, con los cuidados de cada paso.

1. Respaldo y copia. Antes de tocar nada, haz un respaldo completo y trabaja en una copia del sitio, no en el publicado. Si nunca has restaurado un respaldo, practícalo antes: un respaldo que no sabes restaurar no te protege. Sobre esto hay más en errores comunes que tiran un sitio.
2. Inventario. Haz una lista de las páginas armadas con el constructor y marca cuáles importan más: la de inicio, las de servicios, las que reciben visitas desde Google. Incluye el encabezado y el pie si también los hiciste con el constructor.
3. Mide antes. Apunta los tres números de la sección anterior para la página que vas a pasar: elementos, CSS y JavaScript.
4. Arma la nueva versión en un borrador aparte. No edites la página original. Crea una página nueva en borrador y arma ahí la versión con bloques, con la original abierta en otra pestaña para comparar.
5. Copia el contenido, no la estructura. Copia textos e imágenes, y rehaz la estructura con Grupo, Fila, Pila y Cuadrícula. Si la original tenía tres cajas anidadas para centrar un título, la nueva no las necesita.
6. Revisa en celular con la lista de «Cómo revisarlo en un celular de verdad».
7. Cambia la página original, conservando su dirección. Cada constructor tiene su forma de devolver una página al editor de WordPress; búscala en su documentación. Luego pega ahí los bloques del borrador. La dirección de la página no debe cambiar: los enlaces que ya apuntan a ella y su posición en Google dependen de esa dirección.
8. Mide después y revisa lo que no se ve. Formularios, botones, enlaces internos, el título y la descripción para buscadores. Deja pasar unos días antes de seguir con la siguiente.
9. Repite, y desactiva al final. Solo cuando ninguna página use el constructor, desactívalo en la copia y revisa el sitio completo. Si todo está bien, repite en el sitio publicado.

El paso 7 evita un error caro. Una página nueva con otra dirección, sin una redirección, pierde lo que la vieja había ganado en buscadores, aunque se vea mejor.

El paso 9 tiene una razón práctica. Como se vio arriba, si desactivas Elementor Pro, el sitio deja de mostrar los diseños avanzados hechos con la versión Pro. Si queda una sola página de esas, se verá incompleta.

Mi criterio, y va como criterio: empezaría por una página de poco tráfico, no por la de inicio. La primera migración sirve para aprender cuánto tarda una página con tu contenido y tu tema. Con ese tiempo real, la tabla de «Migrar no siempre se paga con la licencia» deja de ser un ejemplo inventado y se vuelve tu cuenta.

El orden de trabajo y el calendario

Todo lo anterior cabe en doce pasos. Están en el orden en que los haría con un sitio de negocio pequeño, empezando por lo que más rinde con menos riesgo.

1. Actualiza la copia del sitio a la 7.1.3, la versión vigente, y prueba ahí todo lo demás.
2. Revisa qué tema tienes. Si es de bloques, tienes la pantalla de Estilos. Si es clásico, decide si conviene cambiarlo ahora o en el próximo rediseño.
3. Mide la página de inicio: elementos, CSS y JavaScript. Es tu punto de comparación.
4. Ordena las cajas. Un Grupo por franja, Cuadrícula para tarjetas iguales, Fila para lo que va en línea, Columnas solo para anchos distintos.
5. Arregla la portada. Una sola imagen, comprimida, sin carga diferida, con el punto focal bien puesto.
6. Convierte en patrón lo que se repite, sincronizado si debe cambiar en todas partes a la vez.
7. Pon los colores y las fuentes en Estilos, o en el personalizador si tu tema es clásico, no bloque por bloque. Yo no pasaría de dos familias de fuentes.
8. Revisa el celular: lo que se reacomoda solo, los estilos por pantalla de la 7.1 y, al final, lo poco que haya que ocultar.
9. Deja los plugins para lo que el núcleo no trae, como los formularios, y una sola biblioteca de bloques si hace falta.
10. Bloquea las secciones principales si alguien más edita el sitio.
11. Mide otra vez y compara con el paso 3.
12. Pasa las páginas viejas a bloques una por una, cuando les toque rediseño, y no desactives el constructor hasta el final.

Las fechas que vienen

El calendario también decide cuándo tocar el sitio. Estas son las fechas de los próximos meses, contadas desde el 7 de octubre de 2026.

Fecha	Qué pasa	Días desde hoy
20 de octubre	Primera beta de WordPress 7.2	13
13 al 17 de noviembre	El Buen Fin 2026	37 a 41
17 de noviembre	Primera versión candidata de la 7.2, el último día del Buen Fin	41
8 de diciembre	WordPress 7.2, según el calendario del proyecto	62

Las fechas de la 7.2 son las de la página de esa versión en el sitio del equipo de desarrollo de WordPress. La misma página adelanta algo que importa para este tema. «A new default theme will also ship alongside 7.2». Traducción nuestra: un nuevo tema por defecto también saldrá junto con la 7.2. Las del Buen Fin son las que publicaron dos medios mexicanos el 31 de agosto; el sitio oficial no se pudo abrir.

Si se cumple el calendario, la 7.2 llega el 8 de diciembre, en plena temporada de compras de fin de año. Si tu sitio vende, esas semanas pueden ser las de más visitas del año, y un error ahí cuesta más.

Mi criterio, y va como criterio: si tu sitio vende, haría los cambios grandes de diseño antes del 13 de noviembre o después del 6 de enero, Día de Reyes. Y no actualizaría el sitio publicado a la 7.2 el día que salga. La probaría primero en la copia, y la pasaría al sitio publicado cuando termine la temporada y ya haya salido su primera versión de mantenimiento.

Ocho mitos sobre el editor de bloques

Ocho ideas que circulan sobre maquetar en WordPress, y el dato de esta guía que corrige cada una.

«El editor de bloques no sirve para diseñar»

La lista de lo que trae dice otra cosa. Disposición en cuadrícula desde la 6.3, y su propio bloque desde la 6.6. Patrones sincronizados con anulaciones desde la 6.6 y acordeón desde la 6.9. Visibilidad por dispositivo desde la 7.0. Y estilos para celular y tableta, pestañas y estados de botón desde la 7.1. El Web Almanac 2025 lo cuenta entre los constructores, con 18 % y creciendo, mientras los tres grandes perdían participación.

«Sin un constructor no hay diseño responsivo»

La Cuadrícula, las Columnas, Medios y texto y la Fila se reacomodan solas en pantalla chica. La 7.0 permite ocultar bloques por dispositivo. Y la 7.1 permite dar a los bloques estilos distintos para celular, hasta 480 píxeles, y para tableta, hasta 782, por defecto. Se hace desde el panel del bloque o desde los estilos globales.

«Ocultar un bloque en celular hace la página más ligera»

No en el HTML. La nota técnica de la 7.0 dice que los bloques ocultos por tamaño de pantalla se generan en el DOM y se esconden con CSS. Lo único que sí lo quita es ocultarlo en todas partes, con la opción que trajo la 6.9. Para una versión distinta en celular, los estilos por pantalla de la 7.1 son mejor camino que dos copias del mismo bloque.

«WordPress ya no soporta el editor clásico»

El plugin oficial que lo devuelve, Classic Editor, sigue en más de 8 millones de instalaciones activas. Según el directorio, al 7 de octubre llevaba cuatro meses desde su última actualización. Su página promete soporte hasta 2024, o el tiempo que sea necesario. Además, el editor de bloques tiene un bloque Clásico (Classic) para el contenido viejo.

«Desinstalar el constructor no rompe nada»

Depende de cuál y de cómo. La ayuda de Elementor dice que el trabajo hecho con Elementor no se borra al borrar el plugin. En la misma página advierte que, sin Elementor Pro, el sitio no podrá mostrar los diseños avanzados hechos con la versión Pro. El fabricante de Divi cuenta que su versión 4 guardaba el diseño en códigos cortos, que aparecían en la página al desactivar el constructor. Por eso el orden de «Cómo pasar una página de constructor a bloques» deja la desactivación para el final.

«Más bloques de terceros, más posibilidades sin costo»

Cada biblioteca de bloques trae su CSS, su JavaScript y sus actualizaciones. El costo no está en el precio: está en el peso de la página y en el código que hay que mantener al día. Y algunos bloques que hasta hace poco pedían una biblioteca, como las pestañas, el acordeón y los iconos, ya los trae el núcleo.

«Un tema de bloques no se personaliza sin código»

Es al revés. La pantalla de Estilos existe para eso: según la documentación de WordPress, define la estética del sitio a nivel global, sin editar bloque por bloque. El archivo theme.json del tema trae los valores de partida, y la propia documentación para desarrolladores dice que el usuario puede personalizarlos desde esa pantalla. Si el tema las trae, las variaciones de estilo cambian colores, fuentes y espacios con un clic.

«Para pestañas y acordeones hace falta un plugin»

Ya no. El bloque Detalles, para mostrar y esconder un texto, existe desde la 6.3, de agosto de 2023. El Acordeón llegó en la 6.9, en diciembre de 2025. Las Pestañas llegaron en la 7.1, en agosto de 2026. Si tu sitio todavía tiene un plugin solo para eso, revisa en una copia si los bloques del núcleo te alcanzan antes de su próxima renovación.

Preguntas frecuentes

¿Qué es el editor de bloques de WordPress?

Es el editor con el que WordPress arma entradas, páginas y, en los temas de bloques, el sitio completo. Cada párrafo, imagen, título o caja es un bloque que se mueve y se configura por separado. Llegó con la versión 5.0, el 6 de diciembre de 2018, y en 2026 incluye cuadrícula, acordeón, pestañas, iconos y estilos distintos para celular y tableta.

¿Gutenberg y el editor de bloques son lo mismo?

Casi. Gutenberg es el nombre del proyecto que creó el editor, y también el de un plugin que sirve de banco de pruebas: funciones nuevas, como la cuadrícula, aparecen ahí antes de pasar a WordPress. Si no tienes ese plugin instalado, lo que usas es el editor de bloques que trae WordPress de fábrica.

¿Qué es mejor, Elementor o el editor de bloques?

Depende de qué necesites y de cuánto te importe el peso de la página. El Web Almanac 2025 encontró a Elementor en 43 % de adopción en celular y al editor de bloques en 18 %, con Elementor a la baja y el editor al alza. La propia ayuda de Elementor mostró que su sistema viejo usaba 37 elementos div para un diseño que el nuevo resuelve con 23. Para un sitio nuevo, esta guía propone empezar con bloques y agregar un constructor solo si una necesidad concreta lo pide.

¿Se puede hacer un diseño responsivo sin plugins?

Sí. Desde la 7.1, los bloques pueden tener estilos distintos para celular, hasta 480 píxeles de ancho, y para tableta, de más de 480 a 782, si el tema no cambia esos anchos. Se activan desde el menú de vista del editor. Además, la Cuadrícula, las Columnas y Medios y texto se reacomodan solas en pantalla chica, y desde la 7.0 se pueden ocultar bloques por dispositivo.

¿Cómo oculto un bloque en el celular?

Desde la 7.0, en las herramientas del bloque o en la vista de lista, eliges en qué pantallas no se ve. Ten en cuenta que el bloque sigue en el HTML: según la nota técnica de WordPress, se genera en el DOM y se esconde con CSS. Si lo que quieres es otra versión del bloque en celular, prueba primero con los estilos por pantalla de la 7.1.

¿Cómo hago un acordeón en WordPress sin plugin?

Con el bloque Detalles, que existe desde la 6.3, o con el bloque Acordeón, que llegó en la 6.9. Detalles sirve para una o dos preguntas sueltas. Acordeón agrupa varias secciones con el mismo diseño y tiene atributos para el cierre automático, el nivel de título y el icono.

¿Cómo pongo pestañas sin plugin?

Con el bloque Pestañas, que llegó con WordPress 7.1, el 19 de agosto de 2026. Sirve para contenido paralelo, como horarios por sucursal o planes. No conviene para algo que cualquier visitante debería leer, porque quien no hace clic en la pestaña no lo ve.

¿Qué diferencia hay entre Grupo, Fila y Pila?

Los tres son la misma caja con otra disposición. El Grupo reúne bloques en un contenedor. La Fila los acomoda en horizontal y puede dejarlos bajar a otra línea. La Pila los acomoda en vertical. Se puede convertir uno en otro sin rehacer el contenido.

¿Cuándo uso Cuadrícula y cuándo Columnas?

Cuadrícula para tarjetas iguales: le das un ancho mínimo y el navegador acomoda las que quepan por renglón. Columnas para partes con anchos distintos a propósito, como un texto ancho junto a una foto angosta. Columnas mete una caja por cada columna; en la Cuadrícula, los bloques van directo.

¿Qué es un patrón sincronizado?

Un conjunto de bloques guardado con nombre que aparece en varios lugares como una sola pieza: si lo cambias una vez, cambia en todas partes. Desde la 6.6, con las anulaciones, cada copia puede tener su propio texto en los bloques que quien diseñó el patrón marque como editables.

¿Qué es theme.json y tengo que editarlo?

Es el archivo de configuración de un tema: define colores, fuentes, tamaños y otros ajustes globales. Funciona con temas de bloques y con temas clásicos. No hace falta abrirlo para cambiar el diseño: en un tema de bloques, según la documentación para desarrolladores de WordPress, el usuario puede personalizar esos valores desde la pantalla de Estilos.

¿Mi tema clásico puede usar estas funciones?

Los bloques dentro de entradas y páginas, sí. La pantalla de Estilos, no: según la documentación de WordPress, está incluida en los temas de bloques. Algunas cosas llegaron a los temas clásicos después: el libro de estilos en la 6.8, para los que tienen estilos del editor o theme.json, y la administración de fuentes en la 7.0.

¿Qué pasa si desactivo Elementor?

Según su ayuda, el trabajo hecho con Elementor no se borra al borrar el plugin, aunque eso no quiere decir que se siga viendo igual. Pero si desactivas o borras Elementor Pro, el sitio no puede mostrar los diseños avanzados que hiciste con la versión Pro. Pruébalo primero en una copia del sitio, con la lista de páginas que usan el constructor a la mano.

¿Cuánto cuesta Elementor Pro en pesos?

Su página de precios, consultada el 7 de octubre de 2026, da para un sitio el plan Essential, de 60 dólares al año, y el Advanced Solo, de 84. Con el FIX del 5 de octubre de 2026, 18.1343 pesos por dólar, el Essential sale en 1,088.06 pesos, o 1,262.15 con 16 % de IVA. La página no dice si se cobra IVA en México. Información general, no asesoría fiscal.

¿Qué pasa si no renuevo Elementor Pro?

Según la ayuda de Elementor, ya no podrás actualizar Elementor Pro ni agregar funciones Pro, y puede que tengas acceso limitado a las que ya tienes. La misma página advierte que actualizar la versión gratuita sin actualizar la Pro puede causar problemas de compatibilidad.

¿Conviene pasar mis páginas de Elementor a bloques?

Depende de la razón. Si es solo por ahorrarte la licencia, con un ejemplo inventado a 200 pesos la hora, solo un sitio chico, de cinco páginas sencillas, recupera la migración en menos de dos años de licencia Essential. Si la razón es una página más ligera o depender menos de un fabricante, conviene hacerlo página por página, cuando a cada una le toque rediseño.

¿Cómo sé si mi página tiene demasiados elementos?

Abre las herramientas para desarrolladores de Chrome, ve a la consola y escribe document.body.querySelectorAll('*').length. Te da una cuenta aproximada de los elementos del cuerpo de la página. Lighthouse advierte arriba de unos 800 nodos y marca error arriba de unos 1,400.

¿WordPress tiene un bloque de formulario de contacto?

No. La referencia de bloques del núcleo trae formularios para otras cosas, como la búsqueda y los comentarios, pero no uno de contacto. Para eso hace falta un plugin o el código de un servicio de correo. Un formulario recoge datos personales, y en México eso pide un aviso de privacidad. Información general, no asesoría legal.

¿Cuándo sale WordPress 7.2?

La página de esa versión en el sitio del equipo de desarrollo de WordPress trae su calendario. De ahí salen tres fechas: la primera beta, el 20 de octubre de 2026; la primera versión candidata, el 17 de noviembre; y el lanzamiento, el 8 de diciembre. También anuncia que saldrá un nuevo tema por defecto junto con la 7.2.

¿El editor clásico va a desaparecer?

No hay fecha. El plugin oficial Classic Editor tiene más de 8 millones de instalaciones activas y su página promete soporte hasta 2024, o el tiempo que sea necesario. Según el directorio, al 7 de octubre llevaba cuatro meses desde su última actualización. Si tu sitio lo usa, nada te obliga a dejarlo hoy, pero todo lo nuevo de este artículo está del lado de los bloques.

Lo que este artículo no pudo verificar

Esto quedó fuera o a medias. Conviene saberlo antes de usar cualquier cifra de arriba.

• La base de los porcentajes de constructores del Web Almanac. El capítulo da 43 % para Elementor y 18 % para el editor de bloques, pero no dice si se calculan sobre todos los sitios WordPress o solo sobre los que usan algún constructor.
• De dónde sale el 60 %. El capítulo lo presenta como una estimación y no da fuente ni método.
• Datos de Core Web Vitals por constructor. El Almanac da una tasa de aprobación para todo WordPress, 45 %, pero no la separa por constructor ni compara páginas hechas con bloques contra páginas hechas con constructor.
• Una medición propia. No armé la misma página con un constructor y con bloques para medirla. Las cifras de estructura son de la prueba que publicó Elementor, con un diseño chico y solo del HTML.
• Cuántos temas de bloques hay en el directorio de WordPress. La búsqueda del directorio no se pudo consultar de forma automatizada.
• Los nombres de bloques y menús en la interfaz en español. La documentación oficial está en inglés. Los nombres en español de esta guía pueden no coincidir con los de tu versión; por eso va entre paréntesis el nombre en inglés.
• Qué hace exactamente cada atributo del Acordeón. La referencia los lista, pero no encontré una página de documentación del bloque que los explique.
• Qué regla de CSS usa WordPress para ocultar un bloque por dispositivo, y por lo tanto si las imágenes de un bloque oculto se descargan. Por eso la guía pide revisarlo en la pestaña de red.
• Si Elementor cobra IVA en México y si el precio de Essential y de Advanced Solo cambia al renovar. La versión de su página de precios que se pudo leer no lo dice.
• El precio de Divi y si Divi 5 ya salió como versión estable. El último dato leído en el sitio del fabricante es que la programaba para el 26 de febrero de 2026.
• Las fechas de El Buen Fin 2026 en el sitio oficial. No se pudo abrir; se usaron las que publicó la prensa.

Fuentes y metodología

Las traducciones del inglés de este artículo son nuestras, y cada cita está enlazada a su original en esta sección. Las fuentes se consultaron el 7 de octubre de 2026, salvo donde se indica otra fecha.

Fuentes primarias

Datos de uso y de peso

• HTTP Archive, Web Almanac 2025, capítulo de gestores de contenido, de Vahe Arabian, publicado el 15 de enero de 2026. Apartado de constructores: la estimación del 60 %, la figura 12.6, los cambios de 2024 a 2025, la advertencia sobre el DOM, el CSS y el JavaScript, y el giro de los constructores hacia los bloques. También las medianas de peso en celular y la tasa de aprobación de WordPress, 45 %.
• HTTP Archive, metodología del Web Almanac 2025: los datos salen del rastreo de julio de 2025.
• INEGI, Encuesta Nacional sobre Disponibilidad y Uso de Tecnologías de la Información en los Hogares 2025, resultados, del 16 de junio de 2026: conexión por celular inteligente.

Medición

• Lighthouse, «Avoid an excessive DOM size»: umbrales de unos 800 y 1,400 nodos.
• Lighthouse, documentación de la limitación de red: 1.6 megabits por segundo de bajada.
• Google, «About PageSpeed Insights»: datos de usuarios reales de los 28 días anteriores.
• web.dev, «Browser-level image lazy loading for the web», actualizado el 13 de agosto de 2024: imágenes con carga diferida escondidas con display: none.
• Make WordPress Core, mejoras de imagen de la 6.3, de Felix Arntz, del 13 de julio de 2023: prioridad alta para la imagen probable del LCP.

Versiones de WordPress

• Lista de versiones de WordPress, con las fechas de la 5.9 a la 7.1.3, y páginas de las versiones 5.0, 5.9, 6.2 y 6.5.
• Anuncios de las versiones 6.3 (Lionel), 6.6 (Dorsey) y 6.8 (Cecil). El de la 6.6 se leyó en la copia del sitio de WordPress en inglés británico.
• Anuncios de la 7.0 (Armstrong), del 20 de mayo de 2026, y de la 7.1 (Mary Lou), del 19 de agosto de 2026.
• Guía de campo de WordPress 6.9, del 25 de noviembre de 2025: bloques nuevos, Acordeón y ocultar bloques.
• Nota técnica de la 6.6 sobre la disposición en cuadrícula, de Isabel Brison, del 18 de junio de 2024: la variación Cuadrícula del bloque Grupo.
• Notas técnicas de la 7.0, las dos del 15 de marzo de 2026: visibilidad de bloques y edición de patrones.
• Nota técnica de la 7.1, estilos responsivos y anchos configurables, del 5 de agosto de 2026.
• Página de WordPress 7.2 en el sitio del equipo de desarrollo: calendario y tema por defecto nuevo.
• El aviso de privacidad de un formulario se trata, con sus fuentes legales, en las guías de esta serie sobre listas de correo y sobre plugins.

Documentación de bloques, estilos y temas

• Documentación de WordPress: estilos responsivos, actualizada el 19 de agosto de 2026; bloque Fila, actualizada el 16 de septiembre de 2026; y Estilos, actualizada el 19 de agosto de 2026.
• Manual del editor de bloques: referencia de bloques del núcleo, representación de los bloques en el marcado y bloqueo de bloques.
• Manual de temas: introducción a theme.json.
• Blog para desarrolladores de WordPress, dos artículos de Justin Tadlock: «Adding and using grid support in WordPress themes», del 6 de febrero de 2024. Y «Styling accordions in WordPress 6.9», del 24 de octubre de 2025.
• Learn WordPress, «Designing with row and stack blocks», del 4 de julio de 2023.
• Directorio de WordPress: Classic Editor, versión 1.7.0, y Twenty Twenty-Five, versión 1.5.

Constructores

• Elementor, «FAQ: Running Both Elementor Free and Elementor Pro Plugins», publicada el 9 de agosto de 2022 y modificada el 11 de febrero de 2024.
• Elementor, «Analyze Flexbox container performance», publicada en septiembre de 2022 y modificada en mayo de 2026.
• Elementor, «What will happen to my website(s) if I don’t renew Elementor Pro?», publicada el 19 de abril de 2020 y modificada el 3 de junio de 2026.
• Elementor, versión en texto de su página de precios: planes Essential y Advanced Solo.
• Elegant Themes, «Divi 5 Waves Goodbye To Shortcodes», de Donjete Vuniqi, del 30 de septiembre de 2024, y «Divi 5 Official Release Date», de Nick Roach, del 14 de enero de 2026.

Pesos y calendario

• Banco de México, tipos de cambio: FIX del 5 de octubre de 2026, 18.1343 pesos por dólar.
• El Buen Fin 2026, del 13 al 17 de noviembre, según Uno TV y Chilango, los dos del 31 de agosto de 2026.

Cálculos y supuestos

Todas las cuentas son propias y están en un guion que las recalcula.

• Elementor contra el editor de bloques = 43 ÷ 18 = 2.39 veces.
• La suma de 84 es de las cuatro cifras de 2025. Que encaje con un reparto entre sitios con constructor es una lectura nuestra, no del Almanac.
• Tiempo de descarga = kilobytes × 8 ÷ 1,600 kilobits por segundo, con un megabyte de 1,000 kilobytes. Da 5 segundos por megabyte. No incluye la latencia ni el procesador.
• Prueba de Elementor: (37 − 23) ÷ 37 = 37.8 % menos elementos div; (105 − 76) ÷ 105 = 27.6 % menos líneas.
• Días: contados hasta el 7 de octubre de 2026, o desde esa fecha para lo que viene. Del 31 de diciembre de 2024 al 7 de octubre de 2026 van 645 días.
• Precios en pesos = dólares × 18.1343. Con IVA, × 1.16. Al mes, ÷ 12. Cinco años, × 5. Lo que sube al año por cada peso de tipo de cambio = dólares × 1.16.
• Migración, ejemplo inventado: páginas × horas por página × 200 pesos, dividido entre el Essential con IVA, 1,262.15 pesos al año.
• Redondeo: hacia arriba desde el medio. Pesos, segundos, años y razones, a dos decimales; porcentajes, a uno.

Comprobaciones cruzadas

• Cada cita se leyó dos veces, en fragmentos cortos. Cuando una lectura resumía en lugar de citar, se volvió a leer hasta tener el texto exacto. Lo que solo se leyó una vez va en paráfrasis, sin comillas.
• El peso total de la página. Las lecturas del Almanac dieron la misma cifra, 2,894 KB, con dos redacciones distintas de la frase; por eso va parafraseada y no citada.
• La 7.0 contra la 7.1. Una de las comparativas revisadas atribuye a la 7.0 los controles de estilo por pantalla. Las notas técnicas de las dos versiones separan las funciones: visibilidad por dispositivo en la 7.0, estilos por pantalla en la 7.1.
• Las fechas de versión. Se cruzaron la lista de versiones de WordPress, las páginas de cada versión y los anuncios.
• La cuadrícula. El blog para desarrolladores fecha la disposición en cuadrícula en la 6.3; la nota técnica de la 6.6 dice que esa versión agregó la variación Cuadrícula del bloque Grupo. El artículo da las dos fechas.
• Lo que no trae el núcleo. La referencia de bloques se leyó completa tres veces: no trae bloque de formulario de contacto, de carrusel ni de ventana emergente, y marca como experimental el de tabla de contenido.
• Coherencia con la serie. En la guía de plugins de esta serie no se pudieron leer los precios de Elementor en su página normal, que los carga con código. Aquí se leyeron en la versión en texto de la misma página, dos veces.

Limitaciones

• Los datos del Almanac son de julio de 2025, globales y detectados con una herramienta automática. No dicen nada de México en particular.
• La prueba de estructura es del propio Elementor, con un diseño de cinco elementos y solo del HTML.
• Las funciones de la 7.1 tienen 49 días. La 7.2 puede cambiar nombres, pantallas o comportamientos.
• Esta guía no midió un sitio propio armado de las dos formas.
• Los nombres de los bloques y de los menús en español pueden variar según la traducción de tu WordPress.
• Los documentos de WordPress, Elementor, Elegant Themes, Google y el HTTP Archive se leyeron en inglés; las traducciones son nuestras.

Declaración de intereses

Este artículo no contiene enlaces de afiliado, y no hay relación comercial con Automattic, Elementor, Elegant Themes, los autores de los plugins o temas mencionados, Google ni el HTTP Archive. Si en el futuro se agregan enlaces de afiliado, esta declaración se cambia el mismo día.