Decodificando WordPress: Construye Rápidamente con el Directorio de Patrones de WordPress

¿No eres diseñador?

Aquí abajo, todos flotamos. (Advertencia: ¡Perturbador en más de un sentido!)

Espera, no era así…

¡Aquí abajo, todos diseñamos!

Así es como debería ser.

Antes de ser apartado por un payaso cantante, estaba tratando de decir que WordPress lo ha hecho de nuevo.

Han hecho que la plataforma sea aún más fácil para el no diseñador, no programador, los normales dueños de negocios y gerentes del mundo para crear sitios web hermosos.

Esta vez, gracias a algo llamado patrones de bloques de WordPress y el nuevo directorio y biblioteca de patrones donde están organizados.

¿Intrigado?

Permítenos presentarte al Directorio de Patrones de WordPress, que los propietarios de sitios web de todos los niveles de habilidad técnica pueden usar para crear un diseño hermoso. Además, ofreceremos varios consejos para elegir los patrones correctos para construir la experiencia de marca ideal.

¿Qué Es Un Patrón De WordPress?

En WordPress, un patrón es una colección de bloques individuales diseñados para integrarse perfectamente con los temas de WordPress.

En caso de que no estés familiarizado con los bloques, empecemos por ahí.

Los bloques de WordPress son elementos individuales apilables que se utilizan para agregar funcionalidad a páginas y publicaciones en tu sitio de WordPress.

En 2018, Gutenberg, un editor de bloques, reemplazó al editor clásico de WordPress. Desde entonces, los bloques se han convertido en el estándar de oro para personalizar sitios de WordPress gracias a su potente funcionalidad y fácil configuración de arrastrar y soltar.

[glossary_term_es title=”Gutenberg” text=”Gutenberg es el nombre del proyecto del Editor de Bloques de WordPress. Muchos desarrolladores y entusiastas de WordPress usan los términos Editor Gutenberg y Editor de Bloques indistintamente.”]

Cada bloque es como un widget, capaz de agregar texto, medios, diseño, elementos funcionales, formularios y más donde lo coloques en una página o publicación de WordPress. Puedes organizar los bloques como prefieras y personalizar muchos de ellos para obtener el aspecto y las funciones que desees.

Ahora que hemos entendido los bloques, volvamos a los patrones.

Como comenzamos a decir, los patrones de bloques son combinaciones predefinidas de bloques que conforman elementos funcionales para páginas y publicaciones de WordPress, como encabezados y pies de página, casillas de suscripción al boletín y pantallas de comercio electrónico.

Quizás la característica más genial de los patrones es que las fuentes, colores y otros elementos de estilo de cada bloque en un patrón se adaptan automáticamente para que coincidan con tu tema. Aún puedes personalizar los patrones cada vez que los uses, en caso de que desees mover o eliminar un elemento de un patrón en una página o publicación, pero no en otra.

Un gran ejemplo sería utilizar un único patrón como una plantilla predefinida para todas tus publicaciones de blog. Quieres que sean bastante similares, pero es posible que desees que las llamadas a la acción (CTA), secciones de preguntas frecuentes, formularios y otros elementos estén en diferentes lugares según el contenido y la audiencia.

Los desarrolladores de temas populares tienen sus propios patrones personalizados, lo que facilita la creación de un diseño hermoso e incluso complejo que sabes que funcionará completamente. Si estás buscando tanto estilos de temas modernos como los mejores patrones para potenciarlos, esta guía tiene una lista útil de temas y los patrones predefinidos que funcionan con ellos (gratuitos y de pago).

En resumen, los patrones de WordPress son elementos pre-diseñados que permiten a los propietarios, gerentes y desarrolladores de sitios web crear rápidamente sitios web potentes y consistentes.

Con eso, hablemos sobre cómo acceder a los patrones de WordPress.

Entendiendo el Directorio de Patrones de WordPress

Ahora, podemos sumergirnos en lo que viniste aquí a aprender hoy: el Directorio de Patrones de WordPress.

Pero primero, tenemos una advertencia más: existe un Directorio de Patrones de WordPress y una Biblioteca de Patrones de WordPress.

Esto se debe a que hay uno para WordPress.org y otro para WordPress.com, que son diferentes.

WordPress.org es una plataforma de código abierto para crear sitios web personalizados. Puedes descargarlo y usarlo de forma gratuita. Sin embargo, para que tu sitio web esté en línea y sea accesible en Internet, necesitarás comprar un servicio de alojamiento web.

Aquí es donde entra WordPress.com, un creador de sitios web en línea y proveedor de alojamiento. Los aspectos básicos son gratuitos en WordPress.com, y puedes acceder a características mejoradas por una tarifa.

