Framer: aprende a crear sitios web hermosos en minutos usando IA

1. Introducción: Bienvenido a un extraordinario viaje hacia el futuro del diseño. Bienvenido a Framer hoy mismo. Estoy aquí para desvelar la innovación que distingue a Framer del resto Y todo se reduce a una característica de cambio de juego, el poder de IA Hola, soy Ellis y llevo más de dos años trabajando en diseño web y soy licenciada en medios digitales He usado muchas plataformas diferentes, desde despertas y espacio cuadrado hasta webflow Y Framer realmente se destaca, una plataforma que entiende tu visión con un simple utilete minutos tienes un sitio web totalmente funcional y personalizado al alcance de tu mano. Esa es la magia de la IA de framer. Pero no paremos. Permítame llevarlo a un viaje rápido a través de lo que está a punto de aprender al crear sitios web personalizados, aprovechando sin esfuerzo el poder de la IA para la administración de contenido para dominar administración de contenido Esta es tu hoja de ruta para convertirte en un gurú del diseño, cubriremos todo, desde crear bloques con la ayuda de chat GPT, hasta personalizar sin problemas los elementos de tus sitios web Para un toque verdaderamente único, te sumergirás profundamente en el meollo codicioso del diseño mejorando la navegación, perfeccionando secciones e incluso dominando la integración de medios e Entonces, ¿estás listo para aprovechar el poder del framer y subirte a la ola de innovación de diseño impulsada por IA Este viaje está a punto de remodelar la forma en que creas sitios web para siempre Es hora de desbloquear tu creatividad. 2. Historia del diseño de UX de interfaz de usuario: Entonces, en este video, vamos a hacer un viaje por el carril de la memoria, donde vamos a sumergirnos en la genial historia de cómo el diseño de UI UX ha evolucionado con el tiempo. Es un viaje desde los primeros blips de la tecnología hasta las interfaces elegantes y fáciles de usar que disfrutamos hoy Esta es la historia de la interfaz de usuario y el diseño de la experiencia del usuario. Bien, comencemos las cosas. En la década de 1960, en ese entonces, gente como Douglas Engelbart sentaba las bases para lo que se convertiría en Era la era de las máquinas torpes y de los gráficos básicos. Muy lejos de lo que estamos acostumbrados ahora. Avance rápido a los 80 eran manzanas haciendo residuos con el Macintosh Esto es cuando esos íconos en los que se puede hacer clic y Windows comenzaron a convertirse en una cosa De repente, la computación se volvió mucho más visual a medida que rodamos hacia los 2000 teléfonos móviles toman el centro del escenario. Recuerden esos buenos teléfonos Nokia al, Eran los pioneros de la interfaz de usuario móvil Los tiempos de enviar mensajes de texto al estilo Nine. Un poco peculiar pero oh tan nostálgico. Pero espera, es 2007 y Apple deja caer las pantallas táctiles de la bomba del iPhone y pellizcar para hacer zoom se vuelven de moda Es como si hubiéramos saltado al futuro, ¿verdad? Los dispositivos móviles empiezan a cambiar todo el juego de la interfaz de usuario. ¿Y adivina qué? Aquí estamos hoy con redes sociales de Abscalore y gadgets que nos hablan Los diseñadores de UX están trabajando duro para que nuestra vida digital sea fluida y agradable. Se trata de conseguir que esa aplicación se sienta bien cuando tocas la pantalla. De cara al futuro, tenemos algunas cosas salvajes que vienen en nuestro camino. La realidad aumentada y la realidad virtual se asoman pronto a la vuelta de la esquina No se trata solo de tocar y deslizar. Podrías estar saludando tus gadgets para que las cosas sucedan A través de todo esto, son los diseñadores quienes han sido los verdaderos MVP, han estado elaborando, cómo interactuamos con la tecnología, cómo interactuamos con la tecnología, asegurándose de que no solo sea funcional sino que también se vea bien Entonces ahí lo tienes. La historia de la interfaz de usuario y el diseño de la experiencia del usuario. Espero que te diviertas paseando por la línea de tiempo tecnológica conmigo y te veré en el siguiente video 3. ¿Por qué Framer?: Este video, nos sumergimos profundamente en el mundo de la creación de sitios web. Exploraremos opciones populares como Quick Square, Space, Webflow y un recién llegado con un marco de giro AI Al final de este video, tendrás una idea más clara de lo que ofrece cada plataforma y por qué Framer podría sobresalir. Así que vamos a saltar de inmediato. Cuando se trata de crear sitios web, tienes muchas opciones, Wick y el espacio cuadrado son opciones fáciles de usar, perfectas para aquellos sin amplias habilidades de codificación Ofrecen interfaces Dragon Drop, plantillas prediseñadas y herramientas fáciles de usar para que tu sitio funcione rápidamente Luego está Webflow, una poderosa herramienta para aquellos que quieren más control Con Webflow, estás trabajando en una interfaz visual mientras tienes acceso a la personalización a nivel de código Es como un puente entre el diseño y el desarrollo, ofreciendo flexibilidad y libertad creativa. Aquí es donde las cosas se ponen interesantes. Framer, tradicionalmente conocido por su destreza de prototipado, ha Imagínese escribir un simple prompt y listo, y la IA genera un sitio web completamente editable para usted Es un concepto que está cambiando el juego. ¿Por qué podrías elegir Framer sobre los demás? Bueno, imagina las posibilidades con la IA de framer, no solo estás eligiendo plantillas Estás generando diseños personalizados basados en tus ideas. No te quedas atascado con los estilos preestablecidos. Tienes un punto de partida que es únicamente tuyo. Mientras que Wicks, Square space y Webflow tienen sus puntos fuertes, enfoque impulsado por IA de Framer proporciona una Puede comenzar con diseños generados por IA y luego afinarlos a la perfección. Es como tener un asistente de diseño personal siempre listo para experimentar e iterar. Pero hay más framer no solo se detiene en el diseño. Se cierra la brecha entre el diseño y el desarrollo con la capacidad de publicar sitios web reales. Es como tener una tienda integral tanto para crear como para lanzar. La conveniencia es innegable al final. La plataforma que elijas depende de tus necesidades. Si buscas configuraciones rápidas y simplicidad, mechas y el espacio cuadrado podrían ser tus amigos Webflow es la ruta para aquellos que buscan control avanzado y framer Bueno, es la elección vanguardista para aquellos que quieren magia de sitio web editable y impulsada por IA Entonces, al embarcarse en su viaje de creación de sitios web, considere lo que se adapta a su estilo y objetivos. Gracias por acompañarme en esta exploración de creadores de sitios web y lo veré en el siguiente video. 4. Precios de framers: Entonces, ¿cuánto cuesta realmente comenzar a usar Framer? Bueno, tengo buenas noticias. Puedes publicar tu propio sitio web de forma totalmente gratuita. Entonces el siguiente plan es de sólo 5 dólares al mes. Agrega un home y 44 plantillas de página y un dominio personalizado. A continuación tenemos el plan básico, cual se recomienda para sitios personales. Puedes crear una cantidad ilimitada de páginas. También puedes proteger tu sitio web con contraseña y tienes un límite de visitantes más alto por $30 al mes. Obtienes el plan pro. Se recomienda para sitios más grandes y ofrece análisis detallados del sitio web y ofrece diez colecciones de sistemas de gestión de contenido. También tienes un límite de búsqueda de 300 páginas y un límite de visitantes muy alto. Si bajas abajo, en realidad tenemos los precios del equipo por $20 Puedes tener hasta cinco editores en tu sitio web y tienes un historial de versiones de siete días. También puedes vivir colaborar con todos los tu equipo al mismo tiempo por $40 al mes. Obtienes todo lo que está incluido en el plan básico del equipo por $20 y puedes administrar los permisos del proyecto. Y también puedes tener diez editores y tienes un almacenamiento de archivos mucho, mucho más grande. También hay un historial de versiones de 30 días, lo que es realmente útil para un proyecto grande. Si realmente quieres dar un paso atrás, aquí tienes un pequeño consejo. Todos estos precios son en realidad los precios que obtienes por mes si pagas todos a granel durante un año. Entonces, si quieres cambiar y ver los precios, los precios mensuales sin ningún compromiso, si quieres cancelar después de un mes, aquí están los precios que realmente pagas. Entonces son un poco más caros. Para el Team Basic es como 5 dólares más caro. Y para el Team Pro son $50 Así que cuesta $10 más caro. Y aquí también, puedes volver a encenderlo y apagarlo, y puedes ver que el Mini cuesta solo $5 El básico es como cinco también, y el pro es diez. Y el gratis se queda gratis, por suerte. Y aquí también hay otro consejo que realmente recomiendo echarle un vistazo. Entonces en realidad, si te desplazas hacia abajo, puedes tener la descripción de cada plan en la descripción detallada de lo que todo ofrece de una manera realmente, realmente fácil de usar, puedes ver una representación visual de qué tipo de servicios se ofrecen en cada paquete. Entonces, en realidad, aquí está lo que quieres tener en cuenta. Por ejemplo, en el plan básico dice una colección del sistema de gestión de contenidos, ¿verdad? Entonces, si solo estás en esta página mirando esto y aún no te has desplazado hacia abajo, pensarías, oh, no otros planes como lo contienen ya, gusta, entonces ¿necesito comprar el Básico ¿Y haces clic en y obtienes el plan? Pero en realidad, si tu prioridad es tener una colección CMS, puedes desplazarte hacia abajo y ver que en realidad la libre y la mini ya contienen esa colección CMS. Y puedes pagar mucho menos, o incluso no necesitas pagar nada para tener esa colección. Entonces esto es una especie de, ya sabes, engañoso, un poco, poca desinformación en mi opinión Y luego se puede ver una descripción detallada de los elementos CMS, y se puede ver la descripción detallada de todos los servicios que se ofrecen para los negocios. Honestamente, en realidad no creo que necesitaras esto, pero ya sabes, nunca se sabe. Y siempre es bueno conocer tus opciones. Entonces sí, ten cuidado con esto seguro. Y si te desplazas un poco más hacia abajo, hay una sección de preguntas frecuentes para todo lo relacionado con las finanzas y los precios. Y estos podrían responder a algunas de tus preguntas, así que definitivamente échale un vistazo también antes de tomar decisiones importantes sobre el plan. Entonces sí, el gratuito es genial para probar el servicio para ver lo que tiene para ofrecer. Y entonces si realmente quieres publicar tu propio sitio web o tu sitio web para un negocio, puedes ir por el mini, en mi opinión, solo para tener ese dominio personalizado. Pero claro, explora tus opciones y explora tus necesidades como escribir las características que deseas, como cuáles son tus necesidades, y luego compararlas en esta tabla detallada. Y solo concuerda con eso y elige la opción más barata. Siento que esa sería la forma más conveniente de ahorrar dinero también. Entonces sí, gracias por ver este video y los veré en el siguiente. 5. Puesta en marcha: Para comenzar a crear tu propio sitio web en Framer, primero necesitas saber dónde encontrar cosas en Framer y familiarizarte con Empecemos por el propio sitio web y lo que tiene para ofrecer aquí en la página principal. De hecho, puedes comenzar de inmediato con el prompt, pero luego vas a tener que entrar en detalles y conocer realmente la interfaz para personalizar el prompt de IA y lo que ha producido. Veamos qué hay a continuación aquí. Aquí hay alguna promoción, pero en realidad no es en lo que quería enfocarme. Aquí tenemos el mensaje de IA nuevamente, pero si realmente te desplazas hacia abajo, también puedes explorar las plantillas con las que puedes comenzar. Veamos los nuevos y los gratuitos aquí. Puedes tener muchas plantillas que fueron creadas usando Framer. Algunos de ellos podrían haber sido asistidos con IA, algunos de ellos son completamente producidos por diseñadores. Tienes las pagas y además tienes muchas opciones gratuitas. Aquí en la pestaña gratis, solo tienes las tres opciones para explorar. Ahora que eso está fuera del camino, también quería mostrarte las plantillas de sitios web de IA, y aquí podemos ver algunos de los ejemplos. También hay selecciones de personal y recomendaciones solo de diseñadores. De todos modos, por sus recursos. Aparte de este curso, claro, hay muchos recursos para que aprendas. Si tienes alguna duda, quieres entrar en detalles sobre algún tema que te interese para realmente comenzar y conocer la interfaz que queremos iniciar sesión. Una vez que estás dentro de tu cuenta, estás creado con el tablero en el centro. Tienes que empezar botones y puedes comenzar con un I, empezar a crear tu propio sitio web en un instante. También puedes pegar tu diseño desde Figma, o puedes ver tutoriales distintos a este tutorial por supuesto, y aprender Framer con Framer Debajo de eso, tienes tu propio proyecto reciente. Ya tengo una pareja que es un lienzo en blanco y algo que acabo de probar. También se puede ver la última vez que se vio, la última vez que se editó. También puedes enumerarlo, o tengo los íconos y tengo la vista previa. También tienes la barra de búsqueda para buscar tu propio proyecto. Puedes ordenarlo por última vez visto por mí, último editado y alfabéticamente para crear tu propio proyecto. También puedes hacer eso. Aquí en la parte izquierda, tenemos nuestra cuenta personal y nuestro receso personal y archivado. Si haces clic aquí, tienes la configuración de la cuenta, el modo noche y día entre los que puedes alternar. Tienes la aplicación de escritorio que puedes descargar. También puedes iniciar la app para importar desde Figma y esbozar tus propios prototipos También puedes ocultar esta sección de inicio haciendo clic aquí mismo. También puedes ir a la página de inicio y solicitar apoyo a la comunidad, y aquí también es donde te registras. Si vas al archivo, puedes ver tus proyectos de archivo que ya no están en uso. Aquí. También tienes la pestaña Mi Equipo. Si haces clic en los tres puntos, tienes la configuración del Equipo. Puedes invitar a miembros, copiar, invitar, vincular y crear una nueva carpeta para mantenerte organizado. Si vas a todos, en realidad tenemos el mismo tablero porque aquí estoy solo. Desafortunadamente, no estoy trabajando con nadie más. Podemos ir a plantillas, puedes ver tus plantillas aquí, o puedes crear tus propias plantillas que puedas compartir con los miembros de tu equipo. Si entramos en archivado, tenemos el proyecto de archivo del equipo. Vamos a los descansos, y vamos a un lienzo vacío aquí, eliminemos esto. De hecho tenemos bastante que explorar. Vamos uno por uno. En la parte superior izquierda, tenemos el logo del framer y tenemos la opción de ir al tablero Tenemos las acciones rápidas. También tenemos un montón de opciones diferentes. Donde se puede crear un nuevo archivo y todas las opciones con el archivo. También puedes editar, como copiar, pegar, Seleccionar. Todos estos tienen sus propios atajos que son atajos de teclado convencionales. En cualquier laptop, no voy a entrar en detalles. Entonces tienes la vista. Podemos cambiar los modos aquí. De nuevo, podemos acercar, alejar, También puedes hacer esto con tu alfombrilla de ratón, tu mouse, lo que quieras. Puedes estilizar tu texto aquí, lo que también es posible en el lado derecho Más conveniente, te lo mostraré más adelante. Entonces tenemos a los grupos. Grupos. Podemos voltear cosas, podemos crear componentes y podemos crear componentes a partir del código. Podemos previsualizar, también podemos crear componentes de código. Aquí tenemos algunas preferencias para la configuración del sitio. Tenemos configuraciones de sitio más avanzadas como dominios personalizados, redirecciones y análisis, y sus planes y la versión del historial de su sitio web para cualquier pregunta que pueda dirigir a la ayuda También puedes volver a tu cuenta. Ahora que exploramos eso en la parte superior, tenemos el nombre del proyecto y el plan en el que está el sitio web. A la derecha tenemos el logo de la cuenta. Tenemos la configuración del sitio. También tenemos el botón de vista previa en vivo, que te muestra la versión del sitio web cuando se publica. También puedes invitar a colaboradores aquí. Puedes publicar y hacer que tu sitio web entre en vivo aquí. Si vamos a la izquierda, tienes tus páginas, tus capas y tus activos, que básicamente se parece más o menos a un árbol de ancho a más estrecho. Primero, tienes tus páginas. Ahora solo tenemos una página, nuestra página de inicio, También tendrías tu CMS está aquí, y puedes crear un lienzo cuando quieras crear un prototipo. Eliminemos eso. Cuando realmente estés creando tu sitio web, estarás trabajando con capas aquí. En realidad tenemos un par de textos que no necesitamos. Se puede ver que se puede comenzar con la IA. Y vamos a crear un montón de capas diferentes a las que entraremos en los videos posteriores. Aquí, todos tus activos como imágenes y código y diferentes estilizaciones entrarán En la parte superior, puedes insertar tus elementos. Puedes comenzar con IA, puedes insertar secciones, encabezados. Usted crea su CMS aquí e importa todos sus elementos, como formularios de medios, iconos aquí. A continuación tenemos el layout. Se puede personalizar el diseño de la página web. También puede crear texto que cambie el coursor. Puedes escribir lo que quieras. En realidad, a la izquierda que aparece la ventana que podemos ver aquí. Estas son todas las opciones de alineación aquí. También puedes enlazar a algo. También puedes personalizar la posición del texto así. O también puedes hacer clic y arrastrarlo aquí, y cambiaremos automáticamente los números aquí. También tienes el tipo de posicionamiento que es avanzado y depende básicamente de cómo se esté posicionando el texto de acuerdo con las cosas en el sitio web. También tenemos el tamaño del texto. Podemos agregar efectos en hover, en prensa. Se puede tener un bucle. Puede tener diferentes estilos, podemos ocultarlo, cambiar la capacidad. A continuación tenemos el color de la fuente la fuente real. Puedes cambiarlo a cualquier cosa. También puede cambiar el tamaño de la fuente, la alineación de la fuente y algunas opciones de accesibilidad. Aquí en la parte inferior, tienes tus opciones de cursor. Este solo está arrastrando por el lienzo. Este es solo tu cursor normal para seleccionar y arrastrar cosas. Esto es para comentar. Aquí también puedes cambiar el modo. En la parte superior, después del texto viene CMS, por ejemplo. Puedes agregar tu propio blog, o puedes importar tu propio CSV para importar tu propia colección CMS. También puedes tener tus propias acciones aquí, que son solo atajos a algunas acciones en el sitio web. Por ejemplo, crear con IA o iniciar una página web, crear un componente, etcétera Esta fue una introducción a tu interfaz solo para familiarizarte con tu espacio de trabajo Y te voy a ver en el siguiente video. 6. Práctica: crea una cuenta: Entonces tu primera asignación de framer es solo crear una cuenta y llegar al punto en el que puedas crear tu sitio web Entonces en la página principal, haces clic en Inscribirse. Tú eliges tu método de inicio de sesión, das clic en tu opción, ya sea registrarte con Google o registrarte con correo electrónico. Y luego después de confirmar y activar a través del correo electrónico que recibes y tu bandeja de entrada, estás listo para ir. Y si quieres practicarlo, puedes hacerlo tú mismo o podrías seguir este video y hacerlo junto conmigo. Entonces te veré en el siguiente video. 7. Descripción general de capítulos: Entonces en este capítulo comenzamos a explorar framer, la historia de la interfaz de usuario y el diseño de la experiencia del usuario Qué es, por qué es tan importante tener diseñadores UI UX donde todo comenzó. Dónde empezó todo y en qué nos encontramos ahora mismo y lo que nos depara el futuro en términos de diseño UI UX. También exploramos la interfaz de Framer, donde están las cosas, qué puedes hacer, un poco de personalización del texto Exploramos un poco el escenario de Framer. También miramos las plantillas. Framer podría ser la opción para usted, por qué querría usar un creador de sitios web impulsado por IA Por qué no usarías, por ejemplo, como Wicks square space o Webflow, que están todos en la cima de su juego Pero Framer es tan recién llegado y está creando tantas innovaciones al mismo tiempo que honestamente no pienso por qué no le darías una oportunidad, al menos de todos modos, como el resumen del capítulo, miramos estas cosas, también aprendimos a crear tu propia cuenta y cómo empezar En el siguiente capítulo, en realidad estaremos creando tu propio sitio web. Y no solo va a ser cualquier sitio web, sino que va a ser uno impulsado por IA. Lo que significa que vas a aprender a escribir tu propio prompt. Y cómo ser lo más detallado posible. Cuáles son algunos consejos para obtener el mejor resultado que puedas de la IA. También aprenderemos a personalizar cosas, cómo cambiar tu fuente, cómo jugar con los colores y el diseño de la página. También exploraremos algunas herramientas externas de las que hablaré en el próximo capítulo. Te veré ahí. 8. Introducción a los capítulos (tu primer sitio web): Bienvenidos al siguiente capítulo. Ya te di un pequeño adelanto de adelanto. En el video resumen del último capítulo, también te di una pista sobre qué más vamos a usar con framer En realidad, eso es un asistente de selección de color y paleta para ayudarte a tomar las mejores decisiones color para tu sitio web Si no estás contento con los generados por IA, también puedes usar eso como guía. Como mencioné anteriormente en este capítulo, vamos a sumergirnos en tu propio primer mensaje para crear un sitio web. Vamos a practicar eso haciendo una tarea más tarde juntos. También te proporcionaré algunos consejos y detalles sobre cómo escribir un prompt detallado para obtener los mejores resultados con IA. Te veré en el siguiente video. 9. Escribe tu primera indicación: De hecho, aprendamos a usar la IA y producir los resultados más efectivos para su propio sitio web personalizado. Por lo que algunos consejos para escribir un prompt detallado para su sitio web es el primero es específico. Proporcione instrucciones claras sobre el tipo de sitio web que desea crear. Incluya detalles sobre el propósito, público objetivo y las características específicas que desee. Lo siguiente son los elementos de diseño. Describe los elementos visuales que tienes en mente. Mencione el color, la paleta, tipografía, las preferencias y cualquier elemento de marca Lo siguiente es la experiencia del usuario. Explica la experiencia de usuario a la que estás apuntando. ¿Buscas un diseño limpio y minimalista o algo más vibrante y dinámico Así que teniendo eso en mente, escribamos un prompt de ejemplo. Entonces escribamos, estoy buscando crear un sitio web de portafolio. Aquí estamos, indicando lo que realmente queremos crear y cuáles son nuestros deseos para mi negocio de fotografía. Nuevamente, es bueno estar lo más detallado posible de qué tipo de negocio estoy planeando crear, mi sitio web. Es un muy buen aviso, mostrar qué tipo de negocio es y para qué sirve en realidad es realmente genial para que la IA te entienda A continuación escribamos, quiero un diseño limpio y que refleje mi estilo creativo. Aquí vamos a la estilización. Mencionamos que queremos un diseño limpio y moderno también quiero reflejar mi estilo creativo. Y vamos a describir nuestro estilo creativo en las siguientes frases. Escribamos, la paleta de colores debe ser una mezcla de pasteles apagados Aquí ya estamos describiendo nuestras preferencias personales, nuestros estilos creativos como se mencionó anteriormente. Y también le estamos dando una paleta de colores para trabajar. Y esta descripción debería ser buena para que empecemos. Y aquí podemos ver la barra que se llenó describiendo lo detallada que es tu descripción. Y si es lo suficientemente bueno para que la IA pueda ejecutarlo bien. Entonces, si hacemos clic en Inicio, realidad comenzará a crear tu sitio web. Para eso es el siguiente video. Entonces no quiero que te dejes con un colgador de acantilado, pero te voy a ver en el siguiente video. 10. Después del prompt: El video anterior. Lo dejamos aquí escribiendo una descripción bastante detallada y ocho puntas Entonces, en realidad hagamos clic en Inicio y veamos qué genera. Se puede ver el progreso de la creación, ¿verdad? A medida que crea, se puede ver que crea de inmediato las versiones optimizadas del sitio web para tablet y para teléfono Aquí se te pide que elijas tu dominio gratuito con el punto de framer que termina, y vamos a hacer clic en no Ahora lo asombroso es que la IA también genera texto para ti y para todos los encabezados. Entonces, aunque no estés seguro de lo que vas a escribir en tu sitio web de fotografía, ya le ha mostrado Judas sugerencia de en qué puedes profundizar Entonces aquí tenemos algunas fotos de marcador de posición, algunas descripciones de las fotos Y ha utilizado diferentes elementos para hacer que el sitio web sea más agradable visualmente. Y tienes las críticas en la parte inferior, como cualquier sitio web clásico, ya sabes, basado en servicios. En la parte inferior, tenemos un pequeño pie de página con los íconos de las redes sociales y los derechos de autor. Entonces me gusta este aviso y siento que vamos a ir con eso. Y puedes ver que las versiones optimizadas están muy bien optimizadas y no hay nada realmente mucho que quieras hacer. Si estás satisfecho con el diseño, puedes poner tus imágenes de inmediato en lugar de los marcadores de posición y tal vez cambiar un poco el texto Y sería bastante bueno ir a adjuntar los enlaces aquí, obviamente. Entonces sí, esto es realmente increíble, y voy a ver en el siguiente video, mirando cómo podemos personalizar todos estos elementos. 11. Personaliza tu primer sitio web: Entonces, ahora que tienes tu propio sitio web listo generado por la IA, en realidad está tratando de adaptarlo aún más y obtener todo exactamente bien. Entonces, para personalizar tu sitio web, solo tienes que hacer clic en el elemento que deseas editar. Y puedes usar IA para cambiarlo o puedes ir a la derecha y puedes cambiar. Por ejemplo, cambiemos el color de la textura, rojo yendo a la derecha. Y puedes dar click aquí, Color, Puedes cambiar el color aquí. También puede arrastrar alrededor del elemento para cambiar la posición de los elementos. Por ejemplo, quiero aquí y este tipo de parece una portada de diario y es, creo, perfecta para un sitio web de fotografía aquí, por ejemplo. También puedo escribir otra cosa, por ejemplo, el espacio y explorar ahora podría quedarse así. Y podríamos actualizar esta fecha si queremos. Y actualmente está actualizado aunque. Entonces para ésta cambiamos la posición de la imagen. Y si bajamos, en realidad puedes cambiarlo todo aquí arriba. Se puede cambiar de nuevo la posición del párrafo en el, el encabezado aquí. Por ejemplo, si haces doble clic, te lleva a la imagen, hay un efecto que se le aplica. Entonces, por ejemplo, puedes seleccionar diferentes modos de fusión. Ahora mismo está en luminosidad y escala de grises, por eso es así Pero cuando haces doble clic en ella, la imagen es realmente así. Si vas a la normalidad y bajas la escala de grises, tenemos la imagen normal. Y también puedes seleccionar diferentes rellenos en lugar de una imagen. Y puedes reemplazar y elegir tu propia imagen haciendo click aquí. También puede cambiar la resolución, el tamaño y agregar texto alt para la accesibilidad. Además, fotos e imágenes de stock que podrías usar y podrías usar Buscar aquí. También puedes recortar la imagen si quieres. Entonces, sigamos adelante. Bajar y es más o menos lo mismo. Tenemos un par de elementos más que podemos movernos. Y aquí podemos cambiar el texto, los iconos. Todo esto es personalizable y siempre puedes cambiarlo. Y aquí también puedes ver el tema creado para nosotros. Y podemos barajarlo, y podemos seleccionar los elementos que queramos barajados, y se barajará según la paleta Entonces eso es todo para este video, y te veré en el siguiente. 12. Selector de paletas de colores: En esta lección, quería mostrarte una herramienta externa que utilizo cuando estoy creando mis propios sitios web y cuando necesito elegir colores y una paleta de colores, especialmente cuando necesito hacerlo acuerdo con la accesibilidad. Solo en general, es una muy buena herramienta para ayudarte a tomar las decisiones correctas de color y aún así tenerlo a medida para ti y lo que realmente quieres. Al principio, esto puede parecer abrumador para igual que un simple seleccionador de color, pero en realidad hay toda una teoría de color detrás elegir los colores adecuados para tu sitio web o para cualquier cosa, cualquier diseño gráfico que hagas Empecemos por mirar la página principal. Solo para ser claros, se trata de Adobe Color, una herramienta externa que utilizo para elegir mis colores. Solo he usado mi cuenta de Adobe para usar esta herramienta. Aquí nos encontramos con una paleta de colores de ejemplo, solo para que comiences. Aquí puedes ver que tenemos la rueda de colores. Contamos con herramientas de extracción, tema , extracción, gradiente y accesibilidad. Empecemos con la rueda de colores. Probablemente estés familiarizado con esto. Esta es una rueda de colores. Y mira lo que pasa cuando agarro uno de estos nodos y solo lo llevo por ahí, cambia los colores que están asociados a esta paleta de colores. La razón por la que esto está sucediendo, este cambio está sucediendo, en realidad está a la izquierda, la armonía gobierna. Hay muchas reglas de armonía diferentes, y puedes ver la explicación aquí. Las reglas de color aseguran un equilibrio armónico de colores basado en el color que ha establecido como color base. Por ejemplo, ahora mismo, este es nuestro color base. Podemos elegir el color base con solo hacer clic en él, y basará su decisión en torno a ese color. Existen diferentes reglas. Por ejemplo, monocromática es elegir los mismos colores en la misma gama, solo pasteles diferentes Y en realidad puedes agregar nodos también aquí. Puedes tener una tríada, puedes tener colores complementarios, ¿verdad Esto es muy agradable. Split complementario, doble split, complementario. Y todos estos actúan de diferentes maneras. Todo acaba de hacerse para que usted pueda componerse automáticamente. Entonces sí, hay diferentes tipos de reglas y también puedes establecer tus propias reglas personalizadas, simplemente agregando nodos y jugando. Y esto no se basa realmente en ninguna regla, así que quizás quieras tener cuidado con esto. Yo recomendaría al principio pegarme con estos, con los preestablecidos, por ejemplo, me gusta este, y puedo guardar en mi biblioteca esta paleta de colores. También lo puedo nombrar, por ejemplo, mi verde. Y también puedo agregar algunas etiquetas para que sea más fácil de encontrar. Puedo guardarlo y también lo publico para que la gente vea y revise mi paleta de colores. En el centro, puedes ver las tonalidades y puedes elegir la primaria. También puedes elegir el modo en el que te encuentras, justo aquí mismo. Y también puedes cambiar los valores aquí, lo que va a cambiar la paleta de colores por completo también. Se puede jugar con los valores de Argu con el brillo Básicamente, todo es personalizable. También tienes una herramienta de selección de color. Se puede crear una paleta de acuerdo a eso. Aquí puedes extraer un tema de una foto que proporciones. Aquí te puede dar una paleta de colores. Puedes hacer lo mismo y obtener un gradiente aquí. De hecho, puedes verificar el contraste y la accesibilidad, tu paleta de colores. Recuerda mi paleta de colores que se mezcló un poco. Puedes, en realidad puedes elegir la paleta de colores de acuerdo con estas reglas. Véase por ejemplo, C y D están en conflicto. Estos dos mueven las muestras en la rueda de colores para hacer que los colores distintos y seguros para los daltónicos Una persona daltónica podría no ser capaz de diferenciar estos dos colores. Tenemos que cambiar eso, no se encuentran conflictos. Cuando lo cambiamos a esto, tenemos el simulador de daltónicos y en realidad podemos ver cómo verían estos colores desde la perspectiva de una persona daltónica. Tenemos la caja fuerte para daltónicos, y tenemos el verificador de contraste. Puedes verificar, tienes los diferentes niveles de accesibilidad. Aa es más fácil de calificar que AAA. Vamos con AA. Y podemos elegir el color aquí y hacerlo más oscuro y claro. Y podemos ver que esta relación de contraste está bien. Pero si bajamos esto y lo hacemos más oscuro, todo falla y no se entiende la relación de contraste. Puedes ver aquí, puedes cambiar esto tal vez de esta manera. Pero no, aunque hagas esto más brillante , aquí no funcionará. Por ejemplo, en la fuente más pequeña falla, pero en las fuentes superiores está bien. Aquí, en realidad puedes tener sugerencias de contraste que cambiarán. Por ejemplo, podemos establecer una relación de contraste. Nos brindará sugerencias. Por ejemplo, mal contraste, te va a dar eso también. Podemos guardarlo en bibliotecas. Aquí en la parte superior, tenemos algunas cosas más divertidas para mirar alrededor. Puede tener la página Explorar donde puedes explorar paletas de colores de diferentes personas y puedes ver dónde se usaron y dónde se extrajeron A continuación, tenemos tendencias. De esta manera podrás mirar a tu alrededor y ver las tendencias de los colores en el mundo en la moda, en la ilustración, el diseño gráfico. De esta manera podrás mantenerte al día con la popular paleta de colores. A continuación, tenemos bibliotecas donde tienes tu propia paleta de colores que creaste. A continuación, tienes el switcher de temas. También puedes tener un pequeño juego de colores, y debes recordar la secuencia en la que jugó, Por ejemplo, aquí, aquí. Y también tienes un temporizador. Es simplemente divertido jugar, explorar, tal vez ver algunos colores nuevos que te gusten y tomar nota de eso. Progresivamente se vuelve cada vez más difícil. Hagamos esta última. Oh, no sé si me acuerdo de éste. Y se acabó el juego. Ver, también puedes tuitear tu puntuación más alta. Aquí solo tienes un par de botones de ayuda más, como comentarios del foro de ayuda, tu propia cuenta, diferentes aplicaciones de Adobe y Adobe Cloud. Esto es todo lo que quería mostrarte para el seleccionador de color. Espero que lo hayan disfrutado y los veré en el siguiente video. 13. Práctica: crea tu primer sitio web: En esta práctica, vamos a crear nuestro propio primer sitio web desde cero. Si quieres, puedes probarlo por ti mismo solo, o si quieres, puedes seguirme. Y podemos hacer esto juntos. Va a hacer clic en Inicio. Con IA. Para comenzar, escribiré un aviso para nosotros. Va a ser, en mi caso, vamos a estar diseñando un sitio web para Yeti Learn Pero puede ser lo que quieras para tu sitio web personal o puede ser un sitio web de cartera. Puede ser lo que quieras. Empezaré a escribir mi prompt, un sitio web para Yet learn. Una plataforma de aprendizaje que ofrece cursos que están disponibles en diferentes enseñanzas, en diferentes plataformas de cursos. Los cursos son sobre Codificación Creativa, Spline, Unity, Unity, Do Firefly, Adores Express y Journey Vamos a probar este prompt. Se puede ver, poner el título, nuestro nombre en el mismo centro. Hay un precio en una página de preguntas frecuentes. En realidad escribí algún texto sobre lo que aprendiste en nuestros cursos. Quiero mencionar estos colores. La paleta de colores es, vamos a especificar que este es el color primario. Veamos qué genera miserablemente. Podemos ver lo que generó para nosotros. Podemos ver solo tu unidad interior tener algún texto aquí. Cursos de vanguardia para diversos niveles de habilidad. Aquí tenemos algunos cursos como el Curso Sublime, el Curso Firefly y el de Unity Tenemos los precios eliminaremos esta sección porque realidad no vendemos cursos en este Esto es solo informativo. Esto no me gusta por ejemplo. Yo puedo regenerar esto. En realidad no me gusta ninguno de estos, así que podemos simplemente escribir preguntas frecuentes. Tenemos algunas preguntas que la gente podría estar haciendo. Ahora que tenemos aquí el diseño básico. También debemos eliminar los precios de aquí. Los cursos tomarían aquí, preguntas frecuentes podrían llevarnos allí. Y creo que estoy bastante contenta con los colores. Y ahora realmente podemos usar esto como nuestro punto de partida para personalizar completamente nuestro sitio web Por ejemplo, los cursos aquí. Sí, en realidad estoy bastante contento con esta página. Profundizaremos personalización y la adición de secciones y la eliminación de secciones, haciendo navegaciones y creando varias páginas en los videos que aparecen en el siguiente capítulo 14. Resumen de capítulos (tu primer sitio web): Entonces en este capítulo, realidad creamos tu propio primer sitio web. Primero comenzamos escribiendo un prompt, cómo escribir un prompt, cómo escribir un prompt, y algunos consejos y trucos sobre cómo escribir el prompt mejor detallado y cuáles son algunos tipos de, ya sabes, limitaciones con los framers AI Sin embargo, creo que es bastante bueno como todavía es IA y en realidad crea un sitio web funcional para ti a partir de un solo prompt. También te mostré una herramienta de selección de color que te ayuda a elegir tus colores para tu sitio web para prácticamente cualquier cosa que quieras en el mundo digital Se puede utilizar en el diseño gráfico. Se puede utilizar en el diseño web. Y solo quería mostrarte una herramienta realmente útil que ojalá te facilite un poco tu flujo de trabajo. Entonces te mostré alguna personalización de fuentes, cómo cambiar los colores de los elementos y cómo cambiar una imagen. Cómo cambiar el texto. Cómo regenerar realmente con IA. Si no estás contento con el resultado, pero en realidad quieres darle otra prueba. Sí, en realidad creamos tu primer sitio web que también es completamente funcional. En el siguiente capítulo, en realidad vamos a buscar en CMS, un sistema de gestión de contenidos. Voy a entrar en detalle de lo que es en la siguiente lección de introducción, pero espero verte en el siguiente video 15. Introducción a capítulos (CMS): Entonces este capítulo es todo sobre CMS. Me preguntarás, ¿qué es CMS? Bueno, significa Content Management System, que es básicamente un sistema que te ayuda a administrar tu creación de contenido, como desde blogs hasta listados de trabajo y páginas de marketing. Todo eso es gestionado por sistemas de gestión de contenidos. En CMS y Framer, hay colecciones que permiten mostrar contenido y administrar contenido en su sitio web fácilmente Una colección en Framer actúa como una base de datos simple donde se utiliza un conjunto de campos diferentes, cada uno con un tipo específico, para recopilar una lista de elementos que pueden ser almacenados y referenciados en todo el sitio web Esto permite una mayor flexibilidad y control del contenido de su sitio web. Facilite mantenerse al día con información actualizada y relevante sin tocar el diseño de su sitio. Las páginas cms te permiten mostrar contenido como entrada de blog, artículos de ayuda, actualizaciones de ofertas de trabajo basadas en elementos CMS. Entonces entraremos en detalles sobre todas las características de CMS. Entonces entraremos en detalles para el sistema de gestión de contenido en este capítulo y aprenderás más a medida que avanzamos. Te prometo que no es tan enrevesado, solo es más fácil hacerlo que explicarlo y aprenderlo haciendo Así que vamos a sumergirnos y te veré en el siguiente video. 16. Crea un sitio web de blogs: En este video, vamos a ver cómo crear tu propio CMS. Eso significa crear tu propio primer blog, que va a ser almacenado en un sistema de gestión de contenidos. Volvamos a nuestro sitio web que creamos en el capítulo anterior, solo como ejemplo que usamos. Aquí está nuestro sitio web y queremos hacer clic en CMS. Podemos importar un archivo CSV para tener una colección CMS, o podemos agregar un blog. Aquí, tenemos diferentes temas. Como ejemplo, tenemos cinco blogs diferentes aquí. Aquí a la izquierda, tenemos las colecciones en sí de las que estaba hablando en el video anterior. En la introducción, podemos agregar más colecciones CMS. Si tienes un plan superior, puedes agregar más. También puedes tener, por ejemplo, listados de empleo, etcétera Puedes usar el CMS en todos los diferentes tipos de situaciones. Simplemente nos quedaremos con el blog que queremos. Encima aquí, tenemos el indicador de que efectivamente se trata de un CMS. Entonces podemos agregar un nuevo elemento al blog. Podemos editar los campos, o podemos importar. Intentemos agregar un nuevo artículo. Aquí ingresa su título, por ejemplo, exploración espacial. Automáticamente genera una babosa para ti que por supuesto puedes cambiar si quieres Por ejemplo, lo cambié a solo espacio. Entonces podemos fechar, por ejemplo, hoy 31 de agosto. Podemos elegir una imagen para representar nuestro post de blog. Podemos establecer la resolución y agregar un texto alternativo para accesibilidad y SEO. O podemos elegir una de las imágenes de stock. Por ejemplo, quiero buscar espacio, podemos elegir, por ejemplo, éste. Aquí vamos. Ahora se importa al blog. A continuación, realmente quieres escribir el blog o pegarlo. Si lo escribiste en otro lugar, puedes estilizarlo. Por ejemplo, le voy a dar un rubro de exploración espacial. Puedo cambiar el tamaño del encabezado igual que una rebaja normal Elijamos esto aquí, tu publicación de bloqueo real iría. También puedes vincular algo al texto. Puedes negritarla, hacerla cursiva. También puedes convertirlo en un fragmento de código y puedes agregar una lista de viñetas. Puedes numerarlo. Puedes agregar imágenes, puedes agregar video. También puede incrustar código HTML. Por ejemplo, si quieres incrustar un video de Youtube, puedes hacerlo aquí. Sí. Entonces una vez que hayas terminado, haces clic en Seguro en tu entrada de blog está aquí mismo, por ejemplo. Quizá queramos entrar aquí y ver qué ejemplos tienen. Ahora que también puedes editar los campos, puedes cambiar el título, puedes tener un área de texto de marcador También puedes cambiar el nombre de la fecha. Esto es lo que estamos modificando. Por ejemplo, no quiero que esta sea una cita. Quiero que esta sea fecha, por ejemplo. O como fecha de publicación, algo así. Todo depende de ti. El contenido se puede cambiar. Por ejemplo, las entradas de blog ahora mismo que en realidad tienes el CMS. Y dejaremos aquí estos ejemplos por ahora. Queremos regresar y tenemos una página separada llamada blog, y todas las publicaciones de nuestro blog están aquí. Aquí está incluso el que creamos, pesar de que está controlado por CMS. Puede hacer doble clic en cualquiera de estos y cambiar las propiedades. Te llevará directo ahí. Incluso puedes estilizarlo aquí. Cambiar uno de los elementos en el CMS cambiará todos ellos. En la entrada del blog tenemos home, tenemos blog por ejemplo. Quiero vincular esto por ejemplo. Quiero escribir post de blog. Lo dejaré así por ahora. Pero lo modificaríamos en realidad. Entonces quiero enlazar esto al blog. Cuando presento esto, me desplazo hacia abajo. Doy click aquí y esto nos llevará a los blogs. Cargaremos las imágenes. Puedes hacer clic en cualquiera de estos y mirar el contenido que nos llevó de vuelta por completo. Sólo quería volver. Puedes dar clic y leer tu publicación de bloque, justo aquí. Sí, así es como creas tu propia primera colección CMS. Hay muchas, muchas posibilidades de lo que puedes hacer con él. Tener un plan superior, pero todo es prácticamente lo mismo. Es la misma idea de crear un blog o por ejemplo, una lista de trabajo. Y solo pones tus valores y escribes el contenido aquí. Veré en el siguiente video. 17. Escritura de contenidos fácil: Ahora que sabemos cómo crear realmente tu propia colección de blog, queremos llenarla con, ya sabes, no escritos pre hechos, sino algo original y algo que nos pertenece. ¿Correcto? Así que vamos a escribir, hacer clic y eliminar todas estas plantillas y publicaciones de blog pre hechas. Bien, vamos a ir a Chat PT. Te voy a dar consejos sobre cómo escribir tus propios blogs con la ayuda de Chat PT. Quieres registrarte si aún no tienes una cuenta o quieres iniciar sesión como lo haré en mi caso, quieres iniciar sesión y puedes usar tu dirección de correo electrónico. Puedes continuar con Google, tu cuenta Microsoft o Apple. Voy a seguir con Google. Veamos qué es en realidad un GPT. Se trata de un modelo de lenguaje grande basado en Chappot, desarrollado por Open II y lanzado el 30 de noviembre de 2022 Prácticamente te da la respuesta a cualquier cosa, cualquier cosa que pidas. Por supuesto, tiene algunos filtros y bichos y puede rezagarse y alucinar IA abierta se dice a sí misma, es importante tener en cuenta que puede que no siempre sea fácticamente correcta porque es conocimiento cortado Miremos juntos es septiembre de 2021. Podría estar desactualizado, ni siquiera lo sabe. Conoce a Framer como una herramienta de prototipado como Figma, pero no sabe Yo, vamos a ayudarle y vamos a dejar que nos ayude. Tengo un blog, cinco publicaciones de registro de troncos, sobre exploración espacial. Una de ellas debe ser nombrada como exploración espacial. Tenemos que ser lo más específicos posible a la hora describir a Chad GPT lo que queremos Porque en el video anterior, creamos exploración espacial. Yo solo quería llenarlo también, el único nombre de exploración espacial. El texto va a entrar aquí. Veamos qué nos da. Escribe bastante rápido así que no tenemos que esperar tanto tiempo. A ver. En realidad no tiene uno que sea solo el nombre de exploración espacial. Supongo que solo especifica más de qué va a hablar, por ejemplo, develar el cosmos más allá Estos son cortos aunque quiero hacerlos un poco más largos solo para que sean quizá lecturas de tres a cuatro minutos en lugar de un párrafo las entradas del blog lee de tres a cuatro minutos, simplemente lo escribirá más arriba. Podemos ver que en realidad no siguió el aviso y está reescribiendo lo que escribió Porque realmente no estoy seguro de si esta sección sería una lectura de tres minutos. Pongámoslo de otra manera. Me refería a hacer cada entrada de blog. Aquí vamos. Podemos ver que es una más larga, más específica. De hecho me gusta la longitud de estos, pero ahora solo escribió sobre una publicación de bloque si quieres que vea, en realidad preguntándonos si queremos la continuación con el resto de la publicación de bloque, digamos. Sí, lo hago. A veces puede congelarse un poco. Sólo déjalo pensar un poco y ya nos pondremos en marcha. Podemos ver que es por dos más. Y quiero decir que me está preguntando otra vez. Sólo voy a dejar claro que, sí, extender cada una de las entradas del blog. De hecho, podemos ver que cada una de las entradas del blog es ahora de 400, 500 palabras. A lo mejor este es un poco más largo, sólo unas 400 palabras. Ahora que tenemos esto, veamos realmente el contenido sobre el que escribió aquí. Se trata de develar el cosmos más allá. En realidad, en lugar de mirar a través de cada uno, podemos pedir un resumen. Bríndeme un resumen rápido de cada entrada de blog. Echemos un vistazo a las reseñas de la entrada del blog. En primer lugar, se trata del profundo impacto de la exploración espacial, trazando su historia y resaltando su significación. Sí, eso me gusta, y voy a ir con eso a continuación. Tenemos íconos del ingenio humano, celebrando a los visionarios que unieron el viaje de la humanidad al espacio Este post rinde homenaje a figuras como Udi Ga Guiden, Neil Armstrong. Eso me gusta. Luego tenemos el tema de la búsqueda de mundos habitables, para la comprensión del universo, y el potencial para la vida extraterrestre y la búsqueda de exoplanetas habitables El siguiente es en realidad un poco polémico. O no polémico, de eso se habla mucho ahora mismo, viajes y colonización misiones espaciales a Marte. En realidad se trata proyectos ambiciosos de sexos espaciales Pero como está desactualizado, no creo que en realidad sirva ejemplos recientes, sino quizá los que sucedieron antes de 2021. El último es la exploración espacial versus consideraciones éticas. Lograr un delicado equilibrio que está hablando de protección planetaria y preservación cultural, manteniendo la integridad de los ambientes celestes. Me gustan mucho todas estas entradas de blog. Ahora que tenemos todo el contenido que necesitamos para nuestro blog, en realidad podemos empezar a ponerlo. Eso es lo que vamos a hacer en el siguiente video. 18. Rellena tu blog: Ahora que en realidad tenemos nuestras entradas de blog y nuestro contenido, es el momento de ponerlo en nuestro sitio web, el que se llama exploración espacial. Solo vamos y llevemos el primer blog publicarlo. Asegurémonos de que estamos agarrando la versión correcta, que es la versión extendida Vamos a tomar esto, poner esto aquí, vamos a copiar esto. Pon esto aquí. Tenemos nuestro encabezado. De hecho, podríamos querer, por ejemplo, charlar PT, digamos para la publicación de blog uno. Ya que es tanto tiempo dividido en secciones, solo quiero mostrarte algún formato que podrías hacer con chat PT y framer Déjalo esperar y pensar un poco. Aquí vamos. Tenemos nuestras secciones del blog ahora sería más fácil de digerir. Siento que incluso en el clima actual con Tiktok y todo, acabo de pegar el nombre de la sección Voy a seleccionarlo y elegir Rumbo a, por ejemplo, comienza el viaje cósmico. En realidad vamos a eliminar esto. Lo tenemos todo limpio y sin repeticiones. Seleccionaremos rumbo para pegar esto. Simplemente entras y acaricias, bueno, en realidad puedes hacerlo aún más fácil y rápido. Entonces ya tenemos dos secciones. Vamos a pegar los otros. Eliminaremos la parte de la sección. Tengo una carta extra. Solo estamos seleccionando cada una de las palabras de la sección, asegúrate de que no haya espacios. Y luego podría negrita usando el comando de atajo en Mac o control en Windows, o simplemente entraré y seleccionaré el encabezado dos para cada uno. Aquí vamos. Tenemos nuestra primera entrada en el blog. Ya tenemos nuestras fotos. Tenemos la fecha de publicación. Cambiemos la babosa para que sea un poco más específica. No queríamos hacer eso. Vamos a pegar eso aquí. Pero aquí haremos exploración espacial. La babosa es más corta, ya está guardada. Eso es todo lo que tenemos que hacer. Ahora, si entras, ahí está tu entrada de blog. Quieres hacer esto por cada entrada de blog que creamos que hayas creado. Y en realidad hagámoslo. Así que agrega un nuevo artículo. Pidamos a Chachi Pet que divida, divida cada una de las entradas del blog en secciones como lo hiciste en este caso No hace falta pedirme que continúe. Quiero esto para cada entrada de blog que tengamos. Entonces trato de ser lo más específico posible para que no se detenga y simplemente no espere a que responda. Pero, ¿todo de una sola vez? En realidad no entendí y solo escribí para nuestra segunda entrada de blog, dividimos en secciones, Entrada de blog número 345. Solo esperemos a que produzca los resultados, ojalá los que queramos. Así que vamos a ver si realmente lo hizo por cada entrada de blog. Y sí, podemos ver 543 y tenemos dos aquí. Ya pusimos en el primero. Lo que queremos hacer es hacer clic en Crear Nuevo Artículo. Copia el título. Fecha de publicación. Hagamos lo mismo. Cambiemos la foto. Algo relacionado con el espacio. Vamos a copiar este blog aquí. Eliminar. Eliminar el No dejar nada atrás que no esté seleccionando por razón vino. Aquí, vaya a la derecha. Destacemos la última sección de este blog y queremos ver los cambios. Y tenemos un blog más que quieres hacer esto por cada blog que hayas creado. Para que el video sea corto, solo lo estoy haciendo para dos, pero ojalá ahora tengas la idea de cómo hacerlo y ojalá lo implementes. Y te veré en el siguiente video. 19. Práctica: crea tu propio blog: Bienvenido a un nuevo video de práctica. En realidad queremos armar todo lo que has aprendido en este capítulo, el sitio web que desarrollamos en el capítulo anterior que iniciamos. Déjame mostrarte muy rápido, aprende. Quiero tener un blog que describa los cursos que tenemos. Voy a acudir a Chad GPT en busca de ayuda. Una vez que estemos en Chad GPT, queremos pedir ayuda Tenemos una unidad, una codificación creativa y un curso de espionaje sobre el que quiero escribir En el blog que quiero escribir, estoy creando un blog en los cursos que ofrece nuestra empresa. Nos llaman Unidad Aprendida. Ofrecemos cursos en línea que son educativos y tienen que ver con la innovación. Entonces vamos a escribir para Fate of Coding y Unity, queremos tres posts de bloque. Quiero tres publicaciones de bloque sobre los temas. Lo conforma tres postes de bloque. Spline, a veces lo mezcla con el término matemático, spline los tres D, Software de Animación y Modelado y codificación creativa Estas publicaciones de bloque serán una introducción al curso y describirán lo que les espera. El resultado del aprendizaje es especificar, no hacerlos demasiado largos, y ver lo que se le ocurre. Aquí vamos. Aquí están nuestras entradas de blog. Estos tendrán que cambiarse según nuestros cursos reales, pero este es un buen punto de partida. Quiero agregar esto a nuestra colección de blogs. Eliminemos este y agreguemos, eliminaremos los de plantilla. Agreguemos un nuevo artículo. Nuestro título es Creatividad con Unity Game Development Course. A continuación, vamos a tomar esto aquí. Estos ya están en negrilla. Así lo copió. Vamos, vamos a elegir una imagen. Así que elegiremos esta foto como nuestra portada. Ahora que tenemos nuestro primer post de blog, vamos a importar el resto de ellos. Poner en el título Fecha, Buscar una imagen. Entonces quieres pegar esto. Ver esta vez. Por alguna razón no pegó los párrafos. Lo cual es raro porque lo hizo en esta, ¿verdad? Eso estuvo raro. No sé por qué pasó eso aquí. Y escribiremos en codificación creativa, tal vez solo escribiremos codificación porque no está muy extendida. Bueno, este me gusta más. Aquí vamos. Ahora queremos agregar esto a nuestra página. Aquí tenemos el blog. Deja que esto solo se cargue. Sé por qué eso no se actualizó. Esto no es lo que queremos, así que tenemos que añadir esto. La razón por la que no está apareciendo aquí, necesitamos agregar una nueva página Lo siento, no aquí ahora. Se ha actualizado. Ahí vamos. Esto es horrendo. Nada es realmente legible. Entonces cambiemos este color a blanco para que esto sea un poco más genial, un poco más blanco. Lo siento. Hagamos esto blanco también. Esto es mucho mejor. La otra versión fue muy, muy mala. Sigamos en las páginas de bloque que no estamos usando aquí. También necesitamos cambiar, veamos. Bien, entonces tenemos esto, vamos a ir aquí, vamos a personalizar esto. Cambia esto a blanco, cambia esto a un poco más blanco. El texto en realidad está ahí, pero es muy difícil de leer. En realidad no lo noté. Por eso es importante elegir buenos colores. Hago click en Contenido, Dónde, aquí vamos. Voy a Body. Voy a Editar. De esta manera, todo el texto del cuerpo a lo largo de los blogs se cambiará sin necesidad de entrar en cada página y cambiar la fuente o el color. En lugar de estos, solo quiero tener uno que diga blog y haremos nuestros cursos. Vamos a vincular esto al blog. La razón por la que solo quería verificar dos veces, este es el padre de estos. Cuando vinculamos esto, todos estos elementos dentro de esta caja también enlazan a esa página de blog. Ahora bien, si realmente tenemos una vista previa este scroll hacia abajo, da clic en Blog. Aquí tenemos nuestro blog, totalmente receptivo, Perfecto para tu tablet y para tu iphone así como tu computadora. Aquí vamos. Esta fue la creación de nuestro blog. Ojalá tengas que practicar por tu cuenta. Si no, seguiste nuestro tutorial de práctica. Y eso también está absolutamente bien. Y te veré en el siguiente video. 20. Descripción general de capítulos (CMS): Entonces en este capítulo, aprendimos todo sobre CMS, que significa Sistema de Gestión de Contenidos. Como estoy seguro que ya recuerdas, buscamos en la creación de blogs, cómo agregar un blog e integrar tu blog en tu sitio web que has creado anteriormente. Y también hemos mirado la ayuda de ChatChpt y cómo podemos crear blogs con la ayuda de ChachPT Y nos fijamos en cómo importarlos de nuevo en framer. Y también practicamos creando nuestro propio blog, y lo practicamos un poco. Y personalizamos el texto y las fuentes y en realidad nos encontramos con un par de problemas que eran realmente confusos. Pero al final logramos resolverlos. Y ojalá también aprendiste de esos pequeños hipo Y te veré en el siguiente capítulo donde nos sumergimos en avanzado, y te veré en el siguiente capítulo donde nos sumergimos en personalización avanzada que es básicamente efectos, diferentes secciones, encabezados, todo eso, todo lo que estabas esperando. Todo lo que es personalizable se trata de framer, una vez que ya tengas tu sitio web creado por IA, estas son las cosas que realmente van a perfeccionar y hacer que tu sitio web sea único Por supuesto, esto no está impulsado por la IA, pero es bueno saber cómo hacer estas cosas para que puedas personalizar tu sitio web por ti mismo después tener tu plantilla base creada por IA. Entonces te veré en el siguiente capítulo. 21. Introducción a los capítulos (cutomizaciones avanzadas): Bienvenido al siguiente capítulo que trata sobre personalizaciones avanzadas Buscaremos crear personalización con secciones de efectos, encabezados y agregar tus propios formularios y medios y todas esas cosas buenas que cubriremos en este capítulo. Esto realmente te ayudará a crear un sitio web verdaderamente único y realmente adaptarlo a tus propias necesidades y a la forma que quieres crear tu sitio web. Y además no solo buscaremos usar cada elemento por separado, sino también combinar todo junto para crear una cosa cohesiva Y también practicaremos esto y lo agregaremos a nuestro sitio web que hemos estado desarrollando a lo largo del curso. 22. Por qué es importante la personalización: Así que quiero profundizar un poco por qué la personalización realmente importa y por qué es importante que tu sitio web sea personalizado y adaptes tus elementos para que se ajusten a tus necesidades Adaptar secciones y personalizar secciones le permite mostrar la información de manera que se alinee con Si mejoras tu navegación, por ejemplo, personaliza tu encabezado. Simplifica el proceso de navegación del sitio web a su visitante, mejorando así la experiencia del usuario A continuación, refleja la marca. Si tienes todos tus elementos de manera similar y diseñados de manera similar, refleja el mensaje de tu marca y refuerza tu imagen de marca Los formularios de medios personalizados y la interactividad en realidad lo hacen más atractivo para el visitante También optimiza la funcionalidad, lo que ayuda a la usabilidad, consistencia y el profesionalismo, aumentan la confianza de los usuarios y finalmente impulsan la interacción Los iconos personalizados, los patrones y la integración social fomentan el compromiso. Por lo que estas son solo algunas razones por las que la personalización importa en tu sitio web. Y ojalá te quedes para ver nuestro capítulo y ver cómo adaptar realmente tu sitio web a tus necesidades. Entonces te veré en el siguiente video. 23. Secciones: Este video explorará la primera personalización que vamos a investigar, que son las secciones. Vamos a entrar en nuestro sitio web de ejemplo con el que ya trabajamos antes. Lo que vamos a querer hacer es entrar en Insertar. Aquí tenemos nuestra sección sección bajo Fundamentos. Aquí tenemos un montón de opciones de sección entre las que podemos elegir. Todos estos, por supuesto, también son click y drag. Se puede obtener esto de esto o esto de esto. Realmente no importa cuál elijas. También puedes crearlo desde cero. Miremos desde arriba y trabajemos nosotros mismos hasta abajo. En la parte superior, tenemos nuestra primera opción. A ver, se va a insertar en la parte inferior. También podemos cambiar la posición de la misma con solo hacer clic y arrastrar. Por ejemplo, lo puse aquí arriba, es todo clicable y personalizable Aquí tenemos dos botones, tenemos algo de texto. Esta es una de las secciones que tenemos. Este es un ejemplo muy sencillo, podemos simplemente seguir adelante. A continuación tenemos la misma sección, pero solo para el fondo, en realidad puedes agregar una imagen. Vamos a agregar algo de unsplash, Por ejemplo, este de aquí tenemos lo mismo solo con un fondo de imagen Si vamos más allá, tenemos algunos que son una imagen a la derecha y algunos textos a la izquierda, tenemos todo lo contrario. La imagen está a la izquierda, el texto está a la derecha. Uno más que tenemos es éste de aquí. Tenemos dos imágenes, tenemos algo de texto aquí, y tenemos algo de texto aquí. En realidad está promocionando el plug in Figma, que veremos más adelante Por ejemplo, podemos agarrar esto y de hecho podemos moverlo en este cuadro de texto. De hecho, eres libre de hacer lo que quieras, pero en realidad es más fácil elegir una sección que te guste desde aquí. Veamos algunos más. Por ejemplo, esta son dos imágenes de manera horizontal. Aquí tenemos una opción para 46 imágenes. Lo siento, aquí en realidad promueve lo que tenemos en framer. A continuación tenemos algunas formas irregulares, Double clicked, juguetes importados Comandemos Z y cancelemos. Ahí vamos. Aquí tenemos cuatro marcadores de posición para las imágenes y cuatro cuadros de texto Puede hacer clic en él y expandir capas y personalizar todo esto. En realidad también se puede. A continuación veamos más. Tenemos algunas que son como tarjetas como esta. Podríamos usar también esto para, por ejemplo, nuestros cursos que promovimos en una de nuestras prácticas que podemos revisar, podemos tener muchas reseñas aquí. Podemos personalizar el ancho de cada columna. Podemos cambiar el lugar de esto y esto, y podemos jugar así. A continuación tenemos algunas críticas. A continuación tenemos una revisión en una sección grande. También tenemos nuestro formulario de contacto, que es esencial para nuestra página de contacto, importado dos veces. Nuevamente, aquí solo tienes nombre, correo electrónico y mensaje, puedes contactarnos directamente, como en el sitio web. A continuación tenemos algunos precios. Tenemos una sección de preguntas frecuentes que también puedes personalizar. Puedes entrar aquí y personalizar la sección de preguntas frecuentes también. Tienes esta mesa. Puedes la pregunta y la respuesta aquí. Puedes cambiar tu pregunta. A continuación tenemos nuestra confianza por sección. Simplemente puedes reemplazarlos con un logo, Empresas que confíen en ti y muestren su apoyo. Por último, hoy tenemos un registro que es realmente similar al primero que vimos, que está aquí mismo. En realidad, creo que es exactamente lo mismo. Simplemente sin el texto. Sí, son prácticamente todas las pequeñas personalizaciones básicas. Todos son similares. Todos usan y utilizan los mismos elementos. Pero es agradable ver algo de variedad y ver que ya está todo listo para lo veré en el siguiente video 24. Navegación: Veremos la navegación, que son básicamente encabezados y pies de página, en este caso los llaman barras superiores Eliminemos algunas secciones que sobran de la lección anterior. Es un poco menos desordenado. Aquí vamos. Dejaremos el blog. Voy a dejar esta. Me gusta la imagen. Vamos a insertar y entramos en navegación. Seleccionamos una barra superior que queremos usar en realidad la ha puesto en la parte inferior, así que queremos arrastrarla hacia arriba y ponerla en la parte superior. A la izquierda tenemos el logo y a la derecha tenemos la sección sobre contacto y registro. En realidad es una vista previa de esto. Aquí lo hace. En la parte superior, puedes ver estos botones en el logo. Por supuesto, puedes volver a personalizarlo. Puedes hacer click en, puedes ver que hay múltiples opciones para diferentes casos de uso en los que queremos hacer click aquí. Aquí realmente podemos cambiar todo sin dejar que esté desactualizado y mantenernos actualizados aquí. En lugar de texto, podríamos poner nuestro logo aquí. De hecho podemos vincular estas cosas a, por ejemplo, like about y contactar, pero no tenemos esas páginas en este momento. Volvamos a la navegación. En realidad miramos la versión negra aquí. También hay una versión blanca. También hay una versión de logotipo. Si haces clic en él hasta el fondo. Vamos a llevarlo a la cima. Elimina el primero, haz clic en él. Aquí vamos. Podemos cambiar la imagen aquí. De hecho, podemos agregar más componentes, tantos como queramos. En realidad, la razón por la que estoy diciendo que puedes lograr cualquier cosa desde cualquier plantilla es porque si hacemos clic en Escritorio, vamos a la derecha. Ya sabes como hay dos versiones de blanco y negro. De hecho puedes entrar aquí y cambiar el color desde aquí y obtener el mismo resultado que el anterior. Si hacemos clic aquí y lo emparejamos, aquí vamos. Tendríamos que cambiar este texto aquí afuera, es legible, en realidad incluso hacer eso. Vamos a hacer clic aquí. Elige el color. Vamos a tener que hacerlo por cada uno. Voy a cambiar, seleccionarlos todos y cambiar el color por completo. Yo por supuesto, usaría este negro si mi logo fuera blanco o colorido. En este caso, en realidad usaríamos uno blanco o uno más brillante que cumpla con los requisitos de contraste. Ahora veamos el pie de página. Vamos a hacer clic aquí. Veamos dónde se importa. Aquí vamos. De hecho lo voy a arrastrar por aquí. No, eso no es lo que quiero hacer. Eso es así. Y haz clic en Insertar. Aquí vamos. De esta manera, la versión de escritorio va a ser primaria y luego vamos a optimizar para el resto de ellas. Aquí podemos ver todas las diferentes páginas que querrías o podrías crear, y ninguna de estas está enlazada en este momento, Pero si haces clic en, luego haz clic de nuevo, y puedes enlazar todas estas aquí. De manera similar con el pie de página blanco, la única diferencia es el color y no la funcionalidad real de la plantilla. Ahora que hemos aclarado abajo mordió a los bateadores y a los pies de página, ahora es el momento de pasar a las 25. Páginas: Miró en la navegación. Pasemos a páginas enteras. Así es como puedes crear literalmente una página en un solo clic. He hecho clic en el primero sin explicar. Eso lo sé. Pero aquí tenemos la landing page. Rápido y fácil, tienes todo lo que necesitas para la mayoría de los sitios web. Tenemos el marcador de posición de imagen en el medio. Tenemos un botón, algún texto. Tenemos los logotipos de confianza. Tenemos un par de secciones que te dirigirían más profundamente al sitio web. Tenemos nuestra sección de preguntas frecuentes donde puedes cambiar los elementos. Tenemos la púa para apuntarte hoy con nuestro sencillo pie Lo que noto aquí es que no hay encabezado que es un menos, que recomendaría agregar uno. Después de haber explorado las páginas, solo agrega un encabezado a esta. Si decides usar esta página, todo esto está optimizado y el diseño responde. Veamos algunas páginas más. Hay bastantes opciones para que las veamos. No voy a entrar muy en detalle de cada uno, porque quiero que también lo exploren su cuenta y jueguen con él. Y ya sabes que podemos personalizarlo todo, cambiar las fuentes, los logotipos, los colores, y cambiar las imágenes honestamente. Eso es prácticamente todo lo que necesitas saber. Aquí tenemos una página de portafolio donde puedes mostrar tu proyecto. Puedes ver las páginas que agregamos están todas aquí en la sección Páginas. A continuación, veamos el teaser. Esto es como una promoción, un poco mantente atento y regístrate, pones en tu correo electrónico. Y aquí hay un pequeño teaser. Podría ser un video o como una foto. Podría ser cualquier cosa. Quieres un blog. Ya estamos familiarizados con los blogs. También puedes agregar uno aquí. Puedes agregar un artículo de blog por separado sin la colección de blogs. Si quieres, podemos agregar una barra lateral que es básicamente una cabecera de bardo lateral. Tenemos diferentes tipos de proyectos aquí, lo que nos impulsa a ver más Después de la barra lateral, tenemos nuestra página de proyecto, que es bastante similar a las otras que ya miramos. También tenemos una página en blanco. A ver si se carga bien. Página en blanco solo para tus creaciones. Vamos a previsualizarlo. Aquí tenemos un carrusel largo completo con el que puedes jugar También tenemos aquí un blog de imágenes, que se parece más o menos a un diario documental de imágenes. Tenemos un clásico de cuatro páginas. Solo para tener un enlace roto, si tienes algún lugar donde el visitante no quiere ser redirigido, solo tienes que meter esto A continuación, tenemos algunas carteras. Tenemos una página teaser Coming Soon. Tenemos de nuevo, una introducción. La mayoría de estos son para uso personal, para blogs, pero también siempre puedes cambiarlo algo de trabajo y ser más profesional en lugar de casual aquí. Pero todo depende de ti. Puedes cambiar hasta tus páginas como quieras. Puedes arrastrar esto aquí, arrastrarlo por ahí, y ver qué pasa. Sé que no es tan flexible, pero lo es de alguna manera cuando realmente lo miras, pruebas, juegas con cosas y ves si te gusta y solo le das una buena oportunidad porque puede crear tan buenos resultados. Yo solo le daría un poco de tiempo y vería qué pasa y solo seguiría usando Framer mientras tanto porque nunca se sabe lo que va a pasar y qué tarea tendrá Sí, esto era Pages. Siéntase libre de personalizarlo y mirar a su alrededor. Te veré en el siguiente video. 26. Medios de comunicación: Ahora vamos a buscar en los medios aquí. Sé que puede ser un poco abrumador, pero todos estos son más o menos similares. Veamos primero estas subcategorías en los medios de comunicación. Puedes importar una imagen, un video en animación o audiom Empecemos con una imagen sencilla. Haremos clic en Iff y lo arrastraremos a nuestra sección. Y puedes ver que se ha sumado a la sección en la que queremos darle click en oleada Gif. Después de importar el Gif como medio, puedes hacer click en él y tendrás un botón Surge aquí. Simplemente puedes escribir lo que quieras. Dará justamente esa mirada lo lindo que es esto. Cada vez que lo busques, va a ser diferente. Yo lo borré. Voy a teclear gato otra vez. Va a ser una imagen completamente diferente. Lo siento, esto es demasiado lindo para no distraerse. Lo dejaremos ahí. Vamos a ver el siguiente formulario. Tenemos videos. Podemos importar un video directamente desde nuestro portátil o importar un video usando frame de Youtube o importarlo desde Vimeo Hagamos click en Youtube porque nadie usa Vimeo. Aquí tenemos al jugador. Teníamos que tener un enlace de ejemplo aquí. Podemos encender y apagar la reproducción automática. Por ejemplo, lo hice en bucle. Podemos silenciar o activar el silencio y decidir el color del jugador También podemos tener algunas fronteras. Hagamos clic en Publicar. Seleccionemos todos estos comandos X ellos. Así que corta. Voy a publicar todos estos en la página aquí. Sólo tenemos un ejemplo que he pegado. Y ahora podemos previsualizar estos. En la parte inferior de la página, puedes ver que el Jeff está jugando enseguida. Podemos jugar a la integración de Mayo. No estoy seguro de qué pasó con el de Instagram aquí porque es un poco clave. Siempre es doble comprobación de que el Wi funciona y todo se cargaría. A continuación, veamos las animaciones. Vamos a hacer clic en Lotti. Lotti son básicamente animaciones rápidas que son realmente de bajo costo Realmente no están consumiendo casi nada de la optimización desde el portátil o el escritorio, y en realidad es muy ligero. Después de importar el lote, podemos seleccionar el enlace del que estamos obteniendo el lote. Tenemos la instrucción de juego, la fuente. Subirlo, y podrás ver que el lottie está jugando bien. Tenemos la dirección. A continuación echemos un vistazo al audio. Aquí tienes un montón de opciones diferentes entre las que puedes elegir, desde Spotify hasta Apple Music, podcast de Apple, Sound Cloud, Simple Cast y P tres simples que puedes importar desde tu portátil. Estas son todas las opciones de medios para esto para framer, voy a ver en el siguiente video 27. Formularios: En este video, veamos las formas como elementos. Primero, veamos la entrada. Podemos agregar una entrada. De esta manera, un visitante del sitio web puede escribir su correo electrónico. Por ejemplo, haga clic en Suscribir. Ahora tenemos su información, podemos hacer doble clic. Podemos usar un servicio diferente para la entrada de loops, formar Spark mail, chimpancé y obtener menos peso También podemos redirigir al visitante una vez que haya golpeado suscribirse. También podemos cambiar la palabra para esto. Veamos el resto de las formas. Estas son todas las mismas formas solo para diferentes servicios. Por ejemplo, veamos el tipo formulario y calendly. En calendly, puedes conectar tu cuenta calendly y puedes reservar una cita en el formulario tipo Puedes rellenar un formulario tipo directamente en tu sitio web. Eso es todo para formularios y te veré en el siguiente video. 28. Iconos: A continuación echemos un vistazo a los íconos. Aquí tenemos un montón de iconos diferentes que puedes usar para personalizar tu sitio web y agregar algunas ilustraciones personalizadas para agregar un poco de llamarada. Por ejemplo, veamos a los humanos. Tomará un poco importar y si hacemos doble clic en él, hecho podemos personalizarlo aquí mismo, cual es bastante asombroso. Puedes cambiar la postura, puedes cambiar el cuerpo, Es absolutamente genial. Puedes cambiar la dirección aquí, puedes cambiar el color de la piel aquí. Todo es muy personalizable solo si buscas un ícono humano rápido. A continuación vamos a entrar en Twinmoi, tener en realidad iconos emoji todos en Podemos buscar un emoji aquí, podemos simplemente p así. Vamos a buscarlo y nos dará el ícono equivalente en emoji. A continuación pasemos a Mogi. Tienes diferente, en realidad todas las variantes de Mogi puedes personalizarlo completamente Y puedes seguir buscando y encontrar realmente exactamente lo que estás buscando. Se puede cambiar el radio del círculo. Se puede rotar la cara. Puedes cambiar el carácter, y puedes cambiar el color de fondo. A continuación, entremos en Feather. En este, si hacemos clic en él, tenemos una lista grande, grande de iconos que podemos usar. Por ejemplo, Wi Fi y cambia a Wi Fi. Puedes reflejarlo. No va a pasar nada porque aquí no es como un icono espejable Si realmente queremos duplicarlo, también puedes cambiar el color de tu icono. A continuación, echemos un vistazo a Hero. Aquí solo tenemos una lista diferente de muchos iconos diferentes. Aquí tenemos el ícono de Wi Fi, nuevamente, es solo un poco diferente. Puedes elegir lo que quieras para tu gusto de ellos se cruzarán y tendrán lo mismo Por ejemplo, esta también tiene una casa que es diferente a esta. Realmente solo necesitas mirar el estilo que deseas y decidir qué tipo de ícono realmente quieres usar para tu sitio web. Veamos los dos últimos. En realidad no lo voy a cambiar, así podemos ver la diferencia. Aquí tenemos de nuevo la lista, solo diferentes estilos de iconos. El último fósforo, este es un poco más redondeado otra vez, tenemos nuestra lista justo aquí Esta fue nuestra exploración de muchos íconos diferentes. Realmente hay algunos funky, ya sabes, graciosos. Y puedes personalizarlo como quieras. Puedes agregarlo a tu sitio web simplemente arrastrándolo, y se agregará mágicamente aquí Puedes hacer clic y arrastrarlo y colocarlo en cualquier lugar de la página que veré en el siguiente video. 29. Interactivos: Sobre Interactivo. Por ejemplo, veamos la barra de búsqueda. Simplemente hacemos clic y lo arrastramos a cualquier parte de la página web Para agregarlo aquí tenemos el botón de búsqueda. En realidad es pequeño. Llevémoslo a algún lugar donde sea un poco más visible. Vamos a llevarlo a la cima. Vamos a llevarla aquí primero. Vamos a insertarlo, por ejemplo, aquí. Y reduce el acolchado para que quede un poco más integrado. Si nos desplazamos hacia abajo, da clic en la búsqueda. Puedes buscar en tu sitio web de esta manera. Echemos un vistazo a ticker. Simplemente lo arrastramos a cualquier parte de nuestro sitio web, hacemos clic en él, hacemos clic en él dos veces y podemos seleccionar a nuestros hijos aquí. Simplemente va a estar rotando entre todos estos. Por ejemplo, elegí Material en Pluma y Héroe. Veamos realmente qué hace esto, ya que puedes ver infinitamente bucles entre todos estos iconos Y es una almohadilla muy bonita, así que se ve natural. Volvamos y te voy a mostrar cómo personalizar esto. Damos doble clic aquí. Podemos cambiar la velocidad de rotación. Podemos cambiar la dirección. Podemos alinearlo al centro izquierdo, o a la derecha. Podemos hacer esto más amplio aquí, está cubriendo toda la página. Podemos agregar una mayor brecha. En realidad cambiar la dirección aquí, alinearlo al centro. Se puede cambiar el relleno, lo cual no quiero hacer. Podemos seleccionar el tamaño de los objetos. Podemos estirarlo, o podemos dejarlo en auto. También podemos elegir el recorte. Esa es la bonita almohadilla que se está agregando. Y quiero dejarlo así en hover, por ejemplo. Quiero ralentizarlo. Veamos qué hace esto. Como puedes ver en Hover, tus íconos se ralentizan. Esto es realmente genial para mostrar tus logotipos solo para mostrar algo que quieras. Infinitamente hará un bucle. Creo que se ve muy bien. Sigamos adelante. Veamos la presentación de diapositivas aquí. Opera de la misma manera. Nosotros elegimos el contenido. Por ejemplo, el fósforo humano. Escojamos un tercero, pluma. Veamos lo que hace. Si haces clic aquí, en realidad rotaremos entre todos estos con una buena animación. Déjame mostrarte cómo personalizar esto. Podemos elegir la dirección, podemos seleccionar reproducción automática, cambiar el intervalo de reproducción automática, qué frecuencia cambia hacia fuera Podemos elegir si la imagen es arrastrable, Cuando es como un Jpeg o un PNG, a veces en un sitio web, tu imagen se arrastra y me parece molesta Diré que no. También puede cambiar la capacidad, la escala y la perspectiva, y rotarla. Se puede alinear a la parte superior, al centro y a la parte inferior. Puede seleccionar el número de elementos mostrados a la vez. Puede seleccionar la brecha, por ejemplo, si hay dos, puede seleccionar la brecha. Puede agregar o eliminar relleno, puede cambiar el radio, puede cambiar la transición en la que están transitando. Se puede personalizar completamente. Y puedes previsualizar la animación aquí, lo cual es bastante sorprendente en mi opinión. Se puede ver una gran diferencia. Se puede seleccionar la rigidez y la amortiguación y se puede ver la curva. De hecho, puedes ver la animación aquí, lo cual es extremadamente conveniente si no estás familiarizado con las animaciones en absoluto. Se puede agregar un retraso, pero no vamos a hacer eso. Veamos qué hizo nuestra animación. Se ve horrible, pero eso fue solo para fines de demostración. A continuación, veamos a Carol, que honestamente es similar. Vamos a importarlo aquí. Eso hará clic en Seleccionar contenido. Aquí vamos. ¿Estamos seguros de que esto es un Sol? No estoy seguro de que esto sea un Sol. Aquí vamos, Esto es un Sol. Eliminemos esto. Vamos a previsualizar esto. Aquí está el Sol porque no está lleno. En realidad no es hacer nada para agregar un par de objetos más. Para que podamos ver su funcionalidad para dar click aquí, podemos ver la animación y todo. Entonces aquí vamos. Estas fueron nuestras interacciones. Cosas muy divertidas con las que jugar. Y si sabes lo que quieres hacer, es realmente agradable y fácil lograr cosas con solo usar estas herramientas. Y te veré en el siguiente video. 30. Redes sociales: Echemos un vistazo a los sociales. Aquí tenemos todo tipo de redes sociales, Instagram, Facebook, Twitter, Google Maps, trustpilot y tag and bed Empecemos con Instagram. Veamos, puedes agregar un enlace a una publicación de Instagram, y aquí tienes la publicación de Instagram en tu sitio web. Es tan fácil como eso. A continuación, echemos un vistazo a Facebook. Este opera de la misma manera. Desafortunadamente, el enlace aquí no está disponible. Pero aquí solo importas el enlace y mostraría tu publicación de Facebook. A continuación, echemos un vistazo a Twitter, que va a ser lo mismo. Sólo va a mostrar el tweet. Aunque ya no es Twitter sino X, pero el enlace sigue funcionando. Pero de todos modos, pasemos a pasar a Google Maps. Esto podría ser en realidad más útil que los que vimos anteriormente. Simplemente puedes importar tus coordenadas. Mostrará esa ubicación. En este momento está exhibiendo algún lugar en Ámsterdam. Puedes escalarlo, solo expandirá el mapa por ti tanto como quieras. En la parte superior izquierda, tienes las coordenadas. Sí, esto es bastante asombroso en mi opinión. Entonces seguimos adelante. Vayamos a Trustpilot. Necesitas tener una cuenta con trustpilot y una identificación comercial para que funcione Por último, pero no menos importante, veamos la etiqueta y la cama. Veamos juntos qué es la etiqueta y la apuesta. Te permite importar feeds como de Instagram y de Facebook y todas las diferentes redes sociales muy fácilmente. Aquí tenemos todas las integraciones. Ni siquiera tenemos a Framer en esta lista porque Framer no es tan popular, Sí, este fue el paso social, y voy a ver en el siguiente video. 31. Servicios públicos: Veamos la utilidad. Aquí tenemos un montón de diferentes opciones, opciones utilidad para agregar a nuestro sitio web. Empecemos con exprimidores de limón. Importarlo en cualquier lugar que tengamos nuestro botón por ahora, en realidad podemos tener un enlace al exprimido de limón. Y cambiamos el estilo del botón. Podemos, podemos elegir la fuente y podemos elegir un efecto al pasar el cursor A continuación echemos un vistazo a Gum Road. Road es un gran mercado si buscas plantillas, si buscas diferentes fuentes, efectos, superposiciones, realmente puedes vincular tu producto aquí Podemos agregar un bloque de código directamente en su sitio web. Ponemos en el código aquí. Podemos elegir el idioma en el que formatear. Podemos elegir si quisieras estática o dinámica, podemos elegir un tema, podemos elegir de nuevo la fuente, y el color de la fuente, los bordes y el relleno. También podemos incrustar contenido usando la opción embed. Puedes agregarlo aquí usando un Uro, o puedes agregar tu código HTML aquí mismo. Por ejemplo, desea incrustar no usando incrustación de video de Youtube, sino usando e frame. Por ejemplo, si quieres importar un tubo corto, esta podría ser una mejor opción para que funcione. Esta es la opción que usas. A continuación, tenemos nuestro portapapeles de copia y botones de descarga. Podemos escribir qué contenido se copia cuando haces clic en el botón, lo cual honestamente es bastante genial. Por ejemplo, si tienes un montón de código que no quieres que la gente seleccione, simplemente puede tener esto en la parte inferior. Puedes pegar este código en este botón. Al hacer clic en él, esta cosa exacta va a ser copiada, lo cual es bastante asombroso. A continuación, veamos el botón de descarga. Puedes elegir un archivo que se descargará aquí, o puedes insertar una URL, por ejemplo, PDF. También puedes, en cualquiera de estos, personalizar tu fuente, ícono y estilo. Pasemos a Mesa abierta. No tengo una cuenta de mesa abierta, pero puedes tener reservaciones hechas usando esto. A continuación tenemos la caza de productos, el evento de bifurcación, todos estos. Si los estás usando, estos podrían ser súper útiles. Pero como no lo hago, realmente no los encuentro útiles. Pero en el producto, puede seleccionar un producto que se mostrará aquí. Veamos rápidamente la bifurcación y el evento. Puedes reservar una mesa usando el tenedor. Haga que los clientes reserven una mesa usando su cuenta, la bifurcación. También puedes, comprar boletos de Event Bright si estás vendiendo boletos. Por fin veamos pegajoso y logo. Pegajoso. Puedes tener notas adhesivas y logo. Puedes insertar tu logo y es solo una imagen honestamente, pero es un logo. Y puedes elegir el nombre de la empresa, el radio en notas adhesivas. Cuando vas en vivo, la gente realmente puede escribir sus notas aquí. No está funcionando ahora mismo, no estoy seguro de por qué. A lo mejor si lo ponemos en una página real. A ver, Ahora vamos a vivir. Hm, no estoy seguro de por qué esto no está funcionando. Uh, puedes simplemente, ya sabes, agregarlo como una nota adhesiva, como decoración a tu sitio web, no importa. Perdón por casi desinformarte, te pido disculpas. Sí. Todas estas eran utilidades y ahora es el momento de que experimentemos con todos estos elementos en la personalización. 32. Unamos todo: Es hora de ponerlos a todos juntos. Volvamos al tablero y comencemos con, vamos a crear un nuevo sitio web rápido. Por ejemplo, va a ser sobre una empresa de marketing. Es Diseño Extorial. En realidad, hagamos una tienda de surf que se especialice en todo tipo de diferentes deportes de surf, desde olas hasta windsurf para citar surf y ganar foil, hacerlo colorido y vibrante pero mantener un surfista Veamos qué se le ocurre. También es un buen repaso para nosotros, ahora que ya ha terminado de generar, en realidad veamos a través de él Lo primero que veo es una imagen de fondo aleatoria que al parecer, no creo que pueda generarla. Es raro que hiciera eso. Aquí podemos ver que para el kitesurf, realidad poner en kits que no están relacionados con el kitesurf. En windsurf, puso wake boarding en surf normal, puso surf normal probablemente porque está más extendido que cualquier otra cosa, pero ese no es realmente el punto. Echemos un vistazo a los elementos que podríamos agregar para personalizar la página. Primero, quiero insertar una barra de navegación en la parte superior. Creo que quiero añadir éste. Vamos a arrastrarlo hacia arriba. Vamos a darle click aquí. Quiero agregar home on. Voy a ir a Íconos, voy a ir a Héroe. Aquí tenemos un pequeño icono, hagámoslo azul, coincide con la vibra. Hagámoslo un poco más pequeño, pongámoslo a la izquierda. Deja que el logo, no tenemos logo y queremos enlazar, no creo que realmente podamos vincular este ícono a nuestra página de inicio como quiero que lo haga. Vamos a desechar eso, pero ya tenemos nuestro encabezado , volvamos. Pongamos nuestro logo, quitemos nuestro icono. Volvamos a nuestra página de inicio. Vamos, por ejemplo, insertemos un video de Youtube sobre el surf. Quiero insertarlo para hacer esto, que sea toda la página de ancho. Vayamos a Youtube. Pasemos a Youtube y busquemos video. Simplemente copiemos este enlace e importémoslo justo aquí. Vamos a encender la reproducción automática. Ahora cuando lo previsualicemos, tenemos nuestro encabezado aquí. Tenemos nuestro video justo aquí. Volvamos. Agreguemos otra cosa. Vamos, por ejemplo, a agregar un formulario de contacto. Agreguemos un formulario. Quiero agregar un formulario tipo. Bueno, ahora quiero agregar calendly. Por ejemplo, si la tienda tiene algunos eventos que está organizando, entonces puede mostrarlos aquí mismo. Puedes elegir la cuenta calendly para conectarte. Pero vayamos también a nuestras páginas. Vayamos a nuestras secciones. Desplácese hacia abajo, agreguemos el formulario de contacto aquí. El cliente puede mantenerse en contacto si quiere. Puedes personalizar esto y elegir todos los diferentes colores para que se ajusten a tu paleta de colores. Sí, aquí acabamos de mezclar un par de elementos para darle vida a tu sitio web. Obviamente puedes agregar elementos acuerdo a tus necesidades y la forma en que quieras personalizarlo, pero esto fue solo un pequeño ejemplo para que empezaras. Te veré en el siguiente video. 33. Práctica: usa cualquier elemento: En esta práctica, utilizaremos dos elementos para mejorar nuestro sitio web que hemos ido creando a lo largo del curso. Vamos a entrar en nuestro sitio web. A ver. Lo principal que le falta seguro es un encabezado. Sigo llamándolo encabezado, pero en realidad se llama barra superior aquí. Entraré e importaré, por ejemplo, éste simplemente dando clic y arrastrándolo adentro Hagamos doble clic para entrar. Vamos a escribir Get Learn aquí. Y realmente no tenemos otras páginas. Simplemente voy a quitar esto o puedo dejar esto. Por ejemplo, sí me olvidé que tenemos un blog, creo. Sólo voy a quitar estos y dejar blog aquí. Voy a vincular esto al blog. No lo hagamos azul. Ya está claro que es un botón. Aquí está nuestro primer elemento. Si tenemos una vista previa de esto puede dar clic en Blog, y nuestro blog aparece. Así que no estoy contento con lo que sucede cuando haces clic en él. Haga clic en Vamos a hacer clic en Enlace y en Hover. Podríamos hacerlo un poco gris, nada menos, Sin subrayado No quiero eso. Vamos a previsualizarlo ahora. Se puede ver que se vuelve gris. Aquí vamos. Volvamos. Este es nuestro primer elemento. ¿Qué está pasando? No tengo idea de lo que está pasando ahora mismo. Regresa a casa. Creo que estamos atrapados. Así que vamos a recargar. Sí salvó nuestra barra superior. En cuanto al segundo elemento, veamos, en realidad quiero agregar nuestro video de Youtube. Vamos a agregarlo justo aquí. Lo agregamos a la sección. Cortemos esto y lo pongamos aquí arriba. En realidad, es un poco más pequeño. Para que podamos, eliminemos esto. En realidad, quiero hacer este lado. Vamos a hacer clic en. Tenemos nuestro video de Youtube. De hecho, vamos a optimizar esto para otras plataformas. Esta más pequeña, hazla más pequeña, haz esta blanca. Y hazlo también blanco. Cambia aquí, hazlo más pequeño, se ajusta horizontalmente. Y bájala así. Aquí vamos. Principalmente quiero centrarme en la versión de Dextop ahora mismo. Si tenemos una vista previa de esto, tenemos nuestro video aquí mismo. Un par de cosas que quiero cambiar es que quiero poner en nuestro video. Vamos a escribir, vamos a copiar esto, vincularlo aquí. Activa Reproducción automática. Perfecto. Se corta un poco aquí. Tal vez queramos ajustar eso, pero sabes que son detalles y podrías arreglarlo más tarde. Pero el punto principal era que quería agregar un video y un encabezado a mi página web, y eso lo hicimos con éxito. Esa fue nuestra práctica. Ojalá hayas disfrutado este capítulo y lo probaste por ti mismo, o seguiste junto con esta práctica. Y ojalá aprendiste algo. Te veré en el siguiente video. 34. Resumen de capítulos (cutomizaciones avanzadas): En este capítulo, analizamos la personalización avanzada y el uso de elementos para, ya sabes, personalizar tu sitio web según realmente tus necesidades. Analizamos encabezados, buscamos pies de página, y buscamos en un montón de diferentes integraciones con formularios, Google Maps, cómo agregar íconos, cómo agregar pequeños cursels, pequeñas animaciones a tu pequeñas animaciones a Y creo que ha sido muy divertido y realmente puedes personalizar tu sitio web. Por ejemplo, como lo del desplazamiento del logotipo es uno de mis favoritos. Es tan fácil de hacer, pero cuando miro diferentes sitios web, cuando estoy navegando por la web y la veo y estoy como, ¿cómo lo hicieron? Pero con Framer, en realidad es muy fácil. Y puede que no sea tan fácil, ya sabes, con diferentes plataformas como lo que fluye mechas o espacio cuadrado Y hacer animaciones como esa es un poco más difícil o como la curva de animación. Y el ejemplo de animación cómo exactamente se comportará tu animación con los elementos. Y solo para darte una idea general de la animación es realmente increíble. Y realmente no lo había visto en ningún otro lado antes, no en diseñadores web al menos. Y me parece muy, muy útil cuando intentas, ya sabes, bajar el tono de esa animación. Pero no sabes lo que pasa. Y sigues intentando cambiar los números, pero no funciona. Entonces de esta manera es realmente visible y puedes obtener el efecto correcto con solo mirar y retoques. Así que ahora era este capítulo, y en realidad agregamos un par de elementos a nuestro sitio web que hemos estado desarrollando a lo largo del curso. Y no sé si estás haciendo lo mismo, si estás desarrollando un sitio web o si estás, ya sabes, creando un montón de diferentes para cada práctica. Pero ojalá te haya sido útil y te haya sido divertido y que estés aprendiendo algo nuevo y en realidad te esté simplificando un poco el proceso Así que te veré en el siguiente capítulo donde estaremos explorando las cosas esenciales y arenosas de framer como ajustes de Ya sabes, podría ser aburrido. Como se podría decir que todo es un poco aburrido. Pero ya sabes, es lo que realmente necesitamos saber para utilizar el sitio web en todo su potencial. Y, ya sabes, algunos ajustes son esenciales para saber cuándo estás creando tu propio sitio web. Entonces veremos eso en el siguiente capítulo. Te veré ahí. 35. Introducción a los capítulos (Nitty Gritty): Así que bienvenido a nuestro próximo capítulo que es el meollo de framer, que básicamente es solo representar, ya sabes, detalles de framer que quizás no quieras mirar al Porque tú eres como, oh, hay IA. Hay como, ya sabes, una IA creando mi sitio web que, ya sabes, oh, ¿por qué necesito la configuración de la página? Pero en realidad es muy importante mirarlos. Y solo entraremos en detalle lo que puedes hacer ahí dentro, qué tipo de funcionalidades hay ahí dentro, y también algunas cosas misceláneas usando acciones para simplificar el proceso de desarrollo y acelerarlo. Y también veremos el enchufe Figma para Framer. En realidad es muy útil y debido a que Framer solía ser una herramienta de creación de prototipos, realidad es realmente interesante analizar la integración Entonces buscaremos, elegiremos algún prototipo en Figma e intentaremos importarlo en Framer Entonces te veré en el siguiente video. 36. Explora la configuración de páginas y sitios: Ahora vamos a explorar la configuración de la página y del sitio, que está aquí mismo. Aquí puedes ver un montón de cosas diferentes. la izquierda, tenemos primero la configuración del sitio y luego la configuración de la página. Comencemos con la configuración del sitio. Podemos entrar en general es donde podemos cambiar el título del sitio, establecer el idioma del sitio. También podemos agregar una descripción del sitio que ayudará a nuestro SEO. Podemos deshabilitar las animaciones de transformación y maquetación si el usuario prefiere reducir el movimiento para la accesibilidad. Aquí es donde también podemos despublicar nuestro sitio web desde todos los dominios Porque no hemos publicado esto, hay nada que despublicar Aquí es donde también se agrega un Favicon. Esta cosita se llama Favicon. Se puede ver que es framers uno en este momento. También cuando estás compartiendo por ejemplo un enlace al sitio, esta imagen aparecería, por ejemplo, en Discord, como aparece la imagen cuando envías un enlace fuera del sitio web Para que puedas configurarlo personalizado configurarlo aquí mismo. Puede agregar una protección con contraseña a su sitio web si lo desea, que está en un plan superior. También tenemos algunos ajustes avanzados como el Ural Canónico. Puede conectar su ID de Google Analytics para rastrear su, para rastrear el rendimiento de su sitio web. También puede agregar código personalizado y scripts a su sitio web. Puedes agregar alguna etiqueta de inicio de cabeza. Etiqueta de extremo de cabeza antes. Al inicio de la etiqueta corporal. Al final de la etiqueta corporal. Esto es en realidad si quieres entrar en cosas avanzadas con Framer, puedes agregar tu propio código A continuación, veamos los dominios. Nuestro dominio base en este momento serían los cursos de Codificación Creativa. Framer, quiero decir, podría cambiarlo para que me guste Yeti Learn Framer Y podríamos publicarlo en ese momento. Hagámoslo en realidad. Podemos ver que ahora está en vivo en Yetiarnframi Se puede ver que el sitio web está publicado y optimizado. También podemos agregar un dominio personalizado. Si actualizamos, realmente podemos agregar un dominio personalizado. También podemos agregar redireccionamientos. En lugar de crear una nueva página, si solo quieres redirigir, En lugar de crear una nueva página y estar como, bien, esta es la nueva página, puedes redirigir tu URL antigua a una nueva Url. También tenemos puesta en escena y versiones. Así es como haces un seguimiento de las copias de seguridad. Por ejemplo, si habilitas la puesta en escena, en realidad puedes seleccionar una versión para tu sitio web que quieras publicar. Aquí tenemos diferentes versiones. Ahora mismo sólo tenemos uno, que es escenario y vivo. A continuación podemos entrar en análisis del sitio web y se puede ver el número de visitantes únicos y total de páginas vistas y se puede ver la duración. Normalmente, si tuviéramos espectadores, esto sería como un gráfico de líneas arriba y abajo. Pero ahora mismo, porque la acabamos de publicar, no tenemos ninguna. También podemos ver las principales fuentes de visitantes de Google, Twitter, Facebook, Linton o Framer Estos se actualizarán dependiendo de dónde provengan los visitantes. También podemos ver nuestras páginas principales que están funcionando bien. Si entramos en planes, es en realidad donde puedes actualizar tu sitio web y actualizar tu sitio web personal o convertirlo en un plan de equipo. A continuación, si vamos a la configuración de la página principal, puedes cambiar el título de la página de inicio, el slug, la URL, Pero es la página de inicio, así que no la vas a cambiar Puede agregar una descripción de página. También puedes agregar una búsqueda en los motores de búsqueda. Esto se mostrará si lo buscas o puedes desactivarlo aquí nuevamente, puedes agregar una imagen de página en lugar de la imagen del sitio y también agregar algún código personalizado. La configuración es prácticamente la misma para todas tus páginas. Sí, estos fueron los ajustes de página y sitio. Ojalá tengas un poco de una comprensión clara de estos. Te veré en el siguiente video. 37. Usar acciones: En acciones para simplificar tu proceso de creación. Como puedes ver, estos son solo atajos para hacer cosas por ti. Por ejemplo, puedes escribir para navegar por páginas o buscar. Por ejemplo, podemos crear una sección. Algunas de las acciones que realmente puedes tomar son crear una página web, Crear con IA, crear un componente, puedes publicar tu sitio web. Desde aquí, puedes abrir el sitio web, podrás ver la versión de la historia o invitar a colaboradores. O puedes navegar por la biblioteca del equipo. Quiero visitar nuestra página de blog. Si pongo un slash, podemos ver las páginas del blog, por ejemplo Si entro en las páginas del blog , me lleva a este blog. Si me pongo, me lleva a los blogs. Todos los blogs que escribimos anteriormente. Honestamente, no creo que esto sea muy funcional o algo que sea popular. Yo solo quería mostrártelo porque está ahí y podría usarse si quieres. Honestamente, todo está diseñado de una manera tan amigable con la experiencia de usuario que en realidad no pensé usarlo hasta que comencé a crear este curso. Y como algo de lo que debería hablar. Sí, esto está aquí, por ejemplo, el historial de versiones. Eso podría ser útil porque no estoy seguro de dónde encontrarlo. Puedo ver todos los cambios que se hicieron en el blog, por ejemplo. Como hace 3 horas la página del blog no estaba ahí, ahora está aquí. Cambiamos las cosas de esto a esto. De hecho se pueden ver los cambios, lo cual es bastante asombroso. En realidad puedes volver a esta versión, pero seleccionando y copiando capas y pegándolas aquí Sí, este fue un video corto sobre acciones. Hazme saber, por favor, si te resulta útil esto, en realidad tengo curiosidad por escuchar tus formas de cómo tal vez encuentres casos de uso para esto. Pero honestamente, preferiría entrar en ajustes o entrar en insertar y hacer todo yo mismo porque literalmente está a solo dos clics de distancia. Sí, voy a ver en el siguiente video. 38. Plugin de Figma: En este tutorial, analizaremos integración de Figma con Framer Vamos a hacer clic en Obtener el enchufe Figma. Vamos a hacer clic en Pruébalo. Vamos a iniciar sesión con Framer. Hagamos clic en Pruébalo de nuevo. Vamos a buscar un sitio web de ejemplo que tal vez queramos importar. Vamos a encenderlo. Seleccionemos una capa para copiar. Seleccionamos una capa, ahora copiamos al portapapeles Ahora solo creamos un nuevo sitio web de diseño. Pegamos, aquí está, Tan fácil como eso. Puedes ver en la parte inferior que está subiendo desde Figma y puedes ver que nuestra capa está justo aquí De hecho, seleccionemos otra página. Seleccionemos la página de inicio. Vamos a copiar esta copia al portapapeles. Ahora solo lo pegamos. Se puede ver que todos estos elementos son totalmente personalizables. Solo tienes que importarlo, un prototipo, a un sitio web en pleno funcionamiento en tan solo 10 segundos. Todo es clicable. Puedes elegir una imagen, puedes cambiar tu texto, personalizar tus elementos. Todos estos elementos están separados. Al igual que Figma, puedes cambiar las formas. Ninguno de estos son como imágenes, pero en realidad estos son elementos que puedes cambiar. Sí, esto es bastante asombroso. Y luego puedes dar click en Publicar. Vamos a previsualizarlo. Aquí tienes un completo, sé por qué no puedo desplazarme. Volvamos por un segundo. Puede tomar algunos ajustes para que sea increíble. Por ejemplo, esta no es una forma, así que tendríamos que cambiarla a una forma real. Entrando en inserte formularios y agregando uno de los formularios aquí, agregando una sección aquí. Pero sí, esto es realmente increíble en mi opinión. Vamos a la página web y revisarla. El escritorio está aquí. Queremos tomar esto y arrastrarlo hasta aquí. 1 segundo. Casi estamos ahí para probarlo un poco más solo para que se ajuste a toda nuestra página. A ver, creo que esto es bueno. Ahora, si vamos al sitio web, ahora necesitamos primero actualizar y luego ir a la página. Ahora tenemos nuestro diseño Figma. Estos se estropearon un poco en nuestro framer y es un sitio web en pleno funcionamiento Sí, esto es bastante asombroso. Aquí tienes. Sí. Simplemente estirado. No es gran cosa. Puede hacerlo más pequeño. Ponlo aquí. Aquí vamos. Así es como integras tu figma con Framer Te veré en el siguiente video. 39. Vende plantillas de enmarcadores, parte 1: Familiarízate con Framer. Y cómo hacer las cosas en Framer. Cómo crear tu propio sitio web. Cómo incluso importar tu prototipo de Figma. Cómo personalizar tu sitio web de manera avanzada. Cómo agregar realmente, por ejemplo, una imagen, un video, un carrusel, todas esas cosas Cómo animar y cómo agregar archivos de lote. Aprendiste qué es el archivo de lote, cómo crear tu propio blog. Todo este conocimiento que tienes ahora. Sí, tal vez te estés preguntando, ¿ qué hago ahora con todo este conocimiento? ¿Cómo puedo aplicarlo? El diseño web es realmente grande en este momento y solo se está haciendo más grande día a día. Mucha gente diseña plantillas. Aquí quiero mostrarte primero la sección de plantillas. Aquí tenemos mucho botón de búsqueda para la plantilla o puedes desplazarte hacia abajo y aquí tenemos diferentes categorías de plantillas. Hay una agencia de inteligencia artificial gratuita one staff fix, pautas de marca de blog, registro de cambios comerciales comercio electrónico, etcétera Hay muchos diferentes. Echemos un vistazo a algunas de las plantillas pre sitio web. Vamos, por ejemplo, a abrir algunos en diferentes géneros. Entonces esto es como el modelaje del juego tres D. Este es un estilo muy corporativo. También abramos uno para un portafolio de fotografía. Vamos a desplazarnos hacia abajo. Aquí hay algunos pad unos y los veremos un poco más tarde. Veamos el primero , el juego como uno. A ver, es muy moderno. Mucho una tableta, tal vez. Diseño amigable. O iphone también. Como cualquier teléfono, honestamente. Aquí tenemos diferentes configuraciones del sitio web. Vamos, solo tenemos diferentes tres personajes del modelo D. Veamos, es un sitio web de NFT Collection. Podemos previsualizarlo. En realidad, vayamos a la página web. A ver, tenemos un botón de mensaje, un botón de Twitter. Tenemos el menú, y eso nos lleva aquí abajo. Aquí tenemos una pequeña animación agradable. Tenemos su Instagram, y tenemos beneficio de correo para titulares, un par de bloques de texto, algunos atributos. La sección de preguntas frecuentes de la hoja de ruta con un poco de animación, me gusta mucho esta fuente. Conoce al equipo. Tenemos el pie de página. Esto está muy bien hecho. Todos estos enlaces funcionan y nos llevan a las diferentes secciones del sitio web. Aquí tenemos una pequeña descripción del sitio web. Tenemos las características reales que se utilizan, efectos de desplazamiento, textiles, puntos de interrupción y objetivos de desplazamiento De hecho, puedes aprender sobre cada uno aquí mismo, no hay puerta que se mantenga en el marco de la comunidad. Esto se confirma oficialmente. Si vas a la plantilla, literalmente te dicen lo que usan. Así que realmente puedes intentar recrear este efecto para tu propio sitio web De hecho, también puedes aprender y no solo preguntarte cómo lo hicieron. Incluso puedes contactar con el creador de la plantilla, me he cambiado a una nueva, como si hubiéramos tenido suficiente de esa. Tenemos la lista de páginas aquí, nuevamente, la descripción. Podemos reportar esta plantilla. Podemos ver cómo funcionan las plantillas. Es un comienzo principiante para cualquiera. De hecho podemos vender nuestra plantilla. Eso es lo que estamos viendo ahora mismo. Veamos éste. También podemos previsualizarlo. Sólo un poco de inspiración para lo que voy a explicar. Sé que no he dicho mucho, pero aquí puedes desplazarte hacia abajo. Aquí hay algunas animaciones. Esto es muy bonito. Podemos hacer click en esto, también hay un poco de animación. Estos son muy agradables. Aquí tenemos un poco más como algunos íconos, algunos lista de espera. Vamos a subir, puede desplazarse hacia abajo a beneficios. Veamos el último, un sitio web de portafolio de grado de portafolio de fotografía para una agencia o si eres un individuo creativo o un profesional. En lugar de mirar las fotos, volvamos a previsualizarla. Puedo ver que estas son fotos muy bonitas, algunos casos de trabajo muy diferentes que muestran la variedad de fotos. Si hacemos clic en ellos, realidad vamos a la foto. Y una foto detallada, una información detallada de la foto cuando fue tomada. Cronología, el papel que podemos visitar el sitio web, esto es bastante asombroso. Podemos ver algunas tomas más, algunas tomas detalladas de la foto. Podemos ver aquí, podemos volver a la página principal. Podemos ir a estos enlaces. Esto es bastante asombroso. Cada una de estas puedes ver, nota lo detallada que es esta plantilla como si fueran y escribieran este texto. Pero esto es sólo una plantilla. Probablemente sea IA generada. Pero sigue siendo como si el esfuerzo estuviera ahí. No es solo como algún texto lom ipsen. En realidad se compone de una historia para la plantilla que le da un poco de vida a la plantilla misma. De hecho, tengo curiosidad por este. Una empresa de palomitas de maíz aquí. Mira eso. Una linda foto. ¿Por qué te lo digo y te estoy mostrando todas estas plantillas? Bueno, porque en realidad puedes crear tus propias plantillas con framer y venderlas. También podrías dárselos gratis. De hecho, puedes ganar dinero aún haciendo tus plantillas gratis. Obtienes un enlace de afiliado y obtienes algo de dinero de eso. Pero puedes ver que las plantillas también están aquí a la venta. Y van desde $40 $20 hasta $100 Si quieres ver lo que tiene para ofrecer por $100 veamos. Puedes pinchar aquí y nos lleva a un blog que realmente sabemos cómo crear. Volvamos. A ver, hay alguna documentación. No nos lleva a ninguna parte, Empezar, Nos lleva a los precios. Y si hacemos clic aquí, hay alguna animación muy agradable. Esto se puede ver, literalmente hemos aprendido. Y esto es literalmente solo hacer clic y arrastrar, ¿verdad? Sabes exactamente cómo crear esto. Veamos qué más. Estos son algunos menú desplegable. Esto es muy agradable. Las animaciones de flecha, pop outs aquí y algunos íconos. Pero esto es muy fácil de agregar. Puedes mirar esto y ser como, bien, bien, esto puede ser un poco desafiante, pero es factible, y esto son $100 Podemos recrear esto con lo que aprendiste, con lo que aprendiste Y puedes experimentar con, entremos. Y en realidad aún puedes desplazarte hacia abajo y ver qué han usado y aprender por ti mismo lo que han usado y recrear esta plantilla Lo que estoy tratando de decir es que puedes ganar dinero creando plantillas. ¿Cómo se hace realmente una plantilla? Observamos todo este curso. Aprendes a hacer diseño de sitios web y framer. Ahora vas a las plantillas. Te desplazas hacia abajo, Eso fue un poco demasiado. Oh, Dios mío. Hay un creador de plantillas convertido. Puedes hacer clic en Enviar una Plantilla aquí. Primero necesitas un enlace de compra de Lemon Squeeze o Gum Road. Veamos primero el exprimidor de limón. Ambas son plataformas en las que puedes vender tus cosas. Vamos a hacer clic en Comenzar gratis, Solo tienes que registrarte aquí. Vamos a inscribirnos. Una vez que te hayas registrado, recibirás un correo electrónico de confirmación. Después de eso, el enlace de ahí te llevará a esta página. Dice, Bienvenido a un socio de la junta. Ahora crea tu tienda. Vamos a darle un nombre a nuestra tienda. Por ejemplo, Artesanía. Quiero que nuestra tienda L sea Es Crafts. Artesanía. No te lo puedo decir. ¿Por qué no? Seleccionemos Nuestro País Turquía, y hagamos clic en Crear mi tienda. Se ha llevado la tienda Ul. Haré lo que todos hacen y agregaré otra carta. Ahora estás dentro de tu tienda. Necesitas completar un par de pasos para poner en marcha tu tienda. Necesitamos agregar un correo electrónico de contacto con el logotipo, y necesitamos habilitar los pagos en vivo y todas las funciones. Eso lo puedes hacer en tu propio tiempo. Solo quería mostrarte cómo registrarte y realmente iniciar sesión. Necesitas agregar tu logo, necesitas cambiar algunas cosas, pero no deberías tomar tanto tiempo. 40. Vende plantillas de enmarcadores, parte 2: Entonces ahora que exploramos un poco exprimidor de limón, en realidad quiero mostrarte Gum Road. A mí mismo me encanta Com Road. Hay muchos, muchos recursos útiles. Y miramos un poco a Gum Road cuando estábamos viendo la personalización insource y avanzada Y creo que es un gran mercado. Primero voy a hacer clic en Empezar a vender. Y una vez que estás dentro, tienes tu cuenta. Y me encanta el diseño web de Gum Road. Y aquí tengo algunas cosas que he descargado antes. Veamos, en realidad puedo tener mis propios productos. Miramos el diseño aquí. El color es simplemente genial. Tiene algunos textos alentadores también. Me encanta Gum Road. Te prometo que esto no es un anuncio, pero tu primer producto no necesita ser perfecto. Sólo ponlo ahí afuera y mira si se pega. Así que queremos hacer click en nuevo producto y ese sería un producto digital porque vamos a vender nuestra plantilla. Necesitamos el nombre del producto. Esta será plantilla, hará algunas selecciones, llenará algunas cajas y se pondrá en marcha en minutos. Mi primer producto digital de plantilla. Seleccionemos el precio. Es mi primera plantilla para sever, así que vamos a hacerla nueve dólares No creo que sea tan malo. Vamos a hacer clic en siguiente. Aquí tenemos algunas cosas más que llenar. El nombre sigue siendo editable. Se puede añadir una descripción. Aquí está mi primera plantilla Cramer. Ver a su derecha se está actualizando en vivo ya que estoy escribiendo. Disfrútalo. Podemos escribir por ejemplo, es nuestra plantilla para servicios de productos digitales no como Gum Road, pero por ejemplo, estamos vendiendo cursos en línea. Esta plantilla trata sobre los cursos en línea y su introducción. Por lo que no están vendiendo bienes digitales promocionándolos. Esta plantilla te ofrecerá a tu empresa exposición y atención en el ciberespacio. Puedes escribir lo que quieras, son gomas. Reescribe toda esta descripción con la ayuda del chat. También puedes hacerlo picante agregando una imagen. Insertando un botón, puedes contestar algún texto, ya sabes, hola mundo, ya sabes. Vamos a escribir en YouTube.Puedes agregar un botón. Así que aquí haces clic en un botón muy bonito. Esto te llevará a YouTutube.com y aquí podemos personalizar la URL Mi primera plantilla, este es el número de tienda, creo. No estoy seguro de si puedes cambiarlo, pero puedes verificarlo dos veces. Se puede cambiar la portada. Esto va a entrar aquí. Esta, por ejemplo, será la captura de pantalla de la plantilla. Ya sabes, la página principal, la página de inicio y la página principal. Esa sería tu tapadera. Mi recomendación en este correo pulgar. A lo mejor podría ser un logotipo de framer o lo que quieras, información del producto. Llamado a la acción. Se pueden tener distintas llamadas a la acción. Yo me lo quedaría. Quiero este resumen. Obtendrás una muy buena puesta aquí. Tenemos detalles adicionales donde puedes agregar atributos y valores. Por ejemplo, ya sabes, esta puede ser incluso esta descripción de las cosas que usó en framer Al igual que en la plantilla, el efecto de desplazamiento fue uno de ellos. Se puede agregar al ah, se puede ver a la derecha. Entonces a la derecha puedes ver el efecto scroll y puedes agregarle cualquier valor, MA, efecto pop up, locura y esas cosas. Sabes, puedes tener forma de ello, en mi opinión. Puedes invitar a tus clientes a círculo comunidad o a un servidor de discordia Ya no tenemos una comunidad circular, eso no es aplicable, o ellos pueden pagar lo que quieran. Podemos agregar una cantidad sugerida y una cantidad mínima que podamos cambiar. En la página anterior, podemos ofrecer variaciones del producto. Si tienes, por ejemplo, una plantilla en diferentes esquemas de color, tal vez podrías hacerlo. Pero pueden tomarlo en el framer y cambiarlo de todas formas. Pero eso realmente depende de ti en tu imaginación y podemos cambiar la cantidad, pero es un producto digital, tal vez. No hagas eso. Y monto adicional, cuánto cuesta tener este complemento o una versión diferente. Aquí tenemos algunos ajustes podemos limitar las ventas de productos, permitir a los clientes elegir una cantidad, mostrar el número de ventas, una licencia única, clave, por producto de venta como publicación. Para fines que significa impuestos especificados Política de reembolso, si quieres, puedes tener un buen descanso. Todo bien aquí, T por allá, puedes verlo aquí mismo. Política cinematográfica. Política cinematográfica ahí mismo. Y usted pasa el cursor sobre, ve este fino texto aquí mismo Podemos ingresar el contenido que no queremos vender y podemos subir aquí mismo el siguiente aquí mismo. Podemos cambiar esto. dos editores de contenido diferentes. También lo compartimos después de que hayas publicado tu producto que era chicle y ese era exprimidor de limón. Después de haber publicado su producto en exprimidor de limón o chicle bro, obtendrá un enlace para compartir que utilizará en este formulario de tipo. Para enviar tu plantilla a framer. Escribirías tu nombre, dirección de correo electrónico. No necesitas un perfil tarter, si quieres, puedes. Tu URL publicada va justo aquí y luego la envías. Después hay algunos requisitos para la plantilla y puedes ser rechazado. Pero aquí en la lista razones por las que podría ser rechazada. Si es aceptado, lo que obtienes, los beneficios están aquí, gana dinero con plantillas gratuitas como se explica también. Para que puedas ver información detallada sobre todo esto en framers, envía una página de plantilla Entonces ojalá esto fuera útil, y nos vemos pronto. 41. Descripción general de capítulos (Nitty Gritty): Entonces, en este capítulo, exploramos todos los detalles sobre Framer, algunas configuraciones de página y algunas configuraciones del sitio También exploramos el increíble enchufe Figma, que le permite importar cualquier diseño de Figma a cualquier diseño de Figma a Y en realidad se convierte, ya sabes, un sitio web completamente en capas, un sitio web en funcionamiento. Y diferencia, ya sabes, el texto de la imagen a los elementos y de hecho puedes personalizarlo todo También miramos un poco las acciones que realmente no uso, no voy a vivir, pero cómo tal vez se puede simplificar el proceso de hacer cosas en framer Y esos son algo así como atajos y cómo buscar páginas usando acción. Entonces eso es todo para este capítulo y nos vemos pronto. 42. Proyecto del curso: Entonces en esta práctica, nuestro objetivo es crear un sitio web y simplemente usar una de las técnicas avanzadas de personalización que nos faltan en el juego premies chop Siéntete libre de probarlo tú mismo y lograrlo tú mismo o venir con nosotros, pero trata de, ya sabes, cambiarlo un poco sobre la marcha. Entonces vamos a empezar con I, así que vamos a crear un nuevo sitio web y vamos a hacer clic en Kramer Y así vamos a escribir nuestra Roma justo aquí. Y pensemos. Voy a escribir esto para una marca de cuidado canino. Nuestro producto incluye para el cuidado. Mostrar el producto. Bien, probemos esto. Bien, entonces después de que haya generado nuestro sitio web, veamos. Solo necesitamos agregar un elemento, uno avanzado. Vamos a omitir el tutorial un elemento avanzado. Y estaremos listos. Me gustaría agregar Carrusel. Agreguemos los elementos al carrusel. Saquemos estos de Canvvast, tomemos el carrusel tomemos el carrusel Aquí vamos. Vamos a estirar esto un poco. Vamos a previsualizar esto. Aquí vamos. Aquí tenemos nuestro carrusel, el cual fue avanzado hábil en nuestro curso Por último, me gustaría simplemente publicarlo y nombrarlo para Po Care, por ejemplo. ¿Por qué no? Ahora nuestro sitio web está publicado y en vivo y cualquiera puede acceder a él y ver nuestro cuidado, solo vea lo que generó la IA sobre nuestra marca. Sí, eso es todo para este video.