Desmitificando los términos de diseño de WordPress (Referencia rápida)

Cuando empezamos a diseñar sitios web con WordPress, nos bombardeaban con términos nuevos como "encabezados", "pies de página" y "widgets". Se sentía como aprender un idioma completamente nuevo solo para construir un sitio web sencillo.

Ahora, después de ayudar a millones de usuarios de WordPress durante los últimos 16 años, no solo hemos dominado estos términos, sino que también hemos descubierto las formas más fáciles de explicárselos a los principiantes.

Si todavía estás confundido sobre lo que significan estos términos de diseño (y cómo funcionan juntos), no te preocupes. No estás solo y estás en el lugar correcto.

En esta guía sencilla, desglosaremos todos los términos esenciales de diseño de WordPress en explicaciones simples y fáciles de entender que podrás consultar en cualquier momento.

Una nota rápida sobre el diseño en WordPress

Al aprender sobre los diseños de WordPress, encontrarás diferentes términos dependiendo de cómo estés construyendo tu sitio. Esto varía según si estás utilizando temas que admiten el editor de sitio completo, el personalizador de un tema clásico, o plugins de constructor de páginas de WordPress.

Por ejemplo, con el Editor de Sitio Completo, encontrarás opciones de diseño en Apariencia » Editor:

Mientras que en los temas clásicos, usarás el Personalizador de Tema en Apariencia » Personalizar.

Así es como se ve:

Para mayor flexibilidad de diseño, muchos usuarios optan por constructores de páginas como SeedProd, que ofrecen interfaces de arrastrar y soltar.

También suelen venir con funciones que las herramientas predeterminadas de WordPress no tienen, como bloques adicionales y avanzados para agregar a tu contenido.

Si bien estas herramientas pueden usar términos e interfaces diferentes, los conceptos fundamentales de diseño siguen siendo los mismos. Comprender estos términos clave te ayudará a crear mejores diseños de WordPress e incluso un diseño personalizado sin importar las herramientas que estés utilizando.

Exploremos estos términos esenciales de diseño de WordPress y veamos cómo funcionan en diferentes plataformas. Esto es lo que cubriremos:

• Entendiendo un diseño típico en WordPress
• Header Area
• Imagen/Color de fondo
• Área de contenido
• Área de barra lateral (opcional)
• Área del pie de página
• Otros componentes de un diseño de WordPress
• Menú de navegación
• Widgets (Temas clásicos)
• Bloques
• Imágenes destacadas
• Imágenes de portada
• Patrones de bloques
• Botones
• CSS personalizado
• Términos de diseño en constructores de páginas de WordPress
• Uso de plantillas en constructores de páginas de WordPress
• Módulos y bloques en constructores de páginas de WordPress
• Uso de secciones en constructores de páginas de WordPress
• Preguntas Frecuentes
• Recursos Adicionales

Entendiendo un diseño típico en WordPress

Piensa en el diseño de un sitio web como una carta amistosa. Una carta tiene un saludo en la parte superior (el encabezado), el mensaje principal en el medio (el área de contenido) y una firma en la parte inferior (el pie de página).

La mayoría de los sitios web siguen esta misma estructura simple. Se ve algo así:

Dependiendo de la página que vea un usuario, el diseño puede variar.

Por ejemplo, una página de blog de WordPress puede incluir una barra lateral junto al área de contenido.

Este diseño básico se llena con otros elementos, que discutiremos más adelante en este artículo.

Primero, hablemos de cada una de estas secciones principales con más detalle.

Área del encabezado

El encabezado en un diseño de WordPress es la sección superior de cualquier página. Por lo general, contiene el logotipo de tu sitio web, título, menús de navegación, un formulario de búsqueda y otros elementos importantes que deseas que los usuarios vean primero.

Así es como se ve la sección del encabezado en WPBeginner.

Encabezado personalizado en temas de WordPress

Muchos temas populares de WordPress incluyen funciones adicionales para personalizar el área del encabezado de tu diseño de WordPress, que a veces se llama encabezado personalizado

