Volver al soporte Contenido y multimedia Bloques Bloques Fila y Pila

Bloques Fila y Pila

El bloque Fila y el bloque Pila son tipos de bloques de diseño que permiten insertar varios bloques en una fila (o columna, con el bloque Pila) y espaciarlos de manera uniforme. Puedes utilizarlos para crear separadores o añadir varios elementos en la misma línea como si estuvieran incluidos en columnas.

Añadir el bloque Fila o Pila

Haz clic en el icono + de inserción de bloques para añadir el bloque Fila, y busca el concepto Fila para este bloque; o bien, el concepto Pila en el caso del bloque Pila. Haz clic para añadir el bloque a la entrada o a la página.

Acción de hacer clic en el icono de inserción de bloques y buscar el concepto Fila y, a continuación, hacer clic en el bloque Fila para insertarlo en el editor.

💡

También puedes escribir /fila con el teclado en una nueva línea y pulsar Intro para añadir un nuevo bloque Fila o /pila para añadir un nuevo bloque Pila.

Encontrarás instrucciones detalladas sobre cómo añadir bloques en esta página.

Barra de herramientas del bloque

Cuando haces clic en el bloque, aparece una barra de herramientas de opciones:

La barra de herramientas del bloque Fila que aparece encima de este bloque, con iconos para elegir el tipo de bloque o moverlo, y otros que se describen a continuación.
La barra de herramientas del bloque Fila
La barra de herramientas del bloque Pila que aparece encima de este bloque, con iconos para elegir el tipo de bloque o moverlo, y otros que se describen a continuación.
La barra de herramientas del bloque Pila

En la barra de herramientas del bloque Fila, puedes encontrar las siguientes opciones:

En la barra de herramientas del bloque Pila, puedes encontrar las siguientes opciones:

📌

Si las opciones de cambiar el ancho del bloque a ancho o a ancho completo son compatibles con tu tema y no las puedes ver, es posible que el bloque se haya añadido a un bloque Grupo. Obtener más información sobre el bloque Grupo.

Ajustes del bloque

Cuando elijas un bloque, verás ajustes del bloque adicionales en la barra lateral de la derecha. Si no ves la barra lateral, es posible que tengas que hacer clic en el icono Ajustes de la esquina superior derecha para que aparezcan los ajustes. Este icono parece un cuadrado con dos columnas desiguales:

El icono Ajustes situado en el Editor con la información sobre la herramienta «Ajustes» debajo.
Haz clic en el icono Ajustes para abrir los ajustes del bloque
Disposición

El bloque Fila puede convertirse en un bloque Grupo o en un bloque Pila. El bloque Pila puede convertirse en un bloque Grupo o en un bloque Fila.

La barra lateral de ajustes del bloque que muestra la opción de cambiar de fila a apilado y a grupo.
Diseño

En la sección Diseño, puedes establecer la justificación de los bloques de filas o apilados. Para la alineación de las filas, puedes elegir entre izquierda, centrada, derecha o justificada. La opción Orientación permite cambiar del formato de filas a apilados.

El bloque Pila no incluye la opción de justificar el contenido. Esta opción aparece en el bloque Fila para alinear las filas de manera uniforme.

Además, puedes activar o desactivar la posibilidad de organizar el contenido en varias líneas.

La sección Diseño de la barra lateral de Ajustes del bloque, con las opciones para determinar la justificación, la orientación y la organización.
Posición

En la sección Posición, puedes elegir entre las opciones Por defecto y Fijar.

  • Por defecto: el bloque desaparecerá al desplazarte fuera de él y moverte a otras secciones de la página.
  • Fijar: el bloque flotará y permanecerá visible en la página, incluso cuando te desplaces fuera de su posición original.

Avanzado

La pestaña Avanzado te permite añadir una clase CSS a tu bloque, para que puedas escribir código CSS personalizado y darle el estilo que quieras.

La pestaña Avanzado te permite añadir una clase CSS al bloque

Estilos de bloque

En la barra lateral de ajustes del bloque, haz clic en el icono Estilos para acceder a los ajustes de diseño del bloque. El icono Estilos tiene la forma de un círculo con la mitad del círculo rellenada:

Una flecha señala el icono Estilos en el que puedes hacer clic para abrir la sección Estilos de bloque.
Color

La sección Color permite modificar el color del texto, el fondo y los enlaces del bloque Fila o del bloque Pila.

Para añadir la opción de modificar los enlaces, haz clic en los tres puntos de la sección Color.

Los ajustes del color para el texto y el fondo en la barra lateral de Ajustes del bloque.

Para el texto y los enlaces: al hacer clic en la zona que contiene cuadros, puedes elegir el color personalizado que quieras o uno de los colores preseleccionados en las secciones Tema o Por defecto, situadas debajo.

La opción Color de la barra lateral de Ajustes del bloque, con el texto destacado y el selector de color a la derecha.

Para el fondo, además de disponer de ajustes de color similares a los del texto (arriba), puedes decidir entre un color sólido o un degradado, una combinación de dos o más colores, que se muestran siguiendo un patrón determinado (de más claro a más oscuro, o un color mezclándose con el otro).