[glossary_term_es title=”Constructor de Sitios Web” text=”Un constructor de sitios web es una plataforma o un programa que ayuda a las personas a crear los sitios web de manera más sencilla. Los constructores de sitios web suelen depender de los editores de arrastrar y soltar (drag-and-drop editors en inglés) y no requieren conocimientos previos de desarrollo web o de programación.”]

El Directorio de Patrones de WordPress, o Directorio de Patrones de Bloques, existe en WordPress.org. La Biblioteca de Patrones de WordPress se encuentra en WordPress.com.

Ambos recursos surgieron recientemente para proporcionar un lugar único donde los diseñadores y desarrolladores de patrones puedan compartir las creaciones que facilitan su vida. Propietarios de sitios web creativos y/o constructores como tú pueden acceder a estos recursos para construir rápidamente experimentos hermosos y funcionales sin tener que reinventar la rueda cada vez.

¿La mejor característica de todas? Los cientos de patrones listados en la biblioteca y el directorio son gratuitos para usar.

Cómo Navegar por el Directorio de Patrones de WordPress

La biblioteca y el directorio de patrones de bloques de WordPress facilitan enormemente encontrar el patrón adecuado para tu sitio web.

En la parte superior de la página de inicio de cada sitio web, verás un conjunto de filtros que puedes utilizar para reducir los tipos de patrones que estás viendo.

Actualmente, las categorías de patrones de bloques en el directorio incluyen:

• Publicaciones: Muestra el contenido de tu blog
• Texto: Presenta texto en cualquier lugar de tu sitio web
• Galería: Muestra imágenes
• Llamada a la Acción: Anima a los visitantes del sitio a actuar
• Banners: Muestra diseños en la parte superior de las páginas para interactuar con los visitantes
• Encabezados: Ayudan con la navegación del sitio web
• Pies de Página: Aparecen en la parte inferior de los sitios web para ofrecer navegación adicional
• Wireframe: Proporcionan marcadores de posición para planificar y experimentar con diferentes elementos de diseño

También encontrarás una barra de búsqueda para localizar patrones específicos. Esta es una forma rápida de encontrar soluciones adaptadas a tus requisitos.

En el directorio, puedes hacer clic en un patrón para previsualizar su apariencia en diferentes anchos de pantalla.

En ambos sitios, verás un botón azul que te permite copiar el patrón.

Te mostraremos exactamente dónde esto es útil cuando nos sumerjamos en el uso de un patrón en tu sitio de WordPress por primera vez.

Cómo Empezar con el Directorio de Patrones de WordPress

Vamos a sumergirnos en la implementación de tu primer patrón en tu sitio web.

Primero, necesitas seleccionar la publicación o página donde deseas agregar un patrón. Vamos a iniciar sesión en WordPress, buscar “Entradas” en la barra lateral, ir a “Todas las Entradas” y seleccionar la que deseamos editar.

Una vez dentro de esa entrada, en la esquina superior izquierda del área de edición debería haber un botón de suma que abre tanto los menús de bloques como de patrones.

Nota: ¿No ves la opción para agregar bloques o patrones en la página que estás editando? Es posible que aún no estés usando un tema que los admita. Nuestra guía Cómo Cambiar de un Tema Clásico a Temas de Bloques de WordPress te guiará para que puedas actualizar a un tema de bloques y aprovechar todos sus beneficios modernos.

Una vez que tengas ese menú abierto, cambia a la pestaña de Patrones. Aquí, verás todos los patrones de bloques disponibles para el tema que estás usando.

Digamos que queremos agregar una llamada a la acción a la entrada. Haremos clic en esa categoría y seleccionaremos nuestro patrón de CTA elegido. Así de fácil, aparecerá donde sea que esté nuestro cursor en la entrada.

Tip: Inserta un patrón que hayas copiado del directorio o biblioteca de patrones. Simplemente, usa el botón azul de copiar en el patrón deseado, regresa a la página o entrada de WordPress que deseas editar, haz clic en la pantalla donde deseas que esté el patrón y pega.

¿Quieres mover, eliminar o editar de otra manera tu patrón? Haz clic en él en la entrada para ver todas las configuraciones y opciones del patrón.

Asegúrate de seleccionar “Guardar borrador” o “Publicar” en la parte superior derecha de la pantalla de WordPress para guardar tu trabajo.

Esos son los conceptos básicos de cómo usar patrones en tu sitio web. ¡Súper fácil, ¿verdad?!

¿Cuál es el Propósito de los Patrones de WordPress?

