Crea tu propio portafolio en línea sin escribir código

1. Introducción: Hola, soy Mat. Soy diseñadora y evangelista aquí en Webflow en San Francisco. Webflow es una herramienta que te faculta para diseñar y desarrollar sitios web al mismo tiempo. Corre justo en tu navegador y es 100 por ciento visual. Para que puedas construir sitios web dinámicos con respuesta sin escribir una sola línea de código. Puedes empezar a diseñar tu sitio web desde un lienzo en blanco para que no haya restricción en tu visión creada. O bien puedes partir de una plantilla y tuitear rápidamente los estilos y contenidos que se adapten a ti, tu negocio o a tu marca. Webflow también aloja un sistema de gestión de contenido totalmente visual para que puedas construir un blog único, portafolio, un sitio de ventilación, o lo que necesites, y aún así nunca pienses en código. Cuando estés listo para lanzar tu sitio web, ofrecemos alojamiento rápido, seguro y estable bajo dominio personalizado. hoy, vamos a crear un sitio web para albergar tu portafolio para que tanto si eres diseñador, escritor, fotógrafo, o todo lo anterior, puedas crear algo único para mostrar tu trabajo. Algunas de las cosas de las que estaremos hablando hoy en día son la importancia de construir una presencia en línea, por qué necesitas estar en línea y cómo puedes hacerlo sin ser desarrollador ni saber escribir código. Hoy vivimos en un mundo que se mueve tan rápido y constantemente estamos absorbiendo nueva información y haciendo cosas nuevas. Tu sitio de portafolio necesita vivir de acuerdo también con estas reglas. Antes, solíamos usar cosas como currículums de papel para hacer un seguimiento del trabajo que hemos hecho, para mostrar a los posibles clientes o personas para las que queríamos trabajar. Pero ahora, algo así simplemente no es lo suficientemente bueno. Necesitamos algo que esté en línea. Necesitamos algo que siempre esté actualizando, algo que puedas mostrar en cualquier momento a cualquier persona en cualquier lugar del planeta. Eso es lo que vamos a construir hoy. 2. Resumen del proyecto: Has decidido construir un sitio web. Eso es genial. Pero, ¿cuáles son los primeros pasos para empezar? Bueno, a veces depende del proyecto, pero muchas veces va a depender de dos preguntas simples: en cuál es el propósito de tu sitio web y en qué quieres que logre. Vamos a cubrir por qué en esas preguntas son importantes y estrategias que te ayudan a definir cuáles son esas respuestas. El proyecto de hoy es construir un sitio web personalizado totalmente receptivo desde cero sin escribir una sola línea de código. Vamos a hacer esto en un también llamado Web Flow. Pero puedes usar cualquier herramienta que quieras. Muchos de los principios que hoy vamos a aprender se pueden aplicar en cualquier parte de la web. Te voy a guiar por la construcción de este sitio aquí. Un sitio web de portafolio sencillo pero único que incluye una barra de navegación lista para móviles, mosaicos de contenido dinámicos y un pie de página sensible. También diseñaremos y construiremos esta página de detalles en la que se exhibirán nuestros artículos individuales de cartera incluyendo una imagen principal y una descripción del proyecto. El proyecto que hoy voy a mostrar es para un portafolio de diseñadores. Pero la plantilla se puede utilizar en una amplia variedad de servicios creativos como la fotografía o la escritura. Puedes acceder a esta plantilla y más yendo a webflow.com/templates. También hemos incluido un enlace a esta plantilla gratuita en la descripción del curso. Puedes acceder a estas plantillas en cualquier momento e incluso seguir junto con la plantilla ya que me muevo por el curso. Una de las cosas que hace que Web Flow sea tan único es que en realidad te está enseñando principios básicos de la web ya que estás diseñando tus propios sitios web para que todo lo que hablamos hoy y todo lo que aprendes se pueda aplicar en cualquier lugar de la web. 3. qué necesitas para empezar: Para pasar por este curso, vas a necesitar algunas herramientas básicas. Vas a necesitar una computadora con acceso a Internet. Debido a que Webflow es una herramienta en línea, una conexión a Internet va a ser crucial para que completes este proyecto. Te recomendamos usar Google Chrome y eso es lo vamos a usar para demostrar este proyecto hoy. Como mencioné antes, no se necesita ningún conocimiento previo de desarrollo para completar este curso, pero un entendimiento básico y ciertos principios web sin duda ayudarán. En la primera parte de este curso se va a estar describiendo y explicando muchos de estos principios web, para que puedas seguir más claramente, y porque gran parte de la página web que vamos a construir hoy está impulsada por contenido, tener parte de este contenido fácilmente disponible va a agilizar todo el proceso. Cosas como imágenes, contenidos, y tal vez incluso un logotipo serían útiles ya que estás siguiendo. También hemos incluido un enlace a una carpeta donde puedes encontrar todos los activos que utilicé para esta clase. Puedes seguir junto con esos activos o crear los tuyos propios. Si deseas crear tus propios activos para el sitio, ayudaría tener un software de edición de fotos como Photoshop para redimensionar, recortar y crear imágenes. Al usar imágenes en la web, es importante utilizar imágenes que sean de alta calidad para que se vean bien en dispositivos de alta definición como iPhones, pero también ser conscientes del tamaño. Subir imágenes que tengan más de 250 kilobytes de tamaño puede ralentizar tu sitio web. Por lo que es importante tratar de mantener bajos esos tamaños de archivo especialmente en un sitio como este, que estará usando mucho imágenes en el diseño. Aparte de eso, esperamos que al solo tener una computadora y acceder a los archivos que publicamos en la descripción del curso, puedas atravesar este proyecto con colores voladores, y al final, tendrás tu propio portafolio sitio web para mostrar por ello. 4. Fundamentos web: Como mencioné antes, no se requiere tener un fuerte conocimiento en desarrollo web o codificación para este curso, pero tener una comprensión básica de algunos de los principios web, creo que es crucial y plenamente comprensivo y aprovechando lo que puedes construir aquí hoy. Voy a explicar algunos de estos conceptos básicos de la web usando esta guía de diseño web visual que hemos creado aquí en Webflow. Consta de seis pasos diferentes, cada uno cubriendo un importante concepto web que aplicaremos en el curso de hoy. El primer concepto imposiblemente más importante es el del modelo de caja. El modelo de caja es la idea de pensar en los elementos web como cajas, tal y como vemos aquí con esta estructura de diseño de precios. Aquí podemos imaginar si cada elemento de nuestra página tuviera una caja invisible que lo rodeara, la idea del modelo de caja es que la web está conformada por estas cajas, y esa estructura web simplemente está agregando estas cajas dentro de otras cajas y peinándolos para agregar espacio y otros diseños para coexistir juntos de una manera agradable. En esta siguiente sección, por ejemplo, podemos mover este texto de párrafo a este bloque de precios aquí, y notar así es como funciona HTML y estructura web. Elementos se apilan uno debajo del otro o dentro de uno del otro, que es la mejor manera de construir un diseño de sitio web fluido y receptivo. Ahora, el modelo de caja es el concepto general de los elementos web y cómo funcionan juntos, pero también es importante entender los elementos individuales que estaban aquí también. Cuando se trata de estructura general, estaremos utilizando estos tres elementos principales de estructura en secciones, contenedores y columnas. Una sección ocupa el 100 por ciento del ancho de su contenedor principal, que sería la ventana del navegador si lo agregara al cuerpo. Es genial para grandes secciones horizontales de un sitio web como el que estamos viendo aquí. Un contenedor es un bloque de 960 píxeles de ancho centrado en el medio del navegador. Por lo general, la mayor parte del contenido del sitio web se agrega dentro del contenedor, para que esté centrado en el medio de nuestra página. uso de columnas es la forma más rápida de construir un diseño único del sitio web. Editar cuántas columnas quieres agregar es más fácil seleccionar nuestras columnas, y en este panel de configuración, podemos ajustar tanto el número de columnas que queremos como el ancho que son. También podemos ajustar cómo queremos que nuestras columnas responsivas se coloquen en diferentes dispositivos. Se trata de una combinación de estos tres elementos que conformarán la página web que creamos hoy. Ahora que tenemos elementos en nuestra página, el siguiente paso es darle estilo a estos elementos, y en la web, esto se hace a través de CSS, un lenguaje de codificación que nos permite agregar estilos como fuente, color, altura de línea, gradientes, fronteras, sombras, y mucho más. Aquí del lado izquierdo, tenemos un botón que tiene algún estilo adicional hecho a él donde la derecha tenemos un enlace sencillo sin estilos en él. Lo que tenemos que hacer es primero agregar una clase CSS. Una vez que lo hagamos, se nos dará acceso a una amplia variedad de opciones de estilo. Al igual que agregar espaciado interior, ajustar el color de la fuente o el tamaño de la fuente, agregar un color de fondo e incluso agregar algunas esquinas redondeadas. CSS nos faculta para diseñar en la web de una cantidad casi ilimitada de formas. Este botón sólo siendo un pequeño ejemplo de eso. Estaremos usando muchos más estilos CSS a lo largo de nuestra formación web hoy. Los estilos CSS también son más que solo colores y fuentes. De hecho, CSS es también lo que crea los diseños que usamos en la web también. El primer ejemplo aquí nos muestra cómo los atributos CSS de margen y relleno nos permiten crear el espaciado que necesitamos para nuestros elementos. relleno es el espaciado que compone el interior de un elemento donde el margen es el espaciado en el exterior. Usemos tanto el margen como el relleno en estos elementos de la derecha para que podamos hacer que coincida con los elementos de la izquierda. Primero voy a seleccionar esta envoltura externa que está sosteniendo todo el texto dentro de ella. Entonces puedo sostener Shift en mi teclado y agregar relleno en el interior de este elemento. Observe que a medida que agregamos relleno, estamos agregando espacio en el interior del elemento, creando espacio entre el borde exterior y el contenido dentro del mismo. Ahora agreguemos algún margen al texto individual con el fin de agregar espaciado adicional en la parte inferior. Añadamos tanto margen como relleno a estas etiquetas para que coincida con su pareja de la izquierda. Primero agreguemos nuestro relleno, genial, y ahora algo de margen. Perfecto. De esa manera, CSS nos ha permitido crear el espaciado en el diseño que necesitamos aquí. Otra propiedad CSS importante es la propiedad display. A los elementos web como bloques de párrafo, texto y div se les suele dar el valor de bloque de visualización, lo que significa que llena el ancho de la ventana principal y se acumula encima de los otros bloques como vemos aquí. A la derecha, veremos los mismos elementos dondequiera que estén dispuestos con la propiedad de inline-block. bloque en línea hará que el ancho del elemento ajuste al ancho del contenido dentro del mismo. Eso significa que si el contenido es lo suficientemente pequeño, se pueden apilar uno al lado del otro. Observe lo que sucede cuando cambiamos estos botones y enlaces para mostrar bloque en su lugar. Ocupan todo el ancho y se apilan uno encima del otro en lugar de uno al lado del otro, porque ahora ocupan todo el ancho de la envoltura. El siguiente tema es cubrir el de los estilos en cascada, lo que nos permite crear fácilmente una variación de elementos agregando clases adicionales encima de ellos. Podemos mostrar esto aquí con unos ejemplos de botones diferentes. Aviso a la izquierda tenemos tres botones con tres colores diferentes, y a la derecha, tenemos tres botones con el mismo color. Bueno, la razón por la que son del mismo color es porque comparten la misma clase. Observe si hacemos un solo cambio de estilo en uno de ellos, lo mismo cambia para cada uno de ellos, cual también es un enorme beneficio de CSS. Poder hacer un cambio en todo el sitio para gustar elementos muy rápidamente. Para que hagamos más cambios de estilo a estos elementos sin afectar a los demás, necesitamos agregar una clase adicional. Añadamos una clase a ésta, y luego cambiemos el color de fondo. Observe que esta vez no cambió el color para todos los botones, solo éste. Hagamos lo mismo para el siguiente. Perfecto. La última pieza de la que quiero hablar es para estilo móvil y cómo funciona CSS en todos tus diferentes dispositivos. Con el estilo CSS, los estilos solo caen en cascada hacia abajo, lo que significa que cualquier estilo que añadas a tus elementos en el escritorio seguirá también a tus dispositivos móviles. Lo mismo vale para la tableta o cualquiera de los otros dispositivos móviles. Cualquier cambio de estilo realizado caerá en cascada hacia abajo. Por ejemplo, si realizamos algún cambio de estilo en nuestras tabletas, solo bajará en cascada a nuestros dispositivos más pequeños y en este caso, anulará cualquier estilo realizado en el escritorio. También es importante tener en cuenta que los estilos no pueden traducirse hacia arriba, lo que significa que cualquier estilo que agregaría en una tableta no se traduciría hasta el escritorio, solo se traducen hacia abajo, y eso es todo. Espero que esta visión general de la web haya sido útil y que pueda brindar orientación a medida que nos abramos camino a través de este curso. Para lo que resta de este curso, no estaré buceando demasiado en temas web específicos. Vamos a escuchar cosas como el modelo de caja y otros atributos CSS que ya hemos cubierto a lo largo del curso. 5. La importancia del contenido en el diseño: En este punto, deberíamos tener una buena comprensión de cuál es nuestro contenido y cómo queremos usarlo en nuestros sitios. Debido a que gran parte de nuestro proceso de diseño va a depender de nuestros contenidos dinámicos, necesitamos pensarlo con anticipación antes de comenzar la fase de diseño, realmente perforando a casa el concepto de contenido primero. Te darás cuenta del beneficio total de este flujo de trabajo a medida que iniciamos el proceso de diseño. En Webflow, pensamos en contenido en forma de colecciones, que son simplemente grupos de contenido que se organizan juntos para formar un solo elemento como una publicación de blog. Ya he creado un puñado de colecciones aquí, pero te voy a mostrar lo fácil que es crear una propia. Empezaremos simplemente haciendo clic en el botón “Nueva colección”. Ahora, lo primero que tenemos que hacer es nombrar a nuestra colección, que es lo que más adelante se mostrará en el CMS. En este caso, estamos creando nuestra colección de proyectos. Ahora, necesitamos crear cuál será la URL para nuestros ítems individuales del proyecto. Por ejemplo, si elegimos proyectos, la URL sería www.website.com/projects/el nombre del proyecto. Ahora, necesitamos sumar nuestros campos o contenidos individuales que conformarán estos proyectos. El nombre ya está incumplido para nosotros y simplemente será el nombre del proyecto. Por lo que simplemente haremos clic en “Agregar nuevo campo” y aquí se les da una variedad de opciones diferentes, incluyendo un campo de texto sin formato, un campo de texto enriquecido, imagen , video, enlace, un campo de número, fecha y hora, interruptor, color, y opción y luego dos tipos diferentes de campos de referencia. Empecemos agregando nuestro campo de imagen. Tenemos que darle una etiqueta a este campo, que vamos a llamar imagen principal. Esta va a ser la imagen principal que utilizamos para nuestros diferentes artículos del proyecto. También podemos proporcionar texto de ayuda, el cual puede proporcionar información adicional que ayudará a guiar a cualquier usuario de CMS ya que está actualizando o cargando una nueva imagen. Después hacemos clic en “Guardar”. Añadamos ahora nuestra descripción del proyecto, que usaremos como campo de texto enriquecido y haremos clic en “Guardar”. Por último, quiero poder agregar una etiqueta a este proyecto y lo voy a hacer vinculando a otra colección que ya he creado. Puedo hacer esto usando el campo de referencia único y luego seleccionando la colección de etiquetas del proyecto que ya he creado. Ahora, que tengamos todos los campos que queremos, podemos crear nuestra colección. Al principio, no habrá ningún elemento en él, pero fácilmente podemos agregarlos haciendo clic en el botón “Nuevo proyecto”. Ahora, todo lo que necesitamos es llenar los campos individuales con el contenido de uno de nuestros proyectos, que ya he guardado. Este proyecto se llama Sketched Designs. Podemos subir nuestra imagen principal desde mi escritorio, y luego voy a pegar en algún contenido que funcionará como nuestra descripción para el proyecto, y por último, para la etiqueta del proyecto, voy a seleccionar branding. Ahí lo tenemos. Ahora, que tenemos algún contenido en su lugar, podemos comenzar el proceso de diseño de nuestra página de inicio. 6. Sección de héroe y navegación: Ahora que tenemos toda nuestra configuración de contenido e hicimos un breve resumen de algunos de nuestros principios básicos de diseño web, ahora vamos a entrar y replicar construyendo esta página de inicio que he construido aquí que solo consiste en una sencilla sección de héroes, seguido de cinco fichas diferentes que vemos abajo, incluyendo un sobre azulejo, últimos proyectos azulejo que saca esta imagen de tu último proyecto, últimas entradas, que va a sacar la última imagen de post blog, un contrate me enlace, y luego cuatro enlaces de redes sociales. También construiremos un pie de página que estará en todo el sitio. Para diseñar esto, vamos a construir esto visualmente en nuestra herramienta Web Flow, y cuando miramos aquí, vamos a ver que estamos empezando con un lienzo en blanco. Aquí no hay nada. Entonces vamos a construir toda esta página desde cero. Ahora, vamos a empezar a usar algunos de nuestros fundamentos básicos que aprendimos en el video anterior pero voy a tratar de educarte a medida que vamos. Ahora, lo primero que queremos hacer es agregar en una sección para nuestra sección de héroes. Entonces voy a ir al panel Agregar y luego arrastrar en una sección. Ahora lo primero que queremos hacer después de agregar elementos es darles un estilo para que podamos atribuirles estilos y clases. En este caso, vamos a darle a esto una sección de clase de héroe, y vamos a añadir algo de relleno en la parte superior y la inferior solo para que podamos tener un poco de espacio. Sigamos adelante y agreguemos nuestra imagen de fondo, que nos va a ayudar a llenar este espacio. Entonces si me desplazo hacia abajo a nuestra sección de fondo, voy a sacar esto de nuestros activos que ya tenemos, y voy a usar esta imagen aquí. Notarás ahora mismo que la imagen es bastante grande por lo que no puede caber del todo. Entonces vamos a usar este atributo de portada que puedo seleccionar, y voy a arreglar esto en el medio. Ahí vamos. Ahora para que aumentemos el tamaño de esto, no voy a añadir una altura. En cambio voy a empezar a agregar algún contenido. Si sigo adelante y si vuelvo a agregar panel y luego desplácese hacia abajo hasta nuestra barra de navegación, puedo arrastrar en la barra de navegación. En realidad voy a arrastrarlo justo a la sección de héroes. En este caso, quiero dar nuestra clase de barra de navegación, llamémoslo nav, y empecemos a darle estilo. Primero quiero agregar un poco de relleno en el interior. También quiero cambiar el color de fondo a este color claro, transparente para que quede claro en lugar de ese gris. También quiero que esto quede absolutamente posicionado en la parte superior de la página. En este caso puedo elegir top, y notaremos que está en la parte superior. Ahora una cosa que hice fue añadir un poco de espacio extra en la parte superior también, solo para empujarlo ligeramente hacia abajo. Ahora tenemos la base de nuestra navegación. Necesitamos agregar y darle estilo a algunos enlaces adicionales así como agregar nuestro logo. Para el logotipo, todo lo que hice fue simplemente tomar un bloque de texto y arrastrarlo a esta marca, y luego puedo darle una clase a este libro de texto, llamémoslo nuestro texto del logotipo, y podemos empezar a darle estilo. Cambiemos el color a blanco. Vamos a aumentar el tamaño, y vamos a añadir en nuestros textos. Ahí estamos. adicionalmente puedo darle estilo a esto hasta que esté contento con ello. Sigamos adelante y solo aumentemos un poco más el tamaño, también las alturas de línea. Ahora lo que hice fue añadir una clase adicional en una etiqueta. Por lo que simplemente puedo atrevirlo. Ahí vamos. Ahora lo que necesito hacer es centrarlo para que esté en línea con los enlaces que tenemos aquí. Pero tal vez antes de hacer eso, sigamos adelante y peinemos también nuestros vínculos. Voy a dar click en este primer enlace y luego ir a una clase. Añadamos una clase para cada uno de estos. Entonces tenemos nav link, y ajustemos el color. Hagámoslo todo gorras. Voy a seguir con esta fuente, que es la fuente que tenemos en nuestro cuerpo, y también voy a aumentar un kerning en medio. Ahí vamos. Entonces ese es nuestro enlace. Pero ten en cuenta que los otros enlaces no han seguido. Eso se debe a que aún necesitamos agregar la clase, así que sigamos adelante y tecleemos nuestra clase y seleccionarla. Notaremos que estos estilos se van a llevar. Ahí vamos. Sigamos adelante y agreguemos los enlaces restantes que tenemos, y podemos empezar a agregar el texto. Entonces tenemos nuestra casa, teníamos nuestro portafolio, tenemos una página Acerca, y tenemos nuestro blog, y luego sí tenemos un botón de contacto, que va a ser una clase ligeramente diferente. Entonces de nuevo, voy a copiar esto, que puedo hacer en mi teclado, y luego voy a agregar el texto para contacto. Entonces aquí, voy a añadir una clase adicional que nos va a ayudar adicionalmente a darle estilo. Adelante y tecleemos contacto. Entonces aquí, podemos hacer cosas como ajustar el color de fondo. Yo quiero hacer este blanco con una ligera opacidad, y luego también quiero disminuir el relleno que tenemos ahí que estaba morado. Hagámoslo 10, y también queremos que se mantenga centrado con sus enlaces, así que voy a añadir algún margen en la parte superior. Ahí vamos. Voy a disminuir el tamaño de la fuente, así como disminuir un poco esta altura de línea. Ahí vamos. También teníamos algunas esquinas redondeadas, apenas ligeramente. Por lo tanto, agrega un radio de cuarto redondeado de dos píxeles. Ahí vamos. Creo que también había algún margen adicional en el lado izquierdo, así que puedo agregar, vamos a hacer 30 pixeles. Genial. Nos estamos acercando. Adelante y ajustemos estos enlaces de navegación un poco más. Voy a disminuir el tamaño. Nuevamente, esta es la belleza de usar una herramienta que ya está en la web. En realidad podemos previsualizar esto tanto como queramos por este enlace de vista previa y en realidad ver lo que estamos construyendo en el entorno real en el que se publicará. Con nuestros textos de logotipo, recuerda, quería centrarlo solo un poco así que voy a añadir algún margen en la parte superior, y podemos ajustar esto hasta que se sienta bien. Eso se ve bien. Ahora tenemos nuestro logo y nuestra barra de navegación en la parte superior de la página. También necesitamos añadir nuestro texto de héroe, que simplemente puedo arrastrar. Voy a arrastrar en un rumbo, y este fue nuestro H1. Yo quiero hacer algunos cambios adicionales. Todos nuestros H1s van a seguir el mismo estilo y están centrados. Vamos a cambiar el color a blanco. También quiero hacer esto todo gorras. Disminuirá el tamaño sólo un poco. El texto que estaba aquí, puedo seguir adelante y escribir esto, y ahí vamos. Ahora puedo hacer los ajustes que quiera. Usando el relleno, puedo ajustarme para agregar un poco de espacio adicional. Aviso porque ya tenemos algún relleno en la parte inferior, está ajustando la altura de este contenedor a medida que avanzamos. Vamos a añadir un poco más porque en realidad vamos a estar agregando nuestro contenedor debajo de esto, y se va a mover hacia arriba a esta sección. Pero de nuevo, la belleza de hacerlo en la web es que podemos iterar a medida que avanzamos. Voy a dejar la sección de héroes así por ahora. Adelante y pasemos a nuestra siguiente sección. 7. mosaicos de la página dinámica: Voy a arrastrar en una nueva sección, simplemente arrastrarlo a nuestro cuerpo. Nuevamente, quiero darle una clase adicional. Llamemos a esto solo nuestra clase de sección. Entonces aquí, puedo agregar algo de relleno, y esta va a ser la sección que usamos a través de nuestros sitios. A mí me gusta armar eso primero. Entonces también voy a añadir una clase adicional porque en este caso no queremos ningún relleno en la parte superior. Adelante y sí lo sepamos. Solo llamemos a esto nuestra sección superior. Entonces en este caso, no queremos tener ningún relleno en la parte superior. Sigamos adelante y sumamos en nuestro contenedor, así que solo puedo hacer clic y nuestro contenedor se agrega, y si miramos hacia atrás a nuestro producto final, vamos, notaremos que el contenedor se mueve hacia arriba sobre esta sección de héroes. Vamos a seguir adelante y darle una clase a este contenedor. Llamemos a esto nuestro contenedor de héroes, y vamos a subirlo. Para hacer eso, necesitamos tenerlo posicionado relativo para que podamos obtener aquí estas flechas de posición, y sigamos adelante y escalarlo hacia arriba. Probemos con 70 píxeles, y nos aseguraremos de darle un color de fondo. Ahí vamos. También hay algo de relleno adicional en el interior. Hagamos cinco píxeles. Ahí estamos. Ahora tenemos este contenedor que se está moviendo hacia arriba a nuestra sección de héroes. Ahora necesitamos agregar el contenido que va dentro de él. Si recuerdas, tenemos las cinco fichas. Cada uno de ellos es de tamaño ligeramente diferente, siendo los tres inferiores tres tercios. Vamos a seguir adelante y sumar nuestra primera. Pero lo primero que quiero hacer es en realidad agregar un Bloque Div, que va a envolver todo ese contenido, y luego quiero agregar en mi sobre widgets o mi sobre azulejo. Ahora que tenemos un Bloque Div, sigamos adelante y le demos una clase. Lo que voy a hacer con estas clases, es en realidad nombrarlas en función de los tamaños que van a ocupar en este contenedor. en este caso, este es nuestro bloque 60, y va a ocupar un 60 por ciento de ancho, y la altura va a ser de 300 píxeles. Ahí vamos. Ahora, dentro de este bloque es donde tenemos nuestra imagen y el envoltorio que se va a utilizar en todas nuestras diferentes fichas. En este caso, vamos a arrastrar en un Bloque Div adicional, que está golpeando a casa el hecho del modelo de caja de cajas dentro de otras cajas, agregando elementos dentro de otros elementos. En esta clase, vamos a dar es nuestro azulejo de héroe, y vamos a asegurarnos de que sea relativo, y te diré por qué en tan solo un momento, y tiene una altura de 100 por ciento. Observe que va a llenar ese contenedor de 60 bloques en el que lo ponemos. Ahora, dentro de este azulejo héroe, tenemos nuestra imagen, así como el texto que está etiquetando el azulejo. Voy a arrastrar en un Bloque Div más para la imagen. Llamemos a esto nuestra imagen de azulejo. Entonces aquí lo que quiero, es quiero que se posicione absolutos, razón por la cual tuvimos que tener el envoltorio anterior es relativo, y quiero que esté lleno con las alturas de 100 por ciento. Ahora notando de nuevo, está cubriendo toda la imagen, sigamos adelante y tomemos el fondo, y vamos a seleccionar esta imagen aquí. Ahí vamos. Esa es la imagen que queríamos, y luego superpuesta en la parte superior es donde tenemos nuestro texto. Voy a volver una vez más a nuestro panel de agregar y luego arrastrar en un bloque de texto, y quiero que esto esté en nuestro azulejo de héroe. Llamaremos a esto nuestro texto de héroe o lo siento, hagamos texto de azulejo. Vamos a aumentar el tamaño primero, vamos a seguir adelante y cambiar el color de la fuente, y quiero aumentar el tamaño de este texto. Esto también se va a posicionar absoluto. Queremos moverlo a esta esquina inferior izquierda. Observe que se está traduciendo ahí, pero ahora mismo está detrás de la imagen. Usemos aquí nuestro índice z, que lo va a mover al frente, así que ahora obtenemos una mejor vista. Sigamos adelante y tecleemos el texto final antes de empezar a peinarlo. En este caso, tenemos sobre mí mismo es lo que va a ser el texto. Vamos a seguir adelante y darle estilo para que se vea similar a lo que tenemos al final. El texto es un poco más grande. Cambiemos la altura de la línea. Se trata de un texto en negrita para que podamos ajustarlo para que sea ultra audaz. Entonces también lo tenemos como todas las gorras. Entonces podemos ajustar el tamaño ahora que lo tenemos un poco más grande. Ahí vamos. Otra cosa que tenemos que hacer es ajustar la posición. Ahora mismo lo tenemos anclado a la esquina inferior izquierda, vamos a seguir adelante y moverlo y moverlo hacia arriba. Hagamos en realidad 30 y 30. Ahí vamos. Otra cosa que hicimos fue un estilo adicional en este texto fue agregar una sombra tecnológica, y podemos agregar esto yendo a nuestra sombra tecnológica, y podemos ajustar la opacidad solo para que no sea tan audaz, y esto ayudará a que aparezca sobre el imágenes que tenemos. Ahí vamos. Ese es nuestro sobre azulejo. Ahora, la belleza de lo que les voy a mostrar aquí también va a estar duplicando el trabajo que ya hemos hecho. En este caso, quiero duplicar todo este objeto o bloque 60, y lo voy a duplicar una vez más. Voy a usar copiar y pegar, y se va a pegar aquí abajo por ahora, pero eso es porque esto está ocupando 60 por ciento, y si los sumamos juntos, haría 120, esto es 100 por ciento de ancho. Adelante y ajustemos este bloque de 60 aquí a una clase diferente por completo. En este caso, vamos a usar el bloque 40, y el ancho va a ser del 40 por ciento, y también queremos esta foto a la izquierda y posición relativa. Sigamos adelante y también flotemos esto a la izquierda, asegurémonos de que ambos estén flotando hacia la izquierda, y lo están. Fantástico. Otra cosa que nos olvidamos de hacer es agregar la altura. Aviso en este momento no hay alturas. Entonces aquí podemos hacer 300 pixeles, y notar ahora que estamos viendo el producto final. Se ven muy similares. Observe que el del lado derecho sigue siendo apenas el 40 por ciento, el de la izquierda es de 60 por ciento. Ahora, en nuestro producto final, en realidad agregamos un poco de separación entre las diferentes imágenes. Adelante y agreguemos un poco de relleno. Si vamos a nuestro panel aquí por nuestro azulejo de héroe, sigamos adelante y agregamos algo de relleno. En realidad lo agreguemos a nuestros diferentes bloques. El bloque 60 y 40, sigamos adelante y sigamos a nuestro estilo y manteniendo el turno en mi teclado, voy a añadir cinco píxeles extra en cada lado. Yo quiero hacer lo mismo aquí. Si hago clic en estos elementos, puedo usar estos atajos aquí abajo e ir a mi cuadra 40, y voy a hacer lo mismo. Sigamos adelante y sumamos cinco píxeles por cada lado. Ahí vamos. Ese es el lado superior. También tenemos los tres elementos en la parte inferior, y de nuevo, voy a duplicar exactamente el mismo proceso. Voy a tomar este bloque 40 y usar comandos teclado CMI y luego Comando V, y voy a pegar uno más para que aquí podamos ajustar la diferente clase. En lugar de la cuadra 40, voy a cambiar esto si no has adivinado ya a una manzana 33. En este caso lo estamos dividiendo en tercios y vamos a seguir el mismo patrón. Queremos que flote a la izquierda. Queremos cambiar el ancho a 33.33 por ciento con una altura de 300 píxeles. Ahí vamos. Ahora necesitamos duplicar esto dos veces más para un total de tres. Adelante y hagamos Comando C, Comando V. Genial. Al igual que lo hicimos antes, sumemos nuestro relleno cada lado para que tengamos los cinco píxeles. Ahí vamos, así que estamos llegando a algún lugar. Ahora solo necesitamos actualizar todos los contenidos para que coincida y luego también, cambiar estos iconos sociales aquí. Entonces en lugar de la imagen, vamos a sumar cuatro iconos sociales. Adelante y empecemos por cambiar el texto. En este caso, tengo mis últimos proyectos. Aquí abajo, tengo mis últimos posts. Entonces me he contratado. Entonces por aquí, vamos a cambiar eso, así que sólo voy a borrar el texto por ahora. Cambiemos algunas de las imágenes que tenemos aquí. Recuerda lo que dije antes, los últimos proyectos y posts en realidad van a sacar de nuestras últimas entradas de blog y los últimos proyectos a medida que los agreguemos. Rápidamente, solo actualicemos aquí nuestra imagen de azulejo, que va a ser nuestra contratada, así que voy a añadir una clase adicional y puedo intercambiar esta foto de fondo. Ahí vamos. Ahora, para estos, va a ser ligeramente diferente, lo que tenemos que hacer es agregar nuestros datos dinámicos para que sepa de dónde sacar y actualizar la imagen de fondo para nosotros. En este caso, sigamos adelante y volvamos a nuestro panel Agregar. Voy a tomar los contenidos de nuestra lista dinámica y quiero arrastrarlo a nuestro azulejo de héroe. Yo puedo atar esto, y en este caso, tenemos nuestros proyectos y está jalando nuestros proyectos aquí. Ahora, lo que quiero hacer es cambiar para que el texto del mosaico y la imagen del mosaico estén dentro de esta lista dinámica. Entonces sigamos adelante y arrastrémoslos a nuestro elemento dinámico. Ahí vamos. Ahora que están dentro de nuestro elemento dinámico, en realidad puedo tirar y usar contenido desde dentro de él. En este caso, puedo ir a nuestra imagen de mosaico y puedo seleccionar para obtener imagen de fondo de nuestra imagen principal. Aviso ya está tirando de nuestra imagen de fondo de nuestro último proyecto. Podemos comprobar esto yendo a nuestro panel de colección en el lado izquierdo, yendo a nuestros proyectos, bosquejar diseños, y ahí está la imagen. Esa es la imagen que se está metiendo. Ahora podemos hacer exactamente lo mismo para nuestros últimos posts. De nuevo, voy a seguir adelante y arrastrar en una lista dinámica y quiero arrastrarla a nuestro azulejo de héroe. Esta vez lo voy a vincular a nuestros blogs, que es una colección que ya hemos creado. Nuevamente, por eso es tan beneficioso empezar a diseñar con contenido primero, ya tienes estos activos creados para ti. Entonces por aquí voy a seguir adelante y arrastrar en nuestros diferentes elementos, nuestros textos de título, y nuestra imagen de título. Una vez más, voy a seguir adelante e ir a nuestro panel de ajustes. Necesito dar click en nuestra imagen de título y panel de ajustes y luego obtener la imagen de fondo de nuestro blog, y ahí vamos. Ahora tenemos un azulejo actualizado para cada cuatro publicaciones diferentes. Ahora lo que quiero hacer es actualizar esto aquí mismo, si vamos a nuestro producto final para ser este sistema de enlaces de cuatro cuadrantes aquí con estas diferentes cuentas de redes sociales. En este caso, voy a seguir adelante y borrar mi imagen de título para que ahora todo lo que tengo sea nuestro título de héroe. Ahora, lo que quiero hacer es agregar en cuatro bloques, voy a usar bloques de enlace, así que sigamos adelante y arrastramos en un bloque de enlaces. En este caso, quiero darle una clase que le va a permitir sentarse 1.5 del ancho y 1.5 de la altura. Adelante y sumamos primero una clase, bloque social, y quiero que el ancho sea 50 por ciento y quiero que la altura sea la mitad de lo que es la altura para estos elementos, que fue que 300 píxeles, por lo que en este caso, nosotros elegirá 150 píxeles. Sólo para que tengamos una mejor idea de lo que está pasando, sigamos adelante y escojamos nuestros colores. He guardado los colores para los iconos de redes sociales que vamos a usar, empezando por Twitter. Añadamos nuestra imagen de fondo, que en este caso, va a ser el ícono de Twitter que tengo aquí. El bello sobre las imágenes de fondo es que se llega a posicionarlas justo en el centro. Ahora mismo está embaldosado, puedo seleccionar No repetir. Entonces aumentemos el tamaño de este tipo aquí a 50 píxeles, y se va a quedar como no fijo. Ahí vamos. Ese es nuestro bloque de Twitter. Vamos a duplicar esto cuatro veces, así que Comando C, Comando V otra vez, estamos reutilizando los activos que hemos creado. En este caso, puedo seguir adelante y empezar a ajustar los colores para estos. También parece que vamos a tener que ajustar un poco el tamaño, está bien. Entonces bloque social, vamos a escribir una clase adicional para que podamos agregar estilos adicionales, como cambiar el color de fondo y ajustar el icono. En este caso, queremos que vuelvan a ser 50 píxeles. Genial. Tenemos a Pinterest por aquí. Añadamos nuestra clase adicional. Cambiemos el color de fondo, actualicemos el gráfico. Nuevamente, cambiemos el ancho para que sea de 50 píxeles. Por último, tenemos nuestra cuenta de dribble, así que sigamos adelante y sumamos una clase adicional. Intercambia el icono. Nuevamente, 50 pixels. Después cambia el color de fondo aquí. Ahora, ya casi estamos listos. Algo que notaremos es que todavía tenemos algún relleno adicional. Simplemente puedo ajustar esto para que todos estén flotando a la izquierda. De hecho, usemos nuestro bloque social original para que lo agregue a cada uno de estos elementos para que pueda flotarlo a la izquierda. Ahí vamos. Observe que sigue un poco más alto. Adelante y disminuyamos la altura hasta que sintamos que coincide, 145, eso se ve bien. Ahí vamos. Nos vemos bastante bien con nuestro diseño aquí. El último pedazo que necesitamos es agregar nuestro pie de página, que es lo que vamos a cubrir en nuestro próximo video. 8. Pila: El último pedazo que necesitamos es agregar nuestro pie de página, cual se va a sentar justo aquí en la parte inferior. De nuevo, sigamos adelante y añadamos una nueva sección, que simplemente puedo arrastrar a nuestro cuerpo, que podemos añadir aquí mismo. En este caso, quiero agregarla al fondo. Déjame cerrar algunos de estos hacia arriba, y vamos a moverlo hacia abajo. En este caso, sigamos adelante y llamemos a esto nuestro Pie de página, nuestra Sección de Pie de Página, y podemos agregar algo de espaciado adicional. Cambiemos el color de fondo aquí. Usemos un gris oscuro. Ahora, necesitamos el contenedor que va a contener nuestro contenido. Adelante y vayamos a nuestro contenedor, y arrastrémoslo a nuestra sección. Ahora, tenemos el contenedor para sostener nuestros elementos individuales. En este caso, lo que quiero hacer es arrastrar en una columna. Vamos a ajustarlo para que tengamos el logo en el lado izquierdo por aquí, y luego vamos a tener los enlaces en el lado derecho. De hecho, podemos subir y sacar algo del mismo contenido. En este caso, voy a tirar de esta marca, que si miramos en el panel Navigator, es solo el bloque de enlaces que rodea este logotipo, y desplácese hacia abajo, lo voy a agregar a nuestra columna. También quiero replicar lo que vemos aquí con nuestros enlaces de navegación. Lo que puedo hacer es simplemente ir a nuestro panel Agregar de nuevo, y arrastremos en un enlace de texto, y en este caso, podemos usar el término Nav Link para obtener la clase similar, excepto que esta vez también voy a agregar un clase adicional de Footer Link para realizar algunos cambios adicionales. Por ejemplo, queremos que floten a la derecha, y podemos añadir algo de espaciado adicional, y voy a quitar el subrayado. Nuevamente, tenemos los diferentes enlaces. Tenemos 1, 2, 3, 4, y nuestro botón Contacto, así que sigamos adelante y agreguemos eso. Contamos con uno y en jalea, quen+V, obtén todos nuestros enlaces. Uno más. Perfecto. Podemos hacer lo mismo aquí donde podemos agregar la clase adicional para Contacto, que veremos aquí mismo. Añadamos un enlace adicional o estilo adicional para que podamos centrar estos un poco más. Ahí vamos. Adelante y sumamos en el texto. Contamos con Contacto, Blog, Acerca de, Portafolio, y nuestro Enlace Home. Ahora, una cosa que no cubrimos ni siquiera con el enlace de navegación es lo fácil que es enlazar tus sitios. Ahora mismo, si vamos a nuestro panel Páginas, notaremos que aún no tenemos ninguna otra página creada, pero lo que va a poder hacer es nuestro enlace Inicio, porque eso existe, vamos a dar click en el enlace, y luego en Ajustes, tenemos nuestra Configuración de Enlace, podríamos pegar en un enlace directo legítimo a nuestros diferentes sitios, también podríamos usar una página existente en nuestro sitio, que vamos a hacer, también podemos usar un enlace directo a una sección de nuestra página, que no tenemos ninguno en esta página, un correo electrónico, o número de teléfono. Pero en este caso, vamos a usar nuestro Hogar. Observe que el color ha cambiado a azul. Eso es porque ahora estamos en estado activo. Algo que podríamos hacer es ajustar el estilo de este enlace para esta página porque estamos en la página principal. Adelante y cambiémoslo a tal vez este azul de aquí. Ahí vamos. Eso se ve bien. Ahora es sólo una llamada que estamos en la página de inicio, y lo mismo pasaría para estos enlaces si hubiéramos estado en sus páginas. Entonces esa es nuestra página de inicio. Algo que aún tenemos que hacer es asegurarnos de que funcione en todos nuestros diferentes dispositivos, que es lo que vamos a hacer a continuación. 9. Cómo hacer que nuestro sitio esté listo para móvil: Entonces esa es nuestra página de inicio. Algo que aún tenemos que hacer es asegurarnos de que funcione en todos nuestros diferentes dispositivos. Ahora en flujo web, podemos hacer esto con estos paneles aquí arriba. Ahora mismo estamos en el escritorio. Si vamos a tabletas, podemos tener una mejor idea de cómo comienza a verse el sitio y lo mismo para los otros dispositivos también. Ahora recuerda en nuestra conversación anterior, los estilos que hacemos en el escritorio van a caer en cascada hacia abajo a nuestros otros dispositivos, razón por la cual notamos que el diseño y todo es muy similar aquí como lo estaba en el escritorio. Pero si tuviéramos que hacer cambios adicionales en tablet, como por ejemplo, cambiar el tamaño del texto para que quepa en una línea, no va a cambiar el tamaño en la página de inicio. También necesitamos asegurarnos de que hemos construido nuestra barra de navegación móvil. Ahora mismo tenemos nuestro botón de menú sin clase. Démosle una clase para que podamos darle estilo. En este caso, el color se está sacando de la tipografía. Adelante y ajustemos el color ahí y podemos previsualizar cómo se ve al abrir este menú haciendo clic en el botón, yendo a nuestra configuración y presionando, Abrir. Queremos agregar algunos estilos adicionales para que podamos hacer que esto se vea un poco mejor. Vamos a seguir adelante y utilizar nuestras opciones de menú de navegación. Puedes seleccionar eso yendo a nuestro panel de estilo o panel de navegación o seleccionándolo cuando se caiga y démosle una clase. Llámalo nuestro menú de navegación y vamos a ajustarlo para que también tenga un color de fondo que sea más oscuro. Ahí vamos. Ajustemos el botón de menú. En este momento está abierto, que es una clase adicional que podemos darle estilo. Cuando está abierto, tal vez volvamos a usar ese azul. También queremos hacer algunos cambios adicionales en la longitud de nuestros contactos. Adelante y quitemos ese color de fondo. Añadamos un poco de espacio adicional en la parte inferior. Ahí vamos. Ahora tenemos toda nuestra configuración de enlaces. Podemos echar un vistazo y echar un vistazo a cómo sería esto en diferentes dispositivos. Adelante y quitemos eso. Como usted nota aquí, tenemos 20 píxeles en cada uno de estos. Vamos a emparejar con nuestros contactos aquí. Ahí vamos. Eso es turno de espera, que lo usaremos para todos los lados y eliminemos el margen superior e inferior. Entonces ahora coincide con todos los demás enlaces, y luego por último tenemos nuestro dispositivo móvil. Ahí vamos. Hemos ajustado estos en todos nuestros dispositivos para asegurarnos de que el menú móvil funcione bien, y eso se ve genial. Ahora, por último, asegurémonos de que todo lo demás se vea bien como estos azulejos y nuestro pie de página. Por aquí, esto se ve bastante bien todavía. Adelante y quitemos parte del relleno extra que tenemos en la parte inferior de esta sección, acercarlo a nuestro pie de página inferior. Realinemos estos sólo un poco, por lo que nuestros enlaces de pie de página están un poco más en líneas con el logotipo. Ajustemos el relleno en la parte superior aquí para que, esa sección de héroes sea un poco más en líneas. Estamos notando en este momento cuánta personalización conseguimos realmente con el uso de esta herramienta y poder construir esto en el navegador. Ahí vamos. Ajustemos también el relleno en los lados para que lo acerquemos a la esquina y genial. Sigamos bajando a nuestros diferentes dispositivos y todo lo que hemos cambiado en el dispositivo tablet va a pasar a estos dispositivos. Esperas que a medida que te acercas al fondo, empiece a verse igual de bien. Vamos a seguir adelante y disminuir el tamaño de estos nuevamente y moverlos a un lado un poco más. Ahí vamos. Ahora aquí estamos notando que esto está empezando a romperse sólo un poquito. Eso está bien vamos a seguir adelante y centrar algunos de estos. En este caso, siempre que tengas una clase a nuestra marca de logo de pie de página. Llamemos a esto nuestro pie de página del logo y pongámoslo para que no esté a la izquierda y centremos el texto en el medio. Hagamos lo mismo aquí abajo. En este caso, vamos a dar nuestra columna a nuestra columna de enlace de pie de página, y vamos a centrar el texto en el medio. Ahora mismo no se están centrando porque ahí están flotando. Vamos a seguir adelante y desflotarlos. Asegúrate de que todos estén sin flotar. Ahí vamos. Observe nuevamente que gran parte de este proceso es iteración. Va de ida y vuelta y agregando los ajustes necesarios para asegurarse de que todo se vea bien. Aquí arriba, sigamos adelante y aumentemos el tamaño de este texto. De nuevo, se va a romper a dos líneas sin importar. Asegurémonos de que se vea bien y ahí vamos. En este caso, no necesariamente necesito la columna para salir y pasar. Sigamos adelante y solo quites esto de nuevo al auto. Vamos a ajustar el tamaño de la sección del héroe para que encaje mejor con la página. Fantástico, así que eso se ve bien. El último dispositivo es nuestro dispositivo móvil y sigamos adelante y añadamos una sombra a esta imagen aquí. En cada uno, irá a todos cada uno y vamos a añadir una sombra de texto que ayudará al texto salir un poco sobre ese fondo más claro. Fantástico. Ahora nos estamos poniendo un poco apretados aquí abajo con estos azulejos. La belleza de usar el ancho porcentual que usamos antes es que ahora realmente podemos ajustar este ancho para ocupar el 100 por ciento de la vista en lugar de los 60, 40 y 33. Podemos usar 100 por ciento para cada uno de estos. Ahí vamos. Ahora se están llevando el 100 por ciento del ancho. Ajustemos el texto del título aquí. Ahora puede ser un poco más grande ya que tenemos un poco más de espacio. Ajustaremos las alturas de la línea y retrocedamos para que esté un poco más lejos de la esquina. Eso se ve bien arriba aquí abajo parece que tenemos un poco de descanso. Adelante y ajustemos esto para que podamos disminuir el tamaño del texto y podamos disminuir el tamaño aquí. Ese fue nuestro contacto, debes asegurarte de que lo hacemos a nuestro enlace de pie de página. De hecho, vamos a hacer el 100 por ciento y los vamos a apilar uno encima del otro. Hagamos 13 pixeles. Ahí vamos. Ahora tenemos nuestra vista móvil, y si buscamos que sean diferentes dispositivos una vez más, notaremos que todos estos se ven geniales. Perfecto. Eso somos nosotros construyendo esta página de inicio desde cero. Sigamos adelante en el siguiente video y construyamos una página de plantilla de muestra que en este caso será nuestra página de proyectos. 10. Contacto: Uno de los objetivos principales de nuestro sitio web es facilitar que un cliente prospectivo se ponga en contacto con nosotros si quisieran hacer algún trabajo. Para este proyecto, vamos a combinar el uso del diseño de interacción eficaz con un buen diseño de interfaz de usuario y diseño de maquetación, para crear un proceso efectivo para que las personas se pongan en contacto contigo. En este video, vamos a abordar encima de lo que hicimos aquí, con agregar y diseñar una página desde cero. En este caso, vamos a crear una plantilla para la colección de nuestro proyecto por aquí. Entonces va a estar tirando y usando datos y contenidos de la recolección de datos que ya hemos creado. En este caso, este ítem del proyecto aquí. Entonces lo que vamos a hacer es empezar por ir a nuestra sección o a una plantilla. Vamos a notar que tenemos una página en blanco. El artículo se muestra para nosotros aquí arriba, pero no tenemos contenido mostrado aquí abajo. Por lo que vamos a utilizar una gran cantidad de los activos que ya hemos creado, empezando por esta sección de Héroes. Entonces voy a seguir adelante y usar Comando C, o puedo usar Clic derecho y Copiar, luego volver a mis plantillas de proyectos, y puedo pegar. Ahí vamos. Voy a seguir adelante y agarrar nuestro, para volver a casa. voy a agarrar la siguiente sección, y puedo volver a usar Command C, y volver a nuestras plantillas de proyectos y pegar. Voy a eliminar este contenido aquí, así que de nuevo, tengo ese bloque div que está envolviendo todo. Ahora, solo tengo mi contenedor de héroe. Voy a seguir adelante y arrastrar en un nuevo bloque div. Entonces en este caso, sólo voy a agregar en nuestros campos de texto enriquecido, y una imagen para que empecemos. Ahí vamos. Entonces, por último, antes de empezar a añadir alguno de los contenidos, sigamos adelante y volvamos a casa y agarramos nuestro pie de página. Ahora, la razón por la que quiero mostrarles cómo hacemos el pie de página, es porque en realidad vamos a crear un símbolo a partir de él. Por lo que un símbolo permite tomar una captura de una imagen, activo o un grupo de elementos como este pie de página aquí, y luego guardarlos para ser utilizados en otro lugar. Para que podamos duplicar esto o crear un nuevo símbolo a su alrededor, lo llamaremos nuestro pie de página. Observe que ahora es un encapsulado en este verde y añadido a nuestros símbolos aquí. Entonces si volvemos a nuestra plantilla, en lugar de copiar y pegar, esta vez, simplemente voy a agregar en nuestro pie de página desde el panel de símbolos para que pueda arrastrarlo justo al fondo de la página, y si nos desplazamos aquí abajo, nosotros lo verá. Ahora la belleza de usar símbolos es que si alguna vez hiciéramos algún cambio como por ejemplo, agregar un enlace o actualizar un enlace, se actualizaría dondequiera que exista este símbolo. Por lo que no hay necesidad de dar vueltas a diferentes páginas para hacer el mismo cambio. Entonces ahora estamos pareciendo que tenemos todo el contenido en su lugar, pero quiero ajustar todo lo que vemos aquí para que se ajuste al estilo que vamos por. Entonces en un video anterior, arrastré en una lista dinámica elementos y lo vinculamos a una colección diferente para tirar de esos datos. Bueno en este caso, toda esta plantilla, está lista para sacar datos de nuestros proyectos. Entonces en este caso, simplemente puedo hacer clic en un objeto como este encabezado, y puedo elegir obtener mis textos del nombre del proyecto, y lo podemos ver ahí mismo. Voy a hacer exactamente lo mismo para la imagen de fondo en la sección Héroe, y voy a elegir la imagen principal. Yo voy a hacer lo mismo por esta imagen, ahí vamos. Entonces aquí abajo, también escribí una descripción del proyecto para cada uno de mis contenidos. Por lo que simplemente puedo vincular este texto a eso ahí. Al igual que eso, hemos creado una plantilla muy básica, pero una plantilla que está sacando datos de recolección que ya tenemos. A medida que agregamos contenidos adicionales o proyectos adicionales, crearán automáticamente esta plantilla que vemos aquí. 11. Publicación: Una vez que hayas terminado de construir tu sitio web y de agregar todos tus contenidos, ahora podemos publicarlo en vivo para que el resto del mundo lo vea. Podemos publicar nuestra página web en tan solo dos simples clics. Al igual que así, podemos ver nuestro sitio web en vivo en cualquier dispositivo. También puedes agregar un dominio personalizado para que puedas publicar directamente en tu propio sitio web. Entonces has publicado un sitio web, ¿ahora qué? Lo mejor que puedes hacer es compartirlo con el resto del mundo. Puedes usar tu red existente y enviar un correo electrónico a clientes anteriores o clientes potenciales, también puedes publicarlo en cuentas sociales como Twitter, Facebook, o Dribble. Una de las cosas más importantes que puedes hacer es llegar a clientes anteriores o personas con las que has trabajado en el pasado. El noventa por ciento o más de los clientes que obtienes en el futuro van a estar basados en referidos, basados en las recomendaciones de personas con las que ya has trabajado. También es realmente importante mantener tu sitio web actualizado y actualizarlo constantemente con información nueva sobre ti o con algunos nuevos proyectos que hayas hecho con nuevos clientes. Si has regresado los visitantes son clientes que vuelven a tu sitio días o semanas después y el contenido sigue siendo el mismo, esto puede dar la señal de que o ya no estás trabajando o continuas asumiendo nuevos trabajos. Con Webflow, es increíblemente fácil pasar por el CMS visual, que accedemos directamente a través de la propia URL de publicación. Una vez que hayamos iniciado sesión, podremos realizar los cambios que queramos directamente en la página, incluyendo editar algún texto o cambiar imágenes. Una vez que hayamos terminado, podemos ver todos nuestros cambios y publicar el contenido al instante. Si queremos agregar contenido adicional como una nueva entrada de blog, podemos hacerlo aquí también. Al igual que lo hicimos en pasos anteriores mientras se encontraba en la herramienta Webflow, actualizar contenido es tan fácil como rellenar los campos necesarios y agregar el contenido necesario, luego publicar directamente en el sitio. Lo que está pasando es que todo el contenido que hemos agregado se está colocando en el formato adecuado que hemos argumentado diseñado para el sitio web. Recuerda, actualizar tu sitio web no solo es beneficioso para propósitos SEO, sino también para animar a nuevos usuarios a que aún estés actualizando y asumiendo nuevos trabajos. 12. Resumen: Eso es todo. Hoy hemos cubierto mucho, incluyendo algunos principios básicos de web y desarrollo, así como cómo puedes actualizar fácilmente tu portafolio a través del CMS de Webflow. Todo depende de ti los siguientes pasos. Esperamos que este curso te haya ayudado a empezar con tus sitios web, pero seguir actualizándolo, compartiéndolo, y conseguir nuevos clientes está todo en tu plato. Esperamos que puedan compartir este curso, ambos con nosotros aquí en esta comunidad, pero también en cualquier otro lugar. Esperamos ver qué otras cosas nuevas que creas usando Webflow o cualquier otra herramienta. Esperamos que este curso haya sido un gran primer paso en la construcción de sus primeros sitios web. Pero también esperamos que sigas haciéndolo usando ya sea Webflow u otras herramientas de diseño web para seguir construyendo tu portafolio online y más allá.