Cómo diseñar un tema con el editor de WordPress

Beatriz Fialho explica cómo diseñar un tema en el editor de WordPress en Automattic.Design.

Beatriz Fialho es diseñadora de productos en Automattic y colaboradora de código abierto. Entre sus últimos trabajos destacan el nuevo tema de Noticias en WordPress.org y el sitio del Block Museum of Art .

A partir de WordPress 5.9 y si tienes activada la Edición completa del sitio (FSE, por sus siglas en inglés), puedes diseñar un tema usando solo el Editor del sitio.

Para activar la Edición completa del sitio solo debes instalar y activar un tema de bloques.

Para ver un listado de temas de bloques acude a Apariencia > Temas. Elige «Añadir nuevo» y «Filtrar por características». Selecciona «Edición completa del sitio» y, finalmente, haz clic en el botón «Aplicar filtro».

Si necesitas aclarar el concepto de «tema de bloques», dirígete a nuestro FAQ.

El vídeo realizado por Beatriz Fialho está acelerado porque la personalización del sitio, hecha exclusivamente con el Editor del sitio de WordPress le llevó aproximadamente dos horas. Pronto, se podrán exportar en WordPress temas y estilos, lo que permitirá que cualquier usuario de WordPress en cualquier lugar pueda instalar y usario, sin código, tu trabajo.

Consejos para comenzar a diseñar un tema con el editor de WordPress

Beatriz Fialho, aconseja lo siguiente para diseñar un tema con el editor de WordPress.

1. Instala un tema de bloque. Con un tema de bloque, tendrás acceso al Editor del sitio, que te permitirá personalizar todo en tu sitio. Para el video, se usó Blockbase , pero puedes usar cualquiera de los temas de bloque en el directorio de temas. En Blogpocket, publicamos este artículo: Cómo crear un tema secundario de Blockbase.
2. Crea algún contenido de demostración. Crea tres o cuatro publicaciones para que puedas ver cómo se verán en tu plantilla de índice.
3. Crea tus plantillas y partes de plantilla. Las plantillas son los diseños de las páginas de tu sitio, y las partes de la plantilla son partes de ellas, como encabezados y pies de página. Puedes crearlos desde cero o comenzar con las plantillas del tema. En Blogpocket, se publicó ¿Qué es una parte de plantilla y en qué se diferencia de los bloques reutilizables y los patrones de bloque? por si necesitas más información sobre la diferencia entre plantillas, partes de plantilla, bloques reutilizables y patrones de bloque.
4. Usa espaciadores, rellenos, espacios en bloque o márgenes. Estas herramientas te ayudarán a crear un diseño abierto y espacioso.
5. Hacer uso de bloques de grupo. Hay algunas ocasiones en las que puede tener sentido agrupar bloques para organizar los elementos de la plantilla de forma más ordenada.
6. Utilice el bloque de fila. La configuración de «espacio entre» del bloque de filas es una gran herramienta para los diseños de navegación.
7. Defina los estilos globales de su sitio. Los estilos globales incluyen la configuración de tipografía y los colores de su sitio. También puedes personalizar bloques específicos: por ejemplo, si deseas que un bloque de comillas tenga siempre un determinado tipo de letra o color, puede hacerlo en esta sección del panel de estilos globales.
8. Comprueba cómo se comporta el sitio en diferentes tamaños de pantalla. Siempre vale la pena verificar si el texto se superpone, se rompe de forma extraña o si hay alineaciones extrañas. Puedes previsualizarlo aquí.
9. Disfrute en su hermoso sitio!

Curso de Full Site Editing

Además de la sección FSE News, a la que pertenece este artículo y en la que encontrarás posts rápidos con tips, tools y noticias sobre la Edición completa del sitio; en Blogpocket tenemos un Curso de Full Site Editing en el que se explica el funcionamiento de la Edición completa del sitio.

FSE NEWS son posts rápidos con tips, tools y noticias sobre Gutenberg y Full Site Editing (FSE). Consulta la página principal para acceder a todos los posts de FSE NEWS. Consulta el FAQ para aclarar los términos generales que se utilizan.

Comparte en Mastodon:

Y aún hay más…

Suscríbete a la newsletter

En la newsletter «WP al día» recopilamos las ideas, trucos y noticias de actualidad acerca de WordPress, Gutenberg y la Edición completa del sitio. Recíbela todos los lunes a primera hora.

Suscríbete ahora y descarga, entre otros, nuestro último ebook «Un blog de 21 años (la historia jamás contada)!.

¡Quiero suscribirme!