Los ajustes del degradado para configurar un color de fondo en la barra lateral de Ajustes del bloque.
Tipografía

Ajusta la apariencia del texto del bloque con los siguientes ajustes.

Si no ves los ajustes, haz clic en los tres puntos a la derecha de Tipografía (como se muestra a la derecha). A continuación, puedes elegir la opción a la que quieres acceder:

  • Tamaño de la fuente
  • Familia de fuente
  • Apariencia
  • Alto de la línea
  • Decoración
  • Mayúsculas/minúsculas
  • Espacio entre letras
Menú desplegable en Tipografía
Tipografía en la barra lateral de ajustes del bloque con las opciones adicionales desplegadas.

Tamaño de la fuente te permite ajustar el tamaño del texto. Puedes elegir entre las opciones: pequeño, medio y grande.

También puedes ajustar un valor concreto haciendo clic en el icono del carrusel, situado justo encima de la selección por defecto y marcado con un 1 en la siguiente captura de pantalla. Puedes cambiar las unidades haciendo clic en el campo marcado con un 2 en la siguiente captura de pantalla. Las opciones son píxeles, em o rem.

Ajustes del tamaño de la fuente en Tipografía

Familia de fuente te da la opción de cambiar el estilo de fuente utilizado. Elige entre una lista de fuentes en el menú desplegable.

Apariencia te permite cambiar el estilo de la fuente del texto de redonda a cursiva, así como elegir entre los diferentes grados, desde fina hasta negrita extra.

Altura de la línea establece el espacio que habrá por encima y por debajo del texto. Si indicas que sea cero, asegúrate de comprobar la apariencia de tu sitio en un dispositivo móvil.

Decoración incluye opciones para subrayar y tachar el texto.

Mayúsculas/minúsculas te permite mostrar todo el texto en mayúsculas, con solo la primera letra en mayúscula o con todas las letras en minúsculas.

Espacio entre letrasdefine el espacio entre cada carácter del texto. Puedes cambiar las unidades por defecto (píxeles) a porcentajes, em, rem, vw y vh. Obtén más información sobre las unidades relativas aquí.

Dimensiones

Las dimensiones permiten definir el espaciado interno, es decir, el espacio alrededor de los elementos del bloque Fila. Esta opción es especialmente relevante cuando se usa un color de fondo.

Se puede añadir un valor para los cuatro lados del espaciado interno en el campo que se muestra en Espaciado interior.

Ajustes de dimensiones del bloque Fila de WordPress.com

El espaciado interno también puede tener valores distintos para cada uno de los lados. Haz clic en el icono de enlace para que se muestren las opciones y puedas añadir espaciado interno a cada uno de los lado por separado. Las cifras que se muestran aquí van en el sentido de las agujas del reloj, de arriba a la derecha, de abajo a la izquierda. Para acceder a esta vista, debes hacer clic en el icono de enlace azul que se muestra en la imagen anterior.

En el bloque Pila, no se incluye la opción de establecer las dimensiones, ya que los bloques que contiene están apilados y las dimensiones se pueden determinar a través de un bloque individual o mediante el bloque Espaciador.

Opciones de dimensiones del bloque Fila de WordPress.com
Borde y radio

Usa los ajustes del borde para añadir una línea de borde alrededor del contenido. Puedes elegir el color, el tamaño y la unidad del tamaño (px, %, em, rem, vw y vh).

Por defecto, estos ajustes controlan el borde en los cuatro lados. Para realizar ajustes concretos en los lados superior, derecho, inferior e izquierdo, haz clic en el icono del enlace.

La opción Radio permite dar a los bordes de la imagen un aspecto más redondeado. Si ajustas el radio a 0, la imagen tendrá las esquinas puntiagudas.

📌

Es posible que los ajustes de Borde y Radio no aparezcan en tu sitio si usas un tema clásico. Te animamos a descubrir algunos de nuestros nuevos temas del Editor del sitio para personalizar los bordes de las imágenes y ¡muchas opciones más!

Añadir varios bloques a un bloque Fila o Pila

Primero, debes elegir el bloque o bloques que quieres añadir a un bloque Fila. Puedes elegir varios bloques al hacer clic en ellos y arrastrarlos, o bien, al mantener pulsada la tecla «shift» y hacer clic en cada uno de ellos (deben estar uno al lado del otro).

Se mostrará la barra de herramientas del bloque. Elige el icono Fila o Pila de la barra de herramientas. En la imagen siguiente se señala el icono del bloque Fila, y el que aparece directamente a la derecha es el icono del bloque Pila.

Las opciones que aparecen cuando ya se han elegido varios bloques para establecerlos como un bloque Fila.

Desagrupar bloques existentes

Es posible que debas desagrupar los bloques existentes si quieres modificar la alineación de los bloques individuales.

  1. Haz clic en Vista de lista, que aparece en la parte superior del Editor, y elige el bloque Fila o el bloque Pila.
  2. Haz clic en el icono Más opciones de la barra de herramientas del bloque.
  3. Elige la opción Desagrupar.
La opción de desagrupar un bloque Fila.

Copied to clipboard!