Personalización del encabezado en un tema de bloques

Si usas un tema de bloques con soporte para el editor de sitios, entonces puedes cambiar el encabezado haciendo clic en el área del encabezado en el editor de sitios.

Desde aquí, puedes personalizar el encabezado a tu gusto. Puedes cambiar colores, ajustar el menú de navegación y agregar bloques como búsqueda, logo del sitio, botones y más.

Personalizando el Encabezado en un Tema Clásico

Para los temas clásicos, generalmente puedes encontrar estas configuraciones en el personalizador del tema. Busca una sección llamada 'Encabezado', 'Opciones del Encabezado' o 'Identidad del Sitio'.

Dependiendo de tu tema de WordPress, es posible que puedas agregar una imagen de ancho completo al encabezado con un eslogan o un botón de llamada a la acción.

Algunos temas de WordPress pueden permitirte cambiar la posición del logo, los menús de navegación y las imágenes del encabezado.

Imagen/Color de fondo

Algunos temas de WordPress también te permiten cambiar fácilmente el color de fondo o usar una imagen de fondo para tu sitio web.

Cambiando el Fondo en un Tema de Bloques

Si usas un tema con soporte para editor de sitio, entonces puedes cambiar el color de fondo yendo a 'Estilos' en el editor de sitio completo.

Simplemente elige la opción 'Colores' del panel de Estilos.

Después de eso, puedes hacer clic en 'Fondo' para elegir un color de fondo para tu sitio web.

Cambiando el Fondo en un Tema Clásico

Para los temas clásicos, las configuraciones dependerán de las características de tu tema.

Muchos temas clásicos vienen con soporte para fondo personalizado. Puedes encontrar estas configuraciones en las opciones de 'Colores' o 'Imagen de Fondo' en el personalizador del tema.

A menudo, estas opciones están ocultas dentro de otras pestañas y tendrás que buscar para encontrarlas.

Para más detalles, puedes ver estas guías relacionadas sobre cómo agregar una imagen de fondo en WordPress o cómo cambiar el color de fondo en WordPress.

Área de contenido

El área de contenido se encuentra justo después del encabezado en el diseño de un sitio. Es donde se muestra el contenido principal de la página.

Para un diseño de página de inicio personalizada, la sección de contenido puede incluir una llamada a la acción seguida de servicios o productos, testimonios y otra información importante.

Las tiendas en línea suelen usar esta área para promocionar ventas en curso, productos destacados, artículos más vendidos y más.

Por otro lado, un sitio rico en contenido como un blog o una revista puede usar un diseño con mucho contenido.

Mostrará los últimos artículos con extractos e imágenes, mostrará un formulario de suscripción a boletín informativo para crear una lista de correo electrónico, o usará áreas de descubrimiento de contenido para ayudar a los usuarios a encontrar más formas de pasar tiempo en el sitio.

Así es como se ve el diseño de la página del blog de WPBeginner.

Muestra nuestro contenido más popular con una llamada a la acción para que los usuarios se unan a nuestra lista de correo electrónico. (Ver: otros métodos que usamos para hacer crecer nuestra lista de correo electrónico)

Por defecto, WordPress utiliza un diseño de blog que muestra tus entradas de blog más recientes como la página principal de tu sitio web.

Sin embargo, puedes cambiar esa configuración y usar cualquier página individual como la página principal de tu sitio web.

Ve a la página Configuración » Lectura y selecciona ‘Una página estática’ en la opción ‘Tu página de inicio muestra’.

Después de eso, puedes elegir una página para usar como tu página de inicio y otra para tu página de blog.

Para más detalles, consulta nuestra guía sobre cómo crear una página separada para tus entradas de blog en WordPress.

No olvides hacer clic en el botón ‘Guardar cambios’ para almacenar tu configuración.

Ahora, puedes editar la página que elegiste como tu página de inicio y crear un diseño de página de inicio personalizado.

Área de barra lateral (opcional)

Tradicionalmente, las barras laterales aparecen en el lado derecho o izquierdo del área de contenido.

