5 Maneras de construir Sitios Web sin código usando Gutenberg de WordPress

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
5 Maneras de construir Sitios Web sin código usando Gutenberg de WordPress
Índice del artículo
    Add a header to begin generating the table of contents

    La creación de un sitio web avanzado solía requerir conocimientos de programación y muchas horas de codificación, pero gracias a Gutenberg, incluso aquellos que no conocen HTML y CSS podrán crear sitios web profesionales que se destaquen de la competencia.

    La respuesta inicial al lanzamiento de Gutenberg ciertamente fue condenatoria: «… Inútil … Un chiste … Terrible …»

    Puede discutir sobre cómo WordPress manejó el lanzamiento de su nuevo editor de bloques de contenido (y podría tener razón al pensar que no fue genial), pero lo cierto es que, después de una serie de actualizaciones, Gutenberg se ha convertido en una excelente herramienta para Creación de sitios web.

    A continuación, le mostraré 5 formas en que un diseñador web con experiencia limitada en codificación puede aprovechar Gutenberg para crear los tipos de sitios web personalizados que buscan las empresas.

    Creé un sitio web de viajes con una serie de características personalizadas utilizando estas tres herramientas:

    Ahora te contaré un secreto. No soy un desarrollador de hecho, tengo una experiencia de codificación limitada. Sin embargo, pude usar Gutenberg para crear un sitio web profesional con una serie de características que requerirían los sitios web personalizados. A continuación, te mostraré cinco de ellos.

    1. Puedes crear contenido dinámico

    Una ventaja que tiene sobre los creadores de páginas es que Gutenberg viene con una serie de extensiones de bloque  para mejorar tus sitios web. Uno de ellos es Toolset, que ofrece capacidades de contenido dinámico.

    El contenido dinámico significa que puede crear un elemento (como una imagen) que extraerá el contenido correcto de la base de datos. Entonces, cuando crea una lista de publicaciones, solo necesita agregar cada bloque para cada elemento una vez, pero ese bloque mostrará contenido diferente para cada publicación.

    Por ejemplo, he creado una lista de publicaciones de tours; más adelante, explicaré cómo puedes hacer esto con Gutenberg. ¿Notas algo extraño en los títulos a continuación?

    El encabezado es exactamente el mismo para cada uno de mis tours. Eso es porque los encabezados son estáticos, lo opuesto a dinámico. Significa que cuando agrego mis bloques, cualquier texto que ingrese en el encabezado se mostrará para cada una de las publicaciones. Sin embargo, cuando es dinámico, verá el rumbo correcto en cada tour.

    Para ilustrar, aquí está mi publicación sobre cómo visitar Cisjordania en el back-end. Puedes ver el título de la publicación en la parte superior.

    Quiero mostrar esta publicación de la gira con el encabezado correcto en mi lista de contenido. Todo lo que necesito hacer gracias a Gutenberg y Toolset es lo siguiente:

    1. Seleccione el bloque de encabezado de Toolset: a diferencia de los bloques normales de Gutenberg, Toolset’s le permite dinamizar su contenido;
    2. Seleccione la opción dinámica;
    3. Elija la fuente de su encabezado;
    4. Confirme que el encabezado es correcto.

    Puede crear contenido dinámico para otros bloques disponibles en Gutenberg, incluidas imágenes, campos personalizados y el enlace para botones.

    2. Mostrar listas personalizadas de contenido

    En un sitio web personalizado, habrá ocasiones en las que deseará enumerar su contenido de un tipo de publicación particular en diferentes partes de su sitio web. Por ejemplo, una lista de propiedades en venta en su página de inicio de bienes raíces.

    Cada una de estas propiedades utiliza el mismo diseño, mostrando la misma información, como el precio, el número de habitaciones y el número de baños de la misma manera. Esta información se agrega utilizando campos personalizados que son piezas de información que puede agregar al contenido de WordPress. Los creadores de páginas por sí solos no pueden construir campos personalizados. Sin embargo, puede crearlos utilizando Gutenberg y sus plugins de bloques.

    A continuación, para mi sitio web de viajes, mostré un control deslizante con una lista de los tours destacados. La lista incluye una serie de campos personalizados que incluyen el precio, la calificación y la duración.

    Utilicé Gutenberg y Toolset para crear los campos personalizados que puedes ver en mi lista anterior. Aquí están todos los campos personalizados que creé. He resaltado el campo de precio como ejemplo.

    En el back-end, puedo usar el bloque Toolset View para crear una lista de publicaciones. Puedo elegir qué publicaciones quiero mostrar y cómo quiero mostrarlas.

    Por ejemplo, a continuación puede ver que puedo seleccionar qué contenido quiero mostrar.

    También puedo decidir cómo quiero mostrar mi lista, ya sea en forma de cuadrícula, lista ordenada, sin formato o mucho más.

    Ahora puedo seleccionar qué campos quiero mostrar. Muchos de estos campos serán los campos personalizados que creé anteriormente. Cada uno de mis tours mostrará los campos con el mismo diseño. Una vez más, he resaltado el campo personalizado de precios a continuación. Para cada campo, creo un bloque y luego elijo la fuente del contenido (como el precio) en la barra lateral derecha.

    Una vez que he organizado el diseño de mis publicaciones, puedo decidir exactamente qué publicaciones mostrar y en qué orden. Usando Gutenberg y Toolset puedo seleccionar:

    • El orden en que visualizo publicaciones como la publicación de blog más reciente;
    • El número de publicaciones que muestro;
    • Si quiero un filtro en mis publicaciones, por ejemplo, mostrar solo los tours que cuestan menos de un cierto monto.

    Agregué un filtro para mostrar solo los tours destacados. Como parte de mis campos personalizados, creé un campo para «Tours destacados» en el que puede hacer clic para cada publicación en el back-end.

    Puedo usar Gutenberg y Toolset para crear un filtro usando la barra lateral derecha que le dice a mi lista de contenido que solo muestre las publicaciones de los tours que se muestran.

    Observe cómo puedo personalizar completamente mis listas de publicaciones en Gutenberg sin usar ningún tipo de codificación. Incluso los diseñadores sin experiencia en programación podrán agregar una lista de publicaciones a su sitio web.

    3. Cree una plantilla para su contenido

    Una plantilla es su modelo para sus tipos de publicaciones que proporciona una estructura a cada una de sus publicaciones. Por ejemplo, he creado una plantilla para mis tipos de publicaciones de tours, lo que significa que cada publicación de tour tendrá exactamente la misma estructura cuando la mire en el front-end.

    Como puede ver, ambas publicaciones son de la misma plantilla. Lo sabes porque cada publicación tiene el mismo diseño, con el contenido siguiendo la misma estructura.

    Todo lo que necesitaba hacer para crear mi plantilla en Gutenberg era insertar mis bloques y agregar contenido dinámico. A medida que agrego el contenido, puedo usar el menú desplegable en la parte superior de la página para alternar entre las publicaciones y ver cómo se ve la plantilla con diferentes contenidos.

    4. Crear un buscador personalizado

    Una de las características más importantes en un sitio web personalizado es un buscador.

    Si está diseñando un sitio web de directorio que vende artículos, por ejemplo, querrá que sea lo más fácil posible para los clientes potenciales encontrar sus productos. La mejor manera es con una búsqueda que contenga filtros para que puedan reducir los resultados y encontrar exactamente lo que están buscando.

    A continuación puede ver el buscador personalizado que creé usando Gutenberg y Toolset para mis tours. Contiene una serie de filtros. Uno de los filtros es mostrar solo esos recorridos con una calificación de 3-5 estrellas.

    Crear un buscador personalizado consta de dos pasos. Primero, creando el buscador (que puedes ver arriba) y segundo, diseñando los resultados.

    Creé el buscador usando el bloque Toolset View en una nueva página. A continuación se encuentran las opciones para mejorar el bloque. Puedo seleccionar la opción de búsqueda, agregar una clasificación frontal para que el usuario pueda ordenar los resultados cuando aparezcan (por ejemplo, el precio más bajo al más alto) y la paginación para dividir el contenido en páginas.

    Una vez que agregue el bloque, puedo proceder a agregar filtros adicionales, como el precio máximo. También puedo incluir un mapa y marcadores para mostrar los resultados. Una vez más, gracias a Gutenberg y sus extensiones, no necesito usar codificación. Solo selecciono los bloques y ajusto las opciones en la barra lateral derecha.

    Para los resultados, agregué bloques como lo hice para la plantilla y la lista personalizada de contenido.

    Y así, tengo una búsqueda personalizada para mis tours. Ahora puedo hacer búsquedas usando los filtros en el front-end.

    5. Crear un «Archive» de publicaciones similares

    Un «archive» facilita a los usuarios encontrar todas las publicaciones que ha publicado. Si desea un «archive» con campos estándar como un encabezado y el contenido, entonces un generador de páginas como Elementor es una gran opción. Sin embargo, si desea incluir campos personalizados con contenido dinámico, deberá utilizar Gutenberg,

    Construí un «archive» para todos mis tours en mi sitio web de viajes. Cuando alguien hace clic en el «archive», verá todos los tours que he creado. Puedes crear un tour para cualquiera de tus publicaciones.

    Al igual que con la lista personalizada de contenido, puedo agregar los bloques para el contenido y organizar las publicaciones como yo quiera.

    También puedo diseñar los bloques cambiando el color del texto, agregando un relleno / margen, agregando el color de fondo y mucho más.

    No necesita ser un desarrollador profesional para crear sitios web profesionales

    Ahora que ha visto cómo incluso un desarrollador principiante puede crear sitios web personalizados completos, es hora de que lo pruebe usted mismo. Aquí hay algunos tutoriales y documentación que vale la pena revisar:

    • Si eres nuevo en Gutenberg, Colorlib ofrece un buen tutorial de Gutenberg (inglés) que te mostrará cómo puedes crear bloques.
    • El plugin que utilicé con Gutenberg, Toolset, ofrece un curso de capacitación (inglés) sobre cómo puedes usar las dos herramientas para crear sitios web de directorios de WordPress. Es una excelente manera de comprender exactamente qué características puede crear y cómo para cualquier tipo de sitio web.
    • Para mantenerse al día con cualquier cambio en Gutenberg, también vale la pena echarle un vistazo al manual oficial del editor de bloques (inglés) de WordPress.

    Gutenberg todavía está en su infancia y está lejos del producto terminado. Pero eso no significa que no pueda revolucionar la forma de construir sitios web porfesionales. Si aprovecha su interfaz de usuario visual y sus plugins bloques, podrá crear sitios web personalizados que nunca antes pensó que fueran posibles.

    Fuente: Artículo original en inglés.

    Share on facebook
    Facebook
    Share on twitter
    Twitter
    Share on linkedin
    LinkedIn
    Share on whatsapp
    WhatsApp
    Share on facebook
    Share on twitter
    Share on linkedin
    Share on whatsapp
    0 0 voto
    Calificar artículo
    Suscribirme
    Notificarme
    guest
    0 Comentarios
    Comentarios en línea
    Ver todos los comentarios
    Índice del artículo
      Add a header to begin generating the table of contents
      Ir arriba

      FAQ's

      Si aún tiene dudas, lo invitamos a revisar nuestras preguntas frecuentes sobre nuestros servicios.

      Diseño Web & Desarrollo

      ¿No encuentra la respuesta que busca para su sitio web? ¡Compartimos algunas de nuestras preguntas más frecuentes para ayudarlo!

      En nuestra agencia seguimos el mismo proceso central de diseño web sin importar el tamaño del proyecto realizado.

      • Paso uno: nos dirá lo que tiene en mente. Elija un sitio web que desee que repliquemos o enumere las características clave que le gustaría tener.
      • Paso dos: redactaremos una estructura alámbrica para poder acordar el diseño de su sitio web antes de que se escriba una sola línea de código.
      • Paso tres: Después de que apruebe el diseño, comenzaremos a trabajar en el diseño real y lo puliremos hasta que esté satisfecho.
      • Paso cuatro: Si hay características personalizadas, lo probaremos durante al menos una semana para asegurarnos de que no haya errores que hagan que se inicie.
      • Paso cinco: Lanzaremos el sitio web en aproximadamente un mes (dependiendo del proyecto) después de la primera reunión, y continuaremos monitoreando y mejorando su desempeño (pero solo si así lo desea).

      Los costos de un sitio web totalmente personalizado varían según las especificaciones. Como guía, la mayoría de los proyectos personalizados de diseño y construcción web comienzan desde Bs. 700. Sin embargo, siempre tratamos de acomodar su presupuesto (si es posible). ¿Por qué no completa nuestro formulario y podemos conversar sobre sus requisitos?

      Absolutamente. Verá un prototipo de diseño completo que también incluye diseños móviles, además tendrá la oportunidad de obtener una vista previa del diseño propuesto antes de que el sitio entre en desarrollo. ¡Solo comenzamos la etapa de desarrollo una vez que esté 100% satisfecho con la apariencia del diseño!

      Los cuatro pasos fáciles que proporcionamos a continuación lo guiarán en la dirección de un sitio web profesionalmente diseñado, desarrollado y comercializado.

      • Paso uno: Registro de nombre de dominio (URL): esta es la dirección que las personas usarán para acceder a su sitio web. Una vez que haya determinado que la URL que desea utilizar está disponible, la tarifa para registrar un nombre de dominio oscila entre $ 14.00 y $ 50.00 por año. Esto necesita ser renovado cada año.
      • Paso dos: Diseño del sitio web: aquí es donde se determina y crea el aspecto y el contenido del sitio web.
      • Paso tres: Hospede su sitio web en un servidor web: aquí es básicamente donde paga por el espacio en un servidor que siempre está conectado a Internet. El precio variará, dependiendo de la cantidad de espacio en disco que tenga y la conexión a Internet.
      • Paso cuatro: ¡comercialización! – Debería pensar en la comercialización de su sitio web mientras se está diseñando. El contenido del sitio debe reflejar los términos de búsqueda si desea que su sitio aparezca en los motores de búsqueda.

      No se preocupe en Creativa.dev, todo se explica de manera fácil. Una vez que comencemos a diseñar un sitio web, investigaremos sus requisitos, le asesoraremos sobre lo que requerimos del cliente y luego le describiremos ideas, alternativas y plazos.

      Una vez que comencemos a diseñar, puede probar todo el trabajo a través de nuestra área de administración de proyectos en línea donde se mantiene actualizado con el flujo de trabajo actual. Siempre le proporcionaremos dos diseños de sitios web para elegir. Luego puede modificar el diseño elegido y una vez que haya cerrado la sesión del diseño, comenzaremos a convertirlo en un sitio web que funcione.

      Lamentablemente no. Si el cliente no se ajusta bien, no se citará la oportunidad. El diseño de un nuevo sitio web es un gran esfuerzo, por lo que el diseñador del sitio web y su cliente necesitan tener sinergias para que el proyecto se inicie con éxito. Lo mismo es cierto para las personalizaciones de temas existentes. Si no creemos que encajamos bien o que WordPress no encaja bien, se lo diremos rápidamente.

      Todo el proceso puede tomar entre 4 y 12 semanas. Realmente depende de cuántas páginas necesite, especialmente cuán profunda debe ser la funcionalidad.

      Siempre tiene plena propiedad sobre sus diseños y sitio web. Aunque odiamos ver que suceda, puede mover su sitio web a una empresa externa. Dado que su sitio web está construido con WordPress, puede transferirlo a casi cualquier proveedor de alojamiento web.

      ¡Sí! Somos excelentes para comunicarnos por Internet, correo electrónico y teléfono, y nuestros clientes provienen de toda Bolivia, Estados Unidos y del mundo entero.

      ¡Será mejor que lo creas! El móvil es clave en 2020. Nuestros diseños web son totalmente responsivos, lo que significa que ahora son compatibles con dispositivos móviles y tabletas, lo que garantiza que se vean bien en cualquier tamaño de pantalla que se use para ver su sitio web.

      Muchos procesos entran en la producción de un sitio web, en general, si todos estos procesos se ejecutan correctamente, producirá un sitio web que trabajará con usted para mejorar las ventas, el marketing y la imagen de su negocio. Esto se logra con un excelente diseño del sitio web, navegación del usuario y optimización del motor de búsqueda del sitio web.

      Básicamente, debe considerar qué es lo que USTED está buscando al tener un sitio web. Si está buscando un sitio web de estilo folleto que haga notar su negocio, nuestra agencia ha diseñado cientos de sitios web así.

      Branding & Diseño Gráfico

      ¿Quiere un logotipo, una ilustración o un diseño pero no puede encontrar la respuesta que está buscando? Eche un vistazo a nuestras preguntas frecuentes.

      Nuestros pasos son simples como:

      • Paso uno: Compartirá su historia con nosotros: su visión, quién compra sus productos y qué hace que su negocio sea diferente.
      • Paso dos: investigaremos su mercado y haremos una lluvia de ideas hasta que tengamos los mensajes clave de su marca y los perfiles de clientes objetivo.
      • Paso tres: según los mensajes de la marca, nuestros diseñadores crearán su kit de marca (esto incluye el logotipo, las fuentes y la combinación de colores).
      • Paso cuatro: presentaremos al menos cuatro opciones de diseño, tomaremos sus comentarios y las revisaremos hasta que esté satisfecho.
      • Paso cinco: Finalizaremos el diseño y enviaremos las plantillas que puede usar para promocionar su marca, todo dentro de un mes después de nuestra primera reunión.

      El diseño de su logotipo es la imagen de su empresa, el rostro público que constituye el núcleo de cualquier identidad de marca corporativa exitosa. La calidad y la profesionalidad del diseño de su logotipo tienen un efecto directo en la forma en que se percibe su organización.

      Un logotipo hábilmente diseñado puede convertirse en un activo extremadamente valioso que distingue los productos y servicios de su empresa de la competencia. Una imagen corporativa profesional, anclada con un diseño de logotipo de alta calidad consolidará el reconocimiento de la marca y forjará su nicho en el mercado.

      Sí, esto es exactamente lo que hacemos. Brindamos servicios de diseño de logotipos personalizados basados ​​en el perfil de su empresa, ideas de diseño y preferencias de estilo. Podemos crear un logotipo personalizado basado en su idea y / o proporcionar nuestros propios conceptos únicos.

      Hay una gran diferencia entre una imagen corporativa y una ilustración. Las imágenes corporativas son muy simples, lo que las hace únicas, memorables y altamente reconocibles desde cualquier distancia y en cualquier tamaño. Las ilustraciones tienden a estar en un lado pesado de detalles, con multitud de colores, sombras y detalles de imagen.

      Las ilustraciones son generalmente una obra de arte muy complicada que pierde su calidad cuando se reduce su tamaño. Las imágenes muy ocupadas como estas son difíciles de leer y reconocer.

      Su logo debe:

      • Refleja los valores de marca de tu producto o servicio
      • Diferenciarte de tus competidores
      • Ser estéticamente agradable
      • Obtenga reconocimiento rápidamente
      • Sé único y construido desde cero solo para ti
      • Impulsa tus ventas

      Durante nuestra reunión inicial de logotipos, primero comenzamos discutiendo las ideas del cliente, el mercado objetivo y los usos de este logotipo. Luego solicitamos muestras de logotipos existentes que le gusten o no le gusten al cliente para tener una idea de su gusto.

      A veces el cliente ya tiene un concepto de diseño en mente. Otras veces, no tienen idea de lo que quieren. De cualquier manera, nos aseguramos de haber recopilado suficiente información antes de comenzar a trabajar.

      Nuestro servicio de diseño de logotipos es muy sencillo. Si desea ver conceptos adicionales después de nuestras tres ideas iniciales o si necesita un par de diseños de logotipos para varias compañías, nuestro servicio puede tener un precio según sus necesidades.

      Muchos de nuestros clientes no están seguros de lo que quieren o de lo que causará mejores impresiones. Danos tanta información como puedas sobre lo que te gusta en el formulario de pedido. O bien, puede decirnos "que lo hagamos" y hacemos nuestras mejores estimaciones de lo que puede necesitar.

      En la mayoría de los casos, nos llevaría de 5 a 10 días hábiles enviarle la primera fase del diseño del logotipo de borrador. Si no recibe noticias nuestras dentro de este período, contáctenos.

      Una vez que se completa la primera fase, esperamos comentarios. Luego usaremos estos comentarios para llegar a la segunda fase del diseño del logotipo (si es necesario). Por lo general, nuestros clientes están satisfechos con los diseños iniciales. Muchos obtienen su logotipo final en esta fase.

      A través del proceso de admisión, intentamos alinearnos con la dirección deseada para el logotipo y ofrecer conceptos únicos y de calidad para su consideración.

      Esperamos que haya un concepto de la presentación que al menos le guste lo suficiente como para avanzar a través de nuestro proceso de revisión para llegar exactamente a donde lo desea. Creativa.dev ofrece revisiones ilimitadas a su concepto seleccionado como una representación de nuestro compromiso de entregar un diseño final que le encante.

      Tu.

      Marketing Digital

      ¿Estás listo para impulsar tu negocio pero no encuentras la respuesta que estás buscando? Echa un comentario a nuestras preguntas frecuentes.

      Brindamos asistencia con el SEO en la página, incluidas las meta descripciones, el análisis de palabras clave, la creación de backlinks y el SEO fuera de la página, como las estrategias de creación de enlaces.

      El contenido debe estar escrito y formado de tal manera que los rastreadores web pueden analizarlo y convertirlo en resultados de motores de búsqueda. Un buen diseño implica un código de carga rápida y un diseño de página claro que ayuda a que su página funcione mejor. Esto, a su vez, aumenta aún más su clasificación.

      Si bien no hay garantías de alcanzar un cierto ranking, la inversión que realiza para optimizar su contenido nunca es una pérdida de tiempo. Un buen posicionamiento web para descubrir su sitio web. No te preocupes, podemos ayudarte.

      El rendimiento de una estrategia PPC se reduce a elegir las palabras clave adecuadas. ¡No desea pagar por los clics de clientes potenciales no calificados! Podemos ayudarlo a desarrollar una estrategia que maximice su inversión publicitaria en palabras clave que traigan a sus personas objetivo a su sitio

      Absolutamente Asistiremos con la investigación necesaria para identificar frases de palabras clave de cola corta y larga que arrojarán resultados.

      Si aún no ha estado usando PPC, nos complace ayudarlo a comenzar. Si ya lo está utilizando, podemos proporcionarle información sobre cómo maximizar su eficiencia.

      A menudo, la oferta de palabras clave demasiado amplia o poco relevante para su audiencia es la razón por la que gasta demasiado. Podemos ayudarlo a elegir las palabras clave óptimas para sus estrategias.

      Cuando se hace bien, el marketing en redes sociales puede generar mucho más tráfico en su sitio web. Sin embargo, las personas que visitan su sitio web a través de las redes sociales a menudo tienen expectativas diferentes a las de la búsqueda de Google. Podemos ayudarlo a mapear sus canales digitales para optimizar las conversaciones.

      Solo comuníquese con nosotros con su presupuesto público, su lista actual de palabras clave y sus objetivos de clics, ¡y lo analizaremos!