Introducción a los bloques Wireframe en Starter Templates y UAG

Creación de prototipos. Es el componente clave para el éxito de quienes se dedican a construir y diseñar sitios web.

Puede ser un autónomo o un desarrollador con años de experiencia a sus espaldas. También puede ser un emprendedor o el propietario de una empresa que se está familiarizando con los matices de la creación de una presencia en Internet.

Sea cual sea el caso, en Brainstorm Force ofrecemos soluciones que facilitan el desarrollo de su sitio web.

Hoy nos complace anunciar una nueva función "Bloques alámbricos". en nuestro Starter Templates y Spectra plugins.

Wireframe Blocks puede llevar el proceso de desarrollo de su sitio web al siguiente nivel.

Una pregunta rápida antes de empezar.

Antes de empezar un nuevo proyecto de diseño web, ¿cómo planifica la estructura de su sitio web o esboza la disposición de las páginas? ¿Utiliza alguna herramienta en línea o se aferra a la vieja usanza de dibujarlo en papel?

¿Y si pudieras hacerlo todo en WordPress? ¿Y gratis?

¿Te parece interesante? Sumérgete para aprender más sobre wireframing y Wireframe Blocks.

¿Qué es el wireframing?

El wireframing es el proceso de planificar y diseñar el aspecto de un sitio web. Es la fase en la que se diseña el sitio web y se decide qué elementos deben estar en él y cuáles no.

Considérelo como una pantalla en blanco o un lienzo en blanco en el que planificar (o incluso esbozar) el aspecto que debe tener su sitio web.

Tanto si estás creando un sitio web para un cliente como para ti mismo, siempre es una buena idea hacer referencia a un esquema de sitio web. Ya sabes, el que es sólo un montón de marcadores de posición que indica que el encabezado va aquí, la imagen viene aquí, un formulario va allí, usted consigue la idea.

Ayuda a sentar las bases o la dirección en la que hay que avanzar.

Puede iterar y reiterar el diseño hasta que sea perfecto antes de entrar en el desarrollo real del sitio web y añadir todas esas campanas y silbatos.

Aunque es una buena práctica crear un esquema del diseño antes de ponerse manos a la obra con el sitio real, el uso de herramientas en línea puede resultar un poco abrumador.

Por no hablar de que no es fácil replicar inmediatamente en el entorno de WordPress los diseños creados en papel o con herramientas en línea.

¿Y si pudieras hacer wireframing desde el panel de control de WordPress? ¿No sería mucho más fácil? Nosotros creemos que sí.

Ahí es donde entran en juego los Wireframe Blocks.

¿Qué son los bloques de alambre?

Wireframe Blocks es un conjunto de bloques de WordPress listos para usar que te ayudan a crear un wireframe de tu sitio web dentro del editor de bloques de WordPress. Con los bloques Wireframe, puedes añadir casi cualquier sección para diseñar el prototipo perfecto de tu sitio web.

Supongamos que desea crear una maqueta de una página de inicio para su sitio web.

Para su página de inicio, querría la sección principal, una pequeña sección introductoria, un poco sobre los servicios que ofrece, luego la sección del equipo, algunos testimonios y una llamada a la acción para terminar.

Así es como los bloques wireframe pueden ayudarte a diseñar la maqueta -

Los bloques Wireframe están disponibles en diferentes categorías y satisfacen las necesidades de cada sección de su sitio web, como acerca de, equipo, testimonios, CTA, FAQ, etc.

Cuando importes un bloque de wireframe concreto, verás que viene con muchas cosas independientes, como un título, un texto, una imagen y un botón. Se trata de marcadores de posición que pueden editarse fácilmente más adelante, una vez finalizado el prototipo.

Igual que aquí sustituimos el wireframe por imágenes finales, texto y añadimos colores 🙂 .

Al utilizar los bloques de esquemas listos para usar, podrá centrarse más en el contenido real y dejarnos a nosotros la estructura de su sitio web.

Ventajas de utilizar bloques de alambre:

• Maqueta directamente en WordPress: Crear wireframe derecho a través del editor de bloques de WordPress.
• Gran ahorro de tiempo: Ahorra tu tiempo en aprender herramientas de terceros para dibujar la estructura en bruto de tu sitio web.
• Diseño elegante y limpio: Sin texto extra, sin imágenes que distraigan. Crea wireframes con un diseño limpio.
• Conversión sencilla: Convierte tu maqueta en diseño web final de forma rápida y sencilla.
• Independiente del tema: Los bloques Wireframe funcionan con todos los temas de WordPress.
• Hereda la configuración del personalizador: Los bloques alámbricos importados heredarán el color del tema, la tipografía y otros estilos de tu personalizador.

Bloques de alambre: En Starter Templates y Spectra

Los bloques Wireframe se construyen con el editor Gutenberg y están disponibles con nuestros plugins Starter Templates y Spectra - GRATIS 🙂 ...

Starter Templates

Si es la primera vez que utiliza Starter Templates, veamos rápidamente lo que ofrece este magnífico complemento

Starter Templates es una biblioteca de más de 180 plantillas diseñadas profesionalmente que están hechas para usted.