Dicho esto, muchos sitios web modernos ahora optan por diseños más limpios y sin barras laterales, especialmente para páginas de negocios y páginas de destino.

Barras laterales en temas clásicos

En los temas clásicos de WordPress, las barras laterales son áreas listas para widgets donde puedes agregar widgets como archivos, formularios de suscripción a boletines, categorías y contenido popular.

Encontrarás estas opciones en la página Apariencia » Widgets.

Barras laterales en temas de bloques

Para los temas de bloques, las barras laterales funcionan de manera diferente. Si bien estos temas pueden incluir áreas de barra lateral, utilizan bloques en lugar de widgets tradicionales.

Puedes personalizarlas directamente a través del Editor del Sitio, lo que ofrece opciones de diseño más flexibles.

Ten en cuenta que algunos temas modernos de WordPress podrían no incluir áreas de barra lateral en absoluto, centrándose en su lugar en diseños de ancho completo y enfocados en el contenido.

Para obtener más información sobre el uso de las barras laterales, puedes consultar nuestra guía definitiva sobre trucos para barras laterales de WordPress.

Área del pie de página

El área del pie de página aparece debajo del área de contenido, en la parte inferior del diseño de una página.

Si utilizas un tema de WordPress con soporte para el editor del sitio, puedes editar el área del pie de página haciendo clic en ella.

Aquí es donde trabajarás con Partes de Plantilla. Piensa en las Partes de Plantilla como bloques reutilizables para secciones como tu encabezado y pie de página.

La mejor parte es que puedes editarlas una vez y se actualizarán en todas partes de tu sitio.

Para editar tu pie de página, ve a Apariencia » Editor para iniciar el editor del sitio. Desde allí, selecciona 'Patrones' en el menú de la izquierda y desplázate hacia abajo hasta la sección 'Partes de Plantilla' para encontrar y hacer clic en tu pie de página.

Al editar el área del pie de página en el editor del sitio, puedes agregar cualquier bloque para mostrar diferentes elementos.

Por ejemplo, puedes agregar una lista de tus páginas más importantes, mostrar un menú de navegación, agregar un formulario de contacto y más.

Si estás utilizando un tema clásico, es muy probable que venga con un área de widgets en el pie de página.

Simplemente ve a la página Apariencia » Widgets y busca un área de widgets en el pie de página.

Al igual que el editor del sitio, puedes usar bloques para agregar diferentes elementos a los widgets del pie de página en tu tema.

¿Te preguntas qué poner en el pie de página de tu sitio? Consulta nuestra lista de cosas para agregar al pie de página de tu sitio de WordPress.

Otros componentes de un diseño de WordPress

A continuación, veremos algunos de los componentes de un diseño de WordPress que puedes agregar a las secciones de encabezado, contenido, barra lateral o pie de página. Estos son los bloques de construcción que te ayudan a crear un diseño funcional.

Menú de navegación

Los menús de navegación o menús son listas horizontales o verticales de enlaces. La mayoría de los sitios web tienen al menos un menú de navegación principal en el área del encabezado.

Sin embargo, algunos sitios web utilizan varios menús de navegación en el área del encabezado.

WordPress también te permite mostrar menús de navegación como un widget. Estos menús aparecen como una lista vertical de enlaces, y puedes colocarlos en las barras laterales o en las áreas de widgets del pie de página.

Para más detalles, consulta nuestras guías sobre cómo agregar menús de navegación en WordPress y cómo estilizar menús de navegación de WordPress.

Widgets (Temas clásicos)

Si tu tema de WordPress soporta widgets, entonces puedes usarlos para reorganizar el diseño de tu sitio web. Además, con los widgets de bloque, tu tema ahora también puede usar bloques en las áreas de widgets.

Puedes agregar widgets a las áreas listas para widgets o barras laterales de tu sitio web de WordPress. Algunos temas de WordPress vienen con múltiples áreas listas para widgets para agregar widgets o bloques.

