Sigue este blog vía RSS, en el Fediverso en @acambronero@www.blogpocket.com, o vía email.

You don’t speak Spanish? Explore a selection of Blogpocket posts in English

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-1024x576 Cómo diseñar un tema con el editor de WordPress

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.

Responder en Mastodon (requiere usuario en esa plataforma)

Puedes usar tu cuenta de Mastodon para responder a este post de

Copia y pega esta URL (https://www.blogpocket.com/?p=70875) en el campo de búsqueda de la interfaz web de tu servidor Mastodon.

Icono de Mastodon

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento: No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a GreenGeeks que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir al contenido