Los patrones parecen tenerlo todo. Pueden acelerar la velocidad a la que creas y construyes, garantizar uniformidad sin esfuerzo para mejorar la impresión de tu marca y ofrecer el aspecto estético que siempre has querido que tu sitio web tenga.

Velocidad de Creación

Cada patrón en el directorio se integra perfectamente con la mayoría de los temas modernos. Y la implementación de patrones es tan simple como arrastrar y soltar tus elementos favoritos en su lugar.

Esto significa que no tienes que ser un diseñador de WordPress o entender de desarrollo para crear rápidamente experiencias poderosas que muestren tu marca, impulsen el SEO e incluso aumenten las conversiones y la retención.

Consistencia del Sitio Web

¿Pasas horas meticulosamente revisando cada página de tu sitio para cambiar ese esquema de color azul medianoche a azul marino?

Ya no será así.  

Los patrones de WordPress heredan las configuraciones de fuente, color y espaciado del propio tema. ¡Nada de ajustes genéricos aquí!

Esto reduce significativamente la probabilidad de inconsistencias visuales, ya sea que estés actualizando o simplemente experimentando con el aspecto y la sensación de tu sitio.

Diseños Hermosos

Probablemente, uno de los mejores y más evidentes beneficios de usar patrones para completar tu sitio web empresarial es que suelen ser ridículamente atractivos.

Algunos patrones de página completa prácticamente diseñan las páginas web del sitio por ti. Todo lo que tienes que hacer es hacer algunos ajustes, y puedes tener un sitio web personalizado y con la imagen de marca que parece diseñado profesionalmente.

¿Te sientes abrumado? 3 Consejos para Elegir los Mejores Patrones

Es genial que haya miles de patrones de WordPress disponibles.

También puede ser un poco desconcertante revisarlos y elegir los mejores para tu sitio web.

Entonces, concluyamos con algunos consejos para ayudarte a tomar decisiones más sabias y rápidas cuando se trata de patrones.

Comienza con la Accesibilidad 

Hasta el 15% de la población mundial experimenta una discapacidad, razón por la cual existe una red de leyes y agencias en todo el mundo que mantienen altos los estándares de accesibilidad web.

Algunos consejos para aumentar la accesibilidad incluyen usar tamaños de fuente legibles, crear diseños de alto contraste, simplificar la navegación, subtitular gráficos y hacer que la estructura de tu sitio web sea lógica. Elige patrones que mejoren la accesibilidad en todo tu sitio, como patrones de texto con letra grande o patrones de diseño con alto contraste, sin tener que desechar todo el trabajo.

Para obtener una guía completa, asegúrate de leer Cómo Diseñar un Sitio Web Accesible (Una Guía Completa).

Decide Tu Historia y Estilo

Cuando se trata de diseñar un sitio web, el diseño y la apariencia cuentan la historia de tu marca.

Solo tú puedes contar esa historia con precisión. Una vez que lo tengas claro, debería influir en todo lo demás, como tu contenido y el estilo en el que lo presentas.

¿Es el ambiente minimalista y sencillo lo adecuado? ¿O tu marca es llamativa y vibrante? ¿Las imágenes son el centro de atención al vender tu producto, o es el contenido clave para tu oferta de servicios?

Una vez que sepas las respuestas a estas preguntas, podrás ir al grano y armar una colección de patrones que construyan un sitio web que cuente tu historia.

Obtén más información sobre diseño web con los 7 Elementos Básicos del Diseño Web.

Examina Lo Que Es Popular

Dicho esto, a veces entender tu marca hasta la médula, no genera ninguna idea de diseño. Algunos de nosotros simplemente no somos pensadores visuales.

Si ese eres tú y necesitas inspiración rápida, no busques más allá de nuestra guía sobre las tendencias de diseño web.

Con un poco de dirección, puedes empezar a seleccionar patrones y construir un sitio que sea tanto elegante como completamente tuyo.

Te Ayudaremos a Descifrar el Directorio de Patrones de WordPress

Con eso, estás completamente preparado para acceder al directorio y la biblioteca de WordPress y comenzar a crear el diseño web de tus sueños.

Pero, ¿qué pasa si no confías en tus habilidades de diseño, no tienes tiempo para lidiar con ello mientras atiendes pedidos comerciales de un lado a otro (¡felicidades!), o simplemente no quieres?

Lo entendemos.

Por eso, nuestros planes de hosting simples y asequibles y nuestros profesionales en desarrollo web, diseño web y administración de sitios web apoyan a propietarios y administradores de sitios web en sus misiones para crear experiencias en línea que mejoren el SEO, generen conversiones y sean simplemente hermosas.