Si desea lanzar un sitio web de aspecto profesional en cuestión de minutos, utilice nuestro Starter Templates. Importe una demo de sitio web lista para usar basada en su nicho, sustituya el texto y las imágenes por los suyos y podrá lanzar su sitio web rápidamente.

Ya se trate de aventuras al aire libre, viajes y turismo, restaurantes, academias de música, tiendas online, blogueros y personas influyentes, agencias, salud y fitness, belleza y estilo de vida, ya nos entiendes. Hay una demo de sitio web para casi cualquier tipo de negocio.

Además, el plugin Starter Templates dispone de superado el millón de instalaciones activas. Así es. Más de 1 millón de sitios web han sido creados con Starter Templates.

Seguimos añadiendo nuevas plantillas con frecuencia. Una de ellas es nuestra plantilla de inicio para tiendas online.

Es precioso, ¿verdad?

Por lo tanto, si no ha actualizado su plugin de plantillas de inicio, ahora es un buen momento para hacerlo. Con la actualización, también podrá utilizar nuestra última incorporación, Wireframe Blocks.

Bloques Wireframe en Starter Templates

Los bloques Wireframe están disponibles con la función Starter Templates plugin.

Una vez que tengas la última versión del Starter Templates - edita la página/post, haz clic en el botón Starter Templates y verás que aparece una nueva pestaña llamada Wireframes.

En el lado izquierdo, también verás muchas categorías y una opción para elegir entre wireframes de colores claros y oscuros.

¿Quieres sólo wireframes de color oscuro? Selecciona la pestaña oscura. Y viceversa para los de color claro.

Actualmente, los wireframes tienen 9 categorías con más de 50 bloques. Hay un bloque de wireframe para casi cualquier sección que desee crear en su sitio web. Solo tienes que importar un bloque de tu elección y personalizarlo a tu gusto.

Lo mejor es que viene gratis con el plugin Starter Templates.

¿Cómo podemos incluir un wireframe utilizando nuestro Starter Templates?

Siga nuestro proceso paso a paso.

Incluir bloques alámbricos con Starter Templates

Suponemos que ha actualizado el plugin Starter Templates a la última versión.

Paso 1: Añadir/Editar Página/Post

Para empezar, cree una nueva página o edite la existente que desee.

Para este ejemplo, hemos creado la página "Wireframe Blocks".

Haga clic en el botón Starter Templates.

Paso 2: Seleccionar wireframes

Al hacer clic en un botón Starter Templates se abrirá una ventana para la biblioteca de plantillas. Verás que hay una nueva pestaña llamada Wireframes.

Haga clic en Wireframes justo arriba.

Paso 3: Seleccionar un bloque de alambre

Ahora puede ver bloques de alambre en varias categorías.

Seleccione un bloque en función de una categoría de su elección. También puedes filtrarlos en función del color.

Por ejemplo, hemos seleccionado el Acerca de y filtró los bloques en función del color de la luz.

A continuación, haga clic en Importar.

Paso 4: Editar bloque y publicar

Una vez importado el bloque, puede modificarlo si es necesario.

Como ya se ha dicho, los bloques de alambre están formados por varios bloques independientes.

Para editar cualquier elemento dentro del wireframe, haga clic en el elemento y edite la configuración en el lado derecho. Igual que harías con cualquier bloque mientras trabajas en el editor de bloques de Gutenberg.

Una vez que haya terminado de editar, haga clic en Publicar.

Acaba de crear su página maqueta utilizando los bloques de estructura alámbrica.

Paso 5: Sustituya el wireframe por su contenido

Una vez finalizado el wireframe, sólo tiene que sustituir el texto, la imagen y el color, y su página web final estará lista.

Así de fácil es 🙂 .

Spectra

¿Eres nuevo en Spectra?

Spectra es un addon popular con una biblioteca única y creciente de potentes bloques Gutenberg para construir sitios web impresionantes.

Además de bloques creativos, también ofrece bonitas plantillas de páginas y ahora - Bloques Wireframe.

Incluir bloques alámbricos con Spectra

Al igual que en Starter Templates, edita la página y encontrarás un botón para importar Plantillas Spectra.

Haga clic en él y encontrará bloques wireframe disponibles.

Crear Wireframe dentro de WordPress Ahora

Si eres autónomo, desarrollador de sitios web o incluso propietario de una empresa, los wireframes son una forma estupenda de crear una maqueta de un sitio web. Te ayudan a finalizar el diseño y evitan tener que rehacerlo.

En lugar de utilizar complicadas herramientas en línea o el anticuado papel para planificar su sitio web, con los wireframes puede crear uno directamente desde el panel de control de WordPress.

Los bloques Wireframe se construyen con el editor Gutenberg. Te hemos mostrado lo sencillo que es crear un prototipo completo utilizando los plugins Starter Templates y Spectra.

Actualiza ahora los plugins Starter Templates y Spectra y ponte manos a la obra con tus wireframes.

Para cualquier ayuda, nuestro equipo de apoyo está a un correo electrónico de distancia.

¡Salud!