WordPress viene con varios widgets y bloques integrados que puedes usar. Muchos plugins populares de WordPress también proporcionan sus propios widgets y bloques.

Por ejemplo, puedes usar widgets/bloques para agregar listas de publicaciones populares, un formulario de contacto, anuncios publicitarios, feeds de redes sociales, y más.

Puedes ver todos estos widgets visitando la página Apariencia » Widgets en el área de administración de WordPress.

Nota: Si tu tema no tiene áreas de widgets, es posible que no veas la página 'Widgets' en el área de administración de WordPress.

Para más detalles, consulta nuestra guía sobre cómo agregar y usar widgets en WordPress.

Bloques

WordPress usa el editor de bloques para escribir contenido, administrar áreas de widgets o editar tu sitio web. Utiliza bloques para todos los elementos web comunes, por eso se llama editor de bloques.

Este editor está diseñado para ayudarte a crear diseños atractivos para tus publicaciones y páginas de WordPress utilizando bloques.

Existen diferentes tipos de bloques para los elementos más comunes de cualquier tipo de contenido. Por ejemplo, puedes agregar párrafos, encabezados, imágenes, galerías, incrustaciones de video, columnas, tablas, y más.

Esto te permite crear diferentes diseños para cada publicación o página en tu sitio web de WordPress sin instalar un plugin o cambiar tu tema.

En los temas de bloques, estos mismos bloques también pueden reemplazar los widgets tradicionales en áreas como barras laterales, encabezados y pies de página.

Imágenes destacadas

Si visitas la página de inicio de WPBeginner, notarás imágenes en miniatura junto a cada título de artículo. Estas se llaman imágenes destacadas.

WordPress te permite establecer imágenes destacadas para tus publicaciones y páginas. Tu tema de WordPress utiliza estas imágenes en diferentes áreas de tu sitio web.

Para obtener más información, consulta nuestra guía sobre cómo agregar imágenes destacadas en WordPress.

Imágenes de portada

Una imagen de portada suele ser una imagen ancha utilizada como foto de portada para una nueva sección en una publicación de blog o página.

Puedes agregarla a tu publicación o página usando el bloque de Portada. El bloque de Portada también te permite usar un color de fondo en lugar de una imagen.

Para obtener más información, consulta nuestra guía detallada sobre la diferencia entre la imagen de portada y la imagen destacada.

Patrones de bloques

Los patrones son colecciones de bloques preorganizados que puedes usar para agregar rápidamente diferentes secciones a tus diseños.

Puedes usar patrones para escribir contenido y editar publicaciones y páginas.

De manera similar, puedes usar patrones en el editor de sitio completo en tu tema de bloque de WordPress y diseño de sitio web.

Simplemente inicia el editor de sitio y verás patrones en las opciones de ‘Diseño’.

Cada patrón es una colección de bloques organizados en un orden particular para diseños de uso común.

Tu tema de WordPress puede venir con varios patrones. También puedes encontrar más patrones en la Biblioteca de Patrones de WordPress.

¿Quieres guardar tus secciones de diseño? Guarda tus propias combinaciones de bloques como patrones y reutilízalas más tarde.

Los Patrones de Bloques son una característica poderosa en WordPress, y puedes encontrar miles de opciones gratuitas en el Directorio Oficial de Patrones de WordPress.

A medida que más temas y plugins de WordPress agregan sus propios patrones, esta biblioteca continúa creciendo.

Puedes consultar nuestra guía sobre cómo usar patrones de bloques en WordPress para obtener más información.

Botones

Los botones juegan un papel importante en el diseño y la disposición de los sitios web modernos. Proporcionan a los usuarios una llamada a la acción clara, lo que te ayuda a hacer crecer tu negocio y tus conversiones.

El editor de bloques predeterminado viene con un bloque de Botón que puedes usar en cualquier publicación o página de WordPress o dentro del editor del sitio.

Tu tema de WordPress también puede incluir configuraciones de botones de llamada a la acción en el personalizador del tema. La mayoría de los plugins populares de constructor de páginas de WordPress también incluyen botones en varios estilos.

Incluso puedes agregar botones para hacer clic y llamar en WordPress con un plugin.

Para más detalles, consulta nuestra guía sobre cómo agregar botones de llamada a la acción en WordPress.

CSS personalizado

Piensa en CSS (Hojas de Estilo en Cascada) como la pintura y la decoración de tu sitio web. Es el código que controla detalles visuales como colores, fuentes y espaciado.

Tu tema y tus plugins de WordPress vienen con sus propias reglas de CSS, pero es posible que desees cambiar cosas pequeñas como el color del texto o el tamaño de la fuente. Aquí es donde entra el CSS personalizado.

WordPress hace que sea súper fácil para ti guardar tus propias reglas de CSS personalizadas.

Agregar CSS personalizado en un tema de bloques

Si estás utilizando un tema de bloques con soporte para el editor del sitio, ve a la página Apariencia » Editor.

Desde el panel principal del editor, simplemente haz clic en el ícono de ‘Estilos’ en la esquina superior derecha. Esto abrirá el panel de ‘Estilos’ en la columna derecha.

Desde aquí, desplázate hacia abajo y haz clic en la pestaña ‘CSS adicional’. Esto mostrará un cuadro de texto donde puedes agregar tu código CSS.

No olvides hacer clic en el botón ‘Guardar’ para almacenar tus cambios cuando hayas terminado.

Agregar CSS personalizado en un tema clásico

Si usas un tema clásico de WordPress, puedes agregar tu CSS personalizado en el personalizador del tema.

Simplemente ve a la página Apariencia » Personalizar y luego haz clic en la pestaña ‘CSS adicional’.

Desde aquí, puedes agregar tus reglas CSS personalizadas y podrás verlas aplicadas en la vista previa en vivo.

Agregar CSS personalizado en WordPress usando un plugin

Normalmente, si usas los métodos predeterminados, tu código CSS personalizado se guarda con la configuración de tu tema. Cambiar de tema deshabilitará tu código CSS personalizado.

Una mejor manera de almacenar tu CSS personalizado en WordPress es usar el plugin WPCode. Es el mejor plugin de fragmentos de código de WordPress, que te permite agregar fácilmente fragmentos de código personalizados sin romper tu sitio.

Primero, necesitas instalar y activar el plugin WPCode. Para más detalles, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Tras la activación, ve a Fragmentos de código » + Agregar nuevo desde el panel de administración de WordPress.

Luego, pasa el cursor sobre la opción ‘Add Your Custom Code (New Snippet)’ en la biblioteca de fragmentos de código y haz clic en el botón ‘Use snippet’.

A continuación, en la parte superior de la página, agrega un título para tu fragmento de CSS personalizado. Puede ser cualquier cosa que te ayude a identificar el código.

Después de eso, escribe o pega tu CSS personalizado en el cuadro ‘Vista previa del código’ y establece el ‘Tipo de código’ eligiendo la opción ‘Fragmento de CSS’ del menú desplegable.

Luego, desplázate hacia abajo hasta la sección ‘Inserción’ y selecciona el método ‘Auto-insertar’ si deseas ejecutar el código en todo tu sitio web de WordPress.

Puedes elegir el método ‘Shortcode’ si solo deseas ejecutar el código en páginas o publicaciones específicas.

Finalmente, regresa a la parte superior de la página, activa el interruptor a ‘Activo’ y haz clic en el botón ‘Guardar fragmento’.

Esto guardará tu fragmento de código CSS personalizado.

Para más información sobre este tema, consulta nuestra guía completa sobre cómo agregar CSS personalizado en WordPress.

Términos de diseño en constructores de páginas de WordPress

La forma más fácil de crear diseños personalizados de WordPress para tus páginas de destino es usando un constructor de páginas de WordPress.

Recomendamos usar SeedProd. Es el plugin constructor de páginas de WordPress más amigable para principiantes del mercado.

Otros constructores de páginas usan términos similares para herramientas y funciones comunes.

