--- url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/maquetacion/diseno-anidado' title: 'Añade un diseño anidado | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:56:35+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Puedes poner una fila dentro de una columna para dividir esa columna de nuevo, como dos iconos lado a lado encima de un encabezado. Úsalo cuando una columna necesite una cuadrícula más fina que la fila que la rodea. El ejemplo añade una fila de dos iconos a la columna central de una fila de tres columnas. Para tu primera fila, empieza con Filas y columnas. tags: - Layout image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Añade un diseño anidado' description: |- Puedes poner una fila dentro de una columna para dividir esa columna de nuevo, como dos iconos lado a lado encima de un encabezado. Úsalo cuando una columna necesite una cuadrícula más fina que la fila que la rodea. El ejemplo añade una fila de dos iconos a la columna central de una fila de tres columnas. Para tu primera fila, empieza con Filas y columnas. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T00:56:35+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/maquetacion/diseno-anidado' articleSection: Maquetación - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/maquetacion/diseno-anidado' description: |- Puedes poner una fila dentro de una columna para dividir esa columna de nuevo, como dos iconos lado a lado encima de un encabezado. Úsalo cuando una columna necesite una cuadrícula más fina que la fila que la rodea. El ejemplo añade una fila de dos iconos a la columna central de una fila de tres columnas. Para tu primera fila, empieza con Filas y columnas. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Inicio item: 'https://dxpr.com/es' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: es --- [Centro de ayuda](/es/hc)/[Documentación](/es/hc/documentacion) /[Aprende DXPR Builder](/es/hc/documentation/learn-dxpr-builder) /[Crear páginas](/es/hc/documentation/learn-dxpr-builder/build) /[Añadir contenido](/es/hc/documentation/learn-dxpr-builder/elements) /[Maquetación](/es/hc/documentation/learn-dxpr-builder/layout/overview) # Añade un diseño anidado. Aprende DXPR BuilderCrear páginasAñadir contenidoMaquetación ## En esta guía Guías relacionadas - [Añade un contenedor de capas posicionadas](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/capas-posicionadas) - [Añade una fila](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/filas-columnas) - [Añade un panel de pestañas](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/panel-pestanas) Puedes poner una fila dentro de una columna para dividir esa columna de nuevo, como dos iconos lado a lado encima de un encabezado. Úsalo cuando una columna necesite una cuadrícula más fina que la fila que la rodea. El ejemplo añade una fila de dos iconos a la columna central de una fila de tres columnas. Para tu primera fila, empieza con [Filas y columnas](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/filas-columnas). ## Añade un diseño anidado 1. Añade una sección con una fila y columnas. 2. Pasa el cursor sobre una columna y haz clic en **+** en su barra de Columna. 3. En el selector de elementos, elige **Fila** en la pestaña **Diseño**. 4. La fila anidada aparece dentro de la columna con columnas propias. 5. Añade elementos a las columnas anidadas como siempre, por ejemplo un **Icono** en cada una. 6. Haz clic en **Guardar** en la barra de herramientas para guardar la página. Los elementos nuevos caen arriba de su columna, así que la fila anidada queda encima del texto de la columna. ## Lo que ves El lápiz y la estrella quedan lado a lado arriba de la columna central, encima del encabezado Diseño. Las columnas exteriores no cambian. En el editor, la fila anidada tiene sus propias barras de Fila y Columna, dentro de las de la fila exterior. ```text Section Row (1/3 + 1/3 + 1/3) Column Text: Discovery Column Row (nested, 1/2 + 1/2) Column Icon: pencil Column Icon: star Text: Design Column Text: Delivery ``` ## Configura tu diseño anidado Una fila anidada tiene el mismo icono de cuadrícula y los mismos ajustes que cualquier fila; lee [Filas y columnas](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/filas-columnas). Sus anchos son partes de la columna madre, no de la página. Una columna de medio ancho que guarda una fila anidada de dos mitades te da dos áreas de un cuarto de ancho. En pantallas de menos de 768 píxeles, las columnas anidadas se apilan igual que las exteriores. Dale a la fila anidada un diseño de teléfono con **Añadir tamaño de pantalla** si los iconos deben seguir lado a lado. ### Profundidad máxima de anidamiento Las filas se anidan tres niveles: una fila, una fila en una de sus columnas y una fila más dentro de esa. Un cuarto nivel se rechaza. El mismo límite vale para cada tipo de contenedor por su cuenta, como Pestañas dentro de Pestañas. Un tipo nunca cuenta para el límite de otro tipo. Dos niveles cubren la mayoría de diseños. Cada nivel extra añade barras de control que hay que apuntar y estrecha el espacio para el contenido. ### Patrones comunes de anidamiento | Patrón | Cómo se crea | |---|---| | Cuadrícula de funciones | Una fila de tres columnas, cada una con una fila anidada: un icono junto a su texto | | Bloques laterales | Una fila de 2/3 + 1/3 cuya columna estrecha guarda filas anidadas, una por bloque | | Miembros del equipo | Una fila de dos columnas, cada una con una fila anidada de 1/3 + 2/3: un retrato junto a la bio | ## Si no lo ves - **Un aviso dice que solo puedes anidar filas 3 niveles.** La columna ya está dentro de dos filas anidadas, así que «Element cannot be added». Añade la fila a una columna de un nivel superior o usa un ajuste con más columnas en la fila exterior. - **La fila anidada queda encima del texto en lugar de debajo.** Los elementos nuevos caen arriba de su columna. Abre **Más** en la barra de la fila anidada y elige **Mover abajo**. - **Los iconos se apilan en un teléfono.** Las columnas anidadas se apilan por debajo de 768 píxeles, como todas las columnas. Haz clic en el icono de cuadrícula de la fila anidada, luego en **Añadir tamaño de pantalla**, y elige **1/2 + 1/2** para **Extrapequeño (< 576px)**. ## ¿Qué sigue? - [Capas posicionadas](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/capas-posicionadas): superpone elementos de formas que la cuadrícula no puede. - [Filas y columnas](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/filas-columnas): ajustes de columna y un diseño por tamaño de pantalla. - [Pestañas](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/panel-pestanas): apila paneles de contenido en un sitio en lugar de lado a lado.