Webflow avanzado y CMS | Greg Rog | Skillshare
Menú
Buscar

Velocidad de reproducción


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Webflow avanzado y CMS

teacher avatar Greg Rog, Always learning

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Introducción al curso

      2:45

    • 2.

      Proyecto de Skillshare

      1:41

    • 3.

      Configuración de Styleguide

      9:45

    • 4.

      tipografía

      9:56

    • 5.

      Trabajar con el color

      10:32

    • 6.

      Componentes

      13:32

    • 7.

      Resumen del proyecto

      6:19

    • 8.

      Primera colección

      8:57

    • 9.

      Configuración de la colección

      18:08

    • 10.

      Menú del blog

      6:32

    • 11.

      Colecciones de menú

      8:43

    • 12.

      Artículo destacado

      13:17

    • 13.

      Artículos recientes

      8:17

    • 14.

      Estilos de cartas

      10:02

    • 15.

      Secciones de página principal

      9:13

    • 16.

      Secciones de página principal parte 2

      7:54

    • 17.

      Página de publicaciones

      7:49

    • 18.

      Página de categorías

      3:49

    • 19.

      Página Entrada de blog

      11:09

    • 20.

      Apartado de página

      6:52

    • 21.

      Configuración de búsqueda

      10:44

    • 22.

      Búsqueda avanzada

      12:36

    • 23.

      Dominio personalizado

      8:51

    • 24.

      Estados vacos

      5:31

    • 25.

      Editor de sitio web

      8:59

    • 26.

      Consejos de SEO parte 1

      10:34

    • 27.

      Consejos de SEO parte 2 2

      7:40

    • 28.

      Metadatos de sitio

      7:22

    • 29.

      Uso de integraciones

      9:57

    • 30.

      Nos vemos

      0:45

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

765

Estudiantes

1

Proyectos

Acerca de esta clase

Webflow es una gran herramienta para diseñar y construir sitios de la web. Esto hace que los diseñadores puedan crear estáticos, así como sitios dinámicos y basados en bases de datos. Webflow cambia la manera que diseñamos y desarrollamos sitios web permitiendo trabajar rápidamente Creemos que merece el título "el siguiente WordPress" debido a lo mucho que hay que otras herramientas de diseño En este curso, aprenderás a utilizar la webflow para diseñar tu propio sitio web con CMS y conocer las funciones más avanzadas

Esto es lo que aprenderás en el curso:

  • Técnicas avanzadas de flujo web
  • CMS, colecciones y trabajar con editor
  • Sistema completo de bloggin en Webflow
  • Trabajar con la guía de estilo
  • Motor de búsqueda basado en la búsqueda elástica
  • Hosting en Web, dominios, SEO

CMS en Webflow

Con el CMS, tienes la habilidad de definir una base y una estructura correspondiente en Webflow a través de su módulo intuitivo En este curso, exploraremos cómo funciona el CMS creando colecciones y utilizando datos dinámicos en las páginas de Webflow, así como en los sitios basados en colecciones Definiremos cada colección para que podamos acceder fácilmente y añadir artículos después.

Blog y búsqueda dinámico

En la segunda parte de nuestro curso Webflow, crearemos un blog con contenido dinámico y luego lo integremos en un sitio estático existente, que preparamos en el primer curso. Aprenderás todo lo que necesitas saber sobre cómo funciona el CMS y cómo utilizar sus funciones más avanzadas. Este curso te proporcionará una variedad de lecciones que te permitirá mejorar la funcionalidad de tu sitio web y incorporar la lógica empresarial sin tener que utilizar los idiomas de servidores. Construiremos un motor de búsqueda basado en index-based es el mejor sistema para buscar y volver a resultados.

Editor y CMS

Las funciones avanzadas del editor de Webflow Este es un CMS listo De manera ¡prepararemos añadir nuevas publicaciones de blog autor y categorías!

Integraciones y SEO

También crearemos varias integraciones útiles basadas en soluciones sin código como Zapier o Integromat. Hoy puedes construir funciones avanzadas antes que se reservados para el fondo, y puedes hacerlo sin una sola línea de código. Además, explicaré las mejores prácticas en el contexto del SEO

Conoce a tu profesor(a)

Teacher Profile Image

Greg Rog

Always learning

