Cómo crear y diseñar un sitio web interactivo con Webflow

1. INTRODUCCIÓN: Holy Gus, ¿te interesa construir y diseñar un sitio web interactivo de TreeD usando Webflow Si la respuesta es sí, entonces el curso podría ser para ti. Entonces, en primer lugar, vamos a obtener nuestro modelo Tree D de Spline Entonces vamos a integrar el modelo Tree D a la página web. Entonces también vamos a animar el modelo Tree D. Miren esto, chicos. Muy genial, ¿verdad? Entonces en el primer proyecto, vamos a construir un sitio web de portafolio profesional. Así que mira esto. En el segundo proyecto, vamos a construir una landing page de producto. Mira esto. Y en el tercer proyecto, vamos a construir un sitio web para un restaurante. Mira esto. Además, también vamos a construir un formulario de reservación en línea para nuestro sitio web de restaurante utilizando Typeform Por lo que si haces clic en este botón, haces un pedido, serás redirigido al formulario de reservación en línea. Bien. Una vez que hayamos construido el sitio web, también vamos a realizar una auditoría SEO usando SeOptiMer y Zambras y también vamos a construir un sitio web de perfil de compañía usando Webflow Solo necesitas escribir un baile de graduación simple y hacer clic en Generar y en menos de un minuto, AI te va a generar un hermoso sitio web como este. Mira esto. 2. Cómo encontrar un modelo 3D en spline: Santo gast, bienvenidos de nuevo al curso. En este video, vamos a construir modelos Tre usando Spline Bien, así que ahora, comencemos. En primer lugar, necesitarás crear tu cuenta. Así que solo voy a registrarme usando mi cuenta de correo electrónico, chicos. Bien, como ustedes pueden ver ahora vamos a ser redirigidos al tablero Bien, entonces si te desplazas hacia abajo, hay varios videos tutoriales. Entonces, si tienes tiempo libre, realmente te recomiendo que veas estos videos. Son muy útiles. Y aquí abajo, también tenemos varios proyectos geniales que ambos estamos usando Spline Entonces, si son un poco curiosos, pueden dar click en uno de estos proyectos, chicos. Bien, ahora comencemos. En realidad, tienes dos opciones. Entonces la primera opción es construir el modelo de tendencia desde cero. Y la segunda opción es usar uno de los modelos Triny en las secciones de la biblioteca, y luego puedes personalizarlo como quieras Puedes cambiar el color, puedes cambiar el estilo. Se puede cambiar el tamaño. Puedes hacer lo que quieras, ¿verdad? Así que simplemente haz clic en Nuevo archivo y serás redirigido a la página de edición Si quieres comenzar desde cero, simplemente haz clic en este ícono, y hay varias formas con las que puedes comenzar. Por ejemplo, como rectángulo, elipse, triángulo, estrella del Pentágono Puedes elegir la forma que quieras. Pero si no tienes experiencia previa en la construcción de modelos TreeD, realmente te recomiendo que uses la biblioteca, ¿verdad Así que solo haz clic en Biblioteca. Como ustedes pueden ver, hay muchos modelos TD disponibles que ustedes pueden usar. Bien, entonces ahora vamos a explorar qué modelo TD queremos usar para nuestro proyecto, ¿verdad? Bueno, en realidad, también puedes abrir biblioteca aquí, así que simplemente haz clic en Biblioteca. Y lo voy a abrir en la otra pestaña. Como ustedes pueden ver, hay dos secciones principales. Entonces las primeras secciones son pecados y la segunda sección es objeto. Entonces solo voy a seleccionar objeto, chicos, y hay muchas categorías diferentes. Por ejemplo, como iconos de Trey, dorso, botellas, cajas, edificios, personajes, limpieza navideña, ropa, cosmética, taza, emoji, medio ambiente, y aún muchos más Bien, entonces en este ejemplo, voy a seleccionar caracteres. Y simplemente desplácese hacia abajo, chicos. Hay muchos tres modelos D, chicos. Mira esto. Modelos TRed muy geniales. Bien, entonces voy a seleccionar los tres modelos. Siéntase libre de seleccionar cualquier modelo TD que le guste. Bien, así que solo haz clic en ese modelo de Árbol D, luego serás redirigido a la página de edición ¿Bien? El proceso puede tardar un par de segundos, así que solo espera. Bien, entonces esta es la página de edición chicos. Entonces ahora vamos a reestructurar un poco este modelo de Tren D Entonces, lo primero que hay que hacer es agrupar todos estos componentes. Como ustedes pueden ver, este modelo T D está compuesto por varios componentes como zapatos, auriculares, silla, computadora, pierna, cuerpo, cilindro y calor. Entonces lo que vamos a hacer es bloquear todos estos componentes y simplemente presionar Control G si estás en Windows. Sin embargo, si estás usando MacBook, solo presiona Comando G. Bien. Entonces lo que vamos a hacer a continuación es personalizar este modelo de tres D. Entonces en los tramos del metro, hay varios componentes como desollado, bolígrafos, zapatos Por ejemplo, quiero cambiar el color de los zapatos, así que simplemente haz clic en Shouse y solo haz clic en Dev, solo haz clic en Color Bien, así que digamos que quiero cambiar el color a azul Bien, entonces va a quedar así, chicos. Bien, así que puedes sentirte libre personalizarlo como quieras. Se puede cambiar el color. Y una vez que haya terminado, puede hacer clic en Exportar y simplemente hacer clic en Ambito integrado Entonces lo que vamos a hacer es copiar y pegar este código, ¿verdad? Entonces, cuando vayas a integrar este modelo de tres D a tu sitio web de Webflow, necesitarás este código, ¿verdad Solo asegúrate de que lo recuerdes. Bien, chicos, creo que ya está. Eso es todo lo que necesitas saber. Los veré chicos en el siguiente video. Adiós. 3. Explora las características de Webflow: Santa ráfaga, bienvenidos de nuevo al curso. En este video, vamos a explorar todas las características de la página de edición de Webflow Entonces vas a aprender a agregar el contenido, subir imágenes, cambiar de color, cambiar de estilo, diseñar, eactr, Entonces vas a aprender mucho. Así que asegúrate de prestar mucha atención a este video. Bien, así que lo primero que debes hacer es registrarte, así que simplemente haz clic en Comenzar. Bien, entonces tienes las opciones para registrarte usando la cuenta GML Entonces voy a hacer clic en Regístrate con Google, ¿verdad? Entonces me estoy registrando usando mi cuenta GML. Bien, aquí vamos. Como ustedes pueden ver ahora, vamos a ser redirigidos al dashboard Bien. Bien, entonces este es su espacio de trabajo, chicos Como ustedes pueden ver, aquí tengo un proyecto. Entonces este es un sitio web que creé como el año pasado. Bien, entonces para crear un nuevo sitio web, puede hacer clic en Nuevo sitio y será redirigido a esta página Y simplemente haz clic en Marketplace y Plantillas. Entonces hay muchas plantillas que ustedes pueden usar. Hay muchas opciones, chicos. Algunos de ellos son gratuitos, algunos de ellos no son gratuitos. Así que asegúrate de que te guste la plantilla gratuita, ¿verdad? Porque no quieres gastar dinero en esta plantilla. Entonces en este proyecto, vamos a construir un portafolio profesional. Así que sólo voy a escribir como cartera así. Y solo cerds. Hay muchas opciones, chicos. Entonces voy a seleccionar la libre. Así que solo escribe gratis así, y vamos a encontrar la plantilla gratis, ¿verdad? Bien, así que me interesa esta plantilla, así que sólo voy a dar click en la placa. Si quieres sentarte, cómo se ve, simplemente haz clic en Vista previa en Navegador, ¿verdad? Se va a abrir esta plantilla en la otra pestaña. Bien, entonces se ve así muy genial, ¿verdad? Mira esto. Bien, así que ahora voy a hacer clic en usar de forma gratuita. Bien, así que solo haz clic en Crear lado. Se le puede nombrar. Voy a nombrarlo portafolio profesional como este y solo haz clic en Crear lado. Y serás redirigido a la página de edición, ¿verdad? El proceso podría llevarnos un par de segundos , así que solo espera. Ojalá no tarde demasiado. Bien, aquí vamos. Bien, entonces ahora vamos a explorar todos los grilletes disponibles en estos dit en niños, ¿verdad No necesitas saber, cada uno de ellos porque hay demasiados y podrías estar abrumado Entonces solo te voy a enseñar grilletes que usaremos en los proyectos, ¿verdad Entonces, asegúrate de prestar mucha atención. Bien, entonces el primero es el navegante, ¿verdad? Entonces como ustedes pueden ver aquí, tienen cuerpo ustedes tienen Navbar, tienen slider Tienes cuatro secciones. Esta es la primera, segunda sección, tercera sección, y cuatro secciones, ¿verdad? Entonces esto te va a facilitar la navegación a través de este sitio web. Entonces, por ejemplo, si quieres editar las primeras secciones, así que simplemente haz clic en las primeras secciones, derecha, y serás redirigido a esta página Bien, así que si das clic en las primeras secciones, hay subcomponentes Por ejemplo, contenedor. Si haces clic en Contenedor, este es el contenedor chicos, y dentro de contenedor, tenemos columnas. Tenemos dos columnas como la columna uno y la columna dos. Dentro de la columna uno, tenemos rumbo, ¿verdad? Entonces esto es como el subcomponente de la columna uno. Y la segunda columna, tenemos Br graph y también grupo de habilidades. Bien, entonces este es el grupo de habilidades, chicos. Entonces, cuando quieras editar una de estas secciones, puedes seleccionar Wiport que quieras editar Por ejemplo, en este caso, quiero editar el párrafo, así que sólo tienes que hacer clic en Párrafo, ¿verdad? Y solo haz doble clic y podrás editar el texto. Bien, ahora vas a hacer clic en elemento. Entonces hay muchos elementos, chicos. Por ejemplo, como botón item, tipografía, ¿qué más Media? Esta es la parte más importante, Guy. Si quieres subir una imagen o tal vez un video o tal vez unos videos de YouTube, puedes usar este filtro. Si te desplazas no, hay formularios. ¿Qué más? Entrada. Casilla de verificación de siguiente área, captura También te puede gustar el código incrustado aquí. Bien, entonces ahora te voy a enseñar a subir una imagen, ¿no? Así que solo tienes que ir a las secciones de medios, desplázate un poco hacia abajo y simplemente haz clic en Imagen. Bien, así que aquí mismo, puedes hacer clic en Just Image. Y tienes dos opciones. O bien puedes subir tu propia imagen, ¿verdad? Así que simplemente haz clic en este icono. Y en este ejemplo, voy a subir una imagen aleatoria, chicos. A lo mejor esta imagen, ¿verdad? Así que solo haz clic en Abrir. O la segunda opción es usar la imagen de la biblioteca, ¿ verdad? Entonces depende totalmente de ti. Bien, como ustedes pueden ver, hemos subido con éxito la imagen. Bien, entonces ahora vamos a aprender a cambiar los colores de fondo. Vamos a aprender a cambiar el tipo de teléfono y también el estilo. Bien, entonces ahora, comencemos con el tipo de teléfono. Como ustedes pueden ver, el tipo de teléfono es Roboto. Si quieres cambiarlo, simplemente haz clic en este, y hay muchas opciones. Por ejemplo, quiero cambiarlo a impactar. Así que solo haz clic en Impact. O tal vez quieras cambiarlo a amargo. Así que solo haz clic en Bitter, ¿verdad? Bien, entonces ese es el tipo de fuente. Bien, entonces digamos que también quieres cambiar el tamaño de la fuente. Como ustedes pueden ver, ahora mismo, el tamaño de la fuente es 14. Entonces digamos que quiero hacerlo un poco más grande, voy a cambiarlo a 16, ¿verdad? Aquí vamos. Se ve un poco más grande, ¿verdad? Bien, así que si quieres cambiar el color de la fuente, simplemente haz clic en esto. En este ejemplo, voy a cambiar el color de la fuente de gris a azul oscuro, así que basta con hacer clic en azul oscuro. Bien, aquí vamos. Como ustedes pueden ver, ahora hemos cambiado con éxito color del teléfono a azul oscuro, ¿verdad? Bien, entonces si también quieres cambiar las posiciones del texto ahora mismo, el texto está a la izquierda. Si quieres hacerlo en el centro, sugiere hacer clic en este. Si quieres hacerlo a la derecha, sugiere hacer clic en este. Bien, así que voy a poner el texto a la izquierda, chicos. Y aquí abajo, también puedes personalizar el estilo. Bien, así que simplemente desplácese un poco hacia abajo. Ahora vamos a cambiar los colores de fondo, ¿no? Bien, así que solo haz clic en esto y tienes muchas opciones. Entonces digamos que quiero cambiar el color a verde claro, ¿verdad? Mira esto. Muy genial, ¿verdad? O tal vez quiero cambiarlo a, como, azul claro. Entonces se va a quedar así, chicos. Bien, así que si quieres personalizar el borde, simplemente haz clic en Borde, y luego puedes personalizarlo. Con usted también puede personalizar el color. Ahora mismo, es de color negro. Siéntete libre de cambiarlo si quieres. Bien, así que por último, puedes personalizar los efectos. Ahora mismo, el efecto es normal, pero puedes hacer experimentos con estos efectos. Por ejemplo, como oscurecido, multiplicar color, quemado, aligerado, strin Tienen muchas opciones, chicos, ¿verdad? Sólo voy a usar el efecto normal, ¿no? También puedes agregar transiciones. Entonces, si estás interesado en animar el sitio web, puedes usar estas transiciones. No te preocupes. Voy a explicar esto en los próximos videos, ¿no? Bien, así que si quieren publicar estos sitios web, chicos, simplemente hagan clic en Pablis, ¿verdad este momento el sitio web aún no se ha publicado, pero si quieres publicarlo, simplemente haz clic en Publicar en el dominio seleccionado, ¿verdad? También puedes agregar un dominio personalizado si tienes tu propio dominio. Bien, así es como publicas el sitio. Pero obviamente, en este caso, no vamos a publicar estos sitios web, cierto, porque no hemos terminado de editar este sitio web. Bien, entonces creo que eso es todo, chicos. Eso es todo lo que necesitas saber. Veré gas en el siguiente video donde vamos a iniciar el proyecto real, ¿verdad? Así que vamos a construir sitios web de portafolio profesionales. Ahí voy a ver gas. 4. Cómo integrar el modelo 3D en un sitio web de portafolio profesional: Hola, chicos. Bienvenidos de nuevo al curso. En el primer proyecto, vamos a construir un sitio web de portafolio profesional, y no quiero empezar de cero chicos porque va a llevar mucho tiempo, ¿verdad? Así que sólo vamos a elegir como una plantilla, y vamos a clonar esa plantilla, ¿verdad? Entonces, como ustedes pueden ver, tenemos, como, muchas plantillas diferentes. Entonces solo voy a seleccionar esta plantilla, chicos. El creador de esta plantilla es Zack Kendall. Plantilla muy genial, chicos. Entonces solo porque estoy usando esta plantilla, no significa necesariamente que necesites seguirme usando esta plantilla. Tienes como muchas opciones, así que siéntete libre de elegir cualquier plantilla que quieras, ¿verdad? Bien, entonces para clonar esta plantilla, es muy fácil. Todo lo que necesitas hacer es hacer clic en clonar en Webflow. Pero antes de hacer eso, es mejor si primero abriste estos sitios web en la otra pestaña solo para asegurarte de que realmente te gusta este sitio web, ¿verdad? Bien, entonces aquí vamos. Miren a estos chicos. Es muy genial, ¿verdad? Es un poco minimalista, pero me gusta mucho el estilo, para ser honesto contigo Bien, entonces ahora vamos a clonar la dmplate. Así que solo haz clic en clonar en Webflow. Bien, aquí vamos. Entonces ahora. Simplemente haga clic en Crear lado. Y no se preocupen chicos esto es completamente gratis, y necesitarás nombrar este sitio web. Sólo voy a escribir un proyecto de portafolio profesional, ¿verdad? Entonces ese va a ser el nombre. Así que simplemente haz clic en Crear lado. Bien, así que solo espera el proceso pueda tardar un par de segundos. Ojalá, no tarde demasiado. Bien. Ahora vamos a ser redirigidos a la página de edición de Webflow, Entonces lo primero que vamos a hacer aquí es integrar los tres modelos D que creamos usando Spline a esta página web Y no te preocupes. El proceso es muy sencillo. Bien, así que voy a hacer clic en Agregar elemento y simplemente desplazarme. Bien, entonces en las secciones de medios, solo haz clic en escenas de Spline, ¿verdad? Así que solo haz clic en esto. Como ustedes pueden ver, acabamos de crear un sind Spline. Bien, entonces ahora vamos a tu cuenta de Spline. Si recuerdas, creamos este modelo de árbol, ¿verdad? Así que solo haz clic en esto Y ahora vamos a copiar y pegar el código, ¿verdad? Vamos a incrustar el código. Justo aquí. Bien, así que esperen, chicos. Todavía se está procesando. Bien, muy genial. Así que ahora solo hacemos clic en Exportar y copiar y pegar. Este código. Bien, entonces lo que vamos a hacer es hacer clic en Copiar Insertar, y voy a pegar el código aquí, ¿verdad? Y voy a copiar y pegar esta parte. Y volvamos a la página de edición de Webflow. Y justo aquí en las secciones de URL, solo pagina ese código. Bien. Así que ahora, simplemente haz clic en Abastecimiento y envía. Como ustedes pueden ver, hemos integrado con éxito estos tres modelos D a la página web. Bien, entonces lo que vamos a hacer a continuación es nombrar a la clase, así que simplemente haz clic en Nueva clase. El nombre va a ser Spline. El modelo D. Puedes ponerle el nombre que quieras. Depende totalmente de ti. Entonces sólo voy a golpear a los chicos de Enter. Bien, entonces hemos creado con éxito esta clase. Lo siguiente que vamos a hacer es hacer esto un poco más grande. Como ustedes pueden ver, este modelo de tres D es demasiado pequeño. Entonces sólo voy a modificar las alturas. Voy a escribir 100 fg, así. Bien, entonces a continuación vamos a dirigir esto a la cima. Bien. Y a continuación, vamos a cambiar la posición. Entonces ahora mismo es estático, así que voy a cambiarlo a pegajoso, ¿verdad? Hemos integrado con éxito este tres el modelo a la página web. Los veré chicos en el siguiente video donde vamos a animar este sitio web, y vamos a hacer más modificaciones Vamos a hacer que este sitio web sea más hermoso. Bien, entonces los veré ahí, chicos. Adiós. 5. Animación de un modelo 3D en un sitio web de portafolio profesional: Chicos santos, bienvenidos de nuevo al curso. En este video, vamos a agregar animaciones a este modelo de tres D. Pero antes de agregar las animaciones, primero vamos a hacer algunas modificaciones. Como ustedes pueden ver, este modelo de tres D está demasiado cerca del borde superior. Entonces vamos a reubicar el modelo de tres D al centro ¿Bien? Así que simplemente desplácese hacia abajo un poco. En estas secciones de posición, simplemente haz clic en Auto, y voy a seleccionar 50. O tal vez 100, ¿verdad? Como ustedes pueden ver, ahora, este modelo de tres D está en el centro, ¿verdad? Bien, así que eso es mejor. Y hagamos clic en este botón de arcilla. Te va a dar la vista previa del sitio web. Bien, entonces sigue cargando. Como ustedes pueden ver, este modelo de tres D se ha integrado a este sitio web, y si se desplazan hacia abajo, este modelo de tres D permanece en segundo plano, ¿verdad? Entonces eso es muy genial. El único problema que tenemos es el color del texto. Es negro, pero el fondo también es negro, así que en realidad no se puede leer este texto, ¿verdad? Entonces vamos a arreglar eso en el siguiente video, chicos. No te preocupes. Bien, entonces ahora volvamos a la página de edición. Bien, entonces ahora vamos a animar estos tres modelos D. Así que simplemente haga clic en el modelo Spline tres D, haga clic en Interacciones. Y sobre la Piterzación, basta con hacer clic en esto y dar clic La mayoría de los movimientos en Viewport. Bien, entonces a continuación, solo haz clic en Seleccionar acciones y haz clic en Reproducir la mayoría de las animaciones, ¿verdad? Bien, así que solo haz clic en Agregar A Animaciones. Y ahora necesitarás nombrar las animaciones. Puedes ponerle el nombre que quieras . Depende totalmente de ti. En este caso, le voy a nombrar tres Animaciones modelo D. Bien, así que solo presiona Enter y ahora voy a hacer click en esto y solo haz clic en Spline porque obtuvimos este modelo tres D de Spline, Bien, así que ahora puedes desplazarte un poco hacia abajo. A continuación, vamos a seleccionar el objeto que queremos animar. Entonces en este caso, queremos animar el grupo, así que basta con hacer clic en grupo Bien, entonces voy a rotar este modelo de tres D sobre el eje blanco, ¿verdad? Entonces voy a dirigir esto un poco hacia la derecha. Voy a fijarlo para que sea 1.5. Bien, así que ahora solo haz clic en la segunda capa. Y vamos a hacer lo mismo. Entonces, para el objeto, simplemente haga clic en grupo. Y vamos a hacer lo contrario, chicos. Entonces queremos rotar este tres modelo en direcciones opuestas, ¿verdad? Entonces voy a dirigir esto a la izquierda. Entonces voy a establecer esto para que sea negativo 1.5. Bien, entonces ya terminamos. Ahora solo haz clic en Vista previa en vivo, ¿verdad? Entonces como ustedes pueden ver, si cavo mi ratón a la derecha, entonces estos tres modelos D se van a mover hacia la derecha. Y lo mismo si dirijo mi mayor parte hacia la izquierda, estos tres modelos D se van a mover hacia la izquierda, ¿verdad? Mira esto. Muy genial, ¿verdad? Bien, así que ahora no te olvides de guardarlo. Así que solo haz clic en Guardar. Bien, así que hemos guardado con éxito estas animaciones. Bien, entonces a continuación, basta con hacer clic en el botón de visualización, y vamos a ver cómo se ve la animación en el sitio web, ¿ verdad? Bien, muy genial. Mira esto. Bien, así que si quieren desplazarse hacia abajo, se va a quedar así, chicos. Animaciones geniales gratis, ¿verdad? Bien, chicos, creo que eso es todo para este video. Los veré chicos en el siguiente video donde vamos a agregar contenido a la página web. Vamos a subir imágenes al sitio web y hacerlo más bonito. Bien, entonces los veré ahí, chicos. Adiós. 6. Cómo agregar contenido al sitio web de portafolio profesional: Chicos santos. Bienvenidos de nuevo al curso. En este video, vamos a agregar contenido a esta página web, y también vamos a subir nuevas imágenes a esta página web. Bien. En primer lugar, vamos a hacer algunas modificaciones, así que basta con hacer clic en NAP. Y voy a cambiar el color del contenedor, así que simplemente haz clic en contenedor y desplázalos un poco. Entonces voy a cambiar el color de blanco a azul claro, ¿verdad? Bien, muy genial. Como ustedes pueden ver, hemos cambiado con éxito el color a azul claro. Bien, entonces a continuación, voy a cambiar el color de esta caja, ¿verdad? Así que basta con hacer clic en el botón. Y como ustedes pueden ver, ahora mismo, el color es morado, así que voy a cambiarlo a Negro. Así que solo desplázalo en un poquito y haz clic en esto y voy a seleccionar negro, ¿verdad? Entonces ahora, como ustedes pueden ver, el color de estos bloques es el negro. Bien, entonces ahora volvamos. Y lo que vamos a hacer a continuación es agregar contenido a este sitio web, ¿verdad? Así que solo haz clic en Introducción. Simplemente haga clic en continuer y Intro parent, ¿verdad? Así que solo haz clic en este Bien, así que si quieres modificar este texto, simplemente haz doble clic sobre él. Bien, entonces en este ejemplo, voy a escribir. Bienvenido a mi cartera, ¿verdad? Bueno, parece que esto es demasiado grande, así que voy a hacerlo más pequeño. Entonces voy a cambiar el tamaño de fuente, así que simplemente desplácese un poco hacia abajo. Bien, entonces esto es más pequeño. Bien, entonces ahora vamos a reemplazar esta imagen de aquí abajo por mi propia imagen, ¿verdad? Bien, así que ahora solo haz clic en Intro Image y vamos a reemplazar esta imagen por mi propia imagen Así que solo desplázate un poco hacia abajo. Y simplemente haz clic en Quitar imagen y haz clic en Imagen y haz clic en Just Image. Bien, entonces voy a usar esta imagen. Generé esta imagen usando chicos de IA, haz clic en esto y simplemente haz clic en Solo imagen. Y solo haz clic en Portada. Bien, entonces ahora volvamos Bien, se ve muy bien, ¿verdad? Bien, entonces ahora vamos a agregar contenido a este sitio web. En primer lugar, vamos a agregar contenido a esta sesión de introducción. Bien, entonces tengo mi documento aquí. Generé este párrafo de introducción usando Chat GPT. Bien, así que sólo voy a copiar y pegar esto. Bien, entonces volvamos a la página de edición. Simplemente haga doble clic y voy a reemplazar esto con mis presentaciones. Bien, muy genial. Bien, entonces a continuación, vamos a editar estas secciones. Bien, entonces primero, voy a sustituir esta imagen por mi propia imagen. Así que solo haz clic en esto y simplemente haz clic en Eliminar imagen y haz clic en Agregar imagen y simplemente haz clic en Elegir imagen. Y voy a subir mi propia imagen, chicos. Bien, entonces voy a seleccionar esta imagen. Así que solo haz clic en Abrir y generé esta imagen usando AI dos chicos. Bien, así que solo esperen chicos. Ahora sigue subiendo la imagen. El proceso puede tardar un par de segundos. Ojalá, no tarde demasiado. Bien, entonces aquí vamos. Bien, así que ahora voy a hacer click en portada. Bien, muy genial. Mira esto, ¿verdad? Bien, entonces ahora vamos a editar el contenido. Bien, entonces en las secciones, voy a destacar mis habilidades y pericia, ¿verdad? Entonces en este ejemplo, tengo tres habilidades principales. El primero es el diseño web. El segundo es el desarrollo web, y el tercero es la ciencia de datos. Bien, entonces ahora vamos a editar este contenido. Sólo voy a copiar y pegar esto, ¿no? Simplemente haga doble clic en esto, bloquee y copie y pegue eso. Bien, muy genial. A continuación, vamos a editar la segunda habilidad. Así que simplemente haz clic en el segundo padre del Proyecto. Bien, entonces primero, voy a sustituir esta imagen por mi propia imagen. ¿Bien? Así que sólo voy a hacer doble clic en esto. Y voy a dar clic en Quitar imagen, y voy a dar click en Imagen, clic en Joe Imagen, y ahora voy a subir la imagen. Bien, entonces esta vez voy a subir esta imagen genial, generé esa imagen usando chicos de IA. Para su información, la herramienta que utilizo fue Leonardo AI. Es muy similar a Mid journey. Bien, así que no olvides hacer clic en portada. Bien, entonces ahora vamos a editar el contenido. Bien, así que solo haz clic en Texto del proyecto. Aquí vamos. Bien, entonces voy a copiar y pegar a estos chicos, ¿verdad? Esta es mi segunda habilidad, el desarrollo web. Entonces solo haz doble clic en esto y pegarlo aquí, ¿verdad? Bien, entonces ahora vamos a hacer lo mismo a la tercera habilidad. Así que simplemente haz clic en Proyecto padre, simplemente haz clic en Proyecto hijo. Entonces voy a reemplazar esta imagen por mi propia imagen, solo haz clic en esta. Bien. Y voy a dar clic en Quitar imagen y simplemente dar clic en Adimage Bien, así que ahora solo hacemos clic en Jose Image y voy a subir mi propia imagen. Bien, entonces esta vez, voy a subir esta imagen solo haz clic en Abrir. Bien, entonces ahora está subiendo la imagen, chicos. Así que solo espera. El proceso puede tardar un par de segundos. Ojalá no lleve demasiado tiempo, ¿verdad? Y no olvides hacer clic en Portada. Bien, muy genial. Bien, entonces ahora vamos a editar el contenido. Mi tercera habilidad no es la fotografía. Es ciencia de datos. Escriba en Ciencia de Datos, ¿verdad? Aquí vamos. Y ahora vamos a copiar y pegar esto y simplemente hacer lo mismo. Así que solo bloquea esto y pegarlo. Bien, muy genial. Bien, así que terminamos. Ahora voy a dar clic en Vista previa. Bien, chicos, así que este es nuestro modelo Tre. Si te desplazas hacia abajo. Tenemos la sesión de introducción. Soy Chris Raharja, V de altos profesionales con experiencia en diseño web, desarrollo web y ciencia de datos Más allá de mi dominio técnico en mis habilidades blandas, incluyendo la atención al detalle, incluyendo la atención al detalle, creativa de problemas y la comunicación efectiva, asegurar que cada proyecto supere Colaboremos para convertir las ideas en soluciones digitales impactantes, muy chulas Y aquí, destaco mis habilidades. El primero es el diseño web. El segundo es el desarrollo web, y el tercero es la ciencia de datos. Muy genial, ¿verdad? Bien, entonces ahora volvamos a la página de edición de Webflow. Bien, chicos, por último, voy a arreglar las posiciones de la imagen. Voy a hacerlo más bonito, así que solo haz clic en contener, ¿ verdad? Entonces se va a quedar así. Bien, entonces ahora vamos a hacer clic en el botón de visualización. Y si ves esta imagen, se ve mucho mejor que la anterior, ¿ verdad? Mira esto. Muy chulo. Akka, así que terminamos con el primer proyecto Entonces Askas en el siguiente video donde vamos a iniciar el segundo proyecto Entonces en el siguiente video, vamos a construir una landing page de producto. Así que los veré ahí, chicos. Adiós. 7. Cómo integrar el modelo 3D en la página de aterrizaje del producto: Santo anfitrión, bienvenido de nuevo al curso. En este video, vamos a construir modelo T D usando Spline, y vamos a integrar el modelo TD al sitio web de Webflow Para tu información en el segundo proyecto, vamos a construir una página de aterrizaje de producto para zapatillas o S. Bien, así que en primer lugar, simplemente haz clic en Bibliotecas. Selecciona objetos y haz clic en la ropa. Bien, entonces en este caso, estoy buscando un modelo de tres D para. Voy a seleccionar esta. Si quieres elegir otros tres modelos D, no dudes en hacerlo. Bien, entonces ahora está abriendo este modelo de tres D en la página del editor. Entonces solo espera porque el proceso podría tardar un par de segundos. Ojalá no tarde demasiado. Bien, como ustedes pueden ver, el modelo TriT es ren Entonces ahora vamos a personalizar el color. Bien, así que solo haz clic en este modelo TRine, y voy a cambiar, el color Bground de blanco a azul claro, Entonces solo ve a Google y solo escribe el código de color para azul claro. Bien, así que solo copia y pega esto Bien, aquí vamos. Muy cool. Ahora vamos a cambiar la parte roja a negra. Así que solo escribe el color del abrigo para el negro. Pueden cambiarlo a cualquier color, chicos, así que depende totalmente de ustedes, ¿verdad? Bien, así que solo copia y pega esto Bien, se ve así. Muy cool. Y ahora lo que vamos a hacer a continuación es exportar estos tres modelos D. Así que solo haz clic en Exportar. Simplemente haga clic en FEWR porque necesitaremos obtener este código incrustar Bien, así que solo esperen chicos ahora todavía se está procesando, y ahora solo haz clic en Copiar Incrustar, ¿verdad? Y voy a abrir como un Google Docs. Bien, así que terminamos. Lo siguiente que vamos a hacer es encontrar las plantillas adecuadas para la página de destino del producto. Bien, así que solo ve al mercado de Webflow y solo escribe zapatos o zapatillas, ¿verdad Encontrarás muchas plantillas, algunas de ellas son gratuitas, otras no son gratuitas, así que asegúrate de seleccionar la gratuita. Bien, entonces voy a seleccionar esta plantilla. A mí me gusta, chicos. Y si te desplazas hacia abajo y simplemente haces clic en copyright Info, asegúrate de que esta plantilla tenga una licencia creativa de dominio público común, ¿verdad? Significa que esta plantilla puede ser utilizada para trabajos personales y también comerciales. Bien, así que solo haz clic. Lo tengo. Entonces, si quieres clonar esta plantilla, simplemente haz clic en clonar en Webflow Bien, así que solo haz clic en eso, chicos. Bien, entonces ahora solo haz clic en Crear sitio, y aquí mismo, necesitarás nombrar el sitio. Voy a ponerle nombre Página de destino del producto. Puedes ponerle el nombre que quieras. Depende totalmente de ustedes, chicos. Bien, así que solo haz clic en Crear sitio. Ahora seremos redirigidos a la página de edición de Webflow, ¿verdad? Bien, entonces lo siguiente que vamos a hacer es integrar el modelo de tres D a esta página web. Bien, así que si recuerdas, anteriormente, ya copiamos y pegamos el código de amplet de Spline Entonces vamos a copiar el deporte Bien, entonces vamos a hacer lo mismo como lo que hicimos antes que ustedes chicos. Así que simplemente haz clic en este icono y simplemente desplázalo un poco. Y en las secciones de medios, vamos a dar click a escena Spline, ¿verdad Y tendremos que copiar y pegar el código. Bien, así que solo haz clic en Recargar, escena Spline. Bien, como ustedes pueden ver, hemos integrado con éxito el modelo tres D a la página web. Entonces ahora voy a cavar esto hasta la cima. Voy a poner esto debajo de NAFBar. Entonces, si te desplazas hacia arriba, verás el modelo tres D en la parte superior. Entonces lo que vamos a hacer a continuación es modificar un poco este modelo de tres D. Así que desplácese hacia abajo. Y como ustedes pueden ver ahora mismo, la posición es estática, así que vamos a cambiarla a pegajosa, ¿verdad? Esto es exactamente lo mismo que hicimos anteriormente. Y solo haz clic en Auto, y voy a seleccionar 5,100. Bien, aquí vamos. Bien, así que terminamos, chicos. Hemos integrado con éxito este modelo de tres D a la página web. Veré a Gus en el siguiente video, donde vamos a animar este modelo de tres D. Los veré ahí, chicos. Adiós. 8. Animación de un modelo 3D en la página de aterrizaje de un producto: Chicos santos. Bienvenidos de nuevo al curso. En este video, vamos a animar estos tres modelos D. Bien, así que ahora comencemos. En primer lugar, basta con hacer clic en Spline scene. Después haga clic en Interacciones. En las secciones Bittreer, simplemente haga clic en esto y haga clic en Mover con el ratón en Bien, así que simplemente haz clic en Seleccionar acciones y haz clic en Reproducir animaciones de ratón. A continuación, basta con hacer clic en Animaciones. Bien, así que aquí mismo, necesitarás nombrar las animaciones. Puedes ponerle el nombre que quieras. Depende totalmente de ti. En este caso, voy a llamarlo casa Animaciones. Y sólo pulsa Enter. Bien, entonces siguiente, solo haz clic en esto. Y vamos a seleccionar Spline porque conseguimos este modelo de tres de Spline Así que solo haz clic en esto. Bien, entonces a continuación, vamos a especificar qué objeto queremos animar. Así que solo haz clic en seleccionar y voy a seleccionar el tono de ejecución Bien, así que aquí abajo, tienes muchas opciones. Puede rotar este modelo de tres D sobre el eje X. Puede rotar este modelo de tres D en el eje Y. También puede rotar este modelo de tres D en el eje Z. Entonces depende totalmente de ustedes chicos. Bien, entonces en este caso, voy a rotar esta S en el eje y, ¿verdad? Entonces voy a dirigir esto a la derecha. Voy a fijarlo para que sean tres. Y vamos a la segunda capa. Nosotros vamos a hacer los mismos chicos, así que solo tienes que seleccionar el objeto que quieras animar. Entonces en este caso, va a ser tonalidades corriendo, y las direcciones de la rotación van a ser lo contrario, ¿verdad Entonces voy a dirigir esto a la izquierda, y voy a fijarlo para que sea negativo tres. Bien, así que ahora solo haz clic en Vista previa de la vida. Entonces se va a quedar así, chicos. Muy genial, ¿verdad? No olvides guardarlo, simplemente haz clic en Guardar. Bien, entonces ahora vamos a probar estas animaciones. Bien, entonces ahora vamos a hacer clic en los botones de visualización. Como ustedes pueden ver, esto a través de la modelo ha sido animado, ¿verdad? Mira esto. Mira las rotaciones. Muy genial, ¿verdad? Bien, entonces ahora vamos a desplazarlos un poco. Bien, entonces en el siguiente video, vamos a agregar más contenido a este sitio web, y también vamos a reemplazar estas imágenes por nuestras propias imágenes, ¿verdad? Y en este proyecto, estamos construyendo una landing page. Entonces, como ustedes saben, landing page es muy simple. Estás mostrando tu producto y también las descripciones del producto, y eso es todo. Entonces vamos a eliminar parte innecesaria de este sitio web, ¿verdad? Entonces eso es lo que vamos a hacer en el siguiente video. Bien, chicos, creo que ya está. Eso es todo lo que necesitas saber. Los veré chicos en el siguiente video. Adiós. 9. Cómo agregar contenido a la página de aterrizaje del producto: Gas santo, bienvenidos de nuevo al curso. En este video, vamos a agregar contenido a la página de revestimiento del producto, y también vamos a reemplazar las imágenes del producto por nuestras propias imágenes. Bien, así que ahora, comencemos. Lo primero que vamos a hacer aquí es sustituir el nombre del producto por nuestro propio nombre de producto. Bien, entonces en este caso, el nombre de mi producto es Comfy Sneaker Así que solo reemplázalo con zapatillas cómodas. Bien, aquí vamos. Y voy a quitar esto. Bien, chicos. Entonces, lo que vamos a hacer a continuación es reemplazar la imagen del producto por nuestra propia imagen. Así que simplemente haz clic en Secciones de héroe y haz clic en Fotos de héroe, ¿verdad? Bien, así que simplemente desplázalo un poco y haz clic en Quitar imagen y simplemente haz clic en Agregar imagen y simplemente haz clic en os Imagen. Bien, entonces voy a reemplazar esa imagen del producto por mi propia imagen. Para tu información, generé esta imagen usando chicos de IA. Bien, entonces voy a seleccionar portada O tal vez contenido, ¿verdad? Así que basta con hacer clic contenido. Bien, entonces a continuación, vamos a cambiar el efecto de iluminación de estos tres modelos D. Así que simplemente haz clic en Spline scene y desplázate hasta la parte inferior Y para el blending, vamos a cambiarlo de normal a color bom, ¿verdad Bien, entonces ahora lo que vamos a hacer a continuación es editar el contenido. Entonces, para que sea más fácil, vamos a ocultar primero el modelo tres D. Bien, así que simplemente haz clic en Spline Enviar y desplázate hacia arriba y vamos a hacer clic en Mostrar todos los ajustes y simplemente haz clic en Oculto, ¿verdad Bien, así que no se preocupen, chicos. Al final, lo vamos a hacer visible de nuevo, pero ahora vamos a editar a contenido, así que solo esconde eso primero, ¿verdad? Bien, entonces ahora solo tienes que hacer clic en las secciones de héroe y en el contenido del héroe. Simplemente haga clic en la parte superior Encabezado tres. Bien, para que puedas modificar esto. No voy a cambiar nada, chicos, pero voy a cambiar el nombre del producto, ¿verdad? Porque en este caso, el nombre de mi marca es Comfy Sneakers, no Nike ni Jordan, ¿verdad Así que solo haz doble clic en él, y voy a cambiarlo a Comfy Snikers Bien, así puedes sentirte libre de cambiar el color del teléfono. Puedes cambiar el tamaño del teléfono. Depende totalmente de ti. Bien, entonces aquí abajo, vamos a escribir las descripciones de los productos. Así que generé una descripción de producto usando JA JPT. Entonces puedes hacer lo mismo, así que solo voy a copiar y pegar eso y ponerlo aquí, ¿no? Bien, aquí vamos. Y aquí abajo, tenemos botones de colección C. Entonces, si quieres modificar el texto, solo tienes que hacer clic en el botón y simplemente hacer doble clic. Y pueden modificar este texto, pero yo no voy a cambiar nada, chicos. Bien, así que terminamos con estas secciones, y ahora pasemos a las siguientes secciones Bien, así que ahora vamos a hacer clic en acerca de las secciones. Simplemente haga clic en Acerca de nosotros. Título de la sección. Bien, entonces voy a modificar este texto. Entonces, obviamente, en este caso, no estamos vendiendo a Eri Jordan. Estamos vendiendo zapatillas de café, ¿verdad? Entonces solo reemplaza esto con colecciones de zapatillas de café. Bien, así también puedes cambiar este texto. Sólo voy a escribir, como, una cosa al azar aquí, chicos. Cup in sneakers se compromete a producir zapatillas de alta calidad y convertibles. Bien. A lo mejor puedas agregar tu eslogan de producto o algo así. Bien, entonces terminamos con lo de las secciones. Ahora pasemos a las siguientes secciones. Así que simplemente haga clic en secciones horizontales, haga clic en marcos. Como ustedes pueden ver, hay muchos artículos. Entonces cada artículo representa el producto que están vendiendo. Entonces en este caso, solo vamos a enumerar como dos productos en esta landing page, así que vamos a eliminar la mayoría de estos artículos, ¿verdad? Entonces solo borra esto. Voy a borrarlo uno por uno, chicos. Entonces sólo vamos a dejar como dos artículos, ¿no? Bien, así que solo haz clic en esto y lo primero que vamos a hacer es reemplazar la imagen con la imagen de nuestro producto. Bien, bien. Así que solo borra Hover Div Imagen seis e Imagen ocho Bien, así que a continuación, solo haz clic en el elemento y simplemente desplázate un poco hacia abajo. Vamos a hacer clic en Imagen, derecha, y asegurarnos de que pones la imagen encima del envoltorio de contenido. Bien, así que aquí mismo. Y solo haz doble clic en la imagen y solo haz clic en imagen, y voy a usar esta imagen del producto, ¿ verdad? Para su información. Generé esta imagen del producto usando IA. Bien, así que si quieres cambiar el tamaño de esta imagen, puedes ingresar el tamaño aquí. Bien, así que terminamos con esto. Ahora, vamos a reemplazar la imagen del segundo producto por nuestra propia imagen de producto, ¿verdad? Entonces vamos a hacer lo mismo. Así que simplemente haz clic en el segundo ítem, y vamos a eliminar el DIF hover Vamos a eliminar la imagen nueve y la imagen seis. Bien, así que solo hagan lo mismo, chicos. Simplemente haga clic en los elementos y simplemente desplázelos un poco, y vamos a hacer clic en la imagen, ¿verdad Y asegúrate de poner la imagen encima del grab de contenido. Así que solo arrastra esto a la cima. Bien, aquí vamos. Y simplemente haga doble clic en la imagen y simplemente haga clic en imagen. Y ahora voy a subir la imagen de mi producto. Entonces solo haz clic en esto y voy a subir estas imágenes, ¿verdad? Zapatillas muy bonitas. Bien, entonces ahora está subiendo la imagen de las zapatillas de deporte. Así que solo esperen chicos. Ojalá no tarde demasiado. Bien, aquí vamos. Ya casi terminaste. Bien, muy genial. También puedes cambiar el tamaño de la imagen si quieres, puedes ingresar el tamaño aquí. Depende totalmente de ustedes, chicos. Bien, entonces a continuación, voy a editar el contenido. Voy a modificar el nombre del producto. Entonces en este caso, no es Eric Jordan W. Así que solo voy a escribir, como, un nombre aleatorio, chicos. Zapatilla Lego, ¿verdad? Porque el patrón parece ego. Y el precio va a ser en dólar estadounidense. Entonces esta risita se va a vender a 120 dólares, ¿verdad? Bien, así que también voy a modificar esto. Entonces el nombre del producto es zapatilla rompecabezas, un nombre aleatorio, chicos. Y el precio también va a ser en dólar estadounidense. Entonces el precio de esta zapatilla puzzle es de $85.99. Bien, así que ahora voy a cambiar el color de estos fondos, así que solo desplázate un poco hacia abajo. Voy a hacer click en esto y voy a cambiarlo de azul oscuro a azul claro, ¿verdad? Aquí vamos. Bien, muy genial. Bien, entonces terminamos con este deporte. Lo que vamos a hacer es quitar las secciones pegajosas de pern y video porque no las necesitamos, ¿verdad Porque solo estamos construyendo como una landing page, y quiero que sea simple. Entonces solo voy a eliminar esto y también eliminar las secciones de video, ¿de acuerdo? Bien, así que no se olviden, chicos. Anteriormente, ocultamos el modelo T D, así que ahora lo vamos a volver a hacer visible. Así que simplemente haz clic en Spline scene. Y simplemente da clic en el icono de configuración y simplemente haga clic en Mostrar todos los ajustes. Como ustedes pueden ver ahora mismo, el modelo T D está oculto, así que ahora vamos a hacer click visible, ¿verdad? Vamos a hacerlo visible de nuevo. Bien, así que ya terminamos con ahora, basta con hacer clic en este botón de reproducción, así vamos a ver cómo se ve el sitio web. Así que solo haz clic en esto. Y vamos a desplazarnos hasta la cima. Bien, como ustedes pueden ver, este es el modelo TD. Se ha animado por completo. Y si te desplazas un poco, esta es nuestra imagen de producto y también las descripciones del producto. Las zapatillas Cf presentan una zapatilla deportiva y estilista que combina sin igual rendimiento y fasiens con su diseño elegante, paleta de colores vibrantes y tecnología avanzada de comodidad Estas zapatillas son tu compañera perfecta tanto para actividades activas como para salidas casuales de moda Y aquí abajo, tenemos las secciones sobre nosotros. Como ustedes pueden ver, este es el eslogan de mis marcas. CofiSnker se compromete a producir zapatillas de alta calidad y convertibles, muy chulas y aquí abajo Tenemos el catálogo de productos, así que estos son dos productos que estoy vendiendo zapatilla Logo y zapatilla puzzle. El precio es de $120.80 $5.99. Bien, chicos. Así que hemos comprado con éxito esta landing page usando Webflow. Muy genial, ¿verdad? Bien, entonces creo que eso es todo, chicos. Los veré en la próxima. 10. Integración y animación de un modelo 3D de pizza: Gas Santo, bienvenido de nuevo al curso. En este video, vamos a iniciar el tercer proyecto. Entonces en el tercer proyecto, vamos a construir un sitio web para un restaurante. Entonces vamos a hacer lo mismo, Gas. Vamos a conseguir el modelo TD de Spline. Entonces vamos a integrar el modelo TD a la página web, y vamos a animar el modelo TD Bien, así que ahora comencemos. Entonces, en este caso, la comida que voy a vender es pizza, ¿verdad? Así que solo consigue primero el modelo T D para pizza. Basta con hacer clic en Biblioteca y seleccionar Objetos, y voy a escribir pizza. Bien, aquí vamos. Como ustedes pueden ver, tenemos tres opciones. Entonces voy a seleccionar esta. Pizza Pizza, basta con hacer clic en ella, y serás redirigido a la página de edición de Spline Bien, entonces vamos a hacer algunas modificaciones, entonces vamos a exportar esto a través del modelo, ¿no? Vamos a conseguir el código de inserción. Bien, así que esperen, chicos, el proceso puede tardar un par de segundos. Bien, aquí vamos. Entonces esta es nuestra pizza. Entonces voy a bloquear todos estos. Y si estás en Windows, puedes presionar Control G. Pero si estás usando Macbook Clock me, puedes presionar Comando G, ¿verdad? Bien, entonces ahora hemos agrupado todos los componentes. Lo que vamos a hacer a continuación es modificar un poco el color, ¿de acuerdo? Entonces como ustedes pueden ver, como, el color principal es el amarillo. A lo mejor hay mucho queso. No estoy realmente aquí, chicos. Bien, así que si quieres modificar el color, es muy fácil. Simplemente haga clic en la pizza y simplemente haga clic en esta. Simplemente haga clic en el color y podrá modificar el color. Mira esto. Bien, entonces voy a hacer que esto sea como amarillo claro porque quiero que el queso se vea un poco derretido, ¿verdad? Parece como el queso Msarella, supongo. Bien, entonces lo que vamos a hacer a continuación es cambiar el color de fondo de gris oscuro a transparente, ¿verdad? Así que simplemente haz clic en el color Bkgroen y solo dirija esto a la izquierda Bien, así como ustedes pueden ver, ahora el fondo es transparente. Bien, entonces a continuación, simplemente haga clic en Exportar y simplemente haga clic en Configuración de reproducción, y vamos a ocultar el fondo. Así que solo haz clic en Ocultar y simplemente haz clic en Actualizar URL pública, ¿verdad? Bien, entonces ahora vamos a hacer clic en Descripción general y vamos a obtener el código embed. Bien, entonces aquí vamos. Entonces solo haz clic en FEWR porque vamos a usar este código para integrar el modelo tres D al sitio web de Webflow Así que solo haz clic en Copiar Embit. Bien, entonces ahora terminamos. Sólo tienes que abrir Google Docs. Simplemente pega el código aquí. Bien, entonces a continuación, vamos a encontrar las plantillas mojadas llenas. Bien, así como ustedes pueden ver, hay muchas plantillas gratuitas para un restaurante o cafetería. Entonces voy a escoger esta plantilla. Chicos, siéntanse libres de escoger cualquier plantilla que queráis. Solo ten en cuenta que hay algunas plantillas que son gratuitas. Hay otros que no son libres. Entonces, si no quieres gastar dinero, solo asegúrate de seleccionar la plantilla gratuita, ¿verdad? Bien, entonces vamos a usar esta plantilla. Si te desplazas hacia abajo y solo haces clic en copyright Info, como ustedes pueden leer aquí podemos usarlo libremente para trabajos personales o comerciales. Bien, así que solo haz clic Lo tengo. Bien, entonces ahora vamos a clonar esta plantilla. Así que solo haz clic en clonar en Webflow. Entonces seremos redirigidos a esta página. Y lo que vamos a hacer a continuación es hacer clic en Sitio RID, y tendremos que nombrar el sitio. Entonces en este caso, voy a llamarlo sitio web de Bits, ¿verdad? Porque esa es la comida que voy a vender. Bien, así que simplemente haga clic en RED Site. Después seremos redirigidos a la página de edición de Webflow. Bien, entonces lo que vamos a hacer a continuación chicos es integrar los tres modelos, ¿verdad? El proceso va a ser exactamente el mismo que hicimos anteriormente. Así que vamos a obtener este código de inserción. Así que sólo voy a copiar y pegar a estos chicos, ¿verdad? Esta es la única parte que necesitamos, así que solo copia esto. Bien, así que vayamos a la página de edición de Webflow, y vamos a crear una escena Spline, y vamos a crear una escena Spline, ¿verdad? Entonces aquí vamos. Bien, así que ahora solo haz clic en Agregar elemento y simplemente desplázate un poco hacia abajo. Y en las secciones de medios, basta con hacer clic en Escena Spline. Aquí vamos. Bien, así que ahora vamos a copiar y pegar el código embed, y simplemente haga clic en Recargar escena Spline Bien, así que terminamos. Como ustedes pueden ver, hemos integrado con éxito este modelo de tres D a la página web. Bien, entonces lo que vamos a hacer a continuación es dirigir esto a la cima, ¿verdad? Bien, aquí vamos. Muy cool. Bien, entonces el siguiente. Vamos a modificar este modelo de tres D, así que simplemente desplácese un poco hacia abajo. Bien, entonces en las secciones de posición, vamos a cambiarlo de estático a pegajoso, ¿verdad? Y solo haz clic en Auto. Voy a seleccionar 50 y 60. Bien, aquí vamos. Entonces ahora vamos a animar este modelo de tres D. Bien, así que simplemente haz clic en esta escena Spline y simplemente haz clic en Interacciones Y vamos a hacer click en esto y solo haz clic en Mouse Mover en Viewport, ¿verdad Y simplemente haz clic en Seleccionar acciones, haz clic en Reproducir animaciones de ratón. Bien, así que ahora solo haz clic en Agregar animaciones. Y necesitarás nombrar las animaciones en este caso. Sólo voy a llamarlo Pizza Animations, ¿verdad? Puedes ponerle el nombre que quieras . Depende totalmente de ti. Y solo pulsa Enter, y voy a hacer click en esto y voy a seleccionar Spline porque conseguimos este modelo Trini de Bien, entonces ahora solo desplácese hacia abajo. Bien, entonces tendremos que seleccionar el objeto que queremos animar. Entonces en este caso, queremos animar este modelo de árbol de pizza, ¿verdad? Así que solo haz clic en Slec y voy a seleccionar grupo, ¿verdad? Bien, entonces hay muchas opciones, chicos. Se puede rotar esta pizza en el eje x. Se puede girar sobre el eje y. También puede girarlo sobre el eje Z. Entonces depende totalmente de ustedes chicos. En este caso, voy a rotar esta pizza en el eje y, ¿verdad? Entonces va a ser así. Voy a dirigir esto a la derecha. Voy a configurarlo para que sea cinco, y vamos a dar click en la segunda capa. Vamos a hacer lo mismo chicos. Así que solo selecciona el objeto que queremos animar. Entonces en este caso, eso va a ser grupal. Y para las direcciones de las rotaciones, va a ser lo contrario, ¿verdad Entonces voy a dirigir esto a la izquierda. Y va a ser cinco negativos, ¿verdad? Bien, genial. Así que ahora solo haz clic. Vista previa en vivo. Entonces va a parecerse a estos chicos. Muy genial, ¿verdad? Así podrás darle la vuelta a la pizza. Muy cool. Mira esto. Bien, entonces voy a hacer clic en Guardar. Ahora vamos a probar estas animaciones, ¿no? Así que simplemente haz clic en los botones de visualización. Bien, como ustedes pueden ver, estas animaciones están funcionando. Muy cool. Bien, chicos, creo que ya está. Eso es todo lo que necesitas saber. Como gas en el siguiente video donde vamos a agregar contenido a este sitio web, y también vamos a subir nuestras propias imágenes a este sitio web, ¿verdad? Bien, entonces Asi gas ahí. Adiós. 11. Agregar contenido al sitio web del restaurante.: Chicos santos. Bienvenidos de nuevo al curso. En este video, vamos a agregar contenido a la página web de este restaurante, y también vamos a sustituir las imágenes por nuestras propias imágenes. Bien, ahora comencemos. Lo primero que vamos a hacer es cambiar el color de la Snap Bar. Así que basta con hacer clic en Nath Bar dos veces, y como ustedes pueden ver, el color es azul, así que vamos a cambiarlo a chicos amarillos Bien, así que solo haz clic en esto, y voy a cambiar el color a amarillo oscuro. Bien, entonces ahora vamos a editar el contenido de esta página web. Entonces para que sea más fácil, vamos a ocultar esto a través del modelo. Bien, así que simplemente haz clic en Escenas Spline y simplemente haz clic en los iconos de configuración y simplemente haz clic en Mostrar todos los ajustes Bien, así que por ahora lo vamos a esconder. Entonces solo haz clic en Hiddent y al final, vamos a hacerlo visible de nuevo, ¿verdad Bien, así que ahora comencemos, chicos. Bien, entonces voy a hacer doble clic en esta parte, y voy a reemplazar esto con eslogan de mi restaurante, ¿verdad? Entonces va a ser una pizza espacial. Para todos. Bien, ese va a ser mi eslogan, ¿verdad? Y voy a quitar esta imagen. Bien, así que voy a hacerlo como mayúsculas, chicos. Bien, entonces aquí vamos. Bien, entonces terminamos con estas secciones. Ahora pasemos a las siguientes secciones, chicos. Entonces ahora vamos a sustituir esta imagen por nuestra propia imagen, ¿verdad? Bien, entonces voy a eliminar este texto porque no creo que lo necesitemos . Así que sólo voy a quitar. I. Bien, entonces lo que vamos a hacer a continuación es sustituir esta imagen por nuestra propia imagen, ¿ verdad? Así que solo haz clic en esto. Y vamos a dar clic en Reemplazar imagen. Y ahora voy a subir mi propia imagen, ¿no? Así que simplemente haz clic en esto, y voy a abrir mi carpeta de proyectos. Así que solo haz clic en el sitio web de Pizza. Para tu información, generé estas imágenes usando chicos de IA. Así que solo haz clic en Abrir, ¿verdad? Entonces ahora está subiendo la imagen. Sólo esperen, chicos. El proceso puede tardar un par de segundos. Ojalá no tarde demasiado. Bien, aquí vamos. Bien, muy genial. Mira esto. Decirles pizza, chicos. Bien, entonces ahora pasemos a las siguientes secciones. Bien, entonces aquí mismo, voy a modificar un poco el texto. Voy a cambiarlo a DLC Spizzo para todos. Bien, así que vayamos a estas secciones. Y puedes sentirte libre de modificar este impuesto si quieres, pero en este caso, sólo voy a dejarlo como está. Bien, entonces ahora pasemos a las siguientes secciones. Bueno, en realidad no creo que necesitemos estas secciones, así que sólo voy a quitar estas secciones, chicos. Así que solo voy a hacer clic en Eliminar. Y pasemos a las siguientes secciones. Bien, entonces ahora vamos a subir las imágenes de Pizza, ¿no? Bien, entonces sólo voy a quitarle esta parte a Gus porque no creo que sea necesario. Lo mismo con esta parte. También voy a quitar esta placa. Bien, entonces ahora vamos a modificar un poco estas secciones. Bien, chicos, así que solo haz clic en esto. Simplemente haga clic en Petting Global y simplemente haga clic en el menú favorito aquí mismo Bien, y solo haz click sobre esta imagen, ¿verdad? Y simplemente haz clic en este icono de configuración. Y solo desmarque esta casilla, chicos. Bien, entonces ahora vamos a dar click a Jo's Image. Voy a subir mi propia imagen. Entonces el primer menú es una pizza con coberturas de espinacas. Bien, así que solo haz clic en Abrir. Entonces ahora está subiendo la imagen. Así que esperen, chicos. El proceso puede tardar un par de segundos. Ojalá no lleve demasiado tiempo, ¿verdad? Entonces vamos a exhibir como cuatro menús aquí. Bien, muy genial. Mira esto. Bien, entonces ahora vamos a hacerle lo mismo a la segunda. Así que solo desmarca esta casilla y simplemente haz clic en J Image, y voy a subir el segundo menú Entonces va a ser la pizza. Pizza con queso con aderezo de mariscos. Bien, así que solo haz clic en Abrir. Ahora estamos subiendo la imagen. Sólo esperen, chicos. Bien, entonces la segunda imagen se ha subido con éxito. Ahora vamos a hacer lo mismo a la tercera imagen. Así que simplemente haga clic en esto y simplemente haga clic en el icono de configuración, y simplemente desmarque esta casilla y simplemente haga clic en solo imagen Ahora vamos a subir la tercera imagen. Entonces el tercer menú son los chicos de la pizza, una pizza cursi con topping de tomates Así que solo haz clic volcar. Bien, entonces ahora estamos subiendo esta imagen Así que esperen, chicos. El proceso puede tardar un par de segundos. Ojalá no tarde demasiado. Bien, aquí vamos. La tercera imagen se ha subido con éxito, y por último, vamos a hacer lo mismo con la cuarta imagen. Así que simplemente haga clic en esta imagen, haga clic en este icono de configuración y simplemente desmarque esta casilla y simplemente haga clic en esta imagen, y vamos a subir la imagen Entonces el cuarto menú es la pizza de queso con topping de pepperoni Entonces se ve muy delicioso, ¿verdad? Así que solo haz clic en Abrir, chicos. Bien, entonces ahora estamos subiendo la imagen. Sólo esperen, chicos. El proceso puede tardar un par de segundos. Ojalá no tarde demasiado. Bien, aquí vamos. Como ustedes pueden ver, hemos subido con éxito estas imágenes. Bien, entonces a continuación, vamos a modificar estos libros de texto, ¿verdad Así que solo haz doble clic en él, y vamos a cambiar el nombre a pizza espina, ¿verdad Y también voy a modificar el precio, así que solo desmarca esta casilla Bien, entonces el precio va a ser de 15 dólares, ¿verdad? Y también puedes agregar, como, las descripciones para la pizza de espinacas. Así que solo desmarca esa casilla y simplemente haz doble clic en estos libros de texto Así que sólo voy a escribir, como, una cosa al azar, chicos. Esta pizza de espinacas está hecha de queso y espinatas Bien, entonces vamos a hacer lo mismo al segundo menú, ¿no Así que solo haz clic en esto. Simplemente haga clic en estos iconos de configuración, marque esta casilla y simplemente haga doble clic en el cuadro de texto Bien, así que como ustedes pueden ver, esta es una pizza de mariscos, así que solo escriba pizza de mariscos. Así. También voy a modificar el precio, así que desmarca esta casilla. Y el precio va a estar en los dólares estadounidenses. Entonces la pizza de mariscos cuesta $15 o tal vez $20, cierto, porque los mariscos un poco más caros, supongo. Bien, entonces ahora vamos a modificar la descripción de los alimentos. Así que simplemente haz doble clic en él y solo desmarca esta casilla, y editemos el texto Entonces solo voy a escribir, como, unos diez tipos al azar, la pizza de mariscos está hecha de queso, mantequilla y mariscos. Bien, entonces ahora vamos a modificar el tercer menú. Así que simplemente haz clic en los iconos de configuración, marca esta casilla. Haga doble clic en este cuadro de texto. Y como ustedes pueden ver, esta es la pizza de tomate. Bien, entonces ahora vamos a modificar el precio, clic en los iconos de configuración, desmarcar esta casilla Y el precio va a ser en dólares americanos. La pizza de tomates va a ser un poco más barata, así que la voy a vender a 8 dólares, ¿verdad Bien, entonces ahora vamos a modificar las descripciones de los alimentos. Así que solo desmarca esta casilla y haz doble clic en los libros de texto Así que sólo voy a escribir , como, un das al azar. Esta pizza está hecha de ajo y tomates. Bien, entonces ahora vamos a modificar el cuarto menú, hacer doble clic sobre él, desmarcar esta casilla, hacer doble clic en el cuadro de texto Como ustedes pueden ver esto es pizza de pepperoni. Voy a modificar un poco el precio. Así que solo desmarca estos libros. Y el precio va a ser en dólares americanos, y voy a vender esta pizza a 12 dólares, ¿verdad Y por último, voy a modificar las descripciones de los alimentos. Así que solo desmarca estos libros. Haga doble clic en estos libros de texto. Sólo voy a escribir algo al azar chicos. Entonces esta pizza está hecha de queso, mantequilla y pepperoni. Bien. Bien, entonces lo último que vamos a hacer es hacer visible el modelo TD. Si recuerdas anteriormente, ocultamos el modelo TD, ¿verdad? Así que hagamos clic en la escena Spline, y simplemente haga clic en los iconos de configuración y simplemente haga clic en Mostrar configuración, y vamos a cambiar la visibilidad de oculta a visible, ¿verdad Bien, así que ahora vamos a hacer clic en este botón de reproducción. Bien, entonces ahora vamos a desplazarnos hacia arriba. Bien, muy genial. Miren esto, chicos. Entonces las animaciones están funcionando. Ahora vamos a desplazarnos un poco hacia abajo. Una pizza especial para todos, ¿verdad? Entonces esta es una pizza muy deliciosa, chicos. Mira esto. Bien, entonces ahora vamos a desplazarnos hacia abajo. Bien, deliciosa pizza para todos. Y este es nuestro menú, chicos. Muy chulo. Mira esto. Entonces tenemos pizza de espinacas, pizza mariscos, pizza de tomates y pizza de pepperoni Muy chulo. Bien, así que terminamos. Los veré chicos en el siguiente video. Chico. Lo siento mucho, chicos. Hay una cosa que me olvido, chicos. Entonces, si los clientes quieren hacer un pedido, lo que vas a hacer es hacer clic en este botón, ¿verdad? Y sólo tienes que hacer clic en los iconos de configuración, y tienes varias opciones, ¿verdad? Puedes conectar este botón al Formulario de Google. También puedes ingresar tu dirección de correo electrónico. Entonces, si alguien quiere pedir tu pizza, él o ella te va a enviar un correo electrónico, o también puedes agregar tu número de teléfono aquí. Entonces, si alguien quiere pedir la pizza, él o ella puede comunicarse contigo a través de este número de teléfono. Bien, chicos, creo que ya está. Eso es todo lo que necesitas saber. Los veré chicos en el siguiente video. Adiós. 12. Creación de un formulario de reserva en línea para el sitio web de un restaurante: Hola, chicos. Bienvenidos de nuevo al curso. En este video, vamos a crear un formulario de reservación en línea para la página web de nuestro restaurante. Bien, así que ahora comencemos. En primer lugar, simplemente haga clic en Marketplace. Luego haga clic en Descripción general. Luego haz clic en Aplicaciones. Serás redirigido a esta página. Sólo tienes que desplazarte un poco hacia abajo. Luego haga clic en Servicio al Cliente y Participación Comunitaria. Luego haga clic en Formas y superficie. Bien, entonces vamos a utilizar Typeform. Así que simplemente haz clic en eso y haz clic en el sitio web de FE. Bien, así que no se preocupen chicos. Typeform es completamente libre Ts. Bien, así que solo haz clic en Comenzar. Entonces tienes que opcionesSCs puedes registrarte usando tu También puedes registrarte usando tu cuenta Microsoft. Entonces depende subtalmente de ti. En este caso, me voy a inscribir usando mi GMLCom, Así que solo haz clic en Regístrate con Google. Bien, aquí vamos. Como ustedes pueden ver, me redirigieron a mi tablero. Bien, así que voy a hacer clic en algunos planes. Como ustedes pueden ver, Type Form ofrece un plan gratuito. Obviamente, hay algunas limitaciones. Cuando se trata del plan gratuito, por ejemplo, solo puedes tener hasta diez respuestas, así que ese es tu límite máximo. Chicos, aseguraos de estar plenamente conscientes de estas limitaciones. Bien, entonces ahora, volvamos al tablero. Bien, así que ahora solo haz clic en Crear nuevo formulario. Tienes tres opciones. La primera opción es comenzar de cero. La segunda opción es importar preguntas. Por ejemplo, si ya tienes un formulario de Google, puedes usarlo, y la tercera opción es crear el formulario usando IA. Bien, entonces en este caso, voy a seleccionar las terceras opciones. Voy a crear el formulario usando IA. Y no se preocupen chicos, el proceso es muy sencillo. Entonces, en primer lugar, necesitarás escribir el baile describiendo qué tipo de forma quieres crear. Entonces en este caso, quiero crear un Formulario de conservaciones en línea para pizzería Bien. Entonces ahora, voy a continuar. Bien, entonces ahora necesitarás especificar preguntas o temas que necesites hacer en tu formulario. Bien, porque en este caso, estamos creando formulario de reservación en línea para una pizzería, así que obviamente tendremos que preguntar su nombre, su dirección de correo electrónico. Número de teléfono, porque necesitamos contactarlos. ¿Qué más? Tipo de pizza. Porque queremos saber qué tipo de pizza quieres pedir. Por último, también queremos saber cuándo llegarán, ¿no? Bien, así que ahora voy a dar clic en Generar cuatro. Bien, así que solo haz clic en eso. El proceso puede tardar un par de segundos, chicos. Ojalá no tarde demasiado. Así que solo espera. Bien, entonces ahora Typeform está generando el formulario para nosotros. Bien, entonces esta es la forma, chicos. Esto es como la primera página. ¿Cuál es tu nombre? Esta es la segunda página. ¿Cuál es tu dirección de correo electrónico? Esta es la tercera página. ¿Cuál es tu número de teléfono? Y esta es la tercera página. Qué tipo de pizza te gustaría reservar, y esta es la quinta página. ¿Cuándo llegarás al restaurante? Bien, entonces ahora vamos a hacer algunas modificaciones a esta forma. Así que solo haz clic en esto. Como ustedes pueden ver ahora mismo, esto sigue siendo opcional, y quiero que sea requerido Entonces solo activa esto. Bien, entonces vamos a hacer lo mismo por el correo electrónico. Así que hazlo requerido. Y también vamos a hacer lo mismo por el número de teléfono. También lo hacen requerido. Y para el tipo de pizza, voy a cambiar el tipo de datos de desplegable a opción múltiple. Bien, entonces vamos a tener como cuatro opciones, ¿verdad? Si recuerdas, tenemos como cuatro menús, ¿verdad? Entonces el primero es SinuchPizza. Así que solo escriban pizza de espina, chicos. La segunda opción es la pizza de mariscos. Así que solo escribe pizza de mariscos. La tercera opción es la pizza de tomate, así que solo escribe pizza de tomate. Y la tercera opción es la pizza de pepperoni, ¿verdad? Así que solo toca la pizza de pepperoni. Aquí vamos. Bien, así que si quieres agregar más opciones, simplemente haz clic en agregar Choice. Bien, así que ahora solo hacemos clic en esto. Y por último, voy a cambiar el tipo de datos de calentamente a la fecha. Así que solo haz clic en fecha. Entonces en este caso, el cliente va a ingresar la fecha en que llegará al restaurante, ¿verdad? Bien, entonces creo que ya terminamos. Ahora solo haz clic en Publicar. Bien, como ustedes pueden ver, hemos publicado con éxito este formulario, ¿verdad? Así que ahora solo hace clic aquí. Tienen dos opciones, chicos. Entonces la primera opción es integrar el código a tu sitio web Webflow Así que simplemente haz clic en incrustar en una página web y simplemente haz clic en Iniciar incrustación. Y en este caso, estamos construyendo el sitio web usando Webflow, por lo que solo tienes que hacer clic en Webflow Entonces puedes copiar este código y luego simplemente pegarlo en las secciones del código incrustar, ¿verdad? Así que solo haz clic en esto y simplemente desplázate un poco hacia abajo Y simplemente haz clic en Incrustar código. Sin embargo, este filtro no está disponible para los usuarios del plan gratuito. Entonces, desafortunadamente, si estás en el plan gratuito chicos, no puedes usar este filtro, ¿verdad? Pero no se preocupen, chicos. Hay otra alternativa, ¿verdad? Entonces esas son las primeras opciones. Necesitarás tener un plan básico, ¿verdad? Y te va a costar como 14 dólares mensuales. No obstante, si estás en el plan gratuito, no te preocupes. Hay otras opciones. Bien, así que sólo tienes que hacer clic en Compartir el enlace y simplemente copiar este enlace, chicos. ¿Todo bien? Sólo tienes que copiar este enlace. Y volvamos a la página de edición de Webflow. Y solo desplázate hacia abajo. Y solo haz click en este botón, chicos, ¿verdad? Simplemente haga clic en este botón y simplemente haga clic en estos iconos de configuración. Y lo que hay que hacer es copiar y pegar el enlace aquí. Bien, entonces si el cliente hace clic en este botón, va a ser redirigido al formulario, ¿verdad Entonces vamos a probar esto. Voy a publicar este sitio web, así que simplemente haz clic en Publicar en Dominio Seleccionado. Bien, entonces podría tomar un par de segundos publicar este sitio web, chicos. Así que solo espera. Bien, como ustedes pueden ver, este sitio web ha sido publicado. Así que ahora solo haz clic en esto. Bien, entonces este es el sitio web, chicos. Bien, entonces este es el modelo T D. Y como ustedes pueden ver, la animación sigue funcionando. Bien, muy genial. Entonces ahora si haces clic en este botón, haz un pedido. Entonces simplemente haga clic en esto, luego será redirigido al formulario de reservación en línea Bien, entonces, ¿cuál es tu nombre? Voy a escribir mi nombre, Chris. ¿Cuál es tu dirección de correo electrónico? Entonces solo voy a escribir mi dirección de correo electrónico. Aquí vamos. ¿Cuál es tu número de teléfono? Sólo un número de teléfono al azar, chicos. Bien, entonces, ¿qué tipo de pizza, qué te gustaría reservar? Bien, entonces quiero comer comida sana, así que voy a seleccionar una pizza de espinacas. Bien, entonces cuando llegues al restaurante. Bien, entonces este mes 25 o tal vez 27, 2024 este año. Bien, así que solo haz clic en Enviar. Bien, a medida que ustedes se lean, gracias por completar este Typeform Y recibí las notificaciones de mis chicos de correo electrónico. Muy genial, ¿verdad? Bien, así es como se crea un formulario de reservación en línea, chicos. Bien, así que ahora, volvamos al panel de control Type Form y simplemente haga clic en Resultado. Como ustedes pueden ver, aquí tenemos una respuesta. Esto es para mí, ¿verdad? Bien, chicos, creo que ya está. Eso es todo lo que necesitas saber. Los veré chicos en el siguiente video donde vamos a optimizar el SEO. Así que los veré ahí, chicos. Adiós. 13. Cómo realizar una auditoría SEO con SEOptimer y Semrush: Gas santo, bienvenidos de nuevo al curso. En este video, vamos a estar realizando una auditoría SEO en nuestra página web. Entonces las herramientas que vamos a utilizar son optimizadores de SEO y SNBRS Quizás te estés preguntando ¿cuál es el objetivo de realizar una auditoría SEO? Bueno, el objetivo es evaluar el rendimiento del sitio web y también identificar áreas mejora en la optimización de motores de búsqueda Este proceso ayuda a las empresas a mejorar la visibilidad, experiencia del usuario y la presencia general en línea. Bien, no, comencemos, chicos. Y no te preocupes. El proceso es muy sencillo. Todo lo que necesitas hacer es publicar tu sitio web de Webflow. Así que solo haz clic en Publicar. En este caso, ya publiqué este sitio web, copie y pegue la URL, copie y pegue el enlace a este sitio web, y solo póngalo aquí, ¿verdad? Y simplemente haz click hacia fuera. Bien, chicos, el proceso puede tardar un par de segundos. Ojalá, no tarde demasiado. Voy a saltarme esta parte, y voy a regresar una vez que termine el proceso. Muy bien, chicos. Entonces aquí está el resultado. El puntaje general es C. Y aquí abajo, tenemos el desglose. Entonces, para el SEO no pagado, el puntaje es C menos para el enlace La puntuación es A plus por la usabilidad. El puntaje es C para la actuación, el puntaje es A más, y para lo social, el puntaje es F. Quizás se esté preguntando por qué? Bueno, porque no hemos agregado contexto de redes sociales al sitio web, chicos. Esa es la razón por la que obtuvimos F. Bien, entonces hay 23 recomendaciones para mejorar el SEO, así que solo haz clic en esto. Como ustedes pueden ver aquí, tenemos muchas recomendaciones. Entonces el primero es incluir un texto de descripción del método. Esto es de alta prioridad. Y el segundo es implementar un archivo robot TXT. Esto es prioridad media en tecnología canónica. También prioridad media. ¿Qué más? Eliminar duplicado H un texto, prioridad media. Y también tenemos otras recomendaciones, por ejemplo, como, agregar todos los atributos a todas las imágenes, pero esto es de baja prioridad, ¿verdad? Crea y vincula tu página de Facebook, crea y vincula tu perfil de Twitter. Y estos dos también son de bajas prioridades, chicos. Bien, entonces ahora usemos SMRs para hacer auditoría SEO. Bien, así que solo ve a este sitio web , sembrs.com slash Auditoría del sitio, y vamos a hacer lo mismo, chicos Así que solo copia y pega la URL en tu sitio web, ¿verdad? Y solo pon el enlace aquí y simplemente haz clic en Iniciar auditoría. Y no te preocupes es completamente gratis. Bien, así que ahora solo haz clic en Iniciar auditoría del sitio. Bien, entonces el proceso podría tardar un par de minutos, chicos. Ojalá no tarde demasiado, así que solo espera. Bien, chicos, así que aquí está el resultado. El sitio de salud es del 89%, lo cual es bastante bueno, en mi opinión. No hay errores, 24 advertencias, 100% de cabilidad. Para los anuncios DTPS, es del 99%. Bien, entonces para el rendimiento lateral, es del 98%, lo cual es muy bueno. Para la vinculación interna, es del 100%. Para los markups, aún no se ha implementado. Y lo mismo para los violines core web. Tampoco se ha implementado todavía, chicos. Bien, ¿así que ese es el resultado? Creo que eso es todo, chicos. Eso es todo lo que necesitas saber. Los veré chicos en el siguiente video. 14. Crea un sitio web de perfil de empresa con el desarrollador de sitios con IA de Webflow: Chicos santos. Bienvenidos de nuevo al curso. En este video, vamos a construir un sitio web de perfil de compañía usando AI Site Builder. Este es uno de los alimentadores más nuevos de Webflow. Bien, comencemos. En primer lugar, tendrás que iniciar sesión, y vamos a escribir el baile de graduación. Construir un sitio web de perfil de empresa para el servicio de gestión de Wat. Esta empresa ofrece tres servicios principales. El primero es Way Set up tres veces a la semana. La segunda superficie es reciclaje de residuos, la eliminación de desechos médicos. Haga que el diseño de la interfaz de usuario sea moderno, estilista y profesional Bien, entonces ese es mi baile de graduación, un baile muy sencillo. Y hagamos clic en Generar Bien, ahora la IA va a generar el sitio web. Y aquí está la estructura de su sitio web. Y hagamos clic en Generar sitio. Bien, ahora la IA está construyendo el sitio web. Tomará unos minutos, tal vez dos o 3 minutos. Así que esperen, chicos. Ojalá no tarde demasiado , y estoy súper emocionada de ver el resultado. Bueno, no tardó mucho, chicos. Sólo tardó un minuto o incluso menos de un minuto. Bien, así que aquí está el sitio web. Bien, miren esto, chicos. Entonces aquí está la página de edición. Se puede editar el sitio web. Se puede editar el texto. Se puede cambiar la imagen. Se puede cambiar el color Bground. Puedes hacer lo que quieras. Depende totalmente de ti. Y también se pueden cambiar los equipos, ¿no? Puedes personalizarlo como quieras. Bien, ahora vamos a desplazarnos un poco hacia abajo. Así que aquí está el sitio web, gestión de residuos, garantía de cumplimiento, reciclaje profesional de recolección de residuos y eliminación médica para empresas, soluciones confiables, conformes y eco focus adaptadas a sus operaciones Bien, muy genial. Entonces tenemos dos botones aquí, solicitar cotización y pocos servicios. Me gusta mucho este estilo. Mira esto. Simplificar la gestión moderna de residuos. Por lo que destaca todos los servicios esta empresa tiene para ofrecer. Por ejemplo, recolección programada de residuos, servicios avanzados de reciclaje, manejo de residuos médicos. Bien, muy genial. Y también muestra algunas estadísticas aquí, lo cual es muy importante. Vamos a desplazarnos hacia abajo. Y en la parte inferior, también tenemos la Q y ocho secciones. Bien, muy guay, chicos. Creo que ya está. Eso es todo lo que necesitas saber. Los veré chicos en el siguiente video. Chico. 15. Conclusión y resumen: Holi chicos, bienvenidos de nuevo al curso. En este video, voy a resumir todas las cosas que hemos aprendido en este curso, y también voy a ver nuestros V tips y trucos sobre cómo mejorar la calidad de tu sitio web Bien, comencemos con el primer tema, SEO o optimización de motores de búsqueda Por lo que es necesario implementar prácticas amigables con SEO, incluyendo el uso adecuado de metatextos, URLs descriptivas y DTML semántico Esto ayuda a los motores de búsqueda a comprender e indexar el contenido de manera efectiva. Entonces, si quieres aumentar el tráfico a tu sitio web, deberás asegurarte que tu sitio web sea fácil de descubrir. Una de las formas más efectivas es optimizar la palabra clave. Usa la palabra clave correcta. Por ejemplo, puedes usar herramientas como eTRF y simplemente escribir la palabra clave Por ejemplo, gestión de residuos, y simplemente haga clic en Buscar palabras clave. Y adSRF va a mostrar todas las palabras clave optimizadas para ti Bien, aquí está la lista de palabras clave, y puedes ver la dificultad de palabra clave. Por lo que te da indicaciones sobre lo difícil que es posicionarse entre los diez primeros resultados de búsqueda orgánicos. Y también se puede ver el volumen. Entonces esto es como el volumen de búsqueda. Entonces, si usas la palabra clave correcta, tendrás mayor probabilidad posicionarte en la Búsqueda de Google. Bien, ahora volvamos al mapa mental, y hablemos del segundo tema Tres integraciones del modelo D. Debe asegurarse de que los tres modelos D respondan y se adapten bien a diferentes tamaños de pantalla. Pruebe el modelo en varios dispositivos para garantizar una presentación consistente y visualmente atractiva. Para las técnicas de incrustación, tienes dos opciones. Puedes usar código personalizado de Webflow o puedes integrarte con visores de terceros, especialmente si agregas animaciones a tu modelo de tres D así, debes asegurarte de que la animación esté funcionando completamente Y si estás usando Spline para obtener tu modelo de tres D, es muy importante que compruebes el formato de archivo porque no todos los formatos de archivo son compatibles con Webflow Bien, ahora pasemos al tercer tema. Tipografía, mejores prácticas. Bien, debes prestar mucha atención a las opciones de tipografía, incluido el estilo divertido, los tamaños y el espaciado texto consistente y legible mejora la legibilidad y contribuye a un diseño cohesivo Además, también es necesario asegurar el contraste de color. Por ejemplo, si el fondo es negro, no use color oscuro para el texto. No uses marrón ni gris porque va a ser difícil para la gente leer tu texto. Asegúrate de usar colores claros como el blanco o el amarillo o el naranja. Y también hay que evitar la sobrecarga decorativa. No agregue demasiadas cosas a su sitio web porque potencialmente puede confundir a la gente. Bien, entonces este es el final del curso. Muchas gracias, y les deseo todo lo mejor. Adiós.