Crea un sitio web de portafolio con Squarespace

1. Introducción: Oye, soy Maya Favor y soy diseñadora de patrones de superficie de Estocolmo, Suecia. Esta es una clase para creativos que quieran hacer un sitio web de portafolio sencillo. Tu sitio web es la base de tu marketing online, y tener un sitio web bonito y funcional para presentar tu trabajo es imprescindible hoy en día. Crear un sitio web puede sentirse como una tarea enorme, pero estoy aquí para mostrarles que no necesita ser así. No necesitas pasar meses en la creación de un sitio web, realidad puedes tomarte solo unos días una vez que te lo cuentes. En esta clase, usaremos el espacio Square como plataforma para construir un sencillo sitio web de portafolio. Se basará a partir de una plantilla, pero te mostraré cómo puedes afinar y personalizar una plantilla si así lo deseas. No necesitas inscribirte en un plan de pago de Square Space para tomar esta clase ya que obtendrás 14 días de prueba cuando te inscribas, lo cual es bastante tiempo para seguir la clase y probar el espacio Square como plataforma antes de decidirte comenzar pagando por el servicio. Esta es una clase para ti que quiere aprender a crear un sitio web de portafolio sencillo. No necesitas ser conocedor de tecnología no usaremos ninguna codificación. Puedes ser un principiante completo y no necesitas ninguna experiencia previa en la creación de sitios web para tomar esta clase. 2. Lo que aprenderás: Antes de empezar con las partes prácticas de esta clase, solo quiero tomarme un momento para hablar de lo que aprenderás en esta clase, y de lo que no aprenderás. En esta clase, aprenderás a crear un sitio web de portafolio sencillo en Squarespace. Te enseñaré los pasos que debes dar, para crear tu sitio web. Pero no te voy a mostrar todo sobre Squarespace. Esta es una clase para principiantes, y por lo tanto, mantendré todo realmente sencillo, que puedas seguir adelante, sin ningún conocimiento previo sobre la creación de Sitios Web. Si quieres conocer características más avanzadas, y funciones dentro de Squarespace, cuentan con un excelente centro de ayuda con todo desde artículos, webinars, e incluso atención al cliente, vía chat, y correo electrónico que está libre de cargo. No soy un centro de apoyo de Squarespace, y por lo tanto no puedo contestar todas tus preguntas sobre Squarespace. Estoy aquí para mostrarte cómo puedes construir un sitio web de portafolio sencillo, sin codificación basada en una plantilla en Squarespace. Te mostraré un poco sobre cómo puedes modificar, y personalizar tu plantilla. Pero quiero mencionar que aunque sientas que necesitas asumir muchos sombreros en tu negocio creativo, no necesitas ser diseñador web, para crear un sitio web de portafolio muy sencillo. Está bien crear el sitio web directamente de una plantilla sin modificarla. El propósito de tu página web es mostrar lo que creas, tu fotografía de arte, o el oficio que estás haciendo. El sitio web no está hecho para mostrar tus habilidades de diseño web. Con eso dicho, creo que es importante tener un sitio web de aspecto profesional, que refleje a ti y a tu negocio. Por eso elijo el espacio cuadrado como plataforma para crear mis sitios web. Obtienes un sitio web de aspecto profesional, con todo incluido en una sola factura. Por eso siento que Squarespace es una gran herramienta. Es fácil de entender, todo está incluido, y obtendrás todo lo que necesitas dentro de una sola plataforma. Crearemos un sitio web de portafolio sencillo con tan solo unas páginas. No obstante, no vamos a crear una tienda web y una suscripciones de carta de noticias, o ir más lejos en esta clase, después las páginas básicas que necesitas en un sitio web de portafolio. No haremos ninguna codificación, ni características avanzadas en Squarespace. Esta es una clase sobre cómo crear un sitio web de portafolio de una manera rápida, y fácil. No se trata de un avanzado test de diseño web. Algo que parece común, cuando los creativos están a punto de crear sitios web, es sobrepensarlo. A lo mejor planeas meses, y cómo se supone que tiene que ver tu sitio web y de alguna manera, simplemente nunca pareces hacer que todo suceda. Bueno, estoy aquí para decirte que no hace falta que sea así. En realidad te insto a crear un sitio web de portafolio muy simple, en un proceso rápido, publicarlo y luego puedes modificarlo, y hacer cambios más adelante. Con los sitios web de portafolio personal, siento que necesitas probarlo antes de saber qué funciona. No intentes crear un sitio web realmente complejo al principio. Ve por uno simple, como el que te enseñaré a crear en esta clase. Con el tiempo, puedes hacer que tu sitio web sea más personal, y más complejo si lo deseas. 3. Tu proyecto: Tu proyecto en esta clase es crear tu propia página web de portafolio en Squarespace. Puedes compartir un enlace a tus sitios publicados, si publicas tu sitio cuando estás tomando esta clase, o puedes tomar algunas capturas de pantalla en tu sitio web de prueba y compartirlas como JPEG. 4. Haz un plan: Entonces, empecemos con hacer un plan rápido de qué incluir en tu página web. Cuando un diseñador web trabaja con un sitio web, hacen marcos de cable y diseñan todo el lado de la línea antes de que empiecen a construirlo. No vamos a trabajar así en esta clase porque tenemos plantillas prefabricadas, eso lo hará mucho más fácil y ahorrará mucho tiempo. Entonces, ¿qué vamos a planear en esta lección? Planearemos el contenido. Entonces, solo echemos un vistazo rápido a mi sitio web y a mi contenido, que tengamos algo con lo que comparar. Tengo un montón de contenido en mi página web hoy en día, ya que trabajo con muchas sucursales en mi negocio pero el primer sitio web que creé fue más como el sencillo sitio web de portafolio que vamos a crear en esta clase, entonces he agregado contenido a mi sitio web durante los años como mi negocio se expandió. Entonces para un sencillo sitio web de portafolio que crearemos en esta clase, creo que deberías tener una página de inicio, que es la página de inicio de tu sitio. Definitivamente debes tener alguna página de portafolio, esto puede ser una página de inicio o puede ser una página separada con tu portafolio. Deberías tener una página sobre y una página de contacto. En realidad son solo tres o cuatro páginas en total las que necesitas en tu sitio. En esta clase, también añadiremos un blog a tu página web, ya que estoy adivinando que muchos de ustedes quieren tener algún lugar de tu sitio web, donde puedas publicar como contenido noticioso. Para poder crear estas páginas, necesitas texto e imágenes. En primer lugar, tómate un tiempo para pensar quiénes serán los visitantes de tu sitio. ¿ Serán, por ejemplo, posibles clientes? Siempre debes apuntar tu contenido a tu grupo objetivo, así que asegúrate de que el texto que escribes y las imágenes que usas coincidan con lo que te interesa a tu grupo objetivo. Cualquier otro secreto es que nunca he hecho un plan enorme antes de empezar a construir mis sitios web. Me gusta trabajar más intuitivo y escribo el texto y agrego imágenes a medida que creo un sitio. Yo averiguo lo que conviene a una determinada página y escribo un texto y agrego imágenes que coincidan con eso. Si sí quieres planear un poco más que yo, solo puedes escribir un documento de texto sencillo con titulares sobre diferentes páginas y escribir el texto que quieras incluir en esas páginas. Puedes recopilar imágenes que quieras usar en tu sitio, es posible que no sepas en este momento en qué tamaño necesitas las imágenes pero solo puedes reunir imágenes en una carpeta y modificarlas más adelante. Algo importante a mencionar es que tus imágenes deben estar en modo de color RGB para que se vean correctamente en línea. Para aprender más sobre los modos de color, puedes echar un vistazo a mis otras clases en habilisshare, preparar tus archivos para imprimir y aprender a cambiar tus archivos al modo de color RGB. Para este sencillo sitio web de portafolio, necesitas algunas imágenes de tu obra de arte y te sugeriría que tengas una foto de retrato de ti mismo para añadirla a tu página web y si tienes un logo, prepararía un archivo de logo PNG para añadir a tu página web. Si aún no tienes logotipo, no te preocupes, siempre puedes escribir tu nombre o tu marca como título de sitio en tu sitio web. Eso es en realidad todo lo que necesitas para planear comenzar con esta clase y empezar a construir tu sencilla página web de portafolio. 5. Empezar con Squarespace: Empecemos con Squarespace. Acude a Squarespace.com y eventualmente comenzaremos con un sitio con una prueba gratuita. Pero primero, echemos un vistazo a otras características que están incluidas en Squarespace. Si te desplazas todo el camino hacia abajo, puedes ir a la lista de funciones bajo productos. Aquí puedes leer todo sobre lo que está incluido y lo que la plataforma Squarespace puede hacer por ti. No voy a mencionar todas estas para ti. Puedes leer sobre ello tú mismo. Pero básicamente por qué uso Squarespace es porque todo está incluido. Todo, desde hosting web hasta gran calidad de tu sitio web. Se puede tener una tienda, se puede tener un correo electrónico conectado con Gmail. No se necesita codificación. Hay un diseño responsive, lo que significa que tu sitio web funcionará en todo tipo de dispositivos. Ofrecen herramienta de edición de arrastrar y soltar muy fácil para crear tus sitios. Básicamente solo te daría unos sitios web realmente de alta calidad. No necesitas ser un diseñador web profesional para crear sitio web de Squarespace. Puede verse realmente bien si solo usas las plantillas prefabricadas y si quieres, incluso puedes agregar código personalizado para hacerlas realmente personales. Simplemente haga clic en los precios y los productos para ver qué va a costar todo esto para usted. Algunas personas piensan que Squarespace es un poco más caro que otras plataformas y herramientas similares. Pero siento que con todo lo que te incluyes y también que sabes que obtienes un sitio de alta calidad o no tendrás ningún problema con tu sitio. En realidad siento que vale la pena el dinero extra porque es tan simple y es posible crear un pequeño sitio web al principio y luego expandirlo tanto como quieras. Simplemente vamos a echar un vistazo rápido al costo y qué tipo de plan debes usar. Pero en esta clase, comenzaremos una prueba gratuita. No es necesario que te inscribas en nada antes de intentar crear tu sitio y asegurarte de que se trata de una herramienta que deseas utilizar. Incluso puedes crear toda tu página web antes de registrarte. Desplazemos hacia abajo y echemos un vistazo. Por lo general el pago anual es un poco mejor que el pago mensual. Si pagas anualmente, ahorrarás 30 por ciento. Definitivamente recomendaría eso y podrías empezar con un plan personal. Especialmente si aún no has empezado con el negocio y tal vez no tienes ninguna entrada en los negocios. El plan personal podría ser el mejor para ti, porque siempre puedes actualizar cuando quieras. Pero si sí tienes un negocio en marcha o si sientes que puedes pagar los $4 extra al mes entonces definitivamente recomendaría el plan de negocios. Puedes leer todo sobre ello aquí, lo que obtienes extra. Es de todo, desde un correo electrónico personal con Google hasta análisis avanzados y comercio electrónico totalmente integrado. Si deseas iniciar una tienda en el futuro eso es genial y todo está apenas más disponible en el plan de negocios. El plan básico de comercio y comercio avanzado es para ti que estás creando tiendas en línea. Si estás creando un sitio web de portafolio como lo estamos haciendo en esta clase, y piensas que tal vez quieras expandirte con una tienda en el futuro, definitivamente recomendaría el plan de negocios. Pero puedes leer todo sobre estos diferentes tipos de planes tu cuenta y decidir con cuál quieres inscribirte más adelante. Porque en esta clase, vamos a crear un sitio web de prueba. Volvamos a la página de inicio y pinchemos en “Comenzar”. Aquí te llevarán a una página podemos seleccionar la plantilla y empezar con tu página. Pero voy a pasar por qué pensar cuándo elegir una plantilla y un poco más sobre plantillas en la siguiente lección. Empecemos con crear una cuenta en esta lección. Haga clic en “Iniciar sesión” en la esquina superior derecha y en “Crear cuenta”. Si lo desea, puede hacer clic en, “No quiero recibir correo electrónico sobre nuevas características y productos”. Entonces puedes seguir creando una cuenta con Google, con Apple, o con correo electrónico. Sólo vamos por correo electrónico, así que sólo escribe tu nombre y dirección de correo electrónico y crea la contraseña. Golpea “Continuar”. Ahora hemos creado una cuenta de Squarespace y podemos empezar con nuestro try gratuito. Pasemos a la siguiente lección donde escogeremos en plantilla para empezar. 6. Elige una plantilla: Entonces vamos a escoger una plantilla para nuestro sitio. Todos los sitios web de Squarespace tienen una plantilla para empezar, pero lo que es bueno saber en esta nueva versión de Squarespace, esta 7.1, que es en lo que vamos a construir nuestro sitio, es que todos estos son en realidad una plantilla maestra. Básicamente puedes reconstruir todas las plantillas para que se vean unas como otras. Qué plantilla elijas hoy en día en la versión de Squarespace 7.1 importa mucho menos que en la versión anterior de Squarespace, donde las plantillas tenían diferentes funciones. Porque ahora todas las plantillas tienen la misma funcionalidad base. Realmente puedes pensar en ellos como un punto de partida y elegir una plantilla que te guste. Hay tantos para elegir, por lo que podría ser difícil elegir una plantilla. En esta clase, crearemos un sitio web básico de portafolio. Creo que es más importante que aprendas cómo funciona Squarespace. Yo construiría un sitio web básico de portafolio, para que más adelante puedas explorar más con Squarespace cuando aprendiste la base de cómo construir tu sitio web de portafolio. Solo seleccionemos una plantilla que nos guste. En el menú de la izquierda aquí puedes navegar por diseños populares, fotografía de portafolio, tiendas en línea, y todo eso. Podrías ir por portafolio ya que estamos creando un sitio web de portafolio. Pero para que esta clase sea lo más lógica posible, he encontrado una plantilla que creo que funciona realmente bien para nuestro propósito. Daré click en fotografía y seleccionaremos las plantillas TALVA. Puedes hacer click en “Preview TALVA”, si quieres ver cómo se ve esta plantilla. Recuerda que puedes cambiar básicamente todo con este sitio web, pero tienes una plantilla para empezar con la cual todo lo hace mucho más fácil. Haga clic en “Empezar con este diseño”. Aquí te preguntan cómo llamar a tu sitio. Solo tecleemos el nombre de tu marca y golpeemos “Continuar”. Entonces obtendrás algunas instrucciones sobre cómo crear y dar estilo a tus páginas, pero solo podemos darle un golpe de salto aquí, porque eso te mostrará todo. Simplemente puedes apagar al asistente si te dan uno de esos. Como puedes ver al fondo, eres juicio termina en 14 días. Cuando creaste tu sitio web, puedes actualizarlo para hacerlo público y empezar a pagar un plan en Squarespace, pero en esta clase, construiremos un sitio con solo un periodo de prueba. Está bien, genial. Ahora elegiste una plantilla y has empezado con tu sitio. Pasemos a la siguiente lección, donde les mostraré cómo hacer algunos de los ajustes generales de su sitio. 7. Descripción y configuración: En esta lección, te guiaré por algunos ajustes generales de tu sitio de Squarespace y cómo funciona la plataforma, y cómo haces algunos ajustes diferentes. Si le das un vistazo a tu menú de la izquierda, podemos empezar en la parte superior en Pages. Páginas es donde vamos a agregar páginas y construir nuestros sitios, por lo que voy a pasar por esto mucho más, a fondo en las lecciones donde construimos diferentes páginas. El diseño es donde estableces los estilos de diseño de tu sitio. Pasaré por muchas de estas opciones más adelante en clase, así que no voy a pasar por eso más ahora. El comercio es si tienes una tienda online, así que no vamos a pasar por esto en absoluto en esta clase. Si ves este pequeño símbolo, significa que es una característica premium. Por lo que si optas por inscribirte en el plan de negocios, obtendrás algunas de estas características. El marketing es donde haces ajustes en todo desde Campañas de Email, que en realidad podemos crear dentro de Squarespace. SEO, algunas cosas de promoción. Historias de Instagram, Productos en Instagram, y también Pop-Up Promocional, que es una de estas cosas, y Barra de anuncios. Tanto Promocional Pop-Up como Barra de Anuncios está disponible en el plan de negocios y comercio, y no voy a pasar por eso más en esta clase, pero estos son realmente geniales para conseguir la atención de tu visitante en tu sitio. Eso fue un poco sobre las cosas de marketing. Podrás explorar eso más por tu cuenta. Programación, no voy a pasar en absoluto en esta clase. Es decir si tienes un negocio donde agendas cita con tus clientes. Se puede agregar esta extensión que está impulsada por Acuity, pero no voy a pasar por eso más en esta clase. Analytics es donde obtendrás tus analíticas de tu sitio. Para que puedas ver de todo, desde ventas si vendes productos, hasta tráfico, de dónde viene tu tráfico; qué parte del mundo? Fuentes de tráfico, Palabras clave de búsqueda, Contenido popular en tu sitio, y todas estas cosas. Analytics está incluido en Squarespace, y para mí, esta es toda la analítica que necesito en mi sitio. No voy a pasar por esto más en esta clase porque necesitas publicar tu sitio y también tenerlo marcha por un tiempo antes de empezar a ver la analítica. Pero es realmente fácil leer estos análisis y puedes encontrar más sobre ellos en el ingreso de ayuda de Squarespace. Configuración es donde puedes hacer algunas configuraciones generales a tu sitio, como la disponibilidad del sitio. Ahora estamos configurados como privados porque estamos en un periodo de prueba, pero también podrías configurarlo como protegido con contraseña, y cuando actualices tu sitio, puedes configurarlo como público. Language & Region es donde estableces tu hora estándar, tu país, idioma, y todas esas cosas. Información comercial es donde pones tu número de teléfono si deseas mostrarlo en tu sitio, correo electrónico de contacto, y tu ubicación si lo deseas, y si tienes horario laboral, puedes ponerlos aquí. No voy a pasar más por esto en esta clase. Enlaces Sociales son los enlaces que se adjuntan a tus símbolos sociales en tu sitio. Como estándar, Squarespace ha escrito en sus enlaces sociales, pero aquí debes agregar tus propios enlaces sociales. Por lo que solo escribiré mi canal de Instagram, Facebook, y YouTube, y luego eliminaré los enlaces de Squarespace, así que solo haré clic en los enlaces y pulsaré Remove. Ahora tengo tres enlaces sociales diferentes con mi Instagram, Facebook, y YouTube. Connected Accounts es donde puedes agregar cuentas sociales para empujar y sacar datos a tu sitio. Si por ejemplo, quieres mostrar tu feed de Instagram, puedes conectar Instagram. Golpea Connect Account e Instagram, y ya estoy automáticamente conectado a Instagram en mi computadora en mi navegador, pero si no lo estás, solo escribirás tu nombre de usuario y luego pulsarás Guardar. También puedes conectar tus cuentas de Pinterest, Facebook , Twitter, y todas estas cuentas. Para esta clase, solo te mostraré cómo usar la cuenta conectada a Instagram. No usaremos ninguna extensión en esta clase, pero puedes explorar más al respecto aquí. Permisos es si quieres tener más contribuyentes a tu sitio e incluso puedes transferir tu propiedad de tu sitio a otra persona. Tampoco voy a pasar por esto más en esta clase. Dominios es donde puedes conseguir un dominio a tu sitio web dentro de Squarespace, o puedes usar un dominio que ya posees. Lo mejor es conseguir un dominio dentro de Squarespace si ya no posees un dominio, porque entonces tienes todo incluido en tu plataforma Squarespace y solo obtendrás una factura por todo. También puedes usar un dominio del que seas propietario, y si ese es el caso para ti, puedes presionar Más información y leer más sobre eso. Si quieres conseguir un dominio dentro de Squarespace, solo escribirás un dominio, y aquí podrás ver qué dominios son gratuitos, qué cuestan dentro de un Squarespace, y puedes agregar un dominio a tu sitio. En esta clase te mostraré cómo construir tu sitio web de portafolio, no te mostraré cómo transferir dominio ni cómo agregar un dominio, pero es realmente sencillo y puedes leer más al respecto en el Centro de Ayuda de Squarespace. Por lo que sugeriría que hagas esto al final cuando hayas construido todo tu sitio, y estés listo para ya sea obtener un dominio o usar un dominio que ya posees. Pero no voy a pasar más por esto en esta clase. Email & G Suite es donde puedes conectar una dirección de correo electrónico a tu sitio. Primero obtienes un dominio, y luego puedes conectar una dirección de correo electrónico a ese dominio. Tampoco voy a pasar por esto más en esta clase, pero eso es algo realmente genial haber incluido. Creo que eso fue incluido en el plan de negocios. Entonces si tienes el plan personal, no podrás hacerlo, pero si tienes un plan de negocios, podrás tener un correo electrónico que termina con tu nombre de dominio. Por ejemplo, hello@mayafavorite.com, que es mi dirección de correo electrónico. Facturación y Cuenta es donde haces los ajustes a tu plan. Aquí dice cuántos días te quedan de tu juicio. Aquí puedes ver tus futuras facturas, e incluso puedes eliminar tu sitio. La Barra de Información Móvil es una característica premium que está disponible en el plan de negocios y comercio, y no voy a pasar por esto más en esta clase. Cookies & Datos del visitante es una buena característica. Puede habilitar un banner de cookies a su sitio, que básicamente dice que al usar este sitio web, el visitante acepta su uso de cookies. No pasaré por la clase de este lunes, pero si no sabes más de esto, solo te sugiero que uses este texto predeterminado, para que informes a tus visitantes que utilizas cookies. Puedes leer más sobre esto en el Centro de Ayuda de Squarespace y también Google más sobre las cookies. Por ahora, sólo voy a inhabilitar el banner de las galletas. Blogging, pasaremos más adelante en clase donde creamos nuestra página de blog. Avanzado es básicamente características más avanzadas que no necesitas usar, en realidad, nunca, cuando creas un sencillo sitio web en Squarespace. Entonces esto es si quieres agregar código y cosas así. Para que no tengas que preocuparte por eso. Esa fue toda la configuración. Algunas configuraciones por las que pasaré más adelante en clase, y otras por las que no voy a pasar más allá porque no creo que necesites saber más sobre esas configuraciones para construir tu sitio web. Pero lo bueno es que puedes encontrar toda la ayuda que necesites en el Centro de Ayuda de Squarespace. Habrá una lección completa más adelante en clase, donde te mostraré cómo funciona este Centro de Ayuda porque no soy un apoyo de Squarespace, y hay tanto que saber de Squarespace y tienen un apoyo realmente bueno para ti. Entonces por ahora, solo apagaré eso y volveré. Lo último que quiero mostrarte es que si haces click en tu cuenta en la parte inferior, llegarás a un panel de control. Esto es lo primero que verás cuando inicies sesión en Squarespace. Este son tus sitios web, y más adelante podrás ver tus dominios aquí también. Para ir a tu sitio web y poder editarlo, haces clic en Editar sitio. Eso fue todo lo que quería mostrarles en este resumen de los Ajustes y Opciones en Squarespace, pasemos a la siguiente lección donde en realidad comenzaremos a construir nuestra página principal. 8. Página: página de inicio: Empecemos por construir nuestra página principal. El primero que harás es hacer click en Páginas, y aquí es donde construimos todas las páginas de nuestro sitio. Cuando empieces por primera vez con una plantilla, verás que dice Demo, en las páginas. Lo que tienes que hacer es simplemente dar click en la Página. Eso lo convertirá en una página que puedes construir en lugar de una Página Demo. Por lo general, cuando empiezo con una plantilla, empiezo con las páginas básicas que se incluyen en la plantilla, y luego si quiero cambiar algo o agregar páginas, lo hago desde ahí. En primer lugar te mostraré cómo construir la Página Principal basada exactamente en esta plantilla. Simplemente agregaremos nuestras propias imágenes aquí. Creo que esta página de inicio es realmente buena para un sitio Starter Portfolio. Se pueden construir todos los sitios de portafolio. Te mostraré cómo puedes ajustar tu página de inicio y todas las demás páginas, pero primero solo empecemos con la plantilla que tenemos y añadamos nuestro propio contenido. Puedes ver fácilmente qué página es la página principal por el símbolo de casita, a la izquierda de tu página. Si pasas el cursor sobre la página, puedes hacer clic en el pequeño símbolo de configuración. Desplázate hacia abajo, puedes ver que dice que, “Esto está configurado como tu Página Principal”. Puedes elegir fácilmente otra página como tu página de inicio si lo deseas. Tienes algunos ajustes que puedes cambiar aquí, por ejemplo, creo que Inicio, es un buen título para la página en la navegación. El URL Slug debería ser Inicio también. Puedes agregar una contraseña a tu página. Te mostraré cómo hacer esto cuando creemos la página de portafolio protegido con contraseña más adelante en clase. Incluso puedes duplicar la página si quieres crear una copia exacta de la página que has creado. Si haces click en SEO, verás cómo se verá tu sitio en los resultados de búsqueda. No voy a pasar mucho SEO en esta clase porque eso sería toda una clase sobre sí misma. Es tanta información. El espacio cuadrado hace algunos ajustes SEO automáticos a su sitio. Como principiante y en tu primer sitio web, diré que SEO es algo que puedes hacer en el siguiente paso cuando publiques el sitio y quieras trabajar más con desarrollarlo. Imagen Social es cómo se muestra tu sitio en redes sociales. Puede agregar una imagen específica a esta página. Advance está disponible en plan de negocios y comercio y ahí es donde se pueden inyectar códigos personalizados, y scripts, y todas esas cosas. No necesitas hacer eso para un sitio básico de portafolio. Vamos a golpear Save, porque hemos cambiado el título a Inicio, tanto el título de la página, el título de navegación, como el URL Slug. El Título de la Página, me olvidé de mencionar, ese es el título que aparece en la parte superior de la ventana del navegador. Hit Save, y ahora cambiamos el nombre a nuestra página de inicio a Inicio. Lo siguiente que haremos es editar esta página. Si miras la esquina superior izquierda, tienes un pequeño botón que dice Editar, así que hacemos click en eso. Aquí te meterás en modo de edición. Si pasas el cursor sobre las diferentes partes del sitio, puedes editar todas las barras. Empecemos con añadir nuestras propias imágenes a esta galería. Haga clic en el símbolo de la imagen pequeña, y eliminaré todas estas imágenes. Mantén presionada Mayús y haz clic para que todos ellos sean seleccionados y luego pulsa Eliminar. Después haces clic en el pequeño Plus Firmar y subir imágenes. He guardado un montón de imágenes de dos de mis colecciones de patrones que usaré como ejemplo en este sitio. Para este ejemplo, solo estoy usando una colección en esta página de inicio. Pero te sugeriré que muestres una gama de tu obra de arte o lo que está incluido en tu portafolio para que los visitantes vean una variedad de tu portafolio. Pero para este ejemplo, como dije, sólo voy a añadir una de mis colecciones, algunas maquetas, y algunos patrones. Daré clic en abrir cuando haya seleccionado algunas imágenes. Esto podría tardar un poco en subir imágenes o acelerar esto un poco para ti. Estoy usando imágenes cuadradas aquí pero puedes usar cualquier tipo de imágenes. Puedes moverlos haciendo clic y arrastrando. A veces está un poco apagado, por lo que realmente necesitas hacer clic, mantener pulsado y arrastrarlo a la siguiente imagen dentro de ella. Voy a tratar de hacer una buena variedad entre estos maquetas y los patrones, haciendo clic y arrastrándolos a nuevos lugares. Ahora hemos sumado nuestras propias imágenes. Si lo deseas puedes agregar una descripción a tus imágenes e incluso puedes añadir un enlace a donde vayas si haces click en la imagen. Puedes elegir dirección web, una página en tu sitio, aún no tenemos tantas páginas. Puedes elegir un enlace de correo electrónico, un número de teléfono, o un archivo. En la siguiente lección te mostraré cómo crear una página de portafolio con imágenes clicables que te lleve a otra página de tu sitio web. Por ahora cerraré éste y cerraré la galería. Aquí tenemos nuestras imágenes añadidas a la galería. Si esperas sobre verás un pequeño símbolo de bolígrafo. Da click en eso, y aquí tienes algunas ediciones que puedes hacer a tu galería. Puedes elegir si quieres el ancho completo, sangrado completo lo que hará sangrar todo el camino hasta los bordes de tus sitios o el inserto. Probemos el inserto por ahora. Puedes seleccionar el Espaciado entre tus imágenes Creo que 30 luce bien, Row Heights, si quieres agregar los Subtítulos, las descripciones que ponemos en las imágenes, patrón de gatos debajo de las imágenes, no voy a hacer eso para esta página de inicio. Si quieres que ocurra alguna animación, no se desvanezca la animación, o se escale, creo que el escalado se ve bien. La animación ocurrirá cuando tu visitante visite tu página la primera vez porque si quieres una caja de luz, lo que significa que al hacer clic en una imagen se hará más grande por lo que podría ser una característica agradable. Puedes elegir el Tipo de Galería. Por ejemplo, se trata de Tiras. Probemos la Cuadrícula Simple. Aquí tienes algunas opciones más que puedes explorar. Por ejemplo, el diseño, cuántas columnas quieres, y todas esas cosas. Vamos a probar otro diseño. Puedes elegir tener una presentación de diapositivas, y la altura de la presentación de diapositivas, y todas esas cosas. Vamos por las tiras que tenemos desde el inicio y el espaciado 30. Todos son altura 360. Eso lo puedes probar para ver si quieres cambiar algo pero creo que 360 fue bueno. Si quieres un número específico aquí puedes hacer doble clic, y escribir 360. Bajo colores puedes seleccionar un tema. Te mostraré más adelante en clase cómo cambiar estos temas. Vamos a golpear por ejemplo, Dark Minimal. Puedes ver que todo tu fondo cambia a un color oscuro. Luz Mínima y cambia a un color más claro. Así que vamos a golpear White Minimal por ahora, y luego haces clic fuera del cuadro de configuración, y aquí has hecho tu página de inicio. Para guardar este hoover sobre Listo y haga clic en Guardar. En la esquina superior derecha puedes ver cómo se verá el sitio debajo vista móvil y si haces clic en la flecha obtendrás una vista a pantalla completa. Deshaga clic en la vista previa del móvil y haga clic en la vista de pantalla completa. Ahora hiciste una página de inicio básica a tu sitio. 9. Retoques a la página de inicio: Ahora que hemos hecho una página de inicio, te mostraré cómo ajustar la página de inicio si quieres porque como dije antes, todas las plantillas que elijas en realidad son una plantilla maestra. Por lo que puedes hacer que se vean entre sí y añadir diferentes secciones a todas las páginas de tu sitio web. En esta parte de la clase, no entraré en ajustar la navegación, que está en la parte superior, ni el pie de página, que está en la parte inferior. Eso serán lecciones separadas más adelante. Pero por ahora solo concentrémonos en el medio de la página. Así es como se ve nuestra página en este momento, pero digamos que quiero agregar tal vez algunos textos por encima de mis imágenes. Todo lo que necesito hacer entonces es ir al modo de edición y dar click en el pequeño signo más que aparece, y aquí puedes agregar secciones. Esto hace que el nuevo squarespace 7.1 realmente flexible. Puedes hacer que todas las plantillas se vean unas a otras ya que todo forma parte de una plantilla maestra. Tan solo como ejemplo, puedo mostrarles cómo agregar un titular. Solo agreguemos este y eso hará que tu página luzca completamente diferente. Puedes construir tus páginas realmente desde cero con estas secciones. A lo mejor después del titular, quieres tener algo de texto y luego solo puedes seguir construyendo tu página así. Explorar esto al agregar secciones a tu sitio es algo que te dejaré más. En esta clase, nos enfocaremos en construir nuestro sitio basado en la plantilla que hemos elegido. Porque siento que ese es un buen comienzo cuando estás empezando a construir tu primer sitio web, y cuando eres nuevo en squarespace, lo contrario se sentiría demasiado aprender. Sólo eliminemos esta primera sección. Haga clic en el pequeño símbolo de “Eliminar” y elimine, y eliminemos esa sección también, y tal vez sólo voy a añadir un titular para modificar un poco esta página. Aquí podría querer decir algo de mí, y puedo cambiar el formato del encabezado a diferentes encabezados preestablecidos, o párrafos, o lo que quiera. Pero vamos a elegir la herramienta de encabezado, y vamos a entrar en la herramienta de edición, y aquí puedes cambiar la altura de tu sección, el ancho, vamos por pequeño, y cómo se alineará tu contenido, por lo que 'll para centro, puedes ir por sangría completa y en su lugar, puedes seleccionar tener un fondo en la parte posterior de tu texto y el color es el mismo. Los cambias de acuerdo a los temas preestablecidos. Por lo que iremos por blanco, mínimo, haga clic fuera del cuadro de opciones. Esta es una forma en que podrías modificar esta página, por ejemplo. Con todos los ajustes de diseño, como la fuente, y los colores, y todo eso, voy a pasar por eso más adelante en clase, por lo que en esta parte de clase construiré las páginas, no nos importará la fuente ni los colores ni ninguno de los estilos de diseño. Simplemente colocaremos el contenido. Sólo hagamos un ejemplo más. Puedes desplazarte hacia abajo y hacer clic en el pequeño signo más azul debajo de tus imágenes, y digamos que queremos agregar una sección social con nuestro feed de Instagram. Por ejemplo, me gusta este, probemos eso. Da clic en la pequeña herramienta “Edición”, alturas de sección pequeña, puedes tener el ancho de contenido como quieras, fondo y los colores, y para que tu feed de Instagram llegue a esta sección, debes hacer clic en la pequeña herramienta “Editar” en esta sección y seleccione su cuenta conectada. Aquí puedes elegir cuántos artículos quieres ver. Da click en “Diseño”, y tal vez quieras tener más imágenes por fila. Puedes seleccionar si quieres algún relleno alrededor y algunos otros ajustes. Solo hagamos seis imágenes mostrando y golpeemos “Apply”. Ahora agregamos nuestro feed de Instagram al final de esta página. Si pasas por encima de tu sección, puedes ver que dice espaciador, así que solo intentemos eliminar este espaciador, eso me queda mejor. Si desea agregar un espaciador, puede hacer clic en el pequeño signo de gota, y aquí puede seleccionar agregar espaciador, un botón, y muchas otras cosas. Puedes agregar una línea si quieres. Pero saquemos sólo esa. Pulsa “Guardar”, haz clic en la vista previa de pantalla completa, y ahí habrías agregado algo más de contenido a tu página de inicio. En realidad eliminaré esta primera sección porque no me gusta esa de esta plantilla, así que solo presionaré “Eliminar”, “Hecho”, y “Guardar”. Eso es un poco sobre cómo puedes ajustar tu página de inicio para que sea más personal. Pero para esta clase, simplemente lo mantendré así. Puedes experimentar más tú mismo y ver si quieres hacer algunos otros cambios en tu página de inicio. 10. Página: portafolio: De acuerdo, entonces ahora hicimos nuestra página de inicio y la ajustamos. Ahora quería mostrarte cómo crear esta página de inicio como páginas de portafolio entonces y lo que eso significa es que esta página por ahora es una galería, que significa que puedes hacer clic en las imágenes y como nosotros elegimos en el ajuste de caja de luz, puedes hacer la imagen es más grande. Pero eso es lo que pasa. También puedes agregar un enlace que te llevará a una página diferente al hacer clic en las imágenes. Pero si quieres tener pura página de portafolio donde tienes proyectos y quieres que cada proyecto se muestre en una página separada y se muestre como una miniatura aquí, así es como lo haces. Debajo de Navegación principal y debajo de no vinculado, puede hacer clic en el signo más. Al hacer clic en el signo más, puede agregar páginas, colecciones y más. Lo que haremos es agregar un portafolio así que haga clic en Portafolio. A continuación te presentamos algunas plantillas de portafolio prefabricadas que puedes elegir. Añadamos este portafolio también. Simplemente le renombraré a portfolio y aquí tienes todos los proyectos. En Proyecto uno vamos a dar clic en Editar y podemos decir que se trata de una colección sobre algo. Entonces podemos añadir nuestras propias imágenes. Elimina estas imágenes en la galería y ahora podemos hacer clic en Buscar Imágenes y aquí puedes agregar imágenes de Unsplash, que es un gran sitio para imágenes libres de derechos de autor. Si quieres usar esos, probablemente quieras usar tus propias imágenes ya que estás creando tu propio sitio de portafolio. Añadamos esta imagen y agreguemos algunas imágenes más. De acuerdo, entonces tres imágenes podrían ser suficientes aquí. Hit Guardar. Ahora da click en los pequeños tres puntos en la configuración del Proyecto uno y quita la imagen debajo de General y agrega una imagen que quieras usar como imagen de tu auto. También se puede cambiar el título, por ejemplo, gatos y perros y la escoria URL. No necesitas cambiar nada con SEO o la imagen social por ahora. Simplemente pulsa Save y luego podremos volver a nuestra página de portafolio y ahí tienes tu portafolio. Simplemente seguiré adelante y crearé algunos proyectos más y aceleraré esto un poco para ti. Proyecto dos, esta página se ve un poco diferente, así que voy a hacer clic en el pequeño símbolo de edición y cambiar la imagen de fondo aquí. Cuando tengas tu imagen puedes cambiar qué parte de tu imagen se ve ajustando este pequeño círculo. Se puede ajustar la altura de sección. Puedes agregar algunos textos y luego agregar algunas imágenes. Cuando subes las imágenes, puedes golpear cerca. También puedes ajustar el tipo de galería en estas páginas como quieras y todos los demás ajustes. De acuerdo, entonces tal vez algo así. Golpea Save, toca el pequeño símbolo de configuración en el Proyecto dos y agrega una nueva imagen. Se puede cambiar el título y la escoria URL y golpear guardar. Vuelve a tu página de portafolio y veamos cómo se ve eso. Si vas a editar en tu página de portafolio y en el pequeño símbolo de edición, puedes cambiar cuántas columnas quieres estar mostrando. A lo mejor tres, y qué tipo de maquetación quieres. Puedes experimentar con todos estos ajustes. Añadamos un poco de espaciado y hacerlos cuadrados y tal vez quiero cuatro columnas. De acuerdo, pulsa Guardar, como puedes ver aquí, puedes crear la página de portafolio que se ve igual nuestra página de galería regular en la página de inicio o donde quieras en tu sitio web. El diferencia entre la página del portafolio y la página regular con la galería es que en la página del portafolio, podrás hacer click en estos proyectos y entrar en otra página donde obtienes más información sobre el proyecto. Dependiendo del área creativa con la que trabajes y con qué tipo de productos trabajes, esta podría ser una solución realmente buena para ti o podrías ir con la versión más simple que es solo la página de inicio de la galería. Por ahora, solo arrastraré hacia abajo la página de portafolio debajo de no vinculada y para el resto de esta clase, usaremos esta página estándar como la página de inicio donde obtendrás imágenes de caja de luz. Pero solo quería mostrarles cómo crear estas páginas de portafolio porque para algunos de ustedes, esa podría ser una mejor manera de hacer su página de inicio y para algunos de ustedes, podría ser demasiada información tanto para aprender también podría no tener toda esa información para poner en tu cartera. 11. Página: acerca de: De acuerdo, entonces vamos a crear la página sobre. Ya tienes sobre página en la plantilla. Vamos a dar click en ese, y podemos dar click en los pequeños ajustes ensamblados para ver cómo se ve todo. Eso se ve bien. Veamos qué queremos hacer con esta página. Entonces básicamente lo que quieres agregar aquí es una foto de ti mismo, y alguna información sobre ti. ¿ A qué se dedica? Qué puedes ofrecer a los clientes, y tal vez tú por qué estás haciendo lo que estás haciendo. Entonces, vamos a presionar el botón de edición y a ver cómo queremos cambiar esto. En primer lugar, editemos la imagen. Haga clic en el pequeño símbolo de edición, elimine la imagen, y suba una nueva imagen. He guardado un retrato de mí mismo que usaré como ejemplo aquí en clase. Ahí tienes la imagen. Puedes hacer click en editor de imágenes si quieres cambiar el tamaño de la imagen o si quieres modificarla de alguna manera. Por lo que puedes cambiar todo desde la saturación, hasta el tamaño y puedes agregar filtro y todo eso. Vamos a cambiar el tamaño de esta imagen de retrato a tal vez 3:2, probablemente se verá bien y pegue save para hacer los cambios. Cuando obtienes el pequeño cuadro de opciones. Por lo que estás seguro de que quieres hacer estos cambios permanentes, solo tienes que pulsar guardar. Caso de que Alice pueda divertirse, y luego podamos cambiar el diseño de la imagen si queremos. Puedes dar click alrededor y ver cuál quieres. Iré por el original. Puedes elegir si quieres alguna animación como colidir o enfocar en. Enfoque en se ve bien. Entonces no te importen los colores y las fuentes en este momento. Cambiaremos todo eso más adelante. Por ahora sólo escribiré un poco sobre mí. Puedo cambiar el encabezado a, tal vez Epígrafe 2 y tal vez quiero usar el Apartado 1. Entonces cuando tu escrito un poco sobre ti, eso es bueno por ahora. Vamos a modificar todos los estilos de diseño aquí, el color y las fuentes y todo más adelante. Guarda tu página sobre. 12. Página: contacto: Sigamos con la página de contacto. Eso también está incluido en las plantillas originales. Da click en la página de contacto y aquí solo podemos añadir nuestra propia información. Demos clic en Editar y solo puedes escribir algo sobre por qué al visitante de tu página le gustaría ponerse en contacto contigo. Aquí tenemos un poco de forma que se agrega. Por lo que si hace clic en el botón de edición, verá un formulario. Básicamente, puedes agregar tu propio formulario si haces clic en el signo desplegable y desplázate hacia abajo hasta formar. La única diferencia es que se ve este formulario, y si haces clic en Activar modo Lightbox, obtendrás un pequeño cuadro en su lugar que abrirá el formulario. Simplemente descartemos esos cambios y haga clic en el pequeño símbolo de borrar y ajustemos la forma que ya está en el sitio. El nombre del formulario podría ser correo electrónico, tu nombre y aquí puedes agregar campos de formulario y puedes editarlos. Por lo que probablemente quieras un nombre, un e-mail, una línea de asunto es buena y un mensaje. Puede agregar una descripción y puede agregar más campos de formulario. Entonces básicamente un formulario de contacto, esto es todo lo que necesitas. También podrías agregar una casilla de sitio web si quieres que el visitante escriba en sus sitios web, casillas de verificación, si quieres hacer preguntas y un montón de cosas diferentes que puedes explorar tú mismo. Puedes elegir dónde quieres que esté el almacenamiento. Por ejemplo, puedes conectarlo a Mailchimp, Zapier o Google Drive. A lo normal para conectarlo es a tu dirección de correo electrónico. Si lo conectas a tu dirección de correo electrónico, recibirás un e-mail en cuanto alguien llene tu formulario. En la sección avanzada, puedes elegir cómo quieres que se nombre el botón, cómo quieres que se alinee el botón y si quieres enviar al visitante a otra página cuando haya rellenado el formulario. También puedes agregar un mensaje post-enviar, que mostrará cuándo alguien rellenó tu formulario y eso es todo lo que hay a eso. Así que pulsa aplicar, y para probar esto, necesitas presionar Guardar y luego podemos ir a la vista de pantalla completa y hacer clic en el pequeño botón y obtendrás tu formulario. Por lo que aquí, el visitante puede firmar su nombre, dirección de correo electrónico, asunto y un mensaje y enviar. Vamos a editar las otras cosas de esta página. Es posible que no tengas consultas de prensa si este es tu primer sitio web. Entonces, solo tecleemos tu dirección de correo electrónico, y aquí hay un pequeño truco. Si seleccionas tu dirección de correo electrónico y pulsas el símbolo de enlace pequeño, puedes hacer clic en el símbolo de configuración pequeño, clic en correo electrónico y escribir tu correo electrónico, y eso hará que este texto se vincule al correo a: hello@mayerfaber.com. Por lo que cuando alguien hace clic en este enlace, su software de correo electrónico se abrirá automáticamente y pueden enviarte un correo electrónico. Aquí te dejamos algunos enlaces sociales que podrían ser agradables tener aquí. Puedes diseñarlos. A lo mejor quieres hacerlos más grandes. Incluso puedes diseñar el estilo de ellos. Vamos sólo por regular. A lo mejor quieres agregar algún espacio entre el texto y los enlaces sociales. En ese caso, haz clic en el símbolo de la pequeña gota y el espacio ahí, y ahí tienes algo de espacio. En esta página de contacto, tienen imagen. Añadamos una imagen diferente, y esta vez, quizá queramos intentar usar las imágenes unsplash. Entonces haz clic en Buscar Imágenes y Gratis, y tal vez quieras algo así como un teléfono. Escriba teléfono y desplácese hacia abajo y vea si encuentra algo que le guste y haga clic en Agregar imagen. Puedes ajustar donde quieras que esté el punto de enfoque en tu imagen y eso se ve bastante bien. Entonces en este momento, no te importen las fuentes ni los colores ni cómo se ve el botón. Eso vamos a retocar más adelante en clase. Así que solo presiona Guardar, haz clic en la vista previa completa y aquí tienes tu página de contacto. 13. Página: blog: Vamos a crear un blog en tu página, y esta plantilla ya tiene un blog, por lo que solo haremos clic en ese. Entrarás a estas opciones de blog. Estas son las entradas de blog que puedes editar, y puedes guardar borradores, puedes guardar para revisar y programar tus entradas de blog. Empecemos con la edición de esta página de resumen del blog, así que haz clic en “Editar” y haz clic en la pequeña herramienta de edición. Aquí puedes elegir. Este es el blog de una sola columna, donde tienes una columna y todo el blog no se muestra. Aquí puedes seleccionar todo tipo de ajustes, si quieres que se muestre una publicación completa, o si solo quieres el extracto y título como está aquí. Vamos a probar algunos otros diseños. Lado a lado, se ve así. Blog de albañilería, se ve así, blog básico de cuadrícula o convirtiendo blog lado a lado. Creo que quiero tener el blog de cuadrícula básica, lo que básicamente significa que aquí se mostrarán todas las entradas del blog. Puedes seleccionar cuántas columnas desees. Escojamos tres columnas si quieres completo o insertado, y cuánto espaciado y todos esos ajustes. Puedes elegir tus colocaciones de imagen. El ratio, vamos cuatro cuadrados. Alineación de texto, si quieres mostrar los extractos o no, enlace Read More, y hay un montón de configuraciones que puedes explorar aquí, así que vamos a ir por este diseño, pulsa “Guardar”. Si hacemos clic en las entradas del blog, podemos simplemente eliminar todas estas y añadir nuestras propias entradas de blog. Para agregar publicaciones, haces clic en el pequeño signo más, agrega post, y aquí es igual que construir otra página para que puedas ingresar un título de entrada, por ejemplo, Nuevo patrón, y puedes agregar lo que quieras publicar en el blog. Añadamos una imagen. Daré clic en “Buscar imagen” y añadiré una que hayamos importado. Puedes elegir el diseño y la animación, pero solo voy a presionar “Aplicar” y tal vez quiero añadir otra imagen, y luego puedes pulsar “Guardar”, “Publicar”, o “Programar”. Vamos a probar lo que pasa cuando golpeas “Horario”. Se puede programar el puesto a otro día y hora. Simplemente puedes guardar el post, lo que lo convertirá en un borrador, y podrás publicar el post. Basta con hacer click en “Hecho”, y ahí tienes un nuevo post. Añadamos dos publicaciones más. Ahora, vamos a acelerar eso un poco para ustedes. En tus entradas de blog, puedes, como mencioné, agregar lo que desees, así que agreguemos una cotización aquí. Haz la configuración de la cotización, e incluso puedes añadir una galería, un botón y todo lo que quieras agregar a tu entrada de blog. Ahora agregamos tres posts, por lo que se parece a la plantilla. Para editar aún más las publicaciones, ve a Editar en la entrada del blog y en la esquina superior derecha, ve al símbolo de configuración. Aquí tienes más ajustes que hacer a tu post, por lo que en realidad puedes crear más de tus entradas de blog aquí. Puedes agregar categorías si lo deseas, y etiquetas, y decidir si quieres tener comentarios activados o desactivados, y tienes más opciones. Lo importante aquí es agregar una imagen en miniatura, clic en “Subir” una imagen, y sólo voy a añadir la misma imagen que tenía en el post. Aquí puedes escribir un extracto, que le diga un poco a tus espectadores sobre tu entrada de blog. Puedes vincular tu título de publicación a la URL de origen si quieres vincularlo a otro lugar, puedes elegir al autor. No necesitas hacer nada con SEO si no quieres. Esta es la vista previa social donde puedes subir una imagen si lo deseas, y puedes compartirla si has conectado tu cuenta a, por ejemplo, tu Pinterest, puedes compartir tu publicación de blog en Pinterest. Puedes escribir en tu ubicación, pero lo más importante es que agregues una imagen en miniatura, haz clic en “Aplicar” y haz clic en “Guardar”. Volvamos atrás y hagamos lo mismo con los otros posts. Haga clic en el pequeño símbolo de configuración, “Opciones”, “Subir” una imagen y escriba pequeño extracto. Vuelve atrás y haz lo mismo con la última entrada del blog. Haga clic en el símbolo de configuración, “Opciones” y simplemente subiré el patrón. Haga clic en “Aplicar” y haga clic en “Guardar”. Ahora, podemos volver a nuestra página de blog y ver cómo se ve esto. Tenemos tres entradas de blog viendo con el encabezado y el extracto y leer más enlace. Si hacemos clic en el enlace “Leer más”, irás a esa entrada de blog. Eso es lo básico de crear la entrada del blog. Vayamos a la configuración del blog. Ve a la configuración de inicio y blogueo. A continuación te mostramos solo algunos ajustes sencillos que puedes cambiar. Se puede crear la estructura estándar de URL para las entradas de blog, y si se hace clic en el pequeño signo de interrogación, se puede ver lo que esto significa. El porcentaje y T significa el título de tu puesto, que es la configuración normal. Acude a ajustes comunes, y aquí puedes decidir si quieres habilitar los comentarios y si quieres requerir aprobación y todas esas cosas, y algunos ajustes más para tus entradas de blog. Realmente no necesitas importarte estos ajustes por ahora, pero puedes entrar y experimentar con ellos más adelante. Ahora hemos creado nuestro blog que se ve así, así que vamos a pasar a la siguiente lección donde empezaremos a cambiar los estilos de diseño de nuestra página web. 14. Diseño: fuentes: En lo que va de clase, hemos colocado el contenido de nuestro sitio. Creamos todas estas páginas. Están Inicio, Blog, Acerca, y Contacto. Entonces tenemos nuestro sitio de portafolio extra que acabo crear para mostrarte cómo pudiste hacer eso. Pero estas son nuestras cuatro páginas principales. Esta es la primera lección donde hablaremos de los estilos de diseño. En esta lección, hablaremos de las fuentes. Demos click en una página donde tenemos algunos textos. The About page, por ejemplo, regrese a casa, en el menú y haga clic en el signo y haga clic en las fuentes. Esta es una característica realmente bonita en la versión de Squarespace 7.1, que ya tienen combinaciones de fuentes para ti, lo que hace que todo el proceso sea realmente rápido para elegir fuentes en tu sitio. También puedes, por supuesto, entrar y ajustar y ajustar ciertas fuentes como desees. Pero sólo cambiemos la fuente y veamos qué pasa. Puedes elegir sans-serif, serif o mixto. Basta con hacer clic en esta fuente Poppins y ahí puedes ver las diferentes fuentes se cambia e incluso la navegación se cambia a otra fuente. Este es probablemente algún error que lo convierte en un cuadrado negro, pero la fuente se cambia. Si golpeo “Guardar” estoy adivinando que se cambiará la fuente. Sí así que no te importe ese pequeño bicho. Pero probemos las fuentes serif en su lugar o la fuente mixta. Para este sitio web, vamos por algo clásico. Escogeré este Futura. Aquí puedes cambiar el tamaño base si quieres tener un tamaño más pequeño. Vayamos por 14. Si haces clic en el pequeño símbolo de configuración, puedes entrar y cambiar las ciertas fuentes y modificarlas. Al igual que tal vez quieras tener más grasa. Simplemente pulsa “Save” y tal vez nos deshagamos de ese bicho. Incluso puedes cambiar los estilos de fuente aquí a otra fuente si quieres y puedes entrar y cambiar el peso, el estilo, la altura de línea, el espaciado entre letras, la transformación del texto. Parece como si golpeara guardar, entonces verás el texto y el bug parece desaparecer. Volvamos aquí. Se puede cambiar el tamaño de los diferentes encabezados y pulsar “Guardar”. Ahora volvamos atrás y entremos en los párrafos. Esa es la fuente Poppins. Se puede cambiar el peso de eso también y el estilo y la altura de línea, los diferentes párrafos, el tamaño de los mismos y todos los ajustes. Puedes experimentar con eso tú mismo. Si no tienes tanto conocimiento sobre tipografía, yo sólo iría por las combinaciones de fuentes estándar que Squarespace ha prehecho para ti. Básicamente, puedes hacer todos los cambios que quieras, para que sea lo más fácil posible. Yo sólo iría por una combinación de fuentes prefabricada que Squarespace ya armó. Es así como cambias la fuente de tu conjunto. 15. Diseño: colores: Cambiemos los colores de tu página web. En el menú de diseño, haga clic en colores y aquí podemos cambiar la paleta de colores y los temas de sección. Haga clic, “Editar” en la paleta de colores y tienes pellets de diseñador que están prefabricados, cual es bastante bonito por lo que no necesitas pensar tanto en la paleta de colores. Si utilizas las paletas prefabricadas de diseñador, Vamos por esta rosa. Ya se puede, obtener un pellets de una imagen. Puedes arrastrar y soltar desde un color para empezar con un color y elegir a qué paleta de colores quieres ir desde allí, y colores personalizados. Incluso si tienes una paleta de diseñador, vamos por esta y haz clic en editar colores personalizados. Puedes entrar y cambiar los colores a una paleta más personalizada que te convenga. Segundo es entrar y hacer que eso un poco más rosa por ejemplo. De acuerdo, entonces tal vez algo así y si haces clic en temas de sección, puedes seguir adelante y editar todos los demás temas prefabricados en tu página web. Aquí puedes ver cuáles son los temas seleccionados en esta página. Es blanco mínimo aquí arriba y blanco mínimo en este contenido. Vayamos por el blanco mínimo y veamos qué podemos cambiar. Se trata de un collage de imagen. Puedes cambiar todos estos ajustes en el tema de la sección mínima blanca. Simplemente me desplazaré hacia abajo hasta encontrar el bloque de imagen que dice collage de bloque de imagen y puedo ver que el fondo de la tarjeta está establecido en este color rosa claro. Si hago clic en eso, puedo cambiar a otro color en mi paleta o ir por color personalizado si quiero hacer eso. mí me gustan los de color rosa claro, sólo voy a ir por eso. Aquí hay tantas opciones en los temas de la sección. No voy a pasar por todos ellos, pero podrías simplemente dar click en algo que quieras cambiarlo. Se puede ver qué tipo de bloque es y cómo se puede cambiar eso. Por ejemplo, aquí se puede ver el encabezado y este es el collage de bloque de imagen. Estos son los enlaces sociales, los cuales puedes cambiar el color si lo deseas. Simplemente voy a seguir adelante y dar clic en cancelar aquí porque no he hecho ningún cambio y si piensas que esto es demasiado para aprender y a muchos ajustes, simplemente ignoraría los temas de la Sección y entraría y cambiaría esos y solo cambiaría la paleta de colores a algo que te guste. 16. Diseño: botones: En esta lección hablaré de botones. Ya que no tenemos ningún botón a nuestra página realmente, no creo que solo agregaría un botón. Entonces haga clic en “Editar” en la página Acerca. Simplemente voy a añadir un botón debajo de esta donde dice Contáctame. Ahora solo agregaré una dirección de correo electrónico y haremos que ese botón sea grande. A lo mejor quiero a la derecha o a la izquierda, pongámoslo a la izquierda. Pulsa “Guardar” ahí tenemos un botón que podemos cambiar el estilo de diseño. En el menú Estilo de diseño, haz clic en “Botones” y obtendrás estas diferentes opciones delineadas o sólidas, cuadradas redondeadas o pastilla. Vamos por una pastilla y el relleno es lo grande que es el botón alrededor del texto. Vamos por algo como esto, 1.5 RAM, hit “Guardar”. Para darle estilo aún más al botón, volvemos a Diseño, y vamos a primero Fuentes y puedes hacer clic en el “Pequeño símbolo de ajuste” en tu paquete de fuentes y hacer clic en 'Botones”. Aquí puedes hacer algunas configuraciones, hagamos las capas mayúsculas del botón. A lo mejor quieres un poco más de espaciado entre letras, así, tal vez pesos más altos. Se puede cambiar el tamaño de los diferentes botones para que yo pueda cambiar el botón grande, que es el que he elegido aquí. El botón medio no tengo eso en esta página y un botón pequeño. Pulsa “Guardar” volver atrás, de nuevo al panel de diseño, y luego podrás cambiar los colores del botón. Adelante y haga clic en “Tema de la sección” Este es el tema mínimo blanco en esta página. Puedes hacer click en el “Botón” y luego puedes cambiar el fondo del botón si quieres otro color. A lo mejor quiero el color de tu paleta. Yo solo iré por el negro y tú puedes cambiar el color del texto. Ahora ya sabes cómo peinar tus botones así que pasemos a la siguiente lección. 17. Diseño: animación: Echemos un vistazo al estilo de diseño como se llama animaciones, y esta es una lección muy rápida porque realmente no hay muchos ajustes que hacer aquí. Si recuerdas, cuando creamos los diferentes contenidos en nuestras páginas, podríamos ajustar la animación en las determinadas secciones. Por ejemplo, aquí, desplázate hacia abajo y podrías cambiarlo si lo deseas; escalado, desvanecimiento, sin animación ni predeterminado del sitio. Solo usemos el predeterminado del sitio y presionemos “Guardar”. Para cambiar la animación en todo tu sitio, haces clic en “Animaciones” en el menú de diseño, y luego puedes elegir uno de estos estilos, ninguno, desvanecimiento, escala diapositiva, clip. Creo que es escala se ve bien y se puede decidir la velocidad, lenta, media o rápida. Medio podría ser bueno y ahorrar. Esto significa que en qué página alguna vez en la que haga clic tendrá esa animación si no hemos establecido cierta animación a ese bloque de contenido. Esa fue una lección muy corta sobre animación. Siento que tener algo de animación en tu sitio hace que parezca realmente profesional. Puedes cambiarlo fácilmente aquí, así que solo puedes probarlo y ver qué te gusta. 18. Diseño: navegación: Ahora sigamos adelante y ajustemos esa navegación de tu sitio. En primer lugar, podemos mirar las fuentes dentro de esto en las lecciones anteriores. Cuando seleccionamos fuentes para todo tu sitio, entrarás en el estilo de diseño de fuentes, y luego en la configuración. Entonces solo puedes hacer clic en la parte superior aquí y obtendrás la configuración Avanzada, es decir, el Título del sitio, navegación del sitio, y el botón del encabezado. Sigamos adelante y echemos un vistazo al Título del Sitio, así que ese es éste. Puedes optar por tener un título de sitio que escribes, o puedes elegir tener tu logotipo. Te mostraré cómo agregar un logotipo en la siguiente lección, pero por ahora, solo cambiemos la fuente de este Título del Sitio. Podemos probar las fuentes Poppins, que se ve bastante bien, o puedes navegar en All Fonts y pulsar Guardar, Atrás, y aquí puedes cambiar todo tipo de ajustes como el Peso y el Estilo, Altura de Línea, Espaciado de Carta y todo eso. Haga clic en Guardar y, a continuación, en Volver. Después puedes entrar y cambiar la Navegación del Sitio. El ajustes prefabricados es que tienes el Párrafo como estilo. Pero también puedes entrar y cambiar esto. Puedes seguir adelante y cambiarlo a otra fuente. Vamos sólo por Poppins para esto y atrás, o puedes volver atrás y elegir Párrafo. Se puede cambiar el tamaño de la Navegación. Si querías un poco más grande, 1.3 se ve bien, o puedes cambiar el tamaño a Párrafo uno, Párrafo dos, Párrafo tres. Golpea Guardar y Volver. No tenemos ningún Botón de Cabecera en este momento, pero si teníamos uno, podemos cambiar la configuración aquí. Demos click Atrás y te mostraré cómo cambiar el Diseño de Cabecera. Haz clic en Editar una página, Editar encabezado del sitio y luego Diseño del encabezado. Aquí puedes cambiar dónde quieres que aparezca tu Menú y Título del Sitio. Tratemos de tener mi Título del Sitio en el medio y Título del Sitio y Logo. Simplemente vamos a repasar Título del sitio por ahora y les mostraré cómo agregar un logotipo en la siguiente lección. Elementos que puedes elegir si quieres tener un botón, Enlaces Sociales, si quieres que aparezcan en tu Menú, ese Tamaño de Icono Social. Si tienes una tienda, puedes añadir un Carrito. Vamos a dar click Atrás y Colores. Puedes usar un fondo transparente, o puedes elegir tener un color de tu Menú. Vamos por un fondo transparente. Hit Style y aquí puedes seleccionar cuánto relleno quieres en tu Menú, cuánto espaciado quieres entre los Elementos, y cuánto espaciado quieres con los Enlaces. Si quieres que un Menú tenga unas posiciones fijas para que cuando desplázate hacia abajo el Menú siempre esté ahí, o si quieres que esté justo en la parte superior de la página, usemos una posición fija. Aquí puedes elegir si quieres fijar el Estilo de Encabezado para que sea básico o desplázate hacia atrás. Sólo elijamos Básico. Puedes elegir si quieres tener un ancho completo o un inserto. Vuelve atrás y creo que cambiaré el Diseño de Cabecera por el que tenía antes. Porque como ese mejor. Después solo tienes que hacer clic en “Guardar”. Eso es todo lo que hay para cambiar el estilo de diseño de la Navegación. 19. Diseño: añadir un logotipo: En esta lección vamos a añadir un logotipo a su sitio en lugar del título del sitio. Es decir, si ya tienes un logotipo, puedes subirlo y añadirlo a tu sitio. Si no tienes logotipo, solo puedes usar una fuente como te mostré en la lección anterior y agregar tu nombre de marca a tu sitio. Pero vamos a añadir un logotipo. Haga clic en “Editar”, y “Editar encabezado del sitio”, título del sitio y logotipo. Aquí dice que el logotipo sustituye al título del sitio en todas las páginas. Haga clic en el pequeño botón “Subir”. He guardado mi logo como un P&G. Si quieres asegurarte de que tienes un fondo transparente en tu logo, lo guardas como un P&G. Click para subir el logo. Aquí puedes elegir la Altura del Logo, que básicamente significa el tamaño de tu logo, y la Altura máxima del Logo Móvil. Vamos a probar cualquiera de los dos e ir a la vista móvil y a la vista de escritorio de nuevo. Podemos volver a la Altura del Logo Móvil y aumentar el tamaño a 50 píxeles y ver si eso hizo algún cambio. De acuerdo, eso se ve mejor en la vista móvil. Eso es todo lo que hay para agregar un logotipo a tu página web. Así que golpea “Guardar”. No importa en qué página haga clic ahora, tendrá su logotipo en la parte superior de su sitio web. 20. Diseño: pie de página: En esta lección, solo te mostraré cómo cambiar el pie de página de tu sitio. El pie de página es el espacio inferior de tu sitio web. Da clic en “Editar” y aquí tienes editar pie de página en la parte inferior de tu página. Cuando cambies el pie de página, cambiarás el pie de página en todas tus páginas, en todo tu sitio web. A lo mejor quieres tenerlo hecho con base cuadrada ahí o tal vez no lo hagas, así que solo puedes quitar esa. Puedes modificar los enlaces sociales, tal vez los quieras más grandes y puedes escribir tu nombre aquí, o tal vez quieras incluso añadir tu logo. Si desea agregar su logotipo, puede hacer clic en el símbolo de pequeñas gotas Agregar imagen, y buscar imagen importada y agregar el logotipo que acabamos de subir. No queremos ningún título al logo y solo toca “Aplicar”. Si quieres que la imagen sea más pequeña, agrega un espaciador haciendo clic en el símbolo de gota, “Añadir espaciador”, y luego solo puedes agregar más espacio al costado de tu logo. Quitemos el cuadro de texto, y aquí tienes tu logo y tienes tus enlaces sociales. Si quieres un menú al pie de página también, no creo que sea necesario cuando tienes este pequeño sitio web con solo unas pocas páginas. Pero si sí quieres tener eso, puedes agregar ya sea un enlace de contenido, lo que significa que vincula a tus páginas, o puedes agregar un cuadro de texto y escribir tus páginas, y simplemente eliminar los enlaces de contenido y luego podemos hacerlos alineados a la derecha. Otro truco, si quieres tener solo una fila hacia abajo es aguantar el turno y hacer clic en “Enter” para acercarte a una distancia más cercana. Después podemos agregar enlaces a este texto, así que haz clic en el texto, haz clic en “Vincular”, y puedes agregar una página, la página de inicio, y pulsar “Guardar”. Haz lo mismo en el blog, página, el blog y pulsa “Guardar”. Seleccione el texto anterior, haga clic en “Agregar enlace, Página, y Acerca de”. El mismo con contacto, haga clic en el “Enlace, Página, y Contacto”. Olvidé hacer clic en aplicar en esos para que realmente no consiguieran enlaces, así que hagámoslo de nuevo. Asegúrate de golpear “Aplicar”, presionar “Hecho” y guardar. Ahora hiciste un pie de página que se muestra en todas tus páginas. Si quieres que el pie de página esté en un color diferente, haz clic en “Editar pie de página”, y haz clic en el pequeño símbolo “Editar”. Puedes ir por fondo si quieres tener alguna imagen o algo como fondo. Pero de lo contrario puedes elegir color y agregar un color a tu pie de página. Probemos la luz mínima y veamos cómo se ve eso. Vayamos por el blanco mínimo. En el formato, puedes seleccionar la altura de sección o entrar y modificarla tú mismo. El ancho de contenido si quieres tenerlo en medio de tu página, y también la alineación. Pero creo que esto se ve bien, así que dale “Guardar”, y aquí tienes tu pie de página. Ahora se puede ver cuando se desplaza hacia abajo que el menú de navegación se está desplazando hacia abajo con su página a medida que se desplaza hacia abajo. 21. Diseño: bloques de imágenes: Entonces el último estilo de diseño que quiero mostrarte cómo retocar, eso es lo básico de lo que necesitas saber para crear un sitio básico de portafolio son los bloques de imagen. Entonces ve a “Diseño” y “Bloques de imagen”. Este es un bloque de imagen, es un collage de bloque de imagen, y hay algunos bloques de imagen más. Entonces, solo agreguemos unos bloques de imagen a esta página para ver los cambios que podemos hacer. Haga clic en el símbolo de la pequeña gota y la imagen y sólo vamos añadir una imagen y hacer clic en “Diseño” y estos son los bloques de imagen. Por lo que es póster, tarjeta, superposición, collage y pila. Entonces vamos por carta, toca “Aplicar”, ahora solo escribimos un título y un subtítulo. Simplemente cambiaré el título y cambiaré el subtítulo por diferentes párrafos y encabezados y pegaré “Hecho”, y guardaré. Por lo que en los bloques de imagen, puedes cambiar algunos ajustes. Esta es la tarjeta de bloque de imagen, si hace clic en ese bloque de imagen, se mostrará la tarjeta de bloque de imagen. Puedes elegir si quieres que la posición de contenido sea centro ahí arriba o abajo. Vamos sólo por el centro, la alineación del texto, vamos por el ancho de imagen izquierdo, separación de imagen del texto, y la separación de título entre sí, el título y el subtítulo. Entonces esa fue la configuración que podrías hacer para la tarjeta de bloque de imagen. Entonces sigamos adelante y veamos qué puedes hacer en el collage de bloques de imagen, y esa es la posición de contenido. A lo mejor quieres que esté centrado y toma el ancho de la imagen de alineación, ahora es 70 por ciento. Entonces me gusta que se superpongan, así que el 70 por ciento se ve bien. ancho del contenido es el ancho del texto, vamos a ir por 50 hay desplazamiento de contenido desplazamiento y luego todos y luego todosestos ajustes con los que puedes experimentar. Vamos a golpear “Guardar” y “Diseñar” y luego volver. Golpea “Editar” y solo eliminaré este nuevo bloque de imagen que creé solo para mostrarte. Aquí hemos creado algunas nuevas configuraciones a este bloque de imagen que el contenido del texto está en el centro del contenido de la imagen. Golpea “Guardar”. Ahora, sabes un poco cómo hacer algunos ajustes a los diferentes bloques de imagen. 22. Modificaciones finales: De acuerdo, entonces ahora hemos creado todo nuestro sitio web, todas las páginas e hicimos todos sus cambios de estilo de diseño. Vamos a repasar todo el sitio web y ver si queremos hacer algunos cambios. Daremos click en la vista de pantalla completa y solo me desplazaré por mis páginas para ver si quiero hacer cambios. Esta primera página se ve bien, aunque no me gusta la fuente de la navegación, así que cambiemos eso de inmediato. Haga clic en “Fuente” y el “Diseño”. Haga clic en “Configuración” y haga clic en esa “Fuente de navegación” y aquí podrá cambiar cuál usar. Vamos a probar Futura en su lugar. Eso me gusta mucho más. Da clic en “Guardar” y tal vez quieras tener unos pesos más a 400. A ver si queremos tenerlo en mayúsculas. De esa manera queremos tener más espaciado entre las letras tal vez. Creo que me gusta mejor la minúscula y quitar el espaciado entre letras y tal vez aumentar un poco el tamaño. De acuerdo, entonces algo así. Eso se ve mucho mejor para mí. Volvamos atrás y vista completa otra vez. En realidad no siento que sea muy lógico tener primero el blog y sobre ese contacto. También podría querer agregar la página principal. Esta página a la navegación principal. En el momento en que estás en otra página y haces clic en el logotipo, te vas a casa, que es estándar para todos los sitios web. Pero también podrías optar por tenerlo en tu navegación principal. Eso tiene más sentido para mí en este sitio básico de portafolio, donde solo tienes estas cuatro páginas diferentes. En el menú de navegación principal, también puedes hacer clic y arrastrar para seleccionar dónde quieres que aparezcan las páginas en el menú y volver a hacer clic en la vista de pantalla completa. Haga clic en el botón “Acerca de la página" y desplácese hacia abajo. Ese se ve bien. El blog se ve bien también. El contacto, tal vez quiero cambiar este fondo porque realmente no puedo ver esa fuente en esa. De lo contrario, creo que se ve bien. Fuera del modo de pantalla completa. Haga clic en “Fuente” y el botón inferior Texto y estilo. A lo mejor sólo funciona si aumento esos lados de párrafo. No, eso no funcionó. Vamos a seguir adelante y personalizar el tamaño a un poco más grande y eso me queda mejor. A lo mejor queremos personalizar el peso también. Eso me queda mucho mejor con el peso 500 en este botón. Simplemente puedes ir y venir en tu sitio y asegurarte de que estás contento con todos los ajustes. Para mí, estoy realmente contento con esto ahora, vuelve a casa y vuelve a desplazarse por él. Si hago clic en las imágenes, obtendré un modo de caja de luz y podré desplazarse por las imágenes. Da click en “Acerca de” y eso es un poquito sobre mí. El blog. Si entro en un blog, ¿cómo se ve eso? Eso se ve bien y una página de contacto. De acuerdo, entonces estoy muy contento con cómo se ve esto ahora. Ahora hemos creado toda nuestra página web. 23. EXTRA: añadir un icono de navegador: Supongo que esta es una pequeña lección extra sobre cómo agregar un favicon o un icono de navegador, ya que creo que es el nuevo nombre para este pequeño ícono que se muestra en la parte superior de tu página. Por ejemplo, en mi página web, tengo una pequeña flor como favicon o icono de navegador. Configuración estándar para Squarespace es tener esta caja negra y eso no se ve tan bonito. Puedes crear un favicon en cualquier tipo de software de diseño, probablemente podrías crearlo en tu iPad o en Illustrator, Photoshop, incluso en Canvas si usas eso. Pero como esa sería toda otra clase sobre cómo crear un favicon de todas estas formas diferentes, simplemente voy a pasar por cómo crear realmente rápidamente un favicon en línea. Yo sólo voy a Google favicon. Encontré este sitio, favicon.io, donde puedes crear un favicon a partir de texto, un archivo PNG a ICO, si quieres ese formato y de un emoji. Vamos a crear uno a partir de texto que es la forma más sencilla. A lo mejor quiero tener una M y una F o simplemente una M, Maja Faber como mi favicon. Puedo seleccionar el fondo. mí me gusta el círculo y el tamaño de la fuente un poco más pequeño para que se deambule en esto en este círculo, puedes cambiar la fuente a la que quieras. Solo usemos esta literalmente una fuente. Creo que lo haría es usar una M en lugar de una M y una F. Ajustar el tamaño de la misma a tal vez 70. El color de la fuente que quiero luz y el color de fondo puede ser, tal vez rosa. Entonces acabo de golpear “Download”. Esto descargará un archivo zip que he abierto. Aquí tienes todos los favicons diferentes que puedes subir a tu sitio. Volvamos a nuestro sitio de Squarespace, haga clic en “Inicio”, diseño e icono del navegador y agregue favicon. Aquí dice, usando el campo de abajo, puedes subir un icono de URL del navegador para usarlo con tu sitio. Este icono puede estar en formato PNG o ICO, y será redimensionado por el navegador para que se muestre en tu barra de URL. Nota, es decir, no es compatible con formato PNG. A lo mejor deberíamos elegir el formato ICO, solo tienes que hacer clic y arrastrar eso, pulsar “Guardar” y ver cómo se ve eso. A lo mejor necesitas recargar el sitio. Ahí tienes el ICO favicon. En realidad, siento que eso no se ve tan bien. Simplemente volveré y en realidad seleccionaremos el PNG favicon de todos modos. Eso tengo en mi página web y siento que funciona realmente bien. Voy a hacer es seguir adelante y eliminar esa y arrastrar en el PNG hit “Guardar”, y refrescar el sitio. Ahí tienes tu favicon o icono de navegador. Como se muestra tan pequeño, realmente no se puede ver lo que es, pero es más bonito que sea un poco de color en lugar de solo una caja negra. 24. EXTRA: página protegida por contraseña: En esta lección, te mostraré cómo agregar una página protegida con contraseña. Es posible que tengas cierto contenido que deseas tener protegido con contraseña. Para mí, ese es mi catálogo con mi obra de arte, mis patrones, que solo muestro a clientes potenciales. Por lo que tengo un catálogo con más de 200 patrones que está en mi página web pero protegido con contraseña. Vamos a crear un duplicado de la página de inicio, donde ya tenemos una galería. Haga clic en la configuración más reciente y duplique la página y démosle un nombre a este catálogo. Por lo que se ve exactamente como la página de inicio por ahora. Lo coloqué debajo de las páginas no enlazadas y solo editaré esta página, eliminaré el Instagram y solo puedo agregar algunas imágenes más para asegurarme de que mantengamos esas páginas separadas. Si estás creando un catálogo con la contraseña como yo tengo, realmente no hay estándar hasta donde yo sé, como se supone que se vea. Mi sugerencia y mis consejos es mantenerla lo más simple posible porque lo que quieres con este catálogo es vender tu obra de arte, por lo que solo quieres que un visitante o el cliente potencial se desplace por tu página para poder ver tu obra de arte. En mi catálogo, no tengo ninguna imágen ni maquetas, así que solo puedo quitarlas. Solo agreguemos unos patrones más. Simplemente voy a golpear “Close” y podemos editar el tipo de galería, haciéndolo tal vez una cuadrícula simple con el mismo tamaño de las imágenes. Entonces tal vez algo como esto. Si estás creando un catálogo, también podrías optar por tal vez ordenar tus patrones o ilustraciones en colecciones o en qué tipo de patrones son o en lo que quieras ordenar tu catálogo. Pero esta lección es sobre cómo crear una página protegida con contraseña. Cómo eliges diseñar la página de tu potencial catálogo depende totalmente de ti. Así que hit “Guardar” y ahora tenemos nuestro catálogo aquí. Simplemente podemos asegurarnos de que tenemos las babosas URL correctas, así que dale al catálogo de “Ajustes” y URL slug. Aquí podemos elegir tener una contraseña en nuestra página. Solo usemos el catálogo de contraseñas y pulsemos “Guardar”. Cuando ves un pequeño símbolo de candado, sabes que esa página está protegida por contraseña. Para ver cómo se ve cuando intentas acceder a este sitio, vas a diseñar y bloquear pantalla. Puedes tener diferentes contraseñas para diferentes páginas pero solo puedes tener un diseño en tu pantalla de bloqueo. Por ejemplo, elige algo como esto, como un diseño, luego vuelve a la pantalla de bloqueo y aquí puedes cambiar la marca. A lo mejor quieres tu logo ahí en su lugar o simplemente tu nombre y puedes elegir si quieres mostrar un símbolo de candado, así que pulsa “Guardar”, atrás y “Media”. Puedes pulsar “Ninguno”, si no quieres una imagen en el fondo y darle estilo al color del fondo. Vamos por un rosa. Puedes cambiar si quieres que el borde llegue a la página. Qué tipo de cerradura quieres. El color del candado, el estilo de contraseña. ¿ Es este estilo? Qué fuente quieres en el cuadro de contraseñas? Vamos a elegir lo mismo que en nuestro sitio y golpear “Guardar”. Por lo que ahí tienes tu página protegida con contraseña. Se trata de una pantalla de bloqueo general, por lo que aparecerá en todas las páginas que hayas bloqueado con la contraseña. La diferencia es que puedes usar una contraseña diferente en todas las páginas. Es así como se crea una página protegida con contraseña. 25. EXTRA: crea páginas nuevas: En esta lección, te mostraré cómo agregar nuevas páginas a tu plantilla. En esta clase nos enfocamos mayormente en usar la plantilla que hemos elegido. Porque siento que si eres un principiante Squarespace, ese es un muy buen comienzo para no hacerlo demasiado complicado. Pero si sí quieres agregar páginas, te mostraré justo como hacer eso. Como mencioné antes, tienes la navegación principal bajo Páginas no vinculadas. Si añades una página a la navegación principal, ésta aparecerá en tu navegación. Si añades una página a Not Linked, no la puedes encontrar en tu barra de navegación. Lo puedes encontrar a través de un enlace o URL Slug. Puede arrastrar y soltar las páginas de la navegación principal a No vinculado. Realmente no importa dónde crees tu página. Empecemos con cómo crear una nueva página. Si eres principiante en Squarespace, lo cual me imagino que lo eres si estás tomando esta clase, me parece que es más fácil empezar con un diseño de página. Demos click en Diseño de página. Aquí tienes todas las páginas que puedes usar como plantillas. Contamos con las páginas generales, citas sobre página, contacto, servicios, galería, equipo, opiniones, menú, RSVP, FAQ, política de privacidad, y términos de servicio. Sólo vamos por general y veamos qué tipo de páginas tenemos que elegir aquí. Empecemos con este general 2 y veamos cómo se ve eso. Al hacer clic en un Diseño de página, obtendrás el diseño completo de esa página. Por supuesto puedes modificarlo como desees. Si quieres hacer eso, haces clic en editar y luego entras en diferentes secciones y las modificas. Se puede pasar el ratón sobre, cambiar la imagen, por ejemplo, como hicimos en las lecciones anteriores. Se puede dar formato a esta sección con cualquier altura, es la altura de sección y el ancho de contenido. Además, puedes cambiar los colores si quieres un tema de sección diferente. Vamos sólo por un mínimo de luz para ese. Si quieres agregar una sección a tu diseño, das click en el signo más y agrega una sección. Solo agreguemos esta lista. Puedes entrar y editar las secciones como quieras. Cambia la fuente, encabezamiento, un párrafo a algo que encuentres luce bien. Sólo cambiemos esa imagen también y veamos qué se nos ocurre. A lo mejor a esta imagen. Como puedes ver, tienes un poco de superposición en esta imagen, lo que significa que no muestra que son verdaderos colores. Tiene una superposición en la imagen. Si no quieres superponer, necesitamos entrar en el estilo de diseño, colores, temas de sección, y por eso es mínimo. Haga clic en su bloque de imagen. Aquí, puedes cambiar la superposición de la imagen. Si arrastras tu superposición de imagen al lado transparente, no obtendrás ninguna superposición en tus imágenes en el bloque de imagen. Choque en el tema de la sección mínima blanca. Golpea Save y vuelve. También puedes editar tu pintura agregando bloques. Te mostré cómo agregar secciones haciendo clic en el signo más. Si haces clic en el pequeño símbolo de gota que aparece al pasar el cursor sobre algo, puedes agregar bloques. Da click en el pequeño letrero de gota, y aquí puedes sumar todos los bloques. Solo agreguemos bloque de texto. Cambia la alineación al centro y escribe algo aquí. Se puede cambiar el estilo de párrafo, tal vez algo así. Ahí agregaste un bloque en tu sección. Golpe hecho, y guardar. Si mueves tu página a la sección no vinculada, no aparecerá en el menú. Entonces agreguemos otra página. También puedes empezar con una página en blanco, por supuesto. Pero creo que un diseño de página es bueno si eres principiante. Vamos por una página de revisión tal vez y revisemos 2, haga clic en el modo de pantalla completa para ver cómo se ve eso. A lo mejor quieres agregar alguna imagen o algo aquí para que sea un poco más interesante. Solo agreguemos este. Solo agreguemos una imagen de Unsplash y aplicemos. A lo mejor quieres quitar algo. cursor sobre ese bloque y haz clic en el pequeño bote de basura. Golpear Hecho y guardar. Básicamente puedes comenzar con el diseño de página y agregar bloques a tu diseño de página para personalizarlo como quieras. Sólo arrastrémoslo hacia abajo también. Y si tienes una tienda fuera de tu página web, como una tienda de Etsy o una tienda de Society6 o algo así. Bueno, entonces puedes agregar un enlace. Da clic en el pequeño signo más y agrega enlace. Digamos tienda. Podemos agregar nuestra tienda online de empresa de diseño favorita. Arrastra eso hacia abajo para que lo tengamos al final de la navegación. Entonces solo daré clic en Inicio pantalla completa e intentaré dar clic en tienda y ver qué pasa. Eso me llevará a un enlace externo fuera de la página web. Lo último que quería mostrarles sobre cómo agregar páginas es cómo agregar más páginas bajo un solo encabezado en la navegación. Haga clic en carpeta. Sólo llamémoslo noticias. Arrastre eso hasta el final de la navegación y, a continuación, arrastre las páginas a su carpeta. Añadamos esa y esa, hit home. Ahora como puedes ver, tienes una navegación que aparece debajo de tu carpeta. Si pasas el cursor sobre las noticias, puedes hacer clic en las páginas que están debajo y encontrarlas en el menú. Vamos a arrastrar hacia fuera la carpeta de noticias porque queremos usar esa. Haga clic en casa. Ahí, tenemos nuestra página web. Puedes explorar más sobre la adición de nuevas páginas. Puedes agregar tiendas por las que no pasaré en esta clase porque necesitas tener un negocio o un plan de comercio. Puedes agregar eventos y portafolios que te mostré antes en clase, páginas en blanco, diseño de página, carpetas, y enlaces. 26. Publica tu sitio web: Ahora hemos creado toda nuestra página web de portafolio y hemos terminado y todo lo que tenemos que hacer es publicarla. Te mostraré cómo publicarlo, pero no publicaré mi sitio porque entonces necesito pagar una suscripción y un dominio. Te mostraré cómo puedes publicar el tuyo. Haga clic en “Inicio”, “Configuración”, “Disponibilidad del sitio”, y luego haga clic en “Actualizado para publicar”. Aquí seleccionarás tu plan y todo, y luego podrás publicar tu sitio cuando te inscribas en un plan. Simplemente haré clic en “Atrás” y te mostraré dónde conectarás tu dominio. Obtendrás un dominio incorporado, que es un dominio extraño, cocodrilo cello-yaak-squarespace.com. Puedes personalizarlo si lo deseas, pero seguirás teniendo el squarespace.com al final. Intentemos cambiarle el nombre a majasquarespace.com. En realidad puedes usar este dominio si quieres, nunca caduca. No cuesta nada. También puedes usar un dominio de tu propiedad. Puedes aprender más sobre cómo conectar eso aquí. Ya lo he hecho antes, no es tan difícil, pero se necesita un poco de paciencia para atravesar todos los pasos. También puedes conseguir un dominio a través de Squarespace, lo cual es genial porque entonces tendrás todas las facturas de tu página web dentro de Squarespace. Esto es lo que he hecho con mis sitios web. Compré el dominio a través de Squarespace. Puedes elegir tu dominio y hacer clic en “Agregar”. Para más información al respecto, puedes consultar el centro de ayuda de Squarespace, del cual te mostraré más sobre en la siguiente lección. No es difícil conectar el dominio. Si ya no tienes dominio, te sugeriría que lo compres a través Squarespace porque todo lo hace mucho más fácil. No es tan difícil conectar el dominio si ya tienes uno tampoco. 27. Ayuda y preguntas: Yo solo quería s tomarme este tiempo para pasar por el centro de apoyo y ayuda de Squarespace contigo. Porque no soy un apoyo de Squarespace. He construido unas cuantas webs con Squarespace y conozco mi camino alrededor de ella. Pero en esta clase, les estoy mostrando los conceptos básicos sobre cómo crear un sitio web de portafolio simple. Si quieres conocer técnicas más avanzadas y tener preguntas específicas, debes echar un vistazo al centro de ayuda de Squarespace. Cuando estés conectado, puedes acceder al centro de ayuda de Squarespace haciendo clic en “Ayuda” en el menú y luego en “Base de Conocimiento”. Aquí tienes un montón de guías o puedes buscar algunas palabras clave si quieres tener ayuda con algo específico. Digamos que quiero ayuda con los bloques de imagen. Se puede hacer clic en el artículo sobre bloques de imagen. Puedes ver si te desplazas hacia abajo que dice que este video aplica a Squarespace versión 7.0. Esa fue la versión anterior de Squarespace. Podría significar que esta guía de ayuda es la misma tanto para la versión antigua de Squarespace como para la nueva versión de Squarespace. A la nueva versión se le llama 7.1. Aquí puedes ver si te desplazas hacia abajo que el diseño en línea admite un estilo de leyenda establecido por estilos de sección, versión 7.1 o versión de plantilla 7.0. He encontrado que Squarespace acaba actualizar su centro de ayuda y agregó la ayuda para 7.1, la nueva versión de Squarespace. Podrás encontrar esa información en las diferentes páginas. Simplemente pinchemos en una página diferente, Blogging, por ejemplo; Blogging con Squarespace y veamos cómo se ve eso. Aquí tienen la versión 7.1 y también puedes hacer click en la versión 7.0. La versión 7.1 es de lo que quieres leer, plantillas y diseños, trabajando con plantillas. Aquí dice, esta guía es para la versión 7.0. Todas las diapositivas de la versión 7.1 comparten la misma plantilla. Para conocer más, visita sobre Squarespace 7.1. Debes asegurarte de leer sobre la versión que estás usando, que es la 7.1 que estamos usando en esta clase. Pero tienes tanta información aquí a la que puedes acceder. También puedes echar un vistazo a la comunidad donde podrías obtener ayuda con tu respuesta. Puedes unirte a nuestro webinar y si no encuentras lo que buscas, puedes contactar a un asesor, puedes contactar a un asesor, así que haz clic en “Contáctanos”. Aquí puedes seleccionar de qué se trata tu pregunta. Elige un tema. Digamos Bloques y obtendrás estos artículos. Si aún no encuentras lo que buscas, puedes enviar un correo electrónico a Squarespace o puedes charlar en vivo. En este momento el chat en vivo está cerrado. Pero para mí esto ha sido realmente útil. Por lo que el chat en vivo es un servicio gratuito y también el correo electrónico. Pero con el chat en vivo, puedes consultar con el soporte y ellos te pueden ayudar a encontrar las respuestas a preguntas que no puedes encontrar en los artículos prefabricados. 28. Reflexiones finales: Eso es todo para esta clase. Espero que te haya parecido útil y motivadora esta clase en la creación de tu propia página web de portafolio. Como mencioné antes en clase, no hace falta que tarden meses en crear un sitio web y no necesitas crear un sitio web realmente personalizado y único como creativo. Está bien crear el sitio web a partir de una plantilla. Es el arte que creas que quieres mostrar, no tus habilidades de diseño web. Con eso dicho, muchas gracias por mirar. Si te gusta esta clase, pulsa el botón “Seguir” por mi nombre aquí abajo. Si tienes alguna duda, por favor pregúntalos en la página de Comunidad aquí en clase. Siéntete libre de dejar una reseña para hacerme saber si disfrutaste de esta clase, me encantaría escuchar tus pensamientos. Además, asegúrate de compartir tu proyecto. Si publicas tu proyecto en Instagram, siéntete libre de etiquetarme @maja_faber. Gracias de nuevo por ver.