Profesor(a)
Level: Intermediate

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. Introducción al curso: Al curso avanzado de Webflow. Este curso te presentará el mundo de las páginas dinámicas creadas con la ayuda de Webflow, así como sus características más avanzadas. Probablemente ya puedas predecir el curso completo de la web básica. Esta es su continuación. Ampliaremos las posibilidades de los sitios web previamente creados para trabajar con contenido dinámico desde el módulo CMS. Esta vez, aprenderás a crear sitios web complejos como bloques y páginas de productos, y sitios web que pueden ser editados por tu cliente directamente en el navegador. En el curso, veremos algunos aspectos avanzados importantes de trabajar en Webflow. Por ahora, nuestro proyecto contiene sólo una página, pero crearemos una guía de estilo para generar rápidamente nuevas páginas de nuestro sitio web. Posteriormente, se puede iterar sobre esta idea para crear sistemas de diseño aún más avanzados. En segundo lugar, nos centraremos en el CMS. El flujo de trabajo permite crear estructuras de datos complejas que se ejecutan como base de datos. En primer lugar, definiremos las estructuras para el blog. El flujo de trabajo generará automáticamente una serie de páginas para nosotros, donde el uso de datos dinámicos se reduce a unos pocos clics. Posteriormente, prepararemos todos los sitios web para utilizar tal estructura de datos modelo, crear un sistema completo de blogueo. Por último, te mostraré cómo utilizar CMS para administrar el contenido del sitio web desde el nivel de navegador el cual tu cliente podrá utilizar y agregar contenido dinámico que añada nuevas entradas. Podemos hacerlo todo sin codificar. Además, he encontrado una serie de lecciones que te permitirán agregar lógica empresarial a tu sitio web, pero sin necesidad de utilizar varios idiomas, se construirá un motor de búsqueda basado en la búsqueda elástica, el mejor abierto sistema de indexación y devolución de resultados. Y también vamos a crear una serie de integración útil se basa en unas soluciones sin código como Zapier o integument. actualidad puedes construir funciones avanzadas previamente reservadas para desarrolladores back-end y front-end. Y puedes hacerlo sin una sola línea de código. Entonces, ¿quién se beneficiará con este curso? En primer lugar, aquellos de ustedes que ya conocen un poco de Webflow, si pueden construir capa, pero quieren usar CMS y datos dinámicos así como un enfoque un poco más sistemático para crear sitios web en Webflow, creo que esto curso es para ti. Este material requiere de una base base de Webflow. Por lo que sí te recomiendo que participes primero en mi curso básico de Webflow, este curso es una gran manera de crear tu sitio web, NDP de tu producto u ofrecer a tus clientes phages dinámicos y CMS combinados con herramientas sin código, que todos llevarán tus proyectos de Webflow al siguiente nivel. Vamos a sumergirnos en las primeras lecciones. 2. Proyecto de Skillshare: Una vez más, gracias por tomar mi clase de Skillshare. Esta es la segunda clase en Skillshare que tengo en Webflow. El primero es bastante básico. No obstante, si te falta habilidades básicas, te animo encarecidamente a revisar el curso básico de Webflow y luego proceder a este material. Es muy importante que trabajes conmigo en el curso. Y tengo dos propuestas para crear tu propio proyecto de curso. El primero apenas está siguiendo. Todo lo que necesitas hacer es simplemente ver los videos y luego repetir las acciones que ves en el video. En Webflow, creo que te dará una comprensión bastante sólida de cómo crear un sitio web como este con CMS y guía de estilo y muchas, muchas características más avanzadas. Esta es una gran manera de practicar tus habilidades. Y además, te estoy dando algunos de los recursos que puedes usar y solo los vinculo en el comentario a esta lección. Esto te permitirá crear un bonito sitio web que sea dinámico. Y sugiero que se presente como asignación de curso. No obstante, si quieres, o habilidades al siguiente nivel, te animo a probar y crear tu propio proyecto usando las mismas habilidades que aprenderás aquí. Por ejemplo, crear una guía de estilo y luego trabajar con CMS y también renunciar a algunas integraciones, tal vez con Zapier o integra Ahmad teniendo una tarea como esta, un proyecto práctico puede ser para un amigo tuyo o tal vez para alguien de tu familia, sería realmente llevar las habilidades al siguiente nivel. Y les animo y recomiendo encarecidamente que hagan eso. Y obviamente, por favor acaba de presentarse como asignación de curso. Estaría realmente feliz de ver lo que has hecho con Webflow. Muchas gracias, y nos vemos en la siguiente lección. 3. Configuración de Styleguide: Hola chicos y bienvenidos a la siguiente lección de que este es el inicio de nuestras lecciones de guía de estilo. Te voy a mostrar cómo crear una guía de estilo para que podamos reutilizar fácilmente elementos y componentes a través de diferentes páginas de nuestro sitio web. Y esto es súper útil, sobre todo si estás creando un sitio web de varias páginas o tienes alguna guía de marca específica y libro de marcas, y quieres mantenerte consistente con los componentes, colores, tipografía, para que creemos una página separada con la guía de estilo. Y desde esta página podemos definir componentes que más adelante podremos utilizar en diferentes páginas de nuestro sitio web. Y esto también puede ser un punto de partida para todo el sistema de diseño que puedes crear para tus proyectos. Este puede ser un sistema de diseño para una marca y los diferentes proyectos que vas a crear para esta marca. Por ejemplo, diferentes páginas de aterrizaje. Pero también se puede pensar en un marco para usted mismo para trabajar en Webflow que le permitirá crear proyectos fácilmente y reutilizar algunas estructuras y componentes comunes. Esto es algo que dejaré fuera del alcance de este curso porque este es un tema un poco más avanzado, creando un sistema de diseño. Pero para que lo sepas, tengo un marco de diseño propio. Se llama system flow dot co. Y lo uso con cada nueva página web que creo. Y más adelante puedes checkout system flow dot code para ver los ejemplos y tutoriales gratuitos sobre cómo lo hago. Por ahora, tenemos la guía de estilo, y esta es la sencilla página que he creado en el curso anterior. Ahora sólo contiene un componente. Esto es sap many block y lo hemos creado para que podamos reutilizarlo en el sub dinero. Pero este es un gran comienzo para nuestra guía de estilo. Entonces estilo que debería tener su página separada. Y en esta página vamos a organizar los componentes, pero no sólo los componentes, porque también queremos crear algunos tokens de diseño que puedas usar más adelante. Y esos tokens de diseño podrían ser tipografía. Por lo que todos los encabezados y navegación, así como los colores y los demás elementos que usaremos en diversas páginas. Esta es exactamente la razón por la que quiero organizar un poco mejor esta página de guía de estilo para que tenga un componente de navegación. Déjame añadir la barra de navegación. Y este componente de navegación contendrá la información en los enlaces que se desplazarán por esta página. Y déjame encore diferentes secciones como tipografía y colores y componentes. Por ahora, voy a añadir una imagen aquí y cambiar el logotipo. Y luego déjame ir a todo este contenedor. Voy a añadir otro div buscarlo y poner los elementos de la marca dentro para que pueda tener los elementos de la marca y suficiente dinero dentro del bloque. Y esta es una práctica común que uso con barra de navegación porque ahora esta depuración, puedo renombrarlo a menú y usar display flex para que lo centre tanto vertical como horizontalmente. Ahora reorganicemos los elementos para que tenga logo al lado izquierdo. Y para sistemas de diseño más complejos y guías de estilo, es posible que desee utilizar no menú horizontal, sino menú vertical. Eso es El lado izquierdo o derecho de tu página de guía de estilo. Pero por ahora, solo voy a usar este menú horizontal y también cambiar el posicionamiento de elementos para la clase base que se va a arreglar para que cuando desplace la página, el menú se mantenga en su lugar y esté fijado a la parte superior de mi sitio web. Y luego voy a crear otra sección, solo una sección de título para mi guía de estilo para que esté bien organizada. Recuerda que vas a volver a visitar escalonados de vez en cuando así como a tu cliente probablemente, o tal vez al equipo de diseño que también está usando la guía de estilo o sistema de diseño que has creado. Por lo que siempre es realmente agradable también. Organízalo en algún tipo de estructura y agrega algunos subtítulos y secciones adicionales contenedores para que esté bien organizado. Puedes navegar por esta guía de teselas, sobre todo cuando evoluciona hacia algo más grande, como el sistema de diseño, esto sería un salvavidas. Entonces lo que estoy haciendo en este momento, he creado la sección principal y luego dentro tengo contenedor. Dentro de esto, voy a crear otro d-block técnico, y eso sería un héroe guía de estilo. Y en este div buscar otra estructura con una clase de textos. Sólo voy a usar envoltorio de texto. Y aquí dentro voy a usar un encabezamiento y también un párrafo para que pueda tener sólo una descripción de lo que hay dentro de esta guía de estilo. Permítanme usar algún margen aquí. Y este héroe guía de estilo tendría fondo blanco así como algo de sombra. Lo voy a agregar en un segundo. Añadamos el radio de borde también y algún relleno dentro de este contenedor para posicionar bien el encabezado y la descripción. Eso es un margen de 44.5 píxeles. Ahora vamos a seleccionar el contenedor y cambiar su tamaño para que el ancho del elemento sea un poco más grande. Déjenme tener 12 AT, para el ancho máximo de este contenedor. Y quiero posicionar a centrar elementos de posición dentro del envoltorio de texto. Entonces vamos a seleccionar el envoltorio de texto y para el espaciado de los relatores de textos, este pequeño icono al lado derecho que te permitirá centrar los elementos dentro de una etiqueta div. Entonces vamos a dar click en él para que tengamos márgenes de auto a la izquierda y a la derecha. Y ahora si cambiamos el ancho a, digamos que el 50 por ciento lo tendrá centrado. Alineemos el centro de texto y cambiemos el nombre a guía de estilo así como la descripción para especie de establecer el objetivo de nuestra guía de estilo. Pero esta es una estructura típica que usaría aquí, y esto es bastante versátil. Puedes copiarlo y pegarlo donde quieras y tienes elementos muy bien posicionados. Ahora agreguemos algo de sombra. Eso va a ser 20 distancia y 30 Blair. Pero cambiemos el color para que sea tal vez cinco o 6% opaco. Y ahora se ve bastante bien. Ese es el comienzo de nuestra guía de estilo y la estructura que tenemos con la sección de héroe guía de estilo. Eso va a ser bastante único, pero tendremos tales estructuras para que podamos copiarlas y pegarlas por todo el lugar. Yo sólo voy a quitar la clase por ahora. La estructura base sería sección Guía de Estilo. Y sólo recuerda no aplicar muchos estilos a esta sección de tigres en sí, más bien a sus contenedores y miradas profundas por dentro para que podamos copiar fácilmente en cambiar el nombre de las clases que tenemos para esta sección nombres. Y ahora vamos a crear el envoltorio de texto dentro. Voy a moverme rumbo aquí y hacerlo h, h2. Esa será una descripción de la primera sección para nuestra guía de estilo. Entonces, por ejemplo, vamos a empezar probablemente con tipografía o colores. Y vamos a tener el nombre de esta sección aquí. Entonces vamos a renombrarlo a tipografía y también tener alguna descripción. Por lo que la tipografía puede ayudar a crear jerarquías claras y organizar la información y, y guiar a los usuarios. Por lo que tenemos un poco de información extra en la parte superior. Y también en el menú, podemos empezar a mapear estas secciones en particular para que podamos vincularlo con un encore. Seleccionemos la sección de guía de estilo, presione D en el teclado para ir a la configuración de la sección. Y como identificación, voy a usar la tipografía. Y ahora vamos a asegurarnos desde el menú también vinculé a sección de tipografía. Vamos a la configuración y elegimos la sección a la que queremos desplazarnos cuando el usuario hace clic en este elemento del menú. El segundo apartado puede ser sobre el color. Y el tercero, voy a renombrarlo por componentes. Además, puedes crear muchas más secciones. Como dije, cuando esto evolucione, podrías estar dispuesto a simplemente moverlo al lado izquierdo, pero por ahora está bien mantenerse en la cima. Voy a usar secciones, y eso es más o menos para el objetivo más simple que voy a crear cuatro para esta página. Ahora en el contenedor, también voy a crear un elemento más y eso sería subsección, se podría decir. Entonces eso va a ser un rubro H3, déjame darle una guía de estilo de nombre. Eso va a ser h etiqueta congelada por ejemplo. Y lo vamos a mover a este contenedor para que se quede aquí. Y también cambiemos un poco el estilo. Necesitamos cambiar las propiedades de la fuente. Voy a usar DM Sans. Usemos 400 Normal aquí y cambiemos el tamaño a 16 píxeles. Pero voy a crear una altura de línea bastante grande para esto. Va a ser una línea, pero necesito esta caja más grande para poder aplicar algo de decoración por ahora Vamos a capitalizarla primero. Y también quiero crear espaciado entre letras de dos píxeles. Y ahora estoy usando esta caja más grande con el fin de aplicar un borde, fondo de borde. Por lo que lo puse a un píxel borde inferior y borde sólido con este color azul medianoche. Ahora se aplica al subrubro. Entonces tengo algún tipo de subsección como aquí. Y para la tipografía, por ejemplo, puedo utilizarla para encabezamientos. X sub sección sería para texto cuerpo. Siguiente uno para subtítulos. Creo que se le da el punto. Por lo que ahora es fácil usar esta guía de estilo secciones para simplemente venir en C y Comando V, copiar y pegar y crear múltiples secciones diferentes de este objetivo. Lo vamos a hacer en la siguiente lección. Nos vemos ahí. 4. tipografía: Hola chicos, bienvenidos a la siguiente lección y vamos a crear encabezamientos primero. Y yo sólo traté de que suene emocionante, pero en realidad no lo es. Vamos a crear el primer encabezado, copiarlo y pegarlo un par de veces. Voy a crear seis encabezamientos diferentes. Puedes crear solo gratis y, o cuatro o cinco, lo que tengas en el diseño. Ahora cambiemos los tipos de encabezamientos hasta los cinco años de edad. Y además voy a copiar y pegar una vez más y crea este rubro especial. No voy a usar H6, pero en cambio, déjame crear un H2 especial que voy a nombrar encabezamiento de sección. Y esto va a ser como un extra h2 rumbo con una clase extra que voy a usar a lo largo de mi maquetación. Ahora cambiemos este cronometraje para los encabezamientos. Y para hacerlo, seleccionemos el primero y vayamos al selector y seleccionemos el selector de etiquetas HTML. Eso sería todo el rumbo H1. Por lo que queremos que todos los encabezamientos H1 se vean más o menos iguales. Y lo que queremos cambiar aquí es la configuración de Tipografía. Por lo que tenemos pantalla de Sarah y 400 normales 5461, porque en consecuencia al tamaño y la altura de línea, también queremos establecer el margen inferior a 10 píxeles y tal vez cambiar el margen superior también. Ahora vamos a la configuración de encabezamiento H2 y tenemos que hacer lo mismo aquí. Entonces básicamente estoy consultando con el diseño. Tengo el archivo XD abierto en mi segunda pantalla y solo verifico si esos valores son correctos. Lo que necesito cambiar aquí es en ajustes de topografía que cambié la fuente a la m Serif Display. Y también vamos a aplicar por cientos de peso normal y cambiar el tamaño a 38 y la altura de línea, que será 44. Por lo que de esta manera vamos a crear una plantilla de boilerplate para todos los encabezamientos H2. Y lo voy a hacer por tener libre cambio esta corbatas teniendo, por tener cinco y el rubro especial que he creado. Ahora, otro enfoque para los encabezamientos podría ser no usar las etiquetas H1, H2, H3 y este HTML. En cambio, lo que podrías hacer es simplemente aplicar algunas clases, por ejemplo, Clase de Encabezamiento 1, rumbo a clase, tener clase gratuita. Y entonces no será necesariamente dependiente de la etiqueta que selecciones para que puedas aplicar diferentes estilos. Este es sólo otro enfoque para crear una guía de estilo con encabezados. Puedes usar esto Todos los encabezados H4 por ejemplo. O simplemente puedes crear una clase extra. Y gracias a esto, esto te da un poco más de flexibilidad en cuanto SEO porque entonces solo aplicas clase H4, pero debajo, puedes cambiarla a H5 y H6, H1 si querías que esto fuera más prominente para motores de búsqueda y para Google. Pero esto es solo una nota al margen ya que estoy cambiando estos valores porque esto es básicamente lo mismo. Solo estoy revisando el diseño. ¿ Qué tipo de valores tengo para el espaciado y la tipografía? No estoy cambiando nada más en términos de CSS. Entonces no estoy cambiando de posiciones y tamaños. Ya sabes, solo estoy manipulando con espaciado y tipografía y traté de mantenerme consistente. Con esto, las propiedades CSS solo cambiaron para el texto. Ahora este rubro especial de sección va a ser la respuesta de esta jugada para un 100 normal y luego 46 y 56. Lo voy a usar en algunas ocasiones, es un poco diferente a la H1 y H2 que tengo. Y supongo que ahora tengo todos los encabezados que necesito, al menos los que tenía en el archivo de diseño. Para que pueda seleccionar, copiar y pegar otro encabezado de guía de estilo H libre y cambiarlo en párrafos. Entonces vamos a usar un estilo para párrafo, a veces para diferentes proyectos. Yo uso diferentes estilos. Y tengo, por lo general tengo un tres como tan grande, pequeño, y mediano. Y luego puedo manipular las versiones del párrafo. Pero en este caso tenemos un diseño bastante simple y voy a usar solo un estilo de párrafo. Permítanme ajustar el margen. Voy a establecerlo a 18 píxeles margen inferior, y también cambiar el peso de la fuente a medio 500s. Y el resto de los inmuebles me voy a dejar como están porque están configurados adecuadamente para todo el documento. En el curso anterior, acabo de seleccionar el elemento body y tanto para la etiqueta de páginas antiguas, he creado un stylus con los ampersands y el tamaño y altura correctos, lo mismo que tengo en mi párrafo. Por eso ahora está bien. He retocado un poco este H guía de estilo libre margen inferior para que se vea mejor. Ahora puedo copiarlo y pegar para tener subtítulos a continuación. Y voy a tener diferentes versiones de subtítulos. Ya los tengo en mi documento para poder desplazarse por selectores y buscar subtítulos. Por lo que tengo leyendas para autor y cabecera. Empecemos con el simple título que tengo. Y puedes crear esos tipos desde cero. O si ya has creado algunos subtítulos, empates en el diseño como hicimos en el curso anterior. Simplemente voy a usar estas clases y en realidad vamos renombrar este título para que sean iguales al nombre de las clases. Por lo que hemos capturado y subtítulo pico y también autor de subtítulos. Esto es un poco diferente. Vamos a seleccionar el subtítulo 40 autor y 40 encabezado también. Entonces vamos a tener todos los subtítulos aquí dentro. Por lo que o bien puedes recolectar elementos a la página de guía de estilo o puedes crearlos desde cero y aplicar algunos estilos. Ahora vamos a tener otro encabezado guía de estilo y vamos a darle un nombre de textos de alcance. Por lo que se llega al último elemento que vamos a tener en la guía de estilo. Siguiente elemento que podemos darle estilo bastante diferente a todos los demás elementos. Página alcanzada x es súper importante para nosotros porque esta es la estructura para el contenido del artículo. Por lo que habremos llegado a elementos de texto, llegado a x perros en todos los artículos del blog. Lo que es bastante único para el elemento de texto enriquecido es que puedes presionar return adentro y tendrás este pequeño icono plus. Y lo mismo vale para el editor para las personas que acaban de leer artículos para tu blog. Y luego puedes incrustar algunos elementos, crear un menos ambito, un video o una imagen. Hagamos clic en la imagen y una imagen dentro del elemento de texto enriquecido, como puedes ver, tiene algunas opciones adicionales. Para que podamos cambiar la posición de la imagen. Podemos ajustar algunos ajustes más. Por ejemplo. Muévelo a la izquierda del texto o a la derecha. O incluso podemos ir más allá para explorar algunos ajustes básicos de tamaño y Enlace. Podemos comprobar el tamaño de la imagen, probablemente necesite algo de compresión, por ejemplo, usando la imagen opt-in primero, luego la posición está aquí. Y aparte de esta posición estándar que teníamos, también tenemos este tamaño. Por ejemplo, podemos usar Tamaño personalizado y establecerlo para que sea el 30 por ciento del ancho de la imagen original, así. Y podemos cambiar los valores de por ciento a píxeles también. También podemos agregar el enlace y todo está disponible desde el editor. Entonces para las personas que solo agregan elementos a tu colección CMS. Tan bastante cool, pero también todas las clases aquí, todas las clases de texto enriquecido están disponibles para que puedas modificar y cambiar. E incluso puedes crear esta estructura anidada de clases. Entonces, por ejemplo, estilo sólo los párrafos que están dentro del elemento de texto enriquecido. De esta manera, el contenido de tus artículos puede ser completamente diferente en cuanto a estilo, a pesar de que contiene los mismos elementos como párrafos que toda la página. Por lo que tienes un subtítulos diferentes aquí, tienes diferentes encabezados, diferentes párrafos. Y para todo el elemento de texto alcance, puedes darle un nombre de clase de, digamos artículo de bloque. Y esto es como una estructura separada dentro de nuestra estructura definida de HTML. Entonces esto es como otro documento anidado en un documento. Entonces, por ejemplo, si tienes encabezados H2 aquí y ya hemos determinado estos mosaicos, esos lazos para las partidas H2 serían heredados, ¿de acuerdo? Pero aquí está la opción de anidar este selector de encabezamiento H2 dentro del artículo de bloque. Entonces si utilizas esta función, tienes todos los encabezados H2 estilo diferente cuando están dentro del artículo de bloque. Por lo que podemos tener diferente tamaño de fuente. Por ejemplo, si lo cambiamos a 36, verá que los encabezamientos no han cambiado en el documento principal. A pesar de que estamos editando esto todos los encabezamientos H2. Pero ahora estamos cambiando esto sólo si esto está anidado en el elemento de texto enriquecido. Esto mismo podemos hacer para los párrafos. Eso es como párrafos. Y luego cuando esos se anidan dentro del artículo de bloque alcanzan textos, podemos cambiar el estilo de los párrafos lo mismo que podemos hacer para las figuras, para los subtítulos, para las imágenes. Y vamos a seleccionar todos los subtítulos de figura cuando estén anidados en artículo de bloque. Eso ha cambiado ligeramente el color. A lo mejor cambiemos el tamaño de la fuente y el peso de la fuente también. Y todo esto es independiente de la estructura de documentos que tenemos. Y este tipo de tiene sentido porque el artículo en sí es una especie de entidad diferente a nuestro documento. Entonces nosotros, podríamos querer darle estilo, por ejemplo, o todas las imágenes de manera diferente. Digamos que queremos agregar un radio de borde solo para las imágenes que están dentro de nuestros artículos de blog. Por lo que dentro del elemento de texto enriquecido y todas las demás imágenes, aunque estamos usando etiqueta HTML, mantendrán intactos y podemos peinarlos de manera diferente para nuestra interfaz de usuario, para la interfaz de usuario del sitio web. Entonces esto es todo para la tipografía. Nos vemos en la siguiente lección. 5. Trabajar con el color: Hola allá y bienvenidos a la siguiente lección. Y en este, hablemos de colores. Por lo que aquí tenemos la sección Novalink to color en nuestra guía de estilo. Esta podría ser una versión simplificada de guía de estilo, un comienzo de un sistema de diseño. Y no me lo imagino faltando colores. Entonces ahora vamos a crear otro estilo, el título y la guía de estilo, H gratis, que podamos cambiar la tipografía a color y crear colores para texto para tipografía, así como para fondo, como saben, y CSS. Contamos con propiedades separadas para arriba colores de fondo y colores de texto. Y este es un enfoque sobre cómo puedes cambiar esos colores y definirlos en Webflow que puedes usarlos fácilmente y reutilizar esas clases que crearán más adelante. Entonces aquí tenemos acciones y para fondo y color de texto, he creado secciones separadas. El asunto es crear unas clases separadas tanto para los colores de fondo como para los colores de texto. Y en esta clase de color de fondo, también definiremos el color del texto que coincida con el fondo. Este es el enfoque que suelo usar para guías de estilo simples y para las más complicadas, usualmente voy con clases separadas para todos los diferentes colores, donde tengo fondos separados y colores de texto separados. De cualquier manera, lo que voy a hacer ahora mismo es crear un bloque de color. Y esto es solo para propósitos de estilo, para la propia guía de estilo, que nuestro color se vea bien aquí y se pueda encontrar fácilmente en esta guía de azulejos. Y además, me gustaría crear la sección que contendría tanto el nombre del color, el color sí, su color de texto correspondiente. Entonces contraste color para el texto así como el valor hexadecimal. Por lo que ahora solo estoy creando este soporte para el color. Le he dado el nombre de bloque de color, esa es la clase. Y tiene algún radio fronterizo y frontera. Y voy a añadir dos libros de texto al lado izquierdo y derecho. Yo lo he hecho para ser flexbox, por lo que puedo distribuir fácilmente aquellos con algún tipo de relleno al lado izquierdo, voy a añadir el nombre del color. Y al lado derecho, habrá el valor hexadecimal del color. Entonces cuando alguien publica esta guía de estilo y simplemente navega por la web, se puede copiar fácilmente, tanto con el hex como con el nombre. Entonces este es el bloque de color. Entonces como dije, ahora mismo, lo que queremos hacer es crear clases separadas que podamos aplicar encima de cualquier cosa que deba ser, debería tener ese color en el fondo. Entonces vamos a crear otra clase y eso sería, por ejemplo, marca un color o marca uno color de fondo, bg. Pero si creamos así, va a ser una clase combo para el bloque de color. Significa que para cualquier elemento en particular que queremos aplicar esta clase, tendríamos que establecer primero la clase de bloque de color porque sería la marca 1 BG estaría anidado dentro de este bloque de color como una clase combo. Entonces eso, eso es algo que realmente no queremos. Voy a borrar esta clase. Voy a crear marca 1 BG sin esta primera clase. Y ahora puedo cambiar los colores. Entonces voy a cambiar el color de fondo. A mi color azul medianoche. Esta es marca un color para mí. Y además quiero cambiar el color del texto al color correspondiente que se aplicaría para los elementos que tiene este color de fondo de marca 1 para que tenga color de texto contrastante. Esto realmente no es necesariamente, puedes saltarte el color del texto y definirlo por separado como un separado, pero solo estoy simplificando aquí. Y ahora lo que estoy haciendo es eliminar primero esta clase, aplicar esta clase de bloque de color que he creado para border-radius y cosas como esta. Y luego puedo aplicar esto como clase combo global para poder usar la marca 1 BG encima de eso. Esta ya no es una clase combo para libro de colores, así que puedo aplicarla a lo que quiera y puedo aplicarla en la parte superior. Entonces esta es la forma en que voy a estructurar las cosas en la guía de estilo en términos de color. Y lo mismo que voy a hacer para el texto. Por lo que voy a usar marca one text como nombre de la clase para mi marca one color. Ahora puedo cambiar el color a azul medianoche a mi marca un color. Y para la convención de nomenclatura, ésta es realmente bastante simple. Si quieres crear algo más sofisticado o algo más sistemático, probablemente quieras empezar con, por ejemplo, C o color que T o texto y luego darle un nombre, por ejemplo, usa la marca 14 colores. Pero estamos creando una guía de estilo realmente simple. Creo que eso está bien por ahora. Y vas a desarrollar tu propio estilo en cuanto nombrar las clases y la convención que usarás aquí. Entonces esto es bastante sencillo, supongo, en términos de color cuando estás creando guía de estilo, normalmente voy con dos conjuntos de colores separados, uno para fondo y 14 textos. Y creo clases separadas para que pueda usar esas clases en cualquier lugar para el fondo y el texto. Ahora, para esta clase, si quieres crear marcas a BG, primero tienes que eliminar la clase, luego crear marca a BGN. Ahora voy a usar otro color del layout que tengo. Vamos a pegarlo en el fondo. Este es de color azul claro. En realidad, realmente no lo puedes ver porque es del mismo color que el fondo de esta página objetivo. Pero esta es nuestras marcas a color, bronce a fondo. Y ahora todo lo que necesito hacer es simplemente crear el color de texto apropiado para este elemento en particular. Voy a seleccionar el azul medianoche y voy a renombrar esto en tan solo un segundo para este reloj. Pero ahora tengo esta estructura para marca a BG. Tengo el color del texto así como el color de fondo. Entonces este es un enfoque para otro diferente. Simplemente puedes aplicar color de fondo por separado a la clase separada y probar puntuación de dos clases separadas. Ahora, lo que voy a hacer es usar esta estructura para crear más kilohercios. Entonces primero voy a eliminar esta clase, crear bloque de color y aplicar marca a BG. Y luego voy a copiar eso más y crear más variaciones de color, combinaciones de colores para mis colores. Eso va a ser marca 3 4 fondos o marca 3 BG. Y de nuevo, tendría que usar el color de fondo así como el color del texto aquí. Y también quiero mencionar las muestras. Entonces ahora mismo, déjame pegar el valor hexadecimal para el tercer color. Y este es este color verde claro. Y no está presente en esto empuja todavía. Entonces necesito agregarla porque quiero que todos mis colores estén presentes en estas aguas para que pueda usar una clase más adelante y aplicarla como una clase de fondo o una clase de color de texto. O simplemente puedo seleccionarlo de las muestras. Entonces démosle un nombre propio. Va a ser nombre mayúscula, letra mayúscula marca 3. Y por cierto, vamos a renombrar nuestros otros colores. Este azul medianoche debe ser nuestra marca, 1, y el color celeste debe ser marca. Para que tengamos colores mapeados a las muestras así como los tenemos en clases separadas. Esta es la solución más versátil porque puedo usar ya sea muestras o puedo usar clases. Y una vez que cambié el color en esta muestra, así que agregué este reloj, lo cambiará automáticamente a lo largo toda la web porque toda la web está usando este reloj, pero encima de eso, esta clase es utilizando también la muestra, por lo que el color cambiará en consecuencia. Ahora puedo crear más clases de textos. Entonces por ejemplo, marcas a gravar o texto libre de marca. Y puedo aplicar fácilmente este color a partir de las muestras. No tengo que copiar y pegar los valores hex. Yo quiero equivocarme así. Por lo que siempre más fácil agregar tus colores a las muestras primero y luego tal vez encima de eso, crear las clases apropiadas. Además, tengo el valor hexadecimal que se copia al lado derecho. Por lo que cuando publique la guía de estilo, puede copiar fácilmente el valor hexadecimal. Ahora, déjame acelerar las cosas, gracias a la magia del video, realmente no tengo que perder tu tiempo hasta que solo copio y pego lo mismo y hago las mismas operaciones para los otros colores. Por lo que aquí tenemos siete colores diferentes. Es realmente mucho. Por lo general uso el color primario y secundario, así que dos colores, tal vez uno más, pero he agregado una paleta de colores que se puede ver cómo se ve con los valores hex apropiados. También he agregado esos colores a mis muestras en Webflow. Y también encima de eso, tengo advertencia de error y acepto colores de estado. Por lo que en la notificación del usuario, puedo usar esta advertencia de color, BG, BG. Y entonces tenemos esas clases de textos. Tenemos color aceptar mensajes de texto y error. Por lo que puedo mantenerme consistente y agregar esos colores a diferentes estados de mi aplicación, diferente notificación para el usuario. Y esta es la paleta de colores base que usarás en tu proyecto. Y dependiendo de si quieres crear una paleta extra para colores oscuros y colores blanco y negro. Puedes hacerlo aquí. O simplemente puedes usar tu escala de color gris en muestras en lugar de esta vez que Así por lo general agregué a la guía de estilo y termino con cinco entre 510 colores, que van desde el color muy claro hasta el color muy oscuro. Podría ser blanco o negro y algunas reinas. O podría ser simplemente, ya sabes, color claro y el color oscuro y pocos in-entreweens. Por lo que ahora mismo, estoy agregando esos in-betweens así como mis colores blanco y negro sólo a las Muestras. Y a veces lo hago así. En ocasiones creo clases separadas si quiero usarlas extensamente a lo largo de mi sitio web y las agrego a la guía de estilo también. Entonces esto es todo aquí tenemos diferentes colores que podemos aplicar. Vamos a restablecer este. Y creo que nuestra estructura de color ya está lista. Tenemos todo establecido en muestras así como al menos los colores principales. Los tenemos establecidos en clases separadas. Tenemos este color negro oscuro, muy oscuro y muy blanco, de color blanco claro. Y úsalo para nuestra interfaz de usuario, tal vez algunos fondos de los elementos porque esta es solo la muestra. Y básicamente eso es, es decir, yo quería mostrarte sobre. Los colores son reduccionistas, ¿listos en la guía de estilo? Y pasemos a la siguiente lección. Gracias. 6. Componentes: Está bien, Así que parece que en la lección anterior, cometí un pequeño error. Entonces tengo esta sección escalonada en la que tenemos tanto color como tipografía de texto en. Por lo que necesito deshacerme de este elemento, cambiar el contenedor, crear y copiar personal entero en sección y tirar elementos innecesarios para que tenga dos elementos. Y aquí está la sección de colores. Aquí tenemos la sección de tipografía. Y bien, esto es lo que necesitamos porque para esta sección necesitamos darle un nombre. No será topografía, sino color aquí. Y ahora vamos a vincular esto a la sección específica. Tenemos que vincularlo al color. Y creo que estamos casi listos para crear una nueva sección. Entonces vamos a crear una copia de esto. Elimina todos los elementos de este contenedor que queremos realmente necesitamos en este momento. Y vamos a crear otra sección, esa será cuatro componentes. Entonces vamos a la sección Estándar y para el IB, vamos a cambiarlo por componentes. Y vamos a vincularlo rápidamente en un link lo en el menú. Esto va a vincular dos componentes. Aquí lo tenemos. De acuerdo, Entonces cambiamos nombres. Tenemos este rubro 2 que colocará componentes dentro y tendremos alguna información sobre lo que hacen los componentes a nuestros lados. Por lo que estos son algunos elementos básicos, bloques de construcción para nuestro sitio web, por ejemplo, botones. Entonces vamos a crear la primera sección, cuatro botones. Y si vamos a nuestra página de inicio, vamos a explorar lo que tenemos aquí. Tenemos algunos botones ahí dentro, tenemos algunas estructuras. Y si seleccionamos el elemento, en realidad se puede ver que se trata de un componente en el Webflow. Y hay algunas razones para usar componentes en web aunque. Y a veces podrías estar dispuesto a no usar componentes pero aún así poner algo en la guía de estilo, pero solo usa la clase. Por lo tanto, para los componentes, tiene todos estos campos de anulación que puede habilitar para que el usuario cambie, por ejemplo, en la vista del editor. Y se pueden realizar anulaciones a las instancias de componentes maestros. Entonces este es un concepto bastante poderoso y lo expliqué a detalle en el curso básico. Pero por otro lado, se puede pensar en los componentes como algo que es reutilizable. Y esos no necesariamente tienen que ser componentes de barra de símbolos en Webflow. Porque si echas un vistazo a esta clase de bloque de características, es lo suficientemente universal como para llevar información sobre el fondo y todas las cosas que te permitirán crear este tipo de caja, este tipo de tarjeta. Por lo que puede reutilizar fácilmente este elemento en función de la clase solamente. Por lo que realmente depende de ti crear componentes o simplemente trabajar con clases. En última instancia, si desea realizar algunos cambios en los componentes fuera del ámbito de las anulaciones que cree. Simplemente desvincula el componente y luego aplica cambios a las clases. Y aún así, si esos son cambios en CSS, se aplicará a lo largo de toda la página web. Entonces lo que estoy diciendo es que realmente no tienes que pensar en términos de Webflow, de que todo sea un componente aquí, porque puedes usar clases fácilmente. Y solo recuerda que las clases que se utilizan a lo largo toda la estructura del documento cambiarán en consecuencia o en cada una de tus páginas. Recuerda que siempre puedes agregar el componente encima de una clase. Entonces tienes la potencia de los componentes para que puedas crear anulación así como puedes anidar otros componentes dentro de este componente. Y también se puede utilizar este menú de componentes para insertar los componentes. Entonces si vas a dos componentes, tiene un icono separado en el menú en este momento en Webflow. Pero si vas a componentes, simplemente puedes hacer clic en el componente y se colocará automáticamente en tu diseño. No obstante, si quieres copiar y pegar elementos que solo están basados en clases, tendrás que encontrar este elemento, por ejemplo, este botón, y luego tienes que mandar C, copiarlo, luego basarlo en la página que quieres usarlo, para ejemplo aquí. Por lo que hay muchas ventajas diferentes de usar componentes. Pero hay una desventaja si quieres editarlo aparte de las sobreescrituras, tendrías que desvincularlo primero. Pero esto es, supongo que la única desventaja y puedes irte fácilmente con eso. Entonces aquí tenemos diferentes botones y ahora voy a crear otra sección. Y luego esta sección, Vamos a utilizar tal vez esta característica y bloques y copiar y pegar todos los bloques que tenemos en la página de inicio. Creo que esos también pueden ser elementos reutilizables. Antes de copiar y pegar esos elementos, Vamos al bloque de entidades y vamos a crear un diblock por dentro para que esos se puedan organizar perfectamente, como los colores. Vamos a darle un envoltorio de componente de clase. Y este envoltorio de componentes pronto obtendrá algunos remantes o marcas. Pero ahora podemos copiar y pegar todos los bloques de características que tenemos en nuestra página de inicio o solo un blog de funciones porque es más o menos similar, pero voy a copiarlos y pegarlos todos. Y para que tengamos este envoltorio de componentes, ahora podemos distribuir fácilmente el tamaño y los márgenes son remates entre esos elementos, sí bloques de características, y podemos usar este componente, referirnos a todos nuestros componentes también. Entonces aquí podemos aplicar algún margen a esta clase, pero también podemos crear la estructura para nuestros botones que es más o menos la misma. Así que echemos un vistazo aquí y usemos el componente de clase propiamente. Y luego pongamos un botón dentro de él. O solo copiaré y pegaré. Simplemente podemos usar al diseñador para agarrar el fondo. Voy a eliminar este y ponerlo en su propio envoltorio de componentes. Por lo que esta estructura es más legible ahora y cuando publiquemos la guía de estilo, será más fácil navegar por esos elementos. Y también lo podemos hacer con texto si quieres. Colores, bastante bonitos. lo hace el comienzo de nuestra guía de estilo, Tambiénlo hace el comienzo de nuestra guía de estilo,en última instancia crecerá de tamaño, pero por ahora, vamos a copiar y pegar otra sección. Vamos a crear el que contendrá elementos de FAQ. Y esto es otra cosa que podemos reutilizar desde nuestra página de inicio. Creo que los artículos de FAQ son un buen candidato para ir a Style Guide porque esos son con alguna animación cool y revelan algunos textos. A lo mejor estaremos usando esta estructura a lo largo de algunas otras páginas. Entonces vamos a copiar y pegar este elemento en la guía de estilo. Y mientras tanto, vale la pena notar que en esta sección de componentes, traté de usar diseño atómico. Traté de copiar y pegar átomos y moléculas. No uso toda la estructura aquí como los diseños, porque eso es demasiado para los componentes. Entonces si volvemos a la página de inicio y tenemos estructuras que son como pie de página o menú. Queremos necesariamente copiar y pegar todo el menú en componentes, se creará una sección separada. Pero a partir de este menú podemos, obviamente, crear algunas partes, algunos bits y piezas, algunos átomos y moléculas, como descomponerse o enlaces de navegación, para que las tengamos en nuestra sección de componentes. Aquí tengo el símbolo, el blog de sub menú que he creado en el curso anterior. Y creo que es un gran candidato ponerlo en esta sección de componentes. Esta es una molécula que funciona como un sub muchos ítems. Entonces vamos a crear otro H3 para este bloque muchos. Y peguemos el sol muchos bloquean por aquí desde símbolos simplemente puedo hacer doble clic y, y usarla ahí dentro. Entonces lo que quiero decir con esto, ya que traté de dividir todo el diseño en o secciones de componentes que puedo usar para crear esas secciones. Puedes usar diferentes bits y piezas como componentes, especialmente elementos formados y todas las demás cosas que usarás como átomos o moléculas en tu sitio web. Pero no los voy a agregar ahora mismo. Voy a crear otro elemento de secciones en esas. Yo les nombré secciones, pero esos son diseños en realidad las estructuras que contienen muchos átomos o moléculas diferentes enlazadas entre sí y crean toda la navegación del menú, tal vez pie de página o elementos de héroe en nuestra página. Y también se ha trabajado para crear en nuestra guía de estilo un lugar separado para esos esquemas para esos diseños. Tenemos esta sección de maquetación aquí en Webflow. Esos son diseños predefinidos. Y como puedes ver, esto contiene de algunas imágenes y tarjetas y tal vez títulos. Por lo que algunos átomos y moléculas se juntaron para formar sección. Para que podamos tener a la mano esos tramos. Podemos crear componentes fuera de las secciones y luego reutilizarlos para nuestros propósitos. Especialmente si estás creando algo que es una guía de estilo un poco más elaborada. Entonces algún tipo de sistema de diseño. Esas secciones son realmente, realmente importantes porque probablemente usarás este sistema de diseño para diferentes aplicaciones y sitios web que crearás. Y luego puedes reutilizar las secciones de un proyecto a otro. Permítanme usar la sección de encabezado que tenemos aquí y colocarla ahí dentro. Entonces, así sección de cabecera es un buen candidato para ir allí. Además, vamos a crear otra sección. Tan solo duplica la que teníamos y tienes esta sección de encabezado y pie de página aquí. Por lo que los elementos de bloque grande como barra de navegación y pie de página deberían ir allí. Y esto es especialmente útil si piensas en esto como un componente y luego tal vez anidar otro componente dentro de encabezado y pie de página. Y ahora Webflow es capaz de hacer eso. Para que pueda anidar componente de logotipo en encabezado y pie de página. Y luego si quieres cambiar el logotipo para todo el sitio, si estás aplicando cambios de marca y necesitas reemplazarlo. Y esos componentes anidados realmente pueden ayudarte a lograr eso en todo el alcance de todos los, todos los elementos que contienen los elementos del logotipo. Entonces ahora vamos a copiar y pegar el pie de página en nuestra guía de estilo. Y a veces se obtiene la información de que los elementos de sección no se pueden anidar dentro de uno del otro. Hagamos clic en elemento cuerpo y ahora Comando V para pegar el pie de página. Ahora tenemos tanto el encabezado como el pie de página, tanto el elemento de navegación como el pie de página en su lugar en nuestras secciones. Y esto es realmente útil tenerlos en la guía de estilo, así como algunos otros diseños que podrías usar. Por lo que el comienzo de nuestra guía de estilo está listo y estilete, Es algo que debería evolucionar con tu proyecto, con tus sitios web. Eventualmente podría convertirse en sistema de diseño. Pero a menos que tengas un sistema de diseño en marcha ya que quieres transferirlo a Webflow. Realmente no deberías dedicar mucho tiempo a pensar en diferentes opciones de tipografía y colores que podrías agregar más adelante, lo mejor es tener ya algunos diseños y luego agregar elementos a la guía de estilo sobre la marcha. Como puedes ver, alguien puede previsualizar todas las interacciones y animaciones en la guía de estilo en la página de guía de estilo, puede copiar y pegar valores hexagonales de colores, previsuó esa topografía. Por lo que este es un gran lugar para echar un vistazo al estilo de tu sitio web, pero también esta es la única fuente de verdad para todos los elementos de la página. Entonces si quieres cambiar la tipografía, basta con ir a la guía de estilo, cambiar encabezados y cambiarán a lo largo de toda la página. Lo mismo sucede para los componentes. Puedes editar componentes desde ahí y se actualizarán en consecuencia a lo largo de toda la página. Desafortunadamente, esto es sólo para un proyecto. Entonces si quieres crear varias páginas o páginas de destino basadas en la guía de estilo, lo que tendrías que hacer es simplemente duplicar este proyecto una y otra vez, luego eliminar las páginas que no usas una guía de estilo de steve the, o simplemente crear un proyecto con guía de estilo como base y duplicarlo. Y luego puedes empezar desde ahí y crear algunas otras páginas. Esto no es realmente conveniente si quieres cambiar la tipografía a través de todos los proyectos o tal vez logotipo porque tendrías que ir a cada uno individual. Pero esperemos que Webflow algún día venga con una solución que nos permita tener este sistema de diseño enlace a todo el proyecto. Por lo tanto, mantén un ojo en eso. Y en cuanto a la sección de guía de estilo, creo que eso es más o menos todo. También una opción que vale la pena señalar como la capacidad de compartir este proyecto. Podrás invitar a colaboradores. Entonces si estás trabajando en una guía de estilo o un sistema de diseño con tus compañeros de equipo, Es realmente útil porque cuando tienes un plan de equipo para Webflow, puedes invitarlos y puedes trabajar por completo. Y también tienes la capacidad de compartir el proyecto con enlace de solo lectura para que alguien pueda previsualizar todas las capas y cosas que tienes en el documento. Basta con copiar este enlace que se ha creado y enviarlo a cualquiera. quiere poder comprobarlo en el diseñador, pero no poder editarlo. Por lo que esto es más o menos para crear la estructura de guía de estilo. Y este es sólo un enfoque. Es bastante simple si quieres ver alguna estaca más sofisticada y avanzada en la guía de estilo y los sistemas de diseño. Por favor, checkout system flow.com. Ahí encontrarás tutoriales así como framework listo para usar para Webflow que puedes usar para crear y trabajar en un sistema de diseño que es realmente, realmente extenso. Por ahora recuerda esas opciones de compartir y estamos listos para las próximas lecciones porque acabamos de crear nuestra primera guía de estilo. Gracias por la atención y nos vemos en la siguiente lección. 7. Resumen del proyecto: Hola chicos y bienvenidos a la primera lección de este curso. Estoy súper emocionado de tenerte aquí. Y este es el curso avanzado sobre Webflow, lo que significa que no vamos a estar lidiando tanto con el diseño y el estilo. Te voy a mostrar algunas características más avanzadas de Webflow además de crear la estructura para nuestro sitio web, por ejemplo, con CMS, además de crear una sencilla guía de estilo. Y lo que miras ahora mismo es una página web que hemos creado en el curso básico. Entonces si quieres crear una página de aterrizaje, un sitio web como este, adelante y revisa el curso de conceptos básicos y luego aprendes todo sobre la estructura HTML y el diseño. Lo que vamos a hacer en este curso, podría ser una especie de continuación y vamos a utilizar CMS para crear una estructura de blogging para este sitio web, para ampliar este sitio web y crear un bloque encima de eso. Por ahora tenemos alguna estructura sencilla aquí. Este es un sitio de una página con solo encabezados simples y algunas secciones que hemos creado. Y también lo primero que les voy a mostrar en la siguiente lección es cómo crear una guía de estilo que básicamente nos permita trabajar un poco más fácil en Webflow y crear todas las demás páginas en poco tiempo. Es decir, usar, reutilizar los elementos que ya hemos creado. Entonces permítanme también cambiar rápidamente a la estructura que he preparado para las siguientes páginas que vamos a crear esto como una simple maqueta de un blog que vamos a crear. No me sentí en las fotos porque vamos a usar uno fo CMS con el fin de sentir todos los elementos bancarios aquí dentro y para cargar las fotos. Este es el layout que he creado en Adobe XD. Este archivo se puede encontrar en los archivos fuente de este curso. Lo que tenemos aquí es la sencilla página de inicio para el blog. Ya verás que tenemos logo y menú sencillo en la parte superior con algunas categorías que crearemos. Y luego tenemos esta sección de héroes con artículo destacado. Y todos los datos que se mostrarán provendrán del CMS. Por lo que tenemos esta etiqueta de función y también tenemos el encabezado, el nombre del artículo, el extracto, así como vinculado a este artículo y al lado derecho. También tenemos una foto que vamos a cargar dinámicamente desde el CMS. A continuación eso creará algunas secciones que también contendrán nuestros datos de CMS. Y eso exhibiría artículos recientes. Y entonces tenemos también software. Entonces básicamente todos esos provienen de nuestras categorías y vamos a simplemente mostrar los artículos más nuevos dentro de la categoría. También tenemos un etiquetado como destacado para algunos de los elementos. Y se puede ver que esta es una estructura muy simple donde tenemos básicamente algunos datos de CMS. Por lo que una imagen 40 para el artículo así como el título aquí es el extracto. Y también tenemos la información sobre el autor así como la categoría a la que pertenece este post. Esta categoría también se muestra en forma de factura, la pequeña burbuja en la parte superior de la miniatura. Y eso es básicamente todo para la página de inicio. Es súper sencillo, pero nos permitirá utilizar todos los diferentes conceptos del CMS. Entonces tenemos otra página, esa es la página de la categoría. Y es super cool es que Webflow en realidad está generando esas páginas de categoría para nosotros automáticamente y llenándola con los datos de esta categoría. Por lo que todos los posts que están en la categoría, también añadiremos esta banderita destacada al post para que podamos reordenarlos. Y por último, la página dot cuenta con un solo post en nuestro blog con la fecha, el autor, así como categoría y el título. Aquí tenemos el observado y el contenido del post al lado derecho, también tenemos algún sencillo formulario de registro de newsletter así como compartir en redes sociales. Entonces todo esto es bastante sencillo, pero creo que es una estructura bastante ordenada que nos permitirá explorar CMS en Webflow así como algunas otras cosas. Entonces básicamente aquí podremos mostrar fácilmente diferentes posts que están en la misma categoría la que estábamos leyendo para que cuando alguien termine de leer pueda ir a otro material y otro artículo que pudiera ser interesante. Pero sí, así que esas son páginas gratuitas que explorarán, crearán desde cero y tú CMS para alimentarlo con los datos, así como crear la página del editor para quien vaya a agregar el contenido a nuestro blog para que esta persona pueda agregar fácilmente nuevas publicaciones directamente desde el navegador. Y te voy a mostrar también al editor. Lo que vamos a hacer en Webflow es que vamos a empezar con este proyecto existente que tenemos, pero es súper sencillo. De nuevo, sí te recomiendo que revises el curso básico si quieres ver cómo hice este proyecto. Pero lo importante en este proyecto es que hay una página de guía de estilo que empezamos a crear. Entonces aquí tenemos un sencillo blog de SAP muchos que hemos creado. Y lo hice solo para mostrarte cómo crear componentes. Pero ahora vamos a trabajar en esta página de guía de estilo porque es, nuestro sitio web va a tener cada vez más páginas. Es mucho más fácil organizar algún tipo de un estructurado con componentes para que puedas reutilizar los elementos que ya has creado y que se mantengan consistentes a lo largo de toda la página, además de que es súper fácil simplemente usarlos arrastrar y soltar en las otras páginas, en este caso las páginas de blog que vamos a crear. Entonces esta es la estructura de la que vamos a empezar. Además, encontrarás el enlace a esta estructura a tu, en tus archivos fuente para este curso. Por lo que puedes empezar duplicando este proyecto. Y estaremos abordando la guía de estilo y creando algún tipo de guía de estilo. O quizá el inicio de un sistema de diseño en la siguiente lección. Y luego vamos a crear una estructura para la base de datos, la estructura CMS que alimentará a nuestro tipo con los datos, así como más adelante exploraremos algunas integraciones, tal vez algunas no herramientas de código y Zapier, voy a te muestran cómo expandir este sitio web y agregar alguna funcionalidad extra en la parte superior de la web para esas funciones avanzadas. Espero que estén contentos con lo que va a pasar en la siguiente lección. Entonces vamos directo a ello. Te veo en el siguiente. 8. Primera colección: Bienvenidos a esta siguiente lección. Y en este vamos a crear una configuración de colección para nuestro CMS en Webflow. Esto es súper importante y eso definirá la estructura de datos para nuestro blog y las relaciones entre los elementos en el bloque. Entonces piénsalo como una base de datos porque ésta es efectivamente una base de datos que se estará ejecutando en esos servidores. Y esta base de datos contendrá diferentes tipos de datos y podemos crear los vínculos entre los elementos que van a crear. Entonces por ejemplo, ir a crear categorías y luego blogs posts y autores y obtenemos el enlace juntos. Si por casualidad trabajas con algún tipo de base de datos, ya fuera esa base de datos MySQL o SQL, o incluso con hojas de cálculo simples en Excel o Google Sheets o tal vez air table. Esta será una especie de estructura similar. Entonces lo que vamos a hacer es primera carrera, crear nuestra primera colección CMS. Y aquí tienes algunas plantillas de colección. Entonces, por ejemplo, puedes seleccionar de categorías y proyectos y clientes. Pero en cambio, déjame simplemente crear la colección desde cero. Entonces lo que tenemos que definir aquí es el nombre de la colección. Eso es bastante importante porque nos permitirá saber qué tipo de datos hay en la recopilación. Pero también creará automáticamente las URL para nuestra página web con el nombre de esta colección en particular. Te voy a mostrar cómo funciona si comienzas con nombres de categorías. Entonces lo que vamos a hacer aquí es crear categorías. Y estoy usando plural a propósito porque eso serían todas nuestras categorías. Y la versión singular la crea Webflow automáticamente, puedes editar aquellos si algo sale mal y no es gramaticalmente correcto. Pero el plural es categorías, y el singular es categoría. Y vamos a hablar de esta colección de esa manera. Por lo que vamos a tener todas las categorías en la colección y la única entrada sería categoría. Por lo que ahora la URL de colección se genera automáticamente y este es el nombre de la carpeta en la que se almacenarán tus páginas de categoría en el servidor. Entonces si echas un vistazo a la estructura de URL, aquí tienes el nombre de las categorías y luego será una página de categorías que será creada automáticamente por Webflow. Se puede cambiar este nombre. Puedes cambiar la URL de la colección independientemente del nombre de tu colección. Por ejemplo, si quieres tenerlo como mi website.com slash blog. Pero sólo nos vamos a quedar con las categorías. Creo que está bien. Por lo que tendremos todas las páginas de colección generadas automáticamente bajo categorías y luego las categorías de páginas de categorías para bloques son bastante comunes. Queremos crear como diferentes secciones para nuestro blog. Diferentes temas que contendrían, por ejemplo, tecnología o artículos de marketing o blockchain. Y luego vamos a crear otra colección CMS con entradas de blog reales. Y vincularemos esas, esas categorías a las publicaciones de blog. Pero te voy a mostrar cómo hacerlo más tarde. Pero cuando definiste una nueva colección CMS, tienes que definir también los campos de colección. Esos dos campos, la información básica son agregados por defecto por Webflow. Entonces este es nombre y escoria. Esas son requeridas. Puedes sentarte un poco de asteriscos junto al nombre. Y como puedes ver que aquí se requiere holgura para crear una URL única que lleve a tu categoría. Por ejemplo, categoria slash marketing exhibirá todas las publicaciones desde marketing. Entonces vamos a editar primero esta información básica, voy a dar clic en este pequeño ícono de la derecha y podemos crear el nombre de la etiqueta aquí y también algunos textos de ayuda. Y esto. Aparecen para nuestros colaboradores y las colecciones CMS. Pero también podemos crear y agregar campos personalizados a esta categoría. Entonces imagina tener una hoja de cálculo y en la fila tenemos esta colección con el nombre, pero entonces podemos tener diferentes columnas con diferentes campos, por ejemplo, texto e imágenes y videos. Entonces lo que tenemos es la capacidad de agregar algunos campos personalizados a la categoría. Por ejemplo, queremos tener esta categoría para tener una imagen o un color específico, o tal vez un enlace. Podemos hacerlo. Podemos definir el tipo del campo personalizado que creará. Y en este caso en particular, quiero crear otro campo de texto simple porque quiero agregar una descripción a nuestra categoría. Por lo que este campo no es obligatorio. Voy a dejar esta casilla en blanco y le voy a dar una etiqueta, un nombre para esta categoría que sería descripción. Y puedes seleccionar una sola línea o multilínea si eso debe ser texto largo, puedes configurarlo como multilínea. Y luego en el editor, el campo de texto sería un poco más grande. Y también puedes tener este recuento máximo y mínimo de caracteres, y eso es todo. Por lo que he creado otro campo personalizado. Puedes crear hasta 30 campos para cada colección. Y luego tienes este extra campos básicos con nombre y holgura. Y además tienes tres campos que son generados automáticamente por Webflow. Esta es fecha, fecha, edición y publicación saludada , y esas se añadirán automáticamente. Se puede eliminar la colección. Para eliminar la colección, primero tendrás que asegurarte de que no hay instancias de esta colección en el diseñador, pero vamos a explorar eso más adelante. Por ahora tenemos nuestra sencilla colección CMS con tres campos. Yo lo voy a crear. Y Webflow te permitirá generar algunos datos ficticios, pero no queremos hacerlo por ahora. Por lo que solo crearemos una nueva barra de categorías por nosotros mismos. Y vamos a darle un nombre. La primera categoría para nuestro libro sería Blockchain. Vamos a pegarlo ahí. Y este rezago se está generando automáticamente con mayúsculas cambiadas en minúsculas. Y también si agregas algunos caracteres especiales, por ejemplo, barra espaciadora. Si presionas ahí en el nombre, verás que da como resultado que Webflow lo cambie en un guión. Y esto se debe a que crea la URL para esta categoría en particular y la página de categorías en base a la escoria que puedes modificar de forma independiente. Ahora vamos a pagar algo en el campo de descripción y vamos a crearlo. Pero antes de hacerlo, puedes hacer clic en esta flecha pequeña y guardarla como borrador para que puedas crear diferentes categorías, pero si aún no quieres publicarla en tu sitio web, puedes crear borradores. Pero aunque hayas creado ahora, no se publica automáticamente. Por lo que los cambios son visibles en el sitio web de tu editor. En cambio, tiene esta niebla especial, es estatus especial. Y ahora es una naranja. Dice que está puesta en escena para publicado. ¿ Qué significa? Bueno, si publica su sitio web ya sea en subdominio Webflow o en su propio dominio, esos cambios y colecciones CMS se publicarán todos juntos. Por lo que puedes dejarlos como borradores si no quieres publicarlos, o puedes escenificarlos para publicarlos. También, has exportado botones importantes. Esas son realmente útiles si quieres crear muchas entradas. Por ejemplo, ahora puedes exportar el archivo CSV para que puedas ver la estructura. Después puedes crear algunas otras entradas y después, guardar el archivo e importarlo. Entonces no tienes que ver con si esos UI. También puedes migrar archivos, migrar datos de otros sistemas, como Shopify o algunas otras entradas de blog de WordPress o lo que tienes. Entonces si vas a, si seleccionas la primera columna en Excel, luego ve a Datos y luego ve a convertir texto en columnas. Puedes configurarlo para que sea delimitado. El delimitador es una coma. Entonces vamos a terminarlo ahora y se puede ver que tenemos todos los datos en diferentes columnas. Por lo que es fácil agregar más categorías aquí y luego guardarlo como archivo CSV. Y luego de nuevo ir al flujo web y podemos importar esto por completo. Pero para nuestro propósito específico, realmente no necesitamos hacerlo porque solo tenemos unas cuantas colecciones que crear. Entonces vamos a crear otras categorías son algunas categorías de colecciones. Esos entrarán todos en la misma colección CMS. Y aquí está la segunda, móvil. Vamos a seguir adelante y crearlo. Por cierto, si cometiste un error, solo vas a seleccionar. Puedes seleccionar lo que hayas creado. Y ahora puedes eliminarlo o puedes cambiar su estado en borrador para que no esté puesta en escena para publicarlo. No se va a publicar a menos que acabes de declarar y sitio web del editor. Ahora este credo, una categoría más, y esto es marketing. Sólo voy a copiar y pegar la misma descripción por ahora. Entonces tenemos algo aquí. Y la última, la última categoría creará para nuestro bloque será software con artículos sobre desarrollo de software probablemente. Vamos a crearlo, y así es como se ve. Ahora, lo que queremos crear en la siguiente lección es la otra estructura aparte de categoría. Entonces vamos a cerrarlos por completo ahora mismo. Y te veo en la siguiente lección. 9. Configuración de la colección: Hola chicos y bienvenidos a esta siguiente lección. En este, me gustaría mostrarles cómo crear todas las colecciones para nuestro CMS y Webflow. Entonces vamos a crear colección de artículos y los autores y todos los diferentes que nos ayudarán a estructurar datos dinámicos en nuestra página web. No obstante, si solo estás siguiendo los videos, creo que te podría resultar un poco difícil entender por qué exactamente se me ocurrió este tipo de convenciones y propiedades de nomenclatura y por qué estoy creando estas estructuras? Creo que si solo te sigues, podría ser un poco difícil, pero si intentas hacer contigo mismo y básicamente envuelves la cabeza alrededor de la idea de crear un blog y su estructura. Creo que esto será bastante obvio. Bueno, en primer lugar, trató de establecer el punto de partida en la pieza más pequeña de datos dinámicos. Pero quieres tener, por ejemplo, en esta entrada de blog, aquí tenemos todos los diferentes datos y todo tiene que ser dinámico. Por lo que el título así como el contenido de la publicación del blog es esa dinámica. Entonces tenemos esta imagen así como algún contenido estático al lado derecho. Entonces desde aquí vamos a pensar en qué elementos deben definir nuestro artículo que debe ser imaginado y título y autor, y también el contenido y tal vez algunas etiquetas. Y también tenemos algo que se llama destacado aquí. Por lo que este TikTok al lado izquierdo de la imagen sólo nos dice que también queremos contar con algunas de las publicaciones del blog al menos. Y este es un gran ejemplo de cómo podemos pensar en crear esto, esta estructura destacada. Entonces si tomas este pequeño elemento destacado y también tendremos etiquetas aquí. Entonces por ejemplo, aquí tenemos diseño y desarrollo y tipografía, y también tenemos diferentes categorías. Entonces tenemos que pensar cómo crearlo en CMS para que realmente tenga sentido. Por lo que la característica es básicamente sí, no. Por lo que esto pertenece al artículo. Esto es verdad, afirmación falsa. Y ese podría ser un campo sencillo que sólo vamos a cambiar en el artículo para decir que está destacado. Posteriormente podemos decidir que este artículo que se presenta se exhibirá, por ejemplo, en la página principal. Después tenemos etiquetas, y luego también tenemos que decidir si queremos crear etiquetas dentro de nuestros artículos, blog, o queremos crear una colección separada para etiquetas como tipografía de diseño, Its , etcétera. Y esta es una decisión importante en cuanto a CMS porque o lo dividimos en diferentes colecciones o simplemente creamos una colecta y vamos a sumar este impuesto, por ejemplo, en un campo de texto y tal vez separarlos con punto y coma o lo que sea. Pero en este caso, para impuestos, al menos creo que sería mejor tener una estructura separada para impuestos, sobre todo que quiero crear diferentes colores para cada uno de ellos. Entonces quiero Design tab to, digamos tener color azul y luego desarrollo tendrá color verde. Entonces significa que tengo que pensar en usar dos propiedades diferentes. Entonces dos campos diferentes, uno para texto de contenido real y el segundo para el color. Por lo que en este caso en particular, sería mejor crear una colección separada con etiquetas. Y entonces cada pila tendrá el nombre y el color, que no tenga que recordar todos los valores hex de color para cada post que creo. Simplemente vinculo este artículo de colección específico a la segunda colección, la colección del artículo. Entonces, lo que Webflow nos permite hacer es si creas diferentes colecciones, que podrían pensarse como, digamos hojas de cálculo de Excel. Por lo que tenemos diferentes hojas de cálculo para artículos y para etiquetas y para autores. Y luego puedes vincularlos. Es una especie de si estás usando Airtable, puedes vincular diferentes hojas juntas y diferentes registros. Y esta es una especie de idea similar. Podrás vincular el impuesto dos artículos. Y luego mientras se crea un artículo específico, basta con enlazar a la etiqueta o impuesto específico con campos especiales, se les llama campo de referencia o multi referencia en Webflow, CMS. Entonces lo vamos a explorar en un segundo. Te mostraré cómo definir la estructura para nuestro cuerpo de blog. Y este es un concepto realmente importante en el que ejecutas antes de empezar realmente a desarrollar tu sitio web con Webflow, lo que haces es simplemente desplazarte tu diseño y pensar en diferentes conexiones así como en la estructura del CMS. Entonces primero piensas lo que debe ser estático y lo que debe ser dinámico. Por ejemplo, los elementos de menú, marketing de software, móvil y blockchain. Se puede crear un menú estático, derecho, así. Pero entonces si lo tienes en el CMS como categorías, puedes vincular esas categorías a publicaciones de blog y luego podrás mostrar automáticamente esos elementos en el menú para que cuando cambies algo o tal vez añades otra categoría, se actualizará automáticamente. Y entonces también se empieza a pensar en las relaciones entre diferentes colecciones. Entonces, por ejemplo, para los autores, debería crear una colección separada si solo hay un autor aquí y solo hay un nombre de este autor. A lo mejor debería ser el elemento que campo en las colecciones de artículos. Pero pensando a prueba de futuro, creo que deberíamos crear una colección con autores para que podamos agregar una foto o una biografía. Y entonces nuestros clientes quieren crear, digamos una página separada con exterior. Podremos hacerlo con esta colección específica. Y aunque te resulte difícil envolver la cabeza alrededor del personal de cobranza y todos estos datos están pensando, supongo que solo es cuestión de empezar y crear algunas colecciones porque siempre puedes modificarlas más tarde. Entonces sigamos adelante y abrimos nuestro CMS en Webflow y creamos otra colección. Contamos con 14 categorías. Y ahora vamos a crear colección con etiquetas. Siento que el impuesto debe tener cobranza separada porque tienen colores y nombres separados. Por lo que el nuevo nombre de cobranza sería fiscal en plural, y también tenemos la versión singular. Y en la URL, creo que me voy a quedar con etiqueta. Singular. El impuesto es un poco raro. Vamos a tener este contribuyente es página de etiqueta única y eso se generará automáticamente con Webflow. Te voy a mostrar cómo funcionan esas páginas en un segundo, pero solo necesitas la URL de cobro para gravar o, o renombrarla y el nombre de la información básica y holgura, lo vamos a dejar, pero vamos a agregar una más campo personalizado y que será color. Por lo que aparte del nombre, también vamos a tener este color personalizado aplicado a cada etiqueta que vamos a crear. Por ejemplo, etiqueta topográfica o tal vez Diseñador. Cualquier cosa que queramos crear como etiqueta. Y esto va a ser tuck color, y necesito que se requiera este campo. Salvemos este campo. Eso es todo para nuestra primera, segunda colección. Vamos a crear esta colección. Y de nuevo, podemos iniciar esto con datos. Voy a saltarme por ahora y solo crear algunas etiquetas simples que ya tengo un portapapeles junto con sus colores. Entonces tenemos desarrollo. Y luego vamos a crear otro que se diseñará. Y si crea campos personalizados con tipos de datos específicos, como el color aquí puede hacer clic en este pequeño ícono, icono de soltar, y luego puede seleccionar el color. En este caso, tengo el color de mi diseño. Y para la última que voy a crear, vamos a darle un nombre, una charla de topografía y tipografía. Vamos a seleccionar tal vez el color de este selector de color y seleccionar este tipo de color rojo anaranjado, guárdalo, y eso es todo para mi segunda estructura. Entonces tenemos categorías ahora y también tenemos impuesto. Vamos a crear otra colección CMS. Y esta vez vamos a crear autores y utilizar este conjunto de datos predefinido de Webflow. Si haces clic en autores, verás que el nombre de la colección es correcto. Después tenemos la URL de colección y las páginas específicas que se generarán tienen este prefijo autor. Y también tenemos, aparte de la información básica, algunos campos personalizados como bio y resumen y imagen y correo electrónico. Por supuesto, podemos seleccionar cualquiera de estos campos y podemos cambiarlo de una sola línea a multilínea y podemos cambiar para que los campos sean requeridos por defecto, todos ellos son opcionales. También tenemos algún enlace de perfil de Twitter y perfiles de Facebook. Puedes cambiarlo, puedes eliminar los que realmente no necesitas, pero solo me voy a quedar con los generados automáticamente. Y a la derecha también tienes la vista previa del editor, que tipo de te da una idea de cómo son estos campos. Vamos a crear esta colección. Iniciemos esta colección con datos para que no tenga que buscar algo de Lorem Ipsum y pegarlo ahí. Voy a sumar cinco artículos al principio. Y Webflow se encargará de generar diferentes nombres para mi autoría, así como sus bios y bio resúmenes. Y también tenemos una foto y una imagen en este bastante inteligente y Webflow porque tienes esta foto con una persona en realidad para los demás. Eso podría ser sólo una coincidencia, pero aquí está. Y también una dirección de correo electrónico, obviamente algunos enlaces de perfil de datos imaginarios y para Facebook y Twitter. Pero aquí están. Y ahora podemos usar estos datos para diseñar y exhibir lo que hemos creado. Otra colección que voy a crear, esta entrada de blog, esta es la más importante. Puedes usar la estructura ya hecha, pero solo voy a crearla desde cero. Eso podrían ser publicaciones de blog o artículos. Puedes nombrarlo como quieras. Supongo que esta URL de colección es un poco rara. Entradas en el blog, tal vez tengamos artículos aquí o simplemente salgamos del blog y eso está bien. Ahora echemos un vistazo a los campos personalizados. Esta es la parte más importante. Vamos a definir muchos campos personalizados diferentes para los artículos. Pero primero consultemos con el diseño. Esta es la fuente de inspiración para lo que realmente vamos a usar aquí. Y tenemos esta imagen, este es un rectángulo y vamos a añadir otro, también otro formato, formatos de imagen para Instagram. Por cierto, podemos tener este campo multi imagen y campo multi imagen es capaz aceptar hasta 25 imágenes en un solo campo de la colección para que posteriormente lo puedas usar en una caja de luz. Por ejemplo, si tienes unas fotos de producto para tu sitio web de e-commerce, pero vamos a usar solo imagen. Esta sería una sola imagen, pero vamos a crear dos campos como este. El primero sería un rectángulo. Entonces con relación de aspecto, imagen uno a uno de uno. Y luego segundo, ese sería el que se exhibe en XD, Eso es 16 por nueve. Y también puedes agregar algún texto de ayuda. Entonces por ejemplo, si lo prefieres, Digamos 1600 veces 900. Esto también se muestra en el editor anterior deber. Cualquier persona que gestione su sitio web sabrá cuál es la resolución preferida de las imágenes. Y además voy a marcar este campo como requerido ya que esta es la imagen va a estar usando en las miniaturas así como en el post. Salvemos este campo. Y el siguiente campo sería un extracto. Entonces extracto está en diferentes lugares. Entonces por ejemplo, en nuestro artículo es este bit en la parte superior. También lo tenemos a continuación están las miniaturas. Y si esto se presenta, también tenemos líneas libres del extracto visible en la página de inicio. Entonces vamos a crear otro campo de texto sin formato, pero vamos a asegurarnos de que sea línea múltiple. Y necesitamos tres líneas de este texto. Por lo que lo mejor es consultar con el diseño cuánto tiempo debe ser exactamente este texto para caber en este modelo de línea libre. Entonces lo voy a tener entre ciento ciento sesenta caracteres. Y esto también es necesario para la etiqueta que vamos a utilizar extracto y vamos a guardar este campo. Ahora el campo más importante para el artículo, ese sería el contenido de los artículos. Y no estaremos usando textos planos con multilínea porque aquí sólo tenemos un texto sencillo. No obstante, en las entradas del blog también podemos agregar algunos videos y tal vez queremos agregar algunas imágenes. Por eso vamos a usar texto enriquecido. Y ese es el campo que nos permitirá tener la estructura con encabezados y párrafos e imágenes y contenido incrustado. Y también para las personas que gestionan nuestro contenido en el editor. Tendrán bonito WordPress como editor para este rico texto campos. Por cierto, puedes tener un recuento mínimo de caracteres, pero lo voy a dejar en blanco, pero obviamente este campo es requerido. Necesitamos algún contenido para una OPI, entradas de blog y el artículo. Y esta es la estructura base. Entonces al menos esto es la mayoría de las cosas que veremos aquí. Pero también tenemos algunos artículos que podrían ser un marcado como destacado. Este es un campo sencillo que vamos a utilizar aquí. Y vamos a usar switch, switches, simple, verdadero-falso. Y vamos a darle un nombre de destacados. Guarda este campo. Y echemos un vistazo al editor. Por lo que alguien sería capaz de usar la característica de la publicación por defecto que se establecería en No. Pero puedo establecer la bandera de los posts para que se presenten. Y luego dependiendo de esto, podría ser capaz de dejar decir que se muestra en la página de inicio, acuerdo, y eso sería todo para los datos estáticos de cada artículo. Ahora queremos utilizar los datos que ya hemos creado en diferentes colecciones CMS como autorizar y etiquetas y categorías. Porque cada artículo, cada entrada de blog tendría que tener su autor y algún impuesto y la categoría a la que pertenece. Entonces vamos a crear otro campo, y vamos a estar usando referencia y campos de referencia multicapa con el fin de lograr eso, la diferencia entre ambos es ese enlace de campo de referencia a un registro, por ejemplo, un campo de autor y de referencia múltiple puede vincular múltiples registros de estas distintas colecciones en términos de categorías. Entonces vamos a tener categorías primero, vamos a usar campo de referencia único. Eso es simplemente porque queremos que cada entrada de blog pertenezca a una sola categoría. Y si quieres tenerlo al revés, si quieres tener, ya sabes, blogposts colocados en diferentes categorías o tal vez crear una categoría para nuevos artículos y artículos de fondo. Podrías hacerlo y luego crear campo de referencia múltiple y vincularlo. Es sólo una decisión empresarial para los autores. También voy a usar campo de referencia único porque en mi caso, va a ser un autor para una entrada de blog. Pero de nuevo, si tienes artículos de post que tienen múltiples autores, solo puedes crear un campo de referencia múltiple aquí. Y para el impuesto, la pregunta es la misma. Entonces tenemos que contestar si queremos usar solo una etiqueta para un artículo, o vamos a usar campo de referencia múltiple y luego vincular diferentes etiquetas a por lo menos una etiqueta, pero tal vez impuesto múltiple a un artículo. Y para mí, eso sería obvio usar campo de referencia múltiple aquí. Pero sólo por el bien de aprender, me voy a quedar con un solo archivo de referencia. Y esto se debe simplemente a que Webflow por ahora al menos, algunos problemas con la visualización de datos dinámicos de campos de referencia múltiple dentro de las páginas estáticas. Para explicarlo, tengo que mostrarles aquí estas páginas estáticas. Y también tenemos esas páginas de colección CMS. Esas se generan automáticamente, esas páginas moradas, páginas rosas, se generan automáticamente y contienen todos los datos de nuestra colección. Fácilmente accesible en la interfaz de usuario, en el diseño. Pero para las páginas estáticas tendrán que utilizar una estructura especial para poder acceder a estos datos. Y desafortunadamente, los datos del campo de referencia múltiple, al menos por ahora, están disponibles sólo para las páginas de colección CMS, por lo que sólo para las páginas moradas. Pero lo que también sé es que Webflow está trabajando activamente en habilitar esto en páginas estáticas. Entonces lo que te recomiendo hacer en este curso es solo seguir adelante. Y si estás creando este sitio web junto a mí, solo usa un solo campo de referencia ahora mismo como lo hago yo. Pero cuando termines el curso, echa un vistazo a si Webflow ya desarrolló una solución para utilizar estos campos de referencia múltiple en las páginas estáticas. Y si trataran de cambiarlo para que tengamos multi referencia para impuestos y Eso sería, así que vamos a crear esta colección. Y esto también es genial porque podemos iniciar nuestra colección con algunos artículos ficticios. Quiero agregar 10 entradas de blog para que podamos trabajar fácilmente con algunos datos de muestra como imágenes y contenido de bloque. Y Webflow está haciendo un gran trabajo y llenando los nombres de las entradas del blog. Incluso. Sólo recuerda que no usamos esta colección de publicaciones de blog ya hechas. Acabamos de crear nuestra propia colección de entradas de blog, pero de alguna manera logramos llenarla con algunos datos adecuados, algunas bonitas imágenes, y también con información básica tenemos en lugar de nombres del exterior como antes, previamente habíamos generado, nosotros tienen nombres para algunos artículos bonitos como 20 mitos sobre diseño web. Eso es bastante guay. Y aquí tenemos esta estructura lista con campo de contenido. Tenemos esta bandera destacada. Podemos encenderlo o apagarlo. Y para la categoría autor y etiqueta, se puede ver que esos son desplegables. Y esto simplemente porque podemos utilizar sólo los elementos que ya están definidos en estas colecciones CMS específicas. Por lo que en etiquetas de autores y categorías, si quieres administrar estos elementos, puedes seleccionar la colección que quieres administrar, y luego puedes agregar algunas tareas nuevas. Puedes, puedes borrarlo. Y si no eres capaz de eliminar toda la colección, tendrías que ver las conexiones que tiene. Por lo que ya hicimos la conexión entre esta categoría y nuestras publicaciones de blog. Por lo que para eliminar, la recaudación fiscal tendrá que eliminar primero la conexión entre las publicaciones de blog y el impuesto. De lo contrario, Webflow no nos dejará hacerlo. De acuerdo, Entonces esto es todo. Hemos definido nuestras colecciones y ahora podemos publicar nuestro sitio web porque todos los cambios a las colecciones se publican ahora son etapa para la publicación, pero se publican con sus sitios web. Entonces si presionas Comando Retorno, este es el atajo para publicar. Podrás publicar su página web y ahora los artículos de colección están en vivo. Ya es por ahora y nos vemos en la siguiente lección. 10. Menú del blog: Hey allá, es agradable verte en la siguiente lección. Y aquí vamos. Empezamos con crear nuestra estructura de bloques y páginas para el bloque, tenemos lista la guía de estilo, por lo que ahora podemos crear una nueva página, y esa sería nuestra página de inicio de blog. Démosle un nombre, logo. Eso es suficiente. Vamos a crear esto. Y siempre tenemos este archivo XD que es un poco de diseño de referencia para nuestro blog. Podemos consultar el archivo y aquí se puede ver la estructura base para la página de inicio. Tenemos el menú en la parte superior. Después hay un Potton destacado, algunos artículos recientes de diferentes categorías que hemos definido y el CMS, como puedes ver, es realmente sencillo y es solo una maqueta. Por lo que no voy a estar tratando de pixel perfecto que coincida con los tamaños de los elementos. Ese tipo de cosas que puedes consultar en el curso básico. Pero aquí, vale la pena crear la estructura y CMS, y quiero explicarles todo eso. Entonces lo que voy a hacer ahora es ir a la página de la guía de estilo y pedir prestados algunos elementos de ahí. El primero que usaremos como este elemento fijo con navegación. Entonces vamos a copiar y pegar eso en el blog. Si fuera un componente, también podríamos usar el menú de componentes, pero aquí solo estoy copiando y pegando. Y el primer elemento, eso no va a ser una página de inicio más que todas las publicaciones. Por lo que se mostrarán todas las entradas del blog aquí. Y para la página de inicio tendrá este logo de zumo block. En realidad, este logotipo es un poco diferente al logotipo estándar que tenemos. Y lo tengo en el archivo XD como estado para este componente. Por lo que ahora seleccionemos este logotipo de bloque y lo exportemos. Ahora vamos a Webflow y puedo seleccionar el logotipo, hacer doble clic en el logotipo para reemplazarlo y reemplazarlo por el que exporté desde Adobe XD. Y como puedes ver, es del tamaño correcto, 114 por 24 píxeles. No obstante, en realidad no es tan agudo, No es tan crujiente. Y esto es sobre todo por los detalles de mi pantalla. Estoy usando pantalla de retina y está escalando el contenido dos veces. Entonces el tamaño es el mismo porque he decidido en una escala, sin embargo, el logo no es tan crujiente después de exportar. Y Webflow tiene una manera de manejar eso. Y esto está usando esas imágenes como altamente BI. Entonces, lo que realmente puedes hacer es volver a Adobe XD y asegurarte de tener este activo que originalmente estaba en la escala 1 x, exportado a x. Y entonces tendrías que reemplazarlo y usarlo como una imagen de alto DPI. Entonces lo que tengo que hacer en XD se cambia a web porque esto exportará dos imágenes. Declaré que he diseñado esta imagen en una escala X. Y luego quiero exportarlo tanto en una X como en dos x seleccionando esta versión web. Entonces cuando exporté como logotipo de bloque de judíos, verás que si ahora quiero importar esas imágenes, en realidad tengo dos imágenes en lugar de una. Esto es solo bloque logo en dos x y la versión simple, por lo que la versión de dos huevos es el doble del tamaño. Son seis kilobytes. Y por debajo tiene el doble de píxeles, pero en mi pantalla de retina, simplemente se ve mejor. No cambia el tamaño. Entonces lo que necesito hacer es solo importar esto a imagen de escala x y luego declarar en Webflow que quiero usar esta imagen como API HTTP. Como puedes ver, es el doble que el tamaño es de 228 por 48 píxeles. También es el doble del tamaño en kilobytes. Pero se verá mejor cuando cambie la propiedad a DPI alto. Entonces esto es lo que vas a hacer en cuanto a las imágenes PNG y JPEG, esas pasan a ser bitmap. Pero en la mayoría de los casos, esto es posible. Te beneficias de tener imágenes en formato SVG, que en realidad es mejor para web y su vector para que no tengas que usar esta imagen es alto DPI y basta con solo exportarla desde Adobe XD o Sketch o Figma en este formatos SVG adecuados. Por lo que esto obviamente no es posible para las fotos, pero para todos los demás elementos, elementos de la interfaz de usuario, se puede exportar este bloque de logotipo de jugo en SVG. Y ahora si subes y reemplazas este activo, verás que la versión SVG es de solo un kilobyte y en realidad puede escalar en el navegador sin perder calidad. Por lo que siempre es mejor usar imágenes SVG. Es más pequeño en tamaño. Se LOS realmente rápidamente y no tienes que usar una opción de alto DPI. Entonces esto es todo para imágenes. Hay algunas opciones más. Por lo que recuerda agregar la etiqueta alt a todas las imágenes. Puede agregar esto más adelante en el panel Activos también. Y este es un truco bastante bonito. Y también en las versiones más recientes de Webflow, tienes imágenes configuradas para ser cargadas perezosas. Y esto es realmente genial porque también acelerará tu sitio web. Ahora, lo que me gustaría hacer es crear otros elementos para nuestro menú. Pero primero, vamos a vincular este a nuestra página de blog. Y esta va a ser la página de inicio que he diseñado en XD con todos los posts destacados y algunos posts de cada categoría. Y este viejo enlace de pulso sólo enlazará a la otra página que voy a crear en este momento, vamos a crear una nueva página con el bloque de nombres todas las publicaciones. Y este particular NoveLink irá a esta página de publicaciones antiguas en la que crearé el listado de todos los posts de nuestro bloque. Entonces volvamos al blog. Asegurémonos de que todas las publicaciones estén enlazadas correctamente a la página de publicaciones antiguas del libro y para las otras páginas. Por lo que para los componentes de color, necesito renombrarlos a secciones adecuadas como cadena de bloques y marketing. Pero realmente no necesito usar nombres estáticos por ahí porque todo lo que necesito para mostrar aquí, como en el CMS, esas son categorías que he creado y declarado NCAM S. Y quiero usar estas categorías y mostrar sus nombres dinámicamente, así como quiero que los enlaces a esas categorías se llenen automáticamente para que naveguen a la página correspondiente con listados de artículos de esta misma categoría. Y esto se puede lograr con un CMS. Te voy a enseñar cómo hacerlo más adelante. Si fuera a actualizar el nombre de la categoría o tal vez agregar una nueva categoría, todo esto se actualizará automáticamente. Nos vemos en la siguiente lección. 11. Colecciones de menú: Hola ahí. Es agradable verte en la siguiente lección. Y esta vez vamos a vincular categorías a nuestro menú. Por lo que quiero que todos los nombres de nuestra colección de categoría CMS se muestren en el menú, así como vinculados a las páginas correspondientes. Si vincula este contenido dinámicamente desde CMS y lo muestra en tu página, deberías poder realizar cambios a categorías en el CMS más adelante. Y esos cambios se reflejarán en todas sus páginas utilizando este menú específico. Ahora, eliminemos casi todos los enlaces de navegación. Voy a dejar uno y viajar y mostrarte cómo crear contenido dinámico a partir de nuestra propia página estática CMS. Para hacerlo, hay que ir a la sección CMS de los elementos impares. Por lo que presionamos un en el teclado y luego NCAM, como menos tienes esta colección, primero tienes que usar la colección menos. Y dentro de esta colección al menos puedes obtener datos de CMS. Entonces hagamos doble clic para insertarlo aquí. Y aquí tienes esta colección menos envoltorio. Por lo que si estás usando páginas estáticas con el fin de mostrar elementos de una colección, tendrás que buscar la colección apropiada. Entonces, ¿de qué colección desea obtener datos? Yo quiero fuente de categorías. Y a partir de categorías, solo cargaremos que los datos se cargan automáticamente. Por lo que se puede ver eso y esos cuatro ítems están precargados con algunos datos de recolección. Y simplemente porque tenemos cuatro artículos declarados para esta colección, tenemos cuatro artículos. Si echas un vistazo a la estructura, tenemos necesidades de recolección y luego artículo de colección, esto es lo más importante. Y si queremos cambiar algo, cualquier estilo o apariencia de estos elementos o poner algunos elementos dentro lo hará para elemento de colección. El elemento de colección es una especie de plantilla y esta plantilla se multiplica por el número de elementos de colección. Y para que tengamos cuatro categorías ahí. Está duplicado cuatro veces. Ahora si tomamos este NoveLink y simplemente lo copiamos y pegamos en artículos de colección, tendrá este NoveLink con todo su estilo como elemento de artículos de colección. Por lo que en esta plantilla de ítem de colección, lo que ahora podemos hacer es poder obtenerlo con cualquier campo que queramos que se muestre de la colección. Si le echas un vistazo a este lado derecho, notarás que ahora mismo lo que tenemos como solo un enlace a una página estática que hemos creado bloque 0 posts. Y está ahí simplemente porque hemos copiado el NoveLink y anteriormente vinculamos este NoveLink al bloque 0. Publica la página que hemos creado y queremos listar todos los artículos de esta página. Entonces déjame echar un vistazo a las páginas. Aquí tienes este libro oh, posts que hemos creado. Y esto es bastante importante porque está dentro de la categoría de páginas estáticas aquí. Pero junto a las páginas estáticas, también tenemos páginas de utilidad, páginas de comercio electrónico, y lo que es más importante por ahora, páginas de colección CMS. Esas páginas se generan automáticamente al crear la colección. Y por ejemplo, tenemos esta plantilla de categorías y esta página se genera automáticamente. ¿ Por qué? Por qué hemos creado categorías Colección CMS, esta página, y está marcada en color morado. Está disponible para mostrar todos los datos de la plantilla de catergorias sin necesidad de crear contenedores adicionales como lo hicimos en páginas estáticas. Entonces en páginas estáticas, tuvimos que crear esta colección menos envoltorio y auditar desde otro menú. Pero en las páginas de CMS, simplemente podemos usar datos de esta colección. Ahora si echas un vistazo a la configuración de los enlaces, también ves algunos campos morados. Y significa que esos campos morados están vinculados a la colección y algunos datos dinámicos de la colección se pueden obtener para la URL. Si seleccionamos obtiene URL de categorías, podemos enlazar cualquier campo URL que esté en nuestra colección. Entonces si hemos definido, por ejemplo, para móvil algún campo personalizado con URL, entonces podemos vincular esta URL dinámicamente mediante el uso de esto, obtenernos de categorías. Pero no tenemos ningún enlace en este momento, así que no hay ninguno de ellos. Entonces, ¿cómo podemos enlazarnos exactamente a la página de categorías para que podamos mostrar todos los posts en, digamos, categoría móvil y software. Bueno, para poder hacer esto, tenemos que enlazar a esta dinámica páginas CMS que se generaron automáticamente mientras se creaba la colección. Y esto también está marcado en morado aquí tenemos páginas estáticas y también páginas dinámicas. Esas son nuestras Páginas de Colección CMS. Y desde aquí podemos enlazar a la categoría actual. Significa que para todos los artículos de colección, tendré el nx apropiadamente para móvil y para software, etcétera. Me llevará a la página correspondiente generada para esta colección y podré mostrar todos los posts desde, digamos móvil o software. Además, necesito seleccionar esto, obtener textos de categorías para que tenga grandes etiquetas. Permítanme seleccionar el nombre. Y ahora como pueden ver, tengo todos los nombres de las categorías como etiquetas para nuestros enlaces de navegación. Por lo que tenemos marketing de software, móvil y blockchain. Y además encima de eso tenemos 0 posts, que es un simple NoveLink que está llevando a nuestra página estática. Pero todos los elementos aquí presentes, todos los enlaces en este elemento de elemento de colección enlazarán a la página de categorías de corrientes apropiadas generada a partir de CMS. Por lo que también cambiará en consecuencia si realizamos algún cambio adicional en nuestra estructura CMS. Y como puedes ver, esta plantilla de categorías, esta es exactamente la plantilla que se mostrará al hacer click en el enlace. Y esta será esta página de categoría actual que podamos más adelante estilo en Webflow y crear contenedores apropiados, mostrar publicaciones, etc. De acuerdo, para la configuración de envoltorios de lista de colección, podemos seleccionar diferentes diseños. Por lo que tenemos diferentes configuraciones de columnas, y también podemos cambiar la etiqueta. Déjame simplemente apegarme a este estilo de diseño donde esto se expande. Y Dan, déjame cambiar el diseño a Flexbox. Lo que quiero hacer es seleccionar primero la lista de colección y voy a cambiar el diseño a Flexbox aquí. Ahora los elementos están uno al lado del otro. Y para todo el Menú Nav, déjame cambiar al flexbox para centrar esos artículos. Ahora se ve bastante bien. Tendremos que comprobar cómo se ve en las versiones móviles aunque y en la versión de tablet, necesitamos hacer algunos ajustes. Seleccionemos todo el contenedor. Podemos cambiar el diseño para flexionar aquí también y también justificarlo al lado derecho. Esto se ve bastante cool, creo para Mobile, déjame solo previsualizar cómo funcionaría y ampliar este menú en la vista previa. Entonces sí, se ve bastante bien con necesidad de robar, ajustar algo de alineación. Pero también para la tableta, solo podríamos intentar mostrar todo el menú. Sólo tenemos cinco elementos en el menú, así que creo que cabrán horizontalmente. Entonces déjame seleccionar la barra de navegación y luego su configuración. Puedo decidir que este menú móvil sólo se muestre desde la vista telefónica y abajo. Por lo que en tablet aún tenemos cinco artículos y el logo. Y creo que todos estamos bien porque esta es la resolución más estrecha y en teléfono, habremos informado versión tendrá este menú minificado. Todavía necesitamos ajustar, posicionamiento, algún alineamiento. Esas son cosas que te dije en el curso básico. lo que realmente te recomiendo que revises curso básico y hagas algunos ajustes en este curso, prefiero no pasar tiempo en el layout, pero déjame simplemente crear rápidamente algunos ajustes aquí en este azulejo, abro este menú y ahora vamos a solo un poco de espaciado así como queremos cambiar el posicionamiento para toda esta colección, menos para que la dirección sea vertical para Flexbox y vamos a alinearla al centro así como este link nav, podemos alinear el texto con el centro. Y todos estamos bien. Creo que esos son solo ajustes básicos, pero ahora se ve mucho mejor. Y puedes empezar desde ahí y puedes hacer algunos ajustes en el diseño. Entonces creo que nuestro menú está listo en cuanto al contenido dinámico. Y has aprendido a usar colección menos wrapper en páginas estáticas. Así que recuerda, siempre que quieras usar datos dinámicos en páginas estáticas en Webflow, tendrías que usar colección menos rapero del menú Añadir. Y luego se puede fuente ordenar todos los datos de la colección CMS. Pero para las páginas de colección CMS, las que se generan automáticamente , podrás utilizar datos dinámicos de esta colección sin necesidad de usar colección, menos goma. Eso es todo por ahora. Nos vemos en la siguiente lección. 12. Artículo destacado: Hola allá y bienvenidos a la siguiente lección. En este, vamos a trabajar en el contenido dinámico en la página de inicio. Primero agreguemos una sección. Esta sección debe estar fuera de la barra de navegación fija. Y en esta sección voy a añadir un contenedor más así como otro div técnico que sostendrá la información sobre los futuros puestos. Entonces esto es bastante único. Voy a darle un libro de nombres título de años. Entonces esta es una clase bastante única que solo usaremos para este elemento en nuestra página y para toda la sección en el diseño, tiene uno alrededor de 118 píxeles de margen desde la parte superior. Ahora en el título de héroe de bloque, lo que nos gustaría agregar es el contenido de la entrada de blog que se presenta. Ahora vamos a eliminar este héroe de bloque titulado clase. Voy a aplicar reaplicar eso en un segundo. Pero primero, voy a crear tarjeta de clase más genérica grande. Y lo estoy haciendo porque quiero que este auto sea clase para tener algunas propiedades que pueda usar en mi guía de estilo y específicas a muchas tarjetas diferentes que tengo en mi página. Por lo que cambié el color de fondo a blanco así como el radio de borde a 12 píxeles. Y ahora estoy cambiando los valores de sombra de caja. Apliquemos opacidad alfa 2, 6 por ciento. Y ahora vamos a deshacernos de este pico de carta para que primero podamos volver a aplicar esta clase de héroe de bloque titulada. Por ahora no tiene ninguna propiedad, pero Encima de eso solo agregará carta grande que hemos creado como costos universales para este juego de cartas y descartar clase grande es apropiado para nosotros solo usarla en la guía de estilo. Entonces si tenemos algo que después podamos reutilizar así, podemos ir directamente a guías de estilo y agregar estos elementos. Entonces en este objetivo necesitamos otra sección para algunos elementos genéricos, algunas secciones vacías. Y lo vamos a utilizar para crear diferentes estados y elevaciones también. Déjame acelerar este proceso no es nada nuevo, pero ahora tengo esta sección de bloques de construcción con sombras de cartas y elevaciones justo encima de nuestras secciones. Y pongo esta tarjeta gran perspicacia. Por lo que ahora puedo volver a nuestra página de libros. Y esto permanecerá en la guía de estilo para que pueda reutilizarla en el futuro. Ahora esta sección del diseño es bastante única para toda la página, para todo el bloque. Por lo que tendremos esta característica a Tiktok en la parte superior, y luego tendremos título y extracto. Y a la derecha tendremos una imagen. Entonces primero, necesito usar esta colección menos esto es bastante importante porque si olvidas crear lista de colecciones primero y vincularla a la colección apropiada. En este caso, esas son entradas de blog. Daniel tiene que rehacer todo el componente. Entonces déjame ir a ajustes de esta colección menos apropiada. Ya se utiliza usando blogposts como fuente, pero ahora también podemos usar algunos filtros y orden de ordenación con el fin de mostrar los elementos correctamente. Explorarán todas las opciones más adelante. Pero ahora echemos un vistazo a la opción de artículos límite que nos permitirá mostrar sólo un número específico de elementos devueltos de esta colección. Entonces en este caso específico, solo quiero mostrar un elemento, un blog posts. Y voy a empezar por una. En caso de que tenga, no sé, 10 o 100, puedo escoger un número diferente, pero también encima de eso, puedo seleccionar el orden de ordenación que acaba de ordenar en función de la fecha de publicación. Por lo que esto publicado en como una propiedad que se aplica automáticamente a todos los elementos CMS por Webflow, puedo ordenarlo de lo más nuevo a lo más antiguo y guardarlo. Por lo que eso tendrá la visualización de la publicación de blog más reciente en este elemento de lista de colección. Pero si quiero que se presenten estos elementos, solo, puedo ir a filtros en este momento y puedo seleccionar el campo apropiado. En este caso, voy a usar featured. Y sólo cuando el destacado esté encendido, voy a mostrar estos posts más nuevos. Entonces lo he usado todo. Utilizo elementos de límite para mostrar solo un elemento. Y encima de eso tenemos aplicado el orden de ordenación para que esté mostrando sólo las publicaciones más recientes. Y también esta publicación tiene que ser destacada. Por lo que tiene que tener esta característica interruptor a, cambiar a Ohm. Ahora esta configuración general y filtros se establecen a colección menos wrapper. Pero ahora podemos cambiar al elemento de colección y podemos restyle el ítem de colección así como utilizar todos los datos del ítem de lista de recolección devuelto con los filtros que hemos aplicado. Por lo que ya tenemos los datos sobre esta publicación muy reciente que se presenta. Ahora podemos usar el bloque Lync y en Configuración de Link, verás que podemos enlazar a esta página específica, que es entradas de blog actuales. Y la corriente es simplemente la que devuelven nuestros filtros. Entonces déjame cambiar la pantalla a flex. Y este link book será simplemente el contenedor para todos los demás artículos que vinculará al artículo. Ahora dentro, Vamos a crear otro d-block, y esto sostendrá la estructura del lado izquierdo. Voy a darle un nombre, digamos héroe del libro. Y eso contendría la descripción así como el título y la categoría. Y a la derecha tendrá la imagen. Por lo que ahora dentro de esta cuadra, héroe pondrá algún libro de texto. Este es un título sencillo que usaremos que el encabezado y este es H1 y también un párrafo en el que se mostrará el extracto para el post. Entonces ahora que lo tenemos más adelante vincularemos los datos correspondientes. También necesitamos esta lectura ahora, enlace y elemento entero está vinculado, por lo que sólo tendremos este libro de texto. Y aquí dentro vamos a poner el mensaje de leer ahora. Además, echemos un vistazo a este momento de otros elementos. Primero o reemplacemos el texto en el libro de texto para que tenga característica de texto. Entonces tenemos el encabezamiento uno, que es correcto en cuanto a estilo para un párrafo, este es realmente un párrafo especial en nuestra página. Entonces voy a crear otra clase sólo para este párrafo. Quiero usarlo en la guía de estilo porque es sólo una instancia de este tipo de textos en el bloque. Entonces esto es bloquear tu extracto, y vamos a tener el margen 12 y 24 para este elemento Asper nuestro diseño. Así como font-weight serían 400 sonidos DM Normal. Y el color de la fuente es de color muy específico. no lo tenemos en la guía de estilo, pero esto es de nuevo sólo una instancia de este elemento. Entonces sólo lo tendremos así. Podemos más adelante en ella como una muestra o tal vez usar el color que esté lo suficientemente cerca de la guía de estilo a este color gris específico. Por ahora, dejémoslo tal y como está y centrémonos en el largometraje Tiktok en la parte superior del encabezado. Esto debe ser restyled y ya tenemos una clase de subtítulos que podemos usar aquí. Entonces vamos a seleccionarlo y esto nos dará todas las propiedades de la fuente. Y encima de esto, voy a crear un vaso universal para todos los elementos como este porque esta pequeña característica y luego diseñar como o categorías y todos esos billetes pequeños son realmente similares. Entonces vamos a crear otra clase encima de la corrupción. Y eso estaría bloqueado. Ok, y necesitamos cambiar su diseño a bloque en línea para que podamos agregar algo de relleno y márgenes. Lo que me gustaría hacer es agregar ocho píxeles de relleno desde el lado izquierdo y derecho. Y presiono y mantengo presionado Opción en Mac para agregar cuatro píxeles de relleno de arriba e abajo y aspirina ese diseño y para el radio, border-radius van a usar cuatro píxeles ahí dentro, así como cambiar el color de fondo. Y este también es color muy específico que no tengo ya. Y la guía de estilo, así puedo simplemente así con el valor hexadecimal por ahora. Entonces tenemos este gradiente de embaldosado, supongo que eso se trata para el lado izquierdo de nuestras listas de coleccionismo. Por lo que tenemos héroe de bloque que está casi listo. Ahora podemos obtener el texto de nuestra colección. Seleccionemos este getText de las publicaciones del blog. Y aquí tenemos categoría de cobranza vinculada. No usaremos datos de categorías, pero puedes ver que esos datos están ahí. Usaremos este nombre sencillo y extracto de la propia publicación del blog. Por lo que para la configuración de este extracto de héroe de bloque también, vamos a utilizar datos dinámicos de nuestra colección. Y aquí tenemos listo el título y el extracto. Añadamos un poco de relleno. Voy a sostener Shift para que pueda agregar 38 píxeles de relleno a lo largo de todo el héroe de bloque. Y ya está listo un elemento. Ahora necesitamos crear otro elemento. Esto ya es Flexbox. Entonces si agregamos otro d-block dentro del bloque Lean, este será Hero loci hero image wrapper. Se va a colocar automáticamente al lado derecho y tendremos nuestro lado fotón. Entonces vamos a presionar a y añadir una imagen aquí. Y luego vamos a sacar esta imagen de las publicaciones de blog también. Tenemos el campo de imagen ahí dentro, así que vamos a seleccionar este campo. Tenemos dos imágenes, un cuadrado y esta imagen de resolución 16 por 9. Vamos a seleccionar esta y necesitamos otra clase para esta imagen. Vamos a tener imagen de héroe de bloque y cambiar algunas propiedades, sobre todo la altura. Vamos a usar 100% de altura y necesitaremos que los pies se ajusten para cubrir. que si lo tenemos para campo, vamos, déjame cambiar al 100%. Ya verás cómo se ve. No muy bien, pero si cambiamos a tapar, ahora es realmente mejor. Pero también necesitamos definir el ancho. Y el ancho definirá un especificamente. Según nuestro diseño, se trata de 650 píxeles. Entonces hagámoslo así, pero también necesitamos hacer que toda esta estructura sea más amplia. Y simplemente tenemos demasiado sobre el espacio al lado izquierdo y derecho de la disposición en esta sección. Por lo que pasemos ahora a esta sección y definamos su nombre puede ser héroe de libro de sección. Eso está bien. Y ahora vamos a tener el margen establecido para ser 120 píxeles de arriba y también 120 de abajo. Y para el contenedor dentro de este elemento, vamos a establecer el máximo. Hacemos 1282 píxeles como tenemos, y el diseño tendrá que hacer lo mismo para el contenedor de menús. Entonces vamos a seleccionar contenedor para cambiar su nombre para que sea más significativo. Se trata de contenedor de menú de bloque. Y además, vamos a establecer la espera máxima en 12 802 píxeles. Eso es todo. Entonces ahora se ve mucho mejor, pero 40 tiene el ancho equivocado, aunque lo hemos dicho explícitamente a 650, algo está anulando este ancho. Y si echamos un vistazo al bloque de enlaces, se establece a esto por hechos. Y es por eso que son niños como block euro y block hero image tiene este flex child propiedades. Y si echas un vistazo al dimensionamiento, podemos configurarlo para que se encoja si es necesario, y también podemos ampliarlo. Por lo que crece si es posible, así como no encoger ni crecer. Por lo que esta propiedad no encoger o crecer es la propiedad correcta para ser establecida a nuestra imagen de héroe de bloque. Tiene el tamaño adecuado, pero necesitamos configurarlo para que solo se muestre en este tamaño. Y para nuestro héroe de bloques, podemos dejarlo tal como está, o incluso podemos cambiar su tamaño para que crezca si es posible. Entonces esto es todo. Tenemos, este elemento está listo y tenemos todos los datos provenientes del CMS. Todavía tenemos algunos retoques menores, como las esquinas redondeadas para la foto. Seleccionemos la imagen de héroe de bloque, y dividamos los valores para el radio. Establece 12 picos del radio a la esquina superior derecha y la esquina inferior derecha. Y esto se ve bastante bien como en nuestro diseño, pero aún tenemos esta tablet y versiones móviles para retocar. Y realmente no voy a pasar mucho tiempo ahí dentro porque siento que ya lo sabes desde el curso orto básico. Si no lo haces, realmente te recomiendo que revises el curso, pero déjame solo crear unos ajustes rápidos para que se vea bastante preciso en diferentes dispositivos. Ahora para un héroe del libro, siento que este relleno puede ser más pequeño en tabletas. Por lo tanto, mantengamos presionado Shift para cambiar el relleno. Y también para el menú, siento que sería mucho mejor si centráramos el menú. Entonces esto es todo flexbox, solo podemos justificarlo centro. Y ahora se centrará a lo largo de los puntos de ruptura aquí también. Entonces permítanme seleccionar este bloque de enlace y cambiar la dirección a vertical, así como cambiar la posición. Cambiemos al reverso la imagen y el título para que podamos seleccionar la imagen y cambiar sus propiedades. Vamos a restablecer el ancho a 650. Y luego cambiemos también las propiedades de las esquinas redondeadas, para que tengamos este radio de esquina superior y superior izquierda, superior derecha establecido en 12. Y después de algunas correcciones rápidas, creo que tenemos esto bastante preciso para todos los dispositivos y todas las resoluciones y cuáles son los datos dinámicos más importantes. Entonces te veo en la siguiente lección. 13. Artículos recientes: En esta lección, centrémonos en la estructura de los artículos recientes. Y esta estructura se copia a lo largo de todas las categorías. Por lo que tendremos últimos artículos de marketing de software y todas las demás categorías. Y en la parte superior solo tendremos todas las categorías y todas las publicaciones recientes listadas. Entonces vamos a dejar esta sección lucir héroe tal como es. Esto es súper específico y esto es sólo una instancia. Entonces en cambio, vamos a seleccionar el cuerpo y crear otra sección que sostenga el contenedor para este elemento específico que podría ser reutilizable para todos, para todas las demás secciones. Por lo que sólo voy a darle una sección de categoría libro de nombres. Ahora vamos a establecer algunas propiedades básicas para el espaciado. Vamos a usar margen. Establezcamos el margen para que sea 100 píxeles de arriba. Y ahora dentro de esta sección de categoría de libro tendrá contenedor. En el contenedor como de costumbre, cambiemos el ancho máximo de este contenedor a 1282 píxeles. Y este contenedor para eso va a ser contenedor de contenido de bloque. Y lo vamos a utilizar en todas las demás secciones también. Dejaremos que la pantalla sea flex, ajustaremos a vertical y lo alinearemos y lo justificaremos al centro y al centro. Ahora de los símbolos, tendremos esta sección de encabezado que podemos usar. Y en la sección de encabezados, tenemos algunas anulaciones que podemos hacer para el texto así como encabezamiento y descripción. Entonces la primera sobrescribir como del blog, luego tenemos este texto y para su descripción simplemente lo eliminaremos por completo. Y ahora este texto descriptivo es visible como contenedor, pero sólo en el diseñador. Realmente no será factible. El sitio publicado. Por lo que ahora presiono un, agrego la colección menos wrapper y pronto se vinculará a todas nuestras publicaciones de blog. Pero ahora vamos a seleccionar menos la colección. Entonces este contenedor medio, y vamos a restyle. Por lo que voy a añadir las tarjetas de blog de clase menos a esto y cambiar su DSpace agregando para que hayamos acordado que podamos usar fácilmente Flexbox. Pero para ello, creo que la grilla también es realmente grande para que podamos cambiar fácilmente la brecha entre los elementos. Entonces vamos a tenerlo establecido en 24, como en nuestro diseño en XD. Y también necesitamos una columna más. Necesitamos tres columnas y sólo una fila. Ok, ahora tenemos la estructura 40 elementos. Cerremos este saludo. También para la distribución, vamos a dejar esos ajustes por defecto y vamos hacer doble clic en este elemento para conectarlo a su fuente. Esas serán publicaciones en el blog. Ahora todo lo que tenemos que hacer es limitar el número de entradas de blog. Por lo que para las tarjetas de libros, los ajustes tenemos la fuente establecida a las entradas de blog. Lo que tenemos que hacer es limitar los ítems y sólo necesitamos tres ítems aquí. Además, led, crea el orden de clasificación para que esos sean sólo los artículos más nuevos. Por lo que vamos a poner el publicado en y establecer los ítems para ser nosotros a la orden, más reciente a más antiguo orden. Ahora vamos a establecer los ajustes de los elementos secundarios griegos. Por lo que hasta la alineación se establece para estirar. Y tenemos los contenidos estirándose de izquierda a derecha. Y en este elemento de colección, también necesitamos agregar los elementos que mostrarán datos dinámicos. Nuevamente, primero, vamos a agregar bloque de enlaces y vincularlo dinámicamente a la entrada actual del blog. Esta será la entrada de blog devuelta por este filtro que hemos creado. Y se vinculará automáticamente. Por lo que todo el carro conducirá a este puesto. Ahora vamos a tener una clase para ello. Por lo que se trata de tarjeta de bloque y también bloquear elemento de colección de tarjeta como su padre. Ahora agreguemos el contenido. El bloque, bloque de enlace de cartas, y tendremos algunas informaciones y descartar. Entonces primero vamos a crear el blog, y esto sostendrá todas nuestras etiquetas. Entonces démosle un nombre tags, wrapper e InDesign. Tenemos uno o dos impuestos aquí dentro. Entonces vamos a crear un libro de texto y luego duplicarlo. Por lo que el primero serán elementos destacados, por lo que la información sobre las publicaciones destacadas. Y el segundo sería la información sobre la categoría. Ahora otra depuración que sostendrá la imagen. Por lo que este es Cards image container. Y por dentro agreguemos un elemento de imagen. Y lo vamos a vincular a nuestras publicaciones de blog en un segundo. Pero primero, centrémonos en el estilo. Esta es imagen de tarjeta, así que vamos a aplicar esta clase. Otro d-block sostendrá la información sobre el título y extracto. Y por lo general antes de agregar cualquier contenido dinámico, empiezo con estilo. Entonces volvamos el comentario. Este texto de tarjeta de nombre de clase. En este contexto también se contará con dos bloques de licencia técnicos más. El primero estará sosteniendo nuestro título. Entonces vamos a regresar. Dale un nombre de clase, título de tarjeta. Y también tendremos un d-block más y eso sería pie de página de tarjeta, retorno de comando o entrar al pie de página de la tarjeta de nombre. Por lo que la estructura de la tarjeta es un poco compleja, pero una vez que lo tengamos, solo creará una estructura de tarjeta y luego se duplicará automáticamente para que tengamos encabezados por todas partes. Esos son gratuitos. Los encabezados gratuitos también tendrán párrafos y los rediseñaremos un poco más tarde. Por lo que tenemos extracto aquí. Y para el pie de página de la tarjeta, también añadiremos algunos libros de texto. Y eso nos permitirá sólo tener tres piezas de información sobre el autor así como el enlace a nuestros posts. Entonces primero, vamos a darle una tarjeta de nombre, autor, el segundo texto doc comando return. Se trata de un separador de carros, solo un elemento gráfico sencillo que agregará un poco más tarde. Y también Categoría de tarjeta que tendremos en la parte inferior. Entonces aquí está, toda la estructura de una tarjeta. Ahora todo lo que necesitamos aquí como algunos datos dinámicos. Entonces, empecemos de nuestro rubro tres, y ese es el título del artículo. Entonces consigue los textos de las publicaciones del blog y necesitamos el nombre. De acuerdo, Entonces esto es súper simple. Ahora el extracto y aquí días el extracto y también tenemos un enlace de colección al aire libre a las entradas del blog. Por lo que si vas a la configuración de este libro de texto, puedes vincularlo al nombre del autor. Y luego voy a poner Just in y luego el nombre de la categoría. Por lo que en esa categoría, también podemos seleccionar el nombre de la categoría porque de nuevo, las categorías están vinculadas a nuestra colección de publicaciones de blog. Por eso podemos obtener la información desde aquí. Nuevamente, vamos a utilizar 16 por nueve imágenes y esas se vincularán directamente desde esta colección. Y necesitamos vincular el elemento de característica, elementos destacados. Entonces cambiemos el nombre a destacado así como esto solo se va a tomar del nombre de la etiqueta. Por lo que esto está diseñado. El segundo es el desarrollo y el tercero, la tipografía. Esas tareas también están vinculadas a nuestra publicación de blog. Ahora vamos a restyled elemento destacado. Tiene clase de etiqueta subtitulado y bloque y se aplicará a ambos libros de texto. Entonces primero subtítulo y luego Comando Regresar una vez más o datos discretos y seleccionar etiqueta de bloque. Lo mismo vale para el otro Tiktok esto está capturando. Y a continuación, vamos a seleccionar la etiqueta de bloque como una clase combinada. Pero aquí lo que nos gustaría hacer es fuente dinámica del color de esta categoría. Y solo para que recuerdes, tenemos esos colores definidos para cada etiqueta y en la configuración de estilo dinámico para esta leyenda, podemos obtener ese color de fondo de. Y esto es lo táctico o está vinculado a nuestras entradas de blog. Por lo que está disponible aquí. Ahora, como se puede ver, desarrollo de diseño y tipografía. Tienen colores de fondo procedentes del color que hemos especificado en el CMS y la colección objetivo. Ahora lo que me gustaría hacer es decidir si está destacado subtítulo debe mostrarse o no. Entonces vamos a esta configuración de bloque. Y luego en visibilidad condicional, podemos sumar la condición. Por lo que queremos comprobar si la bandera destacada está configurada como propia y solo bajo esta condición el elemento destacado está presente. Por lo que ahora tenemos la estructura para nuestras tarjetas así como alguna fuente de datos dinámica del CMS. En la siguiente lección, haremos esta marcación. Nos vemos ahí. 14. Estilos de cartas: Hola ahi, Bienvenidos a la siguiente lección. Y en este, me gustaría mostrarles cómo peinar elementos dentro de nuestra tarjeta de bloque. Bueno, esta es una lección del estilo. Entonces si ya conoces el estilo del curso anterior, o simplemente te sientes maestro en el estilo, realmente no tienes que ver esta lección, pero me gusta mostrarte algunos consejos y trucos en cuanto a estilizar esta tarjeta de bloque. Este es el elemento más importante en nuestro blog porque esas tarjetas estarán presentes en muchas páginas diferentes. Entonces intentemos hacerlo, ¿verdad? Por lo que tenemos carrito de bloque aquí. Y para las propiedades de este elemento, me gustaría ajustar la pantalla a flex primero que podamos alinear elementos dentro de esta envoltura. Cambiemos la dirección a vertical para que los elementos se apilen uno encima del otro y luego tendremos la alineación establecida para estirar. Voy a salir justificado como está, pero vamos al tamaño y la posición. Ahora lo que queremos hacer es el primer día del desbordamiento de los elementos. Voy a poner desbordamiento a oculto en caso de que algo esté fuera del cuadro límite de esta tarjeta de bloque. Y esto es bastante importante. Voy a poner posición a relativa. Y esto principalmente porque quiero posicionar nuestras etiquetas las cuales son destacadas y diseñan aquí dentro de esta tarjeta de bloque. Y los voy a posicionar obsoletos. Ahora, vayamos a algunos ajustes para el fondo y cambiemos el color de fondo a blanco. Esta es nuestra marca 06 color. Y también voy a tener un radio fronterizo de 12 píxeles. Y para la sombra de caja, me gustaría agregar algo sutil de sombra y dejarlo por ángulo 180. La distancia sería de 15. Y luego voy a aplicar 30 pixel bear o 35 tal vez. Pero voy a bajar la opacidad del color negro. Entonces vamos a alfa aquí y ponerlo en cinco o 7%. Y sí, esta es la sombra que me gustaría tener debajo de mis tarjetas. Ahora vamos a asegurarnos de que tenemos más gruesos ajustados a puntero a lo largo de todo este elemento de tarjeta de bloque. Para que cuando el usuario pase el puntero sobre este elemento, sepa que se trata de un enlace. Y vayamos al envoltorio fiscal. Por lo que queremos posicionar esas etiquetas dentro del elemento de parte de registro que ya está posicionado relativo. Entonces todo lo que necesitamos para cambiar es la posición de envoltura fiscal a absoluta. Por lo que ahora tenemos esos elementos alineados y el envoltorio de impuestos se coloca dentro del elemento de tarjeta de bloque, que es relativo. Ahora para el caucho fiscal, voy a establecer la distancia desde arriba e izquierda, pero primero alinémoslo hacia arriba a la izquierda y luego cambiemos la distancia. Voy a tipo 16 y Px. Entonces lo voy a cambiar de porcentajes a pixeles. Estos serán 16 píxeles arriba y 16 píxeles a la izquierda alineados. Entonces también voy a establecer este índice Z solo para asegurarme de que siempre se puedan ver esas etiquetas. Y necesito seleccionar uno de los subtítulos y también establecer algún diminuto margen, por ejemplo, cuatro píxeles para poder difundir los elementos entre sí. Ahora esto va a ser interesante. Vamos a seleccionar la imagen de la tarjeta y vamos a crear imagen de tarjeta que se extienda completamente por el elemento que contiene elementos. Por lo que tenemos el trigo y la altura fijada al 100%. Y luego la quinta propiedad iré y la voy a poner a cubrir. Ahora la parte más importante, lo que nos gustaría hacer es cambiar la posición de este elemento de estática a absoluta. Esto estará absolutamente posicionado. El tamaño completo de los elementos padre. Entonces lo cambio a lleno para que se extienda a través de todas las fronteras. Y tarjetas propias, contenedor de imágenes, que es el padre directo de esta imagen de tarjeta. Voy a establecer el posicionamiento para que sea relativo. También para asegurarme de que este contenedor de imagen de costo tenga el ancho correcto, voy a cambiar su ancho al 100% de su elemento padre. Y ahora, gracias a esta magia, lo que puedes hacer es cambiar el relleno en este contenedor de imágenes de tarjeta, y luego revelará la parte de la imagen que quieres mostrar. Ahora si quieres tener a cientos de píxeles de altura de esta imagen, solo puedes ajustar el relleno a 200 o puedes cambiarlo a, digamos, 54% para tener valores relativos que te darán una mejor capacidad de respuesta de este elemento. Y esta estructura del elemento actual es realmente genial en cuanto tener al Carter sensible a través de todos los puntos de ruptura y cosas así. Entonces supongo que esto podría ser útil. Y ahora para los demás elementos, para nuestros textos de tarjeta, tenemos título dentro y encabezamiento y párrafo. Cambiemos el diseño a flex de nuevo y cambiemos la dirección a vertical. Para el alineamiento lo vas a dejar como está. Pero por justificadamente va a dejar espacio, vamos a establecer el espacio entre para que podamos tenerlo muy bien repartido por los elementos dentro. Y entonces lo que me gustaría hacer es cambiar este párrafo dentro. Déjame cambiar primero el fondo, necesito establecer el color de fondo en blanco o seleccionar uno de mis colores predefinidos. Pero lo que es más importante ahora, voy a establecer las propiedades de este párrafo para que pueda tener un poco más de espaciado entre el encabezado y el párrafo. Presionemos Comando Retorno y creemos una clase separada para este párrafo. Esto es como párrafo especial para nosotros. Entonces vamos a crear una clase de extracto de tarjeta que podamos aplicar un margen, margen superior de ocho píxeles también. Y también cambiemos algunas otras propiedades como las propiedades topográficas. Tenemos este conjunto de colores a uno de nuestros colores padres y queremos cambiarlo a algún color gris. Y obviamente podemos, ya sabes, escribir en valor hexadecimal. Pero lo que también podemos hacer es usar nuestras muestras predefinidas. Y siempre es mejor simplemente usar los colores que tenemos en el sistema. Entonces por ejemplo, este color gris oscuro, en lugar de crear uno nuevo. O si estás creando uno nuevo, solo recuerda mantenerlo en nuestra guía de estilo para que podamos usarlo de manera consistente en todo nuestro diseño. Ahora vamos a cuidar de carpeta de tarjetas. Contamos con cartulina autor, separador y categoría. Todos ellos tienen clases separadas. Y lo que me gusta hacer es establecer la propiedad inline-block cuatro, todos ellos, porque quiero mantenerlos en una línea y bloque en línea me ayudará a lograr eso. Todo lo que necesito hacer es por este separador de tarjetas, voy a fijar el margen al lado izquierdo y derecho. Por lo tanto, mantengamos presionado Opción en Mac y 6.5 píxeles o cuatro píxeles de margen. Y aquí necesito cambiar algunas propiedades que cambian el tamaño del texto a 10 y luego esconderme a 13. Vamos a tener las mismas propiedades tanto para separador de carros como para autor de tarjetas en cuanto a topografía. Entonces lo vamos a cambiar por una muestra de plata. Y ahora cuando lo miro, supongo que debería ser un poco más oscuro para que tengamos más contraste entre. El fondo y el autor y el para esa categoría, vamos a cambiar el tamaño, pero vamos a dejar el color como S porque este será el enlace a la categoría. Por lo que desde este enlace, alguien podría simplemente hacer clic en el enlace e ir a la categoría. Y este enlace podría ser como anular el enlace que tenemos como tarjeta de bloque. Ahora cambié ligeramente el margen para que sean más pequeños y supongo que nuestras tarjetas están casi listas. Bueno, tenemos que asegurarnos es que este artículo de colección del carrito de libros tiene el diseño establecido en flex. Y luego para la alineación de los ítems, queremos cambiar la alineación para estirar. Y gracias a eso, vamos a tener las cartas que se reparten de arriba a abajo del elemento de colección de tarjetas de bloque. Y la altura del fondo es la misma. Tenemos cuatro líneas aquí, tenemos tres líneas allá. Y todo se ve bien. Vamos a arreglar la posición del otro en un segundo. Pero lo que me gustaría hacer es solo previsualizar estos elementos en vistas móviles en tablet. Y ya podemos ver que esto está un poco demasiado lleno, sobre todo en el tamaño de tableta más pequeño. Entonces lo que nos gustaría hacer es probablemente en tablet, cambiar el diseño a eso, que sólo tenemos una tarjeta consecutiva. Pero primero, noté que tenemos este Arthur y aquí y sección y no alineado adecuadamente al fondo de este elemento. Y esto probablemente se debe a este contenedor de textos de tarjeta que no se está extendiendo a toda la altura del elemento padre. Por lo que esto es bastante fácil de arreglar porque el elemento padre, por lo que esta tarjeta de bloque tiene el diseño establecido a hechos en dirección a horizontal. Entonces gracias a esto, podemos establecer que ese dimensionamiento de cada niño crezca. Pero lo voy a hacer en vista de escritorio para que tenga esta propiedad heredada a todos los puntos de ruptura. Cambiemos el tamaño flex de este elemento para crecer del texto de la tarjeta. Y ahora se puede ver que todo está bien. Tenemos el autor y también la categoría que se muestra en la parte inferior del carrito. Ahora vamos a seleccionar carros de bloque menos, lo cual se acuerda. Voy a borrar dos columnas. Voy a dejar sólo una columna de tablet a móvil, horizontal y retrato. Y queremos aplicar algún tipo de margen o relleno. Ahora podemos aplicar esto un margen para bloquear menos tarjetas, pero creo que sería mejor simplemente aplicar esto a todo el contenedor de contenido. Y este contenedor de contenido se va a repetir a lo largo de nuestro diseño y desde la tableta de abajo vamos a tener sólo un relleno de este contenedor establecido en 12 píxeles. Para que en dispositivos móviles tengamos un poco de relleno al lado izquierdo y derecho. Entonces supongo que estamos listos con esto, pero ahora podemos cambiar fácilmente el relleno contenedor de imagen del carrito. Entonces papá, en diferentes dispositivos, tenemos diferente tamaño de la foto. Y gracias a este pequeño truco que hemos hecho con el relleno, puedes ver que es súper fácil cambiar el tamaño de esta foto. Y por ejemplo, en esta vista móvil cuando es demasiado pequeña, solo podemos aplicar un relleno más grande y aquí lo tenemos. Por lo que esta es una forma de crear tarjetas de blog a prueba de balas en Webflow. Probablemente hay un millón de otras formas en las que puedes acercarte a esto, pero creo que estas son bastante buenas soluciones, así que te animo a probarlo y te veo en la siguiente lección. 15. Secciones de página principal: Hola a todos, Bienvenidos a la siguiente lección. En este, me gustaría crear secciones para todas las secciones de categorías de libros de elementos que tenemos en categoría. Entonces marketing de software, móvil, y doctrina. Quiero mostrar un posts gratis de cada categoría. Y entonces lo que estoy haciendo ahora mismo es agregar un div. Y dentro de este div, estoy agregando este botón grande para que pueda enlazar a todos los artículos de esta categoría en particular. O en este caso tenemos artículos recientes. Yo solo quiero enlazar a todos los artículos de mi blog. Por lo que tengo este botón extra. Voy a darle a este d-block un nombre de clase de un envoltorio de botones CTA y tal vez agregue algunas propiedades como margen o tal vez tenga algún relleno dentro de este envoltorio de botones CTA. Y para la configuración del botón, lo que me gustaría, es como el Buttonwood que me gustaría hacer es cambiar los textos a ver, en este caso todos los artículos. Y como tipo de enlace, voy a seleccionar la página que necesitamos para enlazar a una página específica. En este caso particular, necesitamos seleccionar bloquear todas las publicaciones. Y esto sólo mostrará todos los posts de la sección de artículos recientes. Pero para todas las demás secciones, como categorías, marketing de software y móvil, voy a enlazar a la categoría específica. Entonces qué puedo hacer si tengo este boilerplate de esta sección de artículo reciente, solo puedo copiarlo y pegarlo un par de veces. Contamos con marketing de software, móvil y Blockchain. Por lo que podemos simplemente pegarlo cuatro veces y crear cinco secciones. Para la primera sección, pensemos primero en los ajustes de esta sección, y tenemos este título en la parte superior. Esta es la sección de encabezado, y este es un símbolo. Entonces si entro del símbolo y lo cambio para que se vincule dinámicamente a una de mis secciones desde CS. Será lo mismo en todas las instancias. Entonces necesito hacer clic derecho primero y necesito desvincular este símbolo, el símbolo. Por lo que presiona Comando, Shift a o simplemente desvinculado así. Ahora puedo editar las propiedades sin preocuparme que cambiará en todas partes de cada símbolo. Obviamente puedo cambiar el estilo y la clase de sección de encabezado se mantendrá consistente a través de todas las secciones de encabezado. Entonces el hecho de que realmente destruyera el símbolo no es tan relevante porque todavía tenemos las mismas clases para todos los encabezamientos y ellos heredarán esas propiedades. Entonces lo que queremos tener aquí es probablemente Blockchain, ¿verdad? Y cómo podemos crear, cómo podemos vincular esta categoría también, esta sección de encabezado. Bueno, esto es bastante complicado porque podemos crear una colección menos Robert Wright. Y entonces lógico sería enlazar con historias. No obstante, para esas categorías, realmente no sabemos cuál seleccionar de aquí sabemos, realmente no sabemos qué publicaciones se muestran a continuación. Obviamente podemos limitar los ítems a uno para que solo tengamos una categoría. Y lo que podemos hacer es probablemente filtrar esta categoría para que muestre la categoría exacta que queremos ver. Entonces la primera forma de hacerlo es quizás cambiar el orden de ordenación para solo tenerlo creado o actualizar fecha o así. Tengamos de nuevo a más antiguo. Y ahora tenemos software aquí, y esto es simplemente porque el software es la categoría más nueva en CMS. Si vamos a las categorías CMS, ves que el software está en la parte superior y por eso se está mostrando así. Entonces esta no es realmente la mejor manera de abordar esto porque aún no es enlace a los artículos de post blog que tenemos. Y el segundo artículo de colección. Y por cierto, poner este encabezado dentro de esta colección menos envoltorio con entradas de blog no es realmente gran idea porque tendríamos que filtrar. Tenemos tres posts, por lo que sólo mostrará tres títulos. Entonces tendríamos que deshacernos de alguna manera de dos más. Entonces a veces es simplemente mejor crear colecciones separadas, pero necesitamos encontrar la manera de vincular esas, esas colecciones juntas. De acuerdo, pero antes de eso, echemos un vistazo al envoltorio de lista de recolección de nuestras listas de tarjetas de bloque. Y para el elemento de colección, Vamos a configurar el filtro para que realmente tengamos filtro aplicado, para que realmente tengamos entradas de blog de una de las categorías. Entonces vamos a llenar eso por categoría. Y somos categoría igual a software, digamos, o podemos seleccionar de este desplegable cualquier otra categoría que tengamos, por ejemplo, marketing móvil o cadena de bloques. Guardemos esto. Y ahora tenemos artículos de blockchain aquí. Si tenemos más artículos y doctrina tendrá hasta tres elementos. Y esto es a prueba de balas. Esto es realmente genial porque cuando, por ejemplo, alguien cambia el nombre de la categoría a artículos de blockchain o seminario, que seguirá siendo dinámico y funcionará. Ahora tenemos que encontrar una forma de vincular este blockchain a nuestro artículo de colección con el título. Y potencialmente podríamos hacerlo con los filtros. Si agregamos un filtro aquí, obviamente podemos seleccionar la categoría con nombre que es igual. Y podemos teclear, solo podemos escribir el nombre de la categoría. Entonces tenemos blockchain aquí y obviamente trabajamos. Ahora si movemos el título a esta categoría y solo podemos eliminar el orden de ordenación. Y sí, podemos, no tenemos que limitar los ítems porque solo tenemos un elemento filtrado si movemos este encabezado a esta colección y luego seleccionamos, Obtener los textos de las categorías y necesitamos el nombre de la categoría aquí tenemos blockchain. El problema es que esta no es tanto solución a prueba de balas porque lo que teníamos que hacer, como habíamos dicho explícitamente, que queremos que la cadena de bloques sea el nombre de esta categoría. ¿ Y si alguien cambia el nombre de blockchain a artículos de blockchain? Como aquí se afirma, el nombre tiene que ser igual. No tiene que ser así o algo así. Tiene que ser igual a lo que ponemos aquí. Entonces esto realmente no es tan grande porque tenemos que ponerlo explícitamente en el campo de entrada. De lo que nos gustaría tener en lugar de este campo de entrada, nos gustaría tener menos. Porque cuando menos tengamos, entonces Webflow obtendrá automáticamente los datos correctos. Y esto es lo menos que teníamos en la colección de post blog. Entonces supongo que probablemente ya sabes la solución para este problema podría ser. Entonces en lugar de esto podría ser un poco contra-intuitivo. Queremos mostrar categoría, pero queremos usar colección de categorías, pero en cambio, usaremos la misma, la misma colección que usamos para las tarjetas de bloque, menos porque lo que tenemos aquí es la categoría de enlace a este post que podemos seleccionar de la lista. Y seleccionando de la lista, de nuevo, como una gran manera de lograr eso porque esto se mantendrá a prueba de balas. Y siempre que nosotros o nuestros clientes cambiemos algo en el CMS, podemos cambiarlo. Ahora. Ahora las categorías están bloqueadas, por lo que la fuente está bloqueada. No podemos decir realmente que queremos entradas de blog aquí y por qué está bloqueado. Bueno, hay que entender que cuando algún campo dentro de esta colección menos wrapper está conectado a cualquiera de los campos en CMS. Esto se verá nuestra fuente y no podemos modificarla. Entonces, en otras palabras, si ves una conexiones a púrpura aquí dentro de esta estructura, solo tienes que desvincular los elementos. Por lo que ahora tengo este getText de categorías desvinculadas. Y si vuelvo a mi colección menos envoltorio, ahora puedo cambiar las categorías. Aquí no hay más icono de candado, así que puedo cambiarlo a publicaciones de blog. Y esto evidentemente mostrará tantos artículos como tengo entradas de blog en mi CMS. Pero eso no es un problema porque obviamente puedo limitar eso con un solo artículo. Vamos a mostrar un elemento y empecemos en uno. Y ahora, gracias a esta conexión que tengo dentro de las entradas de blog, que tengo el enlace de categorías a las entradas de blog. Puedo seleccionar referencia de categoría, y ahora puedo hacer referencia a la categoría blockchain. Y esto es a prueba de balas. Ahora tendré el nombre que puedo enlazar. Seleccionemos el título y obtenemos textos de las publicaciones del blog. Y aquí tenemos los campos vinculados. Vamos a Categoría y vamos a enlazar el nombre de la categoría. Esto siempre mostrará el mismo nombre de categoría que tenemos a continuación para nuestras publicaciones. Entonces esta es la mejor solución. Y la segunda solución, la segunda forma en que se podría pensar como simplemente poner el elemento H1 dentro de esta envoltura de lista de colección para carro de bloques menos. Pero de nuevo, a veces lo es, es problemático. En ocasiones se quiere tener colecciones separadas en una, digamos sección. Y quieres vincular esas conexiones a diferentes elementos, pero conectados a una categoría CMS o a un ítem de lista CMS. Entonces aquí lo tenemos, ahora está hecho. A lo mejor dividimos esta lección para que podamos continuar en la siguiente y cambiar nuestro botón y también duplicar y crear unas categorías más. Te veré en la siguiente parte. 16. Secciones de página principal parte 2: Hola ahi, Bienvenidos a la siguiente lección. Empezamos justo donde lo dejamos en el anterior. Y ahora nuestro reto es tener este botón para enlazar a todas las publicaciones de la categoría que tenemos arriba. Entonces arriba tenemos blockchain por ahora, lo vamos a cambiar a software en un segundo, pero tenemos categoría y queremos vincularla. Y tal vez también queremos simplemente cambiar el nombre para que tengamos ver artículos de blockchain aquí. Y sabes que cuando seleccionas algo en Webflow, algunos textos, obviamente puedes crear un lapso para envolver esto en un lapso. Ahora tener un lapso nos permitirá crear una colección. Entonces usa la colección e inyecta el nombre de la categoría aquí para que tengamos vista artículos de blockchain o vistas después de artículos. Por lo que tenemos este panel de texto dentro del botón y el envoltorio de botones CTA. En este envoltorio, Vamos a posicionarnos aquí y presionar a a para crear colección al menos. Entonces queremos obviamente poner la lista de colección dentro de la ciudad, pero en wrapper y el ítem de la lista de colección aquí dentro, vamos a tener este span este botón. Primero hagamos doble clic y conectemos esto de nuevo, como explicamos en la lección anterior, realmente no queremos conectar estas dos categorías. En cambio, queremos conectarnos a las publicaciones del blog para que siempre tengamos este enlace y esté vinculado a categorías para que podamos mostrar el nombre que está nombrando a los elementos a uno. Y luego vamos a filtrar esto para que tengamos aquí el nombre de la categoría, nuevo, lo mismo que hicimos para el título. Tenemos el selecto con blockchain, por lo que es a prueba de balas, genial. Y el problema sería que es imposible usar esta colección de datos dinámicos en lapso. Pero primero pongamos el elemento de colección de final inferior. Si no puedes pasar el ratón y posicionarte correctamente, si es rojo, a veces lo mejor es copiar y pegar el elemento en lugar de intentar, ya sabes, simplemente moverlo. Entonces solo voy a copiar el botón y luego dar clic en el propio ítem de colección y pegarlo con Command V. Ahora está dentro y puedes eliminar el viejo. Entonces vamos a seleccionarlo y eliminarlo. Normalmente es como lo hago cuando realmente no puedo, ya sabes, posicionarme a mí mismo y al navegante. Y ahora tenemos este lapso de texto y teóricamente está en la colección y el elemento de colección. Debería tener la fuente de los datos que tenemos en CMS, pero simplemente no lo tiene, así que, oh, no lo tiene por ahora. A lo mejor en tu versión de Webflow, algunos nuevos lanzamientos, será arreglado. Pero por ahora, en realidad no puedo simplemente aplicar a un lapso. En cambio, obviamente podría aplicar esto al elemento grande del botón y obtener el texto del nombre de la entrada del blog y el nombre de la colección. Y aquí tenemos blockchain, pero no es realmente intuitivo. Debería decir Ver todos los blockchain o ver artículos de blockchain en lugar de solo blockchain. Entonces lo que puedo hacer es simplemente recrear la estructura de este botón en un bloque de enlaces. Entonces vamos a seleccionar y crear un bloque de enlace. Y recrear el fondo con elementos adecuados. Por lo que los libros de texto adecuados que crearemos tendrán un libro de texto en el que diremos. Una vista y luego tendremos los datos dinámicos provenientes de la colección. Y luego tenemos otro libro de texto. Entonces esto es, digamos aquí, vamos a peinar y configurar el bloque en línea antes de pegar otro porque queremos copiar y pegar y queremos tenerlo en una línea así que lo mejor es aplicarlo primero. Y habrá nombre de colección, por lo que XXX por ahora y después será ver artículos de blockchain. Y ahora lo que necesito hacer es tener este enlace. Sí, conectemos esto a las publicaciones del blog. Y luego conectemos esto con el nombre de la categoría. Eso debería mostrar correctamente la cadena de bloques. Además, necesito corregir un error tipográfico y necesito aplicar algunas clases probablemente aquí tenemos el bloque de enlace sin la clase, necesitamos usar la clase de botón probablemente. Entonces usemos el botón big class, y esto automáticamente creará un bonito botón para nosotros. Y para el cuadro de texto. Deshacernos de la clase de libro de texto. Y en cambio, voy a simplemente crear clase de texto de botón con color blanco y algunas propiedades. Digamos que mostrar bloque en línea, y usemos el color blanco para este texto. Lo que puedes hacer es simplemente eliminar las clases antiguas de los otros libros de texto, quitar y aplicar las nuevas. Texto de botón Así. Y también para el último libro de texto. Para este texto de cadena de bloque medio, necesitaría seleccionarlo y aplicar una clase combo para que podamos aplicar algún relleno o margen a su alrededor. Entonces digamos que esto sería categoría, pero en la siguiente categoría. Y ahora vamos a aplicar algún relleno quizá de cuatro o cinco píxeles de cada lado. Entonces voy a presionar y mantener pulsada Opción y, y darle un relleno de cinco píxeles. De acuerdo, ahora tenemos el botón reestructurar recreado. Podemos borrar el viejo y tenemos lo que queríamos. Por lo que la cadena de bloques ahora se vincula dinámicamente al nombre de la categoría. Y tenemos esta sección de categoría de bloque como plantilla. En realidad podemos usar para todos los demás, para todas las demás secciones de nuestra página. Permítanme también crear una clase combo aquí, sección de bloques. Y agreguemos un poco de relleno aquí, algún margen al fondo. Ahora se ve mejor. Necesitamos crear esta plantilla única. Podemos deshacernos de los viejos para que solo lo podamos reutilizar ahora y copiar y pegar. Y todo lo que tenemos que hacer en esos apartados ahora es cambiar la conexión a la categoría adecuada en cada tres de los elementos. Por lo que tenemos título de botón y también el contenido. Y necesitamos cambiarlo para que el primer elemento de colección esté vinculado a no cadena de bloques probablemente, sino a la primera categoría de software RSS, guárdelo. Entonces tenemos que ir a la segunda colección, menos goma y vincular esto al software también. Y también para el botón, recuerda que necesitamos cambiar el texto del botón. Esta vista artículos de blockchain en este envoltorio de lista de colección. Seleccionemos software y esto aplicará automáticamente el nombre del software a nuestro botón. Por lo que tenemos que repetir esos pasos para cada categoría ahora. Pero el concepto que he creado aquí es más importante que hacer clic en este momento, el concepto es que tenemos listas de colección teóricamente separadas para el botón y el título y las tarjetas, pero están inextricablemente vinculadas entre sí. Y si cambiamos algo, por ejemplo, el nombre de la categoría o reorganizamos los puestos. Todo esto será dinámico y trabajará en conjunto. No se romperá. Y eso es lo más importante. Si tienes CMS y tienes la opción de editor habilitada, alguien solo puede cambiar el nombre de las categorías, cambiar su nombre, los nombres de las entradas del blog, y reorganizarlas. Y esto siempre resultará en que tengas que arreglar todas las conexiones en tu, en tu página. Por lo que es mejor pensar de antemano y estructura discreta que permita esos cambios y se adapte dinámicamente. Ahora tenemos todas las categorías vinculadas, tenemos todo en su lugar. Usemos también el símbolo. Me lo voy a poner, en mis elementos corporales. Voy a usar este símbolo de pie de página en la parte inferior de la página. Y creo que la estructura para la página principal ya está lista. Podemos previsualizar esa estructura. Contamos con el artículo de la función. Todos los datos son dinámicos. Tenemos el menú que es Dinámico 2. Todo lo que tenemos que hacer es crear esta página de entrada de blog. Ya tenemos esto enlazado correctamente y tenemos algunos elementos CMS con posts de blog, pero necesitamos crear el diseño. Hagámoslo en la siguiente lección. 17. Página de publicaciones: Hola ahi, Bienvenidos a la siguiente lección. Estoy muy contenta de que estés aquí, sobre todo porque ahora que tenemos todo en su lugar, tenemos nuestra guía de estilo y ya sabemos trabajar con artículos de colección. Será súper fácil crear nuevas páginas y organizar nuestro blog. Ahora tenemos este menú. Cambiemos el nombre de menú fijo a bloque y podemos crear un símbolo fuera de él. Por lo que antes de crear cualquier página nueva, recuerda crear símbolos, para agregar nuevos símbolos, puedes agregarla desde el menú de símbolos y también puedes hacer clic derecho en el elemento para crear un nuevo símbolo, solo tienes que asegurarte de hacer clic en el menú de bloque en sí, haga clic con el botón derecho y luego creed símbolo, haga un símbolo de menú. Y de esta manera, tendremos este componente. Y este componente será el mismo en todas nuestras sub páginas. Ahora también vamos a copiar sección block hero y vamos a bloquear todas las publicaciones para crear esta página. En primer lugar, voy a ir a símbolos y usar nuestro menú de bloques que acabamos de crear y luego pegar sección look hero. Desde aquí, no necesitamos esta colección bonita envoltura. Vamos a eliminarlo, pero voy a usar este bloque de sección y contenedor y reservar tu título. Y dentro de este selector, solo voy a pegar lo que tengo en mi guía de estilo. Vayamos a los símbolos una vez más y usemos un símbolo de sección de encabezado. Esto es prácticamente perfecto porque tiene el diseño establecido en Flexbox y tenemos la justificación correcta. Por lo que esto encajará bien. Y ahora vamos a sus propiedades. Se puede ver que tenemos todas las anulaciones que podemos cambiar con el fin establecer o artículos aquí para los textos de subtítulos, vamos a utilizar texto de blog y descripción. Voy a dejarlo como está por ahora. Ahora para este título de héroe de bloque, lo que queremos hacer es agregar otra clase de combo. Entonces vamos a crear la clase que realmente no destruirá todas las demás instancias de este elemento cuando cambiemos algo. Por lo que siempre solo copio elementos y los pego sobre las diferentes sub páginas. Pero además de las clases existentes, si quiero modificar algo como el relleno aquí, solo estoy agregando otra clase. Si solo lo dejo tal como está, automáticamente modificará este elemento en la página de inicio también. Y realmente no quiero eso. Entonces vamos a tener un amontonamiento de 80 pixeles. Y aquí lo tenemos. Ahora reutilizamos tres elementos y podemos reutilizar aún más elementos, incluyendo esta sección entera de contenedor de contenido de bloque con colección menos goma. Cada vez que veo algo que se puede reutilizar en toda mi página web. Lo que hago es tratar de ponerlo en la guía de estilo. En algún lugar. En mis guías de estilo, puedo tener páginas separadas para todos los componentes, pero en nuestra estructura es bastante sencillo. En realidad no tenemos que tener páginas separadas, así que tal vez pongámoslo en este contenedor mientras tenemos tarjetas. Y ahora tengo este elemento reutilizable. Puedo darle un nombre de contenedor de carros de bloque y también crear un símbolo fuera de él más adelante para que pueda reutilizarlo. Pero por ahora es suficiente para que se quede en mi guía de estilo. Ahora lo que puedo hacer es volver a la página de inicio y copiar todo el contenedor de contenido de bloque que voy a, o tal vez sección entera que lo posicionará también en esta página de entrada de blog y pegarlo aquí. Vamos a esta página y vamos a dar click en el elemento cuerpo para seleccionarlo. Ahora Comando V para pegar toda la sección. Siempre es mejor pegar desde el elemento del cuerpo porque no tendrá ningún conflicto en los contenedores. Ahora como el título y el fondo, y aquí tenemos la colección menos envoltura. Todo lo que realmente necesitamos cambiar en la colección de estos ajustes de goma es no limitar los ítems porque queremos mostrar aquí todos los artículos de nuestro blog. Por lo que acabo de desmarcar los artículos de límite. Y aquí lo tenemos, está listo. El bloque 0 post pages casi hecho. Lo que necesito hacer es agregar otra clase encima de esta sección de categoría de bloque. Nuevamente, no quiero modificar la sección que tenía en la página de inicio para que esté usando la clase combo para hacerlo. Ahora, tenemos margarinas tanto para la sección B, héroe, el héroe y la sección de categoría. Por lo que primero necesitamos seccionar libro hero, seleccionar esto y añadir otra clase combo para que podamos deshacernos de este margen inferior. Y vamos a tener bloque o posts aquí. Y eso se deshace de la red inteligente. Podemos deshacernos del todo y, y reducirlo a 0 píxeles. Y luego desde la sección de categorías, buscar sección de categoría, podemos cambiar este margen. De nuevo, tenemos clase combo separada para ello por lo que no vamos a cambiar nada en nuestra página de inicio. Y ahora tenemos al Morgan Asper ese diseño. ¿ Qué más queremos hacer aquí? Bueno, puedes crear en esta colección menos goma. También puedes crear paginación significa que cuando vayas a la configuración, puedes consultar esta opción de pequeños ítems de paginación y luego podrás decidir cuántos elementos de la colección quieres mostrar por página, tenemos cinco ítems aquí. Puedes previsualizar dos páginas que se generaron porque tenemos 10 publicaciones, por lo que tenemos dos páginas y puedes cambiar entre páginas. Y como puedes ver también, tenemos en la parte inferior, los botones anterior y siguiente que están siendo exhibidos por Webflow, podemos tener nueve ítems para que tengamos tres filas. Se ve bastante bien. Y también al hacer clic en este botón Siguiente, irás a la segunda página. Sólo tenemos un elemento aquí ahora, obviamente se puede estilo los botones siguientes y anteriores. Si selecciona este botón, también puede mostrar el recuento de páginas, y esto mostrará el número de páginas en la parte inferior del botón. Entonces aquí tenemos 2, segunda página de dos, y aquí tienes FirstPage de dos. Y si vas a la página correspondiente y seleccionas este botón, puedes darle estilo como quieras. Para nosotros, ya tenemos botón big class y también clase de esquema que podemos usar por completo para crear el botón de acuerdo a nuestra guía de estilo. Y lo mismo que queremos hacer al botón anterior, pero para tenerlo seleccionado, Vayamos quizá a la segunda página y veamos qué estamos haciendo. De nuevo, aplique este pico inferior clase y luego clase combo de contorno. Y aquí tenemos nuestros estilos de botones para este recuento de páginas. Creo que realmente no necesito esto, así que solo voy a desseleccionarlo, pero puedes peinarlo de todas formas que quieras. Y para todo el elemento de paginación que puedes seleccionar desde el Navegador. Ahora, vamos a establecer la clase para esta nación bolsa de libros elemento. Y también vamos a aplicar margen a la parte superior de este elemento. Digamos 26 píxeles. Ahora vamos a previsualizar nuestra paginación anterior y siguiente página, funciona. Entonces todo está listo. Ya casi estamos listos. Por cierto, si quieres usar algún tipo de paginación diferente con números, algo así. Bueno, realmente no es posible en Webflow ahora mismo, pero la paginación que tenemos con solo unos clics, creo que eso está bastante bien. También asegurémonos de que el orden de ordenación sea correcto para esta página de oboes en bloque en particular. Y es porque es de lo más nuevo a lo más antiguo basado en la fecha publicada. Entonces eso está bien. Realmente no necesitaba cambiarlo. Una cosa más que puedo agregar a este libro, oh, la página de mensajes es mi pie de página. Y puedes hacerlo seleccionando el elemento del cuerpo y entrando en símbolos. O simplemente puedes presionar Comando E y luego buscar pie de página. Esta es una forma realmente útil de encontrar elementos Comando E, y luego encuentras cualquier cosa en Webflow. Como puedes ver, tengo todas las publicaciones seleccionadas en este momento porque estoy en esta página. Y si quiero cambiarlo, este es un componente. Significa que si hago cambios en HTML, eso estará disponible en toda la página. Entonces si lo cambio a 0 artículos y vuelvo a nuestra página de blog, verás que aquí también hay todos los artículos. Por lo que estamos bastante listos con esta página. Y como puedes ver, reutilizar elementos y técnicas que hemos aprendido es realmente eficiente. Nos vemos en la siguiente lección. 18. Página de categorías: Hola allá y bienvenidos a la siguiente lección. Ahora vamos a trabajar con páginas dinámicas CMS. Entonces vamos a las páginas de colección CMS. Y aquí tenemos plantilla de categorías, esta página es morada y esas son páginas especiales generadas por CMS. Te permitirán previsualizar los artículos individuales. Por ejemplo, ahora mismo estamos previsualizando la cadena de bloques y los artículos. Y también estas páginas tiene algunos superpoderes más. Te los voy a mostrar más tarde. Ahora mismo vamos a crear una estructura básica para estas plantillas de categorías agregando nuestro menú así como nuestro pie de página y en el medio, me voy a pedir prestado algo de bloque o publicaciones. Este encabezado es bastante genial. Entonces vamos a seleccionar héroe de bloque de sección, y vamos a pegarlo en nuestra plantilla de categorías entre el menú de bloques y el pie de página. Ahora volvamos a bloquear todos los posts para que podamos copiarlo aún más. Ahora como puedes ver, somos un poco perezosos. Realmente no queremos crear nuevos elementos. En cambio sólo estamos copiando y pegando. Pero esto es realmente bueno porque tenemos todo en su lugar con las mismas clases y los mismos componentes. Cuando lo cambiemos en una página, se cambiará automáticamente en todas las demás páginas. Y vamos a hacer este héroe de bloque de sección en un segundo. Pero primero, asegurémonos de que tengamos sección de categoría de bloque vinculada a la sección adecuada. Seleccionemos la colección menos envoltura. Y aquí tenemos que filtrar. Y estas páginas moradas, las páginas CMS generadas automáticamente, tienen esta gran ventaja de que básicamente pueden enlazar al elemento actual, al ítem actual en CMS. Entonces en este caso, tenemos categorías vinculadas, por lo que podemos enlazar a categoría actual. Esto es bastante único a estas páginas moradas. Y gracias a eso, podremos hacer click a través del menú de marketing de software y móvil. Y automáticamente obtendrá el post sus artículos de categoría corrientes. Entonces esto es bastante guay. Vamos a dejarlo a categoría corrientes y guardarlo. Y todo lo que necesitamos cambiar en este momento es la sección de artículos antiguos aquí. Tenemos que llegar a este viejo encabezado de artículos y reemplazarlo por categoría actual. Pero lo que podemos hacer es pedir prestado el elemento, supongo que la página de blog que hemos creado aquí tenemos títulos de esta sección y esos son colecciones y enlazan con el elemento apropiado. Por lo que podemos pedir prestada toda la colección menos desde aquí. Pero por cierto, podemos usar colecciones y eso lo estoy haciendo para mostrarles que también podemos usar colecciones en la página de categorías. Pero si estás en la categoría paga en esta página morada, realmente no necesitas cobranza. Simplemente puedes seleccionar el encabezado y usar las categorías de datos de inmediato. Por lo que básicamente hay dos formas de hacerlo. Simplemente seleccione el encabezado o, y utilice los datos del nombre de la categoría de recopilación. O puedes usar la colección y luego puedes vincularla, en este caso dos categorías corrientes y tenerla mostrada como blockchain. Dos vías. Solo quería mostrarte eso, y solo quiero que sepas que ni siquiera necesitas esta colección para que esto funcione, necesitas desvincular la instancia del símbolo, seleccionar el encabezado y cambiarlo en propiedades. Al revés es utilizar la colección. Y también puedes usar colecciones en estas páginas moradas. Entonces ahí lo tienes. Hay algunas cosas especiales sobre las páginas moradas que hemos explorado en este momento. Todas las categorías están funcionando y mostrando nombres correctos así como artículos conectados a esta categoría con paginación. Por lo que estamos casi listos. Lo que podemos hacer es crear también las páginas separadas para autores y etiquetas. Pero este sería el mismo proceso como repetirnos. Entonces supongo que puedes hacerlo por tu cuenta. Y en qué nos vamos a centrar como plantilla de publicaciones de blog, que es la página con contenido real de nuestros artículos. Entonces, centrémonos en eso en la siguiente lección. 19. Página Entrada de blog: Hola allá, Bienvenido a la siguiente lección, y aquí estamos en XD. Esta es la maqueta para nuestras publicaciones de blog de una sola página. En la parte superior tenemos una imagen que el contenido. Entonces en la parte inferior tenemos algunos artículos enlazados probablemente de la misma categoría. También hay un título y la información sobre cuándo se creó este post por quién y a la derecha, sólo tenemos una sección estática con newsletter y la sección que nos permitirá compartir en redes sociales. Entonces sin más preámbulos, empecemos y creemos nuestra página de plantillas de publicaciones de blog. Esta es la página morada. Significa que aquí podemos cambiar entre los elementos de bloque. Aquí tenemos el primer ítem de libro, pero solo podemos ir a cualquier artículo que tengamos. Recuerda que esos eran artículos generados automáticamente por Webflow y nuestro CMS. Por lo que ni siquiera tenemos que crear algunos datos ficticios. Podremos cambiar entre ellos. Vamos a crear la estructura básica de esta página. Entonces vamos a agregar un componente que es nuestro encabezado, también un ESSEC, vamos a agregar un pie de página, pero entre necesito esta sección se convirtió en 0. Entonces solo estoy copiando esta sección y la voy a pegar en mi plantilla de publicación de blog. Y por cierto, ya les dije en la lección anterior que realmente no necesitamos usar elementos de colección en páginas moradas. Por ejemplo, cuando tenemos, digamos encabezado, podemos obtener texto de las entradas de blog para este elemento sin tener que tener estos elementos de colección. Por lo que podríamos hacerlo también en la lección anterior. Pero quería mostrarte unas colecciones. Pero en las páginas moradas podemos utilizar los datos de la colección directamente sin necesidad de tener esta colección menos rapero, lo que voy a dejar aquí dentro es sólo la estructura con imagen de héroe de bloque y cuatro loci rotados. Voy a añadir otra clase combo para que no modifique nada en la página de mi libro. Y esto serán entradas de blog. Y ahora cambiemos las propiedades de esto para tener la altura de 80 pixels diseño Asper. Y para la imagen de héroe de bloque, también quiero agregar una clase combo. Vamos a crear blog post-clase. Y hagamos que esta imagen se extienda por todo el contenedor. Entonces vamos a tener un ancho del 100%. Y también necesitamos cambiar el radio del borde para que tengamos un radio de 12 píxeles en cada esquina. Al copiar eso, esta imagen ya está ligada al artículo. Entonces cuando cambiamos el artículo, podemos previsualizar diferente imagen. Tenemos diferentes fotos para cada artículo. Ahora agreguemos otro elemento que vamos a crear sección. Y dentro necesitamos un contenedor. Esta sección será sección para nuestro artículo. Y quiero dividirlo en dos columnas y crear esto desde cero. Sabemos por los elementos de reutilización porque es bastante único. Voy a darle un nombre, sección de publicaciones de blog. Y para el contenedor en sí, Vamos a crear contenido de publicaciones de blog para este contenedor, también quiero establecer el ancho máximo para que sea 1080 porque quiero que sea un poco. Más pequeño que toda la página. Yo quiero que los contenidos sean legibles. Lo dividiré en dos columnas, pero aun así quiero tener, digamos, 70 o 90 sign-ins por línea para que sea más cómodo de leer. Además, estoy agregando 20 píxeles de relleno en cada sitio para este contenedor de entrada de blog, esto es bastante genial porque en tablet y móvil tendrá este relleno set a 20 también. Y esto será responsivo ahora, dentro de lo que podemos usar como ya sea columnas o podemos usar d-block simple con Flexbox o podemos usar grid. Y creo que esa grilla es una especie de la mejor, la más versátil No podemos escuchar. Entonces, vamos a estar de acuerdo con una fila y dos columnas. Ahora podemos acceder a este saludo Que aplique estos cambios, cambie el nombre de la clase a la sección de entrada de blog. Vamos a cambiarlo a la avaricia post blog. Y ahora editemos de nuevo estas grandes y cambiemos las fracciones, cambiemos el tamaño de las columnas porque quiero que esta primera columna sea, digamos 1.75 o dos fracciones, y esta última sea una fracción para que tengamos esta barra lateral aparte que es más estrecha que el contenido real. Y dentro de la rejilla vamos a sumar a los bloques. El primero será para nuestro contenido de entrada de blog. Cambiemos el nombre de la clase. Y el segundo, vamos a crear este d-block. Eso va a ser para amarillo. Pongámoslo en las entradas del blog, saludemos, y eso va a ser para nuestro apartado, apartado y boletín además de compartir opciones. Por lo que tenemos la estructura adecuada ahora, sección contenedor, saludo y luego contenido div. Esta es la estructura que yo mayormente, durante la mayor parte del tiempo utilizo para este tipo de tareas. Y ahora lo que quiero hacer es recrear este título y subtítulo, así como información sobre la fecha y el autor. Por lo que realmente no tenemos nada que podamos reutilizar. Entonces vamos a crear otro d-block que va a ser bloque de título de post blog. Dentro de este cuadro de rotulación, necesito la estructura del título. Entonces voy a usar el libro de texto aquí. Entonces nuevamente presione a a para agregar otro elemento que sería nuestro encabezado. Y de nuevo, puedes usar la búsqueda en Webflow para agregar elementos. Realmente no tienes que seleccionarlos desde el menú. Puedes presionar Comando E y luego escribir párrafo o encabezamiento, y lo vas a tener. Aquí tenemos por alguien, por autor y luego en la fecha específica, por ejemplo, Gen 5. Ahora lo que me gustaría hacer, necesito cambiar. Necesito tener estos datos dinámicos. Y como les dije antes, Esto no se puede hacer, al menos en mi versión de Webflow con un lapso. Por lo que sería la forma más fácil de envolver esto con span y luego ir a ajustes y luego conectarse a los datos apropiados de CMS. Pero no es posible. Entonces necesito borrar eso y necesito crear tres elementos tal como lo hicimos, igual que lo hicimos para el botón. Necesitamos crear un bloque de texto múltiple. El primero contendrá la información al respecto. Vamos a darle un nombre título, blog, post. Y el primero tendrá la información sobre el autor. Cambiemos esto a bloque inline-block. Entonces vamos a tener la información de la fecha. Así que vamos a asegurarnos de que tenemos propiedad configurada correctamente antes de copiar y pegar eso varias veces. Cuándo usar gris oscuro para esto. Y ahora podemos copiar y pegar esto dos veces o tres veces todavía porque necesitamos BY y luego el nombre del autor. Además, necesitamos dividirlo con texto encendido. Entonces vamos a tener la fecha adecuada. Está bien. Entonces sí, eso es bastante inconveniente que tengamos que hacerlo así. Pero como escritor, necesitamos algún margen al lado derecho. Cuatro o cinco píxeles suele ser suficiente para un espacio. Y ahora nuestra estructura de rumbo está lista. Tenemos pocos libros de texto. Seleccionemos el primero. Esto está subtitulado, así que vamos a presionar Command Return y utilizar nuestro título de clase existente de la guía de estilo. Y creo que el bloque de título de la publicación del blog está listo. Echemos un vistazo, mira el contenido de la publicación y agreguemos otro elemento aquí que sería párrafo. Y este párrafo es especial. Entonces vamos a crear una clase para ello, blogposts extracto. Y vamos a crear margen a la parte inferior y a la parte superior. Vamos a sumar 32 píxeles de margen. Además, necesitamos cambiar algunas propiedades de texto de acuerdo a nuestro diseño. Entonces cambiemos la fuente, el peso y el tamaño. Usemos 22. Y para la altura de línea, vamos a usar 32 píxeles. Y esto es según nuestro diseño. Ahora volvamos a posicionarnos en el contenido de la entrada del blog y añadir un elemento de texto enriquecido. Hemos llegado a texto en nuestra base de datos CMS. Por lo que el tipo del campo que utilizamos para el contenido del artículo se alcanza texto. Por lo que ahora podemos usar este bloque x alcanzado para formatear toda la estructura del artículo. Y esto es bastante cool porque alcance x blog tiene realidad estilos separados y podemos darle estilo en nuestra guía de estilo, y ya lo hicimos tenemos artículo de blog como clase para nuestro elemento de texto enriquecido que debe ser utilizado en las entradas de blog plantilla. Vamos a seleccionar este bloque de texto enriquecido y darle una clase de artículo de blog y lo hace. Por lo que lo tenemos ahora copiado y los tiempos son los mismos que en nuestra guía de estilo. Y ahora nuestra estructura está casi lista. Ah, tenemos que hacer es agregar otro componente que será nuestro pie de página y también crear una estructura para las acciones del sitio. Entonces antes de hacer eso, tal vez vamos a seleccionar los elementos a los que queremos aplicar datos dinámicos. De nuevo, tenemos esta página morada por lo que realmente no necesitamos colecciones para vincularla a los datos de la colección de post blog, podemos obtener el texto de la entrada del blog aquí. Y esa sería nuestra leyenda. Por lo que necesitamos simplemente desplazarse por el nombre de la categoría. Y como subtítulo, vamos a usar el nombre de la categoría para el encabezado real. Utilizamos nombre de los puestos. Y aquí tenemos algunos datos dinámicos también, gracias a las conexiones que hemos hecho en nuestro CMS, tenemos al aire libre y todo lo demás vinculado a la colección de post blog. Y así es como podemos obtener estos datos de CMS para la fecha que tenemos aquí dos fechas agregadas automáticamente por CMS, actualizadas y también publicadas en. En este caso específico, por supuesto, queremos utilizar publicado en y también Webflow. Vamos a dar formato a esta fecha aquí tenemos junio de 2006, pero podemos cambiar cómo se formatea y muestra estos datos en nuestro bloque. Son pocos los formatos diferentes que podemos seleccionar. Como puedes ver, muchos de ellos en realidad, podemos mostrar toda la fecha. Podemos usar sólo mes o día, y sí, podemos hacer lo que queramos con esta fecha. Esto es bastante versátil. Dejémosla pierna como S, y ahora saquemos la copia de CMS para nuestro extracto de post blog. Voy a vincularlo al extracto. Y para el artículo de bloque, necesitamos vincular todo el artículo al campo que tenemos. Y esto es contenido. Se puede ver que se llega a este elemento de texto. Por lo que el tipo de esta propiedad en el CMS también es texto rico y eso nos permitirá simplemente vincular los datos de este campo a nuestro contenido de post blog. De acuerdo, entonces aquí tenemos datos dinámicos al lado izquierdo de nuestra página de entrada de blog. Si cambiamos las publicaciones, ahora, se puede ver que tenemos título diferente, sección diferente y autor y así sucesivamente. Entonces todo está funcionando correctamente. Y de esa manera en las páginas moradas, solo podemos seleccionar diferentes elementos de CMS y lo vemos todo. Ahora en la siguiente lección, todo lo que necesitamos hacer en esta página es crear acciones del sitio que serán boletines y opciones de compartir. Nos vemos más tarde. 20. Apartado de página: Oye, qué bueno verte en la siguiente lección. Y si crees que podrías perderte alguna lección en el medio, Nope, ese no es el caso. Acabo de crear este boletín de goma y envoltura social justo en medio de lecciones porque es una estructura súper simple que ya conoces del curso básico. Entonces pensé que sería mejor usar tu tiempo no solo para crear contenedores y alineaciones, sino para mostrarte algo realmente importante y algo más emocionante que esto. Y esta es la estructura de goma del boletín. Contamos con párrafo y bloque de forma. Dentro de este formulario, sólo tenemos un correo electrónico. Lo que hice es que acabo de copiar eso desde el pie de página y cambiar ligeramente el tamaño. Después tenemos envoltorio social con párrafo y d-block con tres iconos de redes sociales. Esos son enlaces y al pasar el cursor, tienen este otro estado que solo cambiará el color del icono. Eso es todo. Estructura súper simple y podemos continuar, podemos hacer que esta estructura se fije en nuestra página web. Entonces vamos a la propiedad de posición y podemos cambiarla a fija o pegajosa. Hemos usado fijo para nuestro menú de navegación para simplemente acoplarlo a la parte superior de nuestra página web. Pero la diferencia entre fijo y pegajoso es que pegajoso funcionará y simplemente poner este elemento en su lugar, dependiendo de la subasta del usuario, dependiendo de la posición de desplazamiento, desplazamiento de nuestro sitio web. Entonces si echamos un vistazo a este píxel muy superior del navegador y a las acciones de Pixel de la vista Topsy. Podemos simplemente hacer un dependiente el uno del otro cambiando esta propiedad para dejar decir 0. Esto hará que se pegue en la parte superior del navegador. Nuestro píxel superior de este sitio acciones alcanza el elemento superior del navegador. Ahora 40 alineación voy a usar inicio en caso de que esto sea avaricia para que esto funcione correctamente. Y ahora tengo este set a 0. Entonces cuando esos temas la acción fuera del sitio alcanza el píxel 0 del navegador. Por lo que la parte superior del navegador, se quedará pegada en esta misma posición. Lo que queremos hacer es compensar esto un poco para que tengamos el espacio para nuestro menú de navegación así como algunos, un poco de relleno abajo. Entonces vamos a tener 100. Y esto compensará el punto de adherencia inicial de los elementos de seducción a 100 píxeles desde la parte superior. Entonces cuando lleguemos a 100 desde arriba, se quedará como S. Así que es aún mejor previsualizar eso usando nuestro comando de vista previa Shift P. Y aquí lo tienes. Entonces ahora está muy bien atracado al lado derecho. Y esto es básicamente todo lo que tenemos que hacer para que este elemento se pegue en este lugar. Mientras tanto, he notado que en mi diseño, también tengo este elemento TOC en la foto. Por lo que puedo pedir prestado el elemento TOC con esta colección. Probablemente. Hagamos que lo copien y peguen en nuestra plantilla de publicación de blog. Tengamos aquí este envoltorio de impuestos. Esta está configurada para ser la posición absoluta 16, 16 píxeles. Ahora está posicionado al cuerpo. Pero si cambiamos posición de héroe de bloque titulado, para que sea un familiar, ahora se convierte en el poder relativo. Y para este envoltorio fiscal, y todo se ve realmente bien. Por lo que en estas etiquetas dentro estamos mostrando la etiqueta así como elemento destacado dependiendo de si este post está configurado como destacado en nuestro CMS. Recordemos, vayamos a su configuración. Y aquí tenemos la condición cuando la característica está encendida , tendrá esta característica mostrada. A ver si funciona. Vayamos a nuestras entradas de blog. Colección y eso es seleccionar esto muy ambos. Se trata de 15 mejores cuadras a seguir. Y vamos a cambiar característica de barrido, cambiar a encendido, Guárdalo. Ahora realmente no tenemos que publicar para poder ver eso en nuestro diseñador. Y destacado ahora se muestra por lo que todo funciona correctamente. Pero si quieres ver eso en tu página de trabajo, tendrías que publicar esto y luego puedes previsualizar. De acuerdo, ahora lo otro que me gustaría hacer es en la parte inferior de la publicación, me gustaría mostrar la lista de post.html vale la pena leer. Por lo que iré a la página del blog y copiaré toda esta categoría de bloque y la pegaré a nuestra plantilla de post de blog. Entonces vamos a seleccionar el elemento del cuerpo, pegarlo hasta el fondo. Y veamos este apartado. Esta sección se hace en base a la colección, al menos artículos y no necesariamente tengo que usar colección menos en las páginas moradas, pero sí puedo. Entonces, ¿por qué no? Por lo que ahora necesito cambiar este rubro. No quiero que sea dinámico. Entonces, desmarquemos este getText de la entrada del blog. Y digamos que va a ser seguir leyendo tres puntos y borrar el fondo. No necesito el botón. Reposicionemos esta sección por encima del pie de página. Y ahora todo lo que necesito hacer es asegurarme de que tengo el post correcto mostrado aquí. Si reviso la colección menos ajustes, verás que obtiene los posts de categorías, software, lo que tengo que hacer, y no puedo hacer eso cuando estoy del lado morado, es seleccionar esta categoría de blog actual publicaciones. Por lo que automáticamente sabrá inteligentemente que estoy en este software dentro de la categoría software o blockchain o marketing. Y si lo cambio, digamos a este post, aquí tenemos los posts del software. Si lo cambio por el otro, esa es categoría indiferente. Ahora podemos ver los posts desde el marketing. Entonces esto es bastante guay. Todo obviamente, puedes determinar cuántos elementos te gustaría mostrar aquí y puedes determinar el orden de ordenación, que ahora es de más reciente a más antiguo para la fecha de publicación. Entonces, vamos a publicar nuestro sitio web y vamos a previsualizar eso en el navegador. Después de publicar, puedes ir a la página de inicio y puedes ver que tenemos esta publicación destacada, la más nueva con la bandera destacada que se está mostrando dinámicamente. También tenemos todos los artículos y artículos recientes de diferentes categorías aquí. Entonces a continuación tenemos artículos, artículos recientes solo de categorías específicas. Y además contamos con enlaces y botones que enlazan a la página adecuada que nos permitirá mostrar ya sea todos los artículos de nuestro blog o los artículos de categoría específica a esta categoría, también puedes ir desde el menú. Y por último, si quieres previsualizar el post exacto, el artículo exacto, solo tienes que dar click en este artículo y de nuevo, todos los datos aquí son dinámicos. Tienes el contenido de la publicación e información fotográfica sobre otras publicaciones que vale la pena leer. Y supongo que la estructura base de nuestro sitio web ya está lista. Y ya sabes, todo sobre colecciones CMS y páginas CMS. 21. Configuración de búsqueda: Hola allá, Bienvenido a la siguiente lección y acceda a nuestra barra de navegación. Entonces este es un componente de menú tipo. Dentro de ella contamos con Sección de Menú con marca y menú de navegación. Y en esta sección, me gustaría agregar un componente específico desde el otro menú. Se trata de componentes de búsqueda, así que vamos a dar click en Buscar. Añádalo aquí, y ahora podemos restyle y podemos editar los ajustes de búsqueda. Por lo que esta es oleada que nos permitirá buscar los elementos CMS y mostrarla en la página de resultados de búsqueda separada. Te voy a mostrar cómo personalizar tanto el componente de búsqueda como esta página de resultados de búsqueda. Ahora, lo que queremos hacer como posicionar los elementos, por lo que tenemos esta oleada y dentro hay una entrada y botones. Por lo que para la descarga podemos mostrar, ajustar la pantalla a flex y luego alinearla y justificarla al centro y al centro. Aquí tenemos un relleno extra que podemos restablecer. Basta con opción hacer clic en el elemento para restablecerlo en este número, o simplemente seleccionar 0 aquí. Y para el botón de búsqueda, también queremos restablecer el relleno o cambiar ligeramente para que tengamos relleno de siete o seis píxeles. Por lo que esto está en línea con el campo de entrada de búsqueda. Ahora para todo el componente, supongo que tenemos algo de relleno extra aquí también. Vamos a restablecer. Dice seleccionar 0. Y ahora podemos restyle ligeramente para que tengamos un bonito estilo para este elemento, tanto por su estado estático como por el estado hover. Lo que me gustaría hacer es establecer el estilo de borde en sólido. Y quiero establecer el borde sólido al fondo de la entrada de búsqueda. Seleccionemos este tal vez gris oscuro, gris oscuro, y color. De acuerdo, también el mismo estilo para la frontera que me gustaría tener para el botón de búsqueda. Ah, está bien. Tengo que poner el estilo a sólido, ¿verdad? Y para el botón de búsqueda, voy a hacer lo mismo. Y cambiemos el color a transparente, este color de fondo. Y pongamos el fondo del borde para que sea únicamente y este color gris oscuro, vale, y más adelante voy a cambiar la opacidad de este elemento en función de que el usuario se cierne sobre el elemento de búsqueda. Pero lo que me gustaría hacer en este momento es cambiar el botón de búsqueda en un icono. Voy a ir a Configuración del proyecto para mi sitio de flujo de trabajo e ir a fuentes. Necesito instalar fuentes. Ya tengo instalado del curso anterior para que puedas consultar el curso básico y cómo instalar fuentes personalizadas. Lo que hice es que he instalado este Font Awesome haciendo clic en el botón de subir y solo instalando las fuentes TDF. Tengo FAA por un 100 marcas por ciento novecientos. Ahora puedo usar, para que pueda usar iconos de Font. Impresionante, Déjame buscar un icono de búsqueda y ahora copiar este glifo de iconos al portapapeles. Entonces vamos a copiar glifo Unicode. Haga clic en eso. Y ahora tengo este ícono listo para ser utilizado en mi sitio web o en mi página. Adelante y acceda al elemento de búsqueda. Una vez más, necesito eliminar todo lo que hay ahí dentro y pegar este glifo. ¿ De acuerdo? Pero ahora también necesito cambiar la tipografía para que la fuente aquí sea FA, SO IT noche cientos. Y obviamente necesito cambiar el color de la fuente a un color gris oscuro. Una vez más, vamos a dar click en esto y aquí tienes el ícono. Ahora podemos ajustar, ajustar el tamaño, el tamaño de la fuente para cambiar el tamaño del ciclo. Y así es como aplicas iconos impresionantes de fuentes personalizadas a los elementos que ahora puedes usar como botones, por ejemplo, en el menú de búsqueda. A continuación, vamos a ajustar este azulejo para que tengamos el espaciado correcto. Posicionémoslo junto al logo. Esta quizá no sea la mejor manera de posicionarla. Y también tendrías que revisar las versiones de tablet y móvil. Pero te voy a dejar con eso. Esto no es lo más importante, pero lo que vamos a hacer es crear esto en estado hover tanto para la entrada de búsqueda como para el botón. Y lo que vamos a hacer es por todo el componente de búsqueda, vamos a bajar la opacidad a cerca del 40 por ciento en este estado estático. Y mientras se cierne sobre este elemento, lo vamos a cambiar a un 100 positivo. Ahora si presionas Comando Shift P o haces clic en el icono para previsualizar, puedes pasar el cursor sobre este elemento. Y aquí tienes bonito efecto. Si quieres que este efecto sea animado, también puedes crear el efecto de transición, o puedes crear tu propia animación personalizada en Webflow. Esto es algo que ya hemos discutido en el curso básico o aquí en la configuración tienes el botón para ir a la página de resultados de búsqueda. Y alternativamente se puede hacer clic en las páginas y en las páginas de utilidad. Ahora tienes página de resultados de búsqueda que puedes diseñar y puedes ajustarla a tus necesidades. Aquí tienes el contenedor, hay un encabezado con resultados de búsqueda. Es estático. Y lo que me gustaría hacer es crear una nueva clase para este contenedor de resultados de búsqueda. Y apenas lo compensó ligeramente desde la parte superior de la página con el Morgan. Y aquí también tienes entradas de búsqueda como botones de la misma estructura que teníamos un, un componente de búsqueda. Lo que me gusta hacer es que quiero usar clases personalizadas para esta búsqueda para generar automáticamente nombre de clase. Eso está bien. Ahora vamos a crear esto desde cero. No quiero copiar los mismos estilos que tengo en la barra de navegación. En cambio, me gustaría crear un poco diferente de entrada de búsqueda y botón de búsqueda para que podamos tenerlos repartidos horizontalmente a través de toda la página de resultados de búsqueda. Y también tal vez vamos a aplicar algún estilo, pueden ser algunas esquinas redondeadas para este elemento. Y en el segundo vamos a pasar a los resultados de búsqueda y voy a explicar cómo funciona exactamente. Pero ahora aplicemos margen de 12 píxeles a la parte superior e inferior izquierda de esta entrada, y también a la parte superior derecha e inferior derecha al botón de búsqueda. Ahora, para los resultados de búsqueda, tenemos algo que se llama envoltorio de resultados de búsqueda. Y esto es una especie de especial, por lo que podemos llamarlo de esta manera, colección especial de artículos que mostrará todos los ítems de resultado de búsqueda. Esto es muy similar a la lista de recolección. Como pueden ver, tenemos un ítem y si restyled este solo ítem huirá y libro de texto y párrafo. Esto se heredará automáticamente a través de todos los ítems. Y como esto es algo así como una colección en índice de búsqueda, te dará algunos datos de esta colección, como URL de página y título de búsqueda y extracto de búsqueda. Y estaremos agregando y utilizando todos estos campos en un segundo. Pero solo puedes tratarlo como. Colecciones de poder, algo así como una colección. Y recuerda que todos los datos están aquí y es bastante similar a la colección menos que usamos con estilo. Tan sencillo, ¿verdad? Tenemos ligado, libro de texto y párrafo aquí. El enlace es ahora el título de este elemento, pero se puede utilizar, por ejemplo, imagen para agregar una imagen a los resultados de búsqueda también. Y ahora si vas a su configuración, puedes obtener imagen de nuestro índice de búsqueda, colección de padres de índice, y luego seleccionar la imagen de búsqueda del impuesto OG para esta página en particular. Entonces por qué hemos agregado la colección, elementos de colección de muestra a las publicaciones del blog , automáticamente, las imágenes también. Y esas imágenes se utilizan en Webflow como imágenes OG en la configuración de página. Por lo que ahora inserta, recoge automáticamente esas imágenes de OG y las muestra como la imagen de búsqueda. Bastante inteligente, ¿verdad? Está bien. Lo que podemos hacer aquí es crear una estructura adecuada para todos estos elementos. Entonces, por ejemplo, crear un bloque de enlace grande. Y dentro de este bloque lingual vamos a agregar algunos contenedores de diff técnicos para que el primero contendrá los 40, y este último contendrá el bloque de texto con título y tal vez alguna descripción. Vamos a crear una clase resultados de búsqueda siendo, y aquí tenemos imágenes de resultados de búsqueda y también textos de resultados de búsqueda. ¿ De acuerdo? Ahora, podemos mover elementos en este momento y colocarlos en las secciones correctas. Pero este enlace no se puede mover realmente dentro de los resultados de búsqueda. El texto sí porque tenemos un enlace y no podemos anidar enlace dentro de otro en Webflow. Entonces, eliminemos ese enlace. Vamos a añadir esto más adelante para el libro de texto. A ver, tenemos esta URL de página que básicamente está tomada de la colección. Realmente no necesitamos esta URL, así que voy a borrar eso. Y sólo voy a usar este párrafo. El párrafo está tomando los textos de algo que se llama fragmento. Se trata de textos llanos y se genera automáticamente también desde la página que enlazamos dos, hemos pagado URL, página, descripción de búsqueda, título de búsqueda, y también un fragmento. Entonces, ¿dónde podemos acceder a esos detalles? ¿ Cómo podemos ajustarlos? Te voy a mostrar eso a detalle en la siguiente lección. Pero echemos un vistazo a las propiedades de esta página, Digamos que esta página de entrada local. Por lo que cada lote tiene las propiedades generales y la configuración de SEO. Pero lo que te interesa es Configuración de búsqueda en el sitio, y esos son los ajustes que podemos usar ahí. Por lo que tenemos tal título, bailarines descripción e imagen de búsqueda. Como puedes ver, esos son los mismos que SEO, título, etiqueta de descripción y URL de imagen gráfica. Significa que recogerá automáticamente los datos de la pestaña anterior, esta Configuración SEO. Y aquí tenemos el bloque 0 posts por ejemplo, en alguna meta descripción. Y aquí es donde obtiene los datos para búsqueda, para mostrarlos en la página de resultados de búsqueda. Por lo que necesitábamos usar esta meta-descripción y creada aquí. O simplemente podemos desmarcar esas casillas de verificación y crear nuestras propias descripciones para los resultados de búsqueda. Resultados específicamente. De acuerdo, vamos a crear primero la estructura. Entonces volvamos a los resultados de búsqueda y a un encabezamiento que se estaría dirigiendo. Y me gustaría mostrar título. Entonces el nombre de los resultados de búsqueda aquí, déjame obtener el texto de los resultados de búsqueda y mostrar el título de búsqueda. Y eso es casi todo para la estructura. Pero me gustaría hacer de esto un enlace, hacer de este resultado todo un enlace a nuestra página de búsqueda, desde nuestra insignia de búsqueda hasta la página de entrada del blog. Por lo que voy a establecer la URL GET desde la URL de la página para todo este contenedor, este resultado de búsqueda Enlace contenedor. De esa manera cuando alguien haga clic en eso, irá a ese post. Eso es todo por ahora. Continuemos en la siguiente lección. 22. Búsqueda avanzada: De acuerdo, bienvenido a la siguiente lección. Acabamos de empezar justo donde lo dejamos en la lección anterior, tenemos este enlace de resultado de búsqueda. Y ahora vamos a configurar el cursor a puntero para que UX sabio, esto es más intuitivo que se puede hacer clic en el resultado de búsqueda. También, cambie la pantalla a flex. Voy a dejar todos los ajustes como están, pero tenemos que ocuparnos de las fotos. Como puedes ver, los tamaños de las fotos son diferentes y eso está bien, pero solo tenemos que asegurarnos de que su visualización sea adecuada. Por lo tanto, usemos la imagen de resultado de búsqueda como una nueva clase para estas imágenes y cambiemos el ancho máximo a, digamos 200 píxeles. Y también vamos a aplicar un radio de borde de ocho píxeles y un pequeño margen de unos 18 o 20 píxeles. Y para el resultado, los ítems también son querer crear un nuevo ítem de resultado de búsqueda de clase y difundir esos ítems margen de 25 píxeles, y eso estaría bien de esta manera nuestra página de búsqueda está casi lista en cuanto a estilo, creo que requiere de la justa ajustes leves. Por ejemplo, vamos a añadir algún margen a la parte superior e inferior del elemento de búsqueda y en el elemento de cuerpo, Vamos a Componentes y peguemos nuestros componentes. Tenemos que tener más, y también necesitamos tener navegación. Por lo que el menú de bloque en la parte superior, esta página también. Y esto genera un ligero problema para nosotros porque lo que tenemos aquí termina en el blog también es otra búsqueda. Déjame mover ligeramente el margen y abordé este cuadro de búsqueda porque ahora tenemos dos casillas de búsqueda en una página. Y esto no es lo que esperamos, realmente no podemos eliminar del menú del blog porque esto es un símbolo y quiero mantenerlo como símbolo. Es por eso que quiero inspeccionar esto en la Vista previa, hacer clic derecho e inspeccionar y ver qué tipo de clase es esta. Se trata de la sobretensión W para W Dash form. Entonces vamos a copiar el nombre de esta clase que he encontrado y herramientas de desarrollador. Y solo voy a poner display ninguno a esta clase, ¿de acuerdo? Por lo que esto ocultará este elemento en absoluto, pero sólo en esta página de resultados de búsqueda. Entonces vamos a la configuración de la página de resultados de búsqueda y vamos a añadir algún código personalizado en este elemento de código personalizado. Vamos a salvarlo. Y puedes, por cierto, agregar código personalizado dentro de la etiqueta de cabeza. Y también lo puedes hacer por mí Justo antes de la etiqueta del cuerpo. En este caso, queremos agregar estilos a la etiqueta de cabeza. Entonces aquí tenemos estilo, tipo, y aquí escribimos barra de texto, css y insight. Podemos anular algunas propiedades para nuestro CSS en Webflow. Entonces necesitamos abordar esta misma clase, así que buscar y luego formulario W4, y queremos ocultarlo. Por lo tanto, vamos a establecer la propiedad display en adormecer y guardarla. Esto no será visible en el diseñador porque tenemos que publicar esos cambios para poder ver la vista previa, cómo se ve. Entonces vamos a publicar. Por cierto, hay una forma de ver estos cambios en CSS, simples cambios CSS en diseñador directamente. Y esto es gracias a HTML ambit. Por lo que puede utilizar alternativamente HTML embed y luego usar el mismo código y que sería visible en diseñador. Ahora mismo, podemos ver eso después de publicar nuestra página. Y de nuevo, esto es realmente genial porque nosotros. Tienes que buscar en casillas ahora mismo. No obstante tenemos este componente en tacto que está en la parte superior de la página de resultados de búsqueda. Y por ejemplo, si cambiamos el nombre de la categoría o algo así, cambiará automáticamente a lo largo de nuestros resultados de búsqueda, página de resultados y se propagará aquí también. De acuerdo, En los resultados realmente no vemos imágenes, pero esto se debe a que nuestra búsqueda es solo una búsqueda de muestra hasta que publicamos esto con Webflow, CMS, la búsqueda está usando mecanismo de búsqueda elástico que es un back-end mecanismo que tiene que ser alojado antes de previsualizar el resultado. Por lo que en tu página estática publicada, realmente no verás el resultado de la búsqueda. Solo puedes ver los resultados de la muestra para que puedas darle estilo a este elemento. Ahora si vas a la envoltura de resultados de búsqueda y su configuración, puedes ver que tienes los resultados como cuántos resultados mostramos. Entonces la longitud de los fragmentos te permitirá truncar el texto del fragmento. Entonces dependiendo del diseño que hayas creado, tal vez quieras mostrar 180 letreros o tal vez menos o más. Esto se propagará de nuevo a través de todos los enlaces de resultados de búsqueda. Y también tienes una opción para resaltar términos de búsqueda en un fragmento. Significa que si usas una frase y está dentro del SNP en la misma frase está en el fragmento o en el título. Esto se pondrá en negrita. En realidad, esta voluntad, esto perderá esta frase. Entonces si quieres, digamos resaltarlo en azul o tal vez amarillo, solo puedes cambiar el estilo predeterminado para los elementos negritos en Webflow. Y luego aplicas este estilo para hacer la misma frase que alguien está buscando. Y eso es bastante útil. ¿ De acuerdo? ¿Qué más queremos hacer? ¿ Qué más podemos hacer en este resultado de búsqueda, goma? Bueno, hay algunos ajustes avanzados que podría usar para incluir o excluir elementos de la indexación dentro de la búsqueda. Obviamente, a veces realmente no quieres indexar todos los elementos de tu página. Y desea excluir páginas enteras o simplemente alguna sección de las páginas de ser indexadas y mostradas como resultado de la consulta de búsqueda. Entonces, por ejemplo, si vas a nuestro blog o bloqueas todas las publicaciones y decides que no quieres que este bloque todas las páginas de entradas se muestren en los resultados de búsqueda. Lo que haces es insertar ajustes firmados. Simplemente selecciona esta casilla de verificación para excluir este parche de los resultados del sitio de búsqueda. De esta manera. Cuando escribo algo que esté contenido dentro de este libro llamado post page, no aparecerá en los resultados. Otra forma en la que puedes abordar estos elementos, por ejemplo, para páginas de utilidades, también quieres asegurarte de que esos no estén incluidos en la búsqueda. Por lo tanto, excluyamos esta página de dichos resultados de búsqueda de sitios. Por cierto, creo que Webflow lo hace por defecto, pero lo que quieres incluir principalmente es blog, post page. Así blogposts plantilla. Por lo que este, tienes que asegurarte de que tengas esto incluido en los resultados de búsqueda porque principalmente queremos que nuestros usuarios busquen entradas de blog específicas. Y aquí tienes estas descripciones las cuales son básicamente las mismas que SEO, titulo oscuro y descripción oscuro. Pero puedes hacerlos diferentes. Y lo que es interesante aquí es cuando lo desvinculas de la etiqueta de título SEO, puedes usar campos, puedes usar campos personalizados. Y si haces click en el campo, este título de búsqueda se puede enriquecer con los datos que tienes en la descripción en el CMS. Entonces. Desde este blog posts plantillas has conectado todas las diferentes cosas como aceptar y nombre del nombre de la entrada del blog del artículo. Y puedes crear una estructura, por ejemplo, espacio de nombres, espacio guión, y luego por ejemplo, nombre de categoría. Y esto luego se mostrará como el título de los resultados de búsqueda. Entonces eso es bastante guay. Y muchas veces quieres modificar esos ajustes y simplemente establecer el nombre correcto para que esto sea más intuitivo para tus usuarios. Déjame seguir adelante y guardarlo. Y también mencioné que aparte de excluir páginas enteras de tus resultados de búsqueda, lo que te gustaría hacer a veces es excluir algunas partes de la página o secciones de la página. Entonces, por ejemplo, si tomas el menú de navegación que tenemos en la parte superior de cada página, eso será inútil para indexar los resultados del menú de navegación. Porque entonces si alguien buscaría, digamos por software o marketing o móvil, entonces este encabezado está en cada página. Por lo que cada página será devuelta como resultado de búsqueda. Por lo que realmente no lo queremos, pero Webflow es en realidad lo suficientemente inteligente como para deshabilitar la indexación de este tipo de componentes. Por lo que todos los componentes vamos a entrar en Configuración este excluyen blog, administrar contenido de este dinero de búsqueda. Gracias a esto, estás a salvo porque estos componentes multiplicados en cada página no afectarán realmente los resultados de búsqueda. Y usando los resultados de búsqueda y ajustes realmente puedes excluir de indexar cualquier cosa que te guste en tu página. Por lo que toda la lista de colección wrapper o sección de encabezado. Si no quieres que este encabezado se incluya en los mecanismos de búsqueda, basta con ir a Configuración y excluir esto. Entonces en nuestra página de inicio, por ejemplo, podríamos decidir que realmente no queremos que esas secciones de encabezados se incluyan en la oleada. Y este es un componente, por lo que se excluye automáticamente. Pero para todos los demás encabezamientos, sólo tenemos que o secciones de Heather, sólo tenemos que excluir aquellos de los resultados de búsqueda del sitio. Si pensamos en nuestro bloque y lo que queremos de este bloque se indexe en sitio local, resultados de búsqueda del sitio. Creo que solo debemos indexar las páginas de las publicaciones del blog para que cuando el usuario busque algo, solo consiga los artículos de nuestro bloque. Significa que generalmente queremos excluir todo lo demás aparte de nuestra plantilla de publicaciones de blog en CMS. Entonces vamos a guardar esos cambios en la página de inicio. Y obviamente queremos excluir guía de estilo. Queremos excluir toda la página del blog y las entradas del blog. Vamos a esta página segura. Y de esta manera sólo tenemos esta plantilla de post de blog que se incluye en la búsqueda y devolverá todos los artículos que el usuario busca. Y por cierto, si excluyes toda la página, puedes ver que la configuración del índice de búsqueda está en gris para los elementos individuales. Eso se debe a que se excluyó toda la página. Por lo que realmente no se puede excluir o incluir ningún elemento que esté en esta página. Entonces sí, esto tiene sentido. De acuerdo, Hay un consejo más que tengo para ti en cuanto a resultados de búsqueda y mostrar algunos datos personalizados en los resultados de búsqueda. Por ejemplo, si quieres agregar aquí un libro de texto que mostrará el nombre de las entradas de blog de categoría cuatro que se muestran. ¿ Cómo hacerlo? Bueno, esto no es tan sencillo porque lo que podemos hacer aquí es seleccionar, obtener textos de nuestro índice de búsqueda. Y si seleccionas eso, tendrás todos los campos disponibles de este pseudo colección índice de búsqueda. No obstante, en la pseudo colección, realmente no tenemos el nombre de la categoría. ¿De acuerdo? Entonces lo que podemos hacer en su lugar es usar cualquier elemento que no hagamos, no usábamos previamente. Entonces, por ejemplo, no estamos usando esta descripción aquí. Por lo que podemos usar la descripción de búsqueda y dejarla tal como está en este momento, pero ir a la configuración de búsqueda para la plantilla de entradas de blog. Y dentro de tales ajustes, podemos simplemente establecer la descripción de búsqueda para mostrar nuestro nombre de categoría. Entonces, desmarquemos lo mismo que SEO y luego agreguemos el campo. Y debido a que esta plantilla de post de blog está vinculada a la categoría y el CMS podrá mostrar en la descripción, el nombre de la categoría. Entonces todo lo que tenemos que hacer en este momento es solo publicar este sitio web y previsualizar eso. Pero de antemano, solo necesitamos aplicar algún estilo. Entonces tal vez vayamos al blog. Y aquí tenemos estos elementos que podemos copiar. Y hay unos estilos fiscales. A lo mejor sólo recordamos los nombres de las clases y aplicamos las clases a este libro de texto. Entonces primero usemos subtítulo y luego Comando Retorno una vez más, y eso se bloquearía oscuro. También, cambiemos el posicionamiento de este elemento a absoluto. Y esta es la posición dos, el primer elemento relativo que pasa a ser los resultados de búsqueda. Qué envoltorio, supongo que así está bien. Ahora en la posición solo necesitamos seleccionar un offset. Pero primero, vamos a tener una clase extra para que no estropeemos la anterior y podamos volver a configurarlas o podemos establecer el desplazamiento de posición. Establezcamos el margen en, digamos seis píxeles. Y ahora lo tenemos. Por lo que tenemos resultados de búsqueda bastante sofisticados. Y tú sabes todo sobre la búsqueda en Web aunque. Entonces muchas gracias por su atención y nos vemos en la siguiente lección. 23. Dominio personalizado: Hola, Bienvenido a la siguiente lección y esta, vamos a explorar cómo se puede agregar un dominio personalizado al sitio web que se crea en Webflow, esto es bastante simple, pero esto requiere un plan de hosting de Webflow. Entonces a lo que me refiero con esto, tendrías que comprar un plan de hosting en ajustes de Webflow para poder publicar bajo tu dominio personalizado, lo que puedes hacer es dar click aquí, click en el pequeño enlace y x al elemento de publicación y luego tú se llevan a la configuración y pestaña de alojamiento. Aquí tienes diferentes plantas para sitio web y el sitio web con CMS y e-commerce. No usamos comercio electrónico, Así que no nos enfocamos en esas plantas cuando habilitas el comercio electrónico en tu sitio web Webflow, entonces este plan sería predeterminado para nosotros, el bono CMS es por defecto y básicamente tenemos que usarlo porque nosotros realmente no puede usar plan básico. No hay soporte de CMS. Y una vez que tengamos CMS, solo necesitamos usar la bomba CMS. Eso es un poco más caro. Aquí tenemos acceso a la API de CMS, y tenemos la búsqueda del sitio. Tenemos tres editores de contenido, y no tenemos algunas opciones. Por ejemplo, no hay carga de archivo de formulario, pero realmente no necesitamos eso para nuestro sitio web. Entonces así es como va bien, habilitar CMS en Webflow te obliga a usar un alojamiento web de una manera que es bastante difícil exportar los elementos, aunque puedes hacerlo con CSV y entonces tendrías que crear tu propio oleada, cosas como esta. Para el plan de negocios. Como puedes ver, tienes más visitas mensuales y más estáticas. Conoce la misma cantidad de páginas estáticas, pero más envíos de forma y limitada en realidad, y también hasta 110 mil artículos CMS. Recuerda que puedes pagar anualmente o mensualmente, anualmente, solo ahorrarás dos meses de trabajo fuera del hosting. Y el número máximo de artículos CMS en cualquier planta en Webflow es de 10 mil. Por lo que hay que tener eso en cuenta. De acuerdo, ahora acabo de agregar el hosting. Ya tenía mi tarjeta de crédito conectada a mi cuenta de flujo de trabajo, así que solo son dos clics para comprar nuevo hosting. Ahora, aquí puedes configurar tu número de teléfono móvil. Y esto es bastante importante porque entonces Webflow te enviará un mensaje de texto cuando, por ejemplo, tu plan no se renueva, lo que significa que tu tarjeta está caducada o tal vez no tienes fuentes en tu tarjeta o, ya sabes, cualquier error bancario. Entonces vale la pena simplemente poner el número telefónico aquí porque entonces recibirás el mensaje de texto. Obviamente, recibirás correos electrónicos también. Por lo que solo puedes decir que no gracias o simplemente cerrar esta ventana. Y lo que como tienes aquí es la capacidad de establecer tu dominio personalizado. Y esto es bastante sencillo. Lo que tienes que hacer sin embargo, es cambiar la configuración de DNS en tu proveedor. Pero Webflow te guiará a través de eso. Y te voy a mostrar cómo lo hago por mi proveedor. Lo que voy a hacer es agregar un dominio existente. No estoy comprando un nuevo dominio que el flujo de trabajo está ofreciendo a través de Google. Solo estoy agregando un dominio existente. En mi caso, este es un subdominio, por lo que Webflow sólo me requerirá cambiar un registro DNS, que es registro CNAME. En caso de que estés utilizando un nuevo dominio de ruta, también te pedirá que lo hagas. Crea otro registro y un registro dentro de tu proveedor. Y ese sería el registro que apunta al servidor Webflow con la IP. Y en este caso, sólo se copia el nombre de este registro y el volumen. Y a través de tu proveedor de hosting, vas a la Configuración de Dominio, seleccionas el tipo de registro. En mi caso, este es CNAME, y luego pongo aquí el nombre canónico. Se requiere a algunos proveedores que pongas el punto después del nombre canónico. Por este proxy SSL se sentirá tranquilo. Algunos solo lo hacen por su cuenta, así que solo tienes que probarlo. Y luego tienes al anfitrión y al anfitrión. Puedes copiar el nombre del host desde aquí y solo tienes que hacer clic en eso y pegarlo aquí. Y ahí lo tienes. Simplemente lo aceptas. Y después de un segundo, te permitirá comprobar el estado de este redireccionamiento. Recuerda que a veces puede tardar hasta 24 horas, pero normalmente solo unos minutos. No obstante, recuerda simplemente no comprobarlo cada dos minutos porque se puede almacenar en caché por parte de tu proveedor. Después de comprobarlo, por lo general tienes el letrero conectado y eso está bien. Si tienes algún problema, solo espera. O también puedes ir al sitio web de la OMS checker DNS. Y luego puedes comprobar cómo se distribuye tu DNS a través de diferentes servidores de nombres de todo el mundo y tal vez esto te dé algún tipo de pista. Pero este proceso es bastante sin fisuras. Puede agregar dominios fácilmente. Y esto significa que el dominio que he agregado en mi caso subdominio, ahora está disponible para que yo haga un valor predeterminado. Y quiero hacer un default. Por lo que hay que dar click en este pequeño botón de inicio Hacer Default para que este dominio sea la raíz. Y esto hará automáticamente que Webflow no permita la indexación del sitio de subdominio Webflow. En cambio, esto se indexará en Google. Además, se puede utilizar un 01 redireccionamientos gratuitos. Entonces esos son los redireccionamientos que podrías querer usar desde tu antiguo sitio web al nuevo sitio web si quieres deshacerte del viejo camino que sea. Pero ya sabes que esta vieja hojaldre sigue en algún lugar, podría estar todavía en algún lugar de Internet. Por ejemplo, alguien está publicando el enlace a este viejo sitio web y no quieres que la gente se pierda. Simplemente puedes redirigir la antigua URL y crear una nueva ruta. Y en la parte inferior tienes opciones avanzadas de publicación y esas te permiten consultar algunos ajustes. Por ejemplo, habilite SSL. Eso es bastante crucial. Webflow te da un SSL gratuito para cada una de tus páginas. Esto es realmente importante para que tengas esto comprobado. Y en algunos casos específicos, es posible que desee consultar con su proveedor de DNS, con su dominio, registrarse con la configuración correcta para el SSL. Y aquí está el enlace con el fin de comprobar eso, pero generalmente simplemente funciona fuera de la caja. Entonces tienes la opción de modificar HTML y CSS y JS. Y esas son opciones que podrías o no usar. Podéis encontrar esas opciones en el menú de publicación en el diseñador también. Y si vas ahora mismo al diseñador en el menú Publicar, verás que tienes este segundo dominio ahora mismo en el que puedes publicar bajo. Entonces esto, en mi caso, el subdominio. Si lo seleccionas, solo puedes publicar para anular la selección y dominio. Recuerda que aún tienes la opción de publicar en tu subdominio de Webflow. Y esto es bastante genial porque puedes publicar aquí el borrador de trabajo de tu página web. Y luego una vez que esté listo o obtenga la aprobación de su cliente, entonces podrá publicar en su sitio web oficial, a dominio oficial. Y en las opciones avanzadas, encuentras todas las opciones que mencioné. Entonces, por ejemplo, también puedes minificar CSS que el sitio web sea un poco más pequeño y baja más rápido. Y por cierto, si utilizas servidores Webflow, automáticamente tendrás habilitados CDN. Esta es una gran infraestructura para tus usuarios de todo el mundo que intentan acceder a tu sitio web. Simplemente obtendrán el sitio web del servidor que esté más cercano a su ubicación. Por lo que los CDN son realmente, realmente geniales y también puede manejar mucho tráfico. Entonces, por ejemplo, si tienes, si estás vendiendo boletos o algo así, y mucha gente visita simultáneamente tu sitio web. Serás automáticamente de lujo. No tienes que pagar y esto manejará el tráfico. Esta opción de uso de encabezados de marco seguro está destinada a incrustar su sitio web como un iframe. Y por defecto está habilitado para tiendas. No creo que sea realmente importante por ahora, así que déjalo sin control. Y ahora cuando publicas, estás publicando simultáneamente en ambos dominios. Además, recibo el mensaje de que el índice de búsqueda tiene que ser actualizado. Esto es cuando publicas por primera vez, sobre todo, y tienes que esperar hasta cinco minutos para que los resultados de búsqueda funcionen correctamente. Sólo recuerda que en cualquier momento, como te mostré en una de las lecciones anteriores, puedes ir a Ajustes aquí e ir a Buscar. Y se puede indexar manualmente. Si hace clic en índice ahora, puede hacer una indexación al día por día. Y también si lo deseas, entonces Webflow programará e indexará automáticamente tu búsqueda cada tres días. Entonces así es como funciona y supongo que no. Ahora que nuestro sitio web está publicado en ambos dominios, estamos bastante seguros de ir y de distribuir nuestro sitio web a todos nuestros usuarios y editores para que eso pueda hacer cambios. Entonces eso es todo para el dominio personalizado y las opciones. Gracias por escuchar y nos vemos en la siguiente lección. 24. Estados vacos: Hola ahi, Bienvenidos a la siguiente lección. Una vez que tenemos los resultados de búsqueda reales, se puede ver que falta una imagen. Tenemos esta imagen de imagen de búsqueda, y cuando la desmarcamos, se puede ver la plantilla para la imagen, pero realmente no tenemos esas imágenes cargadas en nuestro índice de búsqueda. Entonces lo que tenemos que hacer es que tengamos que comprobar de dónde vienen esas imágenes. Y por esta razón en particular, necesitamos abrir la configuración de plantillas de publicaciones de blog. Por lo que esta es la página que debe alimentarnos con los datos de la imagen. Y dentro de la configuración de búsqueda, tenemos dicha imagen seleccionar Imagen para tal resultado, tenemos lo mismo que Open Graph image URL. Pero si vamos a la configuración de Open Graph, realmente no tenemos una imagen vinculada aquí. Entonces lo que tenemos que hacer es vincular la imagen de esta colección, ya sea aquí o desmarcar esto. Y necesitamos enlazar la imagen que tenemos en la colección para ser enlazados como una imagen OG o imagen de configuración de búsqueda de sitio. Y sólo entonces tendremos las imágenes adecuadas mostradas en nuestros resultados de búsqueda. Ahora bien, eso no es suficiente. Tenemos que guardarlo, y también tenemos que reconstruir nuestro índice de búsqueda. Ahora, debería aparecer, pero no podemos verlo. Tenemos que ir a una configuración global y luego en la búsqueda irá al índice ahora mismo. Y esto hará que esto, vamos a obligar, forzados en un índice bien alimentado a reconstruir. Los índices programados son todos los días libres, así que bueno para cada tres días pasarán por tus publicaciones e indexarán todo. No obstante, si quieres hacerlo manualmente, solo puedes forzarlo en Webflow de esta manera. Y ahora tenemos esas imágenes empiezan a aparecer aquí. Además, lo segundo que me gustaría mostrarlo, como en este envoltorio de resultados de búsqueda, podemos entrar en segundo estado. Entonces tenemos este estado por defecto ahí dentro, pero también el segundo estado no es resultados. Entonces si esto no devuelve ningún resultado, conseguiremos esta fecha que no es tan atractiva. Podemos trabajar en peinar poco y para resultados de búsqueda, Es especialmente útil porque usuario muchas veces conseguiremos los resultados, supongo así que solo tenemos que ocuparnos de eso. Voy a importar las tres imágenes que tengo. Y ahora podemos usar esta primera imagen para mostrar en el estado vacío de nuestra página de resultados de búsqueda. Establezcamos la visualización de estos elementos para flexionar la dirección vertical, y posicionémosla hacia el centro, vertical y horizontalmente. Además, aplicemos algún relleno o margen para que lo tengamos centrado en, con algunos agradables espacios en blanco alrededor de este elemento. Y aquí no tenemos mucho resultado en resultados de búsqueda, sin embargo, no es el único lugar los resultados de búsqueda cuando podemos obtener elementos vacíos, estados vacíos. Los otros elementos serían para colección CMS artículos de colección que están vacíos por alguna razón. Por ejemplo, si queremos mostrar algo de categoría móvil, pero no hay publicaciones en categoría móvil. Entonces básicamente para toda la colección menos cauchos que ahora puedes seleccionar, si vas a la configuración, puedes ir al estado vacío de la interfaz de usuario. Y por ahora, esto parece un poco basura. Entonces lo que queremos hacer es abordar este estado vacío. Por cierto, se puede ver en navegado que podemos acceder a todos los elementos de este estado vacío y podemos restaurarlos. Entonces vamos a ajustar la pantalla a flex y lo vamos a alinear más adelante. Ahora cambiemos los márgenes con opción. Voy a ajustar el margen tanto para arriba como para abajo. Y también vamos a deshacernos del color de fondo. Aquí tenemos este libro de texto. Podemos agregar una imagen aquí y elegir una de las imágenes que he subido, tal vez ésta. Y volvamos a la configuración o hagamos los ajustes de alineación de este estado vacío. Dos, necesito que esto se establezca en vertical y alinee y justifique centro y medio. Entonces tenemos estos estados vacíos a clase que podríamos querer cambiar en unos carros de estado vacíos. Y sería inteligente simplemente usar esto como un estado vacío para literalmente todo lo que queremos agregar un estado vacío, no sólo esta colección, sino que hay un problema con esta imagen tendría que simplemente copiar y pegar esta imagen una y otra vez. Entonces qué podemos hacer en cuanto a las tarjetas estatales vacías, si nos deshacemos de la imagen en este momento, podemos aplicar esto como fondo CSS, y entonces solo podemos usar esta clase de tarjeta estatal vacía con el fin de Esta configuración, esta imagen. Entonces déjame cambiar el fondo a esta imagen que tenemos para el estado vacío no se puede vidriar. Y pongámoslo para cubrir posición a centro. Y luego nada de alicatado, creo que debería estar listo ahora. De acuerdo, ahora sólo vamos a aplicar ligeramente el margen. Y también cambiemos el relleno porque esto nos permitirá mover el libro de texto sin ítems encontrado a la parte superior. Y supongo que eso es todo. Ahora podemos copiar el nombre de esta clase y literalmente usarlo en cualquier lugar que queramos. Entonces en este estado vacío, solo aplicamos la clase de tarjeta estatal vacía y ahí la tienes. De acuerdo, Entonces de esta manera hicimos este estado vacío personalizado pero reutilizable para artículos que no se encuentran dentro del CMS, por ejemplo. Y creo que eso es todo. Entonces espero que te haga la vida un poco más fácil tener elementos reutilizables como este. Y eso también está en, sobre los estados vacíos y la búsqueda. Muchas gracias. Nos vemos en la siguiente lección. 25. Editor de sitio web: En Webflow, hay una buena manera en la que tus colaboradores pueden editar tu página. Y este puede ser tu cliente, este puede ser tu colega. Literalmente puedes editar cualquier cosa de la página, incluyendo las colecciones y sus artículos. Tienes este pequeño botón Editar sitio cuando entras a esta página como usuario conectado. Entonces tienes que tener la cuenta de Webflow, y luego tienes que tener permisos para editar esa página con el fin de ver este pequeño botón. Entonces ahora estoy encerrado en Designer, y por eso puedo, desde su acceso al editor directamente. Por lo que puedo editar eso en el navegador o puedo ir a Configuración del proyecto y puedo ajustar la configuración para editores adicionales. Si vas a la pestaña del editor, verás que aquí tenemos colaboradores y también algunas opciones de branding que se mostrarán para tus editores y puedes cambiar un subir tu logo aquí. Pero lo más importante es que tenemos colaboradores y por ahora sólo soy yo, pero puedo sumar hasta tres colaboradores a cada página, a cada lado. Y sólo puedo ingresar sus direcciones de correo electrónico. Si no tienen ya la cuenta completa, tienen que crear la cuenta. Pero una vez que lo hagan y tengan la invitación a esto, Editar , esta página, podrán ir al navegador y directamente en el navegador. Después de la URL de tu sitio web, pon un signo de interrogación y luego edita y luego cambia automáticamente esto al modo editor. Se puede ver en la parte inferior que tenemos este logotipo de Webflow y todos los elementos de nuestra página en realidad se están comportando un poco diferentes. Porque ahora podemos acceder a elementos estáticos y dinámicos de la página y cambiarlos sobre la marcha. Significa que literalmente puedes cambiar cualquier cosa haciendo clic en este botón de edición. Y si quieres cambiar el nombre de las publicaciones de la colección, puedes hacerlo así. Si quieres cambiar los elementos estáticos, puedes hacerlo igual también, igual, la misma manera. Pero si estuvieras agregando algo a los elementos de colección CMS existentes, Lo que es realmente genial es que literalmente puedes cambiarlo en la colección CMS. Entonces, por ejemplo, si reemplazas la imagen justo a partir de ahí, se cambiará en todo el TMS. Y esto funciona para todo el contenido estático y dinámico. Para que puedas pasar el cursor sobre los elementos y luego podrás cambiarlos y reemplazarlos. Por ejemplo, ahora mismo, si voy a la página de entrada única, lo que puedo hacer es hacer clic en el botón Editar junto al rico libro de texto que tengo. Y debido a que se trata de un libro de texto rico , me permitirá, por ejemplo, seleccionar los elementos y cambiar los encabezamientos. Puedes hacer que el texto se ponga en negrita o incluso puedes insertar nuevos elementos. Si presionas volver, puedes agregar texto. No se pueden ambits ni citas ni nada por ahí porque se trata de un elemento de texto de alcance. Ahora si realizas cambios, tienes la información en la parte inferior de que hay cambios gratis inéditos. Tienes los cambios de editor que necesito ahora publicar para que estén en vivo en la página web. Entonces antes de publicar, solo estoy en el modo de edición y solo estoy creando un borrador. Puedo volver al sitio en vivo y mis ediciones ya no son visibles. Y eso es porque aún no los he publicado. Pero cuando regrese a la edición, verá que todavía tengo esos cambios, QT para la publicación y puedo publicarlos. En cualquier momento que yo quiera. Entonces ahora si hago clic y publico cambios gratis, esto afectará no sólo la parte estática del sitio web, sino que también he editado software de categoría y esto se aplicará a mi CMS. Además, hay una forma mucho más intuitiva de trabajar con CMS que solo hacer clic en los elementos y desplazarse por todos los posts y publicarlo y ondulado, republicarlo. Puedes editar las páginas desde este menú inferior. Aquí puedes ir a Configuración del proyecto y panel y diseñador, pero también puedes hacer clic en las páginas. Y aquí puedes ver todas las páginas que están disponibles y accesibles desde aquí también. Puedes cambiar la configuración de páginas desde ahí. Entonces, por ejemplo, si eres o quieres editar etiquetas OG o ajustes de índice de búsqueda o algo por el estilo. Él puede hacerlo dentro de esos ajustes en C que todos los ajustes de SEO y los otros que son bastante importantes son accesibles aquí. Por lo que realmente no tienes que dar a nadie permisos para usar Designer y meterte con el sitio web. Él puede entrar directamente aquí y sólo usar la meta descripción y la etiqueta de título y cambiar todo en consecuencia. Desafortunadamente, realmente no se pueden establecer los diferentes permisos para los editores, pero lo que pueden hacer es en lugar de guardar aquello que no será visible antes de publicar, tienes este cambio inédito para que alguien pueda guardarlo y luego puedes supervisarlo. También puedes guardarlo como borrador. Entonces esta es la primera, primera versión de la misma, para que ni siquiera vaya a estos cambios inéditos. Entonces algunos, alguien puede trabajar en eso y guardarlo como borrador cuando esté listo para ponerlo como inédito. Él va a él va a salvarlo. Y luego solo puedes comprobar si todo está bien y dar clic en publicar para publicar esto en la página web Life. Lo mismo sucede para las colecciones. Puedes previsualizar todas las colecciones de aquí y tienes diferente estado es para todos los artículos de colección. Por ejemplo, aquí tengo algunos cambios de etapa. Significa que cuando hago clic publicar este cambio, Go Live. Pero hay otro estado dice que puedo crear. Obviamente puedo agregar todos los artículos desde ahí y es mucho más intuitivo que editarlos en el navegador. Puedo agregar un nuevo artículo de colección. Por lo que en este caso, puedo dar click en añadir nuevas entradas de blog. Y tenemos todos los campos definidos en el, en el CMS aquí dentro, se puede ver que todos ellos son obligatorios. Puedes decidir y diseñar en CMS, tienes el contenido de texto enriquecido aquí, para que puedas agregar imágenes o embebido o videos. Tienes que escoger la etiqueta de categoría y ofrecer para las entradas de blog. Y si creas uno, realmente no tienes que escenificarlo para los cambios pulsando el botón Crear. Bueno, puedes hacer en su lugar es puedes programar esta publicación o puedes guardarla como borrador. Si guardas eso como borrador, al hacer clic en Publicar, esto no se publicará porque es un borrador. Puedes volver al borrador y puedes guardarlo varias veces y no está puesta en escena para ser publicado con lo puedes hacer en su lugar es puedes escenificar estos cuatro publicar, o puedes publicar de inmediato. Y entonces se irá a vivir sin siquiera pensar en el botón Publicar. O puedes escenificar para Publish. Y si lo escenificas, entonces alguien tendrá que hacer clic en el botón Publicar para que esta publicación aparezca en tu página web. La otra opción que tienes como horario. Y puedes escoger la hora y fecha específica en la que se publicarán tus publicaciones, y cuando llegue esta fecha, se publicará automáticamente en el sitio en vivo. Ahora, lo voy a cancelar. Y como puedes ver, puedes editar todas las colecciones de tu página. Además, también tienes datos de envío de formularios. Entonces si tienes algún formulario ya que tenemos nuestro formulario de newsletter, si alguien siente en la forma que los datos irán aquí. A partir de ahí, puedes exportarlo como CSV o simplemente obtener una vista previa de los datos. Obviamente, esta no es la mejor manera de gestionar, por ejemplo, sus envíos de formularios. Pero una de las otras lecciones te voy a mostrar cómo conectar esto a Zapier o Matt integral para la cuenta información personal ahí tienes también ayuda y apoyo y puedes mirar hacia fuera sin publicar cambios o puedes ir a diseñador, pero esto sólo está disponible para quienes son los autores del lado. Por lo que tienes que tener este proyecto en tu panel de Webflow para poder acudir al diseñador. Y desde diseñador también puedes publicar desde aquí. Cuando publiques desde el diseñador, esos cambios que son escenificados por los editores también obtendrán, se publicarán. Te dije que no hay forma de restringir el acceso los diseñadores a partes y elementos específicos. Pero desde el diseñador, lo que puedes hacer como puedes ir a ajustes de cualquier elemento y tienes esto. Los colaboradores pueden editar este elemento. Si desmarca esta casita de verificación, esto hará que, por ejemplo, este título no esté disponible para un cambio en el editor. Por lo que los editores no podrán hacer ningún cambio en este rubro uno, también puedes excluir de editar partes más grandes de tu sitio web, secciones enteras, o tal vez todo el cuerpo si quieres evitar que gente cambie algo en este página en particular. Entonces así es como puedes restringir el acceso. Y aparte de esto, recuerda que tienes este estado diferente. Por ejemplo, puesta en escena o borradores que puedes usar en todo tu equipo para administrar el contenido de tu página. De acuerdo, creo que eso es todo para el editor. Gracias por ver esta lección y nos vemos en la siguiente. 26. Consejos de SEO parte 1: Hola ahi, Bienvenidos a la siguiente lección. Hablemos un poco de SEO. Entonces cómo hacer que tu sitio web sea mejor en cuanto accesibilidad y también para los rastreadores para que esté bien indexado, en el buscador de Google. Entonces lo primero es la estructura de tu página. Esto es bastante obvio, pero debes usar secciones donde corresponda. Y también cuando seleccionas, por ejemplo, sección en la configuración, puedes seleccionar etiquetas HTML apropiadas como artículo o algo así. Si está utilizando algún texto significativo, debe usar encabezados o párrafos porque esto le hará saber a Google que este texto es más importante que los demás textos. Por ejemplo, Encabezado uno es más importante que H2, y sobre todo no deberías usar bloques div para nada más que propósitos de estilo. Por lo que los perros grandes son elementos más bien técnicos. Y si quieres crear algo que esté destinado a tener el significado para el navegador, será mejor que termines con artículos o arrendamiento, o encabezados o párrafos, o puedes terminar con, digamos sección. Pero entonces en la configuración puedes cambiar esto a, digamos a un lado o artículo. Ahora, lo que puedes hacer para mejorar, hacer que Google entienda mejor también tu sitio web, es no anidar demasiados elementos en el panel del navegador. Así que asegúrate de que tu estructura esté limpia y no tengas muchos elementos anidados. Otro gran profundo para la accesibilidad y para la optimización de motores de búsqueda también se va a la configuración de imagen. Y aquí tienes el viejo impuesto. Entonces básicamente todas las imágenes deberían tener ya sea el viejo stack, todo en la versión más reciente de Webflow, hay una opción para declarar que esto es solo una imagen decorativa y realmente no necesita un ataque viejo. Otro consejo que te puedo dar es establecer el texto antiguo después de crear un sitio web en el panel de activos, puedes hacer clic derecho en el elemento de la imagen en el panel Activos. Y luego puedes agregar la etiqueta alt a todas las imágenes y casi a la vez. Por lo que es una manera bastante conveniente de crear impuesto viejo. Pero de todos modos, debes cuidar el viejo impuesto y sobre todo para aquellas imágenes que son descriptivas en tu página. Y por cierto, en las versiones más recientes de un Webflow, al publicar tu página, también tienes el estado de accesibilidad de tu sitio web así como algunas cosas por mejorar en la página. Y si no tienes algunas pilas viejas, te sugerirá que debas, debes encargarte de eso. Por lo que cuando publiques, solo puedes comprobar qué imágenes faltan. El viejo impuesto. Una cosa más es eliminar las imágenes de Webflow. Lo que puedes hacer es ir a Activos y puedes eliminar literalmente cada imagen y luego volver a publicar su sitio web. Y entonces todas las imágenes que se usan en tu lienzo en el diseñador volverán a estar disponibles en los activos porque a veces hay muchas imágenes diferentes en los activos que literalmente no usas en tu sitio web. Esto no es perjudicial para su posición en, en Google, pero Entonces doloroso para crear todo el viejo impuesto. Y de esta forma, solo puedes eliminarlos fácilmente, volver a publicar el costado y volverán a aparecer, pero solo aquellas imágenes que se publiquen en tu sitio web. De acuerdo, a continuación tenemos la configuración para páginas individuales así como la configuración global para tu sitio web. Si vas a páginas y echa un vistazo a la configuración para páginas estáticas individuales que tenemos aquí, y también utilidad y el comercio. Cada página como esta tiene algunos ajustes. En general parte de la configuración tienes el nombre del paciente y esto solo es para web con fines, no aparece en ningún lugar de tus resultados de búsqueda. Pero aquí tienes Ajustes SEO muy importantes. Esas son separadas para todas y cada una de las páginas que cree. E incluso tienes esta vista previa de resultados de búsqueda que te dará una visión general de cómo se verá esto y en los resultados de búsqueda de Google. Ahora bien, ¿qué tienes en la parte superior como etiqueta del título? Esta es probablemente una de las cosas más importantes en términos de SEO. Y definitivamente debiste haber titulado impuesto para todas tus páginas. En el título, debes tener una descripción limpia y breve de tu página específica. Y Webflow recomienda que sea aproximadamente 55 caracteres o menos. Y esto es simplemente porque se mostrará en una línea. Y si eso es más, se truncará. Y lo que voy a hacer es copiar y pegar este símbolo de punto ascii y simplemente ponerlo en el título. Y en los resultados de búsqueda se puede ver que esto es un poco más atractivo, puede ser diferente a otros resultados. Entonces supongo que este es un buen truco para que este resultado sea más atractivo así como usar el caso de camello. Y si puedes usar algunas de las palabras clave obviamente conectadas a tu sitio web, solo úsalas al principio del título o en algún lugar cercano al inicio del título, porque ésta es probablemente una de las, una de las cosas más importantes en cuanto a que esta palabra clave esté incluida en los serbios. Entonces resultados de búsqueda. Y esto acercará tu sitio web a los mejores resultados. Si hay una palabra clave que en el título que alguien busca, para la meta-descripción, google dice que no es realmente útil en términos de palabras clave. No lo escanea en busca de palabras clave que el usuario busca. Pero la meta-descripción es súper importante porque aparecerá justo debajo de tu URL y el título en los serbios. Por lo que será mejor que lo hagas interesante. Siempre es mejor mantener corta la meta descripción. Aproximadamente 150 Ciencias, ¿de acuerdo? Y lo que pongo ahí es, por ejemplo, tengo este caso de camello y también n sine. Y al final me he interesado el signo de interrogación. Y este tipo de tal vez hace que esto sea un poco más interesante para que un usuario haga clic para que tengamos agradable CTA al final de la meta-descripción. Entonces traté de tener el CTA, por ejemplo, echa un vistazo o tal vez interesado o alguien así. Y probablemente esto consiga un poco más de CPR en los resultados de búsqueda de Google. Nuevamente, por favor ponga en su descripción del Meta, es algo que es relevante para esta página. Y yo, para la configuración de Open Graph, hay bastante importantes, pero no realmente para Google tanto como para las redes sociales y los demás servicios. Eso lo voy a explicar más tarde. Y para Configuración de búsqueda del sitio, solo recuerda que esto no significa que excluyas esta página de Google. Solo se conecta a tu búsqueda interna que hemos creado en una de las lecciones anteriores. Por lo que esto no está relacionado con el SEO de todos modos y puedes mantenerlo excluido mientras todavía está aparecerá en los resultados de los motores de búsqueda en Google. Y luego tienes código personalizado, lo cual es bastante importante en términos de SEO, sobre todo si quieres excluir algunos sitios web de los resultados de búsqueda. No obstante, en la pila de cabezales, también puedes usar muchas etiquetas Meta diferentes que puedes crear. Por ejemplo, con palabras clave, puedes usar palabras clave Meta y poner algunas palabras clave ahí. Si bien Google está abierto sobre no tomar realmente esto en consideración al crear clasificaciones de motores de búsqueda. Supongo que esto es bastante importante. Y si tienes tiempo, solo puedes agregar esto a tus sitios web porque para algunas aplicaciones, algunos motores de búsqueda, podría ser tomado en consideración. Entonces esta es una de las etiquetas Meta que puedes usar en tu sitio web, pero en realidad hay muchas etiquetas Meta diferentes que puedes consultar en el sitio web del W3C. Y aquí tienes todos los diferentes metadatos como Arthur y viewport y descripción y palabras clave y cosas como esta. Por lo que en caso de algunos de ellos, Webflow los está cuidando durante años como descripción, tienes un campo separado. Pero si quieres agregar más ataques húmedos pueden ser relevantes para tu sitio web. Puedes hacerlo, sobre todo, puedes agregar metadatos de robots, y controlar la visibilidad de tus páginas a través de este metatag. Y te recomiendo encarecidamente que mires esta página en artículos de búsqueda de Google. Y hay mucha información sobre los metadatos de robots. Por lo general, solo usas este metatag con el fin de excluir de este una página específica o sitios web enteros del índice. En este caso, vas a usar robots de nombre de metal y contenido no-index. Entonces puede ser seguido de una coma y se puede agregar follow o nofollow, por ejemplo, para que los robots sigan los edificios visibles en este sitio web y Croll, algunos otros sitios web a los que este sitio web enlaza. Pero si no pones índice, esta es una sugerencia para el robot de que nunca debe indexar esta página en particular. Y el lugar donde pones este metonym robots contenido no-index es ya sea en las páginas individuales de tu como lo tenemos para nuestra página de inicio o página de blog. O simplemente lo pones globalmente en tu configuración a todas las páginas de tu sitio web y luego nada se indexará. Bueno, decidir qué se está indexando y qué no es bastante importante en términos de SEO. Por ejemplo, para nuestro blog, no sé si necesariamente tenemos que indexar todas las páginas. Especialmente podemos excluir páginas técnicas de la indexación como 40 for y guía de estilo y las otras. Pero en realidad no probablemente la mitad para indexar, bloquear todas las publicaciones porque los mismos elementos, los mismos artículos están en la página del blog y en las páginas de categorías. Y por cierto, si quieres comprobar si se está indexando este lado en particular de la página, puedes poner en el sitio o página de Google. Y luego se puede comprobar de qué tipo de enlaces están siendo índice, digamos frialdad que cómo dominio. Y luego se puede ver si este contenido de robots metianinos no-índice está funcionando realmente bien. Esto es sólo una sugerencia para los robots. No obstante, en la mayoría de los casos, debería funcionar realmente bien. Y de nuevo, esto es sólo para la página de inicio específica. Estamos excluyendo la página de inicio específica para los serbios. No obstante, si quieres excluir todo el sitio web de ser indexado, lo que puedes hacer es ir a ajustes de esta página en Webflow. Y aquí tienes etiqueta de código personalizado. Ahí. Se puede poner el código que es para todas las páginas, pero se lo voy a mostrar en la siguiente lección. 27. Consejos de SEO parte 2 2: Hola allá y bienvenidos a la siguiente lección. Esta es la segunda parte de nuestros consejos SEO en Webflow. Ahora estoy en mi configuración de proyecto para Judios y block website. Y lo que puedo hacer es mostrarte esta pestaña de código personalizado de la que hablé antes. Aquí tienes el código de cabecera y ese código se va a incluir en cada página de tu página web. Significa que si quieres agregar, digamos palabras clave Meta aquí, o tal vez quieras simplemente deshacerte de la indexación de todas las páginas y crear robots metálicos sin índice. Simplemente puedes agregarlo al código de cabecera y se distribuirá en todas tus páginas. Ahora, también puedes ir a la pestaña SEO, que es la pestaña global más importante para tu configuración, aparte del ajuste para páginas individuales de las que hablé en la lección anterior. Y además, vale la pena revisar el hosting que tienes y configuración del dominio. Solo asegúrate de tenerlo configurado como predeterminado, que tu dominio principal aquí esté configurado como predeterminado porque podrías tener diferentes dominios aquí. Y esto evitará que Google indexe todos los dominios que tiene. Y cuando dijiste esto, por cierto, a defecto, redireccionará automáticamente el dominio Webflow. Es decir, no incluirá dominio Webflow en los resultados de búsqueda. Por lo que Webflow desactivará automáticamente la indexación del subdominio Webflow en el que tienes tu sitio. Y en cambio siempre usará este dominio de tu más importante para Google. De esta forma, te desharás del contenido duplicado y la penalización de Google por este contenido duplicado. Y por cierto, en SEO, el primer ajuste es para la indexación. Y cuando lo establezcas en sí, se desactivará la indexación de este subdominio de Webflow y esto debe configurarse en todo momento cuando tengas tu propio dominio conectado y configurado como predeterminado. A continuación tenemos sección de robots, y esta sección volverá a ser distribuida e incluida para todas sus sub, sub páginas. Por lo que para toda la página web. Entonces, cualesquiera que sean las reglas que establezcas para robots aquí, se aplicarán globalmente a tu sitio web. Robots dot txt es bastante importante. Pero al contrario de lo que la gente piensa, algunos de ellos al menos, esto no impedirá que Google indexe sus páginas. En cambio, esto evitará que tus sitios web, especialmente la administración de sitios web técnicos y cosas como esta, sean bombardeados por solicitudes de agentes de usuarios, de robots que intentaron descargar y conocer el contenido. Entonces Esta es la directiva para robots, por ejemplo, no para, no tomar en consideración este sitio web y enviar solicitudes. Y también puedes agregar los artículos en Google o simplemente hacer clic en el enlace en el panel Webflow para visitar robots toma that.org y luego leer más sobre robots archivo y cómo crear. A directivas diferentes en este expediente. Entonces hay una cosa más de la que hablo en una de las lecciones anteriores, pero quiero mencionar que en términos de SEO también, aquí tienes 301 redirecciones y usualmente quieres usar esos redireccionamientos para tus usuarios no visiten un 404 páginas. Entonces, por ejemplo, si eliminas una página, quieres a veces obtener el enlace de esta página, ponerla aquí como un camino antiguo y redirigirla a alguna otra ruta puede ser artículo más reciente o sección más reciente sobre lo mismo en tu sitio web. Esto evitará que cualquier enlace esté fuera de su sitio web, lo que dará lugar a 404 páginas. Y de esta manera, ayudará a los usuarios y robots también a encontrar su camino en tu página. De acuerdo, a continuación tenemos esta Configuración SEO otra vez. Y en la parte inferior de esta página tienes sitemap y también verificación del sitio de Google a ajustes muy importantes para el sitemap. Yo sí te recomiendo, sobre todo si no sabes crear tu propio sitemap. Solo para usar esta configuración predefinida, esta configuración predeterminada la cual generará automáticamente un sitemap para ti. En cambio, si quieres usar el tuyo propio, solo puedes dejarlo como estaba. Pero si quieres usar esto generado automáticamente por Webflow, solo tienes que cambiarlo a sí. Y luego Webflow creará un archivo de texto, un archivo XML en realidad para usted. Y podrás enviarlo a Google o Google ambos automáticamente solo lo buscarán, por sí mismo. Ahora el archivo XML del sitemap puede ser personalizado y puedes personalizarlo si sabes lo que estás haciendo. Pero la mayor parte del tiempo, solo lo mantendré automáticamente generado por Webflow. Ahora Google Search Console es otro lugar en el que quieres registrarte y también quieres conectar tu sitio web. Por lo que se crea una nueva propiedad en Google Search Console. Y luego puedes usar dominio en nuestro prefijo URL. Lo que vas a usar aquí es prefijo URL. Y sólo tiene que utilizar la dirección de la página web que tiene en Webflow. Entonces en este caso mi propio subdominio. Ahora, sigamos adelante y continuemos. Y ahora está verificando esta propiedad con el fin de verificar puedes usar múltiples formas, pero lo que quieres hacer es ir a la etiqueta HTML. Y aquí puedes copiar toda la línea que está en 0.1. Demos click en Copiar. Ahora vamos a Webflow y peguémoslo. No lo necesitas todo desde aquí. Solo necesitas lo que hay entre medias, cotizaciones en contenido. Entonces aquí está, el ID de verificación del sitio, y vamos a guardar esos cambios. Ahora ya estás listo para volver a la consola de búsqueda de Google y comprobar si este, este sitio web está funcionando. Pero primero, paso muy importante, necesario publicarlo en los dominios seleccionados. Por lo que necesitas publicar tu sitio web con estos cambios primero para que Google reconozca los cambios. Ahora vuelve a la consola de búsqueda de Google y haz clic en Verificar. Una vez que esté listo y publicado, debe verificar tu sitio web y todo está bien. Por lo que ahora solo puedes ir a la propiedad. Por lo que abre tu sitio web y puedes consultar algunas métricas importantes de tu sitio web. Por lo que ya se están recabando estos datos. Y luego en algún momento tienes alguna revisión de desempeño e inspección y todas las cosas que podrías encontrar que realmente interesantes en términos de SEO y solo hacer que tu sitio web sea un poco más amigable para los robots. Además, lo que quieres hacer es subir este sitemap, ese flujo de trabajo generado para ti en la sección de sitemap. Por lo que si vas al mapa del sitio del índice, puedes agregar un nuevo sitemap y validar el mapa del sitio que fue creado por Webflow. Acabas de poner sitemap dot xml aquí y usar enviado. Y si no has comprobado en el panel WebEx, tienes la información de que el sitemap fue enviado. Si guarda los cambios después de cambiar a EE.UU., verá que esto se envía con éxito y también puede ver el estado y las URL descubiertas que son el índice de cinco URL dentro de su sitemap. Esos son los más importantes, pero no todos los Ajustes SEO. Puedes consultar esta Consola de Búsqueda de Google para obtener más información. Y obviamente, puedes aprender mucho sobre SEO de algunos recursos externos que sí recomiendo. Por lo que muchas gracias por escuchar y afinarse para esta lección. Nos vemos en el siguiente. 28. Metadatos de sitio: Hola chicos y bienvenidos a la siguiente lección. Me gustaría agregar algo a los tips de SEO. Y esto se trata del Protocolo y esquema Open Graph. Entonces básicamente esta es la forma de explicar mejor nuestro sitio web, no necesariamente para robots, sino para redes sociales. El Open Graph Protocol se inició inicialmente en Facebook, pero ahora tienes muchos softwares diferentes usando este Protocolo de Gráficos Abiertos específico. Y qué haces con eso es que usas estos metadatos y tienes meta propiedad. Y luego vas con OG, título, tipo, URL e imagen. Y se definen los elementos que serán reconocidos por, digamos las redes sociales. Si estableces la imagen, entonces cuando compartas este enlace en Facebook o LinkedIn, entonces aparecerá la imagen. Y esta es la imagen del impuesto OG. Obviamente puedes poner todo esto en tu código personalizado. Puedes poner esto en la configuración de tu proyecto para que los cambios sean visibles globalmente en otras subpáginas de esta sección de código personalizado. Pero en el diseñador, si vas a ajustes de páginas individuales, Webflow también está haciendo algunos de los ajustes de gráficos abiertos más importantes disponibles para ti aquí. Por lo que ahí tienes el título y descripción e imagen. Esos son ajustes gratuitos, más importantes para que compartas elementos en redes sociales y para que esto aparezca correctamente. Entonces por ejemplo, si voy a Facebook y creo un nuevo post y luego agrego un enlace de sitio web y me dispongo a mi web, el sitio web, automáticamente generará algo. Y esta es la descripción. No tengo ninguna imagen OG. Por eso no está mostrando la imagen aquí. Y también está tomando el título de mi título, del título de mi página. Pero por muchas razones es posible que desee mantener esto separado y es posible que desee desmarcarlo, igual que la etiqueta de título SEO. Se puede ver ese evento que tuve esto sin marcar, automáticamente lo cogía de título y esta es función de Facebook supongo. Pero también puedes tomar la meta descripción y luego la buscará de tu meta-descripción. Por lo que SEO meta descripción también. Entonces es mejor comprobar eso que no, pero también es mejor crear diferentes descripción y títulos para redes sociales. Y obviamente, hay una imagen que deberías tener aquí. Esa es la relación de aspecto de 1.91 a una que debes usar. Y Webflow está tratando de asegurarse de que tus imágenes estén al menos mientras 1200 pixel por 630 en esta URL de imagen Open Graph aquí, puedes poner un camino absoluto a tu imagen. No puedes usar ninguna de las imágenes de tu biblioteca. Y solo tienes que crear una imagen especial que será una URL de imagen gráfica abierta. Lo que puedes hacer es configurarlo para todas las páginas por separado en la configuración de Open Graph. O si solo quieres configurarlo una vez, puedes agregar esta etiqueta OG como código personalizado en tu configuración global de página para Webflow. Por lo que ahora he subido esta imagen como mi imagen OG. Y en lugar de asegurarse de que funcione en Facebook agregando la publicación una vez más. Sí te recomiendo acudir a un servicio especial que te permitirá probar los metadatos OG. Porque Facebook y otras redes sociales solían simplemente cobrar algunos datos sobre el enlace que proporcionaste y esto podría no ser visible. Entonces en lugar de eso sólo tienes que ir a desarrolladores de Facebook. Y aquí está compartiendo debugger, la herramienta que te permitirá poner el enlace a tu sitio web y dar click en debug para previsualizar cómo debe verse en redes sociales. Entonces así es como debe mostrarse en Facebook. Ahí está la imagen ahora. Aparte de la imagen, hay algunos campos OG que se llenaron automáticamente por web aunque. Por ejemplo, este tiempo actualizado, pero algunos de ellos con llenarnos como descripción e imagen y título y todo está ahí. También puedes comprobar si hay algunos errores. En la parte superior de esta página tienes una advertencia que debe ser arreglada. Y aquí hay algunas propiedades requeridas que faltan URL. Bueno, todas las redes sociales se encargarán de eso y solo agarrar la URL que quieras. Y ID de aplicación de Facebook. De nuevo, no es necesario a menos que estés usando alguna app de Facebook que quieras conectarte a este sitio web. Pero de cualquier manera, esta es una gran manera proporcionar alguna información adicional para las redes sociales, especialmente las imágenes que se mostrarán correctamente y impulsen algún tráfico desde las redes sociales a su página web. Y una cosa más que me gustaría explicar en esta lección es schema.org. Otro conjunto de metadatos que puedes utilizar por separado para tus páginas o para todo el sitio web. Y esto es solo un esquema que usas, por ejemplo, productos. Y esto, vamos a Google y otro software a entender mejor lo que hay en tu sitio web. Por ejemplo, puedes agregar color o modelo a tus productos o algunas ofertas, tal vez reseñas o calificaciones de estrellas, estrellas, estrellas, algo así. Y muchas veces se pueden ver tales resultados en Google cuando se busca algo. Por ejemplo, en los serbios, se puede ver calificación o estrellas o algo más. Y esta es la información del esquema que Google pobla. Y para algunos resultados, para algunas páginas web , decide mostrar esta información. No necesariamente garantiza que esa información estará presente en servidos. Pero hay una gran posibilidad si mantienes las cosas bien, si agregas este esquema org metadata, que en algún momento se incluya en los resultados de búsqueda de Google y cómo usar este esquema org propiedades. Vamos a dar click en Empezar. Y aquí tienes unos atributos diferentes que puedes usar en Webflow a los elementos. Entonces, en lugar de poner eso en la sección Código personalizado de tu página, solo tienes que seleccionar un elemento al que quieras agregar este atributo personalizado. Y solo tienes que ir a su configuración. Y aquí tendrás el atributo, la sección de atributos personalizados que usarás para atributos de esquema. Entonces si quieres, digamos la claridad de que esta parte del sitio web es una película. Lo que vas a hacer es en el nombre, vas a usar este tipo de elemento de esquema. Por lo que declaras el tipo de elemento como el nombre de este atributo. Y como valor, tienes este enlace a la sección adecuada de esquema org. Entonces esta es una forma de hacer eso explicado propio esquema org sitio web. Y de esa manera si tienes productos y quieres ponerlos mejor disponibles para la búsqueda. Creo que esta es una gran manera de agregar este Meta datos e información a su página web. Obviamente, lo hará más valioso para otro software blando, no solo para robots de indexación de búsqueda, sino también para fines de accesibilidad y cosas como esta. Así que solo ten en cuenta algunos lugares que podrías agregar este código para páginas individuales y para globalmente para todo tu sitio web. De acuerdo, eso es todo por ahora. Gracias por escuchar y nos vemos en la siguiente lección. 29. Uso de integraciones: Oye, qué bueno verte en esta lección. Esta es una lección extra cuando me gusta explicarte pestaña integraciones. Y eso es bastante poderoso porque te permite conectar Webflow a algunos servicios externos. Polar, por ejemplo, tengo un Google Analytics, sin embargo, lamentablemente para la versión de Google Analytics para solo tienes que agregar el fragmento de código de analytics en código personalizado, Webflow por alguna razón no lo soporta todavía, pero tienes algunos otros servicios que puedes integrar sin problemas con Webflow aquí, como Google Optimizar que te permitirá ejecutar pruebas AB. Por lo que solo tienes que crear un ID de contenedor en Google Optimize. Y luego dentro de Google Optimizar, puedes escribir en URL en dos páginas diferentes que has hecho en Webflow. Y entonces cambiará automáticamente esta versión del sitio web. Por lo tanto, muestra una página u otra para algunos otros usuarios y te dejaremos decidir fácilmente qué versión es mejor. Para la integración de Google Maps, solo tendrás que obtener la clave API de JavaScript de Google Maps. Y luego proporcionas la clave API. Y aquí, y esto te permitirá simplemente mostrar Google Maps dentro de web aunque sitio web. Y obviamente puedes crear un embed simple y no requiere de la clave API de Google Maps para estar presente aquí. Por lo que solo tienes que ir a Google Maps y hacer clic en la parte del mobbed y luego copiar el código de inserción y pegar el iframe, iframe en HTML, HTML personalizado en Webflow. Pero si quieres usar Google Maps más extensamente en tu sitio web y digamos Crea búsqueda dentro de tu sitio web que devolverá resultados en Google Maps. Entonces vas a tener que usar el registro de claves API como Google Developer y luego generar esta API de Google Maps y ponerla aquí. Y entonces también tienes píxel de Facebook, lo cual es realmente, realmente útil si estás ejecutando campañas en Facebook. Esto te permitirá conectar tu sitio web a Facebook, al menos por ahora, porque como todos sabemos, las cookies están desapareciendo lentamente y no son de apoyo, apoyo. La mayoría de los navegadores modernos, algunos de alguna manera bloqueados. Pero por ahora todavía tenemos estos píxeles de Facebook o integración front-end que solo puedes agregar con tu id de píxel pegado aquí. Por lo que en tu gestor de anuncios en Facebook, creas una nueva fuente de datos. Crea un nuevo píxel, y luego pega el ID de píxel aquí. Y el flujo de riqueza se encarga de todo lo demás. En cuanto a esta implementación, esto te permitirá, por ejemplo, crear dinámicamente anuncios para las personas que visitaron tu página en Webflow y muchas, muchas otras cosas incluyendo estadísticas y todos los datos que puedes previsualizar en el panel de Facebook, ¿de acuerdo? Ahora puedes retrasar el consentimiento de las cookies significa que cumplirás con las reglas del RGPD. Si cambia esto a sí, y entonces el píxel no se cargará sin el consentimiento. Entonces lo predeterminado es que el píxel se cargará si tu usuario acepta la política de cookies o, o no lo hace. Si cambias eso, serás más conforme con el RGPD porque se cargará solo si la gente acepta tu política de cookies, entonces tienes acceso API, lo cual es súper interesante porque Webflow permite Acceso a Es de referencia API ligera. Y hay algunos elementos a los que simplemente puedes acceder sin ir a flujos web UI, por lo que no tienes que acudir al diseñador para dejar decir devolver la lista de colección o los elementos de colección y puedes hacerlo con API. Hay una gran cantidad de datos que puedes obtener de Webflow sin siquiera pasar por Webflow. Y se pueden obtener todos los datos de recolección. que puedas, por ejemplo, menos tus colecciones y obtener una colección específica por ID. Y todo esto requiere un poco de conocimiento de JSON y HTTP protocolo y API. Pero si llegas a conocer esto, es bastante sencillo. No obstante, existe una forma más inteligente y más accesible que puedes usar con el fin de traducir, transferir algunos datos de Webflow a cualquier servicio que desees usando una API. Y me gustaría mostrarles que usando ganchos web, como pueden ver, ganchos web son parte de la referencia API para Webflow, pero también son accesibles con el panel en la parte inferior de esta página tienen ganchos web y pueden administrar webhooks desde aquí. Los ganchos web son básicamente alguna información que el flujo de trabajo detecta automáticamente a cualquier servicio que quieras usar y luego pasan estos datos que recibes del gancho web. Se podría formar presentación, o podría ser la información sobre su sitio que se está publicando o algunos nuevos pedidos del comercio electrónico. Simplemente agrega un gancho web y selecciona el tipo de disparador. Entonces, ¿qué tipo de datos quiero recibir de Webflow en mi URL de flujo de trabajo específico? Te voy a mostrar cómo crear esta URL webhook en un segundo. Pero digamos que desea recibir envíos de formularios y la URL de webhook es la dirección que utilizará el flujo de trabajo para enviar esta información. Por lo que cada vez que alguien se sienta en el formulario, obtendrás todos los datos del formulario enviados a esta web Huike. Bueno, ahora ¿cómo se crea una URL webhook? Bueno, la forma más fácil es maquillarnos en Zapier. Entonces crea cuenta en Zapier y luego busca, puedes buscar módulo gratis Webflow. Y puedes usar el módulo Webflow con el fin de hacer eso. O puedes usar este webhook de Zapier. Esta es la versión premium. Entonces si tienes cuenta gratuita, solo busca Webflow y podrás hacerlo. Para este gancho web. Vas a necesitar engancharte. Por lo que vas a esperar un nuevo dato que llegará a esta dirección y la URL de la dirección del cliente que quieres copiar está ahí mismo. Entonces copia eso y pasa esto a Webflow. Por lo que todos los datos del formulario inmediatamente además de este gancho de envío de formulario que generaste. De acuerdo, ahora vamos a nuestro sitio web, pero cosa muy importante antes de hacerlo, tienes que volver a publicar tu sitio web. Entonces guarde los cambios y vuelva a publicar el sitio web. Y luego puedes utilizar cualquiera de los formularios de tu sitio web para, digamos, suscribirte o enviar cualquier dato. Ahora tenemos la info que es la presentación que se ha recibido. Esto es algo que obviamente puedes personalizar como el estado de la forma en Webflow. Pero lo más importante es que esta forma pasó por la presentación. Y en Webflow puedes buscar formularios enviados ahí hace unos segundos, obtuve algunos datos con este e-mail. Este también es correo electrónico. Está bien. Pero en Zapier, lo que pueda. Check for es solo el continuar. Y ahora tengo esta solicitud a que se ha recibido. Encontramos una solicitud, algo fue enviado y tengo este email formulario dos, y los datos contienen pruebas M82 en codificadores esa casa. Entonces lo conseguí. Si quieres que los nombres sean más descriptivos, puedes acudir a este formulario. Y en las propiedades de registro de formulario, se puede comprobar el nombre del formulario para que pueda hacerlo Conozco newsletter o algo así. Por lo que es mejor, más adecuado para tus necesidades. Ahora si ves esta muestra de datos que se ha enviado con tus solicitudes, puedes continuar fácilmente. Y cuando tengas listo el HUC, entonces podrás crear la acción. Entonces, ¿qué quieres que suceda con estos datos? Por ejemplo, si quieres que esto se envíe a MailChimp como nuevo suscriptor, solo puedes conectar tu cuenta de Mailchimp aquí. Y tengo mi cuenta conectada. Si selecciono Continuar, entonces puedo enviarlo a una de mis audiencias. Tengo solo una audiencia y luego el email del suscriptor es algo que necesito obtener de los datos que guardo en caché de este gancho. Entonces básicamente hay este e-mail para, veamos todas las opciones. Y tengo este e-mail al que está probando en frío como un cómo lo que quiero hacer es pasar este email para hacer Mailchimp. Se pueden fijar todos los campos que menos tengo en mi chip. Pero no necesito hacer eso. Entonces, saltemos esta prueba y así es como creas una automatización que te permitirá simplemente suscribir usuarios a tu cuenta de Mailchimp directamente desde Webflow. Y es súper fácil en Zapier. También puedes consultar tapete integral. Es otra gran app que te permitirá hacerlo. Y también puedes crear zap de varios pasos para que puedas agregar para administrarlo y luego enviar los datos a Hojas de cálculo de Google o a cualquier otro lugar. Para los tipos activados que puedes usar. Como puedes ver aquí, nuestros formularios, envíos y citas publicados, pero también hay algunos eventos despachados cuando creas cuando alguien crea nuevo pedido o cambia el pedido para tu tienda de comercio electrónico. Y esto requiere que crees un proyecto de e-commerce en Webflow. Por lo que espero que aprendas más sobre esta referencia API y cómo puedes obtener datos de Webflow y tal vez enviar algunos datos a Webflow. Había una pista en esta lección que puedes explorar ahora. Esto se llama les dot how, donde tengo algunos tutoriales sobre API y protocolo HTTP. Y esto te ayudará a comenzar con automatizaciones. También, hay muchos recursos en Zapier e integral, integral loco que usé extensamente para web con fines. Entonces creo que este es un gran próximo paso para estar aún más avanzado en lo que haces. Pero por ahora, esto es todo lo que quería decirte. Y en este curso, eso es básicamente todo. Entonces espero que hayas aprendido mucho durante este curso y que tomes este conocimiento y lo apliques a tu web para proyectos te animo fuertemente a crear tu propio proyecto, o tal vez seguir de nuevo con los pasos con este curso y crear un blog, sitio web con CMS como lo hice. Gracias por ver y nos vemos en los próximos cursos. 30. Nos vemos: Gracias por su atención en este curso. Espero que te abra la cabeza a nuevas posibilidades y funciones de Webflow. Ahora puedes crear y administrar contenido dinámico dentro de Webflow con CMS y mucho más. Ojalá hayas logrado seguir los pasos de este curso para recrear nuestro sistema de blogs o acabas de crear otro lado tuyo. Además, espero que no sea el final de tu viaje porque actualmente en Webflow, puedes crear sitios web avanzados de comercio electrónico con base de datos dinámica de productos, tarjeta de trabajo y procesamiento de pagos. Encontrarás todo esto y mucho más en mis otros cursos de bienestar. Mientras tanto, gracias por el tiempo que pasamos juntos y espero que estuviera lleno de valiosos conocimientos beneficiarán su trabajo. Nos vemos en los próximos cursos.