Cómo crear un sitio web sin escribir código

1. Introducción / tráela: Hola y bienvenidos a, Cómo crear un sitio web sin escribir código. Mi nombre es Jake [inaudible] y soy tu instructor para este curso. En este curso, como probablemente puedas adivinar, te vamos a estar enseñando a construir un sitio web sin tener que escribir ningún código. El objetivo para ti al final de este curso es irte con una página web que hayas creado. No habrás tenido que escribir ningún código para hacer esto, pero simplemente habrás creado todo el sitio web por tu cuenta desde cero. Vamos a estar usando una plataforma llamada Squarespace para construir nuestros sitios web. Es muy sencillo y es fácil trabajar con, y sé que en cuanto entres, te va a encantar. Es fácil construir tu sitio web y no tienes que lidiar con ninguno de los conocimientos técnicos ni el código que viene junto con la construcción de la mayoría de los otros sitios web. Este curso está organizado en dos secciones. En la primera mitad del curso, te voy a enseñar cómo usar realmente Squarespace, cómo configurar tu página web. Te voy a guiar por la plataforma página por página y opción por opción, explicando qué hace todo y demostrándolo por ti. En la segunda mitad del curso, vas a llegar a verme realmente entrar y diseñar un sitio web completamente desde cero. Me verás hacer todo y pasar por todo mi proceso desde planear el sitio web hasta configurar el contenido, y luego realmente implementar el diseño también. Este curso es para realmente cualquier persona que esté interesada en construir un sitio web por su cuenta, o cualquier persona que esté interesada en aprender Squarespace. Incluso si nunca has construido un sitio web en toda tu vida, te va a encantar este curso porque es extremadamente sencillo y te va a mostrar cómo configurar un sitio web completamente por tu cuenta. No es necesario tener ningún conocimiento técnico ni ninguna experiencia previa en diseño web para realizar este curso. Si tienes experiencia con el diseño gráfico, eso te va a ayudar porque vas a poder diseñar un sitio web de mejor aspecto. Honestamente, si eres diseñador gráfico, creo que te va a encantar esta plataforma, porque Squarespace te permite ser diseñador y no tener que preocuparte por que el código o cualquier otra cosa se interponga en tu camino. Incluso para personas por ahí que puedan ser diseñadores web y estén queriendo aprender la plataforma Squarespace, este es un gran curso te voy a guiar a través de todo lo que necesites saber. Con todo se han dicho, sumémonos y empecemos. 2. Configuración de tu cuenta de Squarespace: En este video, voy a estar mostrándote cómo configurar tu Cuenta Square Space. Para aquellos de ustedes que ya están configurados, pueden sentirse libres de saltar hacia adelante, pero para cualquiera que no tenga ya cuenta, les voy a mostrar cómo empezar. Entonces lo primero que vas a hacer es simplemente ir a squarespace.com, no hay necesidad de este fotógrafos que solo está ahí para la decoración. Pero aquí se va a squarespace.com, entonces vas a bajar y vas a dar click en Empezar. Ahora cuando hagas esto empieza, vas a pedirte que elijas tu plantilla y realmente puedes escoger cualquiera ahora mismo no necesitas ser demasiado específico o preocupado demasiado, así que voy a mirar a través de todo esto ahora mismo, porque en realidad vamos a pasar por eso con más detalle y puedes cambiar tu plantilla en cualquier momento. Entonces voy a ir con el primero aquí Pacific y tú vas a hacer clic en View Pacific, y luego voy a empezar con este diseño y una vez que lo hagas, simplemente te va a pedir que introduzcas tu nombre, dirección de correo electrónico, y para crear una contraseña, y luego te registras y creas tu sitio. Ahora ya tengo mi sitio configurado en, les estaré mostrando cómo hacer el uno, pero esto es bastante sencillo, bastante sencillo, estoy solo en cómo poner su sitio en funcionamiento en Square Space. 3. Por qué Squarespace: Antes de ir más allá, una pregunta que sé está en tu mente, ¿por qué Squarespace? ¿ Por qué debería construir mi sitio web en esta plataforma? En este video, voy a estar paseándote y hablando de algunas razones por las que Squarespace es genial, y algunas razones por las que tal vez no quieras construir tu sitio en una plataforma. Voy a tratar de divulgar todo por ti de manera anticipada, puedas estar seguro de que esta es la plataforma en la que quieres avanzar y construir tu sitio web. Una de las primeras razones por las que recomiendo encarecidamente Squarespace para tu página web, es que vas a poder construir todo tu sitio web sin tener que escribir ningún código. No hay muchas plataformas por ahí que puedan hacer eso y hacer eso de una manera tan limpia y profesional como Squarespace. El segundo motivo por el que recomiendo Squarespace, es que toda su plataforma es receptiva. Lo que significa responsive, es que tu sitio web va a cambiar automáticamente el tamaño de ventana, va a responder a cualquier dispositivo que lo abra. Eso significa que si alguien abre tu sitio web en tu teléfono, su tableta, su computadora, las plantillas de Squarespace ajustarán automáticamente tu sitio para que se ajuste a su tamaño de pantalla. Otra de las razones por las que recomiendo encarecidamente Squarespace, es que no tienes que preocuparte por el mantenimiento. Una de las preguntas comunes que obtengo es si alguien debe usar WordPress o Squarespace. Este es un factor diferenciador realmente grande. Una plataforma como WordPress es de código abierto. Eso significa que cualquiera puede entrar ahí y editar el código y personalizarlo como les gustaría, pero también significa que no hay ninguna empresa que esté detrás de él. No hay soporte que realmente te vaya a ayudar si un plugin se rompe o si los navegadores se actualizan o si sabes que la tecnología cambia. Esto es realmente común que los sitios de WordPress, tienes que contratar gente o traer a alguien solo para mantener tu sitio, para evitar que rompa con todos los nuevos cambios tecnológicos que están sucediendo en la web. Ahora por otro lado, con un sitio de Squarespace, no tienes que preocuparte por nada de eso. Squarespace no es una plataforma de código abierto, y entonces lo que está sucediendo es básicamente, estás construyendo tu sitio web en aplicación web de Squarespace y lo estás construyendo en sus plantillas. Eso significa que están manteniendo actualizadas esas plantillas y si construyes un sitio en él hoy, dentro de 10 años, ese sitio seguirá siendo relevante porque Squarespace está actualizando sus plantillas, y manteniendo los constantes con todo el móvil y los cambios en estándares web y web. Esto es algo realmente grande porque mucha gente se siente frustrada porque cada pocos años tienen que reconstruir su sitio web, mientras que en Squarespace, no tienes que preocuparte por eso. Tu página web siempre va a estar al día. El siguiente motivo por el que recomiendo encarecidamente Squarespace y probablemente la mayor razón es la facilidad de uso. Squarespace es tan increíblemente fácil de usar. Toda la interfaz es arrastrar y soltar, haces clic y luego cambias los colores. Es tan increíblemente simple, que es sólo algo que cualquiera puede aprender y descifrar. No lleva tanto tiempo. Al final de este curso, vas a saber usar toda la plataforma y te vas a sorprender lo rápido y fácil que puedes conseguir un sitio web para tu negocio. Otra razón para amar a Squarespace es que tienen plantillas increíblemente increíbles y minimalistas. Tienen un montón de plantillas diferentes entre las que puedes elegir para construir tu sitio web encima de. Pero lo sorprendente es que tienes tanta capacidad para personalizar esas plantillas, a donde puedes ir a múltiples sitios que están construidos en la misma plantilla y no tendrías ni idea de que se construyeron encima del mismo marco exacto. Squarespace es plantillas, son increíbles para trabajar y también son realmente personalizables. Otra razón es simplemente que su atención al cliente en Squarespace es fenomenal. Están 24-7, siempre están ahí. Podrías abrir un boleto de apoyo y volverán contigo en poco tiempo. Otra gran pregunta que consigo sobre Squarespace ¿es un SEO amigable? Sí, lo es. Honestamente, SEO dentro de Squarespace, lo hacen muy sencillo. Lo han construido en la plataforma. Hay un puñado de cosas que modificas, pero tengo mi propio sitio web arriba y tengo algunos artículos que son de alto ranking en SEO, y me dibujan mucho tráfico cada mes. Sé por experiencia personal que los sitios de Squarespace pueden ser geniales para SEO. Otra gran herramienta es que puedes usar la integración de Google Apps con Squarespace. Si utilizas Google Apps para tu negocio, para hospedar tu correo electrónico y Google Drive y todo eso, puedes vincular eso directamente con Squarespace, lo que hace para una integración realmente simple y sin fisuras. Otra característica nueva que acaban de lanzar, que es extremadamente impresionante, es que tienen una integración de Getty Images. Getty Images es un sitio web de fotos en stock pero es uno de los mejores del mundo. Squarespace lo ha configurado para que puedas obtener cualquier foto de stock que puedas buscar a través de su mercado por solo $10. El último motivo por el que solo voy a sacar a Squarespace, es simplemente el costo. Con Squarespace, estás viendo un costo aproximado de $8 a $16 al mes dependiendo del plan que necesites seguir. Si bien de inmediato algunas personas pensarán que eso en realidad es más caro que decir, hospedar tu propio sitio web en otro lugar, la verdad es que de nuevo no tienes que preocuparte por el mantenimiento. No tienes que preocuparte por pagar a la gente por esas mejoras. A la larga, Squarespace es en realidad mucho más barato. La cuota mensual no es realmente tan mala, y el hecho de que te va a ahorrar dinero en mantenimiento y que la gente arregle tu sitio, te va a ahorrar dinero a largo plazo. Hay momentos en que un sitio no es un buen ajuste para Squarespace aunque. Yo quiero dar a conocer esto por adelantado, para que lo sepas, antes de tiempo y no te estás sumergiendo en este curso si no va a ser un ajuste adecuado para ti. Pasaremos por algunas cosas en este momento y razones por las que tal vez no quieras Squarespace. Una de las mayores razones por las que la gente puede tener para alejarse de Squarespace, es que quieren tener un sitio de membresía. Quieren que personas inicien sesión y construyan perfiles. Puedes hacerlo a través de la plataforma de desarrolladores de Squarespace, que hace que el sitio web, toda la plataforma sea de código abierto, pero honestamente probablemente no te interese eso si vienes a este sitio web sin código curso. Pero si necesitas inicios de sesión y todo para tu sitio, entonces es posible que necesites mirar otras plataformas o contratar a un desarrollador para que construya un sitio para ti. Otro problema que a veces la gente se encuentra, es tener una base de datos, tal vez almacenar gran cantidad de información, datos de búsqueda o tener de nuevo, esa base de datos del sitio de membresía. Esas son cosas que la plataforma normal de Squarespace no puede hacer. Se puede hacer con la plataforma desarrollador pero probablemente no algo en lo que vas a querer sumergirte. Pero realmente esos son los únicos grandes temas que te vas a encontrar. En ocasiones puede que tengas algunos problemas, donde no puedes ajustar un diseño en la medida que quieras con la plataforma normal pero realmente tienes una tonelada de personalización. Creo que vas a estar muy contento con la plataforma. Para cualquiera que esté buscando un sitio informativo simple para su negocio, sitio web de comercio electrónico, una plataforma de blogs o cualquier simple negocio en línea que no sea un sitio de membresía, Squarespace es una elección fenomenal y realmente piensa que te va a encantar la plataforma y amar trabajar con ella. Al final del día, si no sabes si Squarespace es un ajuste adecuado o estás un poco inseguro, siempre puedes exportar tus datos en cualquier momento y puedes exportarlos directamente a un archivo de WordPress, que prácticamente cualquier otro sistema de gestión de contenido del sitio web te permitirá subir eso, y si estás en WordPress o estás en Tumblr o en cualquier otra plataforma, puedes importar fácilmente tu sitio web desde esas plataformas. En Squarespace, no te sientas así como un compromiso por la vida. Si alguna vez quieres dejarlo puedes, pero estoy bastante seguro después de que empieces a meterte con él por un tiempo y te pongas en marcha tu sitio, estoy bastante seguro de que te va a encantar. 4. Cómo planificar tu sitio web: Ahora vamos a bucear y empezar a entrar en la fase de planear nuestra página web. Mucha gente quiere simplemente saltar y empezar a diseñar su sitio web y vomitar contenido pero en realidad no piensan en lo que va a estar en el sitio o cuál es el propósito de su sitio antes de tiempo. En esta sección, vamos a hablar un poco sobre cómo planear tu sitio web con anticipación. La primera pregunta que te quieres hacer cuando estás planeando tu sitio web es, ¿cuál es el propósito de este sitio web? ¿ Por qué estás haciendo esto? ¿ Estás haciendo esto para albergar tu portafolio en línea? ¿ Estás haciendo esto para vender productos de comercio electrónico? ¿ Esperan que esto vaya a reunir leads o crear conciencia? Necesitas entender cuál es el objetivo de tu sitio web antes de sumergirte y empezar a crearlo o diseñarlo. Porque si no tienes un objetivo o propósito real detrás de tu sitio web, es fácil para un visitante simplemente confundirse realmente cuando visitan tu sitio web o no saben qué hacer. Entonces tu sitio web realmente no hace nada para ayudarte. Tienes que pensar realmente en el front-end y contestar la pregunta, ¿cuál es el propósito de este sitio web? La siguiente pregunta que quieres hacer es, ¿qué contenido va a estar en este sitio? ¿ Cuántas páginas voy a tener? ¿ Qué información voy a poner ahí arriba? ¿ Qué imágenes necesito? ¿ Qué videos necesito? Necesitas empezar a pensar, ¿cuál es el contenido que va a estar en tu página web? Trata de pensar en esto de antemano y no solo empieza a tirar cosas ahí arriba. Una manera realmente genial de hacer esto es crear un sitemap para tu sitio web. Puedes hacer esto con bolígrafo y papel si quieres, o hay una herramienta que me gusta mucho llamada MindMeister, y puedes configurar una cuenta de forma gratuita. Puedes crear un sitemap en su plataforma que te permita pasar y mostrar, ¿cuáles son las páginas individuales que voy a estar creando? ¿ Qué va a estar en todas esas páginas? Realmente empiecen a pensar eso a través. Cuando llegue a la segunda mitad de este curso, y de hecho paso por el diseño de un sitio web de principio a fin, voy a mostrarte cómo usar MindMeister y darte un poco de conceptos en torno a la herramienta. Entonces ahora que tienes un propósito para tu sitio web y has pensado un poco en el contenido, sigamos adelante y zambullamos y empecemos a configurar tu cuenta de Squarespace y pongámonos a trabajar en enseñarte a construir un sitio web sin escribir código. 5. Un breve tour de Squarespace 7: En este video, te voy a estar dando un recorrido básico por Squarespace 7 y la interfaz. Una vez que hayas configurado tu cuenta, y te hará algunas preguntas de identificación más a lo largo de eso. Pero después de que termines ahí todo eso, te va a llevar a esta pantalla aquí mismo. Dependiendo del tema que elijas, puede verse un poco diferente por aquí tengo un sitio web diferente, pero básicamente esto es a lo que te va a traer, y esta es la interfaz home de Squarespace. En primer lugar lo que vas a notar está por aquí a la izquierda, es que tienes estas diferentes pestañas para páginas, diseño, comercio, métricas, comentarios, ajustes, y ayuda. También tienes tu perfil aquí abajo. No tendrás que preocuparte demasiado por esto. Pero si tienes múltiples sitios, es realmente genial porque puedes cambiar entre varios sitios realmente rápidamente. Pero probablemente no vas a lidiar con eso demasiado pronto si este es tu primer sitio. Pero lo que puedes hacer es básicamente por aquí, puedes tener todas estas diferentes opciones que puedes seleccionar. Entonces por aquí, este es nuestro editor de sitio web en vivo. Esto es lo que ves es lo que obtienes plataforma de edición de sitios web. Literalmente puedo desplazarme hacia abajo y ver todo el contenido aquí en este sitio, así que tienes un gran sitio de desplazamiento vertical aquí. Vas a ver que aparecen cosas pequeñas como esta que dice, “Galería”, “Agregar imágenes o video”. Verás “Contenido de la página”, donde puedo editar, haga clic en la “Configuración”. Lo asombroso de Squarespace es, mientras que otras plataformas realmente no se llega a ver lo que estás haciendo al mismo tiempo. Literalmente, si quiero cambiar eso, esto se encuentra en digamos Manhattan. Bueno, estoy modificando algún contenido demo, así que me va a preguntar si quiero hacer esto. Voy a dar click en “Sí”. Pero básicamente cada vez que comienzas un tema en Squarespace, tienes este contenido demo que está incorporado ahí. Para fines de demostración, solo puedo mostrarte, literalmente acabo de hacer clic en “Editar”, cambio esto a lo que quiera, Nueva York, y haga clic en “Guardar”. Tan fácil como eso, he cambiado texto en la página web. Eso se puede hacer con estos encabezados aquí arriba. De nuevo, si quiero cambiar esto a Old American Dining, haga doble clic en eso, sube aquí y vuelve a hacer clic en “Guardar”. Nuevamente, voy a pasar por todas estas características con mucho más detalle. Pero solo darte una visión básica de cómo funciona Squarespace. Puedes editar la configuración en tus diferentes páginas, todas estas cosas. Es realmente lo que ves es lo que obtienes. Caminaré por todo esto con mucho más detalle, trabajando con la navegación y todo en un poco. Pero antes de sumergirme en esto más lejos, sólo te pasaré por cada una de las pestañas por aquí a la izquierda. El primer tabulador es la pestaña de páginas. Aquí, básicamente si vengo aquí y hago clic en eso, esto me va a mostrar mi navegación y literalmente todas las diferentes páginas y contenidos del sitio. El tabulador de páginas es realmente donde se va a vivir cualquier contenido de tu sitio. Ahora para volver a las otras, voy a dar click en “Inicio”, y me trae de vuelta aquí a la pantalla de inicio. El apartado de diseño del sitio. Aquí es donde vas a subir cosas como tu logo, o puedes seleccionar nuevas plantillas, que entraremos en el siguiente video. Puedes hacer el editor de estilos, cambiar colores, cambiar fuentes, cambiar tamaños, todas esas cosas. Puedes editar tu página de pago para el comercio electrónico. Entonces hay un montón más de funciones que otra vez, voy a sumergirme en un poco más de detalle en videos posteriores. Pero solo quería darte una visión básica de la plataforma aquí. Vamos a volver de nuevo y dar click en “Comercio”. Nuevamente, esto te llevará al lado comercial de los sitios. Si quieres dirigir una tienda de comercio electrónico o quieres vender productos, productos digitales, productos físicos. En estas secciones de comercio donde haces eso, muchos sitios que tal vez nunca necesites tocar esto. Simplemente puedes saltarte las secciones de comercio posteriores. Aquí abajo en métricas, si vas a esto, esto va a, nuevo te da una visión general básica del tráfico, el uso de móviles, o tus suscriptores prácticamente cualquier cosa por el estilo. Es una forma realmente básica de obtener algunas buenas métricas y datos sobre tus sitios web. Entonces tienes comentarios. Esto si tienes algún blog y tienes algún comentario pasando por Squarespace como plataforma. Tienes tu configuración aquí abajo. Esto entrará de nuevo en más detalles mucho que sucede y esa zona. Entonces si alguna vez necesitas ayuda, puedes hacer click en “Ayuda” y te llevará a help.squarespace.com. ayuda de Squarespace es fenomenal. Ellos responderán muchas preguntas para ti, y si es algo que va más allá de lo que ayudan, siempre te referirán felizmente a especialistas de Squarespace como yo o cualquiera que pueda ayudarte a arreglar los problemas en tu sitio. Ese es un panorama realmente básico de Squarespace 7. Nuevamente, vamos a sumergirnos en todas estas secciones mucho más profundas y más videos. Pero eso es todo lo que tengo para este. En el siguiente video, voy a estar mostrándote cómo ir realmente y cambiar las plantillas en tu sitio. 6. Cómo seleccionar la plantilla correcta: En este video, te voy a estar mostrando cómo instalar nuevas plantillas de Squarespace, y también te voy a dar una visión general de los diferentes temas y las funcionalidades e intentar darte un poco de línea de bajo sobre elegir tu tema y en qué dirección quieres ir. Ahora puedes cambiar tu tema en cualquier momento por la línea para que no haya absolutamente ninguna preocupación ahí. Pero el tema que elijas va a marcar una diferencia realmente grande en cuanto a la funcionalidad y el aspecto y la sensación de tu sitio web. Te explicaré que todo lo que voy a pasar y a demo algunos de mis temas favoritos para vosotros chicos. Para empezar, vamos a bajar aquí y dar click en “Diseño”. Después de hacer clic en diseño, vamos a dar click en “Plantilla”. Una vez que hacemos click en plantilla, vamos a dar click en “Instalar nueva plantilla”. Esto te va a traer de vuelta a esa primera pantalla que vimos cuando nos registramos para nuestra cuenta de Squarespace. Te va a mostrar de nuevo todos los diferentes temas que tiene aquí Squarespace, que hay mucho para elegir más de lo que puedo explicar probablemente en este curso, pero te mostraré algunos de mis favoritos. Para empezar, en realidad uno de los primeros aquí arriba es un nuevo tema de Squarespace llamado turno. Lo que voy a hacer es solo mostrarte si haces click en alguno de estos temas y haces click en ver. va a dejar como que llegues a ver el sitio, un poco de demo del mismo. Se trata de una nueva plantilla, por lo que no hay muchos ejemplos. Pero otros sitios en realidad tendrán muchos sitios web de clientes que se utilizan en esa misma plantilla. Esos son realmente cool para hacerse una idea de lo que el aspecto general y sentir este es verso simplemente mirando el sitio de ejemplo que te dan. De nuevo, si hacemos click en “Ver demo en vivo”, y luego siempre te recomiendo solo hacer clic en este enlace para que puedas verlo a pantalla completa. Pero lo que va a hacer es básicamente abrir el sitio que tienen aquí mismo. Esta es una especie de sitio de demostración que han construido para ti. Lo que vas a ver es aquí arriba a la izquierda tenemos el logo, tienes artículos como la navegación aquí arriba. Tienes este llamado a la acción con algún subtexto y un botón. Esta es en realidad una gran característica del tema. Está en un puñado de sitios. Pero Bedford y shift son dos temas que realmente están definidos por estas grandes imágenes con las dos líneas de texto y el botón. nuevo, esto es en realidad parte del tema que estás viendo ahí mismo con cómo se ve esto. Al bajar por aquí, puedes empezar a sentir un poco por ello. Ves que este tema parece tiene efecto de paralaje sobre estas imágenes. Podrás volver a ver todas estas cosas y algunas de las características y funcionalidades. Ahora el color del texto, la fuente, ese botón colores, las fotos, todas esas cosas pueden ser personalizables pero lo que realmente buscas cuando estás mirando un tema o cuáles son estas funciones que están sucediendo. Otra vez en estos ves tienen estos deslizadores básicos aquí donde puedes tener un poco de texto y luego sobre dónde haces clic y aprende más. Nuevamente, sitios muy cool, plantilla muy cool. Esta y Bedford es otra de las plantillas, son muy similares y las recomiendo encarecidamente. Volveremos aquí y vamos a ir a dar click a “X” fuera de eso. Vamos a volver a instalar unas nuevas plantillas. Vamos a echar un vistazo a algunos de los otros temas aquí. Horizon es otra plantilla nueva de Squarespace, pero una plantilla muy cool y te mostraré un poco por qué. Se hace click en “Horizonte”. De nuevo, vamos a venir aquí a la vista previa en vivo. En este realmente sí tienen algunos ejemplos sitios de clientes. Puedes hacer clic a través de estos y echar un vistazo a estos sitios de ejemplos. Algunas de estas son realmente geniales para darte una idea de las funcionalidades y lo que se puede hacer con el tema. Si miras suficientes de ellos, empezarás a ver algunas similitudes y cómo funcionan, cómo funciona la navegación de diferentes características. Esto vamos a conseguir una vista previa en vivo, y otra vez dar click en este para que solo pueda verlo a pantalla completa. Aquí de nuevo, tenemos esta navegación básica sobre la parte superior. Tenemos estas enormes imágenes de fondo. Tenemos textos con un botón y luego una compra en iTunes. A medida que bajamos, empezamos a ver solo algunas de las características y cómo se ve el texto. Vemos estas opciones de turismo aquí mismo. Algunas de las cosas realmente geniales sobre este tema es que te permite realmente construir páginas completas encima de las imágenes. Con el tema Bedford y turno que apenas estábamos mirando, el tema solo funciona para que solo puedas tener realmente como un titular en una frase o dos en tu imagen. Pero con horizonte, en realidad tienes esta capacidad de tema más avanzado, es más difícil trabajar con pero en realidad puedes construir secciones enteras o páginas enteras de tu sitio encima de un fondo como este y tener esta pila vertical efecto. Nuevamente, plantilla muy cool, muy recomendable. Es un poco más avanzado, pero puedes conseguir una sensación realmente fresca con ella. Si tienes buena fotografía, este es un tema fenomenal para ti. Vamos a salir a X de esto. Vuelve aquí. De nuevo, haga clic en “Instalar una nueva plantilla”. Me trae de vuelta a esta página. Adversario, en realidad no voy a ir todo el camino a este. Pero otro tema muy similar a Bedford y turno, tiene ese mismo texto grande similar y un botón de llamada a la acción. Pero ésta sí tiene algunas otras funciones y mira. Te recomiendo checar en este también. Mira, vamos a bajar a unos cuantos más. Hayden, otro muy parecido a Bedford y para cambiar y todos esos y adversario, que acabo de mencionar. Vas a ver esto mucho donde tienes estos diferentes básicamente dos tamaños de fuente diferentes y un llamado a la acción. Squarespace sí a través de muchos de sus temas, es una buena práctica en diseño web. Es una característica que tienen en muchos de ellos. Nuevamente, éste tiene en similar, Hayden tiene ese aspecto y tacto similar también. Voy a dar clic atrás a todos los diseños. Vamos a bajar y cinco. Este es uno de los temas más antiguos de Squarespace. Probablemente uno de mis favoritos. En realidad construyo mi sitio web personal sobre esto. Probablemente he construido más sitios de clientes en cinco también. Es un tema muy sencillo. También es realmente poderoso porque probablemente es el tema que está más cerca de lo que pensarías cuando piensas en un blog estándar. Es una muy típica, tienes tu navegación básica aquí arriba, tienes tu logo, y tienes navegación por un lado, tienes tus iconos de redes sociales justo aquí. Entonces tienes estas grandes imágenes de banner y tienes el contenido aquí mismo. Otro gran beneficio real y algo que tener en cuenta en tus temas es que no todos los temas tienen una barra lateral en el blog. Algunos de los temas tienen blogs de página completa. Pero cinco tiene una barra lateral en el blog, que es una característica realmente poderosa y probablemente si tu foco principal de este sitio web es construir un blog, cinco pueden ser una plantilla realmente buena para ir con. Nuevamente, lo ejecuto en mi página web personal y me encanta absolutamente este tema. Es realmente, realmente versátil. Vamos a salir de eso, volver y voy a cubrir unos cuantos más antes de pasar a algún otro contenido. Ven aquí para marquesina, este es otro tema realmente genial. Nuevamente, uno de los temas probablemente más populares en Squarespace pero lo que hace tan grande a esto es la funcionalidad paralaje. Te lo mostraré muy rápido. lo que hablo cuando digo la palabra de fantasía paralaje. Pero cuando digo eso, básicamente se ve cómo la imagen se mueve lentamente a medida que se desplaza y revela y desvela diferentes partes de la imagen. Eso se llama paralaje. Este tema hace eso realmente, muy bien. Es muy robusto y probablemente uno de los temas más populares en Squarespace. No decir que eso es algo malo sigue siendo otra vez. Todo esto se puede personalizar, las fuentes, las fotos, los colores. Todo se puede personalizar, por lo que realmente puedes construir esto en el sitio que quieres que sea. Vamos a volver otra vez y te acompañaré por las últimas. Siento que acabo de llegar al final, pero hay tantas buenas plantillas pero me cuesta decidir. Wexley es una genial para decir, fotografía o portafolios diseñados. Tenemos cola de milano otra muy similar a cinco con unas cuantas funcionalidades diferentes, pero un sitio muy cool y me gusta mucho este. Esto es al lado de cinco, probablemente el sitio en el que construyo más sitios de clientes que cualquier otra cosa. Vamos a bajar y aquí está Bedford que mencioné. Simplemente consigues una especie de probar mis sitios favoritos en nuestros temas en Squarespace. De nuevo, eso no es decir que ninguno de estos otros sean malos. Todos tienen cosas realmente geniales. Algunas de estas son en realidad muy diferentes en el look and feel. Nuevamente, el aviador es en realidad una mirada y sensación completamente diferentes a cualquiera de los que te mostré. Abastecimiento, otra vez uno muy interesante con una navegación lateral. Simplemente hay tanto por lo que realmente solo tienes que jugar con ellos. Mis esperanzas son este video te mostró algunas de las diferencias dentro de los temas y además solo te dio algunos criterios para evaluarlos en contra a medida que comienzas a elegir tu propio tema. Pero de nuevo, no te preocupes, puedes cambiar tu tema en cualquier momento. No es un gran trato si no te gusta el tema o te metes y simplemente no se ve como quieres. Siempre puedes cambiar el tema y traerá todo ese contenido contigo en cualquier momento. 7. Cómo instalar una plantilla: En el último video, te di una visión general de los temas. Pero en este video realmente quiero mostrarte cómo instalar y cambiar tus temas. Una vez que pasas por todas estas y encuentras un tema que te guste, que voy a ir con cinco, por el bien de la sencillez y la familiaridad. De verdad creo que este es un tema muy bueno para empezar, es muy básico, muy sencillo de usar, y muy bueno para trabajar. Nuevamente, vamos a dar click en “Ver Cinco”. Entonces esta vez, ya que sabemos que vamos a ir con éste, no estamos haciendo otra cosa, voy a dar click en “Instalar plantilla”. Obtuve esta pequeña notificación de que la instalación fue exitosa. Ahora como estoy de vuelta aquí en el editor de Squarespace, noto que ahora tengo dos temas aquí, pero sin embargo nada ha cambiado, todavía tengo todo este mismo tema del Pacífico y todo así por aquí. Lo que voy a hacer es que voy a bajar aquí y voy a necesitar dar click en “Vista previa” en la plantilla de cinco. Lo que eso va a hacer es llevarme ahora al modo de vista previa. Si has estado trabajando un montón en Pacific, y entonces simplemente no estás seguro de si realmente te gusta, puedes venir aquí y en realidad solo previsualizarlo. Ahora mismo cambia el contenido hacia fuera, porque estos son el contenido básico del tema. Pero si tienes tu propio contenido y todo ya incorporado en el sitio, y solo quieres ir a previsualizar una plantilla diferente, no hay daño hecho. Puedes fácilmente simplemente volver atrás en cualquier momento. Incluso en realidad se puede trabajar en esto. Si bien está en modo de vista previa, puedo volver aquí y sólo puedo empezar a meterme con este tema. Incluso puedo entrar aquí a las páginas y empezar a meterme con ello, que son demos, así que tengo que crear la página cada vez. Pero en realidad puedo entrar aquí y empezar a editar la navegación. Yo puedo empezar con eso. En realidad puedo entrar aquí y cambiar el texto, o puedo entrar al editor de estilos, que son todas las cosas que te voy a mostrar en un poquito, así que no te abrumes demasiado todavía. Pero en realidad puedes operar un poco en este modo de vista previa. A ver si te gusta adónde va este tema, y si no, vuelves a plantilla y puedes hacer clic en “Cancelar vista previa”, y va a volver a cualquier tema que hayas seleccionado antes. Ese tema acabará de volver directamente aquí al Pacífico. Pero como nos gustan los cinco, nos gusta adónde va esto, vamos a poner esto como nuestra plantilla en vivo. Entonces, ¿estás seguro de que quieres hacer visible esta plantilla? Esto lo hará visible en el front-end de tu sitio, por lo que si tu sitio ya está en vivo, todo el mundo lo verá. Vamos a golpear “Confirmar”. Boom, ya hemos actualizado con éxito nuestra plantilla en vivo. Siempre que volvemos, cada vez que trabajamos en esto, básicamente estaban trabajando en la plantilla de cinco por ahora. No se hace daño si dejas instaladas estas otras plantillas. Si realmente tienes un diseño pasando en uno de esos, mantiene todos esos presets, mantiene esa mirada, siempre puedes volver más adelante abajo si aún encuentras que no te está gustando el tema con el que estás trabajando ahora. Eso es todo sobre cómo instalar realmente un tema en Squarespace. 8. Comprender la pestaña de páginas: En este video, te voy a estar mostrando y explicando la pestaña Páginas aquí debajo del menú principal. Para empezar, lo que vamos a hacer es bajar aquí a la pestaña Páginas y lo que vas a ver es un montón de contenido demo, tiene esta palabra demo junto a ella. Básicamente, lo que ves es que ya tienes todo este contenido cargado. No importa qué tema elijas en Squarespace, vas a tener alguna cantidad o algún contenido demo aquí. Generalmente, se pueden hacer algunas cosas. Simplemente puedes eliminarlo y hacer clic en “Deshazte de eso, y simplemente deshazte de ellos. O si quieres y te gusta el look que tienen pasando, te gusta este diseño y piensas, quiero una página así. Puedes entrar aquí al contenido de la página y hacer clic en “Editar”. va a preguntar si quieres crear una página como esta. De repente, ahora tenemos una página que está en nuestro sitio y podemos ir diseñándola para asombro. Quiero decir que la imagen es bastante impresionante. Pero sí, podemos entrar aquí y podemos editar todo este sitio, que nuevamente en un video posterior te voy a mostrar cómo usar todas estas herramientas de edición. Pero sólo tienes que saber que si te gusta el diseño, te gusta el diseño de una página y no quieres tener que reconstruirla, si te gusta cómo es todo esto y solo quieres cambiar las fotos y cambiar el texto, tú puede hacer eso simplemente creando la página y haciendo clic en ella. De nuevo, vamos a bajar aquí y solo tienes que hacer clic en “Trash” en todos estos y eliminar este contenido demo. Deshacerse de todas estas cosas. También te vas a dar cuenta de que aquí abajo, este es mi contenido demo de más sobre el tema del Pacífico. Todo esto puede ir también. Cosas que simplemente no necesitamos. Parece una carga, pero honestamente como dije, si puedes hacer clic en alguna de estas páginas, solo edítalas. Es una gran manera de apenas empezar en Squarespace y no tener que preocuparse demasiado por averiguar el diseño. Literalmente puedes ir a sus temas, cambiar cosas y trabajar a partir de ahí. Pero honestamente, prefiero solo construir desde cero y eso es lo que estoy seguro ustedes chicos cómo hacer aquí hoy también porque es honestamente, creo que un poco más fácil. Nuevamente, borrando todo este tipo de cosas y ahí vamos. Aquí no tenemos nada. Ahora hemos eliminado todo nuestro contenido demo que no necesitábamos, y lo que vamos a hacer ahora es solo hacer algunas páginas aquí en nuestra página web. Yo los voy a hacer. Voy a subir aquí, voy a hacer clic en el botón “Plus” en la navegación principal y voy a crear una página ahí mismo fuera de eso. Voy a pegarle a “Inicio”. Lo que notarás es que acabamos de tener un icono de Inicio o algo de Inicio apareciendo en nuestra navegación ahí mismo. Ahora si quiero agregar otra página, y solo te muestro cómo solo estoy agregando páginas ahora, pero también puedes agregar portadas, que te explicaré más adelante, productos, carpetas, blogs, galerías, eventos, links, todas estas cosas que Entraré en un poco más tarde. Pero voy a crear otra página. Voy a hacer sólo una página Sobre. Ahora vemos que tenemos Acerca y tenemos Inicio en nuestra navegación. Pero ¿y si digo que quiero crear una página y no la quiero en la navegación? Bueno, sólo voy a bajar aquí, voy a agarrar y tirarlo hacia abajo a la sección no vinculada. Página por aquí se refresca. Ahora vemos eso sobre, todavía podemos acceder a la página, todavía podemos llegar a ella, pero ya no está vinculada en nuestra pantalla de inicio. Nuevamente, cualquiera de los que queremos eliminar, solo hacemos clic en este pequeño “Trash” puede aquí mismo. Si alguna vez eliminamos algo y no queremos, podemos hacer click en “Páginas eliminadas” aquí abajo. Nuevamente, se puede ver todo el contenido demo que eliminé. Si accidentalmente borras todo tu sitio web, no te preocupes, no todo se pierde. Permanecerá en las páginas eliminadas durante siete días antes de que se borre. Vuelve aquí a las páginas. Sólo voy a mostrarte de nuevo estos enlaces aquí arriba. Yo sólo voy a caminar por estos otros. Portada Cubriré en un video posterior. Pero la carpeta es una realmente, realmente poderosa también. Digamos que creamos una carpeta y creamos carpeta “Sobre nosotros”. Lo que verás es que esto va a aparecer cada vez que se refresque. Ahora tenemos esta carpeta Acerca de nosotros y no parece que hicimos nada diferente. Pero ahora si queremos, podemos anidar algunas páginas bajo esta carpeta. Los arrastramos justo aquí en toda esta zona, y ahora si nos desplazamos sobre nosotros casa y sobre desplegable. De nuevo, eso es cosa realmente, realmente poderosa. Si queremos añadir de nuevo, añadir aún más a eso, podemos bajar aquí y añadir un enlace. Aquí arriba está el título del enlace así que vamos a decir enlace a Google, y luego aquí abajo sólo vamos a ir a google.com y hacer clic y decidir qué queremos. Ahora esto en realidad es algo allá arriba vamos. Te diste cuenta de cómo parte de ella estaba cortada antes? Bueno, si me desplaza por aquí a la izquierda, en realidad salta esa ventana hacia arriba. Ocasionalmente, es una especie de cosa peculiar en Squarespace. Pero si estás trabajando en un navegador pequeño como yo ahora mismo, entonces en realidad vas a notar ese pequeño problema a veces donde parte de tu interfaz se corta y tienes que desplazarte por aquí. Una vez que tengamos ese enlace a Google, podemos hacer clic en “Abrir” en nueva ventana y le pegamos a “Guardar” ahora. Ahora aquí vamos. Tenemos este Inicio, Acerca y tenemos un enlace a Google justo aquí en nuestro sitio, muy útil en caso de que alguien no lo sepa. Pero eso es sólo un resumen básico de la sección sobre nosotros. Voy a entrar a las portadas, la galería, y algunas de esas otras características un poco más. Pero esto solo te muestra un poco sobre cómo construir el árbol básico del sitio y la estructura de tu sitio web. 9. Un tour extendido de Squarespace: Ahora que has configurado tu cuenta y has empezado con Squarespace, te voy a dar un recorrido extendido y realmente empezar a recorrer cada una de las áreas del sitio y a explicar qué hace todo. Esta es una larga, y puede haber partes que puedes saltarte que no sean relevantes para tu negocio. Pero creo que esto te va a ayudar a darte una comprensión mucho mejor de lo que hace todo en Squarespace como plataforma y de lo que es capaz. 10. Comprender la pestaña de diseño: En este video, te voy a estar dando una breve visión general de la pestaña Diseño, y no vamos a profundizar demasiado en todo sobre esta pestaña en este momento, pero sí quiero darte un resumen básico y solo un recorrido básico de esto. Entonces bajaré aquí, y voy a dar click en Diseño, y aquí vas a ver un puñado de opciones diferentes. En primer lugar, contamos con nuestro logotipo y título. Podemos cambiar el título de la página web sin un código. Cosa. Sólo tienes que añadir un poco de algo ahí dentro y hacer que se vea elegante. Podemos tener la línea de etiquetas, que no todos los temas soportan una línea de etiqueta pero si queremos poner es fácil. Entonces podemos poner eso ahí dentro. Pero en este tema 5 no soporta la línea de etiqueta, por lo que no hay preocupación ahí. Logotipo, si queremos, en realidad podemos subir e intercambiar un logo en esto el cual te mostraré en tan solo un segundo. O si no tienes un logotipo, Squarespace sí tiene este práctico creador de logotitos dandy justo aquí, y tan genial. Simplemente lo probaré, me meteré en esto, y solo diremos algo como Squarespace. En realidad puedes empezar a buscar símbolos o simplemente desplazarte hacia abajo y ver todo lo que tienen aquí. Por lo que solo puedes remarcar el Squarespace como este diamante, o esta vieja radio o un velero, perfecto. Hay algunas cosas muy cool que puedes hacer con su pequeño creador básico de logotipos. No voy a entrar profundamente en esto ya que muchas empresas y mucha gente cuando están empezando ya tienen sus propios logotipos, pero es algo solo un poco básico que te puede hacer ir y empezar. Entonces voy a ir a X fuera de eso. Después tienes tu ícono de navegador o tu favicon, como se llama, y aquí puedes agregar una imagen para esta pequeña sección aquí arriba, donde ves este cubo ahora mismo para Squarespace. Puedes agregar las tuyas propias para que realmente llegues a ver una foto de ti mismo o una pequeña versión de tu logo allá arriba. lo ahorraremos una vez que hayamos terminado. Vamos a pegarle a Design para volver atrás. Ya hemos pasado por la pestaña de plantillas, así que estás familiarizado con eso. Tienes el editor de estilos que realmente es una de las características centrales de Squarespace, así que en realidad voy a gastar un video entero en esto en un rato, yendo más allá en esto y mostrándote cómo ir y editar todos estos diferentes colores, todas estas cosas diferentes que parece mucho, pero te prometo que no es tan complicado, es muy sencillo. Entonces te mostraré eso en un video futuro. Tienes tu editor de estilo de página de pago, similar al editor de estilos pero esto es para si tienes un sitio de comercio electrónico y la gente está revisando y comprando en tu sitio. Tienes una barra de anuncios, o puedes agregar esta pequeña barra de anuncios básica arriba y decir algo aquí, y así que si quieres decir, oh, nuevo curso ya disponible, puedes poner algo muy fresco por ahí, un pequeño anuncio para tu gente. Por lo que esto es realmente bueno para un lanzamiento de producto o para llamar la atención sobre algo en su sitio. Algo muy cool, puedes agregar una URL para que eso haga clic, o una página específica en tu sitio web. Entonces desactivaremos eso por ahora. Vamos a golpear Save, rebota de vuelta fuera de aquí. Hit Design. Barra de información móvil, de nuevo, similar a una barra de anuncios, pero esto es algo que añades y te permite mostrar diferentes cosas como tu correo electrónico si quieres tu número de teléfono, ubicación, horario comercial. Esto es algo que sólo se mostrará en la versión móvil de tu sitio web, pero si eres un restaurante o una pequeña empresa y sabes que probablemente la gente va a estar viniendo a tu sitio para buscar cosas como tus horas o son abren o algo así, puedes hacer alguna barra de información móvil realmente básica, y es muy útil tener. Entonces voy a golpear Save, volver al diseño. Insignia de Squarespace, si quieres mostrar algo de amor puedes habilitar esta pequeña insignia de Squarespace, y justo aquí en la esquina inferior, llegas a ver esto potenciado por Squarespace, o puedes ajustarlo como lo harías me gusta. Pero otra vez, muy cool pequeña plataforma ahí mismo. Probablemente, no todos querrán eso pero si quieres mostrar algo de orgullo de Squarespace. CSS personalizado. De nuevo, esto es un poco avanzado, si conoces alguna codificación en absoluto cual no eres tú. Probablemente no pinchaste en este curso si conoces la codificación. Pero aquí puedes hacer algo de CSS personalizado y esto es algo un poco más avanzado si quieres salir de las funcionalidades existentes de Squarespace, y luego tienes esta pestaña Avanzado, y de nuevo, probablemente no demasiado de lo que te vas a preocupar aquí. Este tipo kit id para fuentes y la vista del dispositivo es solo una cosita básica si tienes esto habilitado, y ves cómo simula un teléfono a medida que mi navegador se hace más pequeño. Eso es lo que es la vista del dispositivo. Entonces si no te gusta eso, y solo quieres mantenerlo sencillo siempre luciendo como un escritorio, lo desactivarías. Pero eso es un resumen básico de la pestaña de diseño. Nuevamente, voy a sumergirme en ese editor de estilos con más detalle en un video posterior. 11. Comprender la pestaña de métricas: En este video, en realidad voy a saltar sobre el comercio, ya que les voy a mostrar eso un poco más tarde. Voy a saltar aquí abajo a la pestaña Métricas. Como te darás cuenta, en realidad ya no estoy en nuestro sitio web sin sitio de código. Pero he saltado a mi sitio personal porque no hay métricas del otro lado, por lo que sería aburrido mirar. De esta manera, ustedes en realidad llegarán a ver un poco de lo que parece y lo que hacen las funciones de métricas integradas. En primer lugar, la pestaña Métricas construida en el Squarespace es realmente poderosa. Para aquellos de ustedes que están interesados en usar Google Analytics, pueden enlazar fácilmente eso también, y les mostraré cómo hacerlo en un video posterior. Pero incluso sin eso, las herramientas integradas de Metrics en Squarespace son bastante robustas y ya pueden mostrarte algunas cosas muy geniales. Para empezar, vamos a dar click en la “Visión general del tráfico” bajo Métricas. Aquí esto me va a mostrar mis visitas regulares para que en realidad pueda ver cuántas personas vienen a mi sitio a diario. Aquí, se ven algunos saltos hasta 256 y algunos aquí abajo. Se puede empezar a ver simplemente básicamente toda la información. Lo que notarás es que verás una primera para tamaño de audiencia, una segunda para visitas, y la siguiente para vistas de página. ¿ Qué significa eso? Eso significa que 192 personas diferentes se presentaron en mi sitio. Eso significa 218 visitas a mi sitio, así que parece que un puñado de personas regresaron a él más de una vez al día, y luego hubo 377 vistas de página, así que mucha de esas personas hicieron clic en varias páginas también. Nuevamente, puedes empezar a ver esas tendencias. Se puede ver aquí abajo en un formato de gráfico de barras. Aquí te muestra el tipo de visitas promedio a lo largo del tiempo, y alguna información realmente genial aquí. Aquí abajo, se pueden ver los navegadores. qué está surfeando la gente? ¿ Qué están usando las personas en realidad cuando llegan a tu sitio? Todos pueden ver los sistemas operativos, o el Mac, Windows, y qué versión también. Tienen Android, y iPhone, y todas las cosas diferentes aquí también. Algunas cosas muy cool aquí bajo el Traffic Overview. Haga clic en Volver a Métricas. Ahora, vamos a dar click en “Uso Móvil”. Aquí, podemos empezar a ver que 78 por ciento de los visualizadores en el escritorio, 21.3 por ciento están en el móvil. Empiezas a llegar a ver esto solo te muestra, de nuevo, tu porcentaje de móvil en un día dado y qué días se dispara eso. Nuevamente, cosas muy geniales aparecen en los sistemas operativos de escritorio y también en sus sistemas operativos móviles. A continuación, vamos a bajar aquí, y vamos a dar click en “Suscriptores”. Esto te da una vista realmente genial. Se puede mirar cualquier cosa que tenga un feed RSS y se puede ver el número de suscriptores a ese feed. Si haces click en Blog, puedes ver a todas las personas que tienen lectores de alimentación que están vinculados a ese sitio para que tal vez tirando de eso también. Puedes hacerlo de nuevo en podcast y puedes mirar eso en un diferentes tipos de bases y en cuanto a suscriptores y todo lo que sea a lo largo de esas líneas. Algo muy cool. Te permite ver personas que te están suscribiendo con RSS. A continuación, vas a mirar refiere. Esta es, de nuevo, información muy cool. Te permite ver que el 40 por ciento de mi tráfico viene de Google, 37 por ciento está llegando directamente. Tenemos este porcentaje proveniente de thefreelancereport.com, este porcentaje proveniente de How Design. Podrás empezar a ver todos estos diferentes referidos y de dónde viene tu tráfico. Nuevamente, esta es información extremadamente útil, sobre todo a medida que comienzas a acumular una buena cantidad de tráfico, y qué diferentes sitios web enlazan contigo. Volvemos, y bajamos a Contenido Popular. De nuevo, esto te va a mostrar algunos de tus contenidos más populares y qué porcentaje de tu tráfico general que se compone en esta semana. Nuevamente, puedes hacer click en mensualmente si quieres, o incluso puedes simplemente mirar diariamente en cualquier sentido de eso. Si miramos esto, vemos que esta entrada de blog constituye el 57 por ciento de mi tráfico. Bastante popular que ocupa un lugar alto en Google. Otro 10 por ciento viene a mi página de inicio, 7.86 por ciento va a mi blog, y tiene estas otras publicaciones que son muy populares en su momento. Todas estas cosas diferentes, en realidad puedes empezar a ver cuáles son el contenido más popular, y mirarlo a lo largo de un periodo de tiempo. Consultas en buscadores. De nuevo, esto es muy guay porque puedes empezar a ver qué términos la gente está haciendo clic y cómo te están encontrando. Te vas a conseguir mucho de esto no proporcionado como parte de cosa con Google y búsquedas protegidas. Pero puedes empezar a ver todos estos términos diferentes por los que la gente está llegando a mi sitio y lo que realmente están buscando en Google cuando vienen a mi sitio. Nuevamente, cosas muy útiles realmente empiezan a ayudar a ver cómo se están desempeñando realmente sus rankings SEO. Bajar aquí al Registro de Actividades. De nuevo, esto sólo te va a mostrar cuándo entran los visitantes, y así en realidad puedes empezar a ver las direcciones IP y lo que realmente están haciendo. Si estás haciendo un lanzamiento de producto y quieres ver algo en vivo, nuevo, una pequeña característica muy cool justo aquí. Entonces, por último, resumen de ventas. Nuevamente, no tengo ningún producto que actualmente vendo para mi sitio, así que esto parece bastante aburrido, pero si tienes un sitio de e-commerce, esto te dará métricas de todas tus ventas. Eso es un poco sobre la pestaña Métricas. Espero que verlo con algunos datos ayudara a hacerlo un poco más evidente y a entender lo que estaba pasando. 12. Comprensión de la la pestaña y los discos de comentarios: En este video, voy a estar presentándote a la pestaña de comentarios, y hablando un poco de comentarios en tu sitio de Squarespace. Entonces si bajamos aquí y damos click en Comentarios, lo que vamos a ver es que tenemos básicamente una pequeña sección donde cualquier comentario que se presente, los podemos aprobar, o podemos ver cuáles son desmoderados, cuáles están aprobados, y cualquiera que marquemos que estén equivocados, o que creemos que son inapropiados, o spam, o algo en nuestro sitio. Ahora bien, si se han dado cuenta cuando en realidad cuando fuimos a mi sitio web previamente y les mostré las métricas, la pestaña de comentarios no estaba realmente ahí, y eso es porque Squarespace tiene este sistema de comentarios incorporado. Si acabas de configurar tu sitio y no haces nada más, tienes este sistema de comentarios incorporado en Squarespace, y es bueno y funciona muy bien. Pero Squarespace también se ha integrado con esta plataforma llamada Disqus, y esta es básicamente la plataforma de comentarios más grande en Internet. Por lo que la mayoría de los blogs, la mayoría de las plataformas por ahí , son impulsados por Disqus y probablemente hayas visto algo que se parezca a esto, donde tienes este sistema de comentarios y tienes este avatar en este perfil, y entonces qué Disqus lo hace es que te permite crear un perfil, y básicamente albergar esto en tu blog, y cuando haces eso, realidad es capaz de, cualquier sitio web que vayas a un nuevo comentario, a enlaces a tu perfil, que luego enlaza de nuevo a tu sitio web, y hay una enorme base de usuarios. Por lo que la mayoría de los bloggers, la mayoría de los comentaristas , están en Disqus, y en el video de configuración en realidad voy a mostrarles cómo hacer eso. En un video posterior, te voy a mostrar toda la integración aquí con Disqus. Pero sólo quería explicar eso rápidamente, que con Disqus, probablemente vas a querer integrar eso un poco más tarde. Así que sigue viendo, y te voy a mostrar eso, y honestamente, si no estás blogueando, si no estás poniendo ningún contenido como ese, solo estás haciendo sitio web informativo o es un sitio web de portafolio sin comentarios, realmente no tendrás que preocuparte por esta pestaña en absoluto y solo puedes dejarla ser. Pero si estás blogueando , echa un ojo a los videos posteriores donde te mostraré cómo hacer la integración completa con Disqus. 13. Comprensión de la pestaña de ajustes de 1: En este video, voy a estar paseándote por la pestaña de ajustes aquí y Squarespace y tipo de explicar mucho lo que pasa debajo de cada una de estas pestañas y lo que es todo. Esta es una parte realmente importante del sitio. Aquí entra mucho, así que prepárate y vamos a sumergirnos. Entonces primero voy a dar clic en ajustes por ahí a la izquierda, verás tenemos un puñado de opciones, y luego incluso en menú avanzado que entra en más opciones. Entonces voy a pasar por estos por won. Básicamente, vamos a empezar con una información básica. Si llegas a información básica, puedes elegir si tu sitio es un negocio, comercio electrónico, sin fines de lucro, personal, no es un gran negocio. No hará mucha diferencia en la funcionalidad ni nada en su sitio. Se puede establecer una breve descripción del sitio, algunos temas vamos a utilizar esta mayoría de temas no utilizan esta descripción del sitio. Pero recomendaría escribir algo aquí de cualquier manera porque este también es un área útil para la optimización de motores de búsqueda para poner suma tipo de palabras aquí. Puedes permitir la promoción de Squarespace. A veces promoverán sitios web que piensan que son realmente buenos o los pondrán como uno de esos tipos de plantillas de ejemplo en su sitio web, y luego puedes venir aquí abajo a información de negocios, horas, teléfono, correo electrónico, todo eso. Para que puedas poner tu número de teléfono, dirección de correo electrónico. Puedes configurarlo en un mapa, elegir tu horario laboral y todo eso. nuevo, un puñado de los temas, en realidad vamos a tirar de esta información y tipo de enchufarla al tema para ti, así que es una característica muy útil tener, no todos ellos lo hacen, pero probablemente vale la pena simplemente poner información ahí de cualquier manera. Entonces, cuando volvamos de la información básica, vamos a volver de nuevo a la configuración. Una vez que estemos de vuelta aquí en el menú de configuración, vamos a hacer clic en escuchar en el idioma y la región, y esto es realmente para que puedas establecer la región en la que estás, la zona, que es relevante, sobre todo si estás haciendo eventos en su página web. Squarespace tiene una especie de calendario de eventos incorporado. Si tu zona horaria se establece mal, entonces todos los eventos de tu calendario van a aparecer indebidamente para cualquiera que venga a tu sitio web. Esto es bastante simple, todo lo que realmente haces es averiguar más o menos en un mapa donde estás o donde se basa tu negocio. Te vas a dar click en que pequeños puntos volados se va a mover ahí, y yo tuve éxito y perfectamente me hice clic en Denver, que es de donde me base. Pero a veces si estás en la zona áspera, tal vez estaba tratando de hacer clic en Phoenix o Boise, pero sí, solo pinché en Denver, y ahí vamos. Acabamos de establecer la zona horaria, que ahora es adecuada, como verán, el tiempo aquí abajo coincide con mi tiempo allá arriba. Ahora hemos establecido nuestra zona horaria, y pegado a “Guardar”. Voy a volver a la configuración y vamos a seguir adelante. Por lo que vamos a dar click siguiente en “Dominios”. Aquí es donde realmente vamos a ir y tipo de trabajo con dominios de horas. Dominio siendo http://websitewithoutcode.squarespace.com. Yo quería, podría hacer clic en esto, y podría renombrarlo a webwithoutcode2. Podría cambiar la URL del sitio. Realmente no voy a hacer eso porque realmente no necesito hacerlo ahora mismo, así que sólo voy a cancelar. Pero aquí también es donde más adelante vamos a vincular dominio. Entonces siempre que estés listo para lanzar tu sitio web en vivo y decir que estás intentando lanzar un websitewithoutcode.com o jakejorgen.com. Estás tratando de ponerlo en vivo en tu nombre de dominio. Aquí es donde vamos a ir a hacer eso, y eso lo explicaré con más detalle un poco más tarde. Además, si quieres, puedes hacer click en obtener un dominio gratis, y básicamente qué pasa si eliges comprar una cuenta anual y compraste un año de Squarespace, Obtienes un dominio gratis con tu sitio. Así que de nuevo, muy cool, muy práctico poco característica que vale la pena buscar y puedes bajar aquí y conseguir una.org, .net, .biz o cualquiera de estas cosas geniales. Eso es todo lo que cubriremos en los dominios escriban ahora. De nuevo, te mostraré más tarde cómo lanzar realmente tu sitio web en vivo. A continuación vamos a bajar aquí para el correo electrónico, y esto es algo que es nuevo en Squarespace 7.0 Y una característica súper interesante, una que en realidad se sumergirá un poco más una vez que empecemos. Pero en realidad puedes conectar SquaresPace a tus Google Apps en cuentas de correo electrónico. Esto es realmente, realmente genial porque honestamente es realmente difícil muchas veces averiguar cómo lanzar tu dominio y luego hacerlo sin estropear tu dirección de correo electrónico. Entonces si tienes una cuenta de Google Apps, literalmente puedes conectarte ahí mismo con tu cuenta de Squarespace, y hace todos los registros, todo el enrutamiento en el back-end, para que no tengas que preocuparte por entrar y meterse con todas esas configuraciones de DNS y los registros MX para asegurarte de que tu correo electrónico no descienda cada vez que inicies tu sitio web. Por lo que si eres usuario de Google Apps, recomiendo encarecidamente echar un vistazo a eso. Te lo mostraré más tarde. Yo quiero mostrarte cómo configurar Google Apps lo haremos en diferente tema, pero esta es una cuenta demo de Squarespace, así que no puedo mostrarles aquí chicos en este. A continuación, vamos a bajar aquí a los permisos, y esto es realmente permisos se llamaron alguna vez, creo, asesorar a los contribuyentes, pero han cambiado el nombre en esto. Es muy útil si dices que quieres agregar personas adicionales a tu sitio web. Entonces digamos que quiero que uno de mis amigos o un compañero de trabajo o un escritor trabaje en el sitio conmigo. Lo que ojo puede hacer es o agregar un autor básico, que es simplemente básicamente quería darle, en realidad no va a crear una cuenta, solo va a crear una especie de avatares para que cuando blogueo, pueda decir que este autor es por, o esta entrada de blog es por, así y así. que puedas crear un avatar, puedes poner una imagen con eso. Puedes vincularlo a su Google Plus aquí abajo. Se puede poner en una biografía completa en las cuentas sociales y todo ahí mismo. Entonces de nuevo, una cosa muy guay solo agregar un autor básico, pero este autor realmente no tiene forma de iniciar sesión. Todo lo que realmente están haciendo es decir, por ejemplo, supongo que un caso de uso de cómo usarías este autor es decir, estás ejecutando un sitio web de blog y alguien te envía una publicación de invitado o algo que quieran publicar en tu blog. Bueno, tal vez no quieras realmente darles inicios de sesión a tu sitio y que intenten averiguar cómo publicarlo por su cuenta, y en cambio prefieres simplemente tomarles el documento de palabra y publicarlo en tu sitio. Lo que harías es básicamente agregarlos como autor, poner ahí información básica y todo aquí dentro, y entonces de esa manera cuando pones esos posts, puedes decir que el post fue por quien, sea cual sea su nombre, en contraposición a que parezca que está viniendo siendo escrito por ti. Por lo que es una forma de publicar trabajo de otras personas sin tener que conseguir que se registren en su sitio y establecer todo ese tipo de cosas. Ahora, vamos a descartar eso. otro lado, tienes este colaborador, así que tienes un autor básico que realmente no hace nada en el sitio, realidad es sólo una especie de perfil de un escritor en tu sitio web, y luego tienes un colaborador. Un colaborador es alguien que realmente obtiene permisos para trabajar en tu sitio, y hay estos diferentes niveles de permisos. Entonces por ejemplo, podría escribir en John Doe justo aquí y JohnDoe@gmail.com. Espero que esa no sea una dirección de correo electrónico real, probablemente lo sea, pero sí, y entonces básicamente podría invitarlos y darles un puñado de diferentes tipos de permisos y privilegios en el sitio web. Entonces si les doy un administrador, entonces literalmente tienen control total sobre el sitio web. Pueden diseñar, pueden editar la facturación, pueden hacer cualquier cosa en la página web. Por lo que los administradores, básicamente, eres un administrador compran default cuando configuras una cuenta. Un administrador sería alguien más que tenga todos esos mismos privilegios. Entonces por ejemplo, cada vez que muchos de mis clientes me contrataron para hacer diseño de Squarespace para ellos, me configuraron como administrador porque realmente necesito acceso tonto para editar todo en su sitio para abeja capaz de diseñar y hacer todo ahí. Por lo que el siguiente es un editor de contenidos. Esta persona básicamente pueden entrar, pueden editar contenido en la página web, pueden editar texto, posts de blog, cualquiera de ese tipo de cosas, pero no pueden cambiar el diseño, ellos que no pueden ir en la configuración, la facturación, cualquiera de esas cosas. Entonces si tal vez solo estás contratando a un redactor para tu sitio, esta es una manera realmente buena de darles solo los privilegios de redacción de copias. El siguiente es la facturación, y esto es realmente sencillo, pero di que estás en una empresa y necesitas dar cuentas por pagar, tal vez tengan dos ingresan la información de facturación para esto. Ahora puedes configurar solo un perfil de facturación en ellos, bueno literalmente las únicas opciones que van a tener es solo entrar, iniciar sesión y configurar la facturación. Entonces de nuevo, una forma muy sencilla de simplemente tener a alguien login y simplemente configurar su cuenta de facturación. Reportando. Nuevamente simplemente básicamente da un acceso a la estadística. Moderador de comentarios. Esto volvería a ser muy sencillo si tienes muchos blogs en tu sitio tal vez. Tienes un puesto o alguna otra empresa solo modera los comentarios. Eso también se puede hacer. Se puede establecer a alguien como comentarista de confianza. De nuevo te mostraré más adelante cómo configurar tu configuración de comentarios. Pero, puedes tener ajustes de comentarios donde básicamente no se publica ningún comentario hasta que lo apruebes. Pero puedes poner a alguien como comentarista de confianza y decir: “Oh, yo sabía que Joe siempre pone buenos comentarios sobre que hay una persona de confianza que no me va a enviar spam. Puedo ponerlo como comentarista de confianza”. Entonces el último perfil es un gerente de tienda. Básicamente le da acceso a alguien para trabajar con todo el e-commerce, administrar los pedidos de los clientes, cualquiera de esas cosas y también editar el contenido en la página web. Estas son las formas básicas en las que puedes invitar a alguien a colaborar y contribuir en tu sitio de Squarespace. Vamos a volver a salir de aquí, y vamos a descartar. Eso es todo justo en la pestaña Permisos, y ahora voy a saltar de nuevo aquí a Configuración. El siguiente y uno muy importante es Social. Lo que tienes aquí es un puñado de opciones diferentes de cómo puedes gestionar tus redes sociales. Lo primero que realmente vas a querer hacer cuando estés configurando tu cuenta y poniendo tu página en marcha, es bajar aquí a Social y dar click en “ Cuentas Conectadas ” Cuando haces click en Cuentas Conectadas, donde realmente puedes hacer es entrar aquí y hacer clic en “Conectar cuenta”. Te va a dar todas estas diferentes opciones de redes sociales para todo, desde Dribbble hasta Facebook, Twitter, Google Plus, Tumblr, YouTube, todas estas diferentes integraciones. Básicamente todo lo que haces, es que solo tienes que hacer click en una. Si vamos a tener en mi click para enlazar mi perfil de Twitter. Si ya estás conectado, entonces literalmente solo va a venir a la pantalla como para autorizar, así que voy a autorizar la app. Acabo de conectar mi cuenta de Twitter tan fácil como eso. Ahora cuando paso por mi sitio web y digo que quiero agregar enlaces de redes sociales en cualquier parte de los sitios, o el tema tiene algo incorporado como aquí tenemos en cinco acabas de ver este ícono de Twitter apareció aquí arriba. Todo eso básicamente está todo conectado automáticamente a mi cuenta de Twitter ahora. Apenas a partir de esa sencilla integración de cuenta connect. Nuevamente puedo volver atrás y hacer eso por Facebook, Google plus sin importar cuántas cuentas sociales quiero hacer. Ahora puedes hacer eso también con Instagram y algunos de estos, Twitter, Instagram, YouTube, y un puñado de éstos incluso tienen pequeñas apps que están integradas en Squarespace, que luego demostraré. Pero algunas características realmente geniales sobre cómo realmente puedes usar estas integraciones de redes sociales y cómo simplemente las conectas y luego básicamente obtienes estas aplicaciones y puedes hacer pequeños widgets en tu sitio. Esa es la parte de las cuentas conectadas de Social. A continuación vamos a bajar aquí a los Botones Compartir. En muchas de las plantillas y sobre todo con el blogueo, tienes estos botones de compartir. Eso es si alguien lee una entrada de blog o está en una página que le guste, puedes agregar estos pequeños botones de compartir y luego básicamente compartirá esa publicación automáticamente a estas diferentes cuentas. Básicamente aquí se puede decir, aquí están todas las cosas que quiero que puedan compartirlo dos hacen. Bueno, a lo mejor me gusta Facebook, Twitter, Google Plus, LinkedIn, pero realmente no me importa el Strombled Upon o el mercado de Pinterest o Tumblr. Eso no es realmente lo mío. O tal vez lo sea y solo puedes dejar esto encendido. Entonces cuando realmente lo vuelvas a hacer se va a activar. Pero sí, básicamente puedes elegir con qué redes sociales quieres compartir, para que así no sobrecargues todo tu sitio web con demasiados botones de compartir donde simplemente es feo y abrumador. Puedes elegir los que te gusten. Ahí está otro muy cool el cual es un Pinterest Pin-It Button. Si habilitas esto, básicamente puedes habilitarlo para blogs o para blogs y páginas. Lo que esto va a hacer es básicamente tener un poco de superposición en tus sitios web que básicamente permitirá a cualquiera anclar cualquiera de tus imágenes o tus entradas de blog o páginas diferentes. Es una pequeña característica muy cool. Aquí te damos un ejemplo de cómo se verá. Digamos que tienes esta foto y alguien puede subir aquí y fijarla. A ver. No he guardado aún por lo que no se ha integrado del todo. Pero puedes elegir de nuevo, pequeño o grande. Puedes elegir una forma, un rectángulo o un círculo para el logotipo de Pinterest. Simplemente puedes bajar aquí y meterte con los ajustes. Vuelve a cambiar todas esas cosas. Pero esto es realmente útil especialmente para, digamos si tu mercado está en Pinterest la gente que estás queriendo conseguir delante, es una característica súper útil. Muy cool tenerlo permite realmente mucha más interacción social inmediata incorporada automáticamente ahí mismo a través de tus sitios. Tienes que hacer cualquier codificación personalizada. Todo lo que haces es solo agregar esta pequeña opción Pinterest Pin-It Button. Pero por ahora, voy a dejar eso apagado y golpear “Desactivar”. Vamos a volver y vamos a ahorrar. Entonces vamos a volver a Social. Ahora debo mostrarles la sección final aquí sobre social. Pero en realidad salté a mi cuenta personal para mostrarte esta porque es un poco más fácil de demostrar. Pero si vengo de nuevo a lo social, y doy clic aquí abajo en “Página de Facebook”, lo que vamos a ver es, que en realidad puedo convertir una sola página mi sitio web en una página de Facebook y convertirla en una pestaña en mi página de Facebook. Es muy guay. Lo que he hecho es básicamente elegir ahora tengo todas estas diferentes páginas de Facebook que administro para mí y para los clientes. Básicamente voy a elegir la Lista Vinculada a mi página personal de Facebook. Nuevamente, para que cualquiera de nosotros trabaje, primero debes vincular tu cuenta de Facebook a Squarespace. Entonces lo que puedo hacer es bajar aquí y puedo instalar una pestaña de galería si quiero y tener tal vez un portafolio o una galería de mi trabajo. Entonces también puedo tener una pestaña de página de Squarespace. Lo que puedes hacer es que si haces click en esto, literalmente me va a mostrar todas las páginas de mi página web las cuales tengo bastantes. Pero tengo esta lista de correo de Jake Jorgovan inscribiéndose. Entonces realmente puedo cambiar ese encabezado en esto, y establecer esta pestaña básica de la página de Squarespace. Ahora qué va a hacer esto voy a saltar a Facebook aquí y mostrarte. Es que si estoy aquí en mi página de fans de Facebook, nuevo esto está en una página de fans no mi página de perfil personal, tengo todas estas diferentes opciones aquí arriba para línea de tiempo sobre fotos. Ahora tengo esta pequeña opción para inscribirme al boletín de correo electrónico de Jake. Esto es super cool porque si alguien simplemente hace clic en esto, literalmente ven la página exacta de Squarespace que construí en mi sitio. Esta es una página en mi sitio web que ahora se acaba de construir básicamente escribir aquí en mi página de Facebook. Característica súper práctica puedes usar esto para tal vez tu portafolio, incluso puedes hacer con la página de inicio de tu sitio por lo que enlaza a otras cosas. Para mí, lo hice solo por un simple registro de newsletter por correo electrónico. Pero es una característica súper cool de una manera que realmente puedes personalizar tu página de fans de Facebook y formas que muchas otras personas no pueden hacer así es algo que es bastante cool y único para Squarespace. 14. Comprensión de la pestaña de ajustes de 2: Vamos a seguir aquí con ajustes y ahora voy a bajar, voy a dar clic en la siguiente opción, bloguear. Entramos en el blogueo, lo primero que vamos a ver es este formato de URL post. Lo que vas a ver es ahora mismo por defecto va a decir /año/mes/día/title. Básicamente lo que esto significa es que si voy ahora mismo a mi blog y hago clic en este primer proyecto sobre por qué los creativos deben tener proyectos paralelos. Lo que vas a ver, y lo que te voy a recomendar es que solo tengas el título como parte de tu URL, porque una URL es básicamente todo esto aquí y por defecto, lo que va a hacer es hacer el año, el mes, y el día. Si no cambiara esta opción, diría, 16/01/2015/ por qué los creativos deben tener proyectos paralelos. Si no hice lo que estoy a punto de mostrarles, que es eliminar esas otras opciones del formato URL, todos mis blogs tienen esta URL larga realmente grande, de la que no es un gran fan. Prefiero tenerlo lo más corto posible. Lo que voy a hacer es básicamente simplemente eliminar todos estos. De esa manera realmente es solo /blog/el título del artículo y para hacer eso, literalmente voy a entrar aquí y golpear backspace. Simplemente borra cada uno de estos, el /año/título todo eso. Con lo que sólo vamos a terminar es este título y esta es la opción que tengo en mi sitio ahora mismo. Cuando vas a mis blogs, lo que viste es /blog/por qué los creativos deben tener proyectos paralelos, el título del artículo. A continuación, les voy a mostrar cómo enlazar disqus, el sistema de comentarios que mencioné anteriormente, sitio de squarespace de dos años. Seguimos aquí bajo la opción de blogging y lo que voy a hacer es que necesito ingresar mi nombre corto disqus. Lo primero que tengo que hacer es dirigirme aquí a disqus y te recomiendo configurar un sitio o ponerte un perfil para ti mismo, cual no te voy a guiar por todo eso. Creo que puedes registrarte para un perfil por tu cuenta. Pero lo que vamos a querer hacer es una vez que hayas ingresado, baja aquí, haz click en tu perfil y pulsa “Admin”. Una vez que estés aquí en este panel de disqus, puedo hacer clic en este enlace aquí mismo y añadir un nuevo sitio web. Mi sitio es sitio web sin código en websitewithoutcode.disqus.com, pero se toma. Haré un sitio web jakes sin código y éste no se toma. Eso es lindo. Yo puedo elegir y diremos que este es un sitio web de negocios. Aquí vamos a terminar el registro. Una vez que pasemos por ahí, va a pedir integrarnos con una plataforma y ver aquí puedes ver este código universal WordPress, blogger type pad, Tumblr, todas estas cosas. Pero vamos a dar click. Aquí en medio hay un hermoso icono del espacio de la cuadrada. Haga clic en eso. Ahora nos va a mostrar básicamente las instrucciones de configuración para el próximo Squarespace. Lo que vamos a tener es básicamente otra vez, te va a decir cómo administrar ajustes generales, que en realidad está un poco fechado en ahí sitio web. Nuestro Squarespace ha cambiado, como ven, ahora estamos bajo las opciones de blogging, por lo que este es disqus incorrectos que necesitan actualizar chicos. Pero lo útil aquí es que te va a dar tu nombre corto y tu nombre corto disqus es realmente todo lo que necesitas. Voy a copiar este pequeño nombre corto aquí mismo. Voy a pegar esta escucha derecha en la cuenta de Squarespace y justo ahí tenemos disqus ligados nuestro sistema de comentarios ha sido totalmente reemplazado por disqus y el sistema interno de comentarios Squarespace ahora ha sido canjeado por disqus. Muy sencillo. Lo último de esta página es que tenemos gusto simple. Esta pequeña entrada de blog opcional donde alguien puede decir, me gusta tu post, eso es genial y puedes elegir tener eso o no. Entonces aquí también si dices no tienes tu nombre corto disqus, que en realidad voy a dejar esto fuera por un segundo porque para mostrarte, pero di que no usas disqus. Bajamos aquí a los comentarios y ajustes. En realidad podemos establecer un puñado de configuraciones de comentarios en nuestro sitio. Al igual que podemos habilitar comentarios globalmente o podemos desactivarlos y literalmente no hay comentarios en nuestro sitio web. Nuestros blogs son solo artículos, pero no hay comentarios al respecto. Podemos permitir que a la gente le gusten los comentarios. Podemos requerir una aprobación, y esto significa que todo va a salir en esa cola de moderación antes de aparecer realmente en vivo en tu sitio web. Puedes elegir si quieres que la gente comente de forma anónima o si tiene que poner información. Comentarios enhebrados, puede la gente responder a otros comentarios. Se puede tener un hilo de donde alguien inicia una discusión y todo el mundo simplemente sigue jugando fuera de eso. Si quieres que se muestren los avatares o simplemente texto siguiente para los comentarios y luego si quieres habilitar comentarios o en realidad puedes desactivar o habilitar los comentarios a medida que avatares y publicar cada entrada de blog. En esta siguiente opción aquí, cómo desactivar los comentarios valor predeterminado. Voy a ser recto, honesto y decirte que no sé qué hace esto. Simple como eso sólo vamos a seguir adelante. No lo sé del todo. Estoy pensando que así es como tarda en un comentario moderado simplemente desaparecerá pero podría estar equivocado. Obviamente, nunca lo he usado, así que no creo que sea demasiado terriblemente importante. Puedes elegir tu orden de clasificación de comentarios, que es hacer cada comentario más reciente que te guste, tus comentarios menos gustados primero. Entonces, ¿quieres que la gente sea capaz de marcar comentarios y establecer eso. Después elige el número de comentarios, si un comentario recibe una bandera, entonces se establece automáticamente a la espera de moderación y tal vez tengas un sitios de alto tráfico y si cinco personas lo marcan, entonces entra en el en espera de sección de moderación. Suma cosas sencillas en torno a cómo puedes editar tus comentarios allí. Sólo vamos a salvar esto. Vuelve aquí a bloguear. En realidad me gusta este pequeño link disqus así que solo voy a retroceder y eso me traerá de vuelta aquí a Squarespace, justo de vuelta donde estaba. Simplemente vamos a pegar en ese nombre corto disqus, pulsa “Guardar” y ahora lo hemos configurado. Todavía podemos entrar en este ajuste de moderación de comentarios y aunque tengamos disqus habilitados, todas estas opciones, todavía puedes resolver estas opciones aquí en tu sitio web. Eso es todo lo que tenemos aquí en la sección de blogs. SEO, Optimización de motores de búsqueda. Esto se trata básicamente de tus rankings de Google y de cómo apareces cuando alguien escribe palabras clave relevantes a Google. Vamos a hacer click en “SEO” y aquí puedes entrar en una breve descripción para tu página web. De nuevo, esta es una manera muy útil de poner algunas palabras clave aquí, cosas que querrías estar buscando. Pero intenta no solo apilar con palabras clave, sino que trata de describir realmente tu sitio web un poco lo, hazlo algo legible. A Google no le gusta cuando las cosas se crujan con palabras clave. En realidad prefiere el contenido orgánico real. Entonces también, si alguna vez estás en esta sección de SEO, cómo te recomiendan hacer clic en este enlace sobre cómo aumentar la visibilidad de tu buscador. Voy a pasar por esto con más detalle, pero ha cambiado a lo largo de la vida de Squarespace desde que han lanzado nuevas opciones. Pero esta página te dice todo sobre cómo optimizar tu sitio para SEO. Hay algunos otros trucos que te mostraré en el camino, pero es un buen lugar para empezar. Siguiente cuadro bajan aquí al formato de título de la página de inicio. Probablemente tengas muy baja probabilidad de que cambies esto. Pero si quieres, puedes flotar por aquí. Ya ves un poco más al respecto, pero dudo que vayas a lidiar demasiado con esto. Siguiente sería un título de colección. Entonces esto en realidad es bastante útil. Así que digamos, tienes un título de colección como el blog slash, o una galería o algo así y alguien va a una publicación de blog. Ahora esto es básicamente volver a elegir, ¿cómo quieres que aparezca esto? ¿ Tan solo quieres que el nombre del sitio barra la URL o quieres que tu nombre del sitio slash blog slash el nombre del artículo. Entonces de nuevo, si te deshaces de esto, acorta aún más tu URL y no tendrás ese blog de barra ahí dentro. Entonces estas son cosas individuales otra vez, como la publicación del blog, solo puedes acortar esto si quieres o puedes tener el título del elemento ahí también. Nuevamente, cosas no enormemente importantes, pero si te estás poniendo serio, estás construyendo un blog, mucho contenido, estas son cosas que vale la pena investigar. A continuación, vamos a bajar aquí a seguridad. Esta es una característica realmente útil, pero digamos que su sitio está en modo borrador. Si escribes una contraseña aquí, y básicamente lo que esto hará es cuando alguien venga a tu sitio web, tiene que ingresar una contraseña para mirar el sitio. Eso es realmente útil si estás construyendo una nueva versión de un sitio web o estás trabajando en un proyecto de alto perfil y no quieres que la gente lo sepa. Es una forma genial de simplemente ocultarlo. Ustedes pueden trabajar en ello internamente y nadie lo puede ver a menos que tengan esta contraseña. Facturación en cuenta. Esto básicamente vas a entrar aquí, y si quieres ver tus facturas, cuánto has pagado, quieres ver el historial de tu login, o simplemente quieres eliminar el sitio web y puedes hacer eso aquí, también puedes entrar aquí y solo ingresar tu información de facturación. Estoy haciendo esto en un sitio de demostración de Squarespace, Así que sólo dice que este es un sitio gratuito. Pero de lo contrario puedes entrar aquí y dar click en tu información de facturación. Entra en todo ese pago y todo. Por último vamos a bajar aquí a avanzado, que abre un hoyo manojo más. Pero voy a pasar por estos bastante rápido, no un gran trato. 404 página de error no encontrada, Esto básicamente significa si alguien va y hace un error tipográfico en tu sitio o tienes un enlace muerto. Básicamente puedes enviar esto a un sistema predeterminado cual dice que no pudimos encontrar la página que estabas buscando. O lo que hago en mi sitio es en lugar de enviarlos a una página de error, los envío a solo directamente a la página de inicio. De esa manera, si tienen un dead-link, los trae de vuelta a la página de inicio y ojalá no los envíe totalmente o piense que mi sitio está roto. Tan simple cosita ahí. Hit save. Cabeza hacia atrás escuchar. editor de texto predeterminado probablemente no va a querer meterse con esto a menos que sepas escribir markdown, que es un formato de tipo blogging para escribir muy rápidamente. Entonces probablemente no se va a preocupar por eso. Escape key, esto es realmente genial pero, si voy solo a Jake jorgovan.com, ni siquiera estoy conectado a Squarespace ni nada escriba ahora. Acabo de golpear escape. Literalmente me lleva y puedo empezar a trabajar en mi página web. Si no estuviera conectado, me pediría que iniciara sesión, pero ya estoy conectado. Entonces eso es algo genial, algunas personas no les gusta, pero puedes apagarlo si quieres, y solo tienes que ir a squarespace.com para iniciar sesión. Pero honestamente, me gusta creo que es bastante útil. Importación, exportación. Si desea exportar su sitio, puede exportarlo en básicamente un formato WordPress. Squarespace hace esto porque casi si lo tienes en formato Wordpress, puedes subirlo a casi cualquier otra plataforma. Pero así si alguna vez necesitas mover tu sitio fuera de Squarespace, Puedes exportar todo el contenido, los blogs, todas esas cosas. También puedes importar contenido. Podemos bajar aquí y puedes importar desde Squarespace versión cinco, puedes importar desde WordPress, Tumblr, Shopify, Etsy, Blogger, Big cartel. Por lo que si ya tienes un sitio en una de estas plataformas, solo puedes tirar de tu contenido directamente. Tan realmente simple. Nos vamos de vuelta aquí, y vamos a servicios externos, y vamos a mostrarte cómo configurar tu Google Analytics, el número de cuenta que puedes ingresar aquí, o tu etiqueta asociada de Amazon. Probablemente me voy a sumergir a mucho en el asociado de Amazon. Se puede Google eso si es necesario. Es realmente simple, en realidad solo pones tu etiqueta asociada justo ahí. Entonces en el video posterior, en realidad te voy a mostrar cómo configurar Google Analytics también en tu sitio web, pero también muy simple literalmente simplemente ingresas en tu número de cuenta de Google Analytics. Entonces, cosas muy simples. A continuación vamos a bajar aquí, modo Desarrollador. No vas a tocar eso porque eso es en realidad si quieres abrir Squarespace y meterte con el código y todo, y esta pro-clase se llama sitio web sin código así que, estoy asumiendo que probablemente no vas a querer vaya al modo Desarrollador. Inyección de código. Probablemente tampoco vas a lidiar con esto. Pero, si necesitas poner algún HTML o CSS personalizado, o necesitas poner, algún código en tu encabezado para pequeña aplicación o widget específico que quieras. Se puede poner eso ahí también. De nuevo, ojalá no vayas a tener que lidiar con esto, pero si es necesario, así es como lo haces. Mappings de URL, de nuevo, probablemente no se van a preocupar por estas cosas. Una imagen un poco avanzada e importando, probablemente no te vas a preocupar por estas cosas así un poco más avanzado para el sitio web sin clase de código. Wow, acabamos de criarla a través del panel de ajustes. Súper emocionante eso fue mucho, lo sé. Entonces, ¿adivina qué? El siguiente que voy a hacer en un solo clic. ¿ Alguna vez solo necesito ayuda, click en este botón, y me lleva a help.squarespace.com donde puedes buscar en su base de conocimientos. Puedo mirar sus talleres, involucrarme con ahí comunidad, o simplemente enviar un boleto o cualquier cosa si necesito. Entonces otra vez, ese, muy sencillo. Acabamos de concluir nuestro recorrido por Squarespace. Tan increíblemente simple. Espero que esto haya sido de ayuda, sé que fue mucho detalle, pero creo que conseguir una fuerte comprensión de dónde está todo, cómo dos navegan, te va a ayudar en el futuro. En las siguientes secciones, realmente vamos a empezar a sumergirnos en realmente editar las páginas, editar el contenido, estilizarnos, hacer todas las cosas divertidas y empezar a hacer realmente un sitio que se vea bastante bien. Así que cuelga conmigo, está a punto de divertirse. 15. Un tour extendido de Squarespace outro: Así que acabo de mostrarles un montón de herramientas diferentes. Espero que se ponga emocionante para ustedes chicos dándose cuenta de todo el potencial que pueden hacer y lo fácil que es trabajar con Squarespace. Ahora, en la siguiente sección, vamos a empezar a meternos en cómo hacer que tu sitio se vea bien. Vamos a usar el Editor de Estilo y empezar realmente a diseñar y estilizar tu sitio web para que puedas retocar y hacer que parezca el sitio de tus sueños. 16. Una introducción al editor visual: El propósito del editor visual aquí es, nuevo, esto es una diferencia. Tienes tu editor visual y luego tienes tu editor de estilo. Los editores de estilo iban a cambiar tus fuentes, tus colores, todas esas cosas, y tu editor visual realmente nos va a permitir empezar a cambiar todo el contenido que hay en el sitio. Aquí no estamos realmente, de nuevo, no vamos a estar trabajando con todos los estilos y fuentes reales. Pero en cambio, lo que vamos a estar haciendo es pasar y realmente agregar y colocar contenido en la página web. Vamos a venir aquí a esta sencilla página de inicio que tenemos. De lo que dice, tenemos casa y realmente no tenemos nada aquí. Una página web completamente vacía y en blanco. Lo que vamos a hacer es en este tema de cinco, tenemos este encabezado aquí arriba. No nos vamos a preocupar demasiado por eso ahora, pero vamos a meternos en eso en un segundo. Pero lo que vamos a hacer es que vamos a bajar aquí y vamos a ver este contenido de encabezado de inicio, vamos a ver este contenido de pie de página y este contenido de pie de página de inicio. No uso demasiado el encabezado y el contenido del pie de página. Pero el contenido de la página, aquí es realmente donde va a vivir una mayor parte del contenido de tu página. Lo que voy a hacer es primero dar click en “Editar” aquí. Ya verás que tenemos esto un editor visual que aparece y solo puedo empezar a escribir en mi página web. Diga, hola, este es el texto para la página web. Podemos entrar aquí y podemos usar este editor de texto y hacer lo audaz, cursiva, cualquiera de las cosas. Ojalá voy a pasar por todo esto con un poco más de detalle en un video separado. Pero también tenemos esta capacidad de ver estos pequeños círculos aquí mismo. Podemos agregar cosas abajo, arriba y abajo. Si vengo aquí abajo y hago clic en este pequeño círculo, puedo agregar todos estos pequeños widgets y bloques diferentes. Digamos que quiero agregar una imagen. Yo puedo hacer eso. Puedo dar click en imagen, y obtengo esta pequeña herramienta de subida de imágenes. Vengo aquí para añadir una imagen y dar clic a esta subida. Ahora básicamente puedo venir aquí y encontrar las imágenes que quiero subir. Voy a subir este tiro de héroe aquí mismo. No me voy a preocupar demasiado por esto. Nos meteremos en las cosas de la imagen en un poco más en un video posterior. Pero voy a dejar que esto suba. Probablemente debería haber comprimido esto antes de hacer esto, pero para fines de demostración, funcionará. Una cosa, justo en cualquier momento en sitios web que sí quieras intentar comprimir imágenes, generalmente alrededor de 250 kilobytes o menos de un megabytes es generalmente una compresión de tamaño decente para la web. Así que trata de comprimirlo sin perder demasiada calidad. Pero éste no estaba comprimido, por lo que está tomando un poco. Una vez eso va a tomar un momento para procesar y redimensionar. Entonces tenemos una imagen en nuestro sitio. Acabamos de añadir algo de texto. Podemos añadir un pie de foto. Aquí tienes un título genial. Puedes bajar aquí otra vez y añadir otra cuadra. A ver, ¿a qué queremos bajar? ¿ Qué sería genial? Queremos quizá agregar algunos enlaces sociales. Quiero tener enlaces a todos los perfiles de redes sociales. Bueno, haré clic en “Enlaces sociales”, puedo meterme con la alineación, hacer la palabra, sentarme a la izquierda donde está el texto. Lo que ves es ahora aquí está ese pequeño ícono de Twitter. Recuerda cómo en los videos anteriores acabamos de integrar la cuenta de Twitter. Bueno, aquí se ve el ícono de Twitter, pero si hubiera conectado Facebook e Instagram y YouTube, todos esos iconos aparecerían aquí también. Puedo cambiar el tamaño de esto y trabajar con todas estas diferentes opciones aquí, cambiar el estilo y muchas cosas geniales. Realmente puedo personalizar esto para que luzca como quiero que se vea. Eso lo ahorraremos. Pero todo eso, tal vez esto no está funcionando como yo quiero. A lo mejor quiero este ícono social debajo este texto y quiero que la imagen se siente a la derecha. ¿Cómo hago eso? Bueno, la otra cosa genial de los editores visuales, realmente se puede arrastrar y soltar. Voy a agarrar esta foto y puedo empezar a arrastrarla por ahí. Si miras esto, en realidad puedo empezar a moverlo. Entonces ve esta gruesa línea gris de vuelta aquí. Ahí es donde estoy a punto de dejar esto. Entonces si lo dejo caer aquí mismo, la imagen ahora estará por encima del texto. Mira esto. Ahora tenemos la imagen por encima del texto y tenemos el icono de redes sociales justo debajo. A lo mejor lo queremos debajo del ícono de las redes sociales. Arrástrelo aquí abajo. Ahora tenemos estos arriba. Tan simple como eso, literalmente puedo reorganizar cómo es el diseño del sitio. También puedo venir aquí. Si voy a un lado, realidad puedo empezar a ponerlo en estas columnas y lo lateral se pone un poco confuso. Voy a decir esto. Por lo que vas a notar que en diferentes áreas, suceden cosas diferentes. En primer lugar, si vengo todo el camino hasta aquí a la derecha, consigo esta barra larga muy grande que va todo el camino a la derecha. Lo que esto ha hecho se crea una columnas enteras. En realidad sólo voy a pegar un montón de texto en este sitio. Para que veas que acabo de crear una columna poniéndola donde tenía esa barra vertical grande. Creé una columna para el sitio. Pero empecemos de nuevo y volvamos a bajar. ¿ Y si vengo aquí mismo donde tengo este tipo de caja gris? Bueno, si tengo esta caja gris, y el texto se va a envolver alrededor de ella. Cajas grises te permite hacer este efecto envolvente de textos. Esa es otra forma genial de hacerlo. Entonces lo otro que podemos hacer es que literalmente podemos entrar aquí y simplemente básicamente hacer que estos vengan justo a la derecha y parece una columna. Pero lo que vas a ver es que este bloque sigue siendo de ancho completo. Diga si tenía más texto aquí abajo, o si solo copio y pego. Ahora porque lo puse a donde esa barra simplemente spam la altura vertical de esto, he creado una columna lado a lado con este elemento justo aquí. Pero todo lo demás, no hay una columna completa en el resto de la página. De nuevo, es un poco confuso. Lleva un poco de tiempo acostumbrarse, pero es realmente, realmente poderoso. Puedes ajustar esto y, literalmente, agarrar, hacer que esta imagen sea más pequeña, o puedes hacer que esta imagen sea más grande. Realmente puedes ajustar esto a tu gusto y obtener un diseño de página que se ve igual a lo que quieres. Si quiero que el texto se envuelva por el lado izquierdo, baja aquí, haz esa misma caja gris y ahora con el texto envuelve por aquí y haz lo mismo, hazlo más pequeño, hazlo más grande, y realmente ajusta el tamaño de la imagen y todo muy, muy sencillamente. Esta es la visión general básica del editor visual. Voy a parar aquí en este video. Entonces en el siguiente video es voy a ponerme un poco más detallado. Te voy a mostrar algunas otras cosas alrededor la configuración de la página y cómo deshacerse de la barra lateral de aquí y algunas cosas así. Entonces solo te muestro un montón de trucos geniales y me meto un poco más profundo, más dentro de él. Pero esperemos que este fuera un panorama decente para que te familiarices con cómo funciona todo este asunto. 17. Comprender la la la configuración de la página: En el último video, te mostré un poco sobre cómo simplemente diseñar y trabajar con el contenido de la página aquí abajo. Pero antes de sumergirnos en eso, realmente deberíamos limpiar algunas de estas otras cosas. Este encabezado no se ve muy bonito en este momento, la barra lateral no es muy agradable. Nos gustaría que esto se viera un poco más como un sitio web para que realmente podamos empezar a diseñar dentro de eso. Para hacer eso, lo que realmente vamos a hacer, es bajar aquí a la pestaña de configuración de página. Podemos ir a hacer eso superponiéndonos aquí mismo e ir a ajustes. Eso va a mostrar esta página de configuración, la pestaña de ajustes de página. O si no puedes encontrar esto porque algunos temas tienen esto en unos spots ligeramente diferentes. Siempre puedes hacer clic en este pequeño icono de engranaje junto a la página en la que estás trabajando. Vamos a dar clic en esto aquí mismo, el ícono del engranaje, toma y trae arriba la configuración de página. Lo primero que podemos hacer es cambiar la navegación y el título de la página. A lo mejor en lugar de casa, quiero que esto diga bienvenido. Podemos activar o desactivar esta página si queremos. De verdad, no necesitas preocuparte por esto a menos que estés haciendo una cuenta de nivel inferior y tal vez tengas un límite de página. Podemos optar por tener otras barras laterales de una barra lateral, ya sea por ambos lados, vas a tener dos barras laterales ya sea a la derecha o a la izquierda o puedes ir ancho completo por el bien de la demostración, y que yo realmente no quiero barra lateral en mi página de inicio, voy a ir a ancho completo. De nuevo, dependiendo del tema en el que estés, no todos los temas ni siquiera tienen barra lateral, por lo que es posible que ni siquiera tengas esa opción ahí mismo. Puedes tener una pestaña de descripción de página. Nuevamente, no enormemente importante con muchos temas. Algunos temas usarán esto especialmente temas como bedford y shift. Pero para cinco, en realidad no tiene impacto visual. Pero de nuevo, este también es otro spot para poner en alguna información de optimización de motores de búsqueda aquí mismo. Podemos cambiar la URL. A lo mejor quiero que esto diga bienvenido en lugar de casa. Podemos poner una contraseña en esta página. Digamos que tal vez haya una parte de tu sitio que es solo que solo quieres disponible para los miembros o clientes, puedes protegerlo con contraseña. Entonces lo último aquí mismo, que va a hacer que esta página se vea significativamente mejor, mucho más rápido, es que podemos agregar una imagen en miniatura. Voy a dar click para subir la imagen en miniatura. Vamos a subir eso aquí o a cerrar, aún no hemos comprimido a ese tipo, así que va a tomar un segundo. Pero mientras sube, solo seguiré adelante y hablaré sobre estas próximas cosas. El último es que puedes hacer aquí debajo de la configuración de página, o puedes establecer esto como la página de inicio, esta será la página predeterminada que alguien aterriza en la que haremos. También puedes duplicar esta página. A lo mejor estás haciendo una cosa de cartera en página y quieres hacer algo muy similar con el mismo diseño. No quieres tener que rehacer todo el layout, pero solo quieres intercambiar imágenes y texto. Esto es muy, muy útil para eso. O si quieres quizá hacer una copia de seguridad y probar dos cosas diferentes. Ahí es donde tienes ahí. Entonces bajo avanzado, de nuevo si necesitas inyectar algún código en tu encabezado, tal vez estés haciendo una aplicación incrustada y dicen, pon este código de encabezado ahí arriba, puedes hacerlo pero de nuevo este es un sitio web sin código, ojalá no necesites tocar esto. Lo último que vamos a hacer es simplemente establecer esto como nuestra página de inicio. Vamos a golpear “Confirmar”. Ahora vamos a salvarlo. Cuando lo guardemos, va a recargar la página para reflejar nuestros cambios. Ahora nuestra imagen en miniatura como verás en el tema de los cinco, se refleja aquí mismo en nuestra zona de banners justo aquí arriba. El hogar ha cambiado para dar la bienvenida y nuestra barra lateral ha desaparecido porque estamos de ancho completo. Ahora este texto se ha ampliado literalmente para tomar todo el ancho del sitio web. Un último truco que te voy a mostrar es. 18. Cómo gestionar el texto en Squarespace: En este video, voy a sumergirme un poco más en el editor visual y específicamente te mostraré cómo trabajar con texto y fuentes dentro de Squarespace. Para empezar, vamos a volver a bajar aquí, y nos vamos a ir y vamos a pasar el rato sobre este Editar en el contenido de la página aquí mismo, voy a dar clic en “Editar”. Ahora estamos de vuelta aquí a lo que creamos antes. Voy a borrar algunas de estas cosas sólo para que no tengamos tanto dolor de cabeza y cosas en camino. Nosotros cosita práctica pero si alguna vez quieres eliminar algo, tienes dos formas de hacerlo. El primero es que si tienes un elemento de bloque como este, simplemente puedes hacer doble clic en él y luego pulsar “Eliminar”, pulsar “Confirmar”, y todos mis enlaces sociales se han ido. Pero tal vez quiero deshacerme de este elemento de texto aquí. Whoops, acabo de hacer esto, pero con el texto es un poco raro pero no puedes simplemente agarrar un texto en el medio porque lo va a editar. Lo que haces es pasar el rato sobre el costado del texto y empiezas a conseguir esta pequeña mano de agarrar. Cuando consigues esa mano de agarrar puedes hacer todas esas mismas cosas de moverlo al igual que lo hicimos antes. Puedo agarrar gota ahí arriba. Puedo agarrarlo ahí abajo y por alguna razón no está solo. Ahí vamos. Déjala caer a la derecha. Todas esas cosas divertidas. O si quiero, sólo puedo bajar aquí y borrarlo. Simplemente puedo borrar haciendo clic de nuevo, arrastrándolo a la papelera y borrando. Aquí estamos, de vuelta a una amplia página abierta. Ahora te voy a mostrar básicamente cómo editar y administrar algún contenido en tu sitio. Para ello, lo que voy a hacer es tener esta declaración de artista. medida que pase por este sitio voy a estar trabajando en este sitio web para una artista Elizabeth Cairnes. Acabo de pasar a mi Google Drive, copié este texto. Voy a venir aquí y voy a pegar esto en Squarespace. Ahora, una cosa con la que quieres tener mucho cuidado, es que Squarespace automáticamente inherente a cualquiera del formato o intentará hacer las fuentes o cualquiera de estas cosas que al importar algo a tu sitio. Si te das cuenta, todo está un poco justificado a la derecha si en realidad empiezo a escribir aquí mismo, escribe a la izquierda pero, por alguna razón estos están todos sangrados. Todo esto es básicamente por que copié y pegué texto en Squarespace. Esto es algo que quieres hacer realmente cualquier momento que copies y pegas texto en Squarespace, es que quieres venir quieres resaltar en absoluto, y quieres resaltar sobre este poco Remove Format. Cuando haces eso, voila, repente tu formateo es normal y no hay rarezas extrañas pasando con ello. Tenemos este texto aquí ahora, no hay formato. Lo que vamos a hacer básico ahora es solo subir aquí, voy a añadir un título, Artists Statement. Este va a ser el encabezado de la página así que con estas páginas, vamos a tener esta declaración de artista, pero queremos que destaque esa declaración de artista. No queremos que se parezca al resto del texto, queremos que parezca un encabezado o un titular de esta sección. Lo que voy a hacer es que voy a resaltar esa declaración de artista, y hay un puñado de cosas que puedo hacer. Primero puedo pegarle a Bold, y sólo podría ponerlo en negrita si quisiera. Podría hacerlo cursiva. Podría convertirlo en un link si quisiera y hay un link que va a aparecer y puedo teclear elisabethcairnes.com y hacer de eso un link si quiero, puedo abrir eso en una ventana nueva o no. Pero no vamos a hacer ese enlace ahora mismo. Puedo hacer que se justifique a la izquierda, centro justificado, o a la derecha, y de igual manera puedo hacerlo en realidad con todo este bloque. Si resalto todo, lo hago centro, derecha, o izquierda. Pero entonces esta es la parte poderosa aquí mismo. Podemos venir a ver ahora mismo tenemos un formato de párrafo normal. Si simplemente voy a resaltar declaración artista y hago clic en “¡Encabezado 1! te das cuenta que obtenemos esta opción de titular. A lo mejor quiero un poco más pequeño y puedo hacer click en un “Encabezado 2". Te das cuenta que esto va a cambiar a naranja pero te lo explicaré en un segundo. A lo mejor quiero incluso un poco más pequeño de un titular y conseguir un Título 3. Básicamente, podemos elegir esto lo voy a dejar como un Epígrafe 1. Lo que quiero explicar aquí mismo es que, cuando estás trabajando con web, realmente no tienes tamaños de fuente. No dices: “Oh, quiero que esta sea fuente de 22 puntos y quiero que ésta sea de 16. fuente. En cambio, la forma en que funciona Squarespace y la forma en que funciona la web, es que tienes estos encabezamientos y tienes tu texto regular, y para todo tu texto regular debe ser el mismo y todos tus encabezados serán consistentes. Básicamente todo lo que elijas ya sea como un Título 1, un Epígrafe 2 o un Epígrafe 3. Llegamos al editor de estilos, te mostraré cómo puedes ajustar estos y por qué, cómo puedes hacer éste donde no se ponga naranja o se vuelva un color diferente si te gustaría o puede ser una fuente diferente, y cómo puedes ajustar esto. Pero la razón detrás de estos Epígrafe 1, Epígrafe 2 y Epígrafe 3, es que crea consistencia en todo su sitio. Uno de los mayores errores que cometen las personas que no saben nada de diseño web cuando empiezan a hacer sitios, es que literalmente están haciendo esta cosa de este tamaño, esta cosa que tamaño y se convierte en esta fea, sitio horrible donde nada se ve bien y consistente. Por cierto Squarespace ha diseñado esto donde solo obtienes estas tres opciones de encabezamiento y una opción para una cotización si lo deseabas. Realmente lo hace donde tu sitio se va a quedar bien. Va a parecer un sitio web profesional porque así funcionan los diseñadores web profesionales. Pocas de las otras cosas dicen, queremos que esto sea una lista. Simplemente podemos hacer esto y ahora tenemos una lista de 1, 2, 3 aquí mismo. No sé si viniendo aquí. O tal vez no queremos que sea una lista y queremos que sean puntos de bala. Podemos hacer que también tenga puntos de bala. O podemos volver a hacer clic en eso y volver a la normalidad, podemos sangrar esto a la derecha o no. Entonces de nuevo podemos despejar el formato también. Ahora lo último cosita que te voy a mostrar es esta opción de pegar como texto plano. Eliminar formato hace lo mismo, pero digamos que no queremos pegarlo en todo funky y solo queremos que entre perfectamente. Todo lo que puedo hacer es subir aquí, puedo hacer clic en “Pegar como texto plano” y lo voy a pegar aquí y de nuevo ves todo el formato extraño, la indención a la fuente, le pego “OK”. Se va a reventar perfectamente, sin formato extraño ni nada que esté en el camino. Nuevamente, quería la otra opción, pegarlo, tener el formato extraño y las indenciones y cosas, y solo hago clic en “Eliminar formato” y eso todo desaparece. Pero de nuevo, ten cuidado con eso. Es un gran problema que veo con muchos sitios de Squarespace donde la gente está como, “no sé por qué esto se ve raro mi fuente”. Algunas de las razones por las que esto se ve diferente a todo lo demás, y muchas veces es porque tienen texto copiado y pegado en Squarespace, y el formato ha hecho que ese aspecto se vea así. 19. Trabajar con enlaces: En este video, te voy a estar mostrando cómo trabajar dentro de los enlaces en Squarespace. Este es uno realmente poderoso en cualquier momento que quieras hacer un hipervínculo o algo por el estilo, pero lo que vamos a hacer es simplemente agregar un poco de texto aquí dice, “Ver mi portafolio”, Vamos a convertir eso en un enlace. Lo que vamos a hacer es, click en esta opción de “Editar Enlace” aquí mismo. Como te mostré antes sobre cómo crear un enlace, pero quiero entrar en esto con un poco más de detalle. Entonces vamos a hacer clic en eso, y aparece esta ventana de enlace. Podemos escribir un enlace al que queremos que vaya el sitio, y luego podemos elegir si queremos que abra una nueva ventana o no. Si no elegimos abrir en una nueva ventana, básicamente lo que va a pasar, es tu sitio actual, el navegador en el que están, va a reemplazar realmente esa ventana. Por lo que se va a sacar totalmente de tu sitio. Si eliges que se abra en una ventana nueva, va a abrir una nueva pestaña, así como esta. Todavía va a mantener tu pestaña abierta con el sitio. Generalmente, si estoy vinculando a algo fuera de los sitios, abriré en una nueva ventana. Si estoy vinculando a algo dentro de los sitios, generalmente lo dejaré abrir dentro de la ventana, esa es generalmente una regla bastante buena. Otra cosa que puedes hacer, es que tienes este externo, ese es un enlace externo, pero también puedo hacer clic en contenido. Entonces tal vez quiero enlazar a mi página Acerca, o si tuviéramos una página de portafolio hecha, me vincularía a eso. Pero acabo de hacer clic en “Acerca de”, y verás que ahora cambió ese enlace a la página Acerca. Pero cuando hago clic en el enlace aquí abajo, en realidad trae esta opción para eliminar el hipervínculo o editarlo. Entonces voy a volver a editarlo. Porque de nuevo, puedo elegir si quiero abrir una ventana nueva también. Ahora lo tengo abriendo en una ventana nueva. Entonces si alguien hace clic en eso, me llevará a la página Acerca, y la abrirá en una ventana nueva. Lo último que te mostraré sobre los enlaces, es que puedes subir archivos. A lo mejor quiero tener un PDF de carteras, pero por ahora, solo subiremos esta foto handy-dandy aquí mismo. Este archivo se subirá, igual que hicimos con las fotos anteriores, pero ahora será un archivo descargable. Entonces muchas veces puedes hacer esto por tal vez un PDF, o un documento, o cualquier cosa por el estilo, un e-book o algo que quieras que la gente pueda descargar. Literalmente puedes subir esos archivos a Squarespace usando este pequeño editor de archivos, y los va a guardar para que realmente podamos vincularlos a ellos en cualquier momento que queramos. Esto se convierte en un nuevo archivo en el back-end de Squarespace. Si queremos enlazar a ella, solo hacemos clic aquí. Ahora, eso está listo, eso lo va a abrir en una nueva ventana, y tuvimos que poner ese enlace a donde ahora va a enlazar con esa imagen. Para demostrarme, vengo aquí. Además, vamos a ir a pantalla completa, así que no estoy en modo editor y puedo verlo. Ahora hago clic en “Ver mi portafolio”. Se abrió en una nueva ventana, y ahora está cargando esa imagen. Ahí vamos, acabamos de vincular a esta imagen aquí mismo. De nuevo, puedes hacerlo con un PDF, cualquier tipo de archivo que quieras subir a Squarespace. Es así como vas y trabajas con enlaces. cualquier momento que necesites cambiarlos en el futuro, solo puedes venir aquí, y puedes hacer click en “Editar”. Además, te vas a notar en este momento no parece mucho de un enlace, y eso es porque eso es otra vez, otra cosa en el editor de estilos, a la que llegaremos un poco más tarde, que te va a mostrar cómo cambiar los colores, y las miradas, y los campos, y las fuentes de tus enlaces, estás encabezando, tus textos, todas esas cosas. este momento probablemente ni siquiera puedas decir que es un enlace, pero una vez que lleguemos a la sección del editor de estilos, verás voy a editar y darle estilo a esta página, y puedes ver realmente puedo cambiar el color del enlace para que sea el color que yo quiero que sea. 20. Cómo usar el bloque de imagen: En este video, te voy a estar mostrando cómo subir imágenes y manejar todo con el Bloque de Imágenes en Squarespace. Ahora, en video anterior, te mostré cómo subir una imagen, pero realmente no pasé por todo a su alrededor. Yo quiero pasar por eso con un poco más de detalle. Para empezar, vuelve a bajar al contenido de la página y haz clic en “Editar”, me trae de vuelta a este editor visual. Voy a añadir una imagen aquí. Nuevamente, puedo ver todas estas líneas diferentes de dónde va a aparecer esto. Quiero que esa línea gris aparezca justo en la parte inferior debajo de “Ver mi Portafolio”. Haga clic en eso. Voy a dirigirme aquí y quiero añadir un Bloque de Imagen. Entonces voy a elegir subir una imagen aquí mismo, solo voy a dar clic a ese icono de subir. Pero antes de que realmente haga eso, quiero mostrarte, también puedes buscar Getty Images, y esto es super cool. Squarespace hizo un trato con Getty Images. Básicamente puedes comprar cualquier foto que esté ahí a través de este buscador aquí mismo por $10. Para que pueda conseguir cualquiera de estas imágenes increíbles, locas y hermosas por tan solo $10 a través de Getty Images. Tan bastante increíble, puedes buscar lo que quieras. Quieres fotos de relojes, elige relojes, deja que busque, y ahora tengo todos estos por $10 y obtengo estas imágenes increíblemente impresionantes, muy cool, estilizadas de Getty Images. Tan muy cool, lo recomiendo mucho. Si lo deseas incluso puedes previsualizarlo, y aparecerá en tu sitio y luego tendrá un poco de superposición en él porque no es oficial y aún no lo has comprado. Pero es una forma genial de ver y previsualizar las imágenes antes de comprarlas realmente. Entonces cuando estés listo, solo tienes que hacer clic en este botón de “Licencia” y puedes pasar por realmente licenciarlo. Yo voy a quitar esto sin embargo, porque no quiero una imagen de un reloj aquí. Voy a subir, y voy a presionar este botón de “Añadir una imagen”. Entonces voy a dirigirme a los archivos de los clientes aquí, y voy a volver a subir esta foto de héroe. Eso subirá aquí, y mientras se está subiendo, te voy a mostrar algunas otras cosas. Aquí, justo debajo de esto, tienes esta opción de oportunidad para subtitulaciones. Puede elegir “Leyenda abajo”, “No mostrar subtítulo”, “Superposición de subtítulo” o “Superposición de subtítulo al pasar el cursor”. Entonces les mostraré eso chicos como ejemplo. Se puede cambiar el nombre de archivo de la imagen. A lo mejor quiero que sea algo diferente. Esto es realmente útil para la optimización de motores de búsqueda, por lo que podría cambiarlo a “elisabethcairnes.jpg”. Entonces el nombre del archivo sería diferente, y esto es realmente bueno para la optimización de motores de búsqueda y todo. Estirar. Este no se usa a menudo, pero puedes hacer que se estire y abarque el tamaño del contenedor. Caja de luz. Voy a encender esto para poder mostrártelo. Pero básicamente entonces cuando alguien hace clic en él, la imagen saldrá en una caja de luz y la hará un poco más fría y más grande para ver. Bueno, si apago eso, entonces en realidad me va a dar otra opción, que es una “URL clickthrough”. Si hago esto, es igual que todas las opciones de enlace que pasamos en el video anterior, donde podemos enlazar a una página, enlace externo, o un archivo. Si eliges Lightbox, eso desaparece porque Lightbox se convierte en la acción clickthrough. Por lo que voy a dar clic en “Guardar” muy rápido. Voy a bajar aquí y voy a ver que tenemos esta oportunidad de escribir aquí. Entonces este es el epígrafe. Tenemos este set a Superposición de subtítulo en Hover. También tenemos que configurar el Lightbox. Entonces voy a ahorrar muy rápido para poder demostrar y mostrarte lo que realmente hacen estos. Entonces si estamos aquí en el sitio, es interesante la leyenda está aquí a pesar de que no estoy flotando. Pero ahí está la función Lightbox justo aquí. Entonces de nuevo, no tenemos un enlace clickthrough, así que cuando hago clic en él, aparece un Lightbox, y esto es lo que es un Lightbox. Entonces, no parece hacer mucho aquí, pero si tu imagen es realmente pequeña, es muy útil porque entonces alguien puede tomar tu pequeña foto que está diseñada en tu sitio y verla a pantalla completa. Entonces volvamos rápido y veamos si tal vez hice algo mal aquí con el Overlay on Hover. No, parece que tiene razón. Mi suposición sería que, esto es porque estamos en modo de vista previa. A veces cuando estás trabajando en modo Vista previa, sí se pone un poco glitchy, pero asumiría que se arreglaría en la parte frontal del sitio. Superposición de subtítulo, eso hace que parezca lo que en realidad solo estaba haciendo o siempre está ahí. Entonces Leyenda abajo pone el título justo aquí abajo debajo de esa imagen, o puedo Do Not Display Leyenda, y en realidad desaparecerá. Déjame guardar eso. En realidad aparece aquí, pero cuando vas y lo miras al frente del sitio, debería haberse ido. Sí. Por lo que aún tienes ese título, que es realmente bueno para la optimización de metadatos o motores de búsqueda, pero en realidad no se pueden ver los subtítulo, no visibles en ningún lugar del sitio. Eso es un poco sobre cómo subes y creas imágenes en Squarespace. 21. Cómo usar el bloque de galería: En este video, te voy a estar mostrando cómo trabajar con galerías y squarespace. Las galerías son esencialmente un puñado de imágenes todas agrupadas. Antes de mostrarles cómo establecer de galería, lo que voy a hacer es realmente crear una. Voy a hacer esto bajo la sección Not Linked, y voy a explicar por qué en un momento. Voy a dar click y voy a crear una galería derecha abajo escuchar bajo esta sección Not Linked. Yo sólo diré Fotos. Entonces voy a venir aquí a esta sección de fotos, y voy a sumar imágenes aquí arriba. Haga clic en esto, y luego podrá elegir si desea que sea video, imagen, o puede comprar imágenes de una galería a Getty. Yo sólo voy a ir a “Subir imágenes”, tengo mi primera imagen, que de nuevo será este tiro de héroe. Una vez que se cargue esa toma, voy a golpear Guardar y Publicar, y ahora lo publica en la galería, y si quiero, puedo agregar un título de imagen y descripciones y agregar click a través de los enlaces de aquí. Estos son realmente útiles sobre todo si dices, tal vez quieras que tu imagen de galería se vincule a algo. Pero no voy a entrar demasiado profundamente en todas estas cosas en este momento ya que puede que no sea relevante para todos. Publicaremos esa primera foto. Entonces en realidad te voy a mostrar un truco genial que te permite subir mucho más rápido. Digamos que quieres agarrar un puñado de imágenes, así que tengo estas tres imágenes aquí abajo, templo, camión, y pared, que me gustan. Voy a marcar y asumo que esto debería funcionar también en Windows. Si quiero, solo puedo agarrar esas imágenes, arrastrarlas justo aquí sobre esta subida, y apenas empieza a subir las tres de esas a la vez. Esa es una gran característica útil si quieres subir por lotes un puñado de imágenes todas a la vez. Ahora una vez que todas estas imágenes hayan terminado de subir, en realidad voy a volver aquí a las páginas, y voy a volver aquí a la página de bienvenida, me voy a desplazar aquí abajo, y voy a editar el contenido de mi página . Voy a seguir adelante y sólo eliminar esta imagen que tenía antes, que si recuerdas solo hacemos clic y la arrastramos hacia abajo a la papelera, y ahora voy a añadir una galería escriba aquí. Haga clic en Agregar, utilice el cuadro de la galería. Ahora probablemente te estés preguntando por qué hicimos esa galería antes, y ahora estamos configurando otra galería en la página. Bueno, lo que acabamos de hacer antes fue crear una galería que sería supongo considerada una galería existente, y si quiero, solo puedo venir aquí, click en Usar Galerías Existentes, click en Fotos, y ahora ves literalmente tenemos una galería de fotos aquí mismo, que no puedes ver del todo todavía porque voy aquí a diseñar y haré de esto una cuadrícula para que puedas ver un poco mejor lo que está pasando. Pero aquí vamos, tenemos una galería de imágenes aquí mismo. Te explicaré la cuadrícula en un segundo, pero quiero aclarar primero esta distinción. Debido a que creamos una galería bajo la pestaña Páginas, ahora podemos simplemente crear un bloque de galería en el Editor Visual en enlace a esa galería en cualquier momento que queramos. Esta es una característica realmente útil, digamos que tienes tu portafolio o tienes una galería a la que podrías hacer referencia y múltiples spots en el sitio, eso es realmente genial porque puedes subir esos archivos una vez, y luego nunca tienes para preocuparse por subir y volver a crear esos archivos. Ahora, alternativamente, si este es el único lugar en todo nuestro sitio aparecerá esta galería, es solo que tal vez por solo tiene un propósito, podemos dar click en Subir Medios, y podemos entrar aquí y podemos subir imágenes y arrastrar y soltar al igual que lo hicimos antes. Literalmente nos dará a todas las mismas opciones exactas igual que hicimos cuando subimos a la pestaña Páginas. Pero por el bien de esto, vamos a mantener esto aquí mismo y vamos a utilizar esta galería existente. Ahora, eso explicaba las diferentes versiones de usar galería existente, los pros de eso y subir, te voy a mostrar un poco sobre la pestaña Diseño. Voy a dar click en Diseño, y aquí tenemos opciones para algunos diseños de galerías diferentes. Podemos elegir una pastilla de diapositivas. Podemos configurarlo para la transición automática entre diapositivas cada nuestra o segundos si quieres, dos segundos es bastante rápido, o puedes hacerlo algo más largo, como 10 segundos o cinco segundos y pasará por ahí. Podemos elegir Mostrar Siguiente en controles anteriores, luego ves estas flechas pequeñas pop-up y la gente puede hacer clic en esas para ir a la foto siguiente o anterior, cambia a cinco así que mira esa sensación por eso. Recortar automáticamente las imágenes. Básicamente lo que esto hará es que determinará un denominador común de todas tus imágenes, y recortará imágenes para encajar dentro de lo que en realidad creo que es la primera imagen que subes. Podría estar mal en eso, pero básicamente lo esto hará es recortar imágenes para que quepan dentro del marco. Si no haces esto, entonces puedes terminar con un poco de espacio en blanco alrededor de los bordes en algunas de tus imágenes, pero vas a conseguir que la resolución completa es un pequeño espacio en blanco porque esta es una resolución ligeramente diferente a la de el ganado antes. Nuevamente, recortar automáticamente imágenes, recortará todas las cosas pero, y otra vez, esta que ves ahora extiende todo el peso hasta el final. Si elegimos Recortar Automáticamente, todo se extiende hasta el final. Mostrar miniaturas. Si ves si me desplaza hasta la parte inferior, en realidad tengo todas estas miniaturas de las imágenes que la gente también puede hacer clic para verlos a pantalla completa. Podemos deshacernos de eso si queremos, y no tenemos eso ahí. Sólo tenemos las flechas o las flechas de la galería de medios también si queremos. Pero si mostramos miniaturas, podemos cambiar la altura de nuestras miniaturas, podemos cambiar la distancia entre la imagen y las miniaturas para dar un poco de espacio ahí si queremos. Ahora también podemos elegir si queremos mostrar el título y la descripción en la que no agregué títulos, pero si recuerdas cada vez que te mostré fotos subidas, puedes editar esos títulos y descripciones en cada uno y puedes tener esos superponen la imagen también. Aquí puedes elegir dónde se sentará esa superposición en la imagen. Entonces también puedes establecer un recorrido por el título y descripción solo aparece al pasar el cursor sobre la imagen. De nuevo, no tenemos ningún título y descripciones ahí dentro, así que no puedo mostrarte del todo esto pero ojalá eso ayude y te dé un entendimiento. Lo siguiente que te mostraré es un slider. Honestamente no podemos ver muy bien qué está pasando porque esta ventana está en camino. Lo que voy a hacer sólo con fines de demostración es demostrar otra característica de Squarespace llamada el espaciador y voy a sumar un bloque aquí arriba. Voy a usar este espaciador. El espaciador, lo que hace es literalmente simplemente crear un espacio en blanco en blanco. Ahora, puedo agarrar este espacio en blanco en blanco que creé, traerlo aquí abajo y crear una pequeña columna al lado de esta imagen o de esta galería. Ahora, aquí se puede ver tenemos este espacio abierto blanco vacío y esta galería sólo ocupa la mitad de la pantalla. Esto no es realmente lo que queremos ahora, pero me deja mostrar esto para ustedes un poco mejor. Voy a volver aquí a diseñar. Ahora tenemos un deslizador. Vamos a transitar automáticamente entre diapositivas. Lo hará cada tres segundos. Lo que se ve es en lugar de desvanecerse como tuvimos con una presentación de diapositivas, se obtiene este efecto de deslizamiento loco pasando. Nuevamente, establece los controles siguiente y anterior para que puedas hacerlo también. Entonces también puedes establecer la alineación, que no creo que del todo funcione con la forma en que la configuración de esta foto, pero si tienes sus fotos donde tal vez sean diferentes anchuras, a veces realmente puedes ver la siguiente foto como esta aparece en el cuadro. No tienes la oportunidad de recorte de control y todo en este ya que ya está integrado en cómo funciona este. El siguiente y una de mis características favoritas es la cuadrícula. Este uso mucho en todos los diferentes tipos de cosas. Una vez que tenemos la cuadrícula, como ves, hace que una cuadrícula de tus imágenes sea bastante impresionante. Puedes bajar aquí y puedes elegir la relación de aspecto, que básicamente significa las dimensiones de la misma. Podemos elegir tres por dos. Ahora todos ellos van a ser de tres por dos de ancho o podemos hacerlos verticales, lo que realmente no funciona para estos, así que obtienes todo este espacio en blanco. O puedes hacerlas cuadradas. No se ven cuadradas porque lo que realmente está sucediendo no es realmente todo cuadrado y hay todo este espacio en blanco arriba y abajo, pero los trata como si lo fueran. Pero si golpeo “Crop images”, ahora lo ves básicamente forzar a todos estos en la plaza y recortar hacia abajo en la imagen. También puedo elegir cuántas miniaturas por fila. A lo mejor quiero sólo dos por fila. Ahora tenemos esta rejilla que está apilada verticalmente. O tal vez queremos hacer como 10 por fila. Entonces lo que vas a ver es que estos son realmente pequeños y diminutos ahora. Lo mantendremos en dos por fila ahora mismo por el bien de la consistencia. Entonces también puedes cambiar la separación alrededor de las imágenes. Esto es genial. se puede hacer ninguna despedida, poner un píxel ahí, dos. A mí me gustan los dos píxeles. El diseño limpio, minimalista. O puedes espaciarlos si quieres, darles mucho espacio, un poco de espacio. Simplemente puedes llenar lo que sea que sea bueno para ti. Entonces tienes la oportunidad para el efecto lightbox, que nuevamente demostré en el video de imagen anterior, pero te mostraré en este momento. Una vez que enciendas ese efecto de caja de luz, ven a golpear “Guardar”. Ahora, estoy mirando esta galería, pero, oh, eso parece una imagen genial. Es un poco demasiado pequeño. No puedo decir lo que está pasando. Haz que este poco más grande primero. Entonces un poco a pequeño. Si hago clic en esto, esa imagen sale totalmente desrecortada en una caja de luz para que pueda ver qué está pasando. Efecto muy fresco ahí. Volveré ahora y les mostraré el resto de la cuadra de la galería. Vuelve a hacer doble clic sobre eso para editarlo. Si alguna vez quieres editar básicamente cualquier bloque en Squarespace, cualquier imagen, cualquier cosa, solo tienes que hacer doble clic en él. Volveremos abajo y te voy a mostrar el último largometraje, la imagen apilada. Este realmente no hay personalización en. Pero es realmente genial para diseñadores gráficos o personas que solo son fotógrafos, incluso donde solo quieres apilar y hacer algo realmente simple y rápido. Realmente genial. Simplemente los apila por igual. Muy sencillo. Es así como manejas el bloque de imagen en Squarespace. Es una cosa realmente poderosa, realmente útil. Antes de irme, te mostraré un último truco que creo que te va a gustar mucho. No sé por qué está ese tipo aquí, este borrador, lo vamos a borrar. Digamos que queremos, si estamos aquí en el mirar a editar nuestra galería, y hacemos click, digamos esta herramienta de lápiz, lo que vamos a conseguir es este editor de fotos. En realidad no les mostré esto chicos, pero ustedes pueden hacer esto también en el bloque de imagen. Este editor de fotos es muy cool. Es básico, pero te permite recortar tus fotos si querías y cambiarlas. Puedes convertirlo en un cuadrado, meterte con diferentes dimensiones. Obtén lo que quieras. Puedes redimensionarlo si quieres. Por ejemplo, como dije, estos no están comprimidos. Podría quizá redimensionar eso a 600 y podrían ocupar un poco menos de espacio. Puedes agregar algo de texto sobre él si quieres. De nuevo, probablemente no quiera hacer esa. Incluso puedes hacer algún contraste de brillo, algunos efectos, y un puñado de diferentes cosas de edición aquí. No voy a entrar demasiado en estos. No es Photoshopped, pero es realmente útil, especialmente para algunas de esas características de recorte y redimensionamiento de características que están integradas en aquí. Eso es realmente útil. Entonces también bajo la galería o realmente cualquier imagen en el sitio, puedes hacer clic en este icono de engranaje. Esto me va a dejar entrar ese título. El título va aquí. Una última cosa que voy a hacer es dar click en añadir la URL y decir elisabethcairnes.com. Vamos a pegarle a “Save”. Básicamente lo que acabamos de hacer ahora es convertir esta imagen en un enlace porque agregamos esta URL click-through. Si vuelvo aquí, vengo a esa pantalla de bienvenida, voy a probar esto, voy a encender el efecto lightbox. Pero no. Si me desplaza por encima de estas imágenes y nada, no hay cambios. Si me desplazo escribo aquí, lo veo convirtiéndose en un enlace clicable. Si hago click en eso, acabamos de conseguir lo que acabamos de vincular a elisabethcairnes.com. Algo muy cool. Literalmente puedes convertir cualquier imagen en un enlace. Eso se vuelve realmente útil cuando estás tratando de hacer un portafolio de proyectos o enlaces a un montón de cosas diferentes, o cuando quieres usar imágenes como enlaces a diferentes partes de tu sitio. Herramienta muy práctica ahí mismo. Espero que eso ayude a darles una mejor comprensión de las imágenes y la característica de la galería. 22. Cómo usar el bloque de cita: Esta es una corta y rápida pero una práctica sin embargo. En este video, te voy a mostrar cómo trabajar con el bloque Cotización. Ven aquí abajo al contenido de la página, edítalo de nuevo. Voy a tirar mi bloque de galería que construimos en el último video, tiré a ese tipo a la basura, tiraré mi espaciador ya que verás todavía hay un gran espaciador aquí mismo, deshazte de eso. Voy a agregar un bloque de Cotización, agregar un bloque aquí abajo y voy a crear un bloque de Cotización así que tenemos esta copia de cotización y pegada. “ Siempre que te encuentres del lado de la mayoría, es hora de hacer una pausa y reflexionar”, de Mark Twain. Tenemos esta pequeña cita genial justo aquí, y cuando guardamos eso, notamos que aparece en este tipo de cotización justo aquí, y tenemos al autor justo aquí abajo. Algo genial que podemos hacer con los bloques de Cotización es a pesar de que esto es texto, podemos hacer este tipo de envoltura alrededor, así que echa un vistazo a eso. Ahora tienes esta pequeña cita que aparece del lado de este texto aquí mismo tan cosita muy cool, cuando lleguemos al editor de estilos, puedes trabajar con la fuente y el tamaño de estas cotizaciones de forma independiente. Te mostraré cómo trabajar con eso un poco más tarde pero de nuevo, una pequeña herramienta muy útil, genial de tener. 23. Cómo usar el bloque de video: En este video, te voy a estar mostrando cómo trabajar con el bloque de video Squarespace, otra herramienta muy poderosa construida dentro de Squarespace. Cuando paso y añado un bloque, realmente no he mostrado demasiado esto, pero se ve en cualquier lugar realmente hago clic, en realidad puedo agregar un bloque en cualquier lugar. Ves estas líneas aparecen por todas partes. Si hago clic en este de aquí, realidad va a poner un bloque de video entre la declaración del artista y el párrafo. Voy a dar click, voy a añadir un bloque de video, y ya ves necesito agregar una URL para resolver. Pero puedo ingresar una URL de video aquí mismo. Aquí tenemos la ardillada dramática. Pequeño video genial, lo recomiendo mucho si no lo has visto. Entonces básicamente podemos subir una miniatura personalizada si queremos. Entonces tal vez no queremos ver la ardilla inicialmente pero sorprender a la gente, y podemos subir nuestro pequeño tiro de héroe. Podemos elegir que queramos utilizar esta miniatura personalizada. Puedes encender o apagar eso si quieres. Pero lo encenderemos y una vez que esto se cargue, vas a ver que en realidad va a intercambiar la miniatura existente con esta nueva imagen personalizada que hemos subido. Puedes elegir si quieres o no mostrar la leyenda en el video, y puedes escribir tu leyenda aquí abajo. Porque nos vinculamos a YouTube, se va a tirar automáticamente dondequiera que esté el epígrafe de YouTube. Entonces duran aquí arriba, como ven, acabamos de terminar de subir. Ahora que ves un botón de reproducción aquí mismo, tenemos una miniatura personalizada y todo funciona así. De nuevo, si nos deshacemos del uso de miniaturas personalizadas, y puede cambiar de nuevo o simplemente podemos eliminarla también. También podemos incrustar enlaces de Vimeo también. También puedes hacer eso si tus videos no están en YouTube. Es así como usamos el bloque de video Squarespace. Ahorremos una vez que hayamos terminado. Sólo por algún bien de entretenimiento, voy a batear play en este verdadero rapido, para que puedas conseguir una visita. Oh Dios mío, ardillada dramática. Impresionante. Ese es el bloque de video Squarespace. 24. Cómo usar el bloque de código / crear un facebook como: En este video, te voy a estar mostrando cómo usar el bloque de código dentro de Squarespace, y también al mismo tiempo, te mostraré cómo agregar un cuadro como Facebook a tu página web. Esta es una pregunta bastante común y solicitud que recibo, así que pensé que noquearía a dos pájaros de un tiro. Cuando vuelva aquí de nuevo, abajo a nuestro Contenido de la Página, y toque “Editar” entonces voy a poner una pequeña caja blanca justo aquí en la parte inferior de esta declaración de artista. Pero para hacer eso, lo que voy a hacer es primero dar clic a este pequeño “Icono del círculo” para agregar algo justo aquí y voy a bajar y necesito agregar un bloque de código. Ahora sé que este es un sitio web sin código, así que no me des ningún FLAC aquí porque esto no es realmente necesario. Pero muchas veces quizá estés trabajando con algo de terceros. Al igual que por ejemplo, utilizo mucho SoundCloud para mi podcast. Me dan un pequeño código de incrustación para poner algo en mi sitio. cualquier momento que realmente estés trabajando con cualquier plug-in de terceros, tal vez quieras incrustar tu perfil de LinkedIn en tu sitio web o algo por el estilo. Básicamente puedes usar este pequeño bloque de código. No estamos escribiendo ningún código, solo estamos copiando y pegando código. Voy a hacer clic en el “Code Box” justo aquí. No veo por qué eso no surgió. A lo mejor me lo perdí. Inténtalo de nuevo. Ahí vamos. Aaparece una pequeña caja de códigos, y te dan este pequeño Hola, Mundo! Cosa aquí, y puedes simplemente borrar eso. No necesitas eso. Pero aquí es donde vas a copiar y pegar código y luego pondrá ese código en tu página web. Lo siguiente que vamos a hacer es, algún momento te voy a estar mostrando cómo agregar una caja como Facebook es simplemente ir a Google, y Google Facebook como box. Basta con hacer clic en este Primer enlace. Es el sitio web de Desarrolladores de Facebook. Vas a entrar aquí y te va a llevar a esta pequeña página. Se va a pedir la URL de tu página de Facebook. Voy a venir aquí y agarrar la URL de mi página de Facebook, y pegar eso ahí y cuando toque “Tab”, lo refrescará y te darán algunas opciones. ¿ Quiero mostrar las caras de los amigos? ¿ Quiero mostrar mis publicaciones recientes? Cuando compartes tus publicaciones recientes, se pone bastante grande, por lo que puede o no querer eso. Podrás deshacerte de las caras de tus amigos si quieres. Se puede mostrar un borde o no mostrar un borde. Incluso puedes decidir si quieres un encabezado ahí o no. Deseamos tener que quitárselo, mantenerlo realmente sencillo. Este poco como Jake Jorgovan. Entonces vamos a hacer clic en este botón que dice Get Code y no te abrumes. Sé que esto es código, pero está bien porque todo lo que vamos a hacer, es tomar esta sección superior aquí arriba, y golpear “Control C” para copiar eso. Pasaremos por el sitio web o un sitio, y pondremos ese pequeño guión ahí. Vuelve aquí. Ves de vuelta a aquí, y luego ven a agarrar esta segunda pieza de código aquí también, y sólo vamos a pegar eso justo en esta cuadra también. Vamos a darle a “Save”. Lo que realmente vas a ver es que no parece que haya pasado nada y la razón de eso es que cuando estás trabajando en este modo de vista previa, Squarespace no renderiza JavaScript. Este cuadro como de Facebook es un poco de JavaScript. A veces cada vez que estás haciendo esto, cuando estás trabajando con estos bloques de código, muchas veces el código no se va a renderizar correctamente cuando estás conectado a un Squarespace y editándolo. Lo que puedes hacer es cerrar sesión en Squarespace, o acabo de abrir Firefox. Tengo Chrome aquí mismo, y luego abro Firefox, y solo lo miro en un navegador diferente. Si voy a una página web con code.squarespace.com, aquí puedo ver un sitio web y si vengo aquí abajo, en realidad no está funcionando. Eso sería porque no salvé hay que guardar también para que esos cambios se reflejen. Ahora acabo de guardar ese contenido. Volvamos aquí, y actualicemos esta página y si nos desplazamos hacia abajo, ahora puedo hacer clic aquí mismo, y a alguien le puede gustar mi página web o como mi página de Facebook desde aquí mismo en mi sitio web. Eso es un poco sobre cómo funciona el bloque de código. Es un poco complicado. Podría ser un poco más avanzado de lo que todo el mundo necesita pero es algo útil. Es una pregunta común que obtengo. Espero que esto haya sido útil, y espero que esto te haya ayudado a darte una mejor comprensión del bloque de código y cómo agregar ese cuadro como de Facebook a tu sitio web. 25. Cómo usar el bloque de formularios y crear una página de contacto y contacto: Este video es otro doble whammy. Te voy a estar mostrando cómo usar el Bloque de Formulario y también cómo crear una página de contacto en tu sitio al mismo tiempo. En primer lugar, sólo un poco de refresco. Voy a venir aquí y voy a añadir un botón de contacto a la página web, así que pulsa este pequeño icono más, y añade una nueva página. Ven aquí y escribe “Contacto”. Si bien estamos en esto, me voy a deshacer de esta carpeta, porque realmente no es lo que quiero y limpiar un poco esto. Empieza a parecerse un poco más a un sitio web real. No quiero este enlace de Google ni esta carpeta “Sobre nosotros”, así que solo voy a eliminar esto aquí mismo golpeando a esa papelera. Ahora tenemos este Bienvenida, Sobre, y Contacto. Aquí en la página de contacto, de nuevo, vas a notar que tiene este fondo gris, eso es porque no tenemos una subida en miniatura en la página, y también tiene esta barra lateral, que no queremos en la página tampoco. Lo que vamos a hacer es, volver a hacer clic en la configuración de la página, podemos hacerlo aquí mismo, o haciendo clic en el engranaje de aquí junto a la página de contacto. Vamos a cambiar el diseño de página de una barra lateral a ancho completo, y luego voy a bajar aquí y voy a subir una imagen en miniatura. Vamos a usar este realmente genial aquí del camión. Ahí vamos. Ahora tenemos nuestro camión subido para una imagen en miniatura. Cuando golpeemos “Guardar”, veremos que eso acaba de actualizarse aquí, pero ahora queremos realmente tener una pequeña página de contacto. Voy a bajar a la página de contacto o contenido y golpear “Editar”. Voy a escribir “Contacto”, y lo destacaré y lo convertiré en un encabezado 1, así que así sea bonito, grande, y bonito. Entonces bajo Contacto, lo que quiero hacer es crear un poco de forma, una forma para que la gente me contacte. Voy a dar clic a este pequeño botón aquí abajo, y agrego un Bloque de Formulario. Vas a ver que te da un punto de partida bastante decente aquí mismo, cuando estás trabajando con tu formulario. Por alguna razón u otra, esto está gris para mí. Podría borrar esto y volver atrás y regrabarlo, pero honestamente, Squarespace, va a tener problemas un poco así a veces, y a veces es su culpa o a veces es tu conexión a Internet. Voy a pegarle a “Escape” y esa forma se va. Si alguna vez tienes una ventana flotante y golpeas escape, básicamente va a x eso fuera. Pero el Bloque de Formulario sigue aquí, así que voy a hacer doble clic en él para editarlo. Aquí estoy teniendo un problema y no sé por qué. De nuevo, voy a intentar destrozar la forma y empezar de nuevo. Tíralo a la basura. Vamos a añadir una caja de nuevo aquí. Haga clic en “Formulario”. Ahí vamos. No sé qué fue eso, no sé por qué hizo eso, pero eso es sólo parte de ello. Squarespace es una plataforma web, así que a veces cosas con tu computadora o tu navegador, ahí hay problemas, así que de vez en cuando, sí tienes que preocuparte por eso. Aquí puedes darle un nombre al formulario, lo cual no es demasiado importante. No obstante le nombra el formulario, básicamente, este es el asunto del correo electrónico, que pasará cuando sea correo electrónico a código de formulario. Acabo de nombrar el sitio web sin forma de código. Puedes editar y puedes tener aquí estos diferentes campos que puedes elegir. Tengo el mío ahora mismo. Por defecto, me va a dar un nombre, dirección de correo electrónico, asunto, y mensaje. A lo mejor realmente no me importa que alguien escriba un tema o no quiero darles otra línea por eso, así que solo voy a golpear la papelera en eso y lo quitaré. Mira eso, ahora no tenemos esa línea de asunto ahí. Pero a lo mejor quiero un número telefónico. Si le pegas a este pequeño ícono más aquí abajo, te da todas estas otras opciones diferentes. Se puede hacer un texto, un área de texto, que es un bloque como ese mensajes de ahí abajo. Se puede hacer un menú desplegable, casillas de verificación, radio , encuesta, nombre, todo esto, una contraseña. Todas estas cosas interesantes y formas en las que puedes recolectar información de alguien, de su dirección de correo electrónico o de su manejador de Twitter. A lo mejor queremos su número de teléfono, así que solo le daré clic a “Teléfono” y le pegaré a “Hecho”. Ahora tenemos este bonito pequeño desplegable o esta pequeña caja de entrada para un número telefónico. Pero a lo mejor quiero el número telefónico por encima del mensaje, no me gusta que el número telefónico esté en la parte inferior. Bueno, tienes estos pequeños iconos grises justo aquí a la izquierda, estos pequeños puntitos. Si paso sobre ellos, veo que mi ratón se convierte en un poco de flecha arriba-abajo. Si hago clic en uno, sólo puedo arrastrarlo, y mira eso, justo ahí a la izquierda, se refleja donde quiera que lo suelte. Muy cool, muy intuitivo, y fácil de usar. Ahora antes de golpear “Guardar” y terminar aquí, vamos a querer dirigirnos a la segunda pestaña aquí arriba que dice “Almacenamiento”. Voy a dar click en “Almacenamiento”. Por defecto, el método de almacenamiento será que se va a enviar por correo electrónico cualquiera que sea tu dirección de correo electrónico predeterminada que tengas en la cuenta. Por lo que por defecto, esto me enviará un correo electrónico con toda la información que se ingresó en el formulario. Algunas otras integraciones, es que en realidad puedes agregarlo a un documento de Google, por lo que esto es genial para registros de eventos, recolectar direcciones de correo electrónico, o simplemente mantener todo organizado en un solo lugar. Lo último, también puedes conectarlo a Mailchimp, y esto es realmente bueno, de nuevo, para las inscripciones en listas de correo electrónico o algo por el estilo. Love Mailchimp en un usuario enorme, y ambos son geniales. Simplemente haces clic en ellos y básicamente vas a iniciar sesión en tu cuenta, y la conexión es bastante simple. Entonces último, bajo “Avanzado”, tienes algunas opciones aquí. Aparte de decir “Enviar”, se podría decir, “Hola” o algo así. Se puede cambiar el texto, y esto se reflejará una vez que toque “Guardar”. Puedes elegir dónde quieres alinear ese botón, a la izquierda, centro o a la derecha. Me iré a la izquierda. Después de presionar el botón Enviar o el botón “Di hola”, puedes poner algo de texto ahí, “Gracias por saludar”. Se puede configurar todo esto. Aquí hay otras cosas, probablemente no quieras preocuparte demasiado. El modo caja de luz es interesante. Lo que esto hará es básicamente tener un botón pequeño y luego cuando alguien haga clic en él, toda esta forma aparecerá en una caja de luz, similar a las imágenes. De nuevo, probablemente no algo que quieras hacer en una página de contacto, pero es algo útil tener. Eso es todo lo que realmente voy a cubrir en esto. Las otras cosas de las que probablemente no tendrás que preocuparte demasiado, pero una vez que terminemos, solo vamos a seguir adelante y golpear “Guardar”. Aquí vamos. Tenemos esta forma, pero esto se ve un poco grande, no voy a mentir. Esa es una forma de contacto realmente enorme. Lo que realmente me gustaría hacer es tener mi información de contacto listada justo aquí. Lo que puedo hacer es crear un cuadro de texto, y lo que haré es solo poner mi información de contacto, Jake Jorgovan. Por defecto, cuando pegas “Enter” en Squarespace, va a romper y te va a dar una gran línea como esta, por lo que mi nuevo texto empieza aquí abajo, pero si pulsas “Shift”, “Enter”, no va a hacer esa ruptura, y puedes escribir justo debajo de ella. Eso es sólo un pequeño truco, un práctico, cosita para tener. Lo que hicimos es, acabo de poner mi nombre y dirección de sitio web ahí. Probablemente no va a poner toda la información de contacto en este pequeño curso aquí, pero lo que voy a hacer ahora es venir aquí, y de nuevo, puedo arrastrar y soltar esta caja. Puedo darle click desde aquí mismo, ver cómo gira con la mano. Voy a arrastrarlo y alinearlo a la derecha de esta forma. Ahora, tenemos mi información de contacto a la derecha de este formulario y puedo poner mi número de teléfono si quiero ahí mismo. No quiero que todos en este curso me llamen. Podemos tener nuestra información de contacto y luego un formulario de contacto ahí mismo. Si queremos, incluso podemos añadir un cuadro por aquí. Sólo mostrarles un poco de ejemplos de formas de usar un montón de estas herramientas juntas. Voy a subir una imagen. Vamos a ir a agarrar una foto sólo para mi sitio muy rápido, y vamos a golpear “Guardar”. El foto es un poco grande, pero funciona. Ahora tenemos esta página de contacto cool, donde tenemos mi foto, el formulario justo aquí, y luego mi información de contacto listada a continuación. Golpeamos “Save” y voila, acabamos de crear una ingeniosa pequeña página de contacto aquí en nuestra página web. Espero que esto haya sido útil para enseñarte a usar el Bloque de Formulario, y también solo tratar de mezclarlo y mostrarte un puñado de cosas diferentes todas a la vez en este video. Ojalá no te abrumara, pero en cambio solo te dio algunos usos más concretos sobre cómo usar la plataforma. 26. Cómo usar la herramienta de mapa: En este video, te voy a estar mostrando cómo usar y trabajar con el bloque de mapa dentro de Squarespace. Como de costumbre, voy a bajar aquí, añadir un nuevo bloque, y bajar al bloque del mapa. Lo que se llega a hacer, es pasar por aquí ahora y añadir un nombre comercial. Entonces la impresionante oficina de Jake. Pusiste una dirección, que he copiado la maravillosa dirección de 45 Rockefeller Plaza a partir de mis direcciones de alguna manera ubicadas en Manhattan, que no lo es. Entonces básicamente bajas aquí y le pegas a Save. Ahora, por defecto, lo que esto va a hacer, es solo darte un mapa de ancho completo aquí mismo, y te va a dar un zoom predeterminado en él también. Pero algunas cosas que puedes hacer, es que realmente puedes cambiar el zoom en el mapa, y también puedes ajustar las dimensiones y el ancho del mismo también. A lo mejor queremos que el mapa sea un poco más alto, y podemos bajar aquí y hacer clic en este pequeño círculo, arrastrar y hacer que ese mapa sea un poco más alto o más pequeño. A lo mejor no lo quiero todo el camino. Bueno, no puedes simplemente arrastrar el mapa hacia la izquierda, en cambio lo que harías es agarrar un bloque espaciador o un bloque de texto si quieres algo ahí sentado, y tirará del espacio o hacia un lado del mismo. A lo mejor eso es un poco demasiado pequeño, pero lo haremos de ese tamaño. Entonces vamos a ir un poco más grandes aquí, y luego algo más que tal vez quieras hacer es en realidad acercar el mapa. momento, esto es básicamente solo mostrar que está en Manhattan Island. Pero ¿y si realmente quiero entrar y ver las calles que hay a su alrededor? Bueno, si haces doble clic en él, y voy a mover esto para que puedas ver, y luego te desplazas por el mapa y usas tu rueda de zoom, o por ejemplo, en un portátil, así que solo me desplazo con dos dedos, y yo simplemente acercar y desplazarme, e incluso puedo hacer clic y arrastrar el mapa alrededor, puedo llegar hasta aquí para que incluso puedas empezar a ver que los negocios y todo lo que hay por aquí. Cosa muy cool donde realmente puedes acercar el mapa, o puedes alejar el mapa también si no quieres acercarte tanto. Características muy útiles alrededor de la funcionalidad del mapa. Espero que esto haya sido útil y sobre todo si tienes una ubicación física para tu negocio. 27. Técnicas avanzadas de diseño con la herramienta de línea: En este video, te voy a estar mostrando cómo trabajar con la herramienta de línea horizontal en Squarespace y unos pequeños trucos que tienes. Esto en realidad es un poco más que la herramienta de línea horizontal, en realidad te estoy mostrando algunos trucos de diseño geniales dentro de Squarespace. Aquí una vez que estemos editando el contenido de la página, voy a eliminar primero este bloque de cotizaciones solo para que no interfiera con lo que estoy tratando de mostrar. Pero digamos, quiero mover este texto y en realidad hacer de este texto dos columnas. En lugar de leer verticalmente así, tenemos una columna aquí y una columna aquí. Bueno, ahora mismo si solo trato de agarrar el texto, todo viene como una sola cosa. En realidad hice una columna porque tenía un espaciador, y borrar ese espaciador otra vez para no meterme en el camino. Pero y si quiero, di estas dos líneas para sentarse a la derecha de éstas. ¿ Cómo agarro esos sin agarrar toda la cuadra? Bueno, ahí es donde esta herramienta de línea horizontal entra en su lugar. Lo que podemos hacer es simplemente desplazarnos aquí y dar click para añadir un bloque. Lo que vamos a hacer es añadir una “Línea”. Al ver esta línea horizontal, muy delgada pero sutil, aparece una pequeña línea muy delgada pero sutil,pero útil. Podemos usar eso como elemento de diseño si queremos separar piezas de nuestro sitio, o en realidad podemos usarlo para separar bloques de texto. Es algo que lo uso para todo el tiempo y luego tal vez borro la línea y después. Pero ahora tenemos estos dos bloques separados de texto. Puedo bajar aquí, agarrar el de abajo, y venir aquí. Mira eso, justo ahora separamos ese texto en dos líneas separadas aquí mismo. Pero y si quisiéramos, digamos, la “Declaración del Artista” para sentarse en su propia línea. A nosotros no nos gusta cómo esto sentado aquí y queremos que esto lea todo horizontalmente a través. Bueno otra vez, podemos subir aquí bajo “Declaración del artista”, agregar una “Línea” horizontal, y acabamos de romper el texto de “Declaración del artista” del texto debajo de ella. Podemos agarrar esta “Declaración Artista”, subir aquí y vemos ahora que esto va a recorrer todo el camino a través la vertical a diferencia de aquí mismo, que es su posicionamiento actual. Vamos a moverlo aquí arriba. Entonces una vez que terminemos con eso y lo hemos separado, podemos “Eliminar” nuestra “Línea” y ya no necesitamos eso. Ahora tenemos el texto y estas dos columnas de par, igual que tenemos justo aquí. Si queremos usar la “Línea” para cualquier cosa, digamos que tenemos una nueva sección del sitio aquí abajo. Podemos ir por aquí y añadir una “Línea”. Ahora nota que hay estos dos círculos y están justo al lado del otro. Esto es algo que realmente no le he demostrado a mucho, pero cuando tienes columnas como esta, hemos separado la cuadrícula en dos columnas. Puedo venir aquí y dar click. Si vemos aquí mismo, esa “Línea” sólo abarca el lado derecho. Bueno, si agrego una “Línea” ahora mismo, ve que “Línea” sólo abarca esta columna justo aquí verso, si la tomamos y vamos por la externa donde vemos la “Línea” gris va todo el camino a través. Si hacemos clic en eso, la “Línea” ahora abarca todo el ancho de la página. Podemos hacer lo mismo aquí mismo, podemos añadir una “Línea” justo aquí debajo de esta columna. Como puedes ver, la “herramienta Línea”, es un elemento de diseño genial, pero también es muy funcional y solo usarlo para separar texto, o para organizar cosas, y luego crear estos portaespacios temporales. Espero que esto haya sido de ayuda. Trata de meterte incluso un poquito de las cosas avanzadas con un editor visual, pero todas las cosas útiles no obstante. Solo trato de mostrarte algunos de los trucos del oficio, si quieres. 28. Cómo crear botones: En este video, voy a estar mostrándote cómo usar la herramienta de botones dentro de Squarespace. Como de costumbre, vamos a empezar editando el contenido de la página. Nuestro objetivo en este video va a ser convertir este enlace de “Ver mi portafolio” en un botón. Para ello, vamos a venir aquí y vamos a añadir una cuadra justo debajo donde dice, “ver mi cartera”. Entonces vamos a desplazarnos aquí abajo y vamos a llegar a esta función de botón y vamos a hacer clic en botón. Vamos a cambiar este texto en este botón. Voy a mover esto por aquí para que ustedes vean lo que está pasando. Dice: “Ver mi portafolio”. Agregaremos una URL a cairnes.com y abriremos eso en una nueva ventana. Entonces podemos cambiar el tamaño del botón; ser botón pequeño, mediano o grande o simplemente un poco mucho. Nos vamos a quedar con medio en este tipo de aquí. Entonces puedo alinear esto a la izquierda, al centro o a la derecha. Simplemente lo dejaremos alineado a la izquierda. Ahora mismo esto es una especie de botón de aspecto aburrido. Es solo negro y es bastante sencillo. Pero es funcional sin embargo y siempre que lleguemos al editor de estilos, en realidad podemos empezar a editar y manipular el estilo del botón, la forma del mismo, el color y todo eso. Entonces no se ve tan emocionante ahora mismo, pero acabamos de crear un botón y vamos a volver a esto en el futuro. En realidad saldremos como “ver mi portafolio” aquí para una demo de enlaces más adelante. Vamos a volver a esto en un video futuro en el editor de estilos y te voy a mostrar cómo cambiar y estilizar estos botones. 29. Cómo usar el bloque de resumen: En este video, te voy a mostrar cómo utilizar estos bloques de resumen en Squarespace. Para ello, en realidad he saltado a mi sitio web ya que realmente no tenemos ningún contenido para usar en el bloque de resumen de nuestro sitio web actual sin código. Pero mientras estamos, también quería mostrarles que todo este sitio web que he construido y todo lo que tengo pasando aquí está realmente construido dentro de Squarespace y sobre el tema de los cinco. Por lo que notarás que a pesar de que esto se ve muy diferente, no estoy usando la imagen del banner ni nada por el estilo. Tengo un sitio web muy limpio y nítido todo construido aquí mismo dentro de la plantilla de Squarespace. Entonces es un tema realmente genial, realmente robusto. Realmente disfruta usándolo. Pero por ahora, lo que les voy a mostrar cómo hacer es usar el bloque de resumen. Bloque de resumen es muy cool. Es muy útil para cualquiera de las galerías, pero el lugar más común que lo uso realmente está basado alrededor de los blogs. Entonces lo que voy a hacer es, tengo esta página demo aquí, y voy a añadir un bloque. Soy un click en bloque de resumen. Lo que hace un bloque de resumen, es que crea esas miniaturas, un estilo de revista. Busca ver un puñado de tus entradas de blog recientes o tus entradas de blog populares que debes. Entonces aquí estoy haciendo clic en mi blog, y lo que ves ahora son todas estas entradas, mis recientes entradas de blog aparecen aquí mismo en formato de resumen. Si quisiera, también podría ir de galerías y puedo hacer un resumen de mi galería de arte, y puedes ver algunas de mis locas ilustraciones aquí. Pero quiero quedarme con un blog porque es un poco más relevante y lo que creo que se usa más comúnmente. También puedo hacer una galería de productos también, si quieres. Entonces una vez que hayamos elegido de qué vamos a crear un resumen, vamos a venir aquí a maquetar, y podemos elegir entre un puñado de formas diferentes de exponer esto. Entonces ahora mismo lo que estás viendo es el modo de cuadrícula, muy similar al de la cuadrícula de galería. Podemos hacer una lista y verás una lista de todo. Notarás que mis publicaciones recientes no tienen fotos en miniatura, pero todas mis viejas, puedes ver las miniaturas aparecen aquí mismo a la izquierda. Puedes hacer que el tamaño del texto sea pequeño si quieres, puedes hacerlo extra grande si quieres ponerte un poco loco o simplemente medio y hacerlo normal. Tu relación de aspecto, esto determina tu relación para tus imágenes. Si lo pones en auto, entonces eso va a apuntar a no recortar nada o tratar de recortar lo mínimo posible o lo que sea el mejor ajuste o puedes hacerlos cuadrados si quieres o vertical o lo que se ajuste a tu fantasía y que te gusta para tu sitio. Mueve esto en auto por ahora. Puedes elegir el tamaño de la imagen, y si quiero, hacer que la imagen sea realmente grande. Vamos a retocar una hora aquí mismo. Pero puedes ver puedo hacer la imagen realmente grande con la historia a un lado de ella o puedo bajar aquí y hacer pequeña la imagen y hacer que el texto ocupe la mayoría de la pantalla. Nuevamente, lo que prefieras, tu imagen alineada a la izquierda, o puedes establecer la imagen a la derecha y text-align, puedes hacer su izquierda, centro o derecha. Por lo que de nuevo, características muy cool allí. Posiciones de metadatos, por lo que esa sería la fecha ahí mismo. Te puedo mostrar cómo realmente puedes cambiar eso. Puedo poner los metadatos por encima del título. Entonces ahora ves que ese día acaba de estallar por encima de nuestro título. Podemos hacerlo justo debajo del título y la fecha aparece justo ahí, o por debajo del contenido todos juntos. Entonces voy a venir aquí para exhibir y elegir cuántos artículos quería mostrar. Puedo mostrar hasta 30. Por lo que ahora tenemos una tonelada de publicaciones de blog retrocediendo que muestra. O si quisiera, podría limitar eso a mis últimos tres, retoques un poco. Yo quiero hacer esos grandes cambios, y ahí sólo se ven los recientes que tengo. En realidad está mostrando cinco, eso es raro. Debo gastarme una falla por intentar hacerlo tanto, pero ahí vamos. Ahora estamos a las tres. Puedes elegir qué información quieres mostrar. El título, si querías esta miniatura, que de nuevo, te mostraré de dónde se extrae esta miniatura más adelante en la sección de blogs. Entonces solo puedo tener título si quiero. Déjame hacer esto un poco más grande. Miniatura volvería a ser las imágenes. Entonces ahora las fotos se han ido. El extracto es el texto. Entonces solo podemos tener los títulos y el texto si queremos. Entonces también puedes elegir lo que quieres que sean estos metadatos. Entonces ahora mismo ves que los metadatos es la fecha del post. También podría hacerlas las las etiquetas que están en el poste. Puedo convertirlo en el autor del post. Ubicación, comentarios, cualquiera de estas cosas. Entonces de nuevo, algo de personalización por ahí y puedes tener una segunda pieza de datos también. Por lo que puedo tener mi fecha más el nombre del autor. También puedes filtrar por categorías. Entonces, por ejemplo, tengo bastantes categorías en mi página web. Entonces si solo salvo al creador enfocado, eso sólo va a tirar cualquier cosa que haya etiquetado en el creador de foco, que es un puñado de posts de blog que se destacaron alrededor de este e-book que publiqué. O puedo bajar aquí y hacer ese mismo filtrado con etiquetas. Puedo poner en una etiqueta de freelance, y aquí consigo este uno posts que en realidad he etiquetado freelance. Para que puedas usar categorías y filtros, los cuales te mostraré cómo agregar esos más adelante en la sección de blogs también. Puedo quitármelas. Entonces por último, hay una característica también en el blogging donde se puede establecer un determinado posts es destacados posts. Entonces si hago clic en eso, en realidad puedes empezar a ver estos posts destacados más populares que he elegido para ser destacados. Podemos apagar eso, y de nuevo, por defecto solo elegirá tus publicaciones más recientes. Por lo que de nuevo, se puede ver que el bloque de resumen es muy robusto. Honestamente sólo estamos empezando porque hay cosas aún más geniales que estoy a punto de mostrarte. Viste que básicamente todo lo que te acabo de mostrar estaba en el formato de lista. Volvamos a subir a la parrilla. Lo que notaremos es que si vamos a la grilla, todas estas cosas diferentes cambian. Por lo que ahora podemos cambiar de nuevo el ancho de nuestra columna, y podemos hacer que nuestro ancho sea dos columnas e intentar que sea un montón de columnas de ancho donde sea realmente denso, eso probablemente no se vea demasiado bien. Pero realmente puedes meterte con esto y puedes cambiar la canaleta, que es el espaciado entre el medio, hacerlo para que apenas haya espacio y estas palabras bombean hacia arriba. De nuevo, no se ve muy bien, pero te estás haciendo la idea de lo que puedes hacer con él. De nuevo, tienes todos la misma alineación de texto, metadatos y visualización, y solo ajustando aquí mientras estoy metiendo con todas estas configuraciones. Otra vez aquí mismo, puedes elegir todas esas mismas opciones y todo justo aquí. A lo mejor no queremos la grilla ni la lista. Bueno, aquí hay otro genial, carrusel. Lo que hace el carrusel es una cosa genial donde se pueden ver estas flechas pequeñas que se desplazan. Bueno, puedo decir que aquí están mis posts destacados y otra vez tener todas estas mismas cosas. Puedo elegir cuántos artículos quiero en fila, así que diremos cuatro. Entonces por el bien de tener una de las imágenes, voy a ir a destacados, y cosa realmente genial una vez que tengas esto. Habíamos ahorrado para que pueda demostrarles esto por ustedes chicos. Con los posts destacados, en realidad tienes estas flechas pequeñas y es con opción de carrusel, y puedes empezar a desplazarte y tener esta cosa realmente genial de la revista. Al igual que eso, ni código ni nada. Simplemente consigues hacer pequeñas características geniales como esa con el uso de sus widgets incorporados. Entonces de nuevo, esos son los principales ahí mismo, y voy a hacer doble clic en nuestro bloque de resumen, volver aquí y mostrarles la última, las columnas de auto. Que esto una vez más fresco , crea este diseño de revista limpio. Creo que éste funciona mejor sin el extracto. Saquemos el extracto. También despeguemos el filtro destacado, y creo que vas a llegar a ver un poco más. Vamos a hacerlo un poco más grande, poner un montón de anfitriones aquí. Diga como 30 de estos tipos. Daremos a esto un segundo para cargar. Pero este auto columnas, lo que hace es que crea estas columnas automáticamente solo basadas en la altura de la imagen, la cantidad de texto y todo lo que hay ahí. Esto es otra vez, otro diseño muy fresco, estilo muy revista. Pero es algo que puedes generar realmente rápidamente por tu cuenta. Nuevamente, puedo hacer estas columnas todas más pequeñas si quiero. De nuevo, probablemente no se vea bien con todo ese texto, pero tal vez con imágenes, podría funcionar. Puedo hacer que el ancho de la canaleta sea más grande o más pequeño, y simplemente meterse con todos estos ajustes. Por lo que es una característica realmente genial. Nuevamente, no hacerlo justicia ahora mismo con lo que realmente puede hacer. Pero de nuevo, es una manera realmente bonita, muy cool de disenar tu contenido. Por lo que el bloque de resumen es realmente poderosa herramienta en Squarespace, sobre todo si estás blogueando, podcasting , sacando cualquier contenido regular, te permite hacerte un poco personalizado alrededor de cómo realmente pones tu contenido en su sitio web. Tan realmente potente, realmente robusta, probablemente una de mis herramientas favoritas dentro de todo Squarespace. Por lo que recomiendo encarecidamente revisarlo y jugar con él. Creo que realmente disfrutarás de esta herramienta. 30. Cómo integrar las redes sociales: En este video, te estaré mostrando cómo agregar algunas cajas de redes sociales a tu página web y solo algunas de esas, pero antes de eso, solo quiero mostrarte que también acabo de adjuntar, conecté mi cuenta de Instagram a Squarespace bajo la sección de cuentas de redes sociales Connect, que les mostré chicos en un video anterior, pero si no, sólo van a cuentas de Ajustes, Social Connect y están ahí. Vas a venir aquí y vamos a trabajar de nuevo en esta página aquí mismo. Lo que voy a hacer es simplemente bajar aquí añadir una nueva caja. Voy a demostrar algunas cosas diferentes para ustedes chicos. En primer lugar, haré el cuadro de enlaces sociales y añadiré los enlaces sociales. Lo que veremos aquí es que automáticamente tenemos los iconos de Twitter e Instagram, que ya he agregado al sitio. Ya verás que el tema también tiene estos en el pie de página. Vamos a alinear esto a la izquierda, o podemos alinearlo a la derecha si queremos, y aparecerá justo por aquí. Vamos a dejarlo en el centro. Podemos volver a meternos con la talla, hacerla grande, pequeña, podemos hacerla cuadrada y este estilo nocaut, o podemos hacer una frontera. Nuevamente, muchas maneras diferentes podemos seguir manejando esto. Incluso puedes elegir el color, si quieres que sea claro u oscuro, que esto cambiaría y es muy útil, sobre todo si tienes un fondo oscuro en tu sitio, o simplemente puedes tenerlo como estándar. Se va a mostrar como esos colores estándar de redes sociales que habrías llegado a conocer y amar. Eso es todo lo que te voy a mostrar en este, muy simple pero muy cool característica de tener. Lo siguiente que vamos a hacer es mostrarles cómo agregar una cuenta de Twitter, y para ello vamos a bajar aquí, añadir una caja, desplazarse aquí abajo y añadir el ícono de Twitter. Ve a elegir Cuenta, y luego a Jake Jorgen. Por alguna razón u otra, esto no me está funcionando, así que voy a ir a agregar una cuenta e intentar volver a agregar esto. A ver si eso soluciona el problema. De nuevo, hay pequeños bichos aquí y allá, pero la mayoría de ellos son cosas que puedes simplemente trabajar. Acabamos de añadir una nueva cuenta y mira, esa está funcionando. No estoy seguro de por qué el otro tipo no estaba trabajando, pero aquí vamos. Ya podemos ver todos mis últimos 10 tweets que tengo aquí arriba. Puedo reducir eso a tres, ya que 10 podría ser un poco mucho de tener en el sitio. De nuevo, si vas muy rápido, a veces no lo lee, así que tienes que ir despacio. Ahí en realidad puedes ver eso o solo puedes tener uno y solo tener mi último tuit. Puedo elegir si quiero mostrar mi avatar o no. Eso desaparece, mi nombre de usuario o no. Entonces en realidad puedo tener un pequeño botón de seguimiento aquí también. La gente va de nuevo ahí mismo en el sitio, sólo sígueme. Nuevamente, muy útil pequeña herramienta ahí mismo con el bloque de Twitter. De nuevo, si no queremos que se extienda por todo el camino, podemos venir aquí, agregar un espaciador, arrastrar a ese tipo ahí mismo y ahora tenemos un tamaño mucho más normal que buscando pequeño widget de Twitter. A la derecha de este widget de twitter, vamos a añadir una caja de Instagram. Voy a subir aquí, añadir una caja, desplácese aquí hasta Instagram. Voy a elegir una cuenta para Jake Jorgen. Nuevamente, no es leer mis cuentas lo que había conectado anteriormente. No estoy seguro de por qué, por lo que haremos clic en Agregar una cuenta. Nuevamente, hay fallos de vez en cuando, pero la mayoría de las veces se puede trabajar dentro de ellos. Ya había iniciado sesión, mi contraseña estaba guardada, así que simplemente se adelantó y agarró mi información. Voy a hacer eso para que podamos, y elegimos cómo queremos que funcione esto? Con el bloque Instagram, tenemos esta cuenta y aquí tenemos esta pestaña de diseño. Puedes elegir cuántos ítem queremos mostrar, que en este momento sólo se parece a uno, pero eso es porque estamos en modo slide-show. Ahora vamos al modo deslizante, donde empezaremos a deslizarse y podemos ver el siguiente antes de hacer clic en él. Vaya al modo cuadrícula y para obtener esa característica de galería de cuadrícula. De nuevo, y elige tipo de nuestras miniaturas por fila. Cuántos queremos incluir, digamos, tres. Cambia tu relleno y todas esas cosas divertidas si quieres también. Aquí puedes ver algunos de mis pequeños dibujos locos y solo algunas experiencias y qué no. Entonces puedes elegir también si quieres caja de luz para que la gente pueda hacer click en esas y ver esas imágenes un poco más grandes. Si volvemos a subir, también podemos ver estas imágenes apiladas. Nuevamente, estas son muy similares a las funciones de galería que ya están construidas en Squarespace, pero ahora esto solo está tirando de mi feed de Instagram. Ahí estoy en París en la torre Eiffel. Espero que esto haya sido útil para darles a ustedes una comprensión de algunos de los bloques de redes sociales. Definitivamente hay más con los que se puede trabajar, pero ojalá estos les den unos cuantos chicos y el resto de ellos. Para algunas de esas otras redes de redes sociales ustedes pueden descifrar por su cuenta. 31. Cómo editar tu pie de pie: A continuación, te voy a mostrar cómo editar el pie de página en tu sitio de Squarespace. Es muy sencillo, pero algo con lo que mucha gente lucha, y en realidad tendrán este tipo de texto básico o el poder de Squarespace en el fondo de su sitio cuando no lo necesiten. Para editar tu sitio de Squarespace para la edición del pie de página. Todo lo que realmente vas a hacer es venir a la pestaña de la página, click en “Bienvenido” en la página que quieras, o en cualquier página realmente. Te vas a desplazar por aquí hasta donde tiene tu contenido de pie de página y vas a “Editar”. Puedo entrar aquí y puedo cambiar este texto a algo personal. Yo sólo lo fastidio. Por lo que dirá Cambiar este texto. También podemos tener los enlaces sociales bloqueados aquí abajo. A lo mejor no quiero eso porque ya está incorporado en el tema. Entonces borraré eso. Entonces puedo bajar aquí y puedo agregar bloques. Si quiero agregar otro bloque de texto y decir 1-2-3 dirección. En realidad puedo empezar a cambiar ese texto y en realidad simplemente construir y personalizar un pie de página como cualquier otra cosa. Puedo poner fotos aquí abajo si quiero o una cotización o cualquier cosa que realmente quiera. Por lo que es súper potente. Realmente puedes personalizar tu pie de página para que sea lo que quieras que sea. Este pie de página se va a replicar a través de todos los diferentes sitios, todas las diferentes páginas de su sitio. Entonces por ejemplo, se ve en mi sitio web, tengo este pie de página aquí abajo con este email de registro y mis iconos de redes sociales. Tengo esto en todas las páginas de mi sitio web. Entonces, no importa en lo que alguien haga clic, cuando vaya a esto, lo verán al final de la página. Además, puedes ir y estilizar este pie de página a través del Editor de estilos. Si solo te refieres al video del editor de estilos, verás cómo cambiar el color de la fuente o el tamaño de la fuente o algo así en tu pie de página. Espero que esto haya sido útil para darte un poco mejor entendimiento sobre cómo trabajar con pies de página. 32. Outro de editor visual: Muy bien ahora que conoces tu camino alrededor plataforma de Squarespace y te he mostrado un poco de lo que es capaz, quiero mostrarte el Editor Visual que es una de las piezas centrales de Squarespace. Una de las cosas que vas a estar usando las más comunes a la hora de construir tu sitio. El Editor Visual es la interfaz de arrastrar y soltar de Squarespace. Es realmente simple pero hay muchos trucos con él y muchas cosas diferentes que puedes hacer y es realmente poderoso y sé que te va a encantar. Notarás que este apartado es bastante largo. Bueno es porque cubro muchas herramientas diferentes que están en el Editor Visual de Squarespace. Ahora algunos de ustedes tal vez quieran ver cada uno de estos videos y ver todas las herramientas, otros de ustedes tal vez quieran ver las herramientas que les interesan, y otros tal vez vean un par de videos, te darán una sensación de lo que está pasando, y solo vas a querer sumergirte y jugar por tu cuenta. Pero independientemente de tu enfoque, sé que vas a sacar mucho valor de esta sección, ya que es una de las características más importantes y centrales de la plataforma Squarespace. 33. Acerca del editor de estilo: Hasta este punto del curso, te había estado guiando por cómo realmente configurar tu sitio, manejar la configuración, y poner contenido en tu sitio pero realmente no hemos hablado mucho de diseño. En esta sección, voy a estar mostrándote lo que se llama el Editor de Estilo. Esta es la parte de squarespace que te permite realmente ir por y estilizar y diseñar tu sitio a tus gustaciones. Es una de las otras características principales del núcleo en Squarespace. Es increíblemente fácil de usar e increíblemente potente. 34. Uso del editor de estilo pt 1: Este video, te voy a estar mostrando cómo trabajar con el Editor de Estilo en Squarespace. Para llegar, primero vamos a dar click en la pestaña Diseño por aquí. Entonces vamos a bajar aquí y vamos a dar click en Editor de estilos. Lo que obtendremos es esta lista de todos estos atributos por aquí a la izquierda. Podemos desplazarnos hacia arriba y hacia abajo esta lista. Como se nota aquí, hay una barra de desplazamiento a la derecha que puedo agarrar. Tenemos todas estas listas y atributos. No te preocupes, parece abrumador al principio, pero te prometo que no lo es. Pocas cosas sólo para saber sobre el. Editor de estilos primero. Es decir que los atributos y todo, es decir, todos estos son individualmente únicos a cada tema o plantilla. Algunas de estas, si estás trabajando con el tema de los cinco, verás todas estas que tengo aquí mismo. Pero si estás trabajando en Pacific o Marquee o Bedfat o alguna de las otras plantillas, podrías tener algunos de estos atributos que son diferentes. Algunas de estas podrías no tener, y otras serán uniformes a través de todas ellas. Sólo algo en lo que pensar, y si estás mirando un tema diferente, por qué ciertas cosas podrían ser un poco diferentes. Pero mi recomendación contigo es simplemente pasar por una lista, empezar a jugar con todo. Empezarás a ver con bastante rapidez y descubrirás cómo funciona. Voy a empezar y apenas empezar a bajar la lista y explicarles uno por uno. El primero es el fondo del sitio. Esto es bastante sencillo, pero es el fondo del sitio. Iré realmente drástico aquí, lo pondré rojo para exhibir aquí. Pero lo que en realidad estamos viendo es que, realidad no está cambiando nada. Eso es honestamente porque el fondo del sitio no es realmente un atributo que es demasiado importante en este tema. Pero es uno que va a través de todos ellos. En realidad, si vamos al ancho del sitio en lugar de ancho completo, aquí empezamos a ver el fondo del sitio. Nuevamente, algunos de estos atributos, parecerán que no harán nada. Pero en realidad algunos de ellos podrían simplemente depender de que otras variables sean ciertas formas. Por ejemplo, aquí abajo tenemos un atributo ancho completo del sitio y ancho completo. Si voy a ancho completo, entonces los sitios y todo va todo el camino a través. Si voy al ancho del sitio, entonces realmente puedo usar el control deslizante para determinar qué tan grande es este sitio, qué ancho es. Algunos tipos realmente geniales de características y funcionalidades aquí. Sólo para alimentar las cosas que quizá me hayas visto hacer esto hace un segundo, pero acercar y alejar. Si presionas Command Minus o Command Plus en tu teclado, o creo que es Control Menos o Control Plus en un Windows, lo que puedes hacer en realidad es acercar y alejar. Esto es realmente útil de hacer en Squarespace a veces, siempre que quieras poder ver un poco más, o si estás trabajando en un pequeño navegador, como yo estoy aquí mismo. Pero realmente no queremos ese fondo rojo, así que vamos a poner a ese tipo de aquí a blanco. Ahora también puedes, si quisieras, podrías establecer esa imagen de fondo en una imagen si quisieras. Por lo que podrías subir una textura o cualquier cosa si quieres. Como ves, es bastante sencillo cuando subes las imágenes, tienes esas mismas opciones que haces para subir y todo. Entonces también puedes meterte con el posicionamiento aquí mismo y probarlo diferentes posicionamientos y ver cómo funciona ahí. Puedes elegir el tamaño y cómo funciona esto. Te recomiendo simplemente jugar con estos y ver qué funciona mejor para tu sitio. Nuevamente, hay muchos atributos diferentes en el Editor de estilos y cada tema tiene sus propios atributos. Entonces esto es realmente algo con lo que solo juegas un poco y te diviertes un poco. Siguiente aquí está el ancho del sitio, y como verán, a medida que hago esto más pequeño, todo el sitio web empieza a hacerse un poco más pequeño y todo se vuelve un poco más estrecho. Entonces algo otra vez, sólo para mirar hacia fuera y otro atributo. Muchos de los atributos tienen estas habilidades de deslizamiento con ellos. De nuevo, ya pasamos por el ajuste de Canvas ahí mismo. Tienes esta oportunidad para un compensaciones de Canvas. Ya verás que crea esta brecha aquí arriba en la parte superior. Tienes este relleno de Lona. De nuevo, verás cómo esto, básicamente lo que esto está haciendo es agregar relleno aquí mismo. De nuevo, algunos de estos simplemente se meten con ellos y verás qué está haciendo exactamente cada uno de estos atributos. También ten cuidado porque a veces está afectando más de una cosa en tu sitio. Por ejemplo, el relleno afectó la navegación arriba arriba, pero también la afecta aquí abajo también. Puedes elegir un tamaño de borde para tu Lienzo. Empezarás a ver aparece este borde. Anteriormente tenía cero píxeles, pero ahora tengo este borde, que de nuevo, no quiero del todo. Entonces nos desharemos de eso. Tienes esta cosita, esta pequeña barra de marcas justo aquí entre la navegación se llama el delimitador. Puedo esconderlos si quiero. O puedo cambiarlos y los haré de color rojo brillante. Se puede ver ese delimitador, esa pequeña barra entre los elementos de navegación se volvió roja. Pero eso también vincula directamente a nuestra línea horizontal aquí abajo, que también se vuelve roja. 35. Uso del editor de estilo pt 2: Pocas cosas más podemos trabajar con el fondo del encabezado y otra vez, vamos en realidad esto sería un atributo que tenemos que cambiar algunas cosas para ver. Pero si recuerdan, detrás de estas imágenes tenemos este color gris justo aquí. Y si no quiero que eso sea gris y quisiera ser rojo brillante. De nuevo, eso se ve terrible. Pero otra pequeña característica aquí o puedo hacerlo blanco o un puñado de cosas. También puedes hacer una imagen de fondo de encabezado, por lo que esta se convertirá en la imagen predeterminada o tal vez en una textura que pongas ahí. Puedo cambiar los colores del título del sitio. De nuevo, tal vez no quiero ese título del sitio aquí en realidad, lo siento eso está mal. Este color del título del sitio, en realidad lo será, y entonces vamos a volver aquí arriba ahora y arreglar ese pequeño ancho ahí mismo porque en realidad nos gustó y nos gusta en este look mucho más. Tenemos el color del título del sitio y así aquí mismo se puede ver estoy cambiando el sitio web sin textos de código, y el color ahí mismo. Pero también tenga en cuenta que si suben un logo, cual les mostraré un poco más tarde cuando entre en el diseño del sitio. Si subo un logo que realmente reemplazará el texto aquí mismo y entonces el color del título del sitio en realidad se vuelve irrelevante a menos que el logo no se cargue. Puedes elegir un color hover para ello, que de nuevo estoy en modo de vista previa por lo que no lo puedes ver, pero puedo hacer que funcione cuando pasas el cursor sobre eso cambia el color. Aquí tenemos el título de la página, y vas a notar dos atributos. Te vas a notar el título de la página y el color del título de la página. A menudo, siempre que estés mirando algún atributo de fuente real, obtienes estas diferentes múltiples cosas básicamente puedes elegir el color. De nuevo, si quería que esto fuera rojo o blanco lo dejaremos en blanco sólo porque eso funcione. Entonces también tenemos este menú desplegable para el título de la página. Aquí, cada vez que hacemos esto, esto es algo común, vas a ver esta pequeña ventana de texto en cualquier momento que elijas un elemento de texto. Entonces lo primero que ves es el nombre de la fuente, el estilo, el tamaño de la fuente, la altura de la línea, transformación del texto y el espaciado entre letras. Cambiemos esto realmente rápido y vamos a pasar de Proxemi ANOVA a Josefin Sans. Ahora voy a hacer Open Sans Joseph Sans es una fuente que me gusta muy femenina bonita fuente. Open Sans es otro realmente bueno que uso mucho. Entonces elijo Open Sans y puedes ver el cambio de fuente aquí mismo. También puedo elegir lo gruesa que quiero que esta fuente sea conseguir realmente súper gruesa con ella, y audaz si quiero. Puedo cambiar el tamaño de la fuente, puedo cambiar la altura de la línea parece que está haciendo mucho aquí pero realmente no lo es. El alto de la línea es la altura entre línea, así que en realidad lo demostraré en el otro contenido más adelante y podrás ver un poco más de lo que realmente está pasando. Text Transform, puedes hacer todos los mayúsculas si quieres o puedes poner todo en minúsculas. También tienes este espaciado entre letras, así que tal vez queremos este texto de bienvenida realmente espaciado. Podrás ponerte experimental y divertirte un poco ahí. Esos son algunos de los atributos básicos en torno a la edición de fuentes y vas a volver a ver esa ventana te voy a mostrar bastantes veces. Tagline del sitio. De nuevo, en realidad no estamos viendo aquí el atributo tagline del sitio. Entonces tienes el espaciado del área de pancarta y este es otro que es único para cinco. Nuevamente, no todos los temas van a tener esto, algunos de estos podrían tener diferentes opciones. Pero puedo bajar aquí y puedo empezar a hacer enorme la pancarta. O puedo subir aquí, y hacer que el banner sea realmente pequeño y realmente puedo empezar a experimentar y divertirme con esto. Algo que notarás si recuerdas a mi Jake Jorgovan.com tal vez debería pop justo por aquí. Estoy usando cinco pero en realidad no estoy usando el banner en absoluto, literalmente tengo el banner establecido en cero y cambiaré otro atributo el cual te mostraré en un momento. Realmente me deja tener este sitio web limpio, minimalista y hacer eso sin tener que preocuparme por tener aquí el banner o tener un banner en cada página. De nuevo, vamos a simplemente seguir bajando, y verás que esto está puesto en cero, pero por otro atributo realidad sigue ahí y te mostraré cómo arreglarlo cada vez que llegue ahí abajo. Tienes este color de superposición en el banner. Por defecto, esto es algo que verás en muchos temas como superposición y esto me lleva a otra cosa. Eso es básicamente que esta imagen tiene esta superposición sobre ella y así puedo hacerla roja, podría hacerla verde si quisiera. Ahora mismo es solo gris por lo que es un poco gris y se puede leer la fuente. Algo que vas a notar, vas a ver este A y el 0.2 que es la opacidad. Entonces si empiezo a arrastrar eso hacia la derecha, la superposición literalmente se convierte en un color sólido a uno. Entonces si vengo todo el camino hacia abajo a la izquierda, puedo hacer que esa superposición sea cero. O si no quiero la superposición, solo puedo hacer clic en transparente, y ahí solo vemos la imagen sin ninguna superposición en absoluto. Nuevamente, ahora verás que en muchos temas diferentes como opción de superposición. Un ancho de texto de banner otra vez esto es algo que puedes hacer con este texto de banner aquí. Si tienes algo realmente largo puedes elegir qué tan amplio quieres que sea. Entonces un contenido de banner, este es el atributo del que hablaba anteriormente. Ahora mismo, estás viendo que tengo el título de la página, también puedo cambiarlo para decir el título del sitio o el logotipo en tagline. Ahora bien, no tengo un logotipo aquí arriba pero en su lugar flota sobre esta imagen, o si elijo vacío, entonces lo que pasa es que el título de la página no aparece en absoluto. Si vuelvo aquí a la altura del área de pancarta, literalmente puedo hacer que esa pancarta desaparezca. Ahora no tenemos ese banner en absoluto, sólo literalmente tenemos la navegación y este sitio web. Entonces es cosa realmente genial si quieres un sitio web básico, no quieres preocuparte por todas las demás cosas, solo puedes deshacerte de eso. Otra cosa que notarás, solo te mostraré esto ahora. Es que cuando muevo el ratón por aquí, las secciones pequeñas se vuelven azules o veo líneas punteadas o algo así. cualquier lugar donde haga clic, me va a mostrar de inmediato ese atributo, que veas que hay un espacio entre la navegación y donde empieza esta página, y eso es porque he establecido el espaciado de mi página en 100. O tal vez no quiero 100, y quiero que esto se siente un poco más cerca de la parte superior, y quiero sentarme unos 24 píxeles hacia abajo. De nuevo, solo pude hacer click en eso y acabamos de ajustar eso ahí mismo. También puedo hacer clic en el logo aquí arriba, y de nuevo puedo cambiar el título de este sitio, color o algo por el estilo. Puedo cambiar la fuente aquí mismo a la que llegaré en esa lista. Pero esto es realmente genial lo que puedes simplemente dar clic y editar cosas diferentes. Si alguna vez quieres volver a la lista maestra, solo tienes que hacer clic en mostrar todos, y aquí estamos de vuelta en nuestra lista maestra normal. Entonces te está mostrando mucho, como puedo ver espero que lo estés tomando, esta es una herramienta realmente poderosa. De nuevo, si te abruman, solo te animo a sumergirte en, y empieces a jugar con todo y cambiar diferentes opciones y probarlo porque cada tema tiene sus propias cosas individuales. 36. Uso del editor de estilo pt 3: Lo siguiente que te mostraré es el fondo de navegación. Pero en realidad ¿sabes qué? Antes de seguir ahí, realmente quiero una pancarta. Yo quería demostrárselo para ustedes, pero me gusta esta foto y la voy a dejar. Saltando de nuevo a esto sin embargo, el fondo de navegación. Digamos que quiero que este fondo de navegación sea rojo. Ahora acabo de poner en rojo la navegación. Eso es algo realmente útil ahí. Pero de nuevo, no me gusta cómo es esto justo aquí. En realidad me gustaría que este fuera el sitio completo. De nuevo, si volvemos aquí abajo y hacemos el ajuste de Canvas, si lo hacemos de ancho completo, repente todo va de nuevo todo el camino al completo con del sitio web. También me voy a deshacer de este relleno aquí arriba, este offset de Canvas que empecé inicialmente. Oye, esto empieza a parecerse un poco más a una página web. En realidad no quiero un fondo rojo, así que voy a volver aquí abajo. Estaba saltando un poco, mostrándote un puñado de cosas diferentes, esperando que esto te dé una idea de cómo editar cosas. Nombre del sitio, si quiero cambiar esta fuente, nuevo, obtengo este menú desplegable. Salta eso a Open Sans. Quieres espaciar un poco esas letras y tal vez hacerlas realmente delgadas. Sí, mira eso. Entonces vamos a bajar, podemos ir a las fuentes de navegación. Esa es en realidad esta fuente sobre los elementos de navegación. Eso cambiaremos a Open Sans también, y ves que esa fuente acaba de cambiar. Nuevamente, tengo todas esas mismas opciones. Podemos espaciar estos hacia fuera. Diviértete con eso también. Puedo cambiar el color del enlace, el estado de desplazamiento del enlace, el enlace activo. El color del enlace es solo por defecto que son grises, este color gris justo aquí. Voy a cambiar estos. El color del enlace, ahora mismo tengo como rojo pero esto es rosa. Haré el color hover como verde, solo mucho para fines demostrativos. Haré el color activo como azul. Lo que verás aquí es que los enlaces son de color rojo nativamente, eran naturalmente todos rojos, entonces estoy en la página de bienvenida por lo que la página de bienvenida se vuelve azul. De nuevo, no va a hacer esto mientras está en el editor de estilos pero si pasaba el rato, se pondría verde. De nuevo, no la más bonita, pero sólo estoy tratando de demostrar y mostrarles algunos elementos ahí. También tenemos este espaciado de navegación. De nuevo, esto es otra cosa que puedes notar, es que ver esas líneas azules mientras yo rondo por aquí, mira aquí arriba y verás estas líneas azules. Al pasar el cursor sobre este espaciado de navegación, esas líneas azules aparecen y me muestran lo que estoy a punto de hacer. A medida que empiezo a aumentar el espaciado de navegación, empiezo a ver que esto pone relleno en la parte superior y la inferior o puedo hacerlo realmente diminuto así. Entonces vamos a volver a trabajar también con la posición de navegación. ¿ Queremos esto por encima de la pancarta o podemos poner esto debajo de la pancarta? A lo mejor simplemente no queremos navegación en absoluto y solo queremos este sitio web limpio y sencillo sin la navegación, podría funcionar para un sitio web de una página, probablemente no mucho más. De nuevo, dejaremos eso ahí. También podemos elegir, ¿queremos la navegación a la izquierda, al centro o a la derecha. Notarás que con algunos de estos iconos de redes sociales se ajustan para encajar en consecuencia. 37. Uso del editor de estilo pt 4: Para fines demostrativos, acabo de montar estos tres rubros. Fui y añadí estos aquí, y lo que ves es un rumbo 1, un rumbo 2, y un rumbo 3. Por aquí en el editor de estilos, bajo contenido principal, vas a ver secciones para el encabezamiento 1, el encabezamiento 2, el encabezamiento 3, y el texto de tu cuerpo. Recuerda en el video de la fuente donde expliqué que así es como se configuran los sitios web con estos atributos de encabezamiento. Bueno, si quiero lo que puedo hacer, es solo entrar aquí y puedo cambiar esto a Open Sans o cambiar la fuente, y aquí este cambio es bajo mi rúbrica 1 atributo justo aquí. En cualquier lugar del sitio que tenga un encabezado 1, lo va a cambiar automáticamente para que coincida con estos atributos y coincida con el estilo. Lo mismo con el rubro 2. No queremos que esto sea amarillo, pero queremos que sea verde loco. De nuevo, podemos pasar y simplemente cambiar estos atributos de rúbrica 2, y eso va a cambiar eso todo el camino a través de la página web. De nuevo, vamos a hacer eso también en el rubro 3. Cambia eso, tal vez queremos que eso sea un poco más grande, y puedes trabajar también con cada uno de estos atributos, y vamos a golpear “Mostrar todo” para volver a todos ellos. Pero como les dije antes en un principio, los sitios web y la web en general están diseñados alrededor de estas opciones de encabezamiento, y así cuando se crean estos tres, básicamente sólo van a hacer, encabezamiento 1 debería ser el más grande, encabezamiento 2 debería ser el segundo más grande, y el encabezamiento 3 debe ser el más pequeño, y luego solo usas esos en todo tu sitio, dondequiera que los veas encajar. Ahora te mostraré algunas otras cosas bajo el contenido principal. Puedes cambiar tu fondo de lienzo, que esto es lo que en realidad pensarías que sería un fondo de sitio. Pero tu fondo de lienzo es en realidad el fondo de tu página. Entonces la página real donde se encuentra todo tu contenido. Dejaremos ese blanco. A lo mejor quieres tu Sitio web negro, para que así puedas hacer eso también y hacer todo tu texto blanco si quieres. Vamos a bajar aquí entonces, te voy a mostrar el texto corporal. El texto corporal es tus fuentes básicas y el texto de tu sitio web normal. Nuevamente, puedo cambiar esto a Open Sans, vemos que todo reflejado aquí, puedo cambiar el tamaño de la fuente si quiero, puedo cambiar la altura de la línea, y esto traté de demostrar antes, pero la altura de la línea es cuánto espacio hay entre cada línea. De nuevo, lo tienes revuelto, o muy grande, o algo bonito en el medio. También puedes hacer el espaciado entre letras, y eso podría resultar un poco difícil de leer, pero puedes espaciar esas fuera si así lo deseas. Puedes cambiar el color del texto del cuerpo, otra vez tal vez querías este rojo, o algo así, y luego tu color de enlace, haremos este celeste. Lo que verás aquí es el enlace ver mi portafolio por aquí. ¿ Recuerdas cómo teníamos eso configurado como enlace? Bueno ahora acabamos de poner ese azul, y así ahora todos saben que eso es un eslabón. A veces esto es algo en lo que pensar, pero a mucha gente le gustan estas fuentes delgadas realmente pequeñas, que es lo que tengo aquí. Pero hace que sea realmente difícil ver estos cambios de color y honestamente leer de alguna manera. Entonces si me toco eso un poco a 400, repente este color de enlace está mucho más definido y todo es en realidad un poco más fácil de leer. Yo también puedo elegir el color hover. Muchas veces lo que puedes hacer es hacer que el color de flotar en un estado ligeramente más claro. Entonces de esa manera fue un pequeño cambio, pero no es drástico. Si tuviéramos una cotización de bloque, recuerda cómo hicimos la cotización de bloque antes en un pequeño bloque de cotizaciones, puedes cambiar la fuente en esos y cambiar el tamaño de fuente y todo lo que hay también, y puedes editar tu espaciado de página es el último aquí que te mostré justo aquí arriba y trabajamos con antes. Tu espaciado de página es qué tan lejos entre la parte superior del sitio y tu contenido, cuánto espaciado este entre ahí. Una última cosa que te mostraré antes de seguir en esta lista, es una lista grande, lo sé, pero estamos abriendo paso, es que si quieres editar botones, te mostré antes en un video anterior cómo hacer botones. Si haces clic en “Ver mi cartera”, en realidad puedes empezar a cambiar el estilo de los botones. Entonces tenemos el sólido, o tenemos un estilo de contorno, o este estilo elevado. En realidad nos vamos a quedar con sólido por ahora. Pero quizá no nos guste esta aburrida plaza, queremos una redondeada. Te das cuenta de esos colores es sutil pero el redondeado, o tal vez queremos este look oval píldora, y tal vez quiero que mis botones sean verdes, así puedo cambiar el color de los botones también. También puedo cambiar el color del texto también. Entonces tal vez si quiero ese texto rojo o negro y que se vea horrible y navideño, pero lo dejaré como blanco. Incluso puedo cambiar la fuente en ella también. Para que puedas conseguir una melodía realmente fina aquí y trabajar en estilizar tus botones también. Voy a volver a mostrar todo y seguir bajando el editor de estilo con los chicos. Desplázate hacia abajo, hemos hecho el contenido principal , hemos hecho la navegación, ahora vamos a ir al pie de página. En realidad no les he mostrado cómo editar. Ahora vamos a hacer el pie de página, y lo que vamos a hacer aquí básicamente no es el pie de página, realidad sólo tienes un puñado de opciones, pero puedes cambiar el texto aquí abajo. Si quieres, de nuevo, un texto diferente, puedes cambiar el estilo, todas esas cosas. Nuevamente, muy normal y lo puedes alinear a la izquierda, al centro o a la derecha. Entonces también por naturaleza, vas a notar este pequeño borde de pie de página justo aquí. Vamos a básicamente, si quieres, solo puedes deshabilitar eso, y de repente no hay frontera entre el pie de página y el fondo. Puedes elegir tus iconos sociales en el pie de página y qué tan grandes quieres que sean esos tipos, que ahora se está ajustando. Eso podría ser aquí arriba. Lo siento, ya no estamos en el pie de página. Estos son los iconos sociales que se construyen en el tema de los cinco, y los iconos sociales que están aquí abajo, en realidad se construyen a través del widget de íconos sociales, así que lamento confundirte ahí. Puedes cambiar el color de estos iconos si quieres, hacerlos de color rojo brillante. Nuevamente, puedes elegir el estilo y cómo quieres que se vean esos. Entonces al igual que lo hicimos antes, y entonces también puedes elegir si las quieres en la parte superior solo, en la inferior solamente, en la parte superior e inferior, o para ocultarlas. Si los ponemos en la parte inferior, vas a notar que esto aparece, y esto es un poco diferente a esto de aquí abajo, porque se trata de un bloque de escuarespace. Esto de aquí está realmente integrado en el tema. A continuación, vamos a bajar aquí al blog. En realidad, voy a volver con este tipo en el futuro, una vez les muestro el capítulo de blogging y tenemos eso configurado. Entonces el último aquí otra vez, tienes tus bloques de botones también. Observe cómo dice medio aquí mismo, esto sólo está mostrando el medio porque este es el único tamaño de botón que he construido. Pero si también tienes un botón pequeño y un botón grande, puedes peinarlos de manera diferente también. Para que te lo puedas maquillar. Puedes tener tu botón pequeño para ser rojo y tus botones medianos para ser verdes. Nuevamente, mucho aquí, mucho que te acabo de mostrar, y sé que parece abrumador, pero en la siguiente sección o en la siguiente área, siempre que empiezo realmente a pasar por el diseño del sitio web, mucho que te acabo de mostrar, y sé que parece abrumador, pero en la siguiente sección o en la siguiente área, siempre que empiezo realmente a pasar por el diseño del sitio web, creo que llegarás a ver esto en uso mucho más. Llegarás a ver algunos ejemplos del mundo real con él, pero en realidad, solo necesitas jugar con esto. Necesitas tener un ojo decente para el diseño, y simplemente meterte con cosas diferentes, y creo que te impresionará con lo que te has ocurrido. 38. Cómo configurar un blog: Una de las características más poderosas de Squarespace es la plataforma de blogs. Es realmente robusto y realmente sencillo de usar. En este video, te voy a estar mostrando cómo configurar e iniciar tu propio blog. Para empezar, vamos a volver aquí a la pestaña de páginas, y vamos a llegar a nuestra navegación principal, y vamos a golpear este ícono de “Plus”. Vamos a desplazarnos hacia abajo al blog y hacer clic en “Blog”, y vamos a dar título a este blog y mantenerlo bastante directo y sencillo. Ahora, lo que verás es que esto va a aparecer y llevarnos a esta página de blogging, que verás tiene esta barra lateral. Te mostraré cómo trabajar con eso en un segundo. Entonces por aquí a la izquierda tenemos este tipo de gestor de blogs donde veríamos todos los borradores, revisión, y programados. Entonces lo que queremos hacer para simplemente crear primero una entrada de blog es hacer clic en este botón Añadir Post. Cuando añadamos publicaciones, va a abrir esta ventana del editor de publicaciones en esta ventana Editar Post. Vamos a decir Nuevo blog 1. Este es nuestro título aquí abajo en el texto, y yo digo: “Este es un blog totalmente nuevo”. De lo que vas a notar sin embargo, esto es lo que me encanta de la plataforma de blogging es que tienes al editor completo. Se puede poner en cualquiera de estos bloques de imagen, se acaba de poner en una imagen, o una galería, o un video, cualquier cosa por el estilo. Puedes fácilmente simplemente enchufar esto todas esas mismas características directamente en una entrada de blog y eso lo hace genial y realmente, realmente fácil de usar. Algunas cosas básicas ahí puedes de nuevo, solo haz todo un blog posts lo que quieras. Usa una imagen, usa todos los widgets, y todo lo que hay ahí dentro. Entonces realmente, muy útil herramienta para tener, tienes el mismo editor de texto básico y todo aquí arriba. Todo esto funciona muy similar a lo que te he enseñado en videos anteriores. Ahora, una vez que tengas escrito tu blog y tienes todo aquí arriba. Tendrás que ir por aquí y venir a la sección Opciones, y vas a tener algunas cosas aquí bajo esta pestaña Opciones. En primer lugar, vas a tener una imagen en miniatura, y así vamos a venir aquí y solo subir una imagen en miniatura para un post. Esto de nuevo sólo va a ser la miniatura básica, algunos temas tirarán de esto y usarán esto como parte del diseño. Otros no lo harán, pero estas cosas como el bloque de resumen como te mostré antes que jalará esta imagen en miniatura. Ahora bien, no tienes que tener una imagen en miniatura, pero es recomendable o si quieres tenerla en ese tipo de diseño de tu sitio. También tenemos esta sección de URL post por aquí. Esto es realmente útil para la optimización de motores de búsqueda porque tu URL, así que por ejemplo, esta etiqueta que tenemos justo aquí es tu URL. Esto es lo que realmente estamos poniendo en esa caja ahora mismo. Tenemos el jake-jorgovan/blog buscar el nombre de la entrada. Vamos a decir, nuevo-host-número-1. Podemos teclear eso aquí. Se puede cambiar el autor. Por lo que si tienes múltiples perfiles en tu sitio de Squarespace, puedes cambiar a ese autor. Puedes usar la URL de origen si dices, simplemente poniendo algo ahí dentro como fragmento de otro sitio puedes enlazar con la fuente. Entonces tienes un extracto. Este es el extracto, no puedo deletrear extracto. Si recuerdan cuando estábamos trabajando con el bloque de resumen, había esa opción para extractos y ahí estaba ese texto, ese resumen del post. Eso es lo que esto es, e incluso iré a mostrarte en mi sitio. Aquí tengo listado de todas las entradas de mi blog y estos pequeños blurbs debajo de él, estos son los extractos que tengo. No son el post completo, pero son un teaser, y luego la gente puede hacer clic y leer más, y luego pueden ver el post completo y todo aquí. Nuevamente, los extractos son útiles en una función de blogging y también para el bloque de resumen. Si también recuerdas, en el bloque de resumen mencioné las habilidades de posts destacados. Si lo desea, puede marcar algo como publicaciones destacadas si lo desea. Entonces sólo nos vamos a ir y te voy a mostrar algunas otras cosas. Puedes etiquetar una ubicación con tu post si quieres. No tienes que hacerlo, pero si tal vez eres un blogger de viajes, eso podría ser de interés. Puedes publicar automáticamente posts en redes sociales, que probablemente no quiero publicar esto en mi Twitter o mis seguidores me odiarían porque los estaría publicando a nada, no voy a hacer eso. Pero puedes hacer que esto se publique automáticamente tus diferentes cuentas de Twitter o en tus cuentas de Facebook o algo por el estilo. Entonces una última cosa que quiero mostrarles, vuelta aquí en la pestaña de contenido son las Etiquetas y Categorías. Si simplemente bajas aquí y haces clic en “Categorías”, puedes elegir crear una categoría. A lo mejor voy a decir negocios, y voy a decir fotografía, y podría tener otra categoría para el arte. Tus categorías no son enormemente importantes, pero si quieres que alguien pueda buscar en tu sitio, puedes hacerlo. Puedes enlazar dos categorías o puedes usar el bloque de resumen, como recuerdo, te mostré antes del diferente filtrado con etiquetas y categorías. Eso también se puede hacer. Entonces también tienes este atributo Tags, y este es otra vez otro lugar realmente importante donde puedes poner palabras clave de optimización de motores de búsqueda aquí, y eso es útil. También puedes poner otras cosas por las que tal vez quieras categorizar el post por. Entonces tal vez Tailandia, o la ubicación, o algo por el estilo. De nuevo, estas etiquetas y categorías cuando comienzas a construir un blog realmente grande con mucho contenido, pueden ser realmente útiles para empezar a filtrar y reducir tu contenido. Cuando termines, puedes bajar aquí, y puedes presionar “Guardar” y aparecerá en modo borrador, o puedes pulsar “Guardar y publicar”, y se publicará en tu sitio web. Entonces le pegué a “Guardar y publicar”, y aquí vamos, tenemos Nuevo blog 1 aparece justo aquí. nuevo blog 1 y este es un blog totalmente nuevo. Entonces sí, podemos ver sólo un poco aquí de lo que está pasando. Pero en última instancia, no quiero esta barra lateral. Realmente no me está gustando esto. Entonces hay algunas cosas que puedes hacer. En primer lugar, si dices que sí quieres dejar de lado en tu blog, quieres algo por aquí que la gente pueda optar por una dirección de correo electrónico o algo así. Simplemente puedes desplazarte y pulsar “Editar” en tu barra lateral. Simplemente puedes eliminar el contenido de ejemplo que hay aquí, y de nuevo, esto funciona igual que todas las demás cosas que te mostré. Simplemente puedo arrastrar y eliminar estos al igual que el editor visual, pero ahora solo estamos lidiando con una barra lateral, por lo que solo se acumula verticalmente. Puedes poner texto aquí, “Regístrate para mi lista de correo”, o cualquier cosa que te gustaría aquí. Ahora tenemos esta barra lateral, y podemos editar eso si queremos. El cool de la barra lateral es que aparecerá sin importar si estás en la entrada, o si solo voy a la página del blog. Si notan cuando desplácese por la página del blog, veo el extracto, y la miniatura, y luego cuando voy a Read More, veo que este es un blog totalmente nuevo y el texto real de él. Pero la barra lateral se queda ahí sin importar, porque básicamente he dicho que quiero barra lateral en mi blog. Bueno, ¿y si no quiero una barra lateral en mi blog, cómo consigo que eso desaparezca? Para ello, cuando estés de vuelta aquí en la configuración del blog, vas a hacer clic en tu pequeño cambio de marchas al igual que agregarías una configuración de página. Voy a desplazarme hacia abajo y tengo estas opciones de mi blog similares a la configuración de página, pero algunas cosas diferentes. Vamos a ir al diseño de página, y podemos ir a Split Sidebars si queríamos, o podemos ir a Two Sidebars, empeorar o Full Width. También podemos elegir cuántos posts por página, podemos agregar una descripción, cambiar la babosa si queríamos, y también podemos añadir una imagen en miniatura. De nuevo, no te mostraré todos estos. El post por dirección de correo electrónico que puede o no querer usar, pero todas estas cosas son solo herramientas muy simples que puedes usar para personalizar. Pero si tengo Full Width hit y golpeo “Save”, y esos se actualizará y ahora no hay barra lateral en el blog. Otras cosas que quiero mostrarles chicos. Si llegas a avanzado en el blog, puedes venir aquí a editar tus etiquetas y categorías. De nuevo, probablemente nada de lo que te vas a preocupar demasiado en esta etapa temprana, pero tal vez cuando te estás haciendo un poco más grande, y luego la sindicación, y probablemente tampoco te vas a preocupar demasiado por eso. Entonces así es como configuraron un blog en Squarespace, pero como les prometí antes, necesitaba mostrarles cómo darle estilo a su blog también. Si volvemos aquí, y vamos todo el camino Inicio, y vamos al Editor de Estilo. Diseño, Editor de Estilo. Notamos que en realidad tenemos toda esta sección aquí abajo dedicada solo hacia peinar un blog. primero que podemos hacer es que tenemos este metatexto, cual se nota la fecha y todo esto aquí abajo es meta texto. De nuevo, puedo cambiar la fuente, tamaño del color, y cosas así. Puedo cambiar el color si quería o hacerlo realmente ligero. Puedo meterme con eso. Tienes espaciado de artículos, que otra vez, no vas a ver esto demasiado porque solo tengo un artículo. Pero por ejemplo, en el mío ese espaciado de artículos crearía más espaciado entre cada una de estas publicaciones en la página aquí. Lista de blogs Display, puedes elegir entre completo o solo encabezado y pie de página, o tal vez incluso solo el encabezado solo sin los metadatos. De nuevo, puedes elegir si quieres ese cuadro ahí dentro o no. Puedes elegir el Blog Byline. Ya sea que quieras eso en la parte inferior, en la parte superior, o tal vez solo asumo, oye, este es mi sitio, todo el mundo va a saber que soy yo y lo voy a ocultar. Puedes elegir la línea de fecha del blog, y puedes elegir si quieres eso arriba, abajo, o simplemente ocultarlo. El Blog Paginación. Por lo que paginación esto sería cuando golpeas sobre esos 20 posts y tiene el siguiente o anterior. Puedes cambiar tu fuente ahí mismo en tu color. Entonces te mostraré aquí mismo. Cuando me desplaza hacia abajo hasta la parte inferior de mi blog, esta es la paginación aquí mismo, y así puedo cambiar esta fuente o el color si quisiera. También puedo desactivar un borde en eso si quiero. Normalmente sólo hay un pequeño borde ahí abajo. Nuevamente, puedo ocultar las miniaturas si quiero, puedo ocultar estos iconos, y solo puedo ocultar las categorías de etiquetas si me gustaría. Para que pueda empezar a ponerme realmente simple con esto y todo. Pero realmente me puedo personalizar aquí con cómo quiero que se vea mi blog y los estilos que hay a su alrededor. Entonces espero que eso haya sido de ayuda para darte un poco de idea de cómo configurar un blog en Squarespace. 39. Acerca de la plataforma de blogs de Squarespace: este punto del curso, has aprendido a configurar tu sitio de Squarespace, a agregarle contenido y ahora a estilizarlo y diseñarlo. Ahora voy a sumergirme en algunas de las otras características que son realmente importantes para muchos usuarios de sitios web. En esta sección, voy a hablar específicamente de bloguear. Squarespace tiene una plataforma de blogging de uso extremadamente robusta y simple. De hecho, lo uso en mi propia página web personal y me encanta absolutamente. En este curso te voy a mostrar cómo configurar un blog, cómo agregar nuevas entradas de blog y todo lo que puedas hacer en torno a la plataforma de blogueo de Squarespace. 40. Uso del bloque de productos de comercio electrónico: En este video, voy a empezar a mostrarte y a darte un resumen básico de la sección de comercio electrónico. Para empezar, para llegar al e-commerce, vamos a venir y hacer clic en “Commerce' desde nuestra navegación principal aquí. Siempre que inicies una nueva cuenta de comercio, lo primero que realmente vas a querer hacer es hacer clic en esta pestaña de “Introducción”. Te darás cuenta de que tengo un cero de las cuatro opciones de configuración de Getting Started. Cuando pasemos, básicamente vas a ver estas cuatro opciones que necesitas hacer para que tu tienda de comercio electrónico comience. En primer lugar, vas a necesitar obviamente agregar algunos productos. El segundo es que vas a necesitar crear alguna opción de envío. El tercero es que vas a tener que conectar una cuenta de Stripe. Eso es algo sólo para tener en cuenta que Squarespace sólo se integra con raya. Pero, si dices que están teniendo problemas o quieres integrarte con PayPal o alguna otra solución de pagos, existe esta otra gran herramienta llamada Ecwid. Yo recomendaría mucho mirar en esto si esa raya es un rompetrato para ti como sé que es para algunas personas. Pero honestamente, la raya no es un gran negocio es igual que PayPal. No hay cuotas mensuales ni nada. Es realmente genial trabajar con. Una vez que tengas configuradas estas otras opciones, puedes voltear el interruptor y tu tienda puede salir a vivir. Ahora, también note que tienen un montón de artículos útiles aquí abajo. Definitivamente recomendaría echar un vistazo a estos ya que comercio electrónico es una de las secciones más complejas de squarespace. El comercio electrónico en general es simplemente complejo. Entonces no es culpa de Squarespace, sino sólo que es algo más complejo de hacer en la web. Lo primero que vamos a querer hacer es simplemente agregar algunos productos. Para ello, vamos a hacer clic en este número uno y añadir algunos productos. Lo que vas a notar es que es muy similar a la función de blogging y cómo funcionó eso. Recuerda cómo teníamos la misma opción por aquí. Bueno, aquí en lugar de añadir una entrada de blog vamos a añadir un producto. Una vez que hagamos eso, nos va a dar esta opción para seleccionar un tipo de producto. Puedes elegir un producto físico, tal vez algo físico que realmente vas a enviar por correo a la persona. Se puede elegir un producto digital. Si dices, vendiendo un e-book o un curso digital, puedes usar esto y te dará algunas opciones para descargas de archivos una vez que paguen. O puedes vender un servicio y tal vez pueda vender un servicio de consultoría o un producto que atiendo con esto también. Vamos a seguir adelante y apenas empezar con lo digital para hacerlo sencillo. Lo que vamos a hacer aquí es venir y, vas a notar que, nuevo, es similar a la funcionalidad del blog pero un poco diferente. Vamos a tener el nombre del producto, El Creador Enfocado. Vamos a subir algunas imágenes para ese producto. Aquí una vez que tengamos una foto, vamos a subir esta foto del producto. Podemos fijar un precio a este producto si queremos, o podemos dejarlo en cero y mantenerlo libre. Este es un e-book gratuito que escribí, así que lo mantendré como libre. Podemos poner una breve descripción, “Aprende el arte del seguimiento y lograr tus objetivos”. Aquí tenemos básicamente configurar la imagen básica, descripción, y el título. Ven aquí, podemos categorizarlos y etiquetarlos. Nuevamente, si tienes muchos productos, esto se vuelve realmente útil. Para que la gente pueda decir, quiero buscar todos tus libros. Yo quiero buscar en todos tus cursos, tus camisas, eres pantalón, sin embargo quieras hacer eso. Puedes etiquetarlo. Nuevamente, he hecho algunas tiendas de comercio electrónico donde la gente lo etiquetó por color o por cierto tipo de estilo. Algunas cosas que puedes hacer en torno a eso también. A continuación, vamos a venir a la fijación de precios y subir. Aquí puedo subir un archivo PDF o cualquier archivo digital que alguien pueda descargar. Una vez que tengamos ese archivo, solo hacemos click y subiremos eso. Aquí sólo va a subir ese archivo. Cuando alguien lo compra o hace clic en “Comprar”, le va a dar una opción para descargar ese archivo. Entonces solo veremos que eso subirá ahí mismo, y luego tenemos nuestro producto digital ahí arriba y en nuestro sitio. Se puede ver final The Focusing Creator en todo al respecto ahí mismo. Puedes venir a info adicional. Si queremos, podemos poner información adicional aquí. Esto no es sopa totalmente necesaria, pero en la página de ventas verás eso. Podemos tener un formulario y se pueden requerir elementos de ellos. A lo mejor quiero que alguien haga un formulario llamado El Creador Enfocado formulario de compra. A lo mejor quiero a alguien sólo su dirección de correo electrónico, y obtener eso de ellos cada vez que se inscriban. Además, algo en realidad no les mostré chicos en el video del formulario anterior, pero también se puede hacer clic requerido o no requerido cuando se trabaja con formularios para hacerlos obligatorios o no. Ahora, se requiere que alguien me dé su dirección de correo electrónico cuando descargue el libro. Puedo venir aquí y dos opciones. Puedo cambiar la URL de los productos. Puedo usar un add personalizado. Entonces en lugar de decir “Añadir al carrito”, quizá quiera decir “Descargar el libro”. Puedo elegir producto destacado o no que, de nuevo, cuando estás mirando el bloque de resumen, es importante para cosas como esa. Para tener en cuenta, también puede utilizar el bloque de resumen para cualquier característica de comercio electrónico también. Vuelve a referirnos a ese video de bloque de resumen y lo usamos para bloguear, pero también puedes hacerlo para el comercio electrónico. Entonces, por último, ¿quieres publicar esto en algún canal de redes sociales o no? No queremos, así que saltaremos en eso. Cuando terminemos, golpeamos “Guardar y publicar”. Solo vamos a darle click aquí mismo, es “Guardar y publicar”. Acabamos de crear nuestro primer producto. Ahora bien, esto no es realmente demasiado emocionante todavía porque realmente no tenemos este producto en ninguna parte de nuestro sitio. Acabamos de crearlo. Lo siguiente que tenemos que hacer es conseguir ese producto en nuestro sitio, y hay un par de maneras en que podemos hacerlo. En primer lugar, si regresamos todo el camino y vamos a las páginas, veremos que podemos bajar aquí y a la página de bienvenida. Baja aquí al contenido de nuestra página. Si quiero, puedo venir aquí, añadir un bloque, y desplazarme hacia abajo. Puedo agregar un bloque de producto. Buscaré el producto. Entonces buscaré El Creador Enfocado que acabo de crear. Ya veremos que eso aparece ahí arriba. Ahora, tengo todas estas opciones. Déjame mover esto para que ustedes puedan ver. Puedo encender o apagar la imagen, que sin ella realmente no hay nada ahí. Puedo tener el título y mostrar el precio, mostrar la descripción que creé, y mostrar el botón 'Añadir al carrito”, que por alguna razón que uno no está funcionando o mostrando correctamente en este momento, pero vamos a ahorrar independientemente. Acabamos de añadir nuestro primer producto a nuestra página. Ahora el botón “Agregar al carrito” no está funcionando. Intentemos quizá refrescarnos y ver si eso lo arregla. De nuevo, a veces consigues estos bichos en squarespace, así que solo voy a trabajar a través de ello con ustedes aquí mismo. Ahí está. No estoy seguro de por qué no aparecía antes, pero refresca la página y todo está arreglado. Acabamos de agregar nuestro producto. Si alguien hace clic en el producto, llevo algunos a la página de ventas, donde pueden pasar. Esta es esa información adicional que hemos puesto. Si voy a descargar el libro, alguien tiene que darme su dirección de correo electrónico y luego pueden descargar el libro. Esa es una pequeña configuración básica sobre cómo agregar productos al comercio electrónico, y luego cómo usar realmente el bloque de productos también. 41. Acerca de la plataforma de comercio electrónico de Squarespace: En esta sección del curso, te estaré guiando por cómo configurar una tienda de comercio electrónico en tu página web. Ahora, algunas personas pueden simplemente saltarse esto si no te interesa tener una tienda de comercio electrónico en tu sitio. Pero si lo eres, Squarespace lo hace realmente simple. En este video, te voy a mostrar cómo configurar y utilizar la plataforma de comercio electrónico. 42. Una descripción del comercio electrónico: En el último video, creamos nuestro primer producto. En este video quiero mostrarles un poco más sobre cómo crear más productos y luego nos sumergimos un poco más en el comercio electrónico. Si recuerdas, creamos ese primer producto a partir de la pestaña inicial de iniciación en el comercio electrónico. Una vez que hagas eso, te vas a dar cuenta de que si vienes aquí abajo, está este Nuevos Productos que se han presentado en tu sección no vinculada. Notarás que el pequeño signo $ significa que es un producto. Bueno, en primer lugar, probablemente no quiero esto llamado Nuevos Productos. Entonces lo que puedo hacer es hacer clic en este pequeño icono de engranaje aquí mismo, y puedo cambiar esto por solo Productos. Puedo deshacerme de la barra lateral si no quiero una barra lateral aquí, hazla de ancho completo en mis páginas de productos. Puedo cambiar esa babosa así que simplemente es Productos no Productos Nuevos. Nuevamente, muy similar a las otras, pero quieres hacer esto para la página del producto también. Ahora notamos que la página del producto es en realidad de ancho completo. En realidad, no, esta es la página del producto en general. Algo que puedes hacer, digamos, ponemos esto en la navegación principal, es que ahora si alguien solo hace clic en “Productos”, van a conseguir esta página de diseño de producto genial y guapo. A medida que agrega múltiples productos que se replicarán automáticamente a través de esos. Si solo estamos en la pestaña Páginas y hacemos clic en este Productos nos va a volver a llevar a este editor de tipo de blog similar donde podemos agregar más productos o hacer clic en “Configuración” y ajustar la configuración de este producto si es necesario. Eso es solo un poco de cómo ustedes pueden trabajar con más productos y crear más productos en el futuro. Ahora, vamos a bajar al comercio electrónico, y sumergirnos un poco más en esto. Cuando volvemos a la pestaña de Introducción, nos damos cuenta de que de nuevo sólo hemos completado uno de cada cuatro. Vamos a ver que necesitamos crear una opción de envío si vamos a vender bienes físicos. De nuevo, por ahora mismo, si solo estoy vendiendo un producto digital, realmente no necesito eso. Puedo pegarle saltar si quiero. Pero si necesitas enviar algo, quieres golpear esto y Ingresa en toda tu información de envío. Entonces en tercer lugar, si solo haces clic en esto, conectarás tu cuenta de Stripe, y una vez que hayas hecho los tres o hayas golpeado Skip te va a dar esa opción de dar la vuelta al interruptor y salir a vivir. Ahora una vez que estés en vivo, vas a notar que esta página de comercio se convierte en el hub y el hogar para todo tu comercio de todo en tu sitio. Si voy a pedidos, puedo entrar aquí y ver mis pedidos pendientes, completados o cancelados. Realmente puedo ir y mirar a través de todo eso. Se puede ver cualquier actividad de pago, qué pagos han llegado realmente, qué reembolsos, fallas o devoluciones de cargo tengo. Puedo ver inventario. Entonces si tengo un producto físico, en realidad puedo establecer inventario para saber cuántos de eso tengo y puedo deducir de eso y configurarlo en el camino. Bueno, tengo donaciones y podemos tener una opción de Donaciones donde la gente pueda donar. Es otra cosa que puedes configurar con tu tienda de comercio electrónico para que puedas rastrear eso también. Tienes tus opciones de Envío. Entonces si alguna vez necesitas trabajar en tu envío o cambiar algo, puedes hacerlo aquí. También puedes conectar tu cuenta a la estación de envío, que es otra aplicación web para el envío de productos de comercio electrónico. Si deseas conectarte con estación naviera, puedes conectarte aquí mismo. De nuevo, es algo realmente poderoso si estás dirigiendo una tienda de comercio electrónico. Cupones, puedes establecer cualquier cupón o crear cualquier cosa ahí que quieras. Se pueden establecer impuestos y tener diferentes impuestos para diferentes países y todo. Por lo que puedes establecer reglas para diferentes áreas o regiones. Puedes mirar tu contabilidad y si quieres, puedes configurar con Xero, que es un popular software de contabilidad. En realidad puedes conectar tu cuenta de espacio cuadrado justo aquí a través de Xero. Mira lo que ha hecho y voy a dar click en eso. También puede configurar su configuración de correo electrónico. Si alguien recibe un servicio de atención al cliente o recibe un e-mail de tu parte, por defecto, va a venir de noreply@squarespace.com. Pero a lo mejor quiero que venga de jake@jake-jorgovan.com. Por lo que también puedes empezar a trabajar con estos. Entonces también puedes recibir una notificación cada vez que las acciones en tu correo electrónico empiecen a correr bajas. Puedes venir aquí y configurar y personalizar tus correos electrónicos también. Puedes entrar aquí y en realidad empezar a definir los textos individuales y el diseño y el estilo para cada uno de tus correos electrónicos individuales. De nuevo, algunas cosas muy cool. Es un poco más complejo porque nos estamos metiendo en el código y algunas de estas cosas, así que no es tan simple. Dado que este es sitio web sin código, después de todo, probablemente no quieras sumergirte en esto. Vamos a volver al comercio. De nuevo, tienes algunos ajustes de tienda aquí abajo. De nuevo, tu cuenta de Stripe, en qué moneda están funcionando, tus medidas, tus números de pedido, checkout express, si quieres cambiar el esquema de color más oscuro, claro. Mailchimp, puedes conectarte con eso aquí mismo. Puedes tener un formulario de pago personalizado si lo deseas y configurar tu política de término, tus términos de servicio, tu política de privacidad, todo esto. Como se puede ver, comercio electrónico, hay mucho para ello. Pero de nuevo, solo tienes que hacer click a través de todos estos menús, trabajar a través de estos y pondrás en marcha tu tienda en poco tiempo. Eso es todo lo que realmente voy a cubrir en el comercio electrónico. Espero que esto te dé un panorama básico. Obviamente hay mucha más profundidad, no puedo entrar en ello. Nuevamente, si la plataforma Squarespace integrada no es lo suficientemente robusta para ti o necesitas algunas características adicionales, definitivamente echa un vistazo a Ecwid. Se trata de una plataforma realmente genial, realmente fácil de integrar y simplemente incrustar en Squarespace. Te va a dar esa integración de PayPal y algunas otras características que pueden ser importantes para ti como propietario de una tienda de comercio electrónico. 43. Cómo crear páginas de portada: En este video, te voy a estar explicando qué son las portadas, y cómo usarlas. Entonces para empezar, vamos a subir a la Navegación Principal y vamos a dar click en “Plus”. Vamos a crear una portada y vamos a decir Galería Mostrando. Una vez que hagamos eso, nos va a llevar a este editor de portadas. Esto se ve un poco diferente a muchas otras cosas en Squarespace. Pero básicamente lo que es una portada, son los sitios web simples de una página. Este guionista, el guión es sólo el principio, ver trabajo. Esto es básicamente igual que un sitio web de una página que se ha construido y es personalizable. Por lo que no hay un montón de características, no hay un editor de maquetación completo, pero te permite hacer algunas cosas realmente geniales. Te darás cuenta si hacemos clic en “Cambiar diseño”, en realidad tenemos mucho que podemos elegir. Para que podamos escoger todos estos diferentes tipos de portadas que tienen estas diferentes características y miradas para ellos, y elegir lo que se sienta como un ajuste adecuado para nosotros. Entonces elijamos este de aquí mismo, Debut. Seleccionaremos esa y diremos, me gusta esto, esto está funcionando, este posicionamiento general y el estilo de la misma es algo que me gusta. Apetaremos a “Save”. Volveremos a la página Galería Mostrando, y vamos a bajar aquí y vamos a cambiar el Branding y el Texto. Entonces podemos tener que sea un texto o lo podemos hacer un logo, si queremos subir un logo, o podemos decir Elisabeth Cairnes, o simplemente diremos E. Cairnes porque parece que es un poco largo ahora mismo para hacerlo simple. Puedes tener este titular aquí, Próximas Galería Mostrando. Diremos Denver Colorado, y se dan cuenta de que mientras estoy haciendo esto, este texto está cambiando justo aquí en la página. Puedes elegir si quieres que los iconos sociales estén ahí o no. Una vez que tenemos eso, notamos que básicamente cambiamos nuestro Branding y Texto básico. Vuelve a Galería Mostrando y podemos incrustar un video si queremos. Entonces esto es realmente genial porque este es en realidad un video de pantalla completa que tenemos aquí. Si vengo aquí, noto que puedo reproducir y realmente reproducir un video si quiero, pero no tengo un video configurado en esto ahora mismo, entonces, eso no va a funcionar, pero esta es una característica realmente genial de esta portada. A lo mejor no es lo que queremos, entonces, escogeremos una Imagery, y subiremos aquí y subiremos una imagen. Volveremos a ese tiro de héroe que tenemos y subiremos eso, y eso reemplazará esta imagen que tienen aquí mismo. Entonces una vez que se sube esa imagen de video, te das cuenta de que, todo ese fondo se intercambia ahora con esta nueva imagen que tenemos. Golpeamos “Guardar”, volver a Galería Mostrando, y podemos elegir las Acciones, crear botones, enlaces y formularios. Puedes tener Botones, o podemos tener una Navegación con un puñado de opciones y enlaces diferentes a los que puede ir, o podemos tener Botones y tener un formulario que vaya de la mano con eso, para que podamos trabajar y construir un formulario en aquí donde tal vez capturamos a alguien información sobre la galería o la RSVP. Por lo que solo guardaremos eso y solo diremos RSVP en esto, y podemos cambiar el enlace a cairnes.com. Ahora hemos agregado este pequeño enlace de RSVP y se vinculará a nuestra página web para que alguien pueda RSVP para el evento. Vamos a ahorrar, volver a la Galería de Espectáculos, y también podemos bajar aquí y conseguimos un pequeño editor de estilo miniatura aquí también. Entonces podemos empezar a cambiar esto y convertirla en una fuente que nos guste. Voy a hacer Josef, y podemos empezar a trabajar y editar los estilos. Nuevamente, el editor de estilos va a depender totalmente de la portada con la que quieras trabajar. Como ves, acabamos de hacer esta portada realmente genial, simple, de aspecto bonito, y es muy básico, algo muy cool que solo podemos usar para promocionar un próximo evento o una galería. Nuevamente, hay toda una tonelada de éstas, y muchas de ellas tienen características diferentes. Nuevamente, éste es muy sencillo, solo está enfocado en torno a este llamado básico a la acción. A ver. Este de aquí abajo tiene una opción para un embebido de audio, por lo que puedes incrustar una pista si eres músico. Este de aquí es otro que tiene video incorporado en la plantilla. Entonces hay muchas cosas realmente geniales que puedes hacer con estas y te animo a que solo juegues con todas ellas. Se trata de una nueva característica realmente genial que es exclusiva de Squarespace, pero es una forma de hacer que una página realmente genial simplemente destaque y de realmente promocionar algo o diferenciar algo. 44. Acerca de las portadas de portadas: Por lo que te he mostrado mucho en este curso hasta este punto. Pero tengo una característica más que es realmente genial que sé que te vas a encantar. Ahí está esta característica en Squarespace llamada Portadas. Portadas Pages te permite construir un sencillo sitio web de una página que puedes usar para promocionar, digamos, un próximo evento, un lanzamiento de producto para mostrar un video. Hay muchas maneras diferentes en las que puedes usarlo, pero es una característica realmente genial, acaba de salir recientemente en Squarespace y es una que me encanta absolutamente y sé que te vas a emocionar cuando lo veas. 45. Acerca del curso: Por lo que hasta este punto, te he estado mostrando muchas características y demostrando muchas cosas diferentes en Squarespace. Pero honestamente, el sitio como es en este momento, se ve bastante terrible. En realidad sólo he estado tratando de mostrarte características y explicar cosas en Squarespace. Bueno, en la segunda mitad de este curso, lo que voy a hacer es caminar y diseñar un sitio web de principio a fin. Voy a caminar y explicar la teoría detrás de cómo me acerco a construir estos sitios web y luego realmente voy a grabar todo el video de captura de pantalla mientras paso y hago cada pieza de crear el sitio web y lanzándolo en vivo. Entonces sé que ver que este proceso sucede en acción, va a ser valioso para ti llegar a ver todo un sitio construido desde cero. 46. Cómo crear un mapa y planificar tu sitio: Para empezar, antes incluso de meternos en squarespace, voy a saltar y usar esta herramienta llamada MindMeister de la que hablé un poco antes. Voy a usar esta herramienta para crear un sitemap y realmente planear mi sitio squarespace. Simplemente puedes dirigirte a MindMeister, puedes registrarte gratis, y llegas a hacer tres mapas de forma totalmente gratuita. Una vez que inicies sesión, voy a usar un mapa mental aquí, y vamos a tener un mapa básico en blanco. Voy a cambiar el nombre de este sitemap a Elisabethcaimes.com, y lo que voy a empezar a hacer es básicamente mi objetivo es simplemente averiguar cuáles son las páginas que van a estar en este sitio, y qué quiero que alguien haga cuando llegan a cada página? Estas son dos preguntas realmente importantes a descifrar porque muchas veces, la gente tendrá páginas en su sitio web y no hay propósito para ellos. No hay llamado a la acción ni nada que quieran que haga la persona. Nuestro plan es básicamente tratar de planear eso y conseguir que se descubra en el frente. Para agregar esto, voy a dar click primero aquí en sólo el pequeño hub central. Ven aquí y golpea un plus aquí arriba. Yo voy a ahorrar aquí, vamos a tener una Página Principal. Voy a volver aquí y agrego otra. Agregar una página Acerca de. Voy a tener otra para una Página de Contacto, y luego voy a tener una Página de Fotos. No me gusta que esté todo el camino por ahí, así que voy a tirarlo y dejarlo justo aquí. Como puedes ver, este va a ser un sitio bastante básico. Eso es todo lo que realmente necesito en esto ahora mismo. Pero la pregunta viene en dos entonces, ¿cuál es el propósito de esta página? ¿ Qué quiero que alguien haga en esta página? Quieres contestar esta pregunta para cada una de las diferentes páginas por las que pasas. Para efectos de la Página Principal para llamar la atención y que alguien haga clic a otra página. Aquí tenemos el propósito de la Página Principal, y de nuevo, supongo que ¿qué queremos hacer? Haga clic para mirar las fotos. De nuevo, haremos lo mismo con el otro. Propósito de la página Acerca. El verdadero propósito de esta página es bastante sencillo, pero es dar al espectador información sobre Elisabeth, ¿ y qué queremos hacer? Alguien que lo haga en esta página? Bueno, de verdad les vamos a dar dos opciones aquí. Cuando alguien va a esto, tal vez fueron las fotos primero o tal vez no lo hicieron. Queremos que alguien tenga la opción de click para mirar las fotos. O queremos que alguien haga click para contactar. The Photos Page, el propósito. Mostrar las fotos de una manera limpia y profesional, ¿ y qué quiero que haga alguien? Bueno, en esta página, queremos que vean las fotos porque dice una parte central del sitio, y queremos que también den clic a sobre o contacten, y luego duran, el propósito de la Página de Contacto. Dar a los dueños de galerías o visitantes la oportunidad de contactar, ¿ y qué queremos que hagan? Queremos que simplemente rellenen el formulario de contacto. Bastante simple, pero mucha gente saltará este ejercicio y no tienes que hacerlo en MindMeister, puedes hacerlo también en papel si quieres. Pero este ejercicio realmente ayuda a planear tu sitio con anticipación. Para un sitio pequeño como este, puede que no parezca tan importante. Pero cuando llegas a un sitio realmente grande, estos mapas mentales pueden ser grandes sitemaps masivos y todo, y cuanto más grande sea tu sitio más fácil es perder de vista el propósito, y de repente solo tienes toneladas de solo pequeños widgets y todo o llamadas a la acción, todo tu sitio para todas las cosas diferentes. Dejando claro cuál es el propósito de cada página y qué quieres que alguien haga, esto realmente va a ayudar a que tu sitio se junte y tenga un flujo mucho mejor. 47. Construir el marco del sitio del sitio: Una vez que tengamos creado un mapa del sitio, vamos a seguir adelante y venir a Squarespace, y básicamente vamos a exponer ese sitemap en Squarespace. De nuevo, sólo voy a eliminar todo con lo que he estado jugando aquí para que no tengamos un montón de cosas en exceso. Yo sólo voy a deshacerme de todas estas cosas, porque realmente no las necesitamos. Ahora, básicamente tenemos esta página de Bienvenida. Si volvemos sobre el mapa del sitio, vamos a tener el Hogar o Bienvenida, el Sobre, Fotos y Contacto. Vamos a crear la página Fotos, vamos a crear la página Acerca, y vamos a crear una página Contacto. Aquí estamos, tenemos nuestras cuatro páginas básicas, y luego si recuerdan lo de la galería que les mostré antes chicos, cómo vamos a montar una galería en la sección no vinculada. Vamos a seguir adelante y hacer eso ahora mismo para que solo podamos subir nuestras fotos y luego podamos usarlas donde queramos a lo largo del sitio. Tengo esta Galería creada, y voy a seguir adelante y subir un puñado de fotos. Ven aquí, adelante y sube todas estas que ahora he comprimido para web. Nuevamente, cada vez que tienes una foto, te das cuenta de que estos son alrededor de 271 kilobytes para una foto. Ese es probablemente un buen tamaño, alrededor de cualquier lugar entre un 100 y probablemente 500 kilobytes es un buen tamaño. Pero si estás viendo los tamaños de tus archivos en los megabytes, entonces quieres empezar a buscar una forma de comprimirlos. Eso puedes hacerlo a través de Photoshop, puedes hacerlo a través de Preview en Mac, o hay un puñado de simplemente buscar cómo comprimir imágenes en Google, y allí encontrarás un puñado de herramientas. Voy a agarrar estas imágenes que hemos escogido para usar en el sitio. Sólo voy a arrastrar y soltar estos aquí mismo, y dejar que todos sigan adelante y suban. Nuevamente, al poner todos estos en una galería no vinculada, entonces puedo básicamente referirme a estos en cualquier parte del sitio y de esa manera si quiero usarlos en un punto diferente del sitio o algo así, puedo hacer eso también, cosa tan muy útil que puedes hacer ahí. También podemos reorganizar estos, me gusta esta foto, pero probablemente no sea mi favorita. Nos desplazaremos hacia abajo y empezaremos a reorganizar estos en un orden diferente. Escogiendo un pedido que encaje en el gusto y cómo en qué orden queremos que se presenten estos. En lo personal, este camión uno es mi favorito, así que dejaré eso para arriba. Simplemente reorganizaremos un poco estos y los pondremos en el orden que tanto deseemos. Ahora parece que todos ellos han subido y procesado. Vamos a volver a las páginas, y ahora acabamos de crear básicamente todas las páginas en el contenido básico para un sitio. 48. Cómo crear una página de fotografía: Lo siguiente que voy a hacer, ahora que hemos subido nuestra galería, es que voy a salir esa Galería a nuestra página de Fotos. Lo primero que notarás es que aún tenemos una barra lateral en nuestra Galería y no queremos eso. Por lo que voy a venir a la página Ajustes de la página Fotos y poner esa página a toda anchura. De esa manera no tenemos que preocuparnos por ninguna barra lateral. Voy a golpear Save. Otra cosa útil a notar es ese aviso de que no hay cabecera en esto. Pongamos algo de texto aquí. Pero ahora no hay cabecera en esta página. Si subo una imagen, veremos que aparece un encabezado por aquí. Digamos que subo esta foto aquí. Nos vamos a dar cuenta de que entonces aparecerá el encabezado. Yo sólo voy a subir eso, para mostrarles chicos, yo; m voy a golpear Save. Ahora de pronto porque ponemos una foto aquí, tenemos esta enorme pancarta aquí arriba. Nuevamente, en esta página en realidad no queremos ese banner solo voy a seguir adelante y quitar eso porque simplemente preferiría enfocarme en la galería de fotos en su conjunto. Entonces vamos a poner Fotos aquí arriba y voy a decir Fotografía. Suena un poco más profesional. En realidad vamos a centrar eso, poner eso justo en el medio y voy a volver a editar ese contenido de la página. Perdón, sigo yendo de ida y vuelta con el ahorro. Ahora, siempre es bueno ahorrar mucho porque de nuevo, si pierdes conexión a Internet o algo sale mal, eso no es algo bueno. Así que ahorra a menudo. Voy a añadir una cuadra abajo donde dice Fotografía y Galería. Esto es ridículo, pero Squarespace actualizó la interfaz de usuario entre, literalmente, ayer cuando grabé el resto de estos videos mostrándoles chicos cómo hacer esto con el bloque Galería. Ahora en realidad los han montado y a su manera. Un poco loco cómo funcionó eso. Vamos a probar algunos de estos. Vamos a intentarlo y sólo ver lo que nos gusta. Vamos a empezar con el muro. Estas fueron las columnas de auto. Voy a venir aquí, y no quiero esos metadatos ahí, más bien sólo ver estos como imágenes. Deshazte de esa miniatura. Necesitamos la miniatura pero estas son nuestras fotos. No vamos a ponerle un límite a eso por si acaso alguna vez subamos más. Voy a venir aquí a Layout y ver esto, sigue siendo similar, pero ahora en esto, sigue siendo similar, realidad acaban de cambiar esa navegación de cómo llegas ahí. Vamos a cambiar el ancho de la canaleta, hacerlo un poco más pequeño. Se necesita un poco para cargar. Vamos a hacer que nuestras columnas sean un poco más anchas así que tenemos dos columnas de ancho. Vamos a ahorrar y a ver cómo nos gusta esto. No me encanta cómo estos no están perfectamente alineando. Pero otra vez, otra cosita práctica, sólo para que lo sepas, tenemos este bloque de galería justo aquí. En última instancia, estas funciones y cómo funcionan estas columnas de auto van a depender en gran medida del orden de las imágenes. Te das cuenta de cómo tengo cuatro horizontales iniciándolo. Bueno, si tiro hacia arriba una de estas imágenes verticales para decir la parte superior, entonces va a cambiar por completo el aspecto de esa galería. Entonces otra vez, vengo aquí a Gallery, vamos a sacar a este tipo de aquí. Ahora tenemos una horizontal y una vertical. Eso debería cambiar totalmente la forma en que se ve y se alinea todo este auto columnas. Nuevamente, si venimos aquí ahora, vemos que está un poco más escalonada, realmente ha cambiado cómo se ve todo el asunto. Ya no tenemos esos incómodos desajustes. Creo que esto es bueno por ahora. Creo que esto hace un buen trabajo de demostrarlo. Entraremos aquí y parece que tenemos Lightbox encendido, lo cual es bueno, quería agregar Lightbox. Parece que hemos configurado una galería sencilla pero queremos volver a nuestra página. Nuevamente, ¿qué queremos que alguien haga en nuestra página de Fotos? Bueno, queremos exhibir las fotos de una manera limpia y profesional. Ya terminamos con eso. Alguien puede mirar las fotos e incluso Lightbox ellas. Entonces queremos darles la opción de conocer más sobre Elizabeth o ponerse en contacto con ella. Entonces voy a desplazarme hacia abajo hasta el fondo aquí y agregar ese contenido de la página. Vamos a tener un texto más simple aquí abajo. Dice: “aprende más sobre Elisabeth”. Simplemente dejaremos eso aquí. En realidad, ¿sabes qué? Vamos a hacer de esto un botón. Creo que un botón estaría bien. Ven aquí y crea un botón. Conoce más sobre Elisabeth. Ejecutaré una URL Clickthrough. Acude a nuestro Contenido y vamos a enlazar esto a la página Acerca. Saldremos de este centro alineado. Ahora mismo es verde, es terrible, pero llegaremos al editor de estilos un poco más tarde. este momento, en realidad sólo estoy poniendo el marco en el sitio. Entonces ahí vamos. Acabamos de crear una página de fotografía básica para nuestra página web. 49. Cómo crear una página sobre la página: En este video, estaremos creando una sencilla página Acerca de en el sitio Elisabeth aquí. Voy a bajar aquí a Sobre y otra vez, tenemos una página en blanco aquí y también tenemos la barra lateral, a la que este tema ha fallado. Voy a hacer clic en la “Configuración”, ven aquí a la barra lateral y elige Ancho completo y pulsa “Guardar”. Ahora, nuestra pequeña barra lateral acaba de desaparecer y tenemos una página de ancho completo. Vamos a ir al contenido de la página. Aquí, vamos a ir, teclea en Elisabeth Cairnes- Artist Statement y voy a hacer de eso un rumbo 1, aquí mismo y luego vamos a venir por aquí. Tengo este Google Doc donde tengo su declaración de artista que ha sido compartida conmigo en una Google Drive. Voy a venir aquí y voy a pegar eso. Voy a usar la herramienta Pegar como texto plano y pegarla aquí y vas a notar que esto sucede en algún momento, especialmente en navegadores más pequeños o parte de esto está cortada. Te das cuenta de que siempre que no pude llegar al botón Ok aquí abajo pero lo que acabo de hacer es golpear “Command Minus” y se alejó y “Command Plus” para acercar de nuevo. Esto es solo a cosa realmente útil si alguna vez consigues este tema donde parte de la ventana, que se desborda y eso es solo porque honestamente, estoy trabajando en un pequeño navegador y estoy haciendo esto porque sé que algunos de ustedes lo harán experimentar también estos mismos temas. Si estás en un Windows, eso sería control menos o control plus. Ahora, que tengamos eso y la ventana se restablezca al medio, voy a golpear “Ok” y acabamos de pegar esto como texto plano aquí. Parece que tenemos un tipografía así que lo arreglaré. Además, notarás que a veces solo quieres volver a trabajar este espaciado y hay muchas veces cuando se pega de un documento, incluso cuando pegas sin formatear, te vas a conseguir demasiado espaciado dentro de ahí. De nuevo, tenemos aquí nuestra declaración básica de artista pero no recuerdo cuáles eran las cosas que quería hacer en esta página. Yo quiero que dé a los visitantes e información sobre Elisabeth y quiero que puedan mirar las fotos o ponerse en contacto. Lo que voy a hacer en realidad es poner una llamada de contacto a la acción en el pie de página para que así no sea abarrotado aquí con dos llamadas a acciones. Lo que voy a hacer entonces es, no voy a hacer el pie de página ahora mismo, voy a crear la llamada a la acción para la galería y así quiero decir, View Elisabeth Photography y voy a añadir la URL. Voy a ir a “Contenido” y estoy a un click en la página de “Fotos”. Asegúrate de no hacer click en la “Galería” de lo contrario, no quieres enlazar a esa galería pero en su lugar da clic en la página de “Fotos” y luego vamos a alinear a este tipo de la izquierda y probablemente, terminaré alineando al otro tipo a la izquierda, como bien. Generalmente, en un sitio web desea alinear todo a izquierda o alinear todo centro o derecho y ser consistente con eso. Voy a ser honesto, no he decidido totalmente qué quiero hacer en el sitio aún así que a veces, solo juego alrededor con él y luego me pongo una sensación pero trato de siempre terminar y tener que ser un look y sentir consistente y por lo que acabamos de crear una página básica Acerca de para Elisabeth. 50. Cómo crear una página de contacto: En este video, te voy a estar mostrando cómo crear una sencilla página de contacto. Estamos aquí en sitio Elisabeth, vamos a bajar a Contacto. Nuevamente tenemos que deshacernos de esta barra lateral otra vez, es molesto, pero es el predeterminado, qué va a llegar. Haga clic en “Ancho completo” ahí mismo. esta página del Contacto, realidad vamos a querer poner una pequeña foto en la pancarta, sólo algo fresco para darle a la gente un poco de sabor de solo su fotografía y su trabajo. Vamos a pasar por aquí, escoger una foto que creo que es una buena representación. Necesitamos una horizontal, y vamos a ir con ésta. Creo que su línea será realmente genial y dibujará el ojo del espectador hasta el formulario Contacto. Vamos a elegir eso ahí mismo. Sube la imagen. Dale a eso un segundo para procesar y redimensionar. Ponga este punto focal por aquí, y vamos a golpear “Guardar”, y ahora tenemos esta imagen de banner aquí mismo en la página Contacto. Bajo al Contenido de la Página. Voy a escribir “Contactar a Elisabeth”. Hacer que un Epígrafe 1. Yo vengo aquí abajo y agrego un Formulario. Deja caer esa línea de Asunto, realmente no quiero eso. Honestamente, no soy un gran fan de las cajas Nombre y Apellidos, en realidad muchas veces acabo de borrar esto. Lo que vendré a hacer es solo agregar una caja. Simplemente crearé un cuadro de texto aleatorio y escribiré “Nombre” en él y lo haré Requerido, y lo pondré aquí arriba. Básicamente, acabamos de deshacernos de esa cosa de Nombre y Apellidos y sólo tenemos un lapso de nombres. Alguien podría simplemente darte su nombre y su apellido pero es algo que prefiero en lugar de tratar de pedir el nombre y apellido. Entonces haremos Elisabeth, nombre del formulario será “ElisabethsCairnes.com Formulario de Contacto”. Para almacenamiento, vamos a enviar esto a su dirección de correo electrónico, Connect. En Avanzado, diremos que a “Di hola”, algo un poco más amenazante luego presentar. Del cual nunca fui un gran fan. “ Gracias. Estaré en contacto en breve”. Vamos a agregar este pequeño mensaje post-enviar así que esto es lo que alguien ve después de llenar el formulario. Vamos a darle a “Guardar”. Nuevamente, esto se ve bastante bien, pero es un poco ancho, así que creo este cuadro de texto. Di “elisabeth cairnes”, también le gustan mucho las cosas en minúsculas, y eso es simplemente útil recordar ahora es que quería todo en su sitio minúsculas. Fue una petición del cliente. “ .com.” Vamos a hacer de esta dirección de correo electrónico un enlace también. Editar enlace. Entonces algo que saber, y esto es sólo un pequeño truco con la web, pero cuando estamos haciendo un enlace y si estamos haciendo por una dirección de correo electrónico, queremos escribir las palabras “mailto” y presionar “Shift” y hacer dos puntos, "elisabeth.cairnes@gmail.com”. Escogeremos abrir eso en una nueva ventana. Ahora acabamos de agregar su información de contacto, y pondremos eso justo aquí. A lo mejor en un poco cuando consiga su cuenta de Instagram y todo, tal vez pueda poner un bloque de Instagram aquí mismo o una foto de ella. Entonces agregaremos algunas de esas cosas un poco más tarde. Vamos a guardar esto por ahora, y acabamos de crear una página de contacto básica para Elisabeth. 51. Cómo añadir un logotipo al sitio: En este video, en realidad voy a seguir adelante y subir su logotipo al sitio. Ven aquí a Diseño, ve a Logo y Título. Vamos a cambiar esto a fotógrafo o fotógrafo de bellas artes, es el nombre del sitio o realmente vamos a hacer de eso el lema. Realmente estos son irrelevantes excepto por razones SEO, porque no vamos a estar usando estos con el tema. Vamos a añadir un logo y bajar aquí. Entonces tenemos este logotipo que tiene 200 píxeles de ancho, y eso debería estar bastante bien, o podemos ir una talla para arriba. Yo iré con esto por el bien de mantenerlo pequeño. Ya hemos subido un logotipo, que esto cambiará con el sitio web sin código y guardamos. Simplemente vamos a subir el favicon, que si recuerdas, por defecto tienes aquí la caja de espacio cuadrado. Pero en realidad vamos a cambiar esto a este favicon de 50 píxeles que he hecho aquí mismo. Vamos a pegarle a Save. Eso debería entonces reflexionar en nuestro sitio. Ya esto está empezando a parecerse un poco más a un sitio web real. Ahí vamos. Acabamos de agregar un logo y todo al sitio de Elizabeth y está empezando a juntarse. 52. Cómo editar el pie de pie: Hola. En este video, voy a correr y editar el pie de página muy rápidamente porque no soy un gran fan de lo que tengo pasando aquí abajo. Todavía dice “Cambia este texto” de antes. Voy a borrar la segunda casilla porque sólo lo vamos a tener todo centro. Se va a decir copyright 2015 elisabeth cairnes, y vamos a poner elisabeth.cairnes@gmail.com, poner una dirección de correo electrónico ahí también. En realidad, no, estoy cambiando de opinión al respecto. Vamos a tener eso, sólo los derechos de autor en la parte inferior. Mantén eso bastante llano y simple, y justo encima de que vamos a tener contacto con Elisabeth. Simplemente vamos a hacer de eso un enlace que va a la página de contacto. Podría cambiar esto, no estoy seguro si estoy totalmente vendido, pero es solo algo cada vez que estás diseñando, muchas veces, solo piensas por alguna razón, te das cuenta que aquí dice ninguna URL de enlace. Ahora por alguna razón eso no funcionaba cada vez que intentaba elegir la página de contacto. Inténtalo de nuevo. Ahora le damos click, ves que dice contacto slash y funcionó correctamente. Ahí vamos. Ahorremos y acabamos de editar el pie de página aquí en la página web, y muy rápido, volviendo de nuevo, ella no quiere mayúsculas en sus mensajes, ella quería todo minúscula, así que vamos a mantener eso bastante simple. Es así como vamos a editar el pie de página. 53. Crear la página de casa: En este video, vamos a trabajar aquí en la página de Bienvenida del sitio. Lo primero que tengo que hacer es eliminar todo este revoltijo de murmullo aleatorio que tengo aquí abajo. Eso fue de las lecciones anteriores que les mostré chicos. Eliminando todo esto, arrastrándolo a la basura, simplemente deshaciéndose de él. Todavía tengo una línea aquí, deshacernos de eso también, estamos empezando fresco. Muy bien, lo que vamos a tener en la página principal, nuevo, recuerda volver a nuestro MindMeister. El propósito es llamar la atención y que alguien haga clic más allá, y después de esto, queremos que alguien vaya a mirar las fotos. Ahora, lo que en realidad voy a hacer es tirar del primer párrafo de ella Acerca de la página y usar eso aquí en la página Inicio, y se va a decir”, Elisabeth Cairnes- fotógrafa de bellas artes”. Voy a hacer eso grande, y luego debajo de eso, vamos a pegar eso ahí dentro, pero me olvidé de hacer con el, pegar como texto plano, así que voy a quitar el formato en eso, y ahora ves el sangría y toda esa rareza se fue. Vamos a tener un pequeño llamado a la acción aquí abajo, un botón para, “Ver la fotografía de Elisabeth”, y ese enlace va a ir a la página Contacto y a Fotos. Vamos a alinear a este tipo a la izquierda también. vamos a guardar, así que básicamente hemos hecho una página de inicio básica, pero una cosa, en realidad voy a intercambiar esta foto aquí mismo, voy a mantener la misma foto, pero no está comprimida, esta versión y esa ralentizaría los tiempos de carga. Cuando no tienes fotos comprimidas, tus tiempos de carga se vuelven muy lentos, así que voy a quitar eso y bajar a nuestras fotos comprimidas y vamos a subir una versión comprimida de la foto. Ahora es mucho más rápido, sube. Ahí vamos, ahora tenemos una nueva versión comprimida. Vamos a bajar un poco el punto de enfoque, así que de esa manera, nos estamos centrando aquí en la porción real de la naturaleza muerta de este arte. Vamos a golpear “Save” y ahí vamos, acabamos de intercambiar la foto y crear la página principal básica en el sitio de Elisabeth. Ahora la Página Principal básica, las Fotos, el Acerca, y el Contacto. Esto puede o no ser definitivo, honestamente con Squarespace, vas de ida y vuelta porque obviamente, esto no se ve como quiero que se vea en este momento. Entonces lo siguiente que vamos a hacer es entrar al editor de estilos, empezar a hacer que se vea bien. Cuando hagamos eso, podemos terminar volviendo aquí y editando el contenido y ajustando el diseño para que encaje con los nuevos estilos. 54. Estilizar el sitio: Ahora tenemos todo el contenido dispuesto en las páginas, y en este video voy a entrar y empezar a trabajar con el editor de estilos. No es raro que después de entrar en el editor de estilos que termine cambiando temas porque simplemente no está mirando o no siente que yo quería. Siempre hago el framework de las páginas antes de que ni siquiera me sumerjo en el editor de estilos, porque de esa manera si sí instalo un nuevo tema es realmente fácil y todo ese contenido de la página simplemente viene con él y puedo ver rápidamente si esto está funcionando o no trabajando con este nuevo tema. Vamos a venir aquí al Editor de Estilo. En realidad voy a golpear Control menos para que pueda obtener un poco zoom hacia fuera vista y ver si alguien tenía un escritorio más grande cómo sería esto. Yo sólo voy a empezar a pasar y a meterme con este sitio. Tienes que tener en cuenta que esto está cambiando en cada página, pero vamos a mantenerlo un sitio web estrecho. Es un poco de trabajo que vamos para Canvas Setting, en realidad voy a probar Site Widch. No me gusta cómo eso es recortar esa foto sin embargo, así que voy a ver si hay algo que pueda hacer al respecto. Canvas Offset, realmente no quiero un Canvas Offset. Acolchado de lona. De nuevo, no sé si quiero un Relleno de Lona en este. ¿ Frontera? No, tampoco queremos eso. A lo que realmente vamos con el estilo en este sitio es un estilo muy limpio, minimalista. Generalmente ayuda a tener algunas referencias y todo lo que estás mirando de antemano. Vamos a hacer de nuestras líneas y decoración un gris muy claro. Realmente no nos gustan estos delimitadores aquí arriba, así que vamos a simplemente deshacernos de esos. Delimitador es esa pequeña tajada entre la navegación. Bastante contentos con el fondo del encabezado, la imagen de fondo en realidad no vamos a poner nada ahí. Si pusiéramos una imagen de fondo en el encabezado sería por defecto eso, pero en su lugar la hemos diseñado para que la miniatura de la página sea la imagen. El color del título del sitio, nuevo no nos vamos a meter con eso realmente porque eso está siendo reemplazado compra este EC. Título de la página. En realidad no estamos demostrando eso. Altura del área de pancarta. Esto es algo con lo que probablemente sí quiero jugar. De nuevo, para poder elegir lo grande que quiero que se ponga esto. En realidad quiero que se abeja pequeña y estrecha porque todas las fotos aquí son de paisaje. Vamos a tratar de mantenerlo un poco corto así. Excelentemente clicé por aquí. Color de superposición. De nuevo, queremos que el conjunto sea transparente, no queremos nada ahí. Va a mantener vacío ese contenido de banner. Vamos a hacer la miniatura de la página como el banner. Podría equivocarme en esto, pero creo que si actualizo esta página, esa imagen debería cambiar el tamaño. A veces es espacio cuadrado que realmente sí solo tienes que refrescar. Ahí vamos. Tienes que refrescar o guardar y volver a ver realmente los cambios que realmente surten efecto. Esto es bueno. Esto es lo que iba a buscar. Mucho más pequeño, así que nos estamos acercando. Vuelve al Editor de Estilo. Ve que hemos hecho el encabezado ahora estamos en el color del enlace de navegación, y el color del hover lo vamos a hacer este color rosa aquí mismo, que voy a venir a Photoshop y tirar hacia arriba esto. Esto en realidad es muy útil si tienes algunas técnicas básicas de Photoshop. Te recomiendo encarecidamente usar Photoshop regularmente para sacar estos colores href de tus imágenes. Les mostraré aquí un pequeño truco, para aquellos de ustedes que no son útiles con Photoshop no se preocupen. Puedes mirar esto, pero voy a usar la herramienta cuentagotas. Agarra este color que quiero, hago clic ahí, y obtengo el pequeño código hexadecimal justo aquí. Copia eso. Vuelve a Squarespace y vamos a hacer de esto el color flotante. En realidad voy a convertirlo también en el color activo. Eso es bastante ligero en realidad para el texto. Tire de eso un poco más oscuro. No te salgas con unas cosas sutiles con texto, con cambio de color porque mucho texto honestamente es tan delgado, eso es muy duro dos ver el color porque son tan pocos píxeles. Voy a volver a acercar un poco. Eso sí me gusta. Creo que eso se ve bastante bien. Tenemos nuestro espaciado de navegación, que de nuevo, sí queremos un poco de espacio pero no a terriblemente mucho. Puede hacer este logotipo más pequeño o hacerlo enorme si queremos. Pero vamos a mantenerlo bastante pequeño y sencillo. Mantén la navegación por encima del banner. Nosotros vamos a mover su centro. Esto puede ser un rompetrato para mí con este tema. Pero quiero que este ícono tal vez se siente encima de ahí. Pero vamos a seguir adelante por ahora y sólo llenarlo. Trabajaré un poco más este espaciado de navegación. Creo que vamos a hacer esto un poco más grande. Eso está un poco más cerca. Fondo de lona estamos contentos con la imagen de fondo. Nosotros sí queremos cambiar todos nuestros encabezamientos. Hay dos fuentes que estoy mirando. En realidad no lo tienen aquí encendido así que vamos a ir con Josefin Sans, una fuente limpia muy bonita. Vamos a cambiar el grosor para que sea ligero y delgado. El texto un poco más grande. Simplemente lo vamos a hacer todo en minúsculas porque sólo queremos todos nuestros títulos en minúsculas. O lo espacio solo un poquito. Epígrafe 2. Ahora no sé si estoy usando un encabezamiento 2 en el sitio. En realidad no estoy ahora mismo. Pero sólo por el bien de la consistencia quiero al menos ponerlo en la misma familia de fuentes por si alguna vez hace compras. Lo que sea en este momento no estoy usando un rubro 2 o un encabezamiento 3 en el sitio. Que los vamos a hacer justos. Vamos a hacer que todos estos sean del mismo color gris que tenemos aquí. Otra vez haciendo el agarrar este número hexadecimal. Saltar y volver por aquí, convertir todo este texto gris. Probablemente debería hacer ese partido de navegación no debería I. Así que también a veces no se obtiene un número hexadecimal. En él hace RGBA y A significa alfa, que es un nivel de transparencia. Entonces escribe ahora si voy y cambio este valor a un 0.9 se vuelve más grueso. Cambia a un punto uno, y está casi todo el camino para ver a través. O puedes usar un deslizador aquí para ajustar la transparencia también. Dejaremos ahí el hexadecimal. Tenemos ese color descubierto ahí afuera. Ahora estos colores coinciden con nuestro color de enlace corporal, que podemos ver aquí abajo en nuestro pie de página. Vamos a utilizar el mismo color de enlace que estábamos usando en nuestra navegación. Entonces bajamos aquí, pegamos a ese tipo, y de alguna manera le echo de menos la C, así que tendré que volver y arreglarlo. En realidad, haré que el himno se oscurezca un poco. Blockquote, de nuevo no estamos usando aquí. Espaciado de páginas, este es uno grande, es cuánto espacio hay entre el banner, y sólo vamos a tener unos 21 píxeles, Eso me queda bastante bien. Texto de pie de página, de nuevo, necesitamos ajustar esta para que sea la misma fuente y podemos elegir el Tamaño de fuente y el ancho, y Altura de línea, Espaciado de letras, todo lo que es bueno. Mantén ese Centro alineado y elige si queremos este pequeño borde y el pie de página y en realidad me gusta eso, voy a dejar ahí esa frontera. Social Icon Size, no tenemos ninguna cuenta de redes sociales conectada en este momento , pero si lo hicimos, podemos hacer que el color se muestre correctamente y solo vamos a tener unos iconos de redes sociales normales. vamos a poner en el Bottom Only, eso es sólo si decidimos usar esos. Blog, no vamos a tener ningún blogueo ni nada aquí ahora mismo, así que voy a saltarme totalmente esto, pero nuestros botones, esto está bastante mal ahora mismo. Este botón verde brillante no es para nada lo que estoy deseando, así que vamos a volver a subir aquí, agarrar este color gris, tomar este color de botón ahí mismo. Vamos a hacer que sea un esbozo y vamos a hacer la plaza. Tenemos este botón muy simple, de buen aspecto ahora, y queremos cambiar esa fuente a Josefin Sans para que vuelva coincidir con las otras cosas y también vamos a transformar todo en minúsculas, y sí, así que ahí nos ir. Ahora acabamos de hacer nuestro estilo básico en nuestro sitio aquí. Veamos cómo se ve esto cuando nos encontramos con todas estas páginas diferentes. De nuevo, vengo aquí y honestamente, voy a arreglar este pie de página muy rápido. Me está molestando ahora mismo, así que tenemos ese Save ahí mismo. Ahí está el contacto Elizabeth al fondo, es muy sutil, pero está ahí. A lo mejor terminaré cambiando eso. No amar esta justificación izquierda, vamos a poner todas estas cosas centro y esto otra vez, lo que te estaba hablando con solo tratar de averiguar qué quieres en el sitio, a veces solo tienes que jugar con él un poco. Vamos a mover todas estas cosas al centro, volver a salir a escuchar. No creo que alguna vez haya editado mi texto corporal, alguna manera me salté eso. Voy a volver aquí abajo al editor de estilos, editar este contenido menor, los Body Texts, que voy a probar Josefin Sans, pero podría ser un poco demasiado, tal vez sea lo suficientemente grande. Sí. En realidad, creo que sí funciona, eso me gusta. Vamos a hacer ese mismo color gris que el encabezado sin embargo. ¿ Podemos realmente transformar texto? No, no podemos, así que vamos a dejar así como es. De nuevo, esto está empezando a parecer un sitio decente aquí. Yo tampoco hice nuestros Estilos de Navegación. Nuevamente, a veces un poco de ida y vuelta. De alguna manera me perdí ajustando la Fuente de Navegación. Ven a esta Navegación, de nuevo, vamos a poner eso como Josefin Sans y hacerlo todo minúscula, fuente un poco más grande, aunque lo haremos más delgado. Probablemente sigue un poco demasiado grande y están empezando a gustarle cómo se ve eso ahí. Nuevamente, nos estamos acercando un poco. Es mucho atrás y cuarto. Solo estoy entrando aquí y viendo lo que hay que cambiar. Ven a la página de fotografía. Aquí tenemos esta toda la fotografía aquí en estas columnas de auto. Voy a ver si esto aprende más sobre Elizabeth funciona y eso nos lleva aquí a la página sobre. Podemos ver su declaración de artista, esto nos lleva de vuelta a la fotografía. Botón de contacto en la parte inferior nos lleva a la página de contacto y de nuevo, se ve este redimensionado también. Honestamente, en realidad, me gustaría una foto como esta también en la página sobre. No teníamos puesto aquí, así que voy a volver, venir a mis páginas, ir a cerca y voy a subir, renderizar este aquí mismo, me gusta mucho esta foto, y vamos a cambiar el punto focal a esta silla para que no se corte en absoluto. Después refresca para asegurarte de que eso se posicione correctamente, y ahí vamos. Acabamos de agregar ahora una página básica sobre a esto, su fotografía, su contacto, la bienvenida, y sí, la página de fotos. Tenemos apenas en cuestión de probablemente menos de una hora armar lo que es un sitio web bastante guapo. Espero que estén viendo lo rápido que fue este proceso. Te ayuda a darte cuenta del potencial de Squarespace y lo rápido que realmente puedes trabajar y armar algo en esta plataforma. 55. Cómo lanzar tu sitio web en vivo: Simplemente me miras diseñar un sitio web completo, y lo construiste todo el camino desde cero. Bueno, en este video, te voy a mostrar cómo realmente lanzar ese sitio web y ponerlo en vivo en tu dominio. 56. Lanzar tu sitio con Godaddy: En este último video aquí, les voy a mostrar cómo lanzar un sitio web en vivo. Específicamente te mostraré cómo hacer eso cuando tengas una cuenta de GoDaddy. Pero si no tienes una cuenta de GoDaddy, te mostraré los conceptos básicos de cómo hacerlo también. Hay dos artículos que son realmente útiles. En la help.squarespace.com/guides, hay un mapeo de dominios con artículo de GoDaddy y mapeo de dominios de Squarespace. Si buscas mapeo de dominios de Squarespace, vas a recibir estas instrucciones generales. Eso te mostrará cómo haces esto si la URL de tu sitio web se compra fuera de GoDaddy. Pero te voy a mostrar a GoDaddy por ahora porque es simple y es realmente fácil de trabajar. Pero honestamente, de verdad sólo voy a estar caminando por esta página y diciéndoles cómo hacer esto aquí. Pero sí cambian esto cada pocos meses. Squarespace siempre está buscando formas de mejorar, formas de hacer las cosas más rápidas. Aunque grabe este video, en unos meses, podría ser totalmente diferente. Siempre recomiendo revisar estas páginas antes de lanzar un nuevo sitio web en vivo. Lo primero que vamos a hacer es que necesitamos vincular nuestro dominio. Vamos a bajar aquí, ir a “Configuración”, y ir a “Dominios”. Vamos a vincular un dominio existente. Vamos a enlazar elisabethcairnes.com. Vamos a ver que tenemos esta Verificar Propiedad. Lo que tenemos que hacer aquí en estas cosas rojas, pero no nos vamos a preocupar por eso ahora o deberíamos volver a nuestro tutorial y ver cuál es el siguiente paso. Ya hemos hecho todo eso. He ingresado a mi cuenta de GoDaddy aquí arriba, y voy a seguir adelante y lanzar el dominio, que es el siguiente paso. Voy a bajar aquí a mis dominios, ver elisabethcairnes.com, hit “Launch”. Una vez que esté aquí, voy a ir a “Archivo de zona DNS” aquí mismo. Voy a volver a revisar mis instrucciones y obtener los valores que necesito. Bueno, de nuevo, donde me está mostrando hacer clic en el Archivo de Zona DNS, y voy a bajar aquí y añadir un registro. Al volver por aquí, voy a añadir un disco. Voy a agregar un registro CName, que es, de nuevo, y me dicen que seleccione “CName” para el tipo de registro, y me aseguraré de que sea un www. es el cuadro anfitrión, y apunta a esta extensión.squarespace. Entonces www, y vamos a hacer el tiempo de vivir media hora. Apetaremos a “Finish”. Nos vamos a dar cuenta de que en realidad no hizo nada hasta que golpeamos Save. Pero voy a bajar aquí a ver qué dice. Necesito agregar un segundo CName. Voy a volver aquí, haga clic en “Añadir un registro”, añadir otro CName o un host. Necesito pegar ese código único, así que vuelvo aquí a mi sitio de Squarespace, copio este código que está en esta casilla Verificar propiedad, y ese es nuestro anfitrión. Vuelvo aquí, y voy a copiar que va a apuntar a verify.squarespace.com, tiempo de vivir media hora, y vamos a golpear “Finalizar”, y acabamos de ahorrar. Necesito hacer clic en “Guardar cambios”. Uno de los registros tenía algunos temas. Este es un tema que probablemente se te enfrentará. Es que ya tenía un registro de www.cname. Si vengo aquí a CNames, ya tengo éste. Traté de crear uno, pero ya había uno ahí. Lo que necesito hacer en realidad es editar este registro, así que estoy bajo CName Alias, baja aquí a www., y vuelve y agarra esa extensión.squarespace.com de nuestro tutorial, y haz que sea media hora, y toca “Finalizar”. Ahora bien, si guardo estos, se ha actualizado el archivo de zona. Mira eso. Pero no hemos terminado. Nosotros hemos hecho los CNames, los hemos guardado, ahora necesitamos agregar unos registros. Lo que vamos a hacer es ir a “Add Record”, “A record”, y luego vamos a tener el símbolo @, y va a apuntar a esta URL justo aquí. Lo primero que realmente voy a hacer es borrar el viejo registro A porque ya no necesitamos eso. Voy a guardar eso, añadir un registro A justo aquí, y luego @, pegar ahí, media hora. Entonces en realidad voy a añadir un puñado. Lo que hacen es básicamente que te dan estos cuatro discos A. Lo vas a poner ahí dentro y es prueba de fallas su sistema. Pega ese nuevo de ahí, agrega otro, vuelve aquí, agarra a este tipo, pega ahí, agrega otro, vuelve aquí, y “Termina”. Acabamos de sumar cuatro registros A que deberían coincidir con eso. Vamos a pegarle a “Save”. Entonces necesito completar la verificación del dominio. De nuevo, GoDaddy, esto generalmente sucede muy rápido. Otros proveedores de dominios, puede tardar un par de días en hacerlo. Voy a volver aquí y golpear “Verificar propiedad”, verificación es exitosa, volver a comprobar. De nuevo, podría tardar 72 horas en pasar esta parte. Pero vamos a probar esto y a ver si funciona. Ir a elisabethcairnes.com. Mira eso, acabamos de lanzar nuestro nuevo sitio web en vivo. Otra razón por la que tendré a GoDaddy es que es tan increíblemente rápido. Conozco el favicon, todo está funcionando justo aquí arriba, y toda nuestra página web está funcionando igual que queríamos que fuera. Al igual que, en menos de una hora, hemos puesto unas páginas web bastante bonitas. Eso es todo lo que realmente necesitamos hacer en el mapeo de dominios y todo ahí mismo. De nuevo, si no estás usando GoDaddy, echa un vistazo a esta guía de Instrucciones Generales de Mapeo a Dominio. Eso te guiará a través de cómo hacer esto con otros proveedores de dominios. 57. Próximos pasos: Gracias chicos por ver este curso y espero que saquen mucho valor de él. Asegúrate de enviar tu sitio web en la sección de proyectos a continuación, toma algunas capturas de pantalla y sube la URL para que todos los demás puedan ver en qué estás trabajando. También asegúrate si tienes alguna pregunta, envíalas a través del curso aquí y haré lo mejor que pueda para contestar, quizá no pueda llegar a todos, pero haré todo lo posible para contestar cualquier pregunta que tengas. También si te interesa aprender más sobre mí o seguir mi blog, puedes visitar mi página web @jake -jorgeven.com. Yo blogueo regularmente ahí y tengo todo un canal de YouTube enfocado a tutoriales de espacio cuadrado también. Pero sobre todo, espero que de esto, hayas conseguido construir un sitio web que te va a ayudar a empujar tu marca, tu negocio, tu misión o lo que sea que estés tratando de hacer, que este sitio web te va a ayudar a impulsar hacia adelante en alcanzar tus metas. Gracias chicos por escuchar, y espero que financien mucho valor en este curso y si fueran lo suficientemente amables, por favor dejen unas críticas de cinco estrellas para que otras personas puedan encontrar este curso y ver lo valioso que es también.