Aumenta tu ajetreo lateral; Branding y diseño para tu sitio web de Squarespace | Rosanna Costello | Skillshare
Buscar

Velocidad de reproducción


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Aumenta tu ajetreo lateral; Branding y diseño para tu sitio web de Squarespace

teacher avatar Rosanna Costello, Quitting my 9-5 so you don't have to!

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Introducción

      0:38

    • 2.

      Investigación e inspiración

      2:11

    • 3.

      Branding

      9:53

    • 4.

      Creador de logotipo de Squarespace

      10:24

    • 5.

      ¿Qué versión de Squarespace?

      1:48

    • 6.

      Hack de flujo de trabajo

      1:56

    • 7.

      Estilos de sitio

      14:33

    • 8.

      Bloques de contenido

      18:01

    • 9.

      CIERRE

      0:48

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

633

Estudiantes

3

Proyectos

Acerca de esta clase

Un visitante de tu sitio web puede tomar menos de 15 segundos antes de que decidan si se quedarán y echarán un vistazo. El diseño y la creación de marca de tu sitio web: cómo se ve y se siente, necesita atraer a tu público objetivo, no solo a ti, sino a tu público.

En esta clase aprenderás a diseñar tu sitio web para que se vea bien, ¡maldita sea! Crearemos directrices de marca para ti y tu sitio web, en pequeños y fáciles pasos, para que tengas un sitio web coherente y consistente. Esto también se puede llevar a cabo en cualquier trabajo de redes sociales o de impresión que crees.

También echaremos un vistazo al creador de logotipo de Squarespace, gratuito y incorporado. Una herramienta súper útil que te proporciona un archivo descargable que se puede usar en tus redes sociales o imprimir también en tu trabajo.

No se necesitan conocimientos previos, esta clase está dirigida a principiantes por lo que si no has visto mi clase en Cómo crear tu primer sitio web de Squarespace, sugiero que lo veas primero para empezar.

He incluido una descarga en pdf para ayudarte a trabajar con tu Branding y un pdf extra con algunas opciones de paleta de colores.

Esta clase se basa en el uso de Squarespace versión 7.0. Si has creado una cuenta de Squarespace desde enero de 2020, se te asignará automáticamente un sitio web de Squarespace en la versión 7.1. Para lanzar un sitio web en la versión 7.0 y seguir esta clase, usa el enlace que aparece a continuación para dirigirte a la tienda de plantillas original para Squarespace 7.0.

Enlace para la tienda de plantillas Squarespace 7.0

skillshare.com/browse/squarespace

Conoce a tu profesor(a)

Teacher Profile Image

Rosanna Costello

Quitting my 9-5 so you don't have to!

Profesor(a)

I'm a Furniture and Product designer from the UK, I studied at Dundee University in Scotland and graduated in 2011. In September 2018 I left my job as Design Manager for a large furniture company in search of a different way of life. Through my experience working as a Designer and now building a new lifestyle whilst travelling (I'm currently in New Zealand) I've come to understand how important it is to be passionate about what you do, or to at least have an aspect within your working life that fires you up. A Side Hustle is the perfect way to do this, I even have my own side hustle going on over at Hilda.co.

Follow me as we learn how to bring creativity and passionate side projects into our daily lives. 

I'm over on Instagram here for some day to day escapi... Ver perfil completo