Uso de plantillas en constructores de páginas de WordPress

Las plantillas son la forma más rápida de crear el diseño de una página web. Todos los plugins populares de construcción de páginas vienen con un montón de plantillas listas para usar que puedes usar como punto de partida.

Por ejemplo, SeedProd tiene plantillas para varios tipos de páginas, incluyendo páginas de destino, páginas de ventas, páginas 404, páginas de "próximamente" y más.

Módulos y bloques en constructores de páginas de WordPress

Al igual que los bloques en el editor predeterminado de WordPress, los plugins de construcción de páginas también usan bloques.

Algunos constructores de páginas pueden llamarlos módulos o elementos, pero esencialmente son lo mismo.

Sin embargo, los plugins de construcción de páginas vienen con más bloques que el editor predeterminado. Por ejemplo, SeedProd incluye bloques para testimonios, bloques de WooCommerce, Google Maps, formularios de contacto, incrustaciones de Facebook y más.

Puedes usar bloques para crear tus propios diseños, moverlos y experimentar para determinar qué funciona mejor para tu negocio.

Uso de secciones en constructores de páginas de WordPress

Similar a la función de 'Patrones' en el editor predeterminado, una Sección es un conjunto de bloques agrupados para crear instantáneamente áreas comunes de un sitio web.

Por ejemplo, normalmente puedes usar una sección de encabezado, una imagen principal, tablas de precios y más.

Los diferentes plugins de constructor de páginas de WordPress pueden usar términos distintos para ellos. Por ejemplo, SeedProd los llama secciones, y Beaver Builder los llama filas y columnas guardadas.

Preguntas Frecuentes

Aquí hay algunas preguntas frecuentes de nuestros lectores sobre los diseños de WordPress:

¿Cuál es la diferencia entre un bloque y un widget en WordPress?

Los bloques son los elementos básicos que usas para crear contenido en el editor de WordPress, como párrafos, imágenes o botones.

Los widgets se usaban tradicionalmente para agregar módulos de contenido específicos a áreas fuera del contenido principal de la página, como barras laterales y pies de página.

En los temas modernos basados en bloques, los bloques ahora se pueden usar en cualquier área lista para widgets, lo que te brinda mucha más flexibilidad y hace que el sistema de widgets clásico sea menos común.

¿Puedo tener un diseño diferente para cada página?

Sí, absolutamente puedes. El editor de bloques de WordPress te permite crear diseños únicos para cada publicación y página. Puedes organizar columnas, agregar diferentes bloques y estructurar el contenido como quieras en cada página.

Para un control aún mayor, los complementos de constructor de páginas como SeedProd te permiten diseñar páginas completamente personalizadas desde cero que son totalmente independientes del diseño predeterminado de tu tema.

¿Todos los temas de WordPress vienen con una barra lateral?

No, no todos los temas incluyen una barra lateral.

Muchos diseños modernos se centran en un diseño limpio de ancho completo para una experiencia de usuario más enfocada, especialmente en páginas de destino y sitios de negocios.

Sin embargo, la mayoría de los temas multipropósito todavía proporcionan una barra lateral como una opción que puedes habilitar o deshabilitar a través del personalizador de temas o el editor del sitio.

Recursos Adicionales

A continuación, se presentan algunos recursos adicionales para principiantes que cubren los conceptos básicos de diseño de WordPress con más detalle:

• Cómo agregar contenido ficticio para el desarrollo de temas en WordPress
• Hoja de trucos de temas de WordPress para principiantes
• Cómo encontrar los archivos a editar en un tema de WordPress
• Guía para principiantes de la jerarquía de plantillas de WordPress (Hoja de referencia)
• Cómo Crear Fácilmente un Tema Personalizado de WordPress (Sin Código)

Esperamos que este artículo te haya ayudado a aprender sobre los términos utilizados en los diseños de WordPress. También puedes consultar nuestra guía sobre cómo aprender WordPress gratis en una semana o marcar nuestro Glosario de WordPress, un diccionario amigable para principiantes de términos de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.