Curso intensivo de Framer: publica tu sitio web de portafolio

1. Introduccion: Hola, bienvenidos a mi encuadre del curso Crash. Mi nombre es Jeremy Mia, y llevo diez años diseñando marcas y sitios web. Quiero mostrarte cómo puedes usarlo para crear tu propio sitio web de portafolio. Y si eres un diseñador que quiere comenzar a hacer desarrollo, entonces este es un gran curso para ti porque te voy a mostrar todos los conceptos básicos, los fundamentos, y mostrarte cómo agregar animaciones, usar estilos de tipografía Básicamente, todo lo que necesitas saber para crear sitios web no solo para ti, sino también para los clientes. Esta clase específica, será una clase corta creando un sitio web de cartera que podrás compartir digamos a los clientes donde tendremos tus piezas de cartera. Será una página de aterrizaje simple de una página, y luego tendremos una página de proyecto que crearemos. Y voy a descomponer todos los escalones. Te voy a dar mis atajos, mis plugins que me encanta usar, y darte algunos otros recursos y sitios web a los que me encanta ir en busca de inspiración. Te voy a mostrar cómo hacer que el sitio web receptivo para que funcione para móviles. Entonces sí, si eres diseñador o desarrollador que quiere aprender framer o plataforma neo sin conocer ningún código, entonces este va a ser un gran caso para ti Inscripción en la clase hoy, y vamos a quedar atrapados en la creación de un sitio web increíble. 2. Fundamentos de Framer: Entonces, para la primera lección, quiero compartir los conceptos básicos y fundamentos de Framer y cómo empezar Así que uso Framer en mi escritorio. Si estás en Mac OS, puedes descargarlo ahí o puedes usarlo en el navegador. Me gusta tenerlo abajo en mi doc, así que lo uso en mi escritorio. Y aquí está el espacio de trabajo back-end, lo llaman. Así que tiene todos tus proyectos en este espacio de trabajo. Puedes cambiar el nombre de tu espacio de trabajo si vas a la parte superior puedes ver que estás en mis espacios de trabajo Por lo que también puedes agregar un espacio de trabajo. Tal vez sea un espacio de trabajo separado para tal vez clientes o tal vez tienes un miembro del equipo que usa un espacio de trabajo separado. Se puede agregar un espacio de trabajo. También puedes crear una carpeta. Entonces tal vez tengas ciertos proyectos. Entonces, por ejemplo, puse clientes 2024 aquí, y tengo algunos sitios web de clientes aquí que he hecho. Tengo otra carpeta para plantillas gratis que descargo de, ya sabes, sitios web o la tienda Framer, y luego también tienes el archivo también Entonces, si borras algo, va a entrar aquí. Lado izquierdo, también obtuviste tu cuenta, para que puedas cambiar tu perfil. Tienes la sesión de configuración del espacio de trabajo. Si haces clic en la configuración, puedes invitar a miembros. También puedes ver tus planes. Como puedes ver, tienes permisos, y tienes fuentes, y puedes ver el nombre del espacio de trabajo. De hecho puedes cambiar eso ahí mismo, incluso puedes subir la imagen también. Entonces lo que voy a hacer es ir a la esquina superior derecha. Haga clic en Nuevo proyecto. Ahora, cuando haces eso, puedes ver en la parte superior, tienes pestañas. Entonces es muy similar a Figma o digamos Illustrator, tienes diferentes pestañas, y puedes simplemente recorrerlas igual que Ahora bien, este es tu lienzo principal o tu principal, ya sabes, plataforma de trabajo, espacio de trabajo. En el lado izquierdo, tienes menús. Entonces tienes páginas, secciones. También tienes las colecciones CMS. Tienes otros elementos como cuentas regresivas, tickers y camas, formas, iconos, cosas interactivas también, lo cual es genial Y luego una vez que vas a la parte superior izquierda, tienes el menú que conoces, archivo Editar ver herramienta. Ya sabes, pasa por eso y echa un vistazo a las cosas. También tienes lay así que tienes marcos, filas, columnas, cuadrículas, imágenes, videos, también tienes textos, tienes CMS también, y tienes enchufes integrados en framer En la parte superior, tienes el nombre de tu página. Entonces puedo llamar a este portafolio uno y va a cambiar el nombre y ya ves que estoy en el plan gratuito. Si haces clic en eso, lo llevaré a los planos. Y luego en el lado derecho, tienes quien lo está viendo. Entonces obviamente, lo estoy viendo, puedes invitar a alguien y darle solo acceso a ciertas, ya sabes, cosas como en colecciones o simplemente el diseño. Tal vez quieras limitar lo que ve el cliente, por ejemplo, puedes copiar el enlace del proyecto y enviarlo a un amigo o a un cliente, y ellos pueden copiar el diseño exacto y lo pondrá en su espacio de trabajo, lo cual es genial. Y esa es una excelente manera de transferir sitios. Eso es lo que hago cuando estoy entregando proyectos de clientes. Ahí tienes localización. Si haces clic en este ícono mundial, tienes algunas configuraciones más del sitio, así que más del tipo de SEO, como puedes ver aquí. Y solo el general tienes los favicons y la protección con contraseña, código personalizado también que puedes poner para este sitio específico Tienes el análisis o la parte superior derecha también. Obviamente, este sitio no hemos hecho nada como analítica. También tienes el botón de vista previa, para que puedas reproducir cosas, y luego también tienes el botón publicado el botón publicado cuando hayamos terminado con el diseño. Ahora, cuando hacemos clic en el diseño de nuestro sitio principal aquí, la página principal, la página de inicio. Tenemos páginas, capas y activos. Si presionas Alt uno, dos y tres, girará entre esos menús, como puedes ver. Tenemos páginas, capas y activos. Si quieres hacer una nueva página, solo tienes que hacer clic en el botón Más. Puedes crear una nueva página, una página CMS, que agregará una colección automática para ti, así como un marcador de posición que puedes editar También puedes agregar una carpeta, y puedes poner páginas dentro de carpetas, lo cual es una buena característica. Si vas a capas, puedes ver todas tus capas. Entonces tus pilas, tus formas, tus elementos, lo que sea que tengas en el diseño del sitio, estará en el panel Capas. Después en los activos, tienes componentes, estilos y código. Los estilos son similares a Figma, cómo tienes textiles, estilos de color, etcétera, igual que en Adobe Illustrator Es como tener muestras o estilos gráficos. Es similar. Es solo, la mayor parte son colores, tipografía y cosas así . tipografía y cosas así . Entonces también tienes componentes. Entonces puedes crear componentes que son solo elementos de conjunto que creas, por ejemplo, si es una barra de navegación estará en cada página Simplemente lo hace mucho más fácil, lo hace más transparente porque si haces un cambio, va a afectar dónde está todo ese componente. Además, cuando haga clic en la página, tendrás tu diseño o tus herramientas de estilo en el lado derecho. Entonces tienes layout, tienes efectos, estilo, para que podamos cambiar el color, como puedes ver, tenemos anulaciones de código y exportación también, para que puedas exportar PNGs y JPEGs, Entonces también tenemos los puntos de quiebre. Entonces eso es todo lo básico para esta lección. En la siguiente lección, vamos a crear este diseño que hice en Illustrator. Te voy a mostrar cómo hacer esto y esta sencilla landing page también para una cartera de proyectos. 3. Crear estilos: En esta lección, vamos a empezar a trabajar en la página de inicio del portafolio y crear esa sección principal de héroes. En primer lugar, tengo mi diseño en Adobe Illustrator, así que esto es lo que he creado, y he creado un diseño de 1920 píxeles. Y cualquiera de los textos y cosas que pueda editar en framer, no tengo que tener un diseño perfecto Y lo genial de framer es que se siente como si estuvieras trabajando en una herramienta de diseño como Figma o Illustrator porque las herramientas de diseño son muy similares, y solo tiene una interfaz de usuario simple para usar Entonces voy a dar click en esta barra superior, y se puede ver que dice Escritorio 1,200. Este es el punto de interrupción del escritorio. Ahora, los puntos de interrupción son básicamente cuando el tamaño del navegador alcanza una determinada resolución, el diseño cambiará Entonces, cuando encojas el punto de interrupción para decir 450 píxeles para un teléfono móvil, el diseño va a cambiar a probablemente un diseño de una sola columna Para que puedas tener múltiples puntos de interrupción. Puedes ver que puedes presionar el botón más y puedes crear un punto de interrupción de teléfono o tableta, como puedes ver Pero por ahora, sólo voy a borrar eso porque no lo necesito. Voy a dar click en él e ir a la parte superior derecha, y podemos llegar a la sección de punto de interrupción Voy a cambiar el látigo a 19, 20 pixeles, y luego la altura, tal vez podamos dejarme ir 1080 porque creo que eso es lo que era la altura Ahora tenemos este escritorio. Obviamente, haces clic y también puedes arrastrar la altura. Una de las primeras cosas que voy a hacer es crear estilos solo para ahorrarme algo de tiempo. El que estoy usando para esto es la higuera, y también tengo algunos activos. Tengo un logo y algunas de estas imágenes que ya he descargado. Y entonces tenemos este color aquí. Voy a copiar el color, ir a mis activos e ir a estilos. Ahora, dentro de los estilos puedes agregar estilos específicos para encabezados, párrafos. Tienes estilos de enlace, cotizaciones de bloques, colores y CMS. Voy a hacer un nuevo estilo de color, y voy a copiar el código hexadecimal de Illustrator, y vamos a llamar a este B negro o algo así y crear, y va a crear automáticamente una carpeta, lo cual es genial. Y entonces sólo voy a seguir adelante y copiar los códigos hex de aquí y hacer estos otros colores. Así que he seguido adelante y se puede ver que he creado cada color individual. Siempre puedes volver a estos estilos y cambiarlo y cambiará los estilos globales para todo. Entonces tengo múltiples diseños en mi página web con ese color verde, y cambio el color verde por el rojo. Va a afectar a todos aquellos objetos que tengan ese estilo aplicado a él. Vamos a hacer lo mismo para el texto. Voy a ir a enviar mensajes de texto, y voy a ir por encabezar uno. Y por encabezar uno, voy a hacer esto. Entonces higuera audaz. Entonces tengo mi rumbo aquí y veamos la higuera. Lo tienen hermoso. Entonces voy a seleccionar eso y queremos cambiar el peso a negrita. Se puede cambiar a cursiva. Tienes color, transfórmalo. Normalmente me gusta capitalizar. Tienes decoraciones, herramientas de alineación, trazo, balance y variables tipo abierto. Probablemente hayas visto estas herramientas, como en Figma, por lo que debería serte familiar Tenemos el H uno, y luego voy a ir con un párrafo y con este, higuera mediana para cuerpo y queremos ir medianos. También puedes escribir, dar click en los estilos y duplicarlo o renombrarlo. Igual que para los colores. puedes hacerlo por los colores, solo para ahorrar algo de tiempo. Entonces tenemos el cuerpo copia 23. Entonces bajemos al tamaño, y queremos cambiar esto para decir, 23. Y para el tamaño de rumbo, esto fue alrededor del doble que. Así que cambia tu talla a 80. Oh, voy a hacer otra copia del cuerpo. Podemos llamarlo lista. Entonces para esta lista, creo que es del mismo tamaño. Bien, estamos usando el mismo. Éste, negrita 20. No, para estos audaces. Entonces vamos a ir a subencabezamientos. Higuera, vamos a ir semi negrita. E incluso se le puede agregar el color, verde, y esta vez, podemos obtener como 26, y puedo arrastrar y soltar para moverlos hacia arriba para que sea más limpio. Entonces tengo mis estilos ahí, así que eso debería ahorrarme algo de tiempo. La otra cosa que me gusta hacer es arrastrar todas mis imágenes de mis carpetas y llevarlas a Framer Así que en Illustrator, por lo general solo los exporto. Presiono Control Shift OT E, te llevará a los activos, como puedes ver, y podrás exportar todos los activos a la vez. Puedo seleccionar el logotipo, hacer clic derecho y hacer clic en Cc para Exportar como un solo activo, y puedes ver que puedo traerlo aquí y luego exportarlo como JP, PNG, PDF o SVG o incluso una web P, lo cual es genial. Entonces Illustrator tiene una buena característica en Figma. Se puede hacer algo similar. exportas cuando seleccionas una imagen. Haga clic izquierdo en las imágenes y simplemente arrástralas y subirlas así como así. Solo ten en cuenta, como puedes ver, hay límites en la subida a 5 megabytes Por lo que tendrás que actualizar tu sitio o reducir los tamaños de imagen. Por lo general, voy a usar algo como topacio labs para reducir el tamaño Para que veas que tengo estas imágenes. Un enchufe rápido que me gusta usar se llama tidy. Para que puedas ver ordenado. Voy a dar click sobre esto. Y si tienes muchos íconos o muchos objetos o formas o algo así, puedes ordenarlo. Para que puedas ver este enchufe aquí. Se puede cambiar a una cuadrícula horizontal. Tú cambias de posición, haces la brecha, a lo mejor yo no 25 o algo así, y luego haces clic en ordenar, y puedes ver que pondrá todas esas imágenes en una bonita forma horizontal o si no quieres horizontal, puedes hacer una cuadrícula, como puedes ver, y simplemente cambiará eso fácilmente hacia arriba. Entonces simplemente lo hace un poco más ordenado. Ese es un complemento genial que puedes usar, que es 4. Diseño de página de inicio: Bueno, entonces voy a seguir adelante y empezar a crear el diseño que tenemos aquí mismo. Da click en él, el diseño principal, baja a mi estilo de relleno y da click en los colores, como puedes ver eso. Voy a ir a maquetación. Y lo que quiero hacer es que quiero crear un marco, como pueden ver eso. Entonces comprimo F y luego solo arrastro eso y podemos ver que tenemos un frame. Y luego la parte superior derecha, tengo mi herramienta de alineación para que pueda centrarla para asegurarme de que esté centrada. Y entonces en realidad puedes redondear la esquina como puedes ver, tiene una cosita blanca. Lo mismo es una Figma ilustrada. Se puede simplemente redondear así. O si vas al lado derecho en tus estilos, donde dice radio. Se ve que ahí la puedo cambiar, o sólo puedo redondear ciertas esquinas si quiero. Simplemente redondearlo o tal vez alrededor de 30 píxeles. Y entonces voy a cambiar el color a ese color ahí. Así que aquí tenemos la base de nuestro diseño. Ahora, dentro de esto, voy a ir a mi panel de capas, puedes ver que tienes el escritorio y luego tenemos el frame. Lo que podemos hacer es agregar una pila. Entonces puedes hacer clic derecho o podemos usar el atajo Control Enter para agregar una pila, o puedes agregar un marco. Entonces una pila es básicamente como un flexbox. Puedes manipularlo para crear columnas, y es mejor para un liger. Es lo mismo que el diseño automático, pero en términos web, usa obviamente HML y Flexbox para hacer eso Entonces voy a agregar una pila dentro del marco. Como puedes ver, también puedes arrastrar y soltar, marcos y pilas uno dentro del otro. Y dentro de esta pila, voy a convertirla en una grilla. Se puede hacer una cuadrícula con dos columnas y sólo una fila. Entonces, en el lado derecho, vaya al lado de diseño y simplemente puede cambiar entre cuadrícula como puede ver. Y entonces lo que voy a hacer es que voy a arrastrar mi imagen principal aquí. Voy a arrastrarlo así así dentro de esa pila, y ya se agregó eso en esa columna que es lo que vamos a hacer, voy a agregar el logo. Voy a ir a arrastrar el logo. Como pueden ver, podemos escalarlo arrastrando esto así Lo principal es que quieres poner las cosas dentro de stack así que quede limpio, así que voy a presionar Control Enter para agregar una pila. Este logo está en una pila ahora que podemos hacer es cambiar la posición. Entonces en la parte superior derecha, podemos ajustar la posición. Sea cual sea el objeto que esté en esa pila, va al interior de esa caja. En este caso, tenemos dos columnas. Entonces dentro de esta columna en el costado, se va a mover dentro de eso. Entonces voy a mover el stack, como pueden ver, podemos ponerlo en el centro o podemos ponerlo de lado, y queremos asegurarnos de que esté en relativo. Por lo que se relaciona con la cuadrícula padre. Entonces, sean cuales sean los ajustes que hagamos a la cuadrícula exterior, va a ajustar el logo y las imágenes dentro de esta columna o la pila. Conseguí el logo. Ahora lo que quiero hacer quiero agregar estos pequeños elementos clave E. Así que voy a que puedas presionar T para el tipo completo agregue algo de texto. Presionas T y luego haces clic izquierdo y tecleas, debería agregarlo ahí. Y voy a hacer que el texto sea blanco porque no lo puedes ver ahora mismo. Sólo voy a arrastrarlo dentro de la pila. Asegúrate en tus capas que veas, está dentro de la pila como podemos ver, y lo que quieres hacer es llevar ahí el logo del lado izquierdo. Lo que estoy dispuesto a hacer es podamos duplicar ese texto también, así que vamos a conseguir este texto. Voy a ir a Illustrator y solo copiar y pegar esto porque todo este texto está dentro de una pila. Similar a Figma, como es un diseño de orden, literalmente puedo ajustar el relleno y ver que puedo simplemente arrastrar eso, y va a ajustar ese relleno. Hacer como talla 80. Voy a hacer doble clic en el logotipo para escalar eso hacia abajo. Y lo que voy a hacer es agregar algo de relleno. Así que ve al lado derecho, haz clic en el diseño, y tenemos relleno. Voy a añadir relleno en la parte superior, así que quiero hacer click en el que se puede ver al lado de los consiguió estos dos cuadrados. Uno nos permite ajustar únicamente el tamaño de la parte superior inferior izquierda o derecha. Entonces en este caso, voy a hacer top 50 pixeles. Es un poco demasiado. A lo mejor voy a hacer 25, lo cual es genial. Entonces ahora tenemos esta pila, que es genial, distribución de cada texto. Entonces, si empiezas, lo va a llevar a la izquierda, si lo centras o centras, o podemos hacer espacio entre o espacio alrededor o espacio de manera uniforme. El juego en torno a cómo lo quieres hacer, en este caso, sólo voy a dejarlo en el centro, y luego voy a jugar con esta brecha así. Para que puedas ver el espaciado. Haga doble clic en el texto para editarlo. Así que asegúrate de editar el texto. Todo bien. Y lo que voy a hacer es bajar a los estilos, los textiles, como pueden ver, y tengo mi encabezado guardado. Tengo el encabezamiento, subtítulo, y el cuerpo, como pueden ver Entonces para esto voy a hacer el cuerpo, y necesito ajustar el liderato. Así que en realidad puedo ajustar el estilo. Si vas a continuación en los textiles, pon el mouse sobre él y ahí verás el botón de edición. Voy a dar click en eso, y lo que podemos hacer es ajustar la letra. Entonces voy a hacer la letra cero, así no es ajustar el kerning Entonces el interlineado o interlineado, si eres diseñador gráfico, puedes ver que podemos ajustar la línea así. Tengo este texto, pero no se ve exactamente como queremos. Entonces necesito seguir adelante. Voy a volver a los estilos, y voy a cambiar el color, así que aquí estamos en el color correcto. Y ¿y si quisiera simplemente personalizar este texto aquí, hacerlo un poco más pequeño? Entonces lo que podemos hacer es que puedo hacer otro estilo sobre la marcha haciendo clic en nuevo estilo en los textiles del lado derecho, y podemos decir párrafo y podemos decir cuerpo pequeño, haga clic en Editar Si haces doble clic, deberías poder cambiarle el nombre como podemos ver. Yo lo llamaré BoliSmall, haz clic en Editar y luego lo haremos más pequeño A lo mejor 18 y en vez de medio, vamos a ir regulares, a lo mejor hacer 16 así. Tenemos este texto específico con cuerpo Pequeño y este texto con cuerpo. Entonces dentro de ese mismo cuadro de texto, tenemos dos estilos diferentes funcionando. Así que es muy fácil hacer ese boom como puedes ver. Así que una vez que tengamos nuestra sección principal aquí, voy a añadir unas tres pilas más. Entonces en la pila principal aquí, tenemos el logo. Ya tenemos el proyecto, y vamos a conectarnos. Entonces en esta, voy a ir a por Capas y presionar Control Enter. Para crear otra pila, y quiero hacer lo mismo para los otros dos bloques de texto también. Ahora dentro de esta pila, sólo voy a seguir adelante y dejar caer algo de texto aquí. Y lo que quiero hacer es hacer esta pila en dirección vertical. Y voy a llevar eso a lo más alto, así como así. Fresco. Ahora podemos ver que también podemos jugar con la brecha. Pero primero, tenemos que cambiar esta pila aquí. Entonces para la altura, la voy a cambiar para llenar, y debería llenar todo este espacio en este lado de la pila principal. Entonces ahora lo que voy a hacer también, voy a seleccionar esta pila. Lo siento, quiero alinearme a la parte superior, y también solo voy a agregar un poco de relleno desde los 50 pixeles superiores, y desde la izquierda, iremos 50 pixeles igual. Lo que voy a hacer ahora es si agrego un hueco, como pueden ver, solo estoy arrastrando desde el pequeño divisor púrpura de ahí Ahora podemos ver que este texto va bajando y tenemos aquí esta bonita columna. Voy a alinear a la izquierda, por lo que el lado derecho en el panel de diseño, puede hacer clic en alinear a la izquierda. Por lo que este texto debe ir a la izquierda del cuadro o a la izquierda de la pila. Ahora voy a cambiar el estilo de este texto al subtítulo Una de las cosas interesantes, puedes hacer clic en una pila en el panel Capas y también puedes copiar el estilo. Puedes copiar el CSS, los efectos, etcétera. Para que puedas copiar todo y pegarlo en otra pila. Entonces si lo pego aquí, puedes ver que está duplicado ese mismo efecto que ya he estilizado en esa otra pila, y lo haré por el otro también Así que pegar va a pegar estilo. Hay un OV de control shortcakey. Y déjame seguir adelante y pegar ese texto ahí dentro. Y ahora puedes ver que tenemos este efecto. También puedes arrastrar así y puedes ver que no tienes que hacerlo en el panel de capas, hazlo. Entonces, genial. Ahora tenemos las tres columnas, y todas deberían estar alineadas. Obviamente, esto tiene el logo en él, por lo que la alineación estará un poco apagada. Entonces lo que podemos hacer es que podemos hacer otra pila u otra caja, y podemos definir y solo voy a alinear eso a la caja. Ahora debería ser una línea. Entonces ahora lo que quiero hacer es por los proyectos, quiero que tenga un pop up donde cuando pongas el mouse sobre él, mostrará un poco del proyecto, y cuando lo hagas clic como enlace, te llevará al proyecto P. Así que voy a convertir esto en otra pila aquí. Así que contrólala Enter. Y se puede ver que la alineación la lleva al centro. Simplemente vaya a distribuirlo y distribuirlo, cámbielo para comenzar, así entonces inicia al inicio de la pila. Déjame copiar esto. Y haz esto lo siento, hazlo una vertical, y luego podemos alinearlo a la izquierda. Y este texto, voy a cambiarlo al estilo de carrocería normal. Y para éste, voy a llamarlo páginas de sensores como uno de mis proyectos. Ahora bien, lo que realmente puedo hacer es en las capas, puedes ver, es solo un texto. Pero lo que podemos hacer ahora es que podemos convertirlo en un enlace. Entonces voy a ir a la esquina superior derecha y hacer clic en el enlace más, y podemos ponerlo en una página. Porque no tienes esa página, voy a ir 5. Interacciones y efectos: Esta diapositiva, te voy a mostrar rápidamente cómo agregar algunas interacciones de desplazamiento y animación al sitio para que se vea suave Pero eso ya lo tenemos. Ahora lo que quiero hacer es añadir un efecto de superposición. Entonces voy a ir a superposiciones, y voy a dar click en relativo, ya ves, es un popover. Voy a hacer click en eso. Y lo que puedes hacer es en este overlay, voy a ir al lado derecho, y quiero convertirlo en una imagen. Entonces voy a hacer click en el botón de relleno, en lugar del relleno, obviamente puedes hacer gradientes. Puedes hacer algunas cosas chulas ahí, pero voy a dar click en la imagen. Y entonces voy a encontrar esa imagen de mi proyecto así, que es genial. Tenemos las esquinas redondeadas ahí y lo que realmente podemos hacer. Ahora bien, si lo pruebo rápidamente, puedes ver este texto cuando ponga el mouse sobre él, va a tener esa imagen emergente, lo cual es genial. También, este texto, debido a el enlace de texto no tiene estilo, voy a dar click en el Enlace. Vaya a la parte superior en la sección de enlaces, haga clic en Editar, el estilo de enlace y podemos cambiar esto. Así que quiero ir podríamos hacerlo verde. Yo sólo voy a seguir con el color claro también porque ese es el color del texto que queremos. No queremos ningún subrayado porque creo que se ve de mal gusto En Hova sin embargo, podemos hacerla verde y creo que ya está. Si presiono Play, puedes ver que así es como se ve. Fresco. Se cambia el texto, y entonces siempre puedo volver atrás y editarlo y luego hacer la transición, hacer que sea fácil entrar y salir. Volvamos. Muy suave. Boom. Fresco. También podemos agregar un efecto Hover Si vas en el panel Efectos, haz clic en Clic Izquierdo, haz clic en él. Verás Hover Puedo hacer clic en Hover, y lo que realmente podemos hacer es que puedas cambiar la escala, puedes cambiar la opacidad Realmente depende de ti lo que quieras hacer. Puedes rotarlo, también puedes sesgarlo Si quieres. Para que puedas jugar con cualquiera de esos. Se puede compensar. Puedes agregar una sombra, y también puedes cambiar la flexibilización Entonces en vez de primavera, me gusta tenerla a gusto, y luego puedes jugar con estas barras para que sea un poco más suave. Puedes cambiar el retraso, lo que quieras, de verdad. Voy a hacer tal vez una rotación de, digamos, menos dos. Y ahora si presiono el botón de vista previa y pongo mi mouse por aquí, pueden ver que hace un poco de rotación. Hace el efecto de brillo Ha, y luego también tiene la imagen apareciendo. Entonces entonces cuando haga clic en esto, va a ir a la página de mi cartera, como pueden ver. Obviamente, aún no lo he estilizado, pero así es como vas a hacer eso Y entonces ahora todo lo que tenemos que hacer es simplemente duplicar esto, así podemos llamar a esto, ya sabes, keystone escalable Para que puedas tener algunos otros proyectos que voy a tener que poner en el CMS. Ahora, lo genial de Framer es que en realidad puedes apilar efectos uno encima del otro, así puedo agregar otro efecto Se pueden agregar bucles, arrastra, presionar. Sabes, puedes hacer un montón de cosas. Voy a volver a la superposición, y quiero hacer clic en la superposición, y se puede ver que en realidad podemos cambiar la posición de la misma. Así que en realidad puedo moverlo y también rotar Si pongo un mouse en la esquina, podemos rotar así que tal vez quieras que se vea así. Si voy a previsualizarlo, ahora pongo mi mouse sobre él, ya ves, tiene se ve diferente que antes. Sale a un lado, mientras que estos simplemente salen por debajo. Así es como personalizas el aspecto de ese pop in. Y entonces, obviamente, la superposición realidad tiene un efecto de aparecer sobre ella, así se puede ver el efecto en aparecer en la que se desvanece, o puede escalar en ya sabes, podemos cambiar la opacidad, rotarla Quiero cambiar el resorte a flexibilizar y podemos personalizarlo con facilidad de entrada y salida o de regreso Pero solo me facilita entrar y salir está bien. L es suave y funciona. Facilidad de entrada y salida. Fresco. Así que déjame volver a jugar. Se puede ver. Se puede ver cómo se acerca un poco lentamente, como si tuviera este efecto de escala Mira Es un poco lento para mi. Entonces lo que podemos hacer es hacer que el tiempo sea cero punto. Vamos 2 segundos, y después haré lo mismo para la salida también. Bien, entonces ese es 0.2 también. Así que volvamos. Entonces es un poco más rápido. Súper genial. Me encanta eso. Así que puedes tener diferentes ay a todos ellos. Oye, todo lo que tienes que hacer es entrar en cada una de estas superposiciones y simplemente cambiar la imagen Y entonces una vez más, siempre puedes simplemente copiar el efecto. Entonces si voy a copiar efectos, haga clic derecho sobre el otro, y luego iré a la otra superposición, haga clic derecho sobre eso, y queremos pegar efectos. Entonces copiará los mismos efectos, así no tengo que seguir adelante y volver a hacer lo de flexibilizar Entonces, boom, boom y boom. Para que veas que es un poco buggy. Obviamente, en el sitio publicado, no sería tan buggy. Boom, boom. Estos no tienen el hover Eso ha llegado a agregar. Fresco. Y así es como agregas ese pequeño efecto. Simplemente agrega esos pequeños detalles a tu sitio web. Al agregar animaciones, pequeñas interacciones pueden hacer una gran, gran diferencia. Ahora todo lo que tienes que hacer es copiar este texto o estas pilas en las otras columnas, y luego simplemente puedes personalizarlo de la manera que quieras. Así que hemos hecho algunas pequeñas interacciones diminutas. ¿Qué hay de agregar algunas animaciones al marco general? Lo que realmente podemos hacer, voy a seleccionar el marco principal. Y voy a bajar a efectos, y quiero ir a un PR. Entonces en una P, se puede hacer en una P en desplazamiento, capa en vista o sección en vista. Entonces, si estás desplazándote y aparece a la vista, algo sucederá, y se llevará a cabo acción o disparador Queremos que veas que se puede desvanecer. Puedo deslizarme. Voy a hacer deslizamientos desde abajo solo para mostrarte el efecto. Y quiero hacer algo de flexibilización, pero tal vez vamos a acentuar esa curva un poco más Y el tiempo va a hacer tal vez 3 segundos. Y luego voy a presionar play. Entonces ahora puedes ver que se carga, es un poco rápido así que vamos a ralentizarlo un poco. Volveremos a la flexibilización, y vamos a ir 0.5 segundos. También puedes agregar un poco de retraso, así que si agrego 1 segundo de retraso. Entonces, el tiempo es el tiempo que dura la animación, como el tiempo que tarda en completarse la animación. Y entonces el retraso es un retraso antes de que comience la animación o efecto. Entonces ahora si volvemos a la vista previa, se puede ver que es mucho más lento, pero todo se desliza hacia arriba desde abajo. Un efecto bastante simple, pero simplemente lo hace mucho más fresco. Y luego podemos seguir adelante y agregar efectos a cualquiera de las pilas. Así puedo seleccionar la pila, ir al efecto, y podemos volver a hacer una P. Y voy a copiar el efecto frame. Así que recuerda, haz clic derecho en Copiar y copiar efectos. Y luego sólo voy a agregarlos a las pilas, así podremos ir pegando efectos. Voy a ir a pegar efectos y pegar efectos. Ahora cuando jugamos, boom, puedes ver que todos aparecen. Pero lo que quiero hacer es agregar un poco de retraso en las pilas, para luego ir un poco más despacio. Entonces voy a ir a la transición. Ese puede tener un retraso de dos segundos, este, tal vez 3 segundos, como pueden ver, es diferente y este tal vez 4 segundos. Voy a pinchar presa. Y así, es realmente fácil boom, boom y boom. Fresco. Me encanta eso. Se ve genial. Están bien. Así podemos añadir algo a la imagen también, y vamos a ir a personalizar todo esto. Entonces voy a actualizar todo este texto, y luego vamos a trabajar en apenas finalizar esa cartera. 6. Colección de CMS: Las páginas y clic más. Y lo que queremos hacer es que queremos hacer una nueva página CMS. Voy a hacer clic en Agregar muestra, y debería comenzar a crear el CMS. Y aquí es donde vamos a poner todos nuestros proyectos de cartera. Entonces, cuando solo añadimos los datos al CMS, llenaremos una página con ese nuevo proyecto. Entonces voy a dar click en éste, y podemos ver todos los detalles sobre este derecho. Tienes el título, la babosa, que forma parte de la URL, la fecha, la imagen, las categorías y el contenido Obviamente podemos editar esta colección CMS. Edita los campos yendo a la parte superior. Hay un botón, una pequeña flecha. Haga clic en eso y realmente podemos cambiar estos campos, como puede ver, para que sea requerido. Puede cambiar el marcador de posición. Puedes convertirlo en un área de texto. Para que puedas ajustar todas estas categorías diferentes. También puedes hacer clic en este pequeño botón más arriba y puedes agregar campos. Entonces puede ser texto plano, podría ser una galería, un toggle, un número, archivo. También puedes hacer referencia a otros artículos. Pero no quiero ir demasiado a fondo. Por ahora, voy a dar click en comenzar y vamos llamar a este pago sentido. Voy a dar click sobre esta imagen aquí y cambiaremos la imagen. Cambia textos, también. Voy a deshacerme de este texto y luego llegar al sitio. Entonces tengo un clic publicar en el lado derecho eso está bien Y así ahora tenemos un CMS, y voy a hacer doble clic en la colección izquierda y llamarla cartera. Categoría también. No tenemos que preocuparnos. Yo sólo puedo seguir adelante y borrar esto. Debido a que se está usando en algo de esto, no va a eliminar por ahora, sino que solo podemos dejar eso. Ahora bien, si solo vuelvo, puedes ver así es como se ve realmente la página del blog de la cartera. Entonces podemos llamarlo cartera. ¿Verdad? Entonces esta es una página CMS. Y como puedes ver, al hacer clic en la página, esto es lo que le gustaría. Entonces necesitamos personalizar el diseño y hacer que se vea así. Pero voy a volver a la página principal. Ahora, lo que queremos hacer, voy a volver al enlace, y podemos poner el enlace a la cartera y a la babosa Iré al CenSap Como puedes ver, das clic en esta babosa y va a ir a cualquiera de las piezas de portafolio que hayas creado en esa colección Entonces puedo dar click en el de CensaP, que es genial. Lo que quiero hacer es, bueno, se puede ver que el texto está cortado. Lo que podemos hacer es agregar una altura mínima. Entonces me voy a ir Min Max. Aquí dice. Haga clic en este botón. Vamos a hacer click en la altura mínima. La altura mínima debe ser de al menos 25 píxeles. Entonces ese es lo mínimo que puede llegar este cuadro de texto, y así es como evitas problemas cuando las cosas escalan por ejemplo, si vas al móvil, te aseguras de que sea legible para que se mantenga en ese tamaño, el tamaño mínimo Si haces el tamaño máximo, tendrá un límite en cuanto a qué tamaño puede escalar el texto o la imagen dentro de esa estadística. 7. Diseño de páginas de portafolio: En esta lección, vamos a crear nuestra página de aterrizaje del proyecto usando las funciones de CMS en Framer Así que tenemos nuestra página de inicio, justo lo que parece. Ahora, vamos a ir a la cartera. Entonces, si haces clic en la página principal de la cartera, esta es la colección CMS. Para que puedas ver el texto aquí. Es solo el blog normal, pero no estamos tratando de crear un blog, solo queremos páginas de portafolio. Entonces voy a dar click sobre la cartera dos. Ver el icono será como esta pila de monedas tipo de cosa. Esa es la colección CMS. Pero esta página es la paga Sensei, y arriba por la parte superior izquierda, se puede ver en la sección de página, arriba en la parte superior, se puede ver que dice CenSep si hago clic en este enlace y hago clic en Keystone, cambiará a la otra Entonces para acceder al CMS, quieres ir al menú superior junto al texto y enchufar, quieres hacer clic en CMS. Y aquí tenemos dos entradas. Tenemos el proyecto Sensei Pay y luego el Keystone. Y podemos agregar un poco más. Fw, solo nos quedaremos con los dos proyectos. Voy a regresar, y una vez que hagamos un cambio en el diseño de página en el CMS, se va a aplicar al mismo diseño y a la misma capa en todos los demás proyectos nuevos que agreguemos. Voy a entrar aquí y empezar a diseñar. Entonces podría necesitar hacer algunos estilos nuevos. Voy a crear un nuevo estilo. Este H uno es oscuro, así que voy a ir a uno H, pero lo llamaré H uno blanco. Y luego para éste, voy a cambiar el color así. Los otros, podemos usar los otros estilos. Pero necesitamos hacer el diseño así. Voy a ir a la página principal, y de hecho puedo copiar el marco. Entonces voy a ir a mis capas. Voy a copiar este marco. Así que sólo voy a agarrar esta pila y traerla dentro del marco. Entonces tenemos esa capa de marco base, como puedes ver. Entonces, si quieres editar el texto antes de que actualicemos el diseño, puedes hacer doble clic y te llevará a la colección CMS abierta en la barra lateral derecha, y podemos personalizar el texto aquí. Um, y si presionas Dentro, puedes ver que actualizará eso. Obviamente, lo principal es simplemente actualizar dentro del CMS en lugar de hacerlo directamente en la página, y luego afectará esos cambios, para que puedas cambiar las imágenes, etcétera Yo solo voy a ajustar esta pila, y la voy a arrastrar solo usando las cajas, manteniéndola realmente simple. Y entonces ahora tenemos esa imagen golpeando la parte superior del diseño ahí, y no queremos que la parte inferior esté redondeada. Entonces para esta imagen, voy a ir al radio y dar click en las cuatro pequeñas líneas y sólo redondear la parte superior izquierda y la parte superior derecha. Entonces creo que es alrededor de los 25, creo. Entonces porque ya está dentro del marco ni siquiera necesitamos redondearlo. Eso se puede ver y este fondo es un poco plano, lo cual es genial. Ahora lo que voy a hacer es que ni siquiera necesitamos este texto. Yo sólo puedo borrar eso, como pueden ver. Y entonces ahora este párrafo es el líder es demasiado, así que voy a tener que ir nuevo estilo, cuerpo cuerpo medio, y sólo vamos a seleccionar el color claro. Va a subir la talla. Vamos 20 letras cero y interlineado. Iremos tal vez a cero, 1.4. Párrafo, podemos dejar eso. Y ahora también puedo eliminar esta cartera. No quiero eso ahí dentro. Y entonces ahora lo que queremos hacer es que queremos poner este contenido dentro de esta pila aquí. Y luego esta pila, queremos seleccionar la pila y la línea a la izquierda. También vamos a alinear el texto en el título y luego la fecha también. Entonces bajamos el texto y hacemos clic en una línea, y eso debería alinear todo a la izquierda ahí. Podemos ver que hay una pila abajo por la parte inferior aquí si quieres, por ejemplo, si hacemos clic en este botón aquí, te llevaremos al siguiente proyecto, como puedes ver. Entonces ya nos dieron eso. Por ahora, solo voy a Um, solo quiero bajar la opacidad para eso, dejarla ahí por ahora, o simplemente podríamos borrarla Ahora lo que quiero hacer es simplemente arrastrar esta caja, y ahora tenemos esa cosa a un lado. Tenemos que hacer un nuevo stack para el título y la fecha. Y vamos a cambiar al espacio entre. Entonces va a crear esta brecha entre esto y la fecha. Y vamos a alinear este diseño al fondo. Y ahora se puede ver que esto está en el fondo aquí, y luego queremos cambiar el crecimiento. En lugar de altura automática, podemos cambiarlo a ancho automático, y ahora está sentado en el lado derecho de esa caja o esa pila, lo siento. Entonces conseguimos la fecha. Creo que la fecha era grande, así que ilustrar veo que la talla es 44. Yo solo me desharé de los estilos ahí y luego vamos a personalizar. Vamos a ir 40 y color claro. Voy a pasar a la segunda sección de nuestra página de cartera. Ahora, lo que voy a hacer primero es que voy a seleccionar la pila de héroes, Control C, y Control Vita pegarla. Entonces voy a hacer una nueva pila presionando Control Shift Control Alt y Enter. Y voy a arrastrar esa sección de aquí dentro de la pila, también. Y esta pila, vamos a asegurarnos de que sea vertical, y luego la brecha podemos hacer 25 pixeles, así que hay un espacio entre ellos. Y obviamente, se puede ajustar la brecha para hacerla más grande. Voy a cambiar el nombre de la segunda pila a galería, y solo voy a deshacerme del texto aquí porque no necesitamos lo que voy a hacer es ir a mi CMS e ir a Editar Campos. Ahora lo que he hecho aquí es que he agregado dos galerías, así puedes presionar el botón más y puedes agregar una galería o simplemente imágenes simples. Ahora la razón por la que estoy agregando dos galerías es porque cuando vas y agregas una galería, no puedes hacer las dos columnas. No se puede atravesar la imagen a través de dos columnas. Por eso estoy haciendo dos galerías. Todo lo que vas a hacer es simplemente subir tus imágenes. Entonces solo eliges la imagen y subes eso y así tengo estos dos aquí, y luego la Galería dos estará aquí. Pero si quieres renombrar el campo, solo tienes que ir a los campos y renombrarlo aquí. Mira qué galería dos dicen dos carbones para dos columnas. Y luego voy a volver a nuestra pila aquí. Y voy a ir arriba a la derecha y dar clic en Agregar contenido. Entonces todos los campos que creaste en ese CMS, tenemos la galería de imágenes uno y la Galería dos, como puedes ver, y luego las otras secciones. Entonces voy a seguir adelante y arrastrar en la galería a esta pila. Y puedes ver que ya está sacando esas imágenes de nuestro CMS porque ya hemos subido a nuestra colección aquí. Entonces es solo extraer las imágenes de esa colección. Nosotros tenemos esto. Ahora en el lado derecho, se puede ver que son dos columnas. Puedes ver que puedo cambiarlo a una columna o dos columnas así, pero no puedes tener varias filas. Simplemente no funciona en este momento. Como puedes ver, puedes hacer auto fijo. puedes hacer un ancho fijo para, ya sabes, el diseño avanzado, pero simplemente no te da esa opción. Entonces lo que suelo hacer es que voy a tener las dos columnas para esto. Y debido a que nuestro diseño tiene dos columnas y luego una columna se extiende a través las dos necesitan tener las dos galerías Pero en el futuro, probablemente lo actualicen. Voy a ir de nuevo a Agregar Contenido, y voy a arrastrar en la columna dos, justo debajo de esa otra, como pueden ver, y traerla abajo. Yo sólo voy a ponerlo dentro. Voy a seleccionar la pila superior y hacerla vertical. Voy a simplemente expandir el marco principal, como pueden ver, y luego tenemos el diseño ahí. Y obviamente, puedo ir a la galería, y ya ves puedes ver que tenemos una columna. Y luego puedo ir a la imagen y puedo cambiarla para que quede o estirarla o tejearla. Obviamente, suele llenar obras, y solo necesito cambiar la altura a la tengo que desbloquearlo, y queremos asegurarnos de que puedas ver que la altura es una altura personalizada. Entonces solo quiero cambiar esto, como pueden ver. Yo sólo quería llenar a por ahí. Ahora bien, qué podemos hacer si vamos al CMS y decimos, ya sabes, actualizamos otras imágenes, como, vamos, por ejemplo, si cambias estas imágenes, entonces las recargará y las cargará dentro de aquí, como puedes ver También voy a disminuir la brecha aquí a 25 píxeles y la brecha en el marco principal también, así entonces tenemos todo el espacio este aspecto, el CMS. Ahora bien, si vamos a otra página como Keystone, también puedes ver algo similar Y si vas a otra página, puedes ver si no tienes nada en el CMS, no se va a cargar correctamente. Entonces si vuelvo a CMS, voy a escalable, solo recuerda asegurarte de subir tus imágenes. Ahora, por ejemplo, si solo agregamos una imagen a esa galería y yo vuelvo, puedes ver que solo va a llenar ese espacio, esa columna porque no tenemos las otras imágenes. Así que asegúrate de que cuando estableces un cierto límite, subas la cantidad correcta, para que encaje dentro del espacio para el que estás diseñando. Ahora si solo vuelvo, ahora se puede ver que está poblando ese espacio ahora Y así es como creas esta sección de galería con el CMS. 8. Pie de página: Y puedo literalmente simplemente copiar esta pila, y debería pegarla a continuación. Fresco. Tengo mi logo aquí. Dulce. Quiero agregar un botón, así que solo voy a crear una nueva pila, y es mejor solo hacer un botón usando una pila. Puedes usar la sección de botón preconstruida, pero no es la mejor cuando quieres personalizar algo. Entonces voy a llamar a este botón libro core en mi panel de capas. Y luego podemos ir a llenar y cambiarlo a un gradiente. Y luego para esto, voy a dar click en el punto y luego este puede encontrarse con la luz. Entonces será así. Y este botón, el ancho, lo vamos a hacer alrededor de 200 píxeles, y luego 100 como este radio para redondear las esquinas serán 20 Presionamos la herramienta de tipo, libro de llamada, y queremos que solo podamos ir como 25 pixeles. Cámbielo al color oscuro y cámbielo higuera y vaya medio. Tal vez vayamos semi atrevidos y podamos redondearlo, y así es como se ve. ¡Vaya! Ajusta un botón así. Fresco. Entonces tengo este botón, y ahora, lo que quiero hacer es cambiar la dirección a horizontal. Quiero traerlo dentro de esta pila de aquí. Entonces este horizontal. La pila principal puede ser vertical. Este será horizontal. Deshazte de esa pila. Había algunos elementos ahí dentro que lo estaban estropiando. Yo vamos a revisar tus capas porque algunas cosas van a estropearse. De aquí, línea a la parte inferior, poner tal vez 50 píxeles en la parte inferior, izquierda, tenemos 50. Y bien, vamos a tener 50. Así que acabamos de agregar relleno dentro de esta pila. Como pueden ver, puedo hacer esto tal vez un poco más pequeño. Fresco. Así que hemos creado este bit aquí. Obviamente, el relleno no es exactamente, pero eso está bien. Y entonces sólo podemos agregar voy a apilar. Así que solo voy a volver a casa la página de inicio, y puedo simplemente copiar una de estas pilas aquí, pegarla dentro de la pila principal así. Súper cool. Y quiero asegurarme de que también tengo el mismo acolchado. Entonces creo que fueron 50. Podemos escalar esto a la baja. También podemos ajustar el ancho será fijo. Entonces vamos a ir, sobre esto. Entonces voy a poner eso dentro de otra pila. Esa pila será horizontal. Entonces podemos pegar algunos aros, pegar en esas tres pilas, y después seleccionar la pila principal que acabo de poner estas tres pilas, y queremos cambiar la distribución al inicio para llevarla a la izquierda Y entonces ahora ya tenemos eso. Y si, entonces tenemos el pie de página. Ahora quiero presionar play. Tengo algo del texto metido. Eso está bien. Pero ya tenemos nuestra página, y luego el botón, lo que queremos hacer es hacer clic en el enlace arriba, y luego, ya sabes, y luego, ya sabes, esto puede ir al enlace de guacamayo o página principal o lo que sea Entonces puede ir a la página de inicio, por ejemplo. Y podemos agregar animaciones como hicimos antes. Puedes ver los enlaces agregados aquí. Este va a Instagram, y éste va a mi vaca cuando hago clic en esos pequeños enlaces de texto. Así que literalmente puedes hacer enlace fuera de texto, cualquier cosa realmente. Después de completar tu pie de página, te voy a mostrar cómo crear un componente. Un componente es una forma rápida de crear objetos, botones, cosas que usas de forma recurrente objetos, botones, cosas que usas más de una vez Para que puedas dar plantilla a las cosas. Ahí es cuando debes crear un componente. Entonces, por ejemplo, voy a seleccionar mi pila de pie de página principal. Puede hacer clic derecho sobre él y crear un componente. El atajo también es Control Old K. Pero queremos hacer clic en Crear componente, y queremos simplemente llamar al pie de página principal o algo sencillo que puedas recordarlo como. Y ahora tenemos un componente aquí. También tenemos esta variante, que es la variante del teléfono, como puedes ver, y una variante es solo un componente secundario donde puedes cambiar en caso de decir, un ejemplo en un teléfono, será de un tamaño diferente. Entonces tal vez quieras crear una versión diferente, o tal vez quieras tener un modo oscuro. Entonces, si hago clic en este componente, puedo bajar aquí. Y puedo crear una Ja, Ha o una versión prensada. Entonces puedes ver en el nombre dirá Ha, y tal vez algunos tendrán baja opacidad o algo así Y también podemos personalizar y crear más variantes. Entonces, si vas a la derecha, puedes ver que puedes crear otra variante. Entonces esta variante tal vez pueda tener, solo el logo por sí mismo. Y podemos llamar a esta variante tres o podríamos cambiarle el nombre de otra cosa. Podemos llamarlo variante tres, logo. La variante de teléfono, esto sería genial para un teléfono. Lo que queremos hacer es que queremos reducirlo. Tal vez vayamos a decir 450 píxeles. Es obviamente pequeño, solo ve 550 por ahora solo para mostrar un ejemplo. Lo que queremos hacer, solo queremos escalar todo hacia abajo y podríamos tener que cambiar la pila a vertical, cambiar la alineación, y luego crear el espaciado, cambiar el hueco un poco. Y deberíamos tener algo así. También puedo cambiar el relleno. Puedo disminuir el tamaño. Creo que en realidad estamos alineando el medio así. Y luego para estos, debido a que se trata de tres pilas separadas, queremos ir voticos y luego queremos aumentar eso, pero vamos a aumentar el tamaño general Entonces vamos a hacer esto. Entonces vamos a derribar esto. Y entonces si notas que las cosas están rotas, por ejemplo, como esta pila debería estar alineada. Así que solo me aseguraré de que esta pila sea una línea. Entonces voy a cambiarlo para llenar. Entonces el tamaño llenará el espacio de ancho, como se puede ver así. Y también quiero asegurarme que voy a seleccionar un stack en esta variante y luego simplemente aumentar la brecha así. Fresco. Y así ahora tenemos esta variante de teléfono. Tenemos un duplicado. Yo sólo voy a borrar eso. Entonces voy a hacer doble clic en el título y llamarlo Teléfono. Ahora tenemos el escritorio primario, tenemos el teléfono, y luego tenemos este otro. Entonces ahora, si voy a la página del portafolio, y vamos a ir a la sección de teléfono aquí, puedes ver que esta está usando la variante de escritorio. Si vas al lado derecho, puedes ver un componente estará resaltado en morado, y puedes ver que puedo ir aquí y seleccionar la variante de teléfono y debería estar usando esa. Entonces tienes esa variante. Entonces por ejemplo, si voy al escritorio y elijo esta variante, va a hacer esta con solo el logo, y si hago la del teléfono, va a hacer la del teléfono. Y obviamente, ahora mismo, no está escalando correctamente. Así que solo necesito asegurarme de que eso esté funcionando correctamente. Así que siempre puedo volver a editar la variante y asegurándome de que puedas ver que todo está configurado en fijo. Así que sólo voy a ponerlo todo a la altura. Eso debe ser relativo, relativo, relativo, y entonces este debe ser relleno y relleno también. Bien, genial. Entonces ahora si solo vuelvo, sí, debería estar funcionando correctamente. Y yo solo disminuyo el tamaño de ese logo, y se puede ver que se actualiza. En todas partes donde esté ese componente , lo va a actualizar. Es más fácil cambiar si variantes, y recomiendo crear variantes. Entonces si quieres acceder a ellos, vas a assets, entonces tienes los componentes aquí, como puedes ver, digamos, por ejemplo, el pie de página principal, y aquí también hay un botón de descarga que Freema tiene automáticamente, y solo lo arrastras y sueltas así , puedes ponerlo en cualquier lugar incluso en la página de inicio o donde quieras Si quieres tirarlo ahí en alguna parte, nosotros también podemos hacerlo. 9. Diseño responsivo para móviles: X. lección rápida, voy a mostrarte cómo hacer tu sitio sea receptivo. Tenemos nuestra página de inicio. Ahora. Lo que podamos hacer, voy a sumar un punto de interrupción y sólo vamos a hacer el teléfono básico 390 Ahora, ya se puede ver que no es la forma en que nos gustaría tenerlo. El texto va fuera de la página. Entonces lo que tenemos que hacer es cambiar la dirección de la pila a vertical, así entonces es apilar uno por uno así en lugar de apilar horizontal. Lo que voy a hacer es ir a las capas, y tener en cuenta, cualquier cambio que hagas en el punto de interrupción del teléfono o el punto de interrupción la tableta no afectará al punto de interrupción del escritorio Entonces por eso siempre empiezo con escritorio y luego hago teléfono más tarde. Porque habrá diferentes cambios. Y normalmente, cuando haces un cambio en el escritorio, caerá en cascada automáticamente a la tableta y el teléfono. Voy a seleccionar la pila principal, y la vamos a cambiar a vertical. Para que veas que todo está volteado. También puedes mover el teléfono. Puedes moverlo hacia abajo por un lado, así podemos moverlo. puedes sostener alt y shift, y se duplicará, lo cual es otro truco genial. Ve a ajustar el marco, trae eso, como puedes ver. Entonces necesito cambiar las otras pilas, también. Entonces esta pila necesita ir vertical. Uh hay unos ya son verticales y este, envoltorio de texto vertical, y yo solo voy a aumentar el tamaño. El marco general, voy a tener a este marco, voy a tener que escalar eso así. Toda esa imagen se ajusta a esa sección. Si quieres ajustar el teléfono, iré tal vez 450, hazlo un poco más grande, cambio 10. Publicación: Ahora en esta sección, te voy a mostrar cómo hacer el SEO y también publicar tu sitio web para que puedas ponerlo en marcha en el mundo. Entonces, una vez que hayas terminado con eso, puedes ir a la página de inicio o portafolio, y puedes hacer clic en Configuración. Y en la configuración, puedes ver que quieres ajustar esto antes de publicar, solo así el SEO en Google y cualquier navegador, gente está usando que los títulos y detalles de SEO van a ser correctos. Entonces podemos decir la cartera de Mirror, y la URL, podemos dejar eso porque está conectado al CMS. Quiere mostrar páginas en los motores de búsqueda, lo marcaremos. Esta es la vista previa de cómo se verá en cualquier motor de búsqueda que la gente esté usando, entonces quieres una vista previa social. 1,200 por 30 píxeles. Lo que normalmente voy a hacer es simplemente entrar en Illustrator, hacer una mesa de trabajo, 1,200 por 630, por ejemplo, sólo puedo comprobar como una imagen Lo que quiera, de verdad. Se puede hacer cualquier tipo de imagen. Yo solo guardaré eso solo para que veas la configuración. Guardándolo como JPEG al 100%. 90% de calidad está bien. Sólo guarda eso. Y ahí tienes. Solo hazlo en 2 segundos. Entonces cada vez que compartes ese enlace en las redes sociales, va a cargar esta imagen Entonces ya sabes cómo la gente obtiene la imagen cuando la subes. Y eso es básicamente todo. Después haré clic en Guardar. Y luego solo asegúrate de hacer eso por cada página. Así que la página de inicio también. Quieres cambiar tu OL, una vez hecho eso, lo que puedes hacer es Framer te dará un dominio gratis Como puedes ver, esta es la URL, lo que sería. Obviamente, puedes cambiarlo. Aquí, digamos Jeremy Mirror, diseña por ahora y presiona Enter, y luego el sitio web será este. Entonces el dominio personalizado, obviamente, si quieres actualizar un dominio, entonces tienes que comprar uno. Yo suelo usar Go Daddy. O nombre barato. Entonces tienes nombre barato. Dominios baratos es probablemente dos grandes sitios. Entonces sí, aquí tienes nombre barato. Consiguió barato hacer nombres que puedes buscar y Go Daddy, también. Tienes dominios que puedes comprar por como 20 dólares, dependiendo del nombre. Lo voy a hacer es ir arriba a la derecha, dar clic en Publicar, y puedes ver que lo actualizamos hace 23 horas, y ha habido seis cambios. Para que pueda ver los cambios aquí. Como puedes ver, solo te voy a dar un desglose rudo, te doy todo eso. Qué puedes hacer antes de publicar, si haces clic en las 23 horas, te llevaré a esta página de puesta en escena. puede ver antes de publicarlo en vivo, solo quiere comprobar todo antes de que salga completamente en vivo. Entonces puedes ver que ahí está escenificado optimizado. Y esta es la última versión. Obviamente, tienes que actualizar al plan de sitio pagado real antes de poder hacerlo. Publica ClickUDate y el sitio web ha sido actualizado. Puedo hacer clic en Abrir enlace, y como pueden ver, aquí está el sitio web que creamos, que es súper genial. Entonces voy a hacer clic en Sense pay, debería abrirse a esa página del proyecto. Fresco. Y ahí lo tenemos, y así es como lo haces. Obviamente podemos arreglar eso y lo que sea, pero vamos a hacer eso. Entonces obviamente, obtendrás la insignia del framer en la parte inferior del sitio, como puedes ver, así es como publicas tu sitio web 11. Diseñar con complementos: Si vas a la parte superior izquierda, puedes ver hay un menú de plug-ins. Quieres hacer clic en eso. Y ya tienes algunas recientes que has usado aquí. Tienes algunos destacados aquí, algunos de los populares. Y también puedes hacer clic en Arcos para ir al sitio web de Framer, y te mostraré todos los plugins actuales En realidad tienen 130, lo cual es una locura. Tienen íconos. Tienen, ya sabes, cosas de IA, imágenes, como un montón de plugins diferentes, lo cual creo que es realmente genial. Incluso puedes inyectar cosas de ecommerce como frameship. Y voy a ir a plugin y quiero buscar a Lumi Y una vez que consigas un enchufe te pondrás como una ventana Puedes moverlo en tu lienzo. Y para esta, básicamente son imágenes gratuitas, pero sí tienen un plan pro. Pero, por ejemplo, puedo hacer click izquierdo sobre una imagen. Entonces en mis capas, he seleccionado esta imagen de cubo, y tal vez quiero una diferente. Puedo dar click en Lumi, y debería inyectar esa imagen ahí mismo Obviamente, hay una marca de palabras porque no tengo la versión pro, pero es una forma muy sencilla de agregar imágenes a tu lienzo Así como así. Para que puedan ver mis imágenes, está inyectada esa imagen ahí dentro. El telar es genial porque tiene ilustraciones. Tiene tres D, tiene un montón de cosas geniales. Incluso podemos seleccionar herramientas y efectos y bajar a Duotone y podemos seleccionar nuestros propios duotones de tema de color, como A lo mejor queremos este azul con este flamenco o algo así Eso se ve bastante genial. Entonces ese es un enchufe que me encanta usar. También tienes otros con los que puedes jugar. Entonces te recomiendo, ya sabes, mirar algunos de los plug ins con los que quieres jugar. Por ejemplo, tienes este DIA que es muy divertido. Entonces tal vez voy a tener mi imagen de perfil, y quiero agregar el efecto de diferencia. Voy a hacer click en DIA y voy crear este tipo de efecto de patrón único, que, difiere la imagen, para que podamos insertar imagen. Y luego lo tenemos. Obtenemos como esta distorsión de píxeles, efecto de tramado, que es realmente genial Y obviamente podemos personalizar la pixelación. Entonces son diferentes efectos de píxel, básicamente. Puedo cambiar el brillo. Se puede jugar con la cuantificación, la resolución. Lo vamos a subir un poco. Entonces ese es un pequeño plug in divertido, también con el que me gusta jugar por ahí si quiero conseguir, como, un efecto extraño. Pfoshi también es realmente genial. Entonces, si quieres algunos íconos realmente geniales, me encanta usar fosfuro solo para obtener algunos íconos rápidos Así que solo puedes hacer clic izquierdo y lo soltará o puedes hacer clic y arrastrar, y luego puedes seleccionarlo, ir a tu relleno y cambiar el color, como puedes ver. Entonces tal vez quieras, ya sabes, color verde o lo que sea. Tienen montones Tienen rellenos, tienen tono dúo, como puedes ver, y luego simplemente cambiamos el color. Entonces es completamente gratis. Así que es simplemente impresionante smack bang, obtén algunas ideas rápidas por ahí. También tienes versión ligera. Y puedes escalarlo y rotarlos. Juega con algunos de los plug-ins. Te diré si es gratis o si se paga. Así que tenlo en mente. Aquí hay un montón de enchufes gratis. Dale una oportunidad y empieza a crear algunas cosas divertidas. 12. Conclusión: Mucho por tomar la clase. Realmente lo agradezco. Espero que hayas aprendido todo lo que necesitas para comenzar a crear sitios web framer y ojalá te dé un poco más de confianza en solo saltar y crear cosas, ¿sabes? Al igual que, no he creado demasiados proyectos, pero cuanto más creas, incluso solo jugando con plantillas, es una excelente manera de practicar y simplemente acostumbrarte a crear. Para el proyecto de clase, quiero que creen algo similar a lo que hicimos para la cartera. Puedes seguir exactamente cómo lo hice o crear algo similar con tu vibra, convertirlo en tu propio estilo personal. Por lo que el objetivo principal es simplemente crear una página de aterrizaje de una página con algunas de sus piezas de cartera. Podría ser simplemente trabajo estudiantil o proyectos falsos. Eso está totalmente bien. Y luego sube eso a la clase Skillshare y te daré comentarios lo antes posible Y si tienes otras piezas de portafolio y quieres algunos comentarios, me encantaría dar algunos comentarios al respecto. Simplemente ponga su enlace en las discusiones o en el chat. Si quieres aprender otras cosas como identidad de marca o Diseño de Logo, tengo más de 30 cursos sobre Skillshare Tengo otras 30 clases en Skillshare que puedes tomar Y si quieres algunos otros recursos, puedes ir a mi sitio web jeremymor.com o ver algunos de mis tutoriales en YouTube, puedes Muchas gracias, y nos vemos la próxima vez.