Level: Beginner

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. Introducción: Hola, soy Rosanna. Bienvenido a crecer tu lado Hustle, branding y diseño para tu sitio web de Squarespace hoy vamos a echar un vistazo a cómo desarrollar tus propias pautas personales de marca para ti, tu sitio web y en última instancia tu ajetreo lateral. Y luego vamos a ver cómo traducir eso a tu sitio web y conseguir el diseño y sentir a través de cada página de tu sitio. Esta es una clase de principiante, por lo que no se necesita ningún conocimiento previo de squarespace, pero te ayudará si ya tienes tu sitio web squarespace build. Entonces si aún no has echado un vistazo a mi otra clase sobre cómo crear tu primer sitio web y volví aquí y empecemos. 2. Investigación e inspiración: De acuerdo, vamos a saltar en el diseño de tu sitio Web Ladrón. El primer lugar para empezar para mí con un nuevo proyecto es siempre con investigación e inspiración. Esto va a ser especialmente importante si estás construyendo. Este sitio web es parte de tu lado Hustle. Tener una base sólida de investigación e inspiración te dará dirección y enfoque para cuando estés justo en medio de todo para enfocarte en la fase de investigación. Echemos un vistazo al proyecto de clase. El primer apartado es compartir una imagen fuera de tu inspiración con unas cuantas viñetas explicando lo que te gusta de ella. En primer lugar, queremos empezar con una mirada amplia sobre diferentes medios de potencial de inspiración, como revistas, sitios web o carteles de Pinterest . Piensa en el proceso como un embudo. Comienza en la parte superior con el espectro más amplio de inspiración y luego refina hacia abajo y hacia abajo hasta que tengas tus inspiraciones elegidas. Pinterest es un gran lugar para recolectar todo junto, ya que es un buscador visual que puedes buscar y luego guardar tus imágenes de inspiración elegidas . Aquí está mi última pizarra inspo. Yo sólo he guardado aquí mis favoritos en cuanto a fuentes, colores, imágenes y estilos de colores, esa manera tengo un lugar han recogido inspiración curada a la que puedo referirme y mantener las cosas simples. Ya veremos cómo este tablero de Inspiración informa mi diseño a medida que avanzamos por la clase para la primera parte de nuestro proyecto de clase, asegúrate de compartir una captura de pantalla de tu elección e imágenes de inspiración y agrega algunos puntos sobre lo que tú me gusta. Tan solo asegúrate de que la colección final sea solo tus favoritos absolutos a lo sumo, tres de cada uno de la selección de fuentes, colores, imágenes en ventas. Si te sientes abrumado, hay un enlace a mi tablero de Pinterest en el proyecto de clase están por debajo para el escenario, un amplio elemento de investigación para que puedas echar un vistazo y ver si hay algo ahí que te guste conseguirte comenzó. Asegúrate de guardar tu foto inspo en el proyecto de clase que aparece a continuación y comparte lo que te encanta de él . Por lo que para redondear y terminar la Lección uno, conseguir la investigación y, lo más importante, tratar de disfrutar de esta etapa. Estás buscando cosas que amas y quieres emular. Qué divertido con él y estar abierto. La inspiración puede venir de cualquier lugar 3. Branding: Ahora que tienes tu colección curada de investigación e inspiración, es hora de desarrollar eso en tu marca personal. Para tu propia página web de Squarespace, he creado un PDF Directrices de branding Checklist para que descargues en cualquiera de las dos imprentas se utilizan en tu computadora. Esto será realmente útil para hacer un seguimiento de dónde estás en un viaje, sobre todo si tu lado se apresura y tienes que bajar este proyecto y volver a recogerlo . Posteriormente, podrías encontrar los lineamientos del Pdf Brendan descargar en su sección de proyectos para la información de la clase a continuación. Sé que el término branding puede parecer una tarea abrumadora, algo que sólo está reservado para diseñadores gráficos y profesionales. Pero estoy usando mi experiencia y conocimientos para ayudar a hacer esto en parte agradable y duradera de su sitio web Viaje de diseño. El checklist de branding está diseñado para ser llenado de arriba a abajo, paso a paso. Al romper su marca en general en estos ocho pasos, tenemos un proceso manejable y podemos dar cada paso uno a la vez. Echemos un vistazo juntos asistiendo a mi colección de inspiración en mis pautas de marca, ya que esta clase es un seguimiento de mi clase anterior. Comienza tu ajetreo lateral. Cómo construir tu sitio web basado en primera clase. Seguiré desarrollando el sitio web que construí en esa clase. Si aún no has tenido oportunidad de construir las bases para tu sitio, sugiero comenzar con esa clase para que puedas construir tu sitio y luego volver aquí para el diseño y branding. Por lo que continuando desde esa clase, ya he podido llenar el inicio de mi lista de verificación de branding con mi nombre para mi sitio web o marca. No tengo un tagline, pero he incluido la declaración de misión que escribimos en la última clase cómo construir tu primer sitio web de Squarespace. Voy a correr con ustedes los siguientes pasos para que puedan ver mi proceso. He abierto hay pdf en vista previa en mi Mac, y sólo voy a editarlo aquí como la opción más simple, rápida, rápida, fácil. Voy a llenar cada paso con ellos esta edición en vista previa para que pueda mantener todo junto en un solo lugar. Si eres capaz de hacer esto o comenzar un nuevo documento en blanco y dejar todo en eso, podría ser realmente útil ver todos los elementos de tu marca en un solo lugar para asegurarte de que sean cohesivos y crear la vibra general y sentir que estás buscando. Entonces, debido a que hicimos un trabajo tan bueno en la fase de investigación, debería ser bastante sencillo rellenar nuestra lista de verificación de branding. Voy a poner mis dos documentos, así que tengo mi tablero de Pinterest con la inspiración de diseño del sitio web. Entonces estas son solo las cosas más favoritas que he escogido para la inspiración del sitio web . Y tengo eso lado a lado con la versión de edición de previsualización fuera de mi lista de comprobación para mis lineamientos de Brendan. Entonces empecé en el número cuatro, ya que ya he llenado uno y tres, y no necesito Paso dos. Voy a sacar mi selección frontal de este pin sobre pares de fondos modernos para squarespace . Entonces echemos un vistazo a eso. Entonces esto fue sólo algo que busqué en Pinterest. Otras personas han creado estas colecciones, cual es una gran cosa de utilizar, y estos son todos fondos que están en el espacio cuadrado, así que sabemos que son un poco seguros, útiles, también, mirar por encima y por mi frente de título, me gusta mucho la audacia fuera de esto y Bevis Nueva frontera. Entonces eso es lo que voy a elegir para ser mi frente de título. Entonces mientras estamos aquí, voy a cambiar ese frente para que sea el correcto para que podamos empezar a ver cómo se ve que va a cambiar el de aquí arriba también. Entonces de nuevo, podemos ver que se utiliza en más circunstancias y empezar a hacerse una idea del campo, después para el fondo del cuerpo. A pesar de que el pin tiene PT Sands como la caza del cuerpo para usar junto con Bavis nuevo, realidad voy a recoger el frente Brandon de abajo en la parte inferior aquí, y me gusta mucho este. Prefiero lo claro y fácil de leer que es. Entonces de nuevo, vamos a sumar eso a ah, las listas de verificación de Brendan para que crezcamos todo juntos en un solo lugar y podamos empezar a ver cómo se ve todo cuando se sentó juntos. Entonces voy a cambiar esa para que sea la opción correcta. Ya ves, es muy limpio, muy fácil de leer y para el frente del cuerpo en la página web. Entonces si tenemos alguna publicación en bloque o cosas así, se verá realmente simple y realmente fácil. Agradable en la página web. Cambia este también en Eso ya es Brendan. Por lo que van para que puedas empezar a ver cómo se ve bien lado a lado. A continuación, los colores han aconsejado hacer trampas de 3 a 5 opciones de color para tu marca, ya que cualquier más de cinco podría ser un poco mucho, y vas a hacer cumplir diferentes colores en solo para usarlos en tu sitio web. Así que intenta quedarte dentro de 3 a 5 opciones de color si puedes, solo para mantenerlo más fácil por ti mismo más abajo de la línea. Volviendo a mi tablero de Pinterest para el diseño del sitio web Inspiration. Guardé dos imágenes o dos alfileres aquí para inspiración de color. Voy a elegir este hoy porque me encanta el tipo audaz de colores de estilo casi primario , y creo que van a funcionar muy bien. Entonces solo voy a hacer algunos círculos sobre la lista de verificación de branding para que pueda conseguir esos colores a través de mi lista de chequeo. De acuerdo, entonces tenemos cinco círculos listos para rellenar con los colores que quiero usar. Entonces yo, empezando por el principio y en mi editor de previsualización visitando herramienta muy útil en la opción de elección de color que soy. Aquí puedo recoger esta herramienta cuentagotas y pasar el cursor sobre el color que quiero en el pin y seleccionarlo. Se llenará en los lineamientos de mezcla de Bryant el color que quiero usar. Entonces ahí tenemos el primer color. Por lo que sólo voy a seguir en las entradas los cinco colores de esta imagen en Pinterest para usar como mi paleta de colores para mis pautas de Brendan. De acuerdo, ahí vamos. Tengo mis cinco opciones de color ahí, y creo que eso se ve realmente genial cosa que se ven muy bien juntos. Y además, puedo empezar a ver cómo van a mirar al lado de los divertidos rastros que he hecho y sobre todo con ese bebé es nuevo frente. Creo que va a ser realmente audaz y fuerte, y así que estoy bastante emocionado por eso. Eso Esta opción cuentagotas de ojos de color es realmente útil. Es un truco realmente práctico porque significa que no necesitas preocuparte por los códigos de color o de dónde viene tu inspiración de color. Si una imagen capta tu atención, puedes recoger las brasas de ella y simplemente agrietarse en la cabeza. Por lo que ahora si ya has echado un vistazo a configurar colores y squarespace, sabrás que necesitaremos una célula de árbol o códigos de color RGB para obtener la referencia exacta de color en nuestra página web. Y Pero no te preocupes, tengo un truco práctico para conseguir códigos de color para sitios web, así que no temáis demasiado, pondrá ese detalle crucial aquí al final de esta lección. De acuerdo, primero Paso siete ahí. Esta es una opción un poco extra, pero realmente puede ayudar a definir la vibra y sensación de tu marca para incluir algunos patrones, imágenes de stock o texturas. Esto se sienta bajo la sección de estilo de nuestra investigación original. Andi, si nos dirigimos a mi tablero de Pinterest, um, puedes ver que hay unos pines ahí a los que aún no he hecho referencia. Entonces estas son mis opciones de bonus para el Paso siete. Um, me encanta la estética simple y audaz de la revista Gentlewoman. Siento que la paleta de colores de las bandejas y junto con el nuevo frente de título del bebé refleja, está realmente bien. También he guardado dos imágenes de un producto bajo póster del diseño de Dita Rams. De nuevo, tenemos ese uso fuerte, audaz y sencillo del color junto con formas simples. Tendré estos en mente para el último paso. Número ocho, Mi logo. Vamos a mirar con más detalle en la construcción de logotipos en la siguiente lección. Entonces tengo esos alfileres en mi pizarra listos para ellos. Entonces por ahora, tengo mi lista de cheques en mi tablero de Pinterest. Siento que todo esto se dirige en la dirección correcta con la sensación general que quiero para este sitio web. Entonces solo el último pequeño truco para conseguir esos códigos de color para nuestra paleta de colores. Simplemente dirígete a código de color picker dot com. Bueno, puedes subir, ya sabes, bandejas e imagen para escoger los colores de esa paleta de colores. Entonces ese es un sitio web realmente útil para usar junto a Pinterest porque podemos hacer clic derecho en la imagen de Pinterest solo para guardar la imagen y la carpeta de descargas. Y luego podemos subir ese código de color dientes, sitio web más grande y éxito en. Entonces podemos pasar por el proceso de flotar sobre el cada uno de los cinco colores individuales . Onda, podemos anotar bien, esto nos da al RGB el hex bueno en el código de cincel A, así que si quieres conocerlos todos abajo. Pero sí, una vez más, una forma súper fácil de encontrar los códigos de color de una imagen no era así. Eso es genial. Mira lo lejos que hemos llegado. Básicamente tenemos nuestras propias pautas personales de branding hechas y listas para usar en nuestro sitio web para realmente convertirlo en nuestro propio eso. En la siguiente lección vamos a estar buscando diseñar y crear nuestro propio logotipo en squarespace. 4. Creador de logotipos en Squarespace: Ahora que tenemos nuestras pautas de marca abajo, es hora de crear un logotipo para nuestra página web. Al igual que con las pautas de marca, vamos a mantener esto sencillo y alcanzable mediante el uso del constructor de logotipos basado en cuadrados construido . Esta es una gran herramienta que está llorando Espacio. Proporciona on permite a los principiantes dentro de estafadores crear fácilmente un logotipo para su sitio web sin necesidad de un diseñador gráfico. Si tienes una cuenta de squarespace, puedes descargar el logo final de forma gratuita para que pueda usarse en otro lugar. Por lo que vamos a dirigirnos a nuestra página web de Squarespace y navegar a la sección de diseño en la parte superior aquí. Tenemos logo sobre título por el momento. Acabamos de obtener el nombre de nuestro sitio web escrito en la sección de título del sitio. Pero si nos desplazamos hacia abajo y seleccionamos crear un nuevo logotipo, nos llevará a una nueva página para el constructor de logotipos basado en Cuadrados. Enfriar. Entonces, qué gran pantalla de bienvenida. Esto es justo lo que buscamos. Logotipo hecho simple. Voy a escribir el nombre de mi sitio web aquí. Ya es eso, y eso nos lleva a través de la página de diseño con dientes, que promete buscar un símbolo y nuestro logotipo así que solo voy a hacer clic en eso por un segundo y echemos un vistazo a su alrededor. Tenemos el nombre del sitio Web front and center en el panel de diseño aquí, que está en este fondo cuadrícula. Por lo que eso sería súper útil para alinear cosas por debajo. Aquí abajo, Squarespace nos está mostrando algunos simulacros de usos del mundo real de nuestro logo. Entonces de nuevo, esto va a ser realmente útil para ayudarnos a visualizar cómo se va a ver el logotipo en la vida real . Podemos ampliar la pantalla con estas horas. Aquí estoy en enmendar algunos de los ajustes aquí arriba. Yo soy un retorno on, Snap to grid on. Vuelve a la pantalla aquí. Aquí tenemos el nombre del sitio Web, y esto no tiene que ser incluido en el logotipo. Podríamos tener sólo un símbolo, pero lo voy a mantener aquí por ahora y a ver cómo vamos. Si selecciono el título del sitio web, puedes ver que obtenemos algunas opciones adicionales para poder cambiar la familia de frente. El color frontal, el peso frontal en la rancia delantera. Entonces una cosa a notar es cuando miramos en la selección familiar frontal que hay una selección de fondos mucho más limitada en el constructor de logotipos que en real squarespace mismo en el frente del título que elegí que bebés nuevos. En realidad no está en esta lista de frentes aquí, lo que significa que probablemente no voy a mantener el texto es parte de los billetes de logotipo después de todo, porque realmente quiero seguir con mis pautas de marca y crear ese look y sentir audaz, fuerte de mi tablero de inspiración. Entonces solo voy a eliminar el título así lo seleccioné y pegaré borrar, y luego me concentraré en el ícono como mi logo. He pensado en una obra alrededor para conseguir el título del sitio web en el frente. Yo quiero junto a mi logo en la página web, por lo que miramos eso más adelante en la clase para mi icono de logo. Quiero encontrar algo que represente mi declaración de misión del sitio web. También quería encajar con mis directrices de marca y tablero de inspiración para ser audaz, simple y claro. Por lo que aquí en el panel de búsqueda, debilita el tipo de una manera de buscar símbolos que pudieran representar lo que queremos que sea nuestro logo . Entonces busquemos primero los árboles. Sina. Esa es una de mis categorías de fotografía en la página web. Tenemos una selección de iconos de árbol aquí que puedes ver subir por la ventana. No me gusta nada de esto, particularmente no siento que estén dando esa representación general de la declaración de misión que buscaba. Entonces intentemos otra cosa. Miremos a las montañas en su lugar. Está bien, genial. Entonces nos desplazamos hacia abajo. Aquí hay una buena selección de iconos de montaña. Me siento en general, está desprendiendo más de esa sensación paisajística, que está en línea con mi estado misionero. Sólo pensando en mi investigación en el tablero de inspiración aquí y sólo mirando las líneas limpias, fuertes, fuertes, simples y las formas que teníamos de estos diseños de gramos de detalle aquí. Creo que voy a ir por este que está en círculo. Encaja bien con las líneas atrevidas, fuertes y el elemento de círculo se vincula desde mi inspiración en estos gramos de detalle aquí . Si seleccionamos el icono debilitar, muévelo al centro de la pantalla y está configurado para encajar en la cuadrícula, lo cual es útil de todos modos. Pero si tuviéramos algo más aquí, sería útil poder alinear eso. Podemos arrastrarlo para hacerlo un poco más grande también, lo cual estará encantado de poder ver con qué estamos trabajando. Y Squarespace ya está actualizado los ejemplos en vivo aquí abajo para que podamos ver cómo se vería en una tarjeta de visita en un sitio web e incluso en una camiseta, lo cual es bastante cool. Por lo que cuando seleccionamos el logotipo, también viene con esta opción de color aquí para que podamos cambiar su color de negro a uno de los colores perfectos de nuestra marca. Eso es exactamente lo que queremos mantener todo en línea con nuestras pautas de marca. Entonces si lo que tuvieras que hacer, o bien el color podría escoger un sitio web. Si aún así eso se abre y con tu imagen cargada, puedes hacer click en el color y te trae arriba el RGB, el código hexadecimal y el código l edades. Por lo que el código hexadecimal se simboliza al tener este hashtag delante de él. Entonces podríamos simplemente tomar eso a partir de ahí, sólo vamos a copiar eso. Andi, déjalo aquí. Ahí vamos. Entonces si tenemos el color podría escoger un sitio web entonces. Eso es bastante fácil conseguir el código el código de color en el constructor de logotipos squarespace aquí. De acuerdo, entonces ahora sabemos cómo conseguir nuestros códigos ex Solo voy a probar algunos de los otros colores solo para ver cómo se ven. Entonces creo que por ahora voy a ir con este color rojo. Entonces se ve bastante cool en los ejemplos de abajo, y encaja bien con esa estética audaz que estaba buscando. Entonces para guardar esto, vamos a guardar logo aquí abajo. Y nos dice ahora que podemos descargar nuestro logo gratis. Y así porque tengo una cuenta de squarespace, puedo descargarla de forma gratuita. Por lo que hacemos clic en descargar. Y así ahora obtenemos la opción de poder descargar en color líneas negras o líneas blancas . Esto es realmente genial, ya que existe la posibilidad de que vayas a necesitar usar tu logo en blanco o negro en diferentes lugares. Entonces eso es una muy útil y punta, y te aconsejaría descargar los tres cuando vengas a descargar tu logo solo para que los tengas ahí, así que nos va a dar una descarga violencia de PNG, que es otra cosa realmente útil que soy. Entonces eso sólo significa que no habrá un fondo para el logotipo. Serán sólo las líneas como las vemos aquí. Entonces eso es muy útil para usar en la página web o en otros lugares, porque ponemos el logotipo encima de otro fondo, lo que no nos podría dar muchas opciones geniales Más abajo, está listo para descargar un tamaño de archivo de 2000 pixels por 2000 pixels, y si hacemos click aquí abajo, ya ves, tenemos opciones para ir más que eso o menos que eso, dependiendo de lo que necesitemos. Y así 2000 pixeles de ancho es más que suficiente por ahora mismo, me voy a quedar con eso. Solo voy a descargar la opción de color por ahora. Y pero como dije, cuando vengas a descargar tu logo, descargo los tres y luego los tienes ahí. Y si quieres volver atrás, sabes que está dando click aquí para volver atrás y editar el logo y luego volver a descargarlo. Entonces aquí está mi logo P y G. Descarga aquí abajo y eso estará en mi carpeta Descargas. También recibiré un correo electrónico de Squarespace con un enlace a mi logo. Entonces eso es súper útil de nuevo para el futuro. Significa que siempre podemos encontrar nuestro logotipo. No necesitamos preocuparnos por cerrar esta ventana porque conseguiremos el correo electrónico. Entonces a continuación quiero agregar mi logotipo junto a mis pautas de marca y tablero de inspiración para asegurarme de que encaja con el look general que tengo pasando para mi branding. En realidad va a ser más rápido y fácil crear un pin a partir de mi logo descargado. Archivo S. Entonces esta es mi pizarra aquí. Entonces si solo voy al plus, creo un pin y agrego desde descargas el logo que quiero ahí y no necesito preocuparme por escribir nada al respecto porque esto es solo para mí y está publicando a la pizarra correcta. Por lo que sólo voy a golpear publicar. Entonces ese es el logo ahora sentado con el resto de mis amigas. Y si volvemos a traer el documento de pautas de marca uno al lado del otro, así que tenemos esa pantalla dividida, entonces podemos ver cómo se ve todo unido. Si has creado tus pautas de marca en un nuevo documento, eso es genial. Podrás añadir tu logo ahí. Solo estoy tratando de mantener esto un simple y es lo más fácil posible, por lo que es accesible para todos. Por lo que al usar una combinación de Pinterest en mi lista de verificación de branding, tengo referencias para mi propia marca personal. Lineamientos sobre logo. Bueno, uh, entonces realmente podemos ver ahí cómo todo está empezando a empatar juntos y cómo podría empezar a verse en la página web. Él es esta gran paleta de colores aquí y un bonito fondo fuerte y manteniendo todo muy simple y haciendo referencia a algunos círculos en el logo y líneas audaces, fuertes, limpias. Entonces estoy muy contenta con cómo todo se va uniendo. Eso Esperemos que estés a Andi. Ya puedes tomarte tiempo para crear tu propio logotipo. Andi, trabaja eso en tus pautas de branding para acabar con tu propia marca personal, y este es un comienzo realmente impresionante para diseñar tu propio sitio web con Squarespace 5. ¿Qué versión de Squarespace: antes de que nos dirijamos a Squarespace para mirar al constructor de logotipos. Tan solo una nota sobre las diferentes versiones de Squarespace. Squarespace han lanzado recientemente una virgen 7.1 a partir de enero de 2020. Entonces si abriste tu cuenta después de ese tiempo, más probable es que te metan automáticamente en un sitio web de la versión squarespace 7.1. Y así mi clase aquí es todo en un squarespace 7.0. Y así comprobar en qué versión se encuentran tus sitios web. Si te diriges al constructor de tu sitio web y tuviste que ayudar, entonces puedes ver ahí si estás en la versión 7.0 o 7.1. Entonces, como dije mis clases en la versión 7.0, así que si has empezado un sitio web Andi no llegó demasiado lejos, entonces podría ser mejor rehacer tu sitio web a la versión siete puntos adeudos. Puedes hacer eso siguiendo el enlace en la descripción de la clase y eso te llevará a la tienda de plantillas para la versión siete punto. Ah, pero si tienes bastante lejos en tu sitio Web build y quieres seguir adelante con 7.1 y voy a estar haciendo una clase para eso en el futuro. Pero mientras aún están descubriendo cosas, estaba 7.1 Andi haciendo cambios en él? Me quedo con 7.0, y por ahora, y creo que esa es la mejor opción por ahora. Entonces, o agrietarse como eres, o puedes dar un paso atrás y reconstruir con 7.0 aquí si tienes alguna pregunta, o si estás atascado con algo con 7.1. He usado en construyeron algunos sitios web con él, así que podría ser capaz de ayudar. Y si dejas caer una pregunta en la sección de discusión aquí, te puedo ayudar con eso. De lo contrario, sigamos con la construcción de nuestro logotipo. 6. Hack de flujo de trabajo: Ahora vamos a ver un poco de un hackeo de flujo de trabajo. Te prometo que vamos a entrar en squarespace el próximo. Pero como con la mayoría de las cosas creativas, muchas veces se trata de la preparación. Por lo que antes de dirigirnos al squarespace, queremos asegurarnos de que tengamos todos nuestros patos seguidos. Tenemos nuestras pautas personales de marca y nuestra investigación sobre la colección comisariada de inspiración en Pinterest. Tenemos nuestro logo, así que queremos tener lo más posible archivado en un lugar fácil de encontrar un lugar antes de que tuviéramos que escuarespace. Entonces cuando fueron enterrados profundamente en el diseño de nuestra página web. Tenemos todo lo que necesitamos, escribe una mano a menudo en la plataforma de espacio cuadrado. Si estás buscando una imagen para agregar o copiar para poner, puede ser un poco frustrante encontrar lo que quieres. Por lo que me gusta tener una carpeta en mi escritorio. Estoy organizado en la información de branding, cualquier imagen que quiera en cualquier copia que he escrito antes de escribir en Squarespace. Dices que empiezas a escribir una gran publicación de bloque en squarespace y se estrella. Vas a perder potencialmente lo que has escrito. Por lo que siempre me gusta intentar escribir offline en word o páginas. Y luego puedo copiarlo y pegarlo en squarespace cuando estoy en la página web y en línea y está listo para salir. Entonces en imágenes acabo de conseguir por el momento los árboles que subimos a la sección de árboles . Andi en branding, tenemos nuestra lista de comprobación de pautas de Brendan en nuestro logotipo listo para salir. Entonces voy a sumar un poco más en mi sección de copias en mi sección de imágenes, y te voy a ver en menos y cinco cuando vamos a empezar en squarespace haciendo nuestra página web nuestro camino. 7. Estilos del sitio web: De acuerdo, entonces vamos a dirigirnos ahora a nuestro sitio web de Squarespace y trabajar en la sección de diseño fuera del constructor de sitios web para que podamos empezar a hacer verdaderamente nuestro sitio web propio. Si hacemos clic desde la pantalla de inicio hasta la sección de diseño, podemos ver que ahora hay un menú de opciones por el lado izquierdo. Ya hemos visitado la sección de logo y título para crear nuestro propio logotipo. Entonces volvamos allá para poder instalar esto en nuestra página web. Entonces si nos dirigimos aquí a la imagen del logotipo y hacemos clic para agregar un logotipo, si recordamos en la última lección, configuramos nuestro sistema de carpetas para que tengamos ah carpeta del sitio web en nuestro escritorio. Agradable y fácil de encontrar y podemos navegar de inmediato en branding y en el logo que descargamos y en esa última clase. Está bien, genial. Por lo que hemos subido PNG color de logo I m. Así que si golpeamos guardar y vemos que el logo, como se explica aquí y el logo reemplaza a thes título del sitio en la página web por lo que ese ícono ahora ha ido en lugar de la fotografía resentida a lo largo hay s Entonces si recuerdas cuando construimos el logo en el constructor de logotipos de Squarespace, no pude incluir el nombre del sitio web en el frente. Yo quería como parte del logo completo. Por lo que trabajan alrededor para eso ahora es usar la opción de tagline aquí a lo largo del costado, el icono del logo. Entonces si copio y pego en su y solo golpeo guardar, así que necesitamos actualizar los fondos en el color y así sucesivamente. Pero puedes ver que ahora tenemos nuestro icono junto al título de nuestro sitio web y podremos poner eso en el frente que elegimos como parte de nuestros lineamientos de marca, que fue el nuevo fondo Babys ahí. Entonces eso es sólo un poco de trabajo por ahí. Si te pasa lo mismo que el frente no está disponible en el logo squarespace logo builder y puedes usarlo como parte del lema ahí para seguir teniendo tu título de sitio web en el sitio web porque el uso del ícono reemplaza al título del sitio web y por lo que eso es totalmente individual. Podría no ser necesario para ti en tu sitio web o podría ser algo de lo que no estás seguro si quieres tener el título real junto al ícono, así que ten una obra de teatro alrededor. Um, ya sabes, no me lo quité y a ver qué piensas. Si estás luchando con el dedo del pie, decide lo que te gusta. A menudo me parece que ayuda solo alejarme un rato de la pantalla y volver a ella más tarde con ojos frescos y ver cómo te sientes cuando vuelves a abrir esa pantalla. Y cuál es tu reacción inmediata a menudo ayuda a decidir si realmente te gusta algo o no. De acuerdo, entonces tenemos a la vista el ícono del logotipo. Título. Heck, eso Ahora es el momento de jugar con dimensionamiento y conseguir el frente justo en este logo. Tagline! Aquí para esto necesitamos salir de la sección de derechos de logotipo y en sitios cuentos atrás en el menú de diseño. Si ya te has aventurado en esta sección del constructor de sitios web, podría ser donde hayas terminado más frustrado o confundido. Sé que lo estaba cuando llegué aquí por primera vez. Así que los estilos de sitio simplemente significa los estilos dentro de su sitio web. Por lo que desde aquí puedes elegir de todo, desde los colores de los frentes y el fondo de tu página web hasta el dimensionamiento de las cosas. Si justifica a la izquierda o a la derecha, sabes que todo es a cómo se ven los elementos con cualquier sitio web, se decide aquí, por lo que puede parecer todo un edificio para empezar. Pero voy a simplificar esta sección Desde el tiempo que he pasado en esto, es menú Tails. realidad solo hay dos formas principales de acercarse a los cuentos de sitios. Por lo que la Opción Uno es con el menú completo aquí para comenzar en la parte superior de este menú lateral y trabajar tu paso por cada opción una a la vez. Entonces, por ejemplo, podemos cambiar el color y el color de fondo del sitio web. Esa es la primera opción que llegamos aquí, y puedes seguir bajando el menú, cambiando las cosas de una a la vez mientras bajas y viendo cómo se ve eso. Esta es una buena opción para la simplicidad. Ya sabes, empezaste la parte superior, trabaja tu camino hacia abajo. Pero si tienes una parte particular del sitio web con la que sabes que quieres empezar y donde quieres cambiar el estilo en él, va a ser un poco frustrante tener que trabajar primero a través de todas esas otras decisiones , hasta que llegues a la parte con la que realmente quieres empezar y cambiar. Entonces si solo cancelamos y descartamos esos cambios y volvemos a donde lo teníamos y la otra forma de acercarnos a los cuentos de sitios es usar la opción de selección de hover. Entonces si llevamos el ratón sobre Dheim por encima de la sección de la página web que queremos cambiar , entonces queremos empezar con el logo aquí porque eso es lo que acabamos de poner, y sabemos que aún no está bien. Después se puede ver una caja azul aparece alrededor de la zona donde nuestras masas flotando. Entonces si paso el cursor de aquí y recojo las opciones de menú del lado izquierdo, cambie solo las variables disponibles para editar para esta sección. Entonces todo lo que puedo ver ahora es sólo lo que va a ser relevante aquí arriba. Entonces esa es solo otra forma de enfocar ese menú de la izquierda para mostrarte solo lo que necesitas ver . Si quieres volver a mirarlo todo, puedes hacer click, puedes hacer click, mostrar todo o volver a aquí y cambiarlo todo siempre que aparezca un cuadro azul. Entonces puedes hacer click y te dará las vistas cuentos relevantes para esa sección que acabas de seleccionar. Al seleccionar esta sección superior aquí, nos da las colas de los sitios para el encabezado del sitio web. Entonces, empecemos a trabajar nuestro camino a través de esta lista mucho más corta aquí ahora de arriba a abajo. Una vez que te familiarices con los estilos de sitio, es más fácil entrar y salir de las secciones que quieres cambiar. Pero para empezar, recomiendo trabajar a través de los menús para cada sección de arriba a abajo, sobre todo uno. Estamos al principio de construir nuestra página web. Queremos armar todo. necesitamos revisar cada opción para asegurarnos de que sea como queremos que sea. Por lo que estamos en la página web jefe de sección. Estoy empezando por la parte superior con el tamaño de imagen del logotipo, por lo que sólo nos permite jugar con el tamaño de píxel para nuestro logo. Entonces sólo hacer es puramente de ojo y sentir ver lo que me gusta. Título del sitio aquí. Si recordamos, el icono del logotipo reemplazó al título del sitio. Entonces no tiene sentido que vaya a esa opción de menú porque mi título de sitio no es visible , pero para ti podría ser que no tengas un logotipo de Nikon feel, así que aquí podría ser donde entras y agregas tus fondos y colores y cosas como ese título de sitio web trío. Por lo que sí tenemos el subtítulo del sitio web porque ese fue nuestro trabajo alrededor para conseguir el nombre del sitio web en. Entonces si entramos aquí, podemos elegir nuestro frente que seleccionamos como parte de nuestras pautas de marca y simplemente pasar por cada opción y solo comprobar lo que está disponible. Y si es algo que quieres modificar y si no estás seguro de qué hace la cosa, solo tienes una jugada y mueve el deslizador y ve qué pasa. Y encontré que esa es la forma más fácil solo de resolver lo que está pasando y no preocuparme demasiado por saber qué significa la opción de menú. Basta con hacer algunos cambios y ver qué pasa. Yo quiero que eso esté en línea con el borde del círculo más o menos, y luego me iba a tu espalda aquí por eso de allá adentro. Extiende eso un poco más para que puedas ver a la izquierda aquí de las opciones del menú. Si hemos hecho un cambio, hay un gran círculo junto al elemento del menú donde hemos hecho un cambio. Entonces esto es solo una buena cosa a tener en cuenta para ver dónde has frijol y ver a qué has hecho un cambio. Simplemente ayuda. No te has perdido en este gran menú aquí. Entonces quiero cambiar el color aquí. Entonces voy a referirme de nuevo a nuestros lineamientos de marca y cambiarlo a este azul. Entonces esa es la nota que puse cuando hicimos nuestro pdf, y puedes simplemente escribir sobre eso para ser RGB. Y luego solo elimino thes. Y ahora el nombre de un título de sitio está en el color en el que queríamos estar. Simplemente eso es un poco más central para que puedas ver cambiando la alineación de cabecera su logotipo de río . Nuestro subtítulo en nuestro menú a Central hace bastante diferencia a y cómo se siente el sitio web. También podemos cambiarlo para que sea correcto, justificado, lo cual no es para mí. Entonces pienso en un palo con centro. Ya estoy como lo audaz que es eso. Podría incluso volver a entrar. Simplemente empuja el tamaño hacia arriba en eso un poco más. Tan sólo así. Es realmente un fuerte impacto, como tuvimos de nuestro tablero de inspiración aquí. Todo es muy audaz y un poco en tu cara y eso hasta Max. Por lo que es fácil de leer. Sí, eso es refrescarse. Deja a ese seleccionado genial. Por lo que hemos pasado por cada una de las opciones de menú para el jefe de sección ahí, que no tardó demasiado y fue relativamente simple. Una vez que habíamos seleccionado esto y sabíamos dónde estábamos trabajando siento que realmente está empezando a parecer más personalizado para mí y para mi marca, lo cual es genial, incluso solo sus pequeños cambios ya están marcando una gran diferencia. Entonces para asegurarte de no perder esos cambios solo vas a golpear save en la parte superior aquí. Y de lo contrario podríamos. Volvería de nuevo a cómo lo teníamos antes. También hay grandes círculos han ido de ahí, porque hemos guardado esos últimos cambios cada clic atrás para volver a mostrar todo lo que tenemos la opción de menú completo . Tres. Desplácese hacia abajo por la opción de menú completo. Podemos ver eso mientras nuestro ratón se cierne sobre las muchas opciones aquí abajo. También aparece un cuadro azul en la ventana del sitio web. Entonces esa es solo otra forma en que Squarespace nos está ayudando a ver con qué sitios se relacionan los cuentos y qué va a cambiar si empezamos a hacer clic alrededor de nuestro logo es correcto y es esta. Es un inicio de nuestro sitio web trabajando a través de ahora de arriba a abajo en referirnos a nuestras pautas de marca para nuestros códigos de color y nuestros fondos en nuestro tablero de Pinterest y simplemente tener una jugada con cómo quieres que se vean las cosas. No hay bien ni mal, y podría cambiarse más tarde también. Si decides eso algo que no te gusta, Si estás en tus estilos de vista y haces un cambio y sigues ahí dentro, todavía tienes un gran punto y decides que no te gusta. Puedes golpear, deshacer en la parte superior ahí, y eso se deshará del cambio sin tener que preocuparte por la opción de guardar o cancelar en la parte superior ahí. Entonces eso es solo otra cosa útil a recordar es que puedes golpear deshacer para volver allá, así que voy a trabajar a mi manera por los sitios, dice, dice, refiriéndose a mis pautas de marca en mi tablero de Pinterest y asegurarme de que lo consiga todo en que yo quiero. Las cosas más importantes para configurarse a esta edad son lo que tenemos en nuestra lista de verificación de branding . Por lo que nuestros fondos el frente del título en el frente del cuerpo y estallando en los colores donde los queramos , que ya tenemos nuestro logo en. Y por ahora, lo estoy manteniendo simple. No estoy usando ninguna textura ni patrón, pero eso es algo que podemos añadir más adelante. Pero lo más importante por ahora es conseguirlo en frentes y colores y solo tener un poco de jugada. Diviértete un poco y ve cómo se ven las cosas. Está bien, genial. Yo estoy contento por ahora con cómo se ve todo ahí dentro, y todavía tenemos toneladas de contenido. Entonces no lo es y algunos de los cambios que hemos hecho innecesariamente bastante relevantes todavía. Pero por ejemplo, estoy cambiando el texto del cuerpo para que solo esté en negro cuando y si es un enlace cuando se pasa por encima de él , entonces va al color azul, , que me gusta bastante, y tenemos todo es en nuestros fondos, por lo que realmente agradable y fácil de leer body front y luego un gran frente de título fuerte, audaz, que es genial. Soy tan sólo algo para tener en cuenta que para navegar realmente por la página web. No puedes hacer eso mientras estás a la vista estilos porque solo piensa que estás si estás haciendo clic, solo piensa que estás deseando modificar las ventas de estos sitios en eso. Entonces si quieres navegar por el sitio web, solo necesitas volver al menú de diseño, y luego no pudiste ir a cada página y ver cómo se ve todo. Entonces lo voy a dejar en eso por ahora. Andi, empuja al siguiente paso en nuestra siguiente lección, que es mirar el diseño y el diseño de páginas usando los libros de Squarespace. 8. Bloques de contenido: De acuerdo, entonces estamos en el último paso, la última pieza del rompecabezas para diseñar tu propio sitio web squarespace y hacerlo tuyo . En esta lección, vamos a ver cómo utilizar los bloques de cada página para crear un diseño y diseño personalizados para su sitio web. En nuestra primera clase, donde construimos nuestro sitio web squarespace, tocamos bloques de contenido. Entonces solo para refrescar estos son los bloques de construcción para tu sitio web, lo que te permite caer fácilmente en una página. Diferentes tipos de contenido puntera tienen un diseño y diseño que es único para ti. Entonces si nunca volvemos al menú de inicio fuera de la sección de diseño y seleccionamos páginas pegan con la página de inicio aquí se ve, cuando paso el mouse sobre la sección principal de la página de inicio, obtenemos este cuadro de diálogo con la opción de editar. Entonces si hacemos clic en él, ahora estamos en la ventana del editor de páginas. El contenido que ya tenemos aquí se puede mover o eliminar, o podríamos añadir un nuevo bloque a la página principal. Para ello, necesitamos pasar el mouse sobre el lado izquierdo de la página para obtener el icono de la gota de lluvia. Si hacemos click en la gota de lluvia, entonces trae un menú de todos los diferentes tipos de bloques de contenido. El icono para cada bloque de contenido da una buena indicación de qué es y cómo se verá. Pero también necesitarás jugar con los diferentes bloques para ver cómo se ven con tu propio contenido y diseño. En mi página principal aquí, quiero agregar algunas imágenes más. Entonces voy a eliminar este bloque de imagen principal porque eso es sólo una imagen. Simplemente pasa el cursor sobre selecta elite y haz clic en Sí, um, y luego vas a volver a encender el icono de la gota de lluvia, Elige un nuevo bloque. Por lo que quiero elegir de la sección de la galería de bloques ya que esta opción permite que se muestren múltiples imágenes. Por lo que voy a escoger la opción de presentación de diapositivas. Mi plan inicial para este sitio web es siempre ser tener las imágenes de ancho completo en la primera página del sitio web. Tengo la opción ahora toe ya sea subir nuevas imágenes para la galería Enlace de Oregon desde en galería existente. En otra página, esta es una opción bastante útil. Andi te permitiría destacar una galería en particular en tu página principal. Si eso es algo que querías hacer, voy a subir algunas imágenes nuevas. Las tengo ya guardadas en mi estructura de carpetas. Ir a seleccionar estos completos y ver cómo nos llevamos. Entonces mientras están subiendo, si hacemos clic en la pestaña de diseño en la parte superior aquí, podemos ver que hay muchas opciones diferentes que podemos usar para personalizar nuestra presentación de diapositivas. De acuerdo, ahora están subidos. Si solo hacemos click, aplicamos Onda tenía apareciendo click Guardar. Podemos ver cómo se ve eso. Simplemente podemos ampliar la pantalla ahí para tener una idea de cómo se ve la página principal ahora que le hemos agregado esa presentación de diapositivas. Entonces me gusta que sean grandes. Pero eso no me gusta realmente. Cuando entras por primera vez entraría al sitio web. No se puede ver la imagen completa. Sólo se ve un poco de ella. Se ve un poco yo soy donante, un poco torpe. Entonces voy a volver a entrar y editar la página otra vez. Y si vuelvo a editar y hago clic en él, la galería realmente puedo cambiar el diseño a otro tipo de contenido sangre en la tina de diseño . Por lo que seleccionamos la opción de presentación de luz de tesis primero de los bloques de contenido de gota de lluvia que se presentaron antes. Y pero ahora también podemos usar un carrusel, una rejilla o apilados. Y sobre todo ahora que se suben las imágenes, podemos ver con bastante rapidez cómo podría parecer transitando entre esas diferentes. Entonces echemos un vistazo. A grilla. Vamos a recortar a un cuadrado de 1 a 1, cuatro imágenes. De acuerdo, vamos a ver. ¿ De acuerdo? Sí, Mucho Nieto. Me gusta mucho la pantalla principal. Ahora, si te imaginas a alguien Londres en tu sitio web aterrizando en esta página principal, eso es lo primero que verían va a tener bastante más impacto ya que el espectador es capaz de ver múltiples imágenes en su totalidad a la vez. Podría yo también estoy tener un pequeño gato dejando este contenido Sangre debajo aquí en esta línea debajo de aquí? Sí. Por lo que es aún más limpio de nuevo. Por lo que alguien viene a mi página web. Esto es en lo que aterrizan y pueden ver por mis imágenes favoritas a lo largo de la parte superior aquí, y pueden ver el menú de inmediato para ver qué otro tipo de contenido podría ser, y pueden ver mi logotipo frente y centro. Y luego si se desplazan hacia abajo, entonces son capaces de ver un poco más sobre mi razonamiento detrás de por qué he empezado este sitio web . Cual es mi declaración de misión. Sí, aunque mi plan inicial era tener una imagen de pantalla completa en la página principal por las otras decisiones de diseño que he tomado, incluyendo el gran logo en la parte superior aquí en el menú. Esa idea ya no funciona tan bien, pero eso está bien. Es bueno ser flexible a lo largo del proceso de diseño porque no siempre se puede predecir cómo algo va a buscar trabajo cuando se está tomando una lluvia de ideas. Por lo que acabas de tener a Teoh estar preparado también. Una vez que llegas al squarespace, que una idea que tenías podría no ser en realidad bastante como quieres que sea. Es posible que necesites adaptarte y cambiar la idea a medida que avanzas, pero eso está totalmente bien. Ya sabes que no hay bien ni mal y no hay reglas. Es este es tu sitio web, y tienes que estar contento con ello. Entonces moví esa declaración de misión hasta la parte inferior de la página, um, um, nuevo para dejar que las imágenes sobresalgan y para darle al espectador la confirmación de lo que trata el sitio cuando se desplazan hacia abajo. Y yo sólo voy a retocar el funt para eso porque parece un poco mucho estar en las capitales y en el fondo del título como éste aparece. Entonces si volvemos a cuentos de diseño y sitios y puedo hacer esto agradable y rápido, no necesito escanear todas estas opciones. Mi pasa el ratón por encima de esa línea, consigo esa caja de sangría, y si hago clic, me da las opciones de diseño para justo eso, dirigiéndome ahí para que pueda hacer clic aquí y lo voy a cambiar. Toothy Audie fondo que nos trailers justo al principio. Y, sí, eso ya se ve mejor. Um, es del color correcto que quiero guardar eso. Vuelve a la pantalla completa del menú de inicio y sí, eso se ve un poco más bonito. Era un poco sheltie antes con los Capitales, así como página de inicio. Estoy realmente contento con eso ahora, y tiene esas imágenes llenas de arcilla, y si los espectadores se desplaza hacia abajo, no están siendo gritados, pero pueden ver mi declaración de misión ahí abajo. Entonces es bonito y sencillo eso Antes de pasar al diseño de maquetación de página siguiente, quiero mostrarles otra cosa genial que podemos hacer con estas imágenes aquí en la pantalla de inicio. En realidad podemos convertirlos en un enlace clicable a través de otro lugar de la página web. Entonces si volvemos a editar el contenido de la página, Andi, Andi, edita el bloque de contenido de la galería, seleccionando a través de la pestaña de diseño y desplazamos hacia abajo hasta la parte inferior. Podemos ver esta subasta aquí para abrir enlaces en nueva ventana, por lo que las imágenes con enlaces se abrirán en una nueva ventana. Cada. Selecciona eso y vuelve a la pestaña de contenido. Si pasamos por encima de la imagen, obtenemos esta opción extra, um, menú aquí arriba. Yo estoy para que podamos doblar la imagen. Podemos editar imagen o mirar en la configuración de la imagen, y aquí abajo podemos hacer clic con el dedo del pie, agregar una URL. Entonces cuando hicimos clic en el euro, tenemos tres opciones, un enlace externo a algo a otro sitio web y un archivo u otra pieza de contenido dentro del sitio web para que realmente podamos optar por enlazar a la página de sangre, que para este sitio web. El momento es actualmente una página desvinculada, por lo que no está apareciendo en el menú principal aquí. Bueno, podemos enlazar a una página de galería, uno de nuestros cerros, ríos o árboles, páginas de galería. Todos podemos enlazar a la página sobre y si tuviéramos alguna otra página ahí dentro y se presentarían también aquí. Entonces si selecciono árboles porque esa imagen tiene algunos árboles en ella, así que al menos eso es relevante y haga clic, guarde y aplique y guarde. ¿ Ves eso moviendo el ratón sobre las imágenes? Y ahora, cuando nos movemos de esta imagen que tiene un enlace a ella, el ratón cambia y podemos ver que no se puede hacer clic. Y si hacemos click en eso, se lleva una recta a través de la galería de árboles para que podamos volver a la página principal haciendo click en el logo en la parte superior. Y así que esa es sólo otra manera interesante. Quería mostrarte cómo puedes diseñar la navegación alrededor de tu sitio web y animar a los visitantes a hacer clic a través. Y al hacer clic en estas imágenes, puede haber más alentado a ahondar en tu sitio web que si solo estuvieran tal vez viendo las palabras en la parte superior de ahí. De acuerdo, entonces hay un truco final de diseño y diseño con squarespace que te quiero mostrar. Y para eso nos vamos a dar la cabeza con dientes sobre la página. Por lo que nuestra página sobre es otra página en blanco que configuramos y creamos agregando en nuestra propia mis propios libros de contenido específico. Y así tengo un bloque de imagen aquí en el bloque de texto aquí. Entonces digamos que quiero agregar otro contenido. Mira esta página. Ese es un bloque de resumen con enlaces a, digamos, algunos de mis postes de sangre. Entonces entramos en editar. Ah, ya podemos ver aquí tenemos resúmenes en el resumen. Los bloques son otra herramienta útil para ayudar a visitar para ver qué más hay en tu sitio web sin tener que hacer clic realmente a través de ningún menú. Son una especie de anuncio para el resto de tu contenido, y así voy a echar un vistazo, un resumen de carrusel sangre, y tenemos la opción de mostrar contenido ya sea de la página de sangre, todas las páginas de la galería I voy a seleccionar blawg, y el bloque de resumen está usando el contenido de marcador de posición que vino con nuestro tema de Squarespace para mostrar el título de imágenes de precio de sangre en la fecha. Por lo que una vez que lo logremos, podemos reemplazar este contenido por nuestro propio contenido de sangre sobre que se actualizará en este bloque de resumen aquí. Pero por ahora, estoy feliz solo de dejar que se use el contenido de relleno de squarespace para que pueda ver cómo se va a quedar hasta que pueda mostrarte esto y por último, truco. Entonces si pasamos a la pestaña de diseño, podemos ver aquí hay opciones de cómo se verá el bloque de resumen. Elementos de relación de aspecto, tamaño de texto de Perot, cosas así. También podemos seleccionar los diferentes tipos de bloque de resumen para ver cómo podrían verse similares a cuando teníamos el bloque de galería en la última página y tres en la tina de cuchillas. Podemos ajustar más ajustes para decidir qué información se muestra como parte del bloque y cambiar esa sintonía. Entonces acabamos de conseguir el clavo del post de sangre en el título, así que solo lo voy a dejar en eso, y esto es algo en donde otra vez, te toca a ti jugar con los diferentes ajustes, engañarlo a tu propio gusto y asegúrese de que se adapte a usted y a su sitio web. Eso. Lo que quería mostrarte es cómo controlar el diseño fuera de los bloques dentro de la página y porque, como puedes ver, nosotros mientras pasamos el ratón, obtenemos ese ícono de mano, lo que significa que podemos arrastrar eso aspecto de contenido. Pero saber a dónde vamos a arrastrarlo y a dónde se va a sentar en la página puede ser un poco complicado si no tienes este pequeño truco que he resuelto. Por lo que los bloques son todos sensibles, y cambiarán de forma y tamaño, dependiendo de dónde se encuentren en la página. Por lo que esta es una característica realmente genial de Squarespace. Puede ser frustrante si no has averiguado cómo funciona. Entonces tenemos nuestras tres cuadras. Tenemos nuestra imagen, nuestro texto y nuestro bloque de resumen aquí y así flotando sobre el borde del bloque para obtener el ícono de la mano. Eso significa que ahora puedo recoger el bloque y puedo arrastrarlo a una nueva ubicación alrededor de la página . Entonces una vez que lo recojo y empiezo a moverlo, y puedes ver que aparecen diferentes líneas dependiendo a dónde me mudé el bloque. Por lo que estas líneas indican hacia dónde irá el bloque una vez que suelte el ratón. Por lo que esa línea estaba por encima del bloque de imagen. Y ahora que se me cayó el libro ahí, se sentó justo en ese espacio de ahí. Entonces si lo arrastro de nuevo y veo la línea es ladrón ancho completo de la página y si dejo caer el libro ahí, cambia para ser el ancho completo de la página. Y para ponerlo de vuelta a donde lo teníamos antes, solo quiero esa línea corta debajo de la imagen cada debajo del cuadro de texto, y la deja caer de nuevo a donde empezamos. También puedo arrastrarlo de esta manera. AM sobre el cuadro de texto. Andi, Ahí vamos. Obtengo esa línea corta al lado de los libros de texto y en realidad se sientan, Siéntate entre los tres. Por lo que siempre tengo, como, como, una página de tres columnas ahí con texto de resumen de imagen Andi. Por lo que saber dónde van a terminar tus bloques, es particularmente útil cuando comienzas a usar bloques espaciadores para manipular el diseño. Entonces pongamos eso de nuevo en bono aquí. Eso es todo. Y vamos a conseguir una gota de lluvia para conseguir unos bloques espaciadores. Entonces eso es parte de nuestros looks de contenido básico. Es como espaciador. Um, se puede ver que podemos cambiar el tamaño del espaciador, así que ahí está thes espaciador. Los bloques son realmente útiles. Una vez que tengas tus otros bloques de contenido, puedes usar esos para agregar relleno a tu alrededor, contenido para darle más espacio y una estética más limpia, más simple. Pero de nuevo, saber dónde van a caer y cómo manipularlos es el tipo de pieza final del rompecabezas para mí en cuanto a cómo hacer que el sitio web realmente luzca como quieres que se vea. Entonces si arrastro esto hacia arriba y consigo la línea que cruza la parte superior de la página y lo suelto, ese espacio de bloque ahora se sienta a lo largo de toda la parte superior de la página, así que todo se ha derribado por esta cantidad. Puedo derribarlo aún más. llevaremos de nuevo arriba. Entonces si arrastro el espacio un bloque hasta el final del bloque de texto para conseguir esa línea corta y dejarla caer ahí, se puede ver que acaba de chocar al lado del bloque de texto ahí, encima del bloque de resumen que soy, y de nuevo, Yo puedo arrastrar eso y va a empujar eso hacia abajo y va a dar mi pequeño blurb son un poco más de espacio. También puedes arrastrar el espacio de look de esa manera y para cambiar el tamaño del mismo en ambos sentidos. Por lo que no es solo arreglado. Una vez que lo dejes caer, puedes hacer más ajustes. Entonces eso fue lo que quería mostrarte. Solo estoy para reiterar cuando estás moviendo bloques alrededor, asegúrate de que la línea de colocación que aparece es donde quieres que el bloque acabe eventualmente . Porque así es como Squarespace te dice dónde va a caer tu bloque de contenido. Y si estás usando un espacio de bloque para afectar a otro bloque de contenido, asegúrate de que la línea de colocación sea del tamaño apagado y junto al bloque al que quieras impactar. Entonces, por ejemplo, si quisiera agregar en otro espacio un bloque, pero quería sentarme junto a este bloque de resumen aquí, los Samos, um, lo que he hecho arriba allá, a drogas thespians de libro y asegúrate de que llegue esa línea corta ahí. Ya ves, si voy más allá, obtengo una larga línea, y eso significa que toda la longitud de la página va a tener el espacio un bloque sobre ella si lo dejo caer ahí ahora. Pero yo sólo quiero que el espacio de look haga efecto este bloque de resumen aquí. Entonces tengo esa línea corta ahí. Suéltala. Y ahí vamos. El espacio de bloque está vinculado con bloque de resumen. Ahí se sentó a su lado, Andi, como es ese de ahí arriba, y ahí fue donde quería dejarlo caer. Sabía que iba a terminar ahí porque por la línea de colocación, y sé que es una nueva que no iba a impactar la página completa porque no era esa larga fila. Entonces el punto importante que trato de hacer y hacer es que al saber cómo funcionan los bloques y qué puedes hacer con ellos sobre lo que puedes hacer con el espacio de bloques, realmente eres capaz de crear un diseño personalizado en tus páginas con tu propio contenido y hacen que tu Web's sea único para ti. De acuerdo, así es como podemos usar estos bloques de contenido de squarespace para diseñar y elaborar un diseño de sitio web único para nosotros. Ahora se acabó tu trabajo con el dedo del pie a través de tu lista de verificación de branding y crea tu propio sitio web único . Asegúrese de compartir su sitio web terminado en el proyecto de costos y háganos saber cómo se siente respecto en como siempre. Si tienes alguna pregunta o cualquier otra cosa que quieras que cubra, avísame en la discusión Tab Bilow. 9. Outro: De acuerdo, hemos pasado mucho en esa clase. Hemos llevado a cabo investigaciones que nos permitan desarrollar nuestras propias pautas personales de marca. Hemos creado nuestro propio logotipo en Squarespace, y hemos aprendido a utilizar las herramientas que squarespace nos da a la vista estilos y blogs de contenido para realmente permitirnos crear un sitio web que sea único para nosotros. Entonces espero que te resulte útil. Andi han disfrutado de la clase y te ha permitido crecer tu lado, ajetrearte y realmente desarrollar tu sitio web. Me olvido de agregar tu imagen de inspiración en el sitio web de acabado en el proyecto de clase abajo en Daz. Alguna vez si tienes alguna pregunta o algún problema en absoluto con squarespace, las pongo en la discusión de arriba abajo. Me aseguraré de volver con ustedes. Gracias por ver.