ElegantThemes

FSE Outreach Ronda 12: Títulos de sitios de construcción con bloques

El miércoles, Anne McCarthy anunció Ronda 12 del programa de divulgación de FSEComo siempre, todos son libres de unirse probando funciones y brindando comentarios directos sobre áreas problemáticas utilizando las herramientas de diseño en WordPress. Cualquier persona interesada debe responder antes del 16 de marzo.

En esta ronda, los voluntarios tenían la tarea de probar algunos viejos pero buenos. En los primeros días del programa, cualquiera que se uniera hacía mucho por el título y la navegación del sitio. La Ronda 12 requiere que los usuarios revisen algunas de estas herramientas esenciales.

Esta es una llamada de prueba emocionante para mí. A principios de 2021, estaba frustrado con la experiencia de FSE. Hay tantos diseños que quiero resolver, pero a menudo no puedo crear lo que quiero.

Así que retrocedí en el tiempo para revisar el diseño del título en la prueba de la ronda 4 de marzo de 2021. En ese momento, los líderes de WordPress aún estaban a semanas de decidir si ciertos componentes relacionados con FSE aterrizarían en WordPress. Mis conclusiones sobre la herramienta en ese momento fueron:

Estoy empezando a darme cuenta de que tratar de hacer algo remotamente avanzado con el editor del sitio simplemente no va a suceder… Como alguien que se enorgullece de su paciencia casi infinita, la ronda 4 está tratando de hackearme.

Quería recrear elementos de Gran Bretaña. café Encabezado durante la prueba. Esta es una tarea abrumadora que no se puede lograr.

Encabezado Pho Café.

Sin embargo, ¿cuánto ha cambiado ahora, casi un año después? ¿Es posible crear una copia exacta del título del sitio desde el editor de bloques?

si y no. Como siempre, depende.

Como desarrollador y diseñador, creo que puedo hacer esto con un código personalizado. Teniendo en cuenta que este podría ser un diseño único para clientes que pagan, estaría bien con eso.

Artículo Recomendado:  Descargue una plantilla de publicación de blog GRATUITA para el paquete de diseño de la Liga de Softbol de Divi

Crearlo como parte de un tema genérico publicado públicamente presenta muchos obstáculos en este nivel de personalización. Sin embargo, es posible capturar la mayor parte del carácter y la esencia del diseño.

En cuanto a construirlo directamente desde el editor de bloques, todavía existen algunas limitaciones serias. Sin embargo, eso es lo que me desafío a hacer. Quiero saber dónde está el editor del sitio sin escribir código CSS.

El resultado es el siguiente:

Encabezado de pizzería con logo, menú y botones en la esquina superior derecha. En el medio hay un eslogan de demostración, seguido de otro menú similar a un botón.
Encabezado de pizzería.
Crédito de la foto de la pizza: jennifer byrne

Técnicamente, escribí algo de código para cargar KG feliz fuenteAparte de eso, simplemente bifurqué el tema del bloque en cuestión y cambié el tamaño del «ancho». Creo todo lo demás 100% desde el editor del sitio web.

Aquí hay una captura de pantalla del diseño del editor en sí:

Título del restaurante de pizza en el editor del sitio web. Se selecciona la vista actual de la plantilla de título.
Sección Plantillas de encabezado personalizadas en el editor del sitio.

En general, esto fue sorprendentemente bien. Un año después, el editor del sitio web se ha vuelto aún más poderoso.

Como dije, todavía tiene sus limitaciones. Cualquiera que haya usado el tema de bloque probablemente le informará sobre los problemas de diseño en la captura de pantalla anterior. El área problemática es el bloque de columnas para el logotipo del sitio, la navegación y los botones superiores. También podría renunciar a cualquier esperanza de trabajar bien en tamaños de pantalla más pequeños.

Vista móvil de la cabecera del restaurante. El área del menú no está alineada.
Una vista móvil del encabezado.

¿Completamente inutilizable? No, pero no se acerca al ideal.

Diseñar algo complejo con el editor del sitio a veces puede parecer un gran truco sin controles receptivos para contenedores de tipo diseño como el bloque Columnas. En este punto, no es una revelación de ningún tipo.

La herramienta de diseño de bloques tiene muchas mejoras en comparación con el año pasado. Los controles de espacio, margen y relleno del bloque principal son una bendición para ajustar el espaciado vertical y horizontal. En ese momento, incluso tratar de controlarlo era un dolor de cabeza.Salvo algunos bloques a los que aún les faltan estas opciones, ahora [mostly] Sin estrés.

En este experimento, no tuve problemas con el espaciado. Después de más de un año de pruebas funcionales de FSE, esto es un alivio.

Sin embargo, me encontré con algunos otros obstáculos. Los bloques de navegación son probablemente lo que menos me gusta del editor de sitios. No he visto cómo proporcionará un sistema general que funcione bien con las 1000 variaciones de diseño que los autores de temas quieren usar. El menú de navegación clásico sigue siendo excelente para diseños personalizados.

Me encontré con dos problemas principales con este experimento. Un problema que tuve con FSE Outreach #4 hace un año fue crear un menú con un enlace similar a un botón. Este diseño básico aún no es posible con los bloques de navegación, al menos con las herramientas de diseño principales:

Cuatro enlaces en forma de botón con fondo rojo y texto blanco.
Un elemento de navegación similar a un botón.

Los usuarios pueden agregar fondos a todo el bloque de navegación, pero no a elementos de menú individuales. ¿Cómo lo hice? Usé el bloque Botones en su lugar.

Cuanto más lo pienso ahora, más me gusta la alternativa del bloque Botones.Sin embargo, no hay forma de envolverlo

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada.