Diseño de sitios web de Squarespace 7 - No se requiere codificación | Vigasan Gunasegaran | Skillshare

Velocidad de reproducción


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

Diseño de sitios web de Squarespace 7 - No se requiere codificación

teacher avatar Vigasan Gunasegaran, Squarespace Website Design Made Easy

Ve esta clase y miles más

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

Ve esta clase y miles más

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

Lecciones en esta clase

41 lecciones (4h 51min)
    • 1. Empezar: ¿Es este curso para ti?

      1:10
    • 2. Empezar: ¿por qué Squarespace?

      1:06
    • 3. Empezar: crear una cuenta

      2:11
    • 4. Empezar: eligiendo una plantilla

      2:12
    • 5. Tour: Páginas

      2:06
    • 6. Tour: Diseño

      5:30
    • 7. Tour: Comercio y Analytics

      3:15
    • 8. Configuración: Ajustes generales

      4:02
    • 9. Configuración: Configuración de sitios web

      12:12
    • 10. Configuración: Configuración de comercio

      9:21
    • 11. Páginas de presentación: creación de la página

      6:33
    • 12. Páginas de presentación: Estilizar la página

      8:38
    • 13. Páginas de edición: diferentes tipos de páginas

      10:14
    • 14. Páginas de edición: agregar páginas nuevas

      5:03
    • 15. Páginas de edición: Banners

      16:58
    • 16. Páginas de edición: bloques básicos

      13:29
    • 17. Páginas de edición: bloques de galería y resumen

      9:47
    • 18. Páginas de edición: más bloques

      4:08
    • 19. Páginas de edición: bloques de filtros y listas

      4:08
    • 20. Páginas de edición: comercio, gráficos y bloques sociales

      9:52
    • 21. Editar páginas: crear una forma

      10:12
    • 22. Editar páginas: Imágenes

      9:28
    • 23. Páginas de edición: creación de diseños con espaciado

      4:39
    • 24. Páginas de edición: Prefooter y pie de página

      9:52
    • 25. Blogs: Aprende a blogs

      8:53
    • 26. Comercio electrónico: agregar productos

      5:47
    • 27. Comercio electrónico: tomar pagos

      2:31
    • 28. Comercio electrónico: mostrando productos

      3:38
    • 29. Editor de estilo: usar el Editor de estilos

      8:46
    • 30. Watch Me Work: The Home Page

      18:21
    • 31. Watch Me Work: The About Page

      9:06
    • 32. Añadir características: CSS personalizado

      9:24
    • 33. Añadir características: Agregar fuentes personalizadas

      4:49
    • 34. Añadir características: Crear un acordeón FAQ

      4:38
    • 35. Añadir características: usar fuentes impresionantes

      2:40
    • 36. Añadir características: Múltiples menús (avanzado)

      8:46
    • 37. Añadir características: Agregar chat en vivo

      5:45
    • 38. Añadir características: Agregar Facebook Messenger

      6:07
    • 39. Añadir características: Subir archivos en formularios

      7:50
    • 40. Añadir características: Agregar una barra de progreso de lectura

      3:59
    • 41. Añadir características: Crear un menú Mega

      13:50
  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

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

1954

Estudiantes

--

Proyecto

Acerca de esta clase

Muchos de nosotros nos acercamos a los desarrolladores cuando necesitamos sitios web que se hagan e inviertan entre cientos y miles de dólares para que nuestra visión sea perfecta. Quién mejor para crear esa visión que la persona que la tiene, TÚ. En este curso, te enseñaré los fundamentos del diseño web usando Squarespace como tu plataforma. Squarespace incluye un nombre de dominio y un alojamiento para que todo esté en un solo lugar y no tienes que preocuparte por ninguna de las cosas complicadas del backend. Puedes hacer un sitio web completo sin ninguna codificación, pero al final del curso, te enseñaré pequeños bits de codificación CSS (Cascading Stylesheet) para ayudarte a añadir los toques finales a tu sitio website.Please en cuenta:

Este curso está basado en Squarespace 7. Aunque Squarespace 7.1 ya no lo recomiendo todavía, ya que todavía está mucho en curso y tiene muchos errores y fallos.

Conoce a tu profesor(a)

Teacher Profile Image

Vigasan Gunasegaran

Squarespace Website Design Made Easy

Profesor(a)

Calificaciones de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%
Archivo de reseñas

En octubre de 2018, actualizamos nuestro sistema de reseñas para mejorar la forma en que recopilamos comentarios. A continuación, se muestran las reseñas escritas antes de esa actualización.

¿Por qué unirse a Skillshare?

Toma las galardonadas clases originales de Skillshare

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Toma clases sobre la marcha con la aplicación Skillshare. Transmite o descarga para verlas en el avión, el metro o donde aprendas mejor.

Transcripciones

1. Primeros Started: ¿Es este curso para ti?: ¿ usted o su empresa requieren un sitio web? ¿ Has buscado empresas de diseño web de tu zona y has encontrado que las buenas cuestan miles de dólares y las baratas tienen cero experiencia? Bueno, estás de suerte. ¿ Quién mejor para crear el sitio web perfecto de acuerdo a tus estándares que tú mismo? En este curso, te enseñaremos cómo puedes crear la página web más hermosa usando Squarespace como tu plataforma. Los sitios web de Squarespace son extremadamente fáciles de configurar en. La mejor parte es que no necesitas saber codificar. Squarespace es un constructor visual que se reúne simplemente dragón. Deja caer diferentes partes de tu página web, con precios apenas a partir de $12 mensuales. Tampoco tienes que preocuparte por drenar tu cuenta bancaria . El costo mensual de suscripción incluye un nombre de dominio y hosting, por lo que todo está en un solo lugar con soporte para bloques de comercio electrónico, landing pages e integración de terceros. No es de extrañar que cada vez más empresas estén migrando al squarespace. Inscribirse hoy en este curso para ahorrarse los miles de dólares en tarifas de diseño web y la molestia de tratar de explicar su visión a otra persona. 2. Primeros Started: ¿Por qué en Squarespace?: bienvenido al curso de creación de un sitio web de Squarespace. Mi nombre es Ghassan, y seré instructor por el tiempo que dure nuestro valioso tiempo juntos. Antes de comenzar con el aprendizaje real, me gustaría presentarles algunas razones por las que usted o su empresa encontrarán valor en ciberespacio al compararlos con otros sistemas CMS. El propio Squarespace tiene un gran beneficio, y ese es el hecho de que es extremadamente fácil de usar. Todo lo que necesitas para crear una hermosa página web es un poco de tiempo, algún conocimiento básico del layout de squarespace y una visión para el sitio web perfecto En cuanto a precios, squarespace es en realidad bastante justo cuando consideras el hecho de que hospedar un nombre de dominio y un constructor visual están todos incluidos en la tarifa, que comienza en tan solo $12 mensuales. Empezar con squarespace es su cuenta de calificación más fácil, elegir una plantilla y agregar tu contenido. Hay muchas opciones para encontrar sintonía si quieres, y las cubriremos con más detalle a lo largo del curso también. Y para aquellos de ustedes que quieren obtener un poco más de pérdida técnica para cubrir algún CSS personalizado que puede utilizar para hacer que su sitio web se pegue desde otros sitios web de squarespace. Entonces, ¿qué esperas? Da click en la siguiente conferencia y empecemos. 3. Primeros Started: crear una cuenta: De acuerdo, entonces lo primero que vamos a hacer es en realidad muy sencillo. Simplemente nos vamos a registrar para una cuenta, así que nos dirigimos a squarespace dot com y lo firmaremos. Ya que aún no tenemos cuenta, vamos a seguir adelante y registrarnos, y ahora tenemos tres opciones. Obtener un dominio, crear un sitio o construir una tienda. Yo diría Aguanta y conseguir un nombre de dominio por ahora sólo porque podrías cambiar opinión en cuanto a cuál es el nombre de dominio ideal a lo largo del proceso de desarrollo. Así que elige entre un sitio y una tienda. Ahora, no me malinterpreten. Puedes vender productos en el sitio, y eso es lo que hace la mayoría de la gente. Pero hay algunas pequeñas diferencias que resaltarán ahora las primeras diferencias. Páginas web de precios comienzan en $12 al mes. Donde está las tiendas en línea comenzaron $26 al mes. Ah sitio web tiene una cuota de transacción del 3% por cualquier cosa que vendas. Dónde está una tienda en línea no tiene cuota de transacción. Por lo que eso significa que la diferencia de $14 entre los planes realmente lo puedes recuperar Si vendes productos por valor de más de $467. Entonces digamos que quería ah sitio web, así que voy a dar clic en crear un sitio. Entonces ahora vamos a elegir una plantilla ahora para el conocimiento de pick around. Cuando escogí el 1er 1 vamos a ir y cambiar la plantilla más adelante. Pero solo quiero mostrarles cómo crear la cuenta. Entonces vamos a llenar esto. Entonces solo voy a poner en mi información aquí, y vamos a seguir adelante y acordar y registrarnos y crear sitio. De acuerdo, entonces ahora vamos a dar click en inicio, y luego vamos a escoger la categoría. Entonces digamos que esto va a ser un sitio web de negocios. ¿ De acuerdo? Puedes escoger entre nuestro sitio personal de sitio de negocios o para otra persona. Por lo que vamos a coger negocios, digamos, y vamos a escoger una de las categorías en las que cae. Entonces diré que el mío va a ser un sitio web de arte y diseño, y el punto del sitio web es exhibir y crear un portafolio de mi trabajo. Por lo que haremos clic siguiente y luego un título de sitio. Entonces digamos que este es el sitio web de U Demi, y luego lo habremos hecho, y así es como se crea una cuenta y vamos a repasar algunas de las otras características que están disponibles en las próximas conferencias 4. Primeros Started: elige una plantilla: De acuerdo, Entonces en la última conferencia, cubrimos algunos de los conceptos básicos, como crear una cuenta sería escuarespace y rellenar parte de la información básica de tu sitio web , no. Vamos a seguir adelante y cambiar la plantilla en una que se ajuste a nuestras necesidades Así vamos a ir al diseño y luego la plantilla cuando tenemos en este momento se llama Wells. Vamos a instalar una nueva, así que hay decenas de plantillas entre las que elegir y puedes instalar tantas como quieras, y puedes cambiar entre ellas tantas veces como quieras también. Puedes filtrarlos aquí arriba, dependiendo de tu categoría en la que quieras que caiga tu sitio web por lo que lo dejaremos en absoluto, y te mostraré algunas de las que realmente me gustan. Entonces está Bedford Marquee y Allah, así que probablemente sean los tres que uso con más frecuencia para los sitios web de mis clientes. Entonces primero se previsualizará cama deshilachada. Utilicé este para un abogado y otra empresa que brinda un servicio así que tipo de se ve así. Podemos personalizar todo al respecto, así que realmente no te mires demasiado como las imágenes y la redacción apenas más de la estructura. Por lo que tiene como un botón aquí arriba. Ahí vamos. Entonces echemos un vistazo al Marqués. Por lo que Markey es un sitio web de paralaje de una página. Por lo que hay un montón de secciones juntas en una sola página y las imágenes se airen agradables y paralaje , y se puede crear más de una página. Por lo que se ve algo así. Ahora, por fin echará un vistazo a Alex. Entonces en este ejemplo, usaron para una boda. Pero puedes usarlo para cualquier cosa. No tiene que ser una boda. He usado esta plantilla exacta para una empresa de drones que hace fotografía. Por lo que de nuevo, las imágenes de paralaje. Página web de aspecto muy bonito, y esas son las opciones que tenemos. Entonces digamos que el sitio web que vamos a estar usando es para una empresa de desarrollo de sitios web . Entonces seguiré adelante y escogeré el de Bedford porque creo que eso se ve un poco más profesional y bueno, realidad, click en vista previa justo por aquí, Así que nos mostraré cómo se ve y vamos a establecer es una plantilla en vivo. Ahora, no te preocupes por estos aires de aquí. Eso está perfectamente bien. Vamos a volver, vamos a volver otra vez y vamos a entrar en páginas, ¿de acuerdo? Y luego les mostraré cómo podemos modificarlos en la próxima conferencia. 5. Tour: páginas: Oigan, chicos, bienvenidos de nuevo. Por lo que durante las siguientes conferencias iban a estar haciendo un recorrido rápido por squarespace para ver a dónde conducen estos elementos del menú y qué podemos cambiar. Por lo que hoy vamos a estar viendo páginas. Por lo que aquí podemos ver que hay todas las páginas que actualmente tenemos en nuestra página web. Están ordenados en la navegación principal, la navegación secundaria y luego no enlazados. El navegación principal es lo que aparece en la parte superior aquí en tu menú. El segundo, una navegación suele aparecer en el lado izquierdo o en la parte inferior. Es un poco diferente, dependiendo de qué plantilla estés usando en eso. No hemos enlazado estas páginas aéreas que tienes, pero no lo son. No aparecen en ninguna parte de la página a menos que te vincules específicamente a ellos, y te mostraré más sobre eso más adelante. Entonces en este momento, lo primero que notarás es que cada una de nuestras páginas dice Demo al lado de él. Lo que eso significa es que estas páginas de aquí, vine con la plantilla y en realidad no están en vivo ahora mismo, Así que si alguien visita este sitio web aquí mismo, en realidad no verán esas páginas y te mostraré lo que quiero decir. Si tomo ese enlace y voy a tal vez internet sport, donde no estoy firmado en squarespace y entramos en acceso de visitantes y voy a escribir este código solo para ver la página web, verás que esa página en realidad no existe. Y tampoco la página sobre ni la página de noticias porque todas son páginas de demostración, y esto es solo para asegurarse de que los visitantes nunca vean contenido de demostración. Entonces lo que tenemos que hacer es que realmente tenemos que hacer nuestras propias páginas. Entonces hacemos clic en este icono de engranaje justo aquí, y luego podemos hacer clic en Crear y realmente crearemos la página exactamente como se ve este momento. Entonces ahora si miras aparecer al lado de casa, ya no dice Demo. Y si realmente intentas ir al sitio web a través, digamos Internet Explorer, porque ahora mismo estoy usando Google Chrome y estoy registrado en Google Chrome en mi cuenta squarespace. Entonces, no importa a qué página vaya, muestra que está disponible. Entonces estoy viendo cosas en la parte trasera. No realmente cómo lo verían los visitantes. Entonces si voy a Internet Explorer y voy a mi página web. Veremos que ahora está configurada la página principal. Las otras páginas no están configuradas ya que en realidad no hemos hecho vida al contenido de la demo, Pero ésta, estas páginas de inicio, ¿de acuerdo? 6. Tour: diseño: De acuerdo, Entonces en la última conferencia, repasamos lo que había debajo de las páginas. Muchas blancas. Um, hoy vamos a repasar el diseño. Entonces si entras en el diseño, aquí hay bastantes opciones pasarán por cada una. Por lo que bajo logo titular, tienes la opción de cambiar el título del sitio web. Ahora mismo, tengo un set para ti sitio web Demi, que también es lo que aparece aquí mismo. Ahora, también podrías tener un lema. Entonces algo así como sitio web demo. Ahora, algunos templos realmente usarán esto en la página principal como real. Excepto en este momento esta plantilla no lo hace si bajas un poco, hay imagen local. Aquí es donde subirías una imagen que tienes o puedes crear un logotipo. Ahora, muéstrale cómo se ve esto. Realmente no lo recomendaría porque en realidad no tiene tantas opciones. Entonces pondrías algo como si no me hicieras y básicamente solo escoges una imagen que te guste, y eso es todo. Y puedes cambiar de colores haciendo clic en él. Pero de eso se trata. De acuerdo, entonces volveremos a nuestra página web. Entonces esa era una opción de logotipo creativo ahora. Icono del navegador. El favor con. Ahora esto suele ser un formato de punto i CEO o punto PNG, y esta es la imagen que aparece justo en la parte superior aquí, al lado ¿Dónde está el Espacio Cuadrado? O Al lado de ti, Demi o este pequeño D de aquí. Y también es la imagen que utilizan los dispositivos móviles. Cuando guardas un sitio web como marcador en como tu pantalla de inicio ahora, ya que internacional o es un navegador tan terrible, algunas de las versiones anteriores del mismo en realidad no soportaban formato PNG. Los recientes sí. Pero solo para estar seguro, es mejor usar un formato de punto i CEO. Ahora. No hay muchas maneras en las que puedes convertir una imagen PNG a y yo seo imagen sin dejar mantener la transparencia. Por lo que en realidad encontré uno llamado Dynamic Drive. Por lo que solo subes tu archivo PNG dot y en realidad mantendrá la transparencia cuando lo convierta. Entonces solo creas ícono, y luego subirías eso justo aquí, que está fuera de favor con. Y luego finalmente tenemos el reparto social bajo. Entonces si alguien comparte su sitio web en redes sociales, el ícono que aparece sería lo que subas aquí mismo. Ahora, si comparten un post de bloque, automáticamente tomará la imagen en miniatura de la publicación de bloque antes con todas las demás páginas usará el icono que subas aquí. De acuerdo, entonces volvamos al menú anterior. Y el siguiente ítem es plantilla. Eso ya lo hemos cubierto en la conferencia anterior, así que me saltaré eso. Ahí es donde cambias la plantilla. Por lo que a continuación tenemos editor de estilo y echa un vistazo a dilatador de página. Ambos son editoriales de estilo muy similares. Tan solo una vez que cambies los colores, tamaño del texto y todo eso, mientras que revisa Hey, solo específicamente para la página de Checco, lo verás en segundo año. Ahí vamos. Por lo que a continuación tenemos la pantalla de bloqueo para que en realidad puedas proteger con contraseña ciertas páginas de tu sitio web. Entonces si estás desarrollando una determinada página, puedes mantenerla protegida y para que nadie la vea hasta que termines. Entonces esto es básicamente estilo para esa página, así que vamos a volver y luego tenemos la barra de anuncios. El listón de anuncios es lo que aparece en la parte superior de la página web, si lo habilitas. Entonces vamos a un tipo en gran venta. Se presentará aquí mismo, y tú puedes convertir eso en un enlace. Ese show va directo a tu tienda. De acuerdo, así que cerraremos esto desactivará por ahora, y volveremos a la página anterior. Por lo que a continuación tenemos la barra de información móvil, lo que esto suele estar deshabilitado por defecto. Por lo que cuando lo habilitas, puedes elegir que es oscuro o claro. Entonces cuando está habilitado, lo que básicamente podrías mostrar es el correo electrónico, número completo, la ubicación del horario comercial. Entonces esto en realidad es algo que aparece solo cuando la gente visita en un celular en un smartphone en la parte inferior. Y es algo que realmente no se mueve, así que siempre se gana una opción para que ellos realmente llamen You were looking up locations. Entonces solo para mostrarte cómo se vería eso en un dispositivo móvil, si solo miras aquí abajo, mapa de llamadas por correo electrónico y horas, eso en realidad siempre estará en la pantalla sin importar a dónde se desplacen. Entonces así es como se verá la barra de información. Entonces ahora volvamos atrás, y lo siguiente en su menú es insignia basada en curso. Entonces si haces click en Squarespace y básicamente solo está impulsado por squarespace en la parte inferior, no lo sabría realmente no sé por qué alguien habilitaría eso en primer lugar. Entonces lo siguiente es CSS personalizado. Por lo que aquí es donde tenías cualquier CSS que también pueda el sitio Web. Pero no está disponible como opción en el editor de estilos. Iré más intereses más adelante en las conferencias. Entonces por ahora, sólo sé que sí existe. lo que finalmente hemos avanzado aquí. En realidad sólo hay dos opciones. Por lo que hay estilos móviles desactivados, lo que básicamente hace que tu sitio web y se volvió amigable para móviles, lo que en realidad afecta enormemente la optimización de tu motor de búsqueda. Por lo que su página en realidad podría bajar en los rangos de Google, por lo que definitivamente no la deshabilita. Y luego también nosotros el kit tipo de kit I. D. Así que esto es si cuentas con adobe type kit, que te da acceso a una gran cantidad de fondos diferentes. Se trata de un servicio de pago. Si lo quieres, siempre podrías simplemente poner a tu chico tipo. Yo d aquí para que puedas usar esos pedos. Entonces ahora que hemos cubierto la porción avanzada, si volvemos a la siguiente conferencia. Vamos a cubrir lo que hay en el comercio y la analítica. Pero sólo quiero tomarme un momento rápido para hacerles saber que por lo general en este momento o tal vez incluso al final de la próxima conferencia, se les pedirá que dejen una reseña. Ahora eso es algo que tú Demi hace por su cuenta, y no tengo control sobre cuándo surge ese problema. Entonces si surge y sientes que aún no has aprendido lo suficiente como para dejar una reseña, solo tienes que hacer clic en el botón que dice, No quieres dejar una reseña ahora mismo y luego puedes hacerlo más tarde en uno de ti te gusta Pero por favor no te vayas una revisión, y sí quiero decir gracias de antemano por dejar esa revisión. 7. Tour: comercio y análisis: Está bien, chicos. Entonces ahora vamos a echar un vistazo a lo que está bajo comercio y analítica. Entonces si entramos primero en el comercio, sólo hay tres opciones. También son bastante sencillos. Por lo que cualquier cosa que ver con pedidos y cualquier tipo de compras en tu página web se mostrará aquí. Entonces órdenes Bastante sencillo. Tendrá una lista de todos sus pedidos. ¿ Al igual que quién hizo la orden? De lo que p dirijo. Utilizan qué día se hizo en qué artículo? Cuánto cuesta, etcétera. Se puede exportar todo eso a comentar, hoja de valor separada por comas para que pueda importarlo a un software diferente si tenemos uno, y luego tenemos inventario. Para que eso te muestre cuánto producto tienes. Acabo de poner un producto temporal solo para mostrarte cómo se ve. Y luego si volvemos, tenemos descuentos. Por lo que aquí puedes crear cupones y brindar descuentos a cualquiera que quiera realizar una compra en tu página web. Por lo que si hacemos click en agregar descuento, tenemos cuatro opciones diferentes. Entonces cualquier orden. Por lo que es más o menos un descuento de tarifa plana, o podemos tener por ciento de descuento. Entonces, como 10% de descuento sobre la compra total o envío gratis. Y luego también hay órdenes, al menos así que eso es lo mismo que cualquier orden. Excepto que tiene que haber una compra mínima, por lo que cualquier cosa mayor a $100 puede tener $5 de descuento o 10% de descuento para el envío gratis. Y luego hay productos por categoría. Entonces vamos a envejecer, así Camisetas y mascotas. Se puede ofrecer un descuento solo para Camisetas, pero no para pantalones y luego productos individuales de producto específico. Se escoge un producto y que puede tener un descuento. De acuerdo, entonces ahora que hemos mirado eso, volvamos atrás y veremos analítica. Por lo que aquí tenemos un par de opciones diferentes de primero posee visión general de tráfico. Entonces si hacemos clic en eso, te muestra prácticamente a todos los visitantes de tu sitio web. Entonces tuvimos un visitante. Esa persona miraba siete páginas, así que eso probablemente sólo era carne y yo estaba el 6 de noviembre así que podemos mirarla cada hora, semanalmente mensualmente, y luego tenemos uso móvil. Por lo que esto muestra solo a las personas que visitaron en sus smartphones. Entonces aquí nadie ha visitado nuestra página web en nuestro Smart en un smartphone nunca, y luego tenemos suscriptores de RSS, así que eso son más o menos espectáculos que se suscriben a tu sangre. A continuación, tenemos contenido popular, para que eso te muestre todas tus páginas en las que una tiene más vistas de página, para que puedas ver qué es popular, qué está funcionando y qué no. Entonces tenemos búsqueda. Y en Corey's esto es bastante fascinante. Te muestra lo que la gente buscó exactamente en un buscador con el fin de aterrizar en tu página . Entonces, ¿qué? ¿ Escribieron a Google o a Yahoo? Y luego tenemos sitios donde consulta de búsqueda. Entonces esto es lo que buscaron en tu página web. Entonces en este momento, realmente no tengo un botón de búsqueda en mi página web, así que no están buscando nada. Pero si tuvieras un botón de búsqueda aquí arriba o a un lado, entonces se mostraría como lo que la gente está buscando aquí. Y luego tenemos registro de actividades. Entonces esto muestra quién visitó desde dónde y qué página visitaron y en qué fecha Y entonces finalmente, tenemos visión general de ventas, para que más o menos muestre lo que vendes, cuántas unidades vendiste y cuándo lo vendiste. Entonces como puedes ver, la parte de comercio y analítica del sitio web es bastante sencilla, tipo de simplemente te proporciona una especie de retroalimentación sobre cómo van tus sitios web, y luego finalmente tenemos la configuración, y yo se encargará de eso en la próxima conferencia. 8. Configuración: ajustes generales: Está bien, chicos. Por lo que durante las siguientes tres conferencias iban a estar llenando alguna información de negocios. Ahora, el propósito principal de esto es básicamente la optimización de motores de búsqueda. Por lo que los motores de búsqueda como Google sabrán de qué se trata tu sitio web. Por lo que nos dirigimos a los ajustes y en este real solo cubriremos el 1er 4 que caen bajo la información general. Por lo que primero va a ir a la información de negocios aquí. Vamos a entrar a nuestro nombre comercial legal ahora desde visitas, solo voy a hacer esto para mi propia empresa personal. Por lo que rellenaremos un tec B g. De acuerdo, ahora el domicilio legal. Sólo voy a dejar eso fuera, Pero pongo en la ciudad en el estado, así que ese es Tronto, Ontario. Y eso es en Canadá. Ahora, no voy a poner en mi registro fiscal. Yo d. yo sugeriría que sí. Esto sólo va en tus facturas para que la gente sepa, como, a quién están pagando sus impuestos. Por lo que el número de contacto. Voy a poner uno al azar aquí, ¿de acuerdo? Y luego finalmente contacte al correo electrónico. Por lo que pongo aquí en mi dirección de correo electrónico. De acuerdo, Así que algunos templos realmente muestran eso en la página web. Um, éste no creo que lo haga, pero podemos ponerlo en nosotros mismos. Eso no es un problema. Entonces de nuevo, acabamos de poner esto aquí. Eso es para el mapa. Está bien. Perfecto. Y luego finalmente, horario comercial. Ahora tienes un par de opciones que puedes poner aquí estos aire, básicamente los diferentes tipos de formato que realmente puedes usar aquí. Entonces solo voy a poner abierto todos los días porque realmente no tengo tiempo específico. Perfecto. Y vamos a seguir adelante y ahorrar, y luego terminamos. Ahora vamos a regional. Entonces aquí es básicamente donde tus oficinas reales. Entonces no quiero poner el ajuste exacto, pero lo haré. Perdón, no quiero poner la dirección exacta, pero voy a poner, um, como, como, más o menos donde estoy. Entonces primero, el idioma soy canadiense y luego geografía. Entonces otra vez, Canadá, ahí está. Perfecto. Y la ciudad más cercana es Toronto, y la dejaré en Imperial. De acuerdo, entonces a continuación echaremos un vistazo a los permisos dentro de los permisos. Lo que podrías básicamente, dio es dar acceso a otras personas a tu cuenta sin realmente dar tu nombre de usuario y contraseña. Entonces, por ejemplo, puedes invitar a alguien para que te ayude con el sitio web. Simplemente pones aquí su nombre y su dirección de correo electrónico y puedes darles permisos específicos . Por lo que algunas personas sólo pueden adblock poster cambió la redacción, pero no pueden cambiar plantillas o, um, como cambio de plan. Y luego otra cosa que puedes hacer. Otra cosa que debes hacer en realidad es en un autor básico, sobre todo si vas a bloguear. Por lo que pondrías en su nombre, su foto y el perfil de Google plus. Esto también aparecerá en los motores de búsqueda. Y luego hay bio. Entonces nombre, apellido, su sitio web personal y un poco blurb sobre sí mismo y luego dónde están, realmente no tienes que llenar la ubicación, pero los otros dos definitivamente recomendaría. Y entonces la última opción que tienes aquí es transferir la propiedad. Entonces si eres desarrollador, puedes crear un sitio web y luego transferir la propiedad a quien realmente vaya a ser dueño del sitio Web. Pero ten en cuenta que hay que agregar que esa persona es administradora primero. De acuerdo, entonces la última opción en esta sección es construir una cuenta. Hay cinco cosas que podemos recoger Aquí está la primera de facturación. Puedes cancelar tu juicio. Puedes ver cuándo has estado en línea desde entonces y puedes cambiar tu plan entre los que están disponibles debajo de las facturas. Podrás ver una lista de todas tus facturas al mes que pagaste a squarespace. Ahora bien, estas no son las mismas facturas que cuando los clientes hacen pedidos a través de su sitio. Estos son sólo por cuenta propia. El historial de inicio de sesión te muestra todos los diferentes días en los que has ingresado. Y puedes eliminar tu lado haciendo clic aquí y luego eliminar sitio. Y entonces, finalmente, podemos cambiar. Ahora mismo, lo tenemos configurando un sitio web. También podemos cambiar al comercio o a una portada. De acuerdo, entonces eso fue lo que había en la sección general. 9. Configuración: ajustes del sitio web: De acuerdo, entonces echaremos un vistazo rápido a lo que hay debajo del submenú del sitio web. Entonces lo primero que tenemos en la lista es información básica. Entonces en este momento mi sitio web está configurado en un sitio web de negocios, que es lo que elegí cuando creé mi cuenta. Ahora podrías tener ya sea comercio, sin fines de lucro, personal o de negocios, dependiendo de lo que elijas. Y luego vamos a escoger la descripción del sitio. No voy a escribir uno nuevo. Simplemente voy a copiar y pegar lo que tengo en mi propia página web personal. Ahora les voy a dar una propina que les va a ahorrar mucho dolor de cabeza. Vale, si solo copias y pegas desde otro sitio web Ya ves, tengo esta fuente se ve un poco rara y grande en comparación con como el resto de los fondos de aquí. Entonces lo que pasó es que en realidad tomó el estilo del texto que estaba aquí. Entonces cuando copie y pegue texto, desea hacer clic aquí mismo, que tiene pegar es texto plano. Y entonces ahora es una fuente más pequeña. Es los hallazgos adecuados Cómo debe verse. Está bien. También tienes la opción de desactivar la promoción de squarespace Qué es eso si tus sitios web son de muy buen aspecto y Squarespace piensa que aunque en realidad lo incluirá y lo promocionará por ti. Entonces, por ejemplo, si vamos a esto es como la página de registro inicial, Así que a partir de aquí y digamos que habíamos escogido esta tasa de plantilla si realmente te desplazas hacia abajo en lugar de previsualizar, se mostrará te lo que las empresas están usando esta página. Por lo que estos son reales qué sitios crearon usando la plantilla específica. Ahora, podrías estar incluido ahí. Squarespace piensa que eres digno. De acuerdo, entonces ahora que tenemos esa configuración, sigamos adelante y salvemos y regresaremos y luego entraremos a dominios. Entonces dominio es lo que la gente realmente escribiendo aquí para venir a tu página web. Entonces esto es lo que le dijo en este momento, y en realidad no me gusta. Pero esto es lo que viene gratis con el juicio. Cuando realmente compres un plan, en realidad obtendrás un dominio gratuito. Entonces si vas aquí y escribes en qué dominio te gustaría, así que dot c a o dot com. Te dará una lista de lo que está disponible por lo que prácticamente cualquier cosa que sea $20 es gratis e incluido, um, con tu paquete real. Pero cualquier cosa más que eso, tendrás que pagar la diferencia. De acuerdo, y entonces iremos adelante y regresaremos. Y si tienes un dominio que compraste a Go Daddy, tu nombre barato, en realidad puedes conectarlo aquí. Es bastante sencillo. La mayoría de los populares lo hace automáticamente, pero cualquier cosa como uno y uno. Creo que en realidad tendrías que entrar y cambiar el nombre de dominio. Prepárese usted mismo. Ahora entraremos al correo electrónico. Esto en realidad es bastante guay. En realidad se puede obtener un email de dominio, Así que si tengo un dominio que fuera www dot a b g tec dot c a. podría conseguir un email que es info en un b g tec dot c a.Entonces, primero que nada, tienes que conectar un dominio antes de que puedas hacer eso. Pero este correo electrónico está conectado a Google maps, por lo que obtendrás prácticamente cualquier cosa que se incluya con Google APS incluido con tu dirección de correo electrónico . Ahora, las redes sociales son definitivamente una parte importante de un sitio web, sobre todo porque ayuda bastante con tu S e o. Ahora, Squarespace hace esto muy fácil. Solo tienes que ir a cuentas conectadas y luego puedes hacer click en conectar cuenta en. ¿ Escoges qué plataforma de redes sociales quieres conectarte? Algunos de ellos en realidad llamaron que tienes que iniciar sesión antes de poder usarlo. Por ejemplo, Instagram Y lo que eso hace es que te da la opción de poner casi tirar todos tus datos de Instagram. Por lo que todas tus imágenes y se muestran en una página para que puedas tener, como, una corriente de imágenes y puedes hacer lo mismo para Facebook o Twitter. En realidad tendré una de mis cuentas o tal vez algunas de mis cuentas, solo para que veas cómo va el proceso. Por lo que haré clic en Conectar cuenta Hará Facebook primero. Ya estoy firmado en Facebook, así que automáticamente me debería firmar aquí. Ahí vamos. Y luego sale el pop up. Así mostró el ícono social. Entonces aparecerá donde queríamos a nuestro árbol donde se va a mostrar, en realidad, Y entonces este es mi perfil de Facebook, y no quiero mostrar que en realidad quiero mostrar una página B g tec, ok. Y el testamento pegó seguro. Entonces ahora aquí abajo, ¿dónde tiene el ícono? En realidad va a aparecer. Ahora. Cualquier red social que me adhiera se mostrará aquí. Entonces, por ejemplo, si conecto Twitter a continuación, sigamos adelante y busquemos Twitter. Vamos a buscarlo. En realidad, Twitter, Aquí vamos. Ahora bien, éste, probablemente sólo inicie sesión en mi cuenta personal y luego autorice. Y luego ahí vamos. Por lo que ahora se agregó Twitter, y tal vez quiero ocultar esto del pie de página. Pero aún así quería estar conectado. Yo haría esto. Por lo que ahora en el Pie de Página no está apareciendo en realidad. Si quieres agregarlo, solo tienes que revisar donde dice mostrar icono social y dónde está la opción de descargar datos. Es así como realmente descargas datos de Twitter para que pueda mostrarlos en una página. Y te lo mostraré más adelante en una de las conferencias también. De acuerdo, entonces eso estaba conectado. Cuentas a continuación es marketing, y primera opción en marketing es para S E O. Y aquí podemos rellenar la descripción de nuestro buscador, que es lo que aparece debajo de tus sitios web. Estabas bien en Google o ser o algo así. Por lo que de nuevo, solo copiaré y pegaré la descripción de mi sitio web personal. De acuerdo, Ahora éste solo es texto plano ahí, así que no hay opción, en realidad pega como texto plano. Ah, formatos de título de página principal o lo que quieres que mire tu página de inicio. Entonces en este momento es igual de por ciento s que si subimos aquí, es el título de nuestra página web. Por lo que te mostraría Dem unc y luego cobraría serían cosas como Blawg. Entonces lo que mostraría el bloque es y ahora mismo es por ciento c Así que cuál es cuál así sería blawg y luego título y luego finalmente artículos. Por lo que esto es como un post de bloque específico aparecería como el bloque el nombre de la publicación de bloque . De acuerdo, entonces vamos a seguir adelante y guardar esa descripción que ponemos ahí y vamos a volver y luego tenemos botones de compartir. Por lo que estos botones de aire que aparecen en la parte inferior de páginas bloqueadas y permite que las personas compartan en diferentes redes sociales. Normalmente me gusta revisar todo porque ¿por qué no? Al igual que pueden compartir donde quieran me da más exposición y luego pin it botones nuevo. Esos son los pequeños botones que aparecen en la esquina que dejan a la gente alfiler. A mí me gusta habilitar solo para el blog para que ese botón no aparezca todo el tiempo. Entonces se verá así Y podemos cambiar cómo parece que podríamos hacerlo más pequeño, grande, grande, y podríamos ser un círculo rectangular y blanco, rojo o gris por lo que ahorraremos volveremos y luego a la página de Facebook. De acuerdo, entonces esta opción nos permite enlazar nuestra página de Facebook a nuestra página específica de la galería. Entonces, por ejemplo, si me hundo un b g tec, que es mi verdadera página de Facebook, que está justo por aquí, en realidad agregará una parte superior al lado izquierdo aquí que dirá galería ahora, otro, cualquier cosa que podamos hacer es realmente instalar una página. Entonces una de las páginas que tengo aquí arriba tan a casa sobre noticias, léame. Podría poner uno de esos a un costado aquí también, así que es realmente genial. Forma de mantener las cosas entintadas. Si te gusta. Ahora no lo voy a configurar, pero tú puedes. Y luego a continuación tenemos crédito de Google AdWords. Entonces obtienes un crédito. Por lo que 100 dólares de crédito con cualquier plan de negocios que tengas con squarespace Tan ordenada poca manera de empezar a publicitar tu sitio web y comercializarlo a continuación irá a bloguear. Entonces aquí tenemos. Podemos cambiar cómo está la u R l así que cómo está esto en un poste de bloque En este momento. Está listo para ser mi página web slash El año fue publicado slash el mes en que se publicó slash la fecha fue publicada y luego slash título. no me gusta realmente. Normalmente me gusta. Sólo sé el título. Entonces lo dejaré así y luego para comentarios. Bueno, primero decir gorda y luego habilitar comentarios. Me encanta habilitar comentarios Jessica's cuando la gente deja comentarios que está trayendo más tráfico a tu sitio web y dándote más validación social. Entonces habilitaré eso y luego nos dirigiremos hacia atrás Ahora discute la forma en que la gente puede dejar comentarios usando discusión en lugar de espacios cuadrados construidos en sistema de comentarios. Realmente no uso mucho discutir, así que no voy a estar poniendo nada aquí. Encuentro que el sistema que tiene squarespace funciona naturalmente bastante bien. Está bien, tan simple. El gusto está habilitado para que la gente no tenga que registrarse. Entonces eso está bien. Y las páginas móviles aceleradas encenderán eso porque esa es en realidad una forma realmente genial que la gente pueda compartir tu publicación de bloque en redes sociales. Por lo que en realidad guardó y volverá. Por lo que a continuación tenemos Seguridad y SSL. Esta es en realidad una característica que acaba de llegar a Squarespace muy recientemente antes de lo que pasaría es cualquier página de check out donde la gente pondría en su información de transacción como información de tu tarjeta de crédito y todo lo que era SSL, por lo que era muy seguro. Pero ahora se puede asegurar todo el sitio web, así que por defecto eso está apagado. Pero vamos a seguir adelante y hacer clic en seguro y luego aquí abajo puedes establecer una contraseña para tu sitio web si aún está en desarrollo. Mantengo eso deshabilitado solo para que si estoy trabajando con un cliente, puedan ver su sitio web sin iniciar sesión y van a ir adelante y en lo último bajo el sitio web Tab está avanzado. Por lo que aquí tenemos las cuatro viejas páginas de cuatro. Entonces si tuvieras una página web que eliminaste, pero la gente sigue yendo a ella. Automáticamente los llevará a una página de cuatro a cuatro, que se ve así. Y luego pueden simplemente hacer clic a través de una de sus otras páginas en su lugar. De acuerdo, así que en realidad podrías hacer de esa tu página principal, así que en cualquier momento que visiten una página de sitio web que ha sido quitada, los redirige al hogar. Pero me gusta salir al 404 para que sepan que la página ya no existe, y dejaron de vincularla. Por lo que ahora podemos cambiar el editor de texto predeterminado. Si quisieras de texto rico un rebajas, yo diría Leave. Es texto rico. Sólo porque mark down hace que sea un poco más difícil conseguir que se introduzcan cosas. De acuerdo, así que ahora iremos a escape key. Entonces esto es básicamente iniciar sesión con este Kiki. Entonces si no estás registrado, si alguien viene a tu página web y quiere iniciar sesión, solo presionan escape. Esto lo hace realmente fácil cuando todavía estás desarrollando el sitio web, pero creo que es como un futuro innecesario una vez que se ha ido la vida. Por lo que en realidad lo desactivaré. No, porque casi puedo garantizar que me olvidaré de desactivarlo más tarde porque no quiero que los usuarios puedan iniciar sesión en el sitio web presionando escape. Ahora, importación y exportación es una parte sumamente importante del squarespace. Si alguna vez decides dejar Squarespace o venir a Squarespace después de usar uno de los CMS es, puedes traer fácilmente toda tu poste de bloque desde ahí. Entonces, WordPress tumbler, la versión más antigua de squarespace Blogger Shopify o Big Cartel. Por lo que te ahorrará bastante tiempo tener que copiar y pegar de nuevo tus publicaciones de bloque reales . Por lo que a continuación, contamos con servicios externos. Entonces aquí podemos agregar un número de cuenta de Google Analytics si queremos un poco más de información analítica de la que proporciona Squarespace y luego tu etiqueta asociada de Amazon. Por lo que si alguna vez vendes productos alguien recoge tu real de dinero de referencia de Amazon, puedes ingresar tu etiqueta aquí mismo y luego desarrollar a distancia. Abre squarespace para que en realidad pudiera cambiar cualquier cosa al respecto que tú quieras. Yo diría que lo mantengas apagado a menos que sepas lo que estás haciendo sólo porque una vez que lo enciendes , en , realidad no hace sitio web. Vamos a actualizar más. Por lo que Squarespace dejará de actualizarlo porque parece que sabes lo que estás haciendo. De acuerdo, así que asegúrate de dejar eso apagado y luego la inyección de código. En realidad vamos a volver a esto más adelante porque esto es extremadamente importante. Um, aquí puedes agregar cosas como tu código de Google Analytics. Si no quieres usar la etiqueta en la sección anterior, puedes agregar abrigo al pie de página, al encabezado, a las páginas bloqueadas, todo ese tipo de cosas buenas. Está bien. Y entonces tenemos ustedes son l mapeo. Este tipo de va de acuerdo con la página 404 anterior, y agrega un poco de características a eso. Así que digamos que tenías un blawg y originalmente era tu sitio web slash plug y luego lo cambias a un sitio web slash info y tips. En realidad puedes redirigir el sitio web para que cualquiera que visite tu antiguo bloque sea redirigido al nuevo bloque. Entonces otra vez, extremadamente bueno. Si estás haciendo muchos cambios grandes, y entonces finalmente es hacha de imagen. Si por defecto, esto está apagado, lo que hace es en cualquier momento que subas una imagen a squarespace jalará en el título de la imagen y las etiquetas. Si ya tienes eso poblado, mayoría de las imágenes que subas no tendrán eso de todos modos, pero puedes habilitarlo solo para que puedas guardar un segundo o dos cuando importes imágenes que sí lo tienen para que podamos hacerlo ahí y luego vamos a volver atrás otra vez y eso cubre todo en la sección de la página web y la próxima vez irá por encima de la sección de comercio y luego finalmente se hará con la configuración de los ajustes y podemos pasar al sitio web real . 10. Configuración: ajustes de comercio: De acuerdo, chicos, espero que estén emocionados. Esta va a ser la última conferencia que va a cubrir la información de back end de la página web. Por lo que a partir de la próxima conferencia, vamos a cubrir la creación del sitio web real. Entonces las cosas divertidas. De acuerdo, entonces Y debajo de la sección de karma, hay un par de opciones. Voy a pasar por ellos, y luego terminamos. Está bien. A mí me gusta sacar esta cosa aburrida del camino. En primer lugar. Cuando lo haga, se dice, sólo porque de lo contrario, sé que me voy a postergar, y no se va a hacer a tiempo. De acuerdo, Así que primero entrarán en pagos, acuerdo. Y pagos. Tenemos opciones para dos métodos diferentes. Contamos con raya y PayPal para raya. Todo lo que haces es hacer click connect stripe y te llevará a un enlace donde podrás registrarte. Por lo que haré esto un poco más grande para que puedas ver el formulario completo para que puedas iniciar sesión. Y si no tienes cuenta, solo tienes que dar click en, inscribirte. Entonces una vez que golpees, regístrate, lo llevará a un formulario para que puedas crear una cuenta, y luego podrás seguir adelante y llenar tu información y llevarla a partir de ahí. para PayPal en este momento. Para mí, dice en beta, pero para ti, dependiendo de cuándo veas el curso, quizá no. Entonces PayPal es en realidad que acaba de salir hoy, en realidad. Entonces, ¿ cena squarespace? Um, una opción para que realmente uses eso hasta ahora. Entonces lo que puedes hacer es que puedas ingresar dirección de correo electrónico. Entonces, por ejemplo, si entro a mi negocio uno y luego entro el código para que no se te pida un código Yo soy porque ya he intentado iniciar sesión un par de veces, Así que si haces click en siguiente, te llevará para crear una cuenta. Ahora, eso es porque ahora mismo esta dirección de correo electrónico no forma parte de una cuenta de negocio. Entonces si tienes una dirección de PayPal con la cuenta de negocio, por ejemplo, si entro a mi gente real, así que ve aquí y luego vamos allá vamos, E h. Y entonces sigo adelante y voy a continuación. Se hizo por última vez de firmar, ya que en realidad ve que esa es una cuenta. De acuerdo, así que esa es yo acostumbraba a ponerme esa trampa. Y también puedes cambiar la moneda de tu tienda aquí de USD a otra moneda diferente. Entonces lo siguiente es checar, y desde aquí puedes conectar tu chimp de correo pick out si quieres recolectar las direcciones de correo electrónico de las personas . Por lo que en un futuro, si tienes una venta en tu sitio Web, puedes enviarles un boletín informativo. Entonces tenemos el país por defecto. Entonces si solo vendes a gente en Estados Unidos, por ejemplo, que tendría sentido establecer el país por defecto a Estados Unidos, Así que les ahorra una sensación menos que tienen que llenar. Después tenemos la dirección de envío y facturación, por lo que automáticamente puedes configurar la dirección de envío para que sea la misma que la dirección de facturación. Ahora bien, si el cliente se lavó después debido a diferentes direcciones, solo pueden revisar un botón de radio, y luego tienen la opción de hacerlo. Y luego después de eso, hemos expresado check out. Entonces, ¿qué? ¿ Eso es esto? Digamos que solo tienes un producto en tu página web. Realmente no tiene sentido que el cliente agregue eso a un carrito y luego y luego hizo clic en el botón de check out. Entonces lo que esto hace es que reemplace el botón de agregar al carrito por el botón de compra. Por lo que tan pronto como hagan clic en compra que automáticamente va a checar. De acuerdo, así que lo siguiente es el estilo del carrito de compras. Aquí tenemos la opción de cambiar el esquema de color del cheque de deleite de página en lugar de oscuro. Entonces en este momento nuestro sitio web es ah, fondo blanco con texto negro, y la página de check out se verá similar. Entonces digamos que cambias este fondo a negro. Se quiere que el texto sea realmente blanco en su lugar, y que todos los demás colores sean un color claro también. Y para eso es este botón. Y ahora el siguiente número de pedido. En realidad, sólo que es bastante básico. Es el número que aparece en tu factura para el próximo pedido que realiza un cliente para que puedas iniciarlo en uno. Pero digamos que llevas un tiempo haciendo negocios sin tu sitio web squarespace, y ya has hecho 100 pedidos que realmente podrías empezar a 101 para que no te confundas entre las facturas y luego tenemos campos adicionales. Por lo que desde aquí puedes recolectar información extra del cliente en el check out. Por lo que se recoge el número completo con dirección de envío y facturación. Personalmente no necesito número completo de mi negocio. Apagaré eso y luego también tienes un formulario personalizado de página de check out. Entonces digamos que haces algo como vender entrenamiento personal en línea. Se puede cobrar a alguien peso inicial. Están terminando. Espera, um, los ejercicios que les gusta hacer y lo que no les gusta hacer todos sin tener que enviarlos personalmente por correo electrónico . Entonces si acudes a información adicional para que ese sería el nombre del formulario y luego podrías agregar un campo extra y podemos hacer que tal vez una casilla de verificación, y entonces podemos llamarlo ¿qué ejercicios te gustan? Y luego te mostraré, en realidad, cómo lo agregas formas más adelante también. Pero básicamente, es una casilla de verificación por línea. Entonces se pone en cuclillas y luego levantamientos muertos. Y deletreé eso mal. Entonces muertos se levanta bien, y esto es lo que aparecería, como en la propia forma. Y realmente no necesito información adicional. Entonces se ve algo así. Ahora, en realidad no voy a usar esto para mi sitio web porque realmente no lo necesito. Entonces haré clic en descartar, y en realidad no usaré el formulario. Pero, quiero decir, eres libre de usar, y puedes ver qué tipo de características poderosas que se suma a tu check out. Entonces eso fue todo para campos adicionales, y ahora iremos a revisar las políticas de tiendas de edad. Por lo que en las políticas de tienda tenemos tres casillas diferentes podemos llenar la política de devoluciones, las condiciones de servicio y la política de privacidad. Entonces, por ejemplo, algunas cosas que podrías poner aquí no es retorno después de siete días, por favor no compartas este producto con nadie más. Si es como un producto digital, como un libro E, que después de la política de privacidad del modo muñeca, algo así como no vendemos tu dirección de correo electrónico a otros terceros, ese tipo de cosas. Ahora puedes en realidad Google para las políticas de privacidad y usar como una plantilla que te puedes arreglar trabajo del dedo del pie para tu negocio. O puedes hacer que tu abogado lo haga por ti sin que probablemente sea lo inteligente que puedes hacer. Y luego finalmente tenemos facturas. Por lo que bajo las facturas debilitan básicamente cambiar cómo aparecen los ataques en la factura. De acuerdo, así que sólo echa un vistazo a esto también. OK, entonces nos dirigimos hacia atrás, y luego desde el comercio y yo iremos a las notificaciones. Por lo que ahora en cualquier momento alguien ordena algo desde tu sitio web, automáticamente reciben un correo electrónico. Ahora, si intentan responder a ese correo electrónico, probablemente no lo consigas solo porque se envía automáticamente a ninguna respuesta en squarespace start info. Entonces otra vez, puedes cambiar esto Si quieres, um, um, para que si alguien tiene una pregunta sobre el pedido, solo puedan golpear respuesta desde la página del pedido, y luego tenemos la dirección de correo electrónico de desde. Entonces cada vez que un cliente recibe un correo electrónico, esto es lo que se mostrará debajo de yo realmente recomendaría dejarlo tal como está, a menos que tengas tu propio dominio personal, como un b g tec dot c a. Y tienes el email info de dirección sólo porque si usas algo como Gmail o Hotmail , son nueve veces las que asisten. Se marcará como spam, y luego ni siquiera lo conseguirán, o irá directamente a su correo no deseado o correo basura. Entonces otra vez, sólo déjalo como está ahora. Puedes recibir correos electrónicos automáticamente si tus artículos caen por debajo de un determinado nivel de stock. Entonces digamos que siempre tienes 10 acciones y de repente baja a dos porque alguien ordenó ocho. Entonces automáticamente recibes un correo electrónico diciendo: Oye, Oye, te estás quedando bajo en este artículo. ¿ Tienes más? Y después tenemos correo electrónico personalizado. Por lo que aquí realmente puedes cambiar cómo se verá el correo electrónico cuando se esté enviando. Por lo que para orden confirmado. Por lo que una vez que lo confirmes, ordena. Pero el correo se verá así que puedes cambiar esto. Y esta es una convención que squarespace utiliza para el número de pedido y qué producto es todo ese tipo de cosas. Por lo que volveremos atrás y también puedes personalizar el pedido cumplido y el pedido re financiado y también el encabezado y pie de página que aparece en el correo electrónico. Por lo que en el encabezado puedes poner algo como Gracias por tu pedido. Entonces gracias por sí, y de esa forma eso se agrega automáticamente a cada correo electrónico relacionado con pedidos. Entonces podemos guardar eso, Y luego otra vez, esto es un pie de página y puedes enviar un email de prueba solo para ver cómo se vería. Entonces eso fue para el encabezado y pie de página. Entonces vamos a volver desde que cubrimos esto y luego enviamos. Entonces aquí es bastante básico. Puedes tener diferentes opciones de envío, por lo que tarifa plana o dependiendo del peso. Por lo que tarifa plana de digamos que se llamaba envío al día siguiente y y luego podemos poner como una tarifa base. Entonces digamos que todo el envío va a costar $10 luego $2 por cada artículo que el pedido y podemos establecer eso a solo un país específico. Entonces en este momento está en cualquier parte de Canadá, consigue ese envío, y luego podemos agregar otro para un país diferente. Entonces tal vez a Estados Unidos serán 20 dólares. Por lo que al día siguiente, envío de nuevo y será de $20 luego $10 por artículo. Y ahí es donde la U. S. Así que cerraremos Canadá y sumaremos Estados Unidos. Entonces Estados Unidos está bien, y luego digamos que son los únicos dos lugares que enviamos, así que nos devolveremos el golpe. Y luego, aunque eso armó a continuación sus impuestos. Por lo que aquí en realidad se puede configurar una tasa impositiva específica. Entonces, por ejemplo, agregar país. Veamos Canadá, y usaremos Ontario, por lo que HST sería del 13% y usted puede cobrar los ataques reales a los envíos y servicios también en lugar de solo productos. Porque de nuevo, tus productos pueden ser algo que envíes o un servicio como entrenamiento personal para que puedas cobrarlo en ambos y luego ahorraremos y regresaremos. Y entonces finalmente tenemos donaciones. Entonces si tu sitio web si por la iglesia Laker y estás recolectando dinero como donación, algo así, puedes enviar un mensaje en cualquier momento que alguien realmente dona a tu sitio web y puedes cambiar lo que dice el mensaje, cuál es el título del correo electrónico, y luego también puedes enviar un email de prueba solo para ver cómo se verá. De acuerdo, así que lo hemos cubierto todo ahí y lo hemos cubierto todo bajo comercio ahora. Entonces si volvemos atrás y ahora todo bajo configuración está hecho, por lo que a partir de la próxima conferencia se empezará con la creación de un sitio web real. Entonces espero que ustedes estén emocionados por eso 11. Páginas de portada: creación de la página: De acuerdo, chicos, como prometimos, finalmente vamos a meternos en las cosas divertidas. Así que creando páginas reales Sólo un recordatorio rápido. Como mencioné antes en las conferencias. Las páginas que dice demo al lado de ella aún no están del todo en vivo. Entonces cualquiera que visite esas páginas, así que si realmente hacen clic a través de esas páginas, en realidad no mostrará nada. ¿ Dónde está la página principal aquí? Ya la he convertido en una página natural, pero no quiero esta mudanza mi página principal justo fuera sólo porque no tiene nada que ver con mi negocio. Entonces voy a armar un durazno de portada. De acuerdo, entonces la conferencia de hoy es sobre portadas. Entonces lo recién que vamos a hacer es que vamos a dar click al plus justo aquí arriba. Durante cuánto tiempo podemos elegir qué tipo de página queremos crear. Entonces vamos a seguir adelante y dar clic en portada, y vamos a nombrar puede que sea página de inicio. Está bien. Y entonces ahora este es un menú que sale estas páginas aéreas que yo recomendaría que usó mientras estás en desarrollo. Tan solo para que la gente sepa que se está trabajando en el sitio web y que deberían volver más adelante. También puedes recolectar direcciones de correo electrónico aquí para que realmente puedas enviar directamente un boletín cuando tu sitio de trabajo esté funcionando. Entonces lo primero que haremos así ir a cambiar de diseño, escogeré uno que nos guste. Ahora hay bastantes aquí. Se puede filtrar de nuevo. Algunos de ellos están forrando páginas. Algunos de ellos son de perfil. Por lo que mostrarán, como, tu imagen o como, una imagen de algo, y luego mostrarán una descripción. También podrías tener audio, que se reproducirá. Por ejemplo, éste toca una sola canción o canción musical. ¿ Dónde está este lugar? Una lista de reproducción que puedes subir. Entonces tienes video. Por lo que conectas un video o video de YouTube y se reproducirán una vez que alguien presione el botón de reproducción y luego tengas ubicación. Entonces si estás abriendo una tienda, puedes mostrar dónde se va a abrir solo para que la gente lo sepa antes de tiempo. Y luego finalmente, Twitter. Para que puedas mostrar tu reciente tuit en la página de forro real, así que en realidad escogeré la página de aterrizaje, y usaré este. De acuerdo, entonces cuando eso se abra, lo que voy a hacer es ir adelante y golpear save, y luego vamos a volver atrás y ahí van a cambiar los diferentes aspectos de esta página. Entonces el primero es el branding y el texto para que podamos cambiar las palabras que aparecen justo arriba en la parte superior . Aquí. No quiero usar palabras. Voy a usar mi logo. Por lo que vamos a ir el logo del dedo agregará una imagen. Y mi imagen es, creo aquí abajo. Entonces aquí mismo y luego logo y solo subiré eso. Ahí vamos, y ese logotipo aparecerá en tan solo un segundo. Ahí vamos. Ahora seguiremos adelante y cambiaremos el titular a que venga pronto y el cuerpo a solo mi línea de etiqueta . A lo mejor. De acuerdo, y el vamos a seguir adelante y ahora es seguro. La mayoría de los diseños, al igual que las diferentes capas que podríamos elegir, tienen configuraciones similares bajo branding y texto, por lo que no deberías ver nada a diferente en su siguiente arriba. Tenemos medios de comunicación, así que este es el trasfondo. Entonces primero quiero descargar un fondo que realmente no me gusta. Esto realmente no coincide con lo que estoy tratando de hacer, Así que vamos a ir a imágenes gratis. Entonces los dos que más me gusta usar son picks obedecen y pixels. Pondré los dos en la descripción para que ustedes puedan seguir adelante y descargar imágenes de su estos aire gratis para usar imágenes que no tienen que poner ninguna, uh, uh, hacer de donde lo consiguieron o quién tomó la foto, cualquier cosa así. Es solo gratis y libre de regalías. Entonces sigamos adelante y tecleemos, tal vez sitio web, y veremos qué sale. Pasé por lo mismo por aquí. De acuerdo, entonces eso es lo que muestra un piano. De verdad como cualquiera de estos. A lo mejor esto y por aquí. Supongo que quizá esta sea bonita, así que vamos a seguir adelante y lo descargaremos. Yo recomendaría usar esto para este tamaño porque el tamaño máximo permitido en squarespace es de 1600. Entonces no tiene sentido usar una imagen de esta grande. Por lo que vamos a dar click en eso y vamos a seguir adelante y descargar. De acuerdo, así que eso está descargado. Ahora mira aquí y sube la imagen para que podamos usar Getty o simplemente una imagen regular desde tu computadora. Las imágenes Getty son imágenes pagadas, pero se puede ver cómo se verán antes de usarlas, y tienen bastante selección, por lo que Por ejemplo, si escribo en sitio web, estos son los diferentes los que vienen para que puedas usarlos con un sello hasta que realmente estés listo para salir a la vida. Entonces hay bastantes imágenes ahí arriba, así que subiré mi propia imagen y ahí hay cuando descargado y eso es subir perfecto. Entonces voy a seguir adelante y ahorrar y vamos a volver, OK, y al siguiente arriba tenemos acciones. Por lo que este sería como este botón de contacto aquí mismo. Entonces vamos a las acciones ahora mismo tenemos un botón de contacto que lleva a un contacto o en realidad lo siento, en realidad directo al sitio web de squarespace. Um, podemos dejarlo así. Podemos agregar como un menú. Entonces sería como en casa sobre contacto para que podamos tener diferentes páginas ahí dentro, Pero solo lo dejaré como botón y lo pondremos En realidad, no, ni siquiera pondré un botón. Simplemente pondré en un formulario así que se notifiquen en él formulario y se pondrán Sí, van a preguntar su nombre y solo dirección de correo electrónico. Realmente no necesito tema y mensaje. Si fuera un formulario de contacto que lo haría pero solo voy a conectar esto al chimpancé de correo. Así que hazlo, um, forma chimpancé macho y se irá de almacenamiento, y luego podremos conectarlo al chimpancé de correo, o podemos conseguir que se envíe el dedo del pie automáticamente a nuestra dirección de correo electrónico. Entonces así es como conectarías un salto masculino. Simplemente haz clic aquí e inicia sesión. En realidad les mostraré a ustedes cómo luce eso. Entonces vamos a seguir adelante, voy a iniciar sesión. Perfecto. Y ahora sólo tengo que escoger la lista. Creo que sólo tengo una lista. Ahí vamos. Ve, ve por eso. Y luego bajo avanzado, podemos cambiar cómo se ve el botón enviar. Y lo que son lo que pronuncia su dado después de que presenten algo. Entonces vamos a seguir adelante y vamos a ahorrar eso. Para que así la gente pueda inscribirse en una lista de correo. ¿ Cuándo es mi sitio web se va a la vida? Entonces, ¿será algo así? Está bien. No, no me gusta cómo eso dice forma militar, en realidad, en realidad, Así que volvamos atrás y cambiemos la grasa para que nos notifiquen. Perfecto. Entonces vamos a ahorrar ahorrará eso y vamos a volver atrás. Entonces a partir de aquí, la siguiente opción son los iconos sociales. Entonces Eso es básicamente solo una casilla de verificación si quieres mostrarte tus iconos sociales aquí abajo o no. Y obviamente quiero mostrarlo solo para que la gente pueda obtener más información antes de que mi página web se vaya. La vida tan segura y volveremos ahora. Hay más cambios que podemos hacer a esta página, y eso está bajo la sección de estilo. Pero voy a repasar eso en la próxima conferencia sólo porque hay un poco más de detalle ahí dentro. De acuerdo, nos vemos pronto. 12. Páginas de portada: cómo estilizar la página: De acuerdo, entonces seguiremos donde lo dejamos. Estábamos a punto de echar un vistazo al sub menú de estilo, así que entraremos ahí ahora mismo. Entonces esto es realmente como se verá el editor de estilos para las otras páginas también. Habrá más estilos que realmente puedas agregarlo, pero esto es solo para la portada. ¿ De acuerdo? Entonces cuando en realidad me dejas solo mostrarte muy rápido. Entonces cuando hago clic en la página de inicio que creamos y luego voy a letra de estilo, eso es sólo para el estilo en esta página de la portada. tanto que si entramos en diseño y luego editor de estilo, eso es en realidad para todo el sitio web menos la portada. De acuerdo, así que las portadas tienen su propio editor de estilos específico. Entonces vamos a la portada. Volveré en el editor de estilos. Lo primero que veo de inmediato es que quiero mi logo. Tres más grandes. Correcto. Entonces hay un par de cosas que puedes hacer en el lado izquierdo. Se puede buscar el branding y la imagen, y luego se puede aumentar y disminuir. Aquí haría las cosas más fáciles. En realidad puedes hacer click en tu logo, ya que eso es lo que quieres editar y luego automáticamente subirás solo una marca. Y entonces puedes aumentarla y disminuirla aquí. Ahora, el máximo que permite a través de su deslizador es de 100 píxeles, que es aproximadamente así de grande. Yo quería un poco más grande. Entonces lo que voy a hacer en realidad es hacer clic aquí, y entonces en realidad puedo hacerlo un poco más grande de lo que me permite el deslizador. Tantos. 25 Entonces voy a ahorrar, y luego volvemos a mostrar todo para que podamos ver todo a salvo. No se llevó a cabo del todo ahí. ¿ En serio? Ahora otra cosa que noto es que próximamente? Creo que es un poco demasiado grande. Tan rápido directamente en él o de nuevo, te pones en el lado izquierdo, ve a titular. Entonces voy a dar clic en él, y no quiero que sea genial. Es un poco difícil de ver. Así que pegarse con negro o tal vez en realidad leer. Sí, nos quedaremos con el rojo, Ok. Y luego cambiaremos la fuente para que prácticamente puedas escoger cualquiera de las fuentes aquí. Sí, lo dejaremos en eso no es una diferencia mayor, y luego cambiaremos el tamaño para que sea un poco más pequeño. Ahí vamos. Y hará que los sitios web bellamente elaborados sean un poco más grandes y hará que ese negro sea un poco más grande. De acuerdo, así que unos 45 libros se ven bien y no parece que podamos hacerlo más grande solo por no haber suficiente espacio. Entonces 45 incluso 20 en realidad, más grande debilitar conseguir, creo que sí. Lo dejaremos a las 23 ya que ahí es donde tipo de maxes fuera. Y ahí va a ahorrar y vamos a volver. Guardar es sólo ser un poco raro conmigo aquí. Ahí vamos. Sólo se está tomando un poco de tiempo. De acuerdo, entonces. El último es una imagen de fondo D. C. Cómo tiene a ese pequeño Hayes. No es del todo como 100% opacidad como debería ser. Entonces si hace clic en la imagen aquí mismo, auto overlay color. Entonces ahí mismo, ahí es donde está el problema. Para que podamos escoger un color para la superposición. Entonces, por ejemplo, puedo superponer un color negro, y en realidad puedes escoger qué porcentaje quieres que sea más tarde. Entonces si eliges un 0.8, que es 80% o como 90% o incluso uno, entonces es completamente negro. Entonces creo que tal vez le guste. 0.3, tal vez cinco. En realidad, creo que cinco lucen mejor, así que lo dejaremos a 0.5 del negro y, bueno, es seguro. Y creo que eso es todo. Al igual que me gusta cómo se ve eso ahora mismo, así que lo dejaremos así. Ya sabes, he hecho lo que creo que se ve mejor para esta página. Pero por supuesto puedes pasar por las diferentes opciones aquí. Entonces, por ejemplo, hay posicionamiento. Ahora de nuevo , estas opciones son diferentes, dependiendo de la plantilla de portada que elijas. Recuerda, eso fue cuando había como, 18 o 19 diferentes de los que podrías escoger. Entonces esta es la que elegí, y estas son las opciones que tengo para esta. Entonces en primer lugar, tenemos posicionamiento para que podamos mover ese pequeño cuadrado blanco e izquierdo, derecho o centro, y me gusta en el centro y se puede hacer el texto en sí a la izquierda la línea centro derecha? mí me gusta centro entonces tienes las imágenes. Por lo que en el fondo se puede obtener una gran imagen que obviamente no me gusta. Y otro consejo rápido. En realidad puedes hacer clic en este pequeño x tu dedo del pie bajo el cambio que hiciste para ese ajuste en particular y luego color de superposición automática. Eso no me gustó. Y luego tuvimos la altura de la imagen, que en realidad era el logotipo aquí. El titular estaba justo por aquí. Cuerpo estaba por aquí sobre fondo, Así que color de fondo ahora mismo un gris como. Entonces ese es el color detrás de esta imagen aquí mismo. Ya que tenemos una imagen, el color de fondo que elegimos realmente no importa. Pero si decidieras, quería como un fondo negro en lugar de una imagen, aquí es donde cambiarías eso. Y luego el color detrás del texto está batido en el fondo justo aquí para que podamos hacer que vuelva a leer negro verde, y podemos cambiar la opacidad hacia abajo en la parte inferior. este momento, el valor está en valor hs l, así que eso es tonalidad, saturación y luminosidad. Entonces aquí abajo podríamos sumar, por ejemplo, 0.2, y eso va a poner en el OPC para nosotros. Pero creo que hemos añadido un aquí Sí, así hs l A Y entonces podemos poner en Opie City. Otra cosa que podemos hacer. Si no te gusta poner valores l de NHS, puedes poner unos valores hex. Entonces, como, por ejemplo, 000 sería negro F f f sería blanco. Técnicamente, es f f f f f f f para que puedas usar cualquier tipo de valores hex como ese, y también puedes usar RGB o RGB. Cualquier valor o 2 55 a 55 2 55 0 sería ninguna ciudad paga de cero en el color blanco. Y luego puedes hacer 0.5, por ejemplo, por ejemplo, y una cosa genial que puedes hacer es en realidad simplemente ir a valores hexagonales. Por lo que el sitio web sería el sitio web de W tres escuelas. Voy a incluir Hace eso también. que pudieras, por ejemplo, escoger como un color azul y luego los diferentes tonos en un pague ciudades de la misma. Entonces esa es una forma genial que puedas escoger los colores que quieras, o de nuevo, solo puedes pasar por aquí. Esto lo hace bastante cool también, y te mostraré una herramienta más. En realidad, es una paleta de colores. El verdadero destinado que uso. Entonces aquí realmente puedes elegir algunos colores que te gusten, y automáticamente elegirá los mejores colores para que los uses en base a eso. Entonces vamos a pasar a sólo refrescar esto. En realidad, ahí vamos. Entonces escogemos algunos colores que nos gusten, Así que tal vez quiero quiero rojo y Gris, ya que eso está cerca de mi página web. Por lo que estos fueron algunos colores que funcionan bien juntos. Entonces ponga eso en la descripción real de la conferencia también. No, no quiero quedarme con ese cambio. Obviamente tenemos página border. Ese es el borde blanco en el exterior. Y podemos escoger qué tan grande es la frontera. En realidad. No, en realidad podría gustarme la frontera para tomar un rápido En realidad. No, yo no. Yo no, pero tú puedes escoger el color. No quiero una frontera en la página web. A mí me gusta la imagen completa. Entonces podemos elegir para qué? Se utiliza en el botón real aquí. No me gusta ese gris, En realidad, quería estar acomodando a Thea. Otros colores lo harán en negro. En realidad. Copiemos el color a partir de aquí. A mí me gusta este color, así que sólo copia esto y bien ritmo para esto, para este color del cual pegado aquí. De acuerdo, sólo para asegurarse de que ese sea del mismo color y el más seguro. Y vayamos a movernos ahí. Ya veremos qué más hay disponible aquí. Entonces, iconos sociales. Sí, ahora son un poco pequeños. Ni siquiera los noto al principio. Hagámoslos tal vez incluso extra grandes, porque realmente no hay nada más en esta página. Y luego los haremos sólidos. No, eso es un poco difícil de ver. No con Border se hizo. En realidad fue probablemente mejor cómo era antes. Entonces simplemente deshacemos que regular lo sepan waas Nacchio y no colores estándar. De acuerdo, me gustó bastante más. Um, tal vez leer, recordar, copiado el último color rojo. Entonces ningún blanco se ve mejor. De acuerdo, entonces nos iremos. Es esperar y vamos a seguir adelante y golpear Save Y tenemos una última cosa que hacer aquí. Esta es una página que quiero mostrar la página principal real para las personas cuando visitan el sitio web. Lo siento otra vez. Ahí vamos. Entonces volvamos, y vamos a hacer clic en este pequeño icono de engranaje aquí porque ves la choza caseta que está al lado de casa ahora mismo a la izquierda, justo encima de mi cursor del ratón. Entonces eso significa que esa página es una página de inicio. Entonces cuando la gente escribe en mi diría, esto es lo que van a ver primero, quiero cambiar eso. Entonces vamos a hacer clic en el icono de engranaje pequeño aquí al lado de la página de inicio y vamos a golpear el ícono del engranaje aquí, y ellos iban a desplazarse hacia abajo y establecer esto como la página de inicio en el testamento confirmará. De acuerdo, Y entonces vamos a ahorrar. Y de esa manera tenemos eso como durazno casero. Y ahora todo el icono aparece debajo de esa página. Entonces estamos bien para ir. De acuerdo, chicos, Así que en la próxima conferencia se cubrirán los diferentes tipos de páginas además de portada, y se lo llevaremos a partir de ahí. 13. Páginas de edición: diferentes tipos de página: De acuerdo, chicos, vendiendo esta conferencia, vamos a echar un vistazo al diferente tipo de páginas que podemos crear. Ahora, antes de que hagamos eso, sólo voy a hacer dos cambios rápidos. El primero es mi logo. Porque inicialmente, puse esto como tu sitio web ficticio, y quiero cambiarlo ahora. Entonces voy a poner mi logo ahora, así que creo que mi logo está en realidad justo aquí. Está bien, Perfecto. Entonces eso es hacerlo Ponga eso en. Yo también cambiaré esto. Sólo porque a mitad de camino, decidimos que eso va a ser para mi sitio web de negocios real, así que pondré mi corbata yendo aquí. Está bien. Perfecto. Y entonces también pondré en el favor con porque en realidad acabo de tener eso generado también . Y lo social lo hará un logo cuadrado porque la mayoría de los sitios de redes sociales toman logo cuadrado . Entonces vamos a poner eso, y eso se debe hacer procesando en un segundo. Y luego nos sentaremos a salvo, adelante y ahorraremos. Volveremos solo para que tenga mi logo aquí arriba. Y luego un cambio más que voy a hacer es ir a las páginas y cambiar la página de inicio a casa. Entonces sólo en casa por sí mismo. Y voy a cambiar de home en home page y te voy a mostrar por qué hice eso en un segundo fue principalmente solo para evitar que te confundas entre el diferente tipo de páginas. De acuerdo, echemos un vistazo al diferente tipo de páginas que tenemos disponibles tan rápido. El signo más aquí para crear una nueva página, las frescas. Bastante sencillo. Es sólo una página regular. Los otros son los que necesitan un poco de explicar sobre. El motivo por el que cambié esta portada a solo casa es porque no quería que dijera Portada porque podría ser confuso entre portada y página así que solo saldremos de este hogar. El segundo que tenemos son los productos. Ahora Productos es que no es realmente una página es más como una tienda, así que en realidad voy a renombrarlo tienda sólo para que ustedes sepan a lo que me refiero? Y en realidad está aquí abajo. Ya hice uno antes, así que en realidad borraré éste. Te mostraré el que me encuentro así bajo tienda. Si haces clic en él, realidad puedes agregar diferentes productos. Por lo que haces click en este pequeño plus aquí arriba. Y entonces, ¿qué tipo de producto tiene? Por lo que podría ser el servicio digital físico. Um, y luego entraré más a la tienda más tarde. Pero eso es básicamente lo que es. Para que puedas tener múltiples productos ahí dentro, y así sería la página de la tienda. Ahora. Nunca uso la página de la tienda por sí sola en el menú. Normalmente vinculé a un producto específico en las diferentes páginas. Y te mostraré cómo hacerlo en una conferencia posterior también. De acuerdo, entonces ahora volveremos a dejar el ícono más. El siguiente tipo de páginas portada que hemos cubierto en una conferencia anterior. Y luego tenemos carpeta. Entonces esta justo aquí la página sobre es en realidad una carpeta. No es una página real. Entonces si haces clic en un barco, realidad no va a ninguna parte porque no es una página. Um, en realidad, déjame rápidamente solo hacer todas estas todas estas páginas, porque en este momento son contenido demo solo para que realmente pueda hacer clic en ellas. Así es crear, crear. Simplemente los crearé todos. Voy a estar quitando algunas de estas páginas más adelante porque no las necesito todas como la página de noticias. No va a necesitar eso. Así que crea. Crear. Por lo que también puedes hacer esto. Simplemente pasa y presiona crear para todas las páginas que quieras conservar. Por supuesto, tampoco tienes que quedarte todo. Entonces vuelvo. Creo que hay una crema más perfecta. Entonces el sobre de la página. Si haces click en un barco, realidad no va a ninguna parte porque es solo una carpeta. El material dentro de las páginas reales y lo que pasa es que si subes a la parte superior, el sobre es una carpeta, así que es como un desplegable. De acuerdo, entonces el acerca no es en realidad una página. De acuerdo, así que a continuación tenemos la página del álbum, así que si das click en álbum, podemos ponerle el nombre que quieras. Todos lo nombra canciones. Entonces lo que podemos hacer en las páginas del álbum en realidad subir el arte del álbum y luego poner una descripción para el álbum y el nombre del artista. No has añadido también pista para que puedas subir pistas musicales y luego la gente podría venir a esta página a escuchar esas canciones, y también pueden compartirla. Entonces eso es lo que las páginas del álbum. En realidad no lo usas para demasiados sitios web, tal vez para alguien que realmente le guste un D. J o alguien que realmente compone música. Pero para cualquiera más, no realmente útil. Entonces voy adelante y borraré eso porque no voy a estar usando eso. Y luego a continuación tenemos la página de índice. Por lo que las páginas índice tipo de similar a la carpeta. Hay una diferencia. Y te mostraré ahora mismo. Entonces si lo hacemos así lo que pasa es si arrastramos todo de alrededor a la página del índice . Entonces de nuevo, así es como puedes arrastrar cosas entre maquillar arriba y abajo haciendo clic y arrastrando. Entonces ahora si entras a la sobre página uno que acabamos de crear, lo que verás es que tenemos lo que hacemos en la parte superior, y luego tenemos proyectos, y luego tenemos socios, que está por aquí y luego contactamos, que está aquí abajo. Por lo que tenemos las cuatro páginas en una misma página. Ahora, el único lado inferior de esto es que si se cierne sobre él, no se puede ir a diferentes secciones. Entonces si quieres ver contacto, en realidad tienes que hacer clic en un cinturón, y eso se enfría hasta el muy, muy abajo. Entonces esa es una razón por la que no usaría eso. Pero la portada es realmente buena si quieres, como, ah, ah, inicio de una página. Por lo que tienes, como cuatro o cinco secciones diferentes en la página principal. De acuerdo, entonces podría usar eso desde mi página principal. Pero lo borraré por ahora, y te mostraré qué más tenemos. Entonces a continuación, hemos blogueado, por supuesto, muy importante. Entonces, ¿tiene un poco minúscula? A. Por lo que ya tenemos una cuadra aquí. Se llama noticia, así que vamos a dar click en eso. Y entonces lo que podemos hacer es componer un nuevo post de bloque. Y así si hacemos clic aquí, esto es lo que veríamos, y lo pasaré más adelante en el en la conferencia, específicamente en el blogueo. Ahora mismo, solo quiero mostrarte los diferentes tipos de páginas muy rápidamente, así que vamos a ver qué sigue. Tenemos eventos, así que eso es básicamente igual que un calendario. Podrías tener eventos como reuniones de yoga o como um, ese es un curso específico que estás teniendo en su en un día específico. Puedes poner eso ahora No puedes tener gente registrada para estos eventos es justo como un mostrar qué tipo de eventos sí tienes. Por lo que tipo de llenar esto con el nombre del evento, y luego se puede agregar una descripción del evento. Um, y qué fechas Inicio? Por lo que solo tienes que hacer clic en el día de inicio y luego puedes entrar a la hora. Y cuando termine, puedes poner etiquetas. En realidad no es demasiado útil. Sí ayuda un poco con CEO, así que puedes agregar italiano, hacerlo como, ya sabes, yoga, retiro, um, o algo así. Y luego pones los eventos en una categoría. Entonces reuniones, um, ventas, ese tipo de cosas. A continuación en opciones, podemos elegir una imagen para el evento y luego evento que eres también siempre va a ser calendario porque ese es el nombre de nuestra página. Y entonces quién es quien es el autor de este evento y si quieres que muestre algún tipo de u r l que algo puede hacer click para ir a un sitio web diferente y luego un extracto es básicamente una región corta de lo que tienes aquí arriba así que tal vez podrías usar el primero que saber, 50 o 60 palabras. Y también puedes agregar una ubicación a tu evento, como dónde se va a llevar a cabo. Y entonces esto es si quieres automáticamente, como, ahora mismo, tengo mi Facebook conectado así que actualiza automáticamente Facebook con el evento, como decir que no tengo evento pasando. Entonces esa es la página del evento otra vez. No lo voy a usar porque voy a estar haciendo, como, como, un sitio web de diseño Web así que no demasiado útil para mí a menos que estuviera teniendo algún tipo de evento like donde enseño a la gente a hacerlo. Entonces vamos a ver, Siguiente arriba tenemos Galería es muy importante. Probablemente sea la segunda o tercera página más usada que me gusta, me parece, así que la haremos tal vez galería de fotos. Y básicamente es ah, solo agregas imágenes para que puedas, ya sabes, subir múltiples imágenes, y estoy seleccionando diferentes imágenes en una ventana manteniendo pulsado el control para que puedas mantener pulsado el control y haga clic en múltiples imágenes en. Después te pegas abierto. Entonces uno del formato tiff por lo que tienes que está en soportado ser PNG regalos y clavijas J. Entonces sube esas tres y las dos últimas son imágenes un poco más grandes, Así que nos llevaremos un rato, así que quizá no lo espere. En realidad, mientras estoy esperando eso, déjame mostrarte algo más. De verdad rápido. ¿ Ves este pequeño círculo que aparece en el medio? Lo que es, es que básicamente es como muestra aquí mismo es el punto focal. Entonces si alguien tuviera esta imagen estallando en su pantalla y toda la imagen no encajara , Squarespace haría zoom automáticamente en sólo esas cosas importantes. Entonces ahora mismo está puesto en el medio, que es mi local real. Entonces no me importa. Ese es en realidad un buen punto focal. Entonces lo dejaremos tal como está. Entonces volveremos. Entonces así sería la galería de fotos. De acuerdo, Ahora, nuevo, no uso la galería de fotos arriba en el menú como es ahora mismo. Normalmente lo movería al fondo, así que no está en el menú. Y luego me vincularía a ella desde una de estas páginas, así que en realidad me dejó mostrarte muy rápidamente lo que haría Así que desde una de estas páginas, haría clic en, editaría y luego añadiría en una galería. De acuerdo, no te preocupes demasiado por cómo hice esto. Voy a volver a repasar esto en una conferencia posterior. Pero básicamente fuera agregado así porque realmente no tengo una página solo como galería. Usé la galería en ella para tipo de publicidad. ¿ Hay cosas tan cerca que y voy a borrar la galería que agregó fractura. Yo solo quiero guardar los cambios o descartar cambios. Y luego finalmente, estamos en el último, que es sólo un enlace, así que esto no sería una página sería sólo un enlace a otro lugar. Entonces digamos un click en él y luego podemos hacerlo en YouTube. Y entonces podría agregar mi real. Simplemente pon youtube dot com y luego estoy abriendo en una nueva ventana ya que es a un sitio web diferente y luego vamos a golpear seguro. El motivo por el que puse eso para abrir en una nueva ventana, y para que ahora, si alguien hace clic en YouTube, se abrirá una nueva pestaña aquí. Entonces tú. Por lo que aún tienen tu página web abierta también. Entonces cuando terminen con YouTube, pueden volver a tu sitio web, mientras que si solo te los llevara automáticamente, también, sin abrir una nueva ventana, se perderían en YouTube, mirando diferentes videos, y las probabilidades son que regresen a su sitio web. Entonces por eso lo hago de esa manera. No, no quiero enlazar a YouTube ahora mismo, así que lo eliminaré. Y luego volvemos a cómo empezamos. Por lo que eso cubre todas las diferentes páginas que tenemos disponibles. Entonces, en la próxima conferencia, ¿dónde empezará realmente a crear páginas? 14. Páginas de edición: añadiendo nuevas páginas: Está bien. Por lo que la última vez hablamos de los diferentes tipos de páginas que están disponibles en squarespace , y esta vez, lo que vamos a hacer es realmente cambiar esta navegación para que se adapte mejor a nuestras necesidades. Entonces en realidad voy a seguir la misma navegación que tengo en mi otro sitio web, y sólo vamos a copiar eso por aquí. Um, otra cosa que te voy a mostrar en realidad es ahora mismo, ¿ves cómo dice casa y esa página principal? Porque quería que la gente viera primero esta página mientras el sitio de mi esposa estaba en desarrollo. Entonces en realidad no me gusta no quiero que esta página esté en el menú. Entonces lo que voy a hacer es arrastrarlo hasta aquí para no vincularse, y te mostraré lo que eso hace. Entonces si vuelvo a esta página principal Así que esto es finalmente como se verá mi sitio web, como obviamente con mis propias imágenes y todo, pero no quiero que ese hogar que está aquí abajo se muestre aquí. Entonces por eso lo bajé a no vinculado. Ahora esa página aún existe, y es la primera página en la que aterriza la gente, pero en cuanto entran a mi sitio web. Al igual que cuando les doy acceso, Claro. Entonces no tendrán opción de volver a ese sitio web excepto haciendo clic en este logotipo, que los lleva de vuelta a la página principal automáticamente. Pero una vez que cambie esto a la página principal, todo eso se habrá ido. Por lo que incluso puedo borrar esa página si quería más adelante. De acuerdo, así que sigamos adelante y copiemos algunas páginas. Ahora lo primero que me gusta hacer con cualquier sitio web, su primero configuró la estructura de páginas solo para que el menú al menos esté en su lugar. Y entonces puedo empezar a editar cada página individual. Entonces lo haré yo. Haré lo mismo aquí con mi propia página web. Entonces primero tengo casa. Entonces voy a cambiar esto de vuelta a casa ahora, sólo porque ahora que ya sabes lo que los diferentes tipos de páginas lo siento, no hay necesidad de llamarlo la página principal. Entonces eso es perfecto. Lo llamaremos casa, y luego tenemos cartera, y también tenemos sobre Celeste. Agrega un puerto para ti. Dirección P. ¿ Celoso? No puse para tu página, así que hazlo portafolio así que esa es una página nueva. Voy a ignorar todo aquí por ahora y solo tienes que hacer clic en empezar a editar, y no voy a añadir ninguna, como texto o imágenes en solo todavía. Por lo que voy a golpear seguro un poco arrastra cartera a la segunda posición. Entonces es lo segundo en el menú. Entonces a continuación, tenemos hosting, así que pondremos eso en un oleaje. Así que poner plus en una página y hosting. Ahora mismo estoy agregando todo es páginas. Si algo más va a funcionar mejor, como, ah, tienda o un bloque, entonces vamos a cambiar eso como, como, otro viene tan hosting, porque sé con seguridad como las páginas pueden soportar todo. Eso es lo que estoy agregando. Todo es una página ahora mismo. A continuación, tenemos sobre nosotros ahora ya tenemos en una carpeta de embarcaciones. Uh, yo sólo quería ser una página. No necesito que sea carpeta, así que la haremos una página y eliminaremos la carpeta sobre y cambiaremos lo que hacemos con respecto a nosotros. Entonces sobre nosotros, ¿de acuerdo? Y entonces también cambiaré la u R l a sobre nosotros ahora. Si pongo un espacio ahí dentro, automáticamente pongo el guión, que es lo que quiero porque esto no es nada que ver. Ah, es sólo una palabra mal escrita que ni siquiera detectará como Anabelle pH donde si tenemos el guión, entonces sabrá que un barco es un mundo diferente a nosotros. Por lo que sabrá que esta página se trata de nosotros, y esos son los propios motores de búsqueda. ¿ Dónde está bajo? Si usas un guión bajo, ni siquiera me deja usar un guión bajo. Entonces si hiciste algo así como sobre nos subrayaron para la chica que en realidad no se detectarán como dos palabras separadas porque, um, um, las cebollas de búsqueda en realidad no usan subrayados un separador de palabras. Entonces por eso squarespace lo cambia automáticamente al guión. Entonces si pongo un espacio tan sobre el espacio, lo siento por nosotros y el espacio, automáticamente lo cambiará a un guión en su lugar. Entonces sigamos adelante y ahorremos grasa, y al siguiente arriba hemos blogueado. Ahora lo sé automáticamente. Esta va a ser una página tipo bloque, así que en realidad eliminaré esto y la realidad. Entonces ya sabes cómo se hace. Entonces presionas plus y luego blogueaste y en realidad lo nombraré blogueado, Así que eso es perfecto. Y luego regresaremos y moveremos eso aquí abajo y luego lo siguiente, tenemos contactarnos, así que no necesito leerme. Page, tomar medidas. Déjame ver cómo se ve eso. Entonces, sí, solo puedo cambiar eso a una página de contacto. Vamos a cambiar todas las imágenes y texto de todos modos, normalmente me gusta empezar con páginas en blanco. Uh, como siempre. Pero en este caso, sólo voy a renombrarlo sólo para ahorrar un poco de tiempo aquí. Por lo que eran sólo un portafolio de casa hospedando sobre nosotros blawg. Y luego contáctanos para que todas las páginas que tengo aquí, así que eso es perfecto. Entonces así es como configuraste el menú. Ahora te voy a dar un paseo Cómo se ve la navegación secundaria aquí. Ponemos galería de fotos y tienda aquí. Entonces en este tema, en este nombre específico, algunos lo tienen en el lado izquierdo. La navegación secundaria en realidad aparece en el pie de página aquí. Entonces lo que puedes hacer es poner algo así como tus términos y servicios, tu información protegida por derechos de autor, tu política de privacidad, ese tipo de cosas aquí. Entonces esto es solo para este equipo, que es un tema de Bedford Voy a volver a casa, ¿de acuerdo? Y luego en la próxima conferencia, te mostraré cómo podemos realmente darle estilo a las diferentes páginas como necesitamos y empezar con, como, una plantilla predeterminada para estas páginas, si eso ayuda. 15. Páginas de edición: banners: De acuerdo, así que ahora vamos a hacer es vamos a echar un vistazo rápido a cómo podemos cambiar el banner de fondo. Por lo que la batería está justo en la parte superior ahí, detrás de la cabecera. No aparece en ningún otro lugar de la cima. Entonces lo que hacemos para eso es que pasemos por encima de la pancarta hasta que salga este pequeño pop up. Entonces, de nuevo, eso sólo aparece cuando se pasa por encima del propio estandarte real. Y iban a hacer clic en banner. Entonces lo que surge es la imagen real que estamos usando en este momento. Ahora, lo que notarás es que si haces click en básico, vemos este verde. Y ya hemos visto esto antes. Te mostraré dónde. Por lo que en casa, si haces clic en este pequeño engranaje, saldrá esta página. Entonces esta es la misma página. En realidad puedes hacer clic en los medios aquí arriba. Y eso te llevará a donde puedes cambiar de nuevo el banner ahora mismo. En realidad podemos recordar. Te hablé de este punto. Puedes moverlo arriba y abajo. Entonces si miras ahora mismo nuestra página principal, ves que se está recortando en la parte superior de los árboles justo aquí en la parte inferior. Siendo cosecha justo por aquí. Entonces justo al otro lado de aquí. Ahora, digamos que tenía un poco como una carpa por aquí que realmente quería mostrar y que esa persona realmente no importa. Lo que puedo hacer es arrastrar el punto focal hacia abajo hasta la esquina y luego presionar Guardar, y ahora se mostrará toda la esquina. De acuerdo, Ahora te voy a mostrar cómo realmente cambia la imagen. Entonces lo primero que haces es golpear, quitar, y luego puedes obtener una imagen de Getty image haciendo click aquí, igual que antes. ¿ Cómo deberías o puedes hacer click en añadir una imagen así voy a dar click en Adam Image. Ahora, tengo aquí algunas imágenes que puedo mostrarles. Tan sólo un segundo rápido. Tengo algunas salvadas. Ahí vamos. Entonces es que usé este. Sí. Yo quiero que trabajes. Que abrirá eso en y luego me pegaré a salvo. Ya veremos cómo se ve eso. De acuerdo, así que eso no está mal, pero realmente no puedo ver mi logo arriba aquí arriba, así que probablemente voy a cambiar esa imagen, y en realidad no dice que se trate de diseño Web ni nada. Es un poco difícil decir de qué se trata los sitios web a partir de esa imagen. Vamos a seguir adelante y movernos quitamos eso y vamos a añadir una imagen diferente. Tengo uno de los que podemos usar, que es éste. Pero esta es una imagen muy grande. Y como te dije antes, squarespace no maneja realmente imágenes grandes. Bueno, entonces es mejor cambiar el tamaño de esto. Entonces déjame seguir adelante y copiar y pegar eso. Entonces acabo de hacer control, copia. Entonces el control, ¿ ves? Y luego controlar V a Pegar. Y luego voy a editar esto. Apenas abrirla con Microsoft. Sí, sólo con pintura. Y se pegarán a redimensionar. Y sólo voy a cambiar sobre los píxeles y voy a hacer el borde horizontal, que es el borde más grande, apenas 1600 y luego guardar cerca y usaré este. Entonces es una imagen más pequeña para que el sitio web se cargue más rápido, sobre todo porque una imagen más grande realmente no cambia nada cuando se trata de Squarespace . Entonces vamos a golpear, guardar y luego allá vamos. Ese es mucho mejor que lo que tenía antes. Voy a terminar cambiando este color más adelante también. Ahora, lo que haremos es que a continuación vuelva a hacer clic en banner. Y sólo quiero mostrarles que no pueden. En realidad también puedes tener un video aquí. Entonces en lugar de imagen aparecen arriba. Solo tienes que hacer clic en video ahora YouTube o, um, los medios funcionan mejor. Entonces sigamos adelante y copiemos una URL de video de YouTube. Por lo que acabo de teclear una búsqueda de squarespace. Anuncio sacó el 1er 1 que vino y copié la URL, y luego me acabo de pegar por aquí. Está bien. Y entonces esto se abre y puedo elegir un filtro. Entonces, al igual que un filtro borroso puede invertir los colores. Podrías hacer el brillo más o menos. Probablemente no lo quieras brillo completo. Pero estoy seguro de que podemos editar eso de una manera diferente poniendo un color por encima de la charla y luego la velocidad de reproducción. Por lo que 1.5 veces 0.5 lo dejaremos en una y luego en un navegador móvil. El video en realidad no se mostrará porque los videos en dispositivos móviles usarán una gran cantidad de datos . Por lo que por defecto, no aparecerá. Lo que podemos hacer es poner en una imagen para que la imagen aparezca en el sitio Web móvil y el video aparezca en el escritorio. Tan bien puesto efectivamente, esa misma imagen que usé aquí y la, bueno, cabeza segura. Entonces ahora lo que veremos es el video que se reproduce en segundo plano. Podría tardar dos o tres segundos en cargarse, dependiendo del ritmo de Internet. Entonces aquí vamos. Entonces tipo de poderes arriba en el video empieza a reproducirse ahora. Tengo suerte porque estas fuentes blancas en realidad aparecen encima de esto. Pero el logotipo se está ocultando en algunas de las pantallas. Entonces hay como, hay algo que podemos hacer aquí. Echemos un vistazo rápido. OK, entonces vamos a diseñar y luego editor de estilo, y lo que podemos hacer es en realidad solo hacer click justo aquí arriba arriba sobre el logo para que veas, la barra azul va alrededor de esa barra de navegación y el logo, y luego nosotros 're dice transparente en imágenes de bateador. Podemos apagar eso, y esto es lo que va a pasar. De acuerdo, Ahora, esto funciona a veces, y no funciona. Otros, como en este momento realmente no se ve demasiado, demasiado bueno. Me gustó más cómo era antes. Entonces probaremos nuestra siguiente opción, que es el pasar por encima del banner. Y vamos a poner en un color más oscuro o lo siento, un color más claro ya que nuestros logos oscuros. Entonces lo haremos tal vez como un blanco. Mira, lo haré blanco, pero aún no funciona. ¿ Sabes qué? Déjame poner un blanco aquí. Y luego ahí vamos. Podríamos hacer algo así. Y entonces, claro, tendríamos que cambiar las barras de navegación. El color está bien, por lo que la navegación sería negra. Y luego el activo, que es una página de navegación en la que estás ahora mismo. Entonces ahora mismo estamos en casa. Por eso es blanco. Podríamos hacer ese pan para especie de ir con el logo y luego también esta pastilla justo por aquí. Entonces ese es el botón de navegación. Si no quieres ese botón, tienes que dar click aquí mismo. Entonces vuelve a regular. En realidad no sé si me gusta. Déjame ver. Sí, creo que sí, en realidad no me gusta, así que me desharé de eso, Pero no todas las plantillas tienen la opción para esa pastilla. Éste sí. Por lo que tenemos eso disponible en el editor de estilos. Entonces mira, como atrás, atrás. De acuerdo, entonces ahora voy a hacer algo aquí. Realmente no quiero usar el video. Entonces lo que voy a hacer es cambiar el color de la superposición de nuevo al grandioso aquí, el negro que era antes. Voy a cambiar de nuevo a la imagen. Entonces volvamos atrás, y vamos a las páginas, el engranaje, los medios y todo lo que tienes que hacer. Podemos dejar el video ahí dentro y acaba de cambiar a imagen. Entonces de esa manera, si alguna vez quieres volver al video, es muy fácil. Entonces ahí vamos. Tenemos la imagen ahora. Andi, el negro en realidad no se ve muy mal. Podría tener que cambiar la Europa una ciudad de la superposición negra sólo un poquito, porque es un poco demasiado oscuro. Por lo que vamos a dar clic aquí y luego superponer bateador. Sólo lo bajaremos un poquito otra vez. Estaré pasando por estas opciones contigo en un líder. Conferencias. Bueno, ahora mismo, solo quiero mostrarles cómo podemos asegurarnos de que esta imagen sea perfecta porque esto es lo primero que la gente ve cuando llega a su página web. Por lo que tiene que ser perfecto. De acuerdo, así fue como agregas un banner, imagen o video. Ahora, lo que vamos a hacer es cambiar rápidamente este texto aquí mismo, porque obviamente mi sitio web no se trata de sustentabilidad. Entonces, vamos a dar clic en este icono de engranaje. Entonces bajo descripción aquí, verás que cada uno de estos se alina con esto, ¿ verdad? Entonces cualquier cosa que te atrevas justo aquí por audaz nos presentaremos con un gran voluntario y cualquier cosa que te vayas es normal tendrá esta pequeña escritura ligera en cursiva. Entonces lo que haré es ponerle un A B g tec. Vamos a tratar de cosas diferentes aquí. Por lo que un b g Tech. Sí, Capitales. Bien. Y luego aquí lo pondré desde mi página web. Pondré debido a su Tal vez me llevaré eso. No, no lo hace. Copia. OK, así que en realidad llévate donde Presione los ojos. De acuerdo, vamos a tomar eso. Porque recuerdo que metí eso con revolución de deslizador para que no funcione. Html y CSS en PHP. Ahí vamos. En realidad. Wordpress como capital allí. Y entonces se va a decir que empiece hoy. Entonces, ¿qué? Ahora mismo, ya ves, eso subrayaba la necesidad de aprender más. Eso significa que es un eslabón. Entonces ahora mismo es un botón. Por lo que cualquier cosa que hagas un enlace se convertirá automáticamente en un botón en Lee en la descripción de esta plantilla. Ahora, la mayoría de las plantillas tienen esa misma característica. Entonces primero, voy a quitar ese enlace, y luego voy a poner en empezar. Es decir, ahora, hoy empiece hoy. Y luego voy a hacer de esto un enlace, y va a ir a mi página de contacto. Perdón, eso está en cursiva. Enlace está justo aquí. Entonces va a enlazar a mi página de contacto, que está justo aquí. Entonces otra vez, voy a pasar por la, um, estructura de enlace otra vez también, y van a golpear seguro. Y me acabo de dar cuenta de que mientras me estaba vinculando para contactarnos, es un capital tú en una s. mayúscula Así que supongo que cometí ese error antes. Tan seguro ahí. Entonces ahora vuelvo a casa y parece que esto ahora lo otro que quería probar era poner el A B g tec en la parte superior. Y entonces la segunda línea es la línea más pequeña. ¿ Ves cómo se ve eso? No, me gusta al revés ese aire. Entonces, sí, Como puedes ver, hay bastante experimentación para ver qué luce mejor y otra vez, como cómo algo se ve su objetivo. Por lo que podría gustarte mejor de esta manera. Es que me gusta más. ¿ Cómo estuvo antes? Por lo que salvé. Y luego una última cosa que quería hacer vuelve en este dialecto ITER, y voy a cambiar el color de esto, y usaremos esa lectura. No recuerdo qué lectura. Eso fue tan rápido. ¿ Se copia esto? No, idealmente, quisiera copiar el mismo rojo en mi logo. Pero sólo porque tengo un poco de prisa para mostrarles chicos, sólo voy a usar el rojo más cercano que se me ocurra. Ya sabes lo que estoy bastante seguro fue C c Sí. Estoy bastante seguro de que ese era mi color local. Tan bueno, creo que es que mantener cambiado esto también. Simplemente recuerdo eso de la página web anterior. Entonces, ¿ahorrará? Y creo que eso se ve bastante bien por ahora. WordPress html CSS ph B. Sí, creo que se ve en realidad lo sé. Simplemente voy a cambiar una última cosa, porque cuando alguien ve WordPress, html y CSS Ph. B, realmente no dice que sea una empresa de diseño Web. Podría ser alguien que ofrezca tutoriales sobre esos temas. Entonces lo voy a cambiar a sitios web bellamente elaborados. Y entonces es amable un poco más obvio ¿qué? Es de lo que trata el sitio web de inmediato antes de que incluso empieces a desplazarse. Entonces ahí vamos. Entonces así se hace una imagen de banner. De acuerdo, Ahora, si entras a la página del portafolio, te voy a mostrar una cosa más. Algunas personas no quieren sólo una imagen aquí. Es posible que desee dos o tres imágenes como deslizador. Ahora, cuando subiste aquí y luego medios, solo puedes subir una imagen. Entonces te voy a mostrar cómo puedes usar un slider. Ahora bien, esto funciona para esta plantilla y algunas de las otras. Um, no todos. El OK, por lo que da click en él. Entonces esto en realidad no está en el bateador en sí, sino en la página. Por lo que hace clic en editar. Entonces en lugar de banner en el contenido de la página en sí. Entonces donde realmente escribirías tu información, ponías eso y luego pasabas por alto justo aquí en la muy, muy arriba. Lo primero que hay en la página tiene que ser una presentación de diapositivas. ¿ De acuerdo? Y se iban a Teoh. Por lo que estas son algunas imágenes por defecto que ponen automáticamente pueden realmente ver si eso funciona para mis necesidades. Entonces lo que también quieres tener es mostrar título y descripción no realmente importante, pero automáticamente transitar y mostrar siguiente y anterior sería ideal toe have on Vamos guardar y luego ahorrar en. Ahora ya veo cómo se puede. Es una presentación de diapositivas, pero no está apareciendo de ancho completo como lo era el otro como el hogar. Pero si realmente refrescamos la página o simplemente salimos de la página y volvemos a la página ahora verás que ha tomado las características que realmente queríamos asumir. Entonces si quieres cambiar la imagen, tienes que dar click en editar y luego editarla aquí abajo. De acuerdo, Ahora en realidad te voy a mostrar con mis imágenes porque quiero mostrarte cómo cambiar la redacción real encima de ella. Entonces tomemos esta imagen y esta imagen, y las subiremos. No solo le des un segundo ahí para subir, porque hay dos imágenes más grandes, más grandes. Yo no redimensioné estos dos. Ahora, con un squarespace, notarás que a veces el spinner apenas unos días ahí, Um, eso es podría significar que está atascado, pero muy raramente eso sucede. Por lo general, es solo una imagen más grande en, como tu conexión a Internet podría ser más lenta. El servidor podría ser lento, así que solo dale un segundo, por lo general debería corregirse a sí mismo. Entonces esto está bien. ¿ Aplicará? ¿ Quién va a salvar? Y solo quiero mostrarte, como si presionas refrescar aquí, eso también funcionará . O puedes ir a una página diferente y luego volver a portafolio. Entonces ahí está eso. Ahora ya ves que aquí no hay boda. Y si realmente vas dedo del pie como el ícono del engranaje y tipeando hola, lo que pasa es que no aparece nada. Entonces no es así como cambias la redacción. Si se trata de una presentación de diapositivas, realidad hay que hacer clic en editar, y luego vamos a golpearlo de nuevo en la presentación de diapositivas, y luego haremos clic en el icono de engranaje justo por aquí. Y entonces en realidad podemos teclearlo como un título y una descripción. Ahora, lo genial de un sliders, puedes tener una redacción diferente para cada imagen. Entonces este podría ser sitios web bellamente elaborados que escribía mal sitios web tan bellamente elaborados . Simplemente copiaré esto por ahora, y éste puede ser WordPress html y CSS JavaScript. ¿ Se ahorrará? Y entonces éste puede ser, um, contáctanos para más información y vamos a estar seguros y se aplicarán Guardar de nuevo. Por lo que de nuevo, visitaremos otra página y luego volveremos a portafolio. Y entonces lo que vemos es de nuevo absolutamente nada. Ahora el motivo de esto Déjame mostrarte muy rápido. Tenemos algo configurado perfectamente para las imágenes, pero en la propia presentación de diapositivas. Si haces clic en editar y vas al diseño mostrar título y descripción, no comprobamos eso. En realidad lo desmarqué para poder mostrarles que ahora esto no importa donde se exhiba, realmente no importa demasiado. Lo dejaré en el centro. Pero de nuevo no importa porque esto es sólo si quieres dejarlo como una presentación de diapositivas, pero para nosotros va al encabezado. Entonces sólo hay una forma de que eso vaya a aparecer. Entonces voy adelante. Voy a refrescar la página aquí, y luego ustedes verán que la redacción realmente estará ahí esta vez. Entonces ahí vamos. Wordpress. Entonces una cosa que notarás es que esta página no hay redacción para y esta página sólo tiene esta segunda parte, pero no la parte de sitios web bellamente elaborados. Y déjame mostrarte por qué sucede eso. Entonces para la página principal, cuando queríamos que algo pareciera audaz como un B g tec, tenemos que ponerlo en el cuadro de descripción y en realidad lo bosquejó. El título de la página en realidad no aparece en ninguna parte aquí. Entonces cuando vamos a la página del portafolio y vamos al contenido de la página y luego a la galería, y luego también a esta imagen, esto lo ponemos como título, derecho, derecho, el título de la imagen. Entonces si queríamos aparecer aquí, en realidad tenemos que pegarlo aquí. Entonces, matri, um, no solo pegas así usaste Ah, el editor de texto plano. Me recupero como copiar, pegar contenido en páginas. Ya verás por qué eso usar esto es muy, muy importante. El siguiente lo atreverá. Y luego le pegaremos a guardar. Y luego entraremos aquí y copiaremos esto y bien lo pasamos aquí. ¿ De acuerdo? Y también bolos esto. Está bien. Y luego vamos a golpear seguro. Entonces ahora si hubiera aplicado guardar Ahora cruzaremos los dedos y todo debería ser perfecto. Entonces ve al portafolio Y ahí vamos. Todo es perfecto. 16. Páginas de edición: bloques básicos: De acuerdo, entonces ahora que hemos discutido el bateador aquí arriba, vamos a desplazarnos hacia abajo hasta el contenido real de la página. Entonces cambia el contenido de la página. Pasa el cursor sobre él hasta que obtienes esta pequeña pestaña que dice contenido de página y luego haces clic en él tan sencillo. Así que a continuación, te darás cuenta de inmediato en esta interfaz de usuario que al pasar el ratón, verás pequeños círculos de gota de lluvia buscando que aparecen así que ahora mismo, si paso por aquí, pondré en un bloque que va a ocupar el látigo entero desde la izquierda aquí, todo el camino hacia la derecha aquí. Y si vuelvo a poner uno aquí, todo el camino de izquierda a derecha, Si pongo uno aquí, aparecerá justo en la parte inferior de aquí. Entonces la línea te muestra lo ancho que va a ser ese bloque. Entonces, por ejemplo, si pongo un bloque de texto aquí, sólo va a ser así de ancho, Entonces será como, Hola, y luego lo Hola, copiaré y pegaré, y eso es lo que va a ser rápido. Sólo va a ser ese blanco. Entonces voy a borrar este bloque y ahora ponerlo aquí arriba. Por lo que el bloque de texto aquí arriba estirará todo el ancho de la página. De acuerdo, entonces eso es lo primero que debes saber sobre la interfaz. El segundo, cuando pasas el cursor sobre algo que necesitas click puedes agregar en el bloque, y hay diferentes tipos de bloques que puedes agregar. Entonces primero, voy a cubrir los bloques básicos, que son los siete arriba de aquí. De acuerdo, El 1er 1 que ya me has visto usar bastante. Es el bloque de texto. Entonces, cuando golpeas texto, es solo un editor de texto regular. Nada demasiado elegante para que puedas poner como Legal s un encabezado. Por lo que esta puede ser mi página principal. Entonces pondré un poco sobre sección aquí. Por lo que dirá de nosotros. Yo quiero que este no sea un texto normal, sino encabezamiento uno. Está bien. Y yo también quería estar centrada. Y entonces ahora se ve un poco entonces. Entonces vamos a seguir adelante y atrevirlo con el resaltarlo y perno. Ahí vamos. De acuerdo, así que eso es todo. Entonces así es como agregar un bloque de texto. Ahora bien, si quieres quitar todo el formato, presionas esto, solo mueve todo lo hace regular, igual que antes. Entonces otra vez, centrar negrita y hacer que sea un rumbo. Y también puedes deshacer redo, y luego cursiva está por aquí. Perdón, sí lo hacemos. No tomó cursiva. Um, puedes convertirlo en un enlace para que puedas vincularlo a una página diferente para vincularlo a, por ejemplo, google dot c A. Y puedes hacerlo abierto en una nueva ventana cuando alguien lo haga clic. Y otra cosa que puedes hacer es enlazar a una página que está en tu sitio web. Entonces mi página de sangre o mi página sobre, que probablemente es lo que voy a hacer, pero no en el título en una sección diferente tal vez aprender más. Y entonces otra cosa que puedes hacer es en realidad vincularlo a un archivo. Entonces, cuando alguien haga clic en la redacción real , descargará un archivo. Entonces un documento o un pdf para una imagen, cualquier cosa por el estilo, solo hace clic en agregar un archivo, y luego un pop up vendrá a recoger el archivo que quieres subir, y luego puedes hacer clic en abrir en una nueva ventana. Ah, pero por lo general acaban de descargar, así que eso no es demasiado de preocupación. Entonces voy adelante y me voy este año. En realidad, no necesito borrarlo, pero no quiero que sea un enlace. Um, así que sigamos adelante y quitemos el enlace. Simplemente está escondido detrás de tu bien, así que es una probabilidad de 50 50. Entonces intentemos eso. Ahí vamos. Por lo que se elimina el eslabón. Ahora, otra cosa que quieres tener cuidado con el bloque de texto es cuando copias y pegas, um contenido real de otro sitio web. Entonces, por ejemplo, si agrego en otro cuadro de texto y luego voy a mi sitio web personal y copio esto y luego trato de pegarlo aquí, verás que paga más o menos exactamente cómo es aquí. Entonces el audaz alrededor y luego te desplegó nosotros. Entonces no es así como quería en mi página web, porque obviamente no quiero la primera parte que Bull hizo. Pero echemos un vistazo. Digamos que si voy a aquí y lo hago texto normal porque no lo quiero más grande, realidad no cambia porque en realidad no se puede peinar como realmente se puede poner como cursiva o hacer la parte de EU. Boulders Bueno, pero en realidad se puede cambiar lo que en realidad es para poder cambiar realmente el formato. Usando estos botones aquí arriba, tienes que pasar el ritmo de eso como texto sin formato. Y para hacer eso , subes aquí. Entonces este pequeño clip board justo aquí, pega en la prensa de información, OK, Y entonces ahora puedes realmente darle estilo. Cómo quieres. Entonces haremos este rubro. Uno lo centinela. Enviaremos a eso. Lo hará audaz. De acuerdo, sólo tenía que volver. Entonces otra vez, te lo mostraré. Esto está bien, si si aquí arriba, no tengo negrita y es normal y accidentalmente presioné entra de esos un espacio extra ahí. Entonces si presiono el retroceso para que aparezca esto, asumirá el estilo de lo que era esa línea. Entonces tendremos que volver a darle estilo. Entonces si eso sucede, no entres en pánico. Solo tienes que volver a darle estilo y en realidad van a centrar esto también. Y eliminaré esta parte porque no me gusta cómo se ve eso. De acuerdo, así que ahora eso está hecho. Antes de continuar, solo voy a ahorrar para que si algo andaba mal, no pierda este cambio aquí mismo. Entonces esa es la práctica Probablemente quieras adoptar un oleaje simplemente ahorrando constantemente. Entonces volveremos a tocar editar, y luego te mostraré realmente eliminar esta primera causa ya tengo sobre allá arriba y luego ahora vamos a poner en un bloque diferente y vamos a ver qué más hay disponible. Por lo que a continuación, hemos marcado hacia abajo. Ahora, recuerden que les dije en una conferencia anterior que la rebaja no es del todo demasiado importante, Así que quiero decir, podrían poner, como, texto regular. Entonces, en realidad, puedo replicar lo que tengo arriba en la parte superior. Entonces sobre nosotros, entonces podría hacer de ese encabezado uno y debilitarlo centrándolo. Podemos centrarlo si queremos poniendo etiquetas. Entonces ese es el centro. Um, realmente no me gusta usar mark down. decir, Esdecir,sólo me lo hace más difícil, así que en realidad no lo voy a usar, pero sólo sé que está ahí. Si alguna vez necesitas en el futuro. Hay un caso en el que, en realidad, usuario y ahí es donde sección de preguntas frecuentes en la página web que va a estar en la conferencia bonus sólo porque es un poco más avanzado y que necesitas cubrir un poco. Pero si eso es algo que te interesa, será en las conferencias de bonificación. Por lo que a continuación tenemos cotización. Entonces esto es de nuevo bastante sencillo. Es como una cita que alguien dijo So algo como Hola y ahora dicho por mí Así que mira así . De acuerdo, realmente no hay demasiadas formas en las que puedes darle estilo a esto. Se puede ir al editor de estilos de diseño y cambiar el texto como la fuente y el color y el tamaño. Pero además de eso, realmente no hay forma de, como, poner una cita de cierre o algo por el estilo en algún momento. Lugar sí vienen con eso. Entonces algunos no estoy seguro de cuáles, exactamente. Pero algunos de ellos sí tienen, como abrir y cerrar Comilla de Cotización, éste no. Entonces no voy a quedarme con eso. Pero sí, solo sé que está ahí, y así es como se vería con algún texto demo ahí. Así que cierra eso y elimínalo. Y luego a continuación, tenemos imagen de nuevo. Bastante sencillo. Simplemente le gusta agregar una imagen. Por lo que hacemos click. Agrega una imagen, y escogería una imagen que quiero agregar. Entonces es una esta, así que sigamos adelante. Entonces está cargando. Y entonces aquí podría poner un pie de foto si quiero, um, si no quieres capturar y simplemente quitarlo y luego no mostrar subfoto también tienes la leyenda aparecer como una superposición o solo cuando pasas el cursor sobre la imagen así se va. Y cuando vuelvas a flotar sale y lo verás mejor cuando realmente guardes. Entonces guardar No está ahí sin embargo, va a volver que no debe haber tomado. ¿ De acuerdo? Y luego pasas el rato. Ah, lo siento. En realidad no puse un título real para que lo hagan texto. Aquí vamos. Ahora se mostrará. Ahí vamos. Entonces ahora ya sabes por qué no aparecería. De acuerdo, así que eso fue imagen. También lo puedes estirar. Um, realmente no lo notarás mucho aquí. Uh, vamos a ver cómo puedo mostrarte cómo sería el estiramiento. Entonces si me pongo como un espaciador a un lado No, tampoco trabajaríamos en este caso. Um, bien. Más tarde, cuando entre. Cuando tenga la oportunidad de mostrarles qué estructuras les mostrarán lo que hace. Pero básicamente sólo se estira a toda la anchura. Por lo que en lugar de retomar, la mitad del contenedor tomaría el contenedor completo. Esperemos que tenga la oportunidad de mostrarles eso en una futura conferencia. Por lo que a continuación, tenemos lightbox. Lo que eso significa es que cuando alguien hace clic en la imagen, aparece en pantalla completa para que pueda verlo en pantalla completa. Entonces muéstrale lo que hace atrás. Entonces que alguien haga click en él y ahí vamos, sube en pantalla completa. Entonces esto es bueno para como, cualquier trabajo fotográfico, ese tipo de cosas, Realmente no para imágenes regulares que estás usando en un caso como este. Y luego también puedes darle estilo a la caja de luz para tener una superposición de luz. Entonces en lugar de ser negro alrededor de los bordes, será esperar así. De acuerdo, así que eso es lightbox. Y luego finalmente, también puedes ponerle un enlace a ella. Ahora no se puede tener lightbox y link porque obviamente cuando alguien hace clic en él, o bien van a un sitio web o a un link o aparece. Fue una imagen a tamaño completo no puedes tener ambas. Entonces si tienes lightbox, el enlace funcionará tan rápido para agregar enlace. Y podemos volver a poner cualquier, um, um, contenido o archivo del sitio web y luego dejar cancelar. Y entonces otra vez aquí también tienes ese punto focal que puedes controlar, pero eso es más o menos todo. Aquí tienes nombre de archivo, que siempre quieres rellenar. Entonces esto es realmente bueno para s CEOs. O pones tal vez algo así como, um, hombre y traje azul, correcto, así puedes guardarlo así. Así que adelante y quita esa imagen. Y creo que tenemos un par más que pasar. Entonces video de nuevo bastante auto explicativo te lleva al video. En realidad puedes hacer click aquí para ver todos los diferentes servicios que puedes enlazar. Entonces si tomo como un video de YouTube que tengo y él solo copia y tú solo pegas control C control V y el video aparece. Y si no te gusta la imagen que se está mostrando, en realidad puedes subir tu propia imagen. Entonces esa es nuestra subida, ésta, ¿verdad? Para que puedas usar tu propia imagen para que se vea así y presionan play de nuevo. Podrás tener subtítulo debajo de él. Por lo que saca la leyenda directamente de YouTube. Entonces no voy a usar la costumbre. Y eso es con subtextos. Entonces y puedes volver a cambiar el título aquí. Pero vamos a dar click. No mostrar. Entonces así funcionaría eso. Vamos a golpear Cancelar. Realmente no quiero mostrar un video, así que lo eliminaré, y luego pasaremos al audio. Por lo que funciona el audio. Puedes subir una pista de audio o en realidad puedes hacer clic en archivo externo y enlazar en un archivo de audio que podrías haber almacenado en tu plataforma de hosting donde alguien más está hospedando plataforma y luego la gente puede descargarlo. También se puede, si se podcast que todo lo que también se puede poner en su fuente RSS información y cosas aquí a través de iTunes. Pero de nuevo, solo toma nota de que esto solo funciona si lo estás agregando a una página bloqueada. Entonces en este momento, si siento esto en, en realidad no actualizaría mi iTunes. Um, sólo porque esta no es una página bloqueada, es sólo una página regular. De acuerdo, puedes saber más sobre eso por realmente sabes qué? Pondré el enlace en eso en la conferencia guerra, realidad, aquí mismo. Si haces click en, aprende más lo harás. Se tirará hacia arriba una pequeña sección que te dirá exactamente cómo pudiste podcast usándolo para que no pase por una causa justa. No mucha gente podcast. Y si lo haces, entonces siempre podrías ir y averiguarlo aquí porque no es realmente no es demasiado difícil. Solo tienes que rellenar aquí alguna información básica, y también puedes cambiar el diseño para que sepas cómo se ve y puedes dejar que la gente descargue el archivo de audio y podrás tenerlo más tarde. Oscuro. Entonces ese es el archivo de audio, y luego tenemos uno más, que está incrustar Ahora en la cama es como, Déjame en realidad solo mostrarte. Embebido es como una combinación de audio de video, y hay uno más aquí y soundcloud, porque lo que puedes hacer es que prácticamente puedes poner en cualquier u R l. Y lo tomará Así, por ejemplo, si yo tomar un video y ponerlo en eso en la cama se convierte en un video si tomé audio, así que es una copia, este enlace de una copia que puse aquí. Entonces se convierte en un audio. Y entonces si yo, um si me pongo, vamos a ver, ¿qué más había ahí que pudiera poner? Sí, Así que podrías poner en casi cualquier tipo de, um, invertible u R l allí. Por lo que también podría ser un audio. Ahora no tengo un archivo de audio como este es un soundcloud, pero no tengo un audiófilo específico que pudiera poner, pero haría lo mismo como si se pareciera al bloque de audio. Y entonces también podrías incrustar código específico, como Google Maps o algo así aquí. Por lo que también funciona como un código. Por lo que también funciona como beat code block el bloque de código. Por lo que es una buena combinación de diferentes que nunca he usado realmente en la cama. Acabo de usar una específica que necesitaba, pero si alguna vez encuentras que necesitas una cama, puedes seguir adelante y encontrarla aquí. Entonces eso son más o menos los diferentes siete bloques. Tenemos cuatro negros básicos. Echaremos un vistazo rápido a la galería y resumen en la próxima conferencia, y seguiremos a partir de ahí. 17. Páginas de edición: bloques de galería y resumen: De acuerdo, entonces en esta conferencia, vamos a hablar del resumen en el bloque de galería. Entonces vamos a seguir adelante de nuevo al contenido de nuestra página, e iré a añadir un bloque. Por lo que tenemos galería y resumen. Los dos son muy similares. Por eso los voy a cubrir juntos. Entonces empecemos con la presentación de diapositivas de la galería tan bastante sencilla. Podemos, um, subir imágenes que queremos utilizar para la presentación de diapositivas. Hice esto para la conferencia sobre pancartas. Si ustedes recuerdan eso, si no, um, básicamente solo presione upload y luego escojan un par de imágenes. Entonces digamos eso en eso, y automáticamente subirá esas imágenes. Vamos a darle un momento ahí y los hechos de subir. Tomaremos un poco de sidra. Ahora tenemos que entrar en el diseño, y podemos cambiar algunas características sobre este luchador. Por lo que una transición entre diapositivas automáticamente cada cinco segundos cada dos segundos si quieres mostrar siguiente en el control anterior. Entonces eso es un poco de flechas a la izquierda, y la derecha es automáticamente recortar imágenes. Si no recortamos las imágenes, el deslizador se volverá como diferente, como las imágenes son obviamente diferentes tamaños, por lo que tendrás como pequeños bloques en el lateral. Por lo que los bloques blancos. Te mostraré cómo se ve eso, en realidad, solo para que veas cómo se ve. Um, déjame agregar una imagen cuadrada que deberían hacer. Entonces le daremos eso a segundo para cargar, porque estos dos son muy similares por dentro, por lo que realmente no se puede decir cómo es el re dimensionamiento real. Entonces vamos a pegarle. Aplicar. ¿ Se ahorrará? Entonces ahí está esa imagen. Ahí está esa y ahí está esa. Entonces ven cómo este tiene un gran trozo de la imagen realmente faltante porque se supone que tiene mucho más del árbol visible, mientras que sólo tiene hasta por aquí. Entonces si hago click en veamos a dónde fue recortar automáticamente las imágenes. Entonces si no hago eso y ahorraría, dijo. Ya hay una pequeña barra en el costado, y para éste, hay una barra enorme en el lateral, lo que esto en realidad mostrará la imagen completa por especie de estirarla a la relación de aspecto y lanzando algunas barras a un costado para permitir ese estiramiento. Entonces vamos a pegarle ahora, así que eso es automáticamente recortar. Realmente no me importa demasiado el cultivo, porque de nuevo puedes decidir dónde quieres que ocurra ese cultivo. Para que puedas cambiar dónde está el foco, como acabas de ver. Entonces aquí puedes cambiar un poco aquí, puedes cambiar mucho. De acuerdo, así que eso es un poco de que también puedes mostrar las miniaturas en la parte inferior aquí. No demasiado importante en entonces el tamaño y también lo lejos que está de la foto de pico real . Por lo que realmente lejos, muy cerca. Y luego también donde queremos el título en la descripción. Por lo que ninguna de mis imágenes tiene descripciones. Déjenme realmente lanzar una descripción. Por lo que solo tienes que hacer click en este pequeño engranaje y acabaremos de poner prueba. Por lo que la prueba aparece en la parte inferior izquierda. Aquí, podemos cambiar eso a la cima. Entonces está en la parte superior y otra vez, Centro aparecerá justo aquí. Y entonces puedes hacerlo para que solo aparezca cuando pases por encima de él como la descripción real sola muestra cuando la tienes sobre esa imagen. Um, ahora, dentro de aquí, en realidad se puede cambiar el carrusel. Grande y ataque. Así que recuerda aquí atrás para galería tenías que deslizarte. Mostrar cuidado. Tan grande y saco. Si no sabía cuál escoger, sólo agarra alrededor de ellos. Uno. Podrías cambiar entre ellos aquí para que veas cómo se ven todos con tus imágenes . Entonces carrusel se vería así. Está bien. Y luego grilla se vería así. Bastante bastante obvio cómo sería un gran. Para que puedas hacer puedes tener las imágenes de cuadrados que puedes tener. Es un tres para así que es un poco más ancha a tres. Entonces es más, más en altura de lo que no con puedes tener 43 de nuevo pantalla ancha para que puedas tipo de escoger Lo que crees que mejor se ve. No me importó la plaza. Puedes mostrar el título que solo pongo para la primera imagen Y de nuevo podrías escoger si solo quieres tres imágenes. Entonces recuerda aquí tenía suficiente espacio para una imagen más. Pero sólo subí tres imágenes para que pudieras hacerlo tres y el aumento o disminución la almohadilla ings de disminución aumentan. A mí me gusta con menos relleno. Podrías hacer una caja de luz al hacer clic en la imagen, realidad se abre. Y si realmente quisieras enlazar a una parte diferente de tu sitio web, en realidad puedes estar vinculado esto a la página de contacto. Esto a la cartera, ese tipo de cosas. Y luego tenemos pila. Entonces eso son solo imágenes apiladas una encima de la otra y del Río, así que vamos a golpear. Aplicar. Entonces eso es algo así como el bloque de la galería. No. Ah, en realidad, una cosa más con un bloque de galería. Ya sabes, subí las imágenes. Ya tengo un bloque de galería. Perdón. Una página de galería que hice por aquí, si recuerdas antes. Y pongo estos tres logotipos ahí, así que si tienes una página de galería, en realidad puedes usar esa página en lugar de subir imágenes gratis. Entonces, por ejemplo, si agrego en una galería y luego en lugar de subir medios, hago clic en usar galería de fotos de medios existentes, y luego podría hacer que se preocupe. Entonces grilla, al igual que antes. Excepto ahora, no tengo que volver a subir las imágenes en un lugar diferente. De acuerdo, entonces voy a quitar esto porque obviamente no quiero mostrar eso. De acuerdo, entonces ahora echemos un vistazo rápido a la sección de resumen, así que tenemos lista de carrusel de pared y cuadrícula. Por lo que esto es muy similar a una sección de galería. Excepto ahora, en lugar de solo fotos y videos, en realidad podemos usar publicaciones en bloque y productos también. Entonces, por ejemplo, un clic en la pared y al igual que te mostré antes, puedes cambiar entre la pared Carousel List y la Cuadrícula tres aquí para que no tengas que seguir volviendo a agregar. Entonces vayamos al contenido. Ahora podemos escoger mi blawg, mi galería de fotos o en mi tienda. Entonces primero tenemos blawg. Ahora he puesto tres puestos de bloques temporales, y pongo una imagen para cada uno. Aprendes a hacer eso en una conferencia de líder sobre específicamente sobre poste de bloque. Entonces ahora mismo está configurado para ser un muro para que puedas poner digamos que tienes poste de cuatro bloques y los quieres todos en la misma fila. Simplemente puedes hacer que cada llámelos sea más pequeño con, y si quieres que esto sea, como para bloquear postes y luego otros dos aquí abajo, podrías aumentar una columna con Así que la canaleta con es el espacio entre cada poste de bloque así se podría hacer eso menos para acercarlos un poco más juntos. Entonces puedes cambiar el tamaño del texto demasiado grande. Hay una boda un poco más grande y también puedes centrarte. Por lo que ahí nos concéntricos. Me gustan más las cosas cuando se centran así que nos vamos Es eso Y entonces esto es para la fecha real. Por lo que puedes poner eso por encima del título debajo del título o por debajo del contenido. mí me gusta debajo del título. Pantalla Perfecta Ellen. Entonces en este momento, listo para mostrar 10 block post solo tengo tres, pero suelo poner esto a 30. Se puede cambiar a, como seis. Por lo que solo muestra tus seis más recientes o los seis que designas usando destacados para que puedas establecer un bloque botes que destacaron y luego lo otro que puedes hacer es tal vez además de la fecha, también quieres mostrarle al autor para que puede escoger autor por lo que le mostraremos al autor también. Ahí vamos. O quizá la categoría. No he designado categorías, así que eso no mostrará nada en este momento, las únicas que he configurado es autor. Entonces eso es más o menos lo único que te puedo mostrar. Y si no quieres que la fecha se muestre, puedes desactivar la fecha. Entonces cambié eso a ninguno, y la fecha va bien. Y también puedes mostrar la lectura más. Entonces, obviamente, esto no es todo el poste de bloque. Hay mucho más en ello, Así que lee más. Entonces echemos un vistazo rápido, uh, uh, galería de fotos. Por lo que usar la pared en realidad es un poco diferente en comparación con usar um, por ejemplo, de uno de los bloques de galería porque los bloques de galería no tienen muro como plantilla predeterminada . Y me gusta mucho cómo se ve la pared. Entonces, por ejemplo, si cambio esto a más de seis fotos, así que lo dije todo encendido, entonces no quiero mostrar la imagen porque no hay lástima la fecha para la imagen. No tiene sentido mostrar eso, y aún verás que aquí hay más altura que un ingenio. A mí me gusta que sea parejo. Por lo que sólo escondes el título y escondes el extracto. Entonces ahora están parejos. De hecho reduciré este basando sus quizá 20 Terry off. Mira, me encanta cómo se ve eso en comparación con solo galería regular. Entonces una galería regular, si recuerdas, lo más cercano que tuviste era cuadrícula derecha Y lo grande se vería como esta rejilla. Y realmente no me gusta cómo se ve eso. A mí me gusta un poco más la pared. De acuerdo, entonces habrá momentos en los que definitivamente querrás que estas imágenes sean enlaces a diferentes sitios web o diferentes partes de tu propio sitio web. Ahora, antes de cómo lo hicimos fue que llegamos aquí a donde realmente cargamos las imágenes. Pero ahora, ya que lo estamos sacando de una página de galería diferente, en realidad tenemos que ir a la página de la galería trasera para, como, establecer un enlace. Por lo que el brazo de la página de la galería usando su galería de fotos. Entonces voy allá y luego haremos click en el engranaje medio y luego iremos a opciones y en realidad podemos establecer Ustedes están todos aquí. Entonces, por ejemplo, google dot ta ¿Y luego qué? Guardar? Entonces ahora si vuelvo a mi página principal, si hago clic en, le daremos un segundo para cargar ahí arriba. Entonces si hago clic en esto, en realidad me llevará a Google esta vez. Entonces Google. Jason es perfecto, y entonces ahora volveremos a editar Calorie Perfect. Entonces esa fue la sección de resumen. Entonces en la próxima conferencia, cubriré qué es qué. Podemos sumar a través de la opción más y los filtros y levantar. Entonces todos los diferentes iconos que tenemos aquí y nos vemos entonces 18. Páginas de edición: más bloques: Por lo que lo primero que tenemos esta búsqueda de búsqueda permite a las personas obviamente buscar en tu sitio web . Entonces para un bloque post algo así. Um, si pones página específica de búsqueda, sus sociales solo muestran resultados de esta página, no quiero realmente hacer eso. Entonces lo dejaremos como está ahora mismo. Y el tema es oscuro, por lo que debería estar bien. Entonces lo puse. Creo que tengo post uno fue uno de mis posts. Entonces este es mi bloque post uno. Por lo que muestra una miniatura de la misma. Tan genial que puedes usar en tu barra lateral. Ahí es probablemente donde la gente lo usa con más frecuencia. A continuación, tenemos enlace de contenido para que en realidad puedas enlazar a una de tus páginas. Entonces, por ejemplo, tu bloque para que la gente pueda hacer clic en ese enlace e ir directamente a tu bloque, Donde eventos o realmente puedes poner páginas específicas. Entonces el sobre pico y voy a dar una racha rápida abajo de lo que se trata. En realidad nunca utilizo botones si tengo que hacerlo. Por lo que a continuación, tenemos botón para que puedas darle estilo a los botones, así que contacta con nosotros y se puede enlazar a la página de contacto. Entonces no un sitio web externo. No un archivo, sino un contenido que es mi real. Contacta a este melocotón y luego simplemente haz clic en tamaño exterior. Podrías hacerlo pequeño, mediano, grande, grande, y puedes cambiar el color de esto a través del editor de estilos y podrías hacerlo a la izquierda o derecha o al centro. Haremos que se centre y luego ahorraremos. Por lo que contáctanos. Y luego a continuación tenemos la nube de toma. Entonces eso es para tu blawg. Um, así que escoges algo, obviamente la forma más común de usarlo, como con el blogueado, por lo que cubrirá todos los diferentes tipos que están disponibles en tu sangre. Entonces, por ejemplo, alguien hace clic en sitio web, lo lleva, muestra toda la publicación de bloque que tiene el sitio web de la etiqueta. Cubriremos más sobre las etiquetas cuando hablemos también de blog, por lo que se volverá un poco más obvio lo que es, y también puedes hacerlo como tu galería de fotos. Pero no tengo ninguna etiqueta en mis fotos. Yo tampoco tengo etiquetas en mis, um , productos . Apenas en mi cuadra, pongo etiquetas para que también puedas usar categorías si no matutinas ism específicamente toma. No creo que tenga categorías configuradas para cualquiera de estos todavía. No. Entonces nos iremos. Se necesita y luego ordenar por peso. Entonces eso es lo que se usa con más frecuencia y cuáles ven las personas con más frecuencia. Por lo que ahora mismo parece que la gente fue a mi puesto de bloque. Esa es la mayoría de sus sitios web, y luego ¿cuántas tomas quieres mostrar? Entonces creo que eso es todo. No creo que aún esté tan bien, se desalentó, y lo volveré a borrar. Puedes usar eso en tu barra lateral. Por lo que la gente accede rápidamente a un tipo específico de post, y luego tenemos finalmente archivo. Entonces, por ejemplo, si hacemos clic en Blawg, mostrará archivo todos tus blogs en noviembre, después en diciembre. Pero solo tengo barcos bloqueados a partir de noviembre, y luego puedes tener productos, galería de fotos, todo lo que contaminé en noviembre y eventos e incluso exhibido como lista o así. Si es una lista, en realidad tienes que estar seguro de que realmente rápido tienes que hacer click en ella y luego abriremos la lista. De acuerdo, entonces es una lista de todo, así que noviembre y luego diremos diciembre y en enero. Entonces tenemos. Creo que se le cayó. Sí. De acuerdo, entonces para este , dirá noviembre, diciembre, enero, febrero. Nuevamente, estos se usan mejor en el comprador lateral. Ahí es donde se usan principalmente, en realidad el grupo local por mes, año etiqueta de categoría autor. Yo sólo tengo un autor, así que no tiene sentido ordenarlo por autor y luego mostrar cuántos. Cuántas publicaciones diferentes tenemos realmente para ese autor. Por lo que para los productos, mostrará cuántos productos etcétera otra vez. Es una pequeña característica ordenada, pero en realidad nunca la había usado antes. Entonces es un Así que eso es todo lo que hemos enumerado bajo los filtros, Um, y finalmente en la siguiente conferencia cubrirá estos, y luego terminaremos con los diferentes bloques. 19. Páginas de edición: filtros y bloques de listas: Por lo que lo primero que tenemos esta búsqueda de búsqueda permite a las personas obviamente buscar en tu sitio web . Entonces para un bloque post algo así. Um, si pones página específica de búsqueda, sus sociales solo muestran resultados de esta página, no quiero realmente hacer eso. Entonces lo dejaremos como está ahora mismo. Y el tema es oscuro, por lo que debería estar bien. Entonces lo puse. Creo que tengo post uno fue uno de mis posts. Entonces este es mi bloque post uno. Por lo que muestra una miniatura de la misma. Tan genial que puedes usar en tu barra lateral. Ahí es probablemente donde la gente lo usa con más frecuencia. A continuación, tenemos enlace de contenido para que en realidad puedas enlazar a una de tus páginas. Entonces, por ejemplo, tu bloque para que la gente pueda hacer clic en ese enlace e ir directamente a tu bloque, Donde eventos o realmente puedes poner páginas específicas. Entonces el sobre pico y voy a dar una racha rápida abajo de lo que se trata. En realidad nunca utilizo botones si tengo que hacerlo. Por lo que a continuación, tenemos botón para que puedas darle estilo a los botones, así que contacta con nosotros y se puede enlazar a la página de contacto. Entonces no un sitio web externo. No un archivo, sino un contenido que es mi real. Contacta a este melocotón y luego simplemente haz clic en tamaño exterior. Podrías hacerlo pequeño, mediano, grande, grande, y puedes cambiar el color de esto a través del editor de estilos y podrías hacerlo a la izquierda o derecha o al centro. Haremos que se centre y luego ahorraremos. Por lo que contáctanos. Y luego a continuación tenemos la nube de toma. Entonces eso es para tu blawg. Um, así que escoges algo, obviamente la forma más común de usarlo, como con el blogueado, por lo que cubrirá todos los diferentes tipos que están disponibles en tu sangre. Entonces, por ejemplo, alguien hace clic en sitio web, lo lleva, muestra toda la publicación de bloque que tiene el sitio web de la etiqueta. Cubriremos más sobre las etiquetas cuando hablemos también de blog, por lo que se volverá un poco más obvio lo que es, y también puedes hacerlo como tu galería de fotos. Pero no tengo ninguna etiqueta en mis fotos. Yo tampoco tengo etiquetas en mis, um , productos . Apenas en mi cuadra, pongo etiquetas para que también puedas usar categorías si no matutinas ism específicamente toma. No creo que tenga categorías configuradas para cualquiera de estos todavía. No. Entonces nos iremos. Se necesita y luego ordenar por peso. Entonces eso es lo que se usa con más frecuencia y cuáles ven las personas con más frecuencia. Por lo que ahora mismo parece que la gente fue a mi puesto de bloque. Esa es la mayoría de sus sitios web, y luego ¿cuántas tomas quieres mostrar? Entonces creo que eso es todo. No creo que aún esté tan bien, se desalentó, y lo volveré a borrar. Puedes usar eso en tu barra lateral. Por lo que la gente accede rápidamente a un tipo específico de post, y luego tenemos finalmente archivo. Entonces, por ejemplo, si hacemos clic en Blawg, mostrará archivo todos tus blogs en noviembre, después en diciembre. Pero solo tengo barcos bloqueados a partir de noviembre, y luego puedes tener productos, galería de fotos, todo lo que contaminé en noviembre y eventos e incluso exhibido como lista o así. Si es una lista, en realidad tienes que estar seguro de que realmente rápido tienes que hacer click en ella y luego abriremos la lista. De acuerdo, entonces es una lista de todo, así que noviembre y luego diremos diciembre y en enero. Entonces tenemos. Creo que se le cayó. Sí. De acuerdo, entonces para este , dirá noviembre, diciembre, enero, febrero. Nuevamente, estos se usan mejor en el comprador lateral. Ahí es donde se usan principalmente, en realidad el grupo local por mes, año etiqueta de categoría autor. Yo sólo tengo un autor, así que no tiene sentido ordenarlo por autor y luego mostrar cuántos. Cuántas publicaciones diferentes tenemos realmente para ese autor. Por lo que para los productos, mostrará cuántos productos etcétera otra vez. Es una pequeña característica ordenada, pero en realidad nunca la había usado antes. Entonces es un Así que eso es todo lo que hemos enumerado bajo los filtros, Um, y finalmente en la siguiente conferencia cubrirá estos, y luego terminaremos con los diferentes bloques. 20. Páginas de edición: comercio, gráficos y bloques sociales: Está bien, chicos. Por lo que hoy vamos a cubrir los últimos pedacitos de bloques que tenemos disponibles para páginas. Entonces vamos a ir adelante y golpear. Editar. Entonces en este momento, sólo les estoy mostrando como un recorrido rápido por los diferentes bloques que tenemos disponibles y al más tarde voy a repasar cada uno específicamente cuando lo use en mi propia página web. Entonces sigamos adelante y veremos creo que cubrimos más, Así que estamos sin llenar. No, eso también lo hicimos. Entonces Karmi es tan primero que tenemos producto. Entonces eso es bastante sencillo. Podríamos poner como un producto específico tan bien, rápido ahí. Y sólo lo he advertido. Yo creo que sí. Yo sólo tomo eso ahí dentro es para poder ocultar la imagen. Puedo volver a mostrar la imagen. El título está justo por aquí. Podría esconder eso y lo mismo con el precio. Y también descripción. Y luego finalmente en el botón de la tarjeta. Por lo que se ve así y puedes escoger la cantidad. Ahora si solo tienes uno en stock, no mostrará la cantidad. Por lo que también podemos alinear todo al centro o a la derecha. Entonces otra vez, como dije. A mí me gusta la línea Central mejor que veas, En este momento esta imagen es muy grande. Lo que puedes hacer es lo que mencioné antes con los espaciadores. Entonces pon un espacio de este lado en este basado en el otro lado así para mantener las cosas centradas . Ahí vamos. Entonces ahora no lo es. Entonces si arrojas la línea aquí, así que mejor separación. Entonces, sin embargo ahora no es tan grande. De acuerdo, entonces así es como agregarías en un producto específico. A continuación, tenemos a Amazon. Por lo que esta es en realidad una característica extremadamente poderosa, por lo que en realidad puedes vincular cualquier producto en Amazon. Entonces, por ejemplo, si escribo, um, veamos, sitio web probablemente tire hacia arriba algunos libros. Sí, así que construir sitio web para maniquíes y puedes centrarte para que realmente puedas poner un botón de compra de anuncios , que eso los lleve a Amazon en Lo realmente genial de esto es que realmente estoy borrando que lo realmente genial sobre esto quiero decir, si entro en ajustes y luego avanzado y luego servicios externos, puedes poner tu año de etiqueta asociada de Amazon para que cualquier producto que realmente vendas realmente obtengan ingresos por lo que obtendrás un poco del recorte cuando la gente hacer una compra. Por lo que tienes que inscribirte en su programa de afiliados primero, claro, pero de nuevo, muy potente, porque puedes buscar a través de toda la Amazonía, poner exactamente los productos que quieras. Entonces a continuación, veamos qué más tenemos aquí. Por lo que tenemos el botón de donación. Entonces si estás corriendo como una silla dos años algo en tu página web, realidad puedes tomar donación. Entonces otra vez, um, fondo de caridad, podríamos nombrarlo. No des una descripción rápida. Diviértete esta caridad y lo que quieres que diga el botón Así puedes hacer una donación, por ejemplo. Centro eso, y pueden poner cualquier montura. Se quiere dejar que donen, por lo que en realidad podría etiquetar a cada uno como donación de principiante Automatización profesional. Entonces algo así como un negocio donando y puedes agregar valores más diferentes, y siempre pueden especificar, como un valor específico como $26. Siempre tienen la oportunidad de hacer eso, y luego cuando hacen una donación, puedes recolectar información adicional poniendo en un formulario. Entonces si quieres tomar en su nombre. Podrás pedirles su nombre y hacer que se requiera. Entonces cómo se verá eso si hacen clic en hacer una donación, los llevará a esta página y luego en realidad, una vez que golpeen, continuarán . En realidad estoy a ver si puedo continuar aquí. Sí, así que dura para en realidad. ¿ Sabes qué es esto? Sólo pongamos un número aleatorio ahí, Así que sí, la última vez para el nombre. Entonces este es el va por debajo de la categoría más. Para que puedas recolectar cualquier tipo de información que quieras, como correos electrónicos. Cualquier cosa por el estilo. Entonces ese fue el botón de donación otra vez, ¿recuerdas? Yo no lo dije, padre, vamos apareciendo ahora. Entonces borra eso para dejar esto porque obviamente quiero poner ese producto en mi página web, tratando de mantener las cosas limpias aquí. Dejaré eso ahí por ahora. Entonces tenemos movimiento en las gráficas. Por lo que estos son los diferentes gráficos que tienes disponibles. Todos son bastante simples. Es decir, barras gráfico de líneas por gráfico. Si se utiliza excel antes de esto es ah versión mucho más fácil de su gráfico O bar, se puede cambiar entre los gráficos año tras. Entonces, ¿qué información quieres poner? En realidad se puede importar información del valor separado por comas. Entonces, por ejemplo, así. Ahí vamos. Por lo que es justo ahora mismo mostrando a la población de Nueva York Las Vegas en San Francisco. Um, en realidad podemos poner subtítulos, mostrar las poblaciones de leyenda en las ciudades y luego ver eso. Entonces esto es como la población de leyendas en este gráfico. ¿ De acuerdo? Y podemos, por supuesto, hacerlo de diferentes colores. Por lo que escoges uno de los diferentes disponibles aquí, así fue que también podrías exportar los datos. De acuerdo, así que solo copie esto y pegarlo como un texto, un documento de texto, Y luego puede insertar más datos aquí para que podamos poner, por ejemplo, Michigan y hacerlo 200 y luego puede agregar otro, otro tipo de valor. Entonces, además de la población, podemos poner, um, digamos negocios. Entonces una cuenta de cuántos negocios hay, así que sería como 2345 Así que otra vez, ves, va a mostrar que es más difícil ver a su pequeño hacerlo como 20 20 40. Ahí vamos. Entonces ya ves cómo se ve eso, y entonces podríamos hacer de eso un gráfico de líneas. Por lo que esta sería la población. Este sería el negocio y su etiqueta justo por aquí. Sería más fácil ver si haces de éste un color. Ahí vamos. Y luego también, tenemos gráfico circular. Entonces así se vería este. De acuerdo, entonces para un gráfico circular, está usando población en este momento y no negocios. Entonces si mueves negocios primero No, veo periodo. Por lo que ahora mostrando el número de negocios. Bueno, son pastel. Entonces, de nuevo, nunca he tenido que usar esto, realidad, pero puede ser útil en algunos casos específicos. Entonces a continuación, tenemos los bloques sociales, por lo que ninguno de estos realmente funcionará a menos que tengas bloques sociales configurados en escenarios. Así que en realidad tienes que entrar en ajustes, cuentas conectadas, y luego agregarías, como un conteo específico conectivo, y aquí hay toneladas de ellas. Entonces estoy seguro que encontrarás todo lo que necesitas aquí y luego una vez que agregues al hombre, Así como puedes ver, tengo Facebook y Twitter conectados, así que esos fueron los únicos que realmente puedo usar. Entonces si vamos a Twitter. En realidad puedo poner en cuántos tweets quiero tirar hacia arriba. Entonces tal vez tres es una buena cantidad, y luego puedo poner, como en lugar de usar mi perfil, como en una búsqueda de unos hashtags específicos. Entonces esa es una búsqueda de Squarespace. De acuerdo, y luego aplicar. Ya veremos cómo se ve esto. Entonces eso sería lo que se vería. De acuerdo, así que esa es la búsqueda, mostrando mi imagen o no, y mostrando mi nombre de usuario o no. Por supuesto que quieres mostrar tu nombre de uso. Simplemente porque todo el punto de tener este año es enviar más gente a Twitter, no buscar, sino mostrar Avatar usará nombre tenía un botón de seguimiento, así que solo sigue. Bastante sencillo, pero de nuevo, extremadamente poderoso. Entonces, ¿qué? ¿ Eliminar eso? Por lo que también tenemos cuatro cuadrados. No tengo eso conectado, pero es similar a lo que hace Twitter. Enlaces sociales en realidad pone un enlace a todos los que has conectado. Entonces para mí, eso es Facebook y Twitter. Podemos alinearlo, cambiar el tamaño, cambiar los diferentes tipos de estilos que tenemos y también cambiar el color dos x estándar. Entonces este es el color debe ser que podríamos hacerlo negro donde podamos hacer que espere. De acuerdo, entonces no tenemos vínculos sociales. En realidad pondría en el pie de página. Ahí es donde pones la mayor parte del tiempo o en la página de contacto. Y también tenemos nuestro SSO para tu blog. Si quieres tener un feed RSS, no tengo uno, así que no lo voy a usar 500 PX. Para que algunos un servicio de intercambio de fotos. Um, para que puedas meter eso? Realmente no tengo uno, así que quiero decir, no tengo cuenta, pero no quiero ponerlo con esto porque no está asociado a mi negocio. Entonces tenemos instagram para que puedas sacar tus fotos parpadeando al igual que 500 recoge su otra vez compartiendo fotos en la soundcloud Así podrás compartir tus álbumes que lanzaste o cualquier tema que hayas lanzado. De acuerdo, así que eso es todo bajo las cartas de comercio y los bloques sociales. Y una cosa más es cuando usamos ese feed de twitter. Entonces aquí abajo, la única razón por la que realmente saca mi feed de twitter es porque cuando entro a mis cuentas conectadas aquí y luego a Twitter, tengo datos de descarga encendidos. Si no tengo eso encendido, en realidad no va a poder sacar nada. Entonces, en este momento parece que no tiene ninguna publicación o no tiene datos de dólares activados . Entonces tenemos que entrar. Enciende eso ahora, por defecto, que está activado. Por lo que realmente no hay una razón similar por la que debe apagarse por defecto a menos que lo apague. Curso. Entonces vamos a pegarle. Guardar. Podríamos tener que refrescarnos. Así que intenta ir al portafolio y volver a casa. Parece que el guardado de la cuenta conectada no tomó por lo que restablecer los datos. ¿ Y qué ahorrar? Ahí vamos. Por lo que sólo tomó un poco de reinicio. OK, entonces ese es el final de esta conferencia. Y en la siguiente imagen cubrirá un poco más de detalle, cosas sobre páginas, específicamente imágenes. Está bien, 21. Páginas de edición: cómo crear un formulario: Entonces déjame ir a mi página Contáctanos, y voy a poner un en forma aquí. Entonces nosotros para que eso cargue. Entonces le daremos un click. Y en realidad puedo eliminar todo este contenido demo porque, por supuesto, no tiene nada que ver con mi negocio. Así que borra ahora, cuando no queden bloques en la página, Squarespace creará automáticamente un libro de texto porque verás en un segundo Darío automáticamente hacer el libro de texto. Por lo que una vez que se pone en una forma un minuto cancelar. Todavía no lo modificamos, y luego voy a eliminar ese bloque de texto por ahora. Entonces solo hay un formulario, así que va en ello. Voy a cambiar esto en formulario de contacto. No necesito que la gente llene su asunto, pero nombra mensaje de correo electrónico. Todo importante. Um, si hace clic en editar nombre se requiere, eso es bueno. Se requiere correo electrónico. Eso también es bueno, y también se requiere mensaje. Entonces es perfecto. Entonces si volvemos a nombrar la descripción, lo que sea que escriba aquí, así que por favor introduzca su nombre completo. Bueno, por ejemplo, ven justo debajo de aquí y luego correo electrónico. Podemos poner algo así como, um, esto será el correo electrónico que más utilices ahora podemos cambiar todos estos tamaños de fuente más adelante porque es muy pequeño. Um, y para cada uno, también hay posicionadores. Entonces esto en realidad va directamente al cuadro de entrada para que podamos poner ejemplo ejemplo ejemplo oscuro en el ejemplo dot com Solo la gente sabe en qué formato lo estamos esperando, así que eso es bastante sencillo. Es decir, sólo hay un formato para él. También se cree eso y luego echaremos un vistazo a algunas de las diferentes opciones que tenemos. Entonces si hacemos clic en el plus tendrá un cuadro diferente, como un cuadro diferente que aparece que muestra qué tipo de sentir podemos tener. Entonces primero es el texto, así que texto cuando lo pones, es bastante sencillo. Entonces, por ejemplo, um, ciudad, Entonces qué ciudad de su de y podemos hacer que se requiera. Podríamos poner como un positor como Toronto, así que no los necesito y sacar eso. Entonces tenemos área de texto, que es lo mismo era texto, excepto que es mucho más grande. Entonces, por ejemplo, ves nuestras áreas de texto como líneas múltiples. Donde está texto por sí solo era sólo una línea recta a través, y luego tenemos selecto. Entonces aquí podemos tener, como, un desplegable que puedan recoger. Entonces, por ejemplo, um, ¿ eres varón o mujer? Y luego aquí. Por lo que ponemos una opción por línea. Tan masculino, femenino. De acuerdo, entonces podemos tener algo así y luego vamos a seguir adelante y quitar eso Así que a continuación que tenemos casilla de verificación. Entonces esto es lo mismo que teníamos antes con el desplegable, Excepto que solo pueden arrepentirse en el desplegable, el único pick one. Dónde está con la casilla de verificación, se pueden recoger todos los que quieran. Entonces pasatiempos. Y entonces no necesitamos una descripción hasta las opciones. Digamos, computadoras, ciencia, juegos tecnológicos. Por lo que tenía aplicar y guardar para que puedan chequear tantos como quieran. ¿ De acuerdo? Y hasta pueden dejarlo en blanco así que nada está construyendo. Entonces sigamos adelante y eliminemos eso. A continuación tenemos Botón de Radio, que es misma casilla de verificación, excepto que tienen que recoger sólo uno así radio, y vamos a poner, por ejemplo otra vez, podemos hacer macho o hembra otra vez si tú quieres tan masculino o femenino y pondremos en correo en una línea y hembra en la otra. Por lo que tienen que escoger uno de estos dos. De acuerdo, así que ese es el botón de radio. Entonces tenemos encuesta, Así que Sí, esta es bastante directa también. Entonces, por ejemplo, digamos que me gusta este sitio web. De acuerdo, así que eso es todo. Sólo hay, como, cinco opciones. Realmente no podemos cambiar esos cinco. Entonces esto es lo que piensas. Entonces eso es sólo una descripción. Por lo que no podemos cambiar el fuerte. De acuerdo? desacuerdo Todas esas cosas. Por lo que me gusta este sitio web. Se puede poner otro llamado. Um, esta es la mejor palabra. Dilo. Algo así. Está bien. Encuesta bastante básica ahí. A continuación, tenemos nombre ningún nombre toma automáticamente el nombre y apellido. No hay forma de apagar eso. Um, realmente no me gusta sólo porque quiero decir, ¿cuál es el nombre? Algunos En realidad no necesitas los apellidos a veces. Entonces lo que haría es, en lugar de un nombre, simplemente pondría en un cuadro de texto y tal vez pondría en nombre y luego haría que eso fuera requerido. Yo haría eso más a menudo que tener nombre y apellido, pero de nuevo, depende de ti cómo quieres almacenar, um, um, información en tu base de datos o en tu viaje de correo? Adelante y echemos un vistazo. Entonces contraseña. Por lo que cualquier cosa que escriban aquí tendrá estrellas automáticamente. Entonces sigamos adelante y guárdelo así contraseña. Es así. De acuerdo, ahora, nunca antes había tenido que usar contraseña. Realmente no sé por qué lo usarías. A lo mejor si estabas recopilando alguien le está usando una contraseña si estabas vendiendo como servicio S CEO y él lo caminó para ingresar su información de inicio de sesión para su página web, que puedas iniciar sesión, hacer cambios. Pero realmente no sé por qué necesitarías eso además de algo así. Entonces, eliminemos eso y veamos qué más. Por lo que tenemos dirección para que puedas pedir a la gente que vuelva a ingresar la dirección. De lo que no me gusta de esto no se puede controlar lo que en realidad se pide. Por lo que automáticamente pide dirección una dirección al estado de la ciudad, zip slash, código postal y país, y realmente no hay manera de modificar lo que se muestra allí. Y luego tenemos Twitter. Entonces de nuevo, ahí es donde se rellena automáticamente su información de Twitter el símbolo at para ellos A continuación, tenemos correo electrónico, por lo que les pides la dirección de correo electrónico, igual que aquí mismo. Página web. Usted me pidió que pusiera en el enlace a su página web, y luego tenemos fecha para que puedan volver a rellenar una fecha específica. No hay forma de modificar en qué orden entra. De acuerdo, A continuación, tenemos tiempo. Entonces si estás programando como una reunión, puedes preguntarle qué hora es mejor para ellos. Y luego tenemos números telefónicos. Puedo recoger algunos de estos números telefónicos y luego un número justo específico. Por lo que podrías preguntar, como, cuántos sitios web tienes y luego aplicar Guardar. Entonces, sí, simplemente ingresarían un número aquí. No, en realidad nunca he intentado enviarlo con solo letras en, pero, quiero decir, creo que debería funcionar. Vamos a darle una oportunidad. En realidad, intentémoslo con solo texto. Ah, sí. Está bien. Um sí, deben ser números y no madre ni el personaje, así que al menos sabemos que funciona como debería. Entonces sigamos adelante y eliminemos eso. Y entonces tenemos moneda. Entonces, como, guardar Así crees Aquí puedes poner algo como cuánto quieres pagar por su servicio? ¿ Al igual que qué? ¿ Cuál es tu presupuesto? Algo así. Y luego alinear para separar las diferentes cosas. Entonces, por ejemplo, si no lo hago, Entonces si no quiero una línea y solo quería ser sección tan exacta, por ejemplo, podría ser, um, información personal. Y podría estar recogiendo eso aquí arriba, y luego debajo, podría tener otra sección que lo llamara información de negocios, y luego puedo agregar un texto. ¿ Cuál es su nombre comercial? Entonces, como puedes ver, así es como divides una forma hacia arriba. Y podrías, por supuesto, quitarte esa línea. Pero, quiero decir, la línea agrega un poco más de organización, así que dejaría eso dentro. De acuerdo, A continuación, nos hemos escondido. Por lo que este es un valor oculto que puedes recolectar. Es decir, puedes leer sobre leer más sobre ello aquí. No voy a entrar demasiado en detalle con él, solo porque no veo a demasiada gente usándola a menudo. Entonces, um, una de las razones que podrías querer usar es que, si envías a alguien a tu sitio web, puedes usar el formulario de contacto para tomar una parte específica de la URL. Entonces, ¿sabes de dónde venían? Um, solo para que puedas hacer un seguimiento de fueron, como, qué métricas como, dónde viene la gente en realidad No es demasiado importante. Puedes usar el análisis de Google y cosas así, pero si quieres aprender más al respecto, solo ve por aquí, Vale, Vale, así que cierra eso y te acercaremos al almacenamiento. Entonces aquí, esto es lo que email cualquier cosa que la gente envíe aquí irá a este correo electrónico. Se rellena automáticamente en el like la dirección de correo electrónico que usaste para crear esta cuenta. Puedes cambiarlo a cualquier otro correo electrónico que quieras aquí y solo conectarte ahora si no lo quieres al modo centinela, sino más bien quieres recolectar correos usando chimpancé de correo. Puedes hacer click aquí para conectarlo como te mostré antes y en una conferencia anterior, y también lo dijiste para ir a Google Drive y luego si vamos a avanzado, podemos cambiar lo que dice este botón. Entonces manda mensaje y podemos centrar eso Y una vez que se peguen se someten. Este es un mensaje que aparece para ellos y This is a post message HTML. Por lo que puedes tener acciones específicas realizadas usando código HTML y los modos lightbox en este momento . Si hacen clic en el formulario abierto, entonces podrían llenar el formulario. Y obviamente es sólo uno más rápido. Por lo que realmente no quiero dedo del pie como que el usuario haga eso. Pero si quisieras hacer eso, cambiarías el botón de formulario aquí, así que ponte en contacto. Pero de nuevo, casi nunca uso eso. Y realmente no creo que sea una buena idea. Entonces vamos a golpear. Aplicar. De acuerdo, entonces esta es la página de contacto. ¿ Se ahorrará? De acuerdo, entonces ese es un formulario de contacto. Will Will especie de modificó de nuevo su página más adelante. 22. Páginas de edición: imágenes: De acuerdo, Así que definitivamente la parte más grande de un sitio web son las imágenes, Especialmente en este día y edad donde nadie quiere tomarse el tiempo para leer toda la redacción en y en una página. Entonces, por ejemplo, si alguien viniera a esta página, realmente no se tomarían el tiempo para leer esto a menos que realmente estuvieran interesados en nuestra página web. Por lo que de inmediato miran las imágenes que miran el menú. Mira cómo lucir aquí mismo. Mira aquí mismo en forma de Lincoln F. Entonces empiezan por arriba, a la izquierda, izquierda,cruzan el menú, bajan, luego cruzan. Después bajan, y eso se trata de los enfermos más lejanos. Probablemente vaya. Probablemente ni siquiera se desplazarán hasta la parte inferior de la página. Por lo que sólo están buscando información valiosa antes de retroceder y volver a su búsqueda en Google. Así suele ser como la gente navega por los sitios web. Entonces lo que tenemos que hacer es enseguida cautivar su como su atención con una imagen, por lo que definitivamente las imágenes son muy importantes. Entonces voy a cubrir sólo imágenes en esta conferencia. Entonces adelante y pongo una imagen. Está bien. Ahora nunca exhibo leyendas para mis imágenes. Entonces voy a pegarle, No mostrar porque realmente no me gusta cómo aparecen estos epígrafe. Son pequeños, y realmente no me gusta re dimensionando cada uno por sí mismo. Entonces entonces primero pondré una imagen pequeña. Entonces como puedes ver desde el pop up, este es de 250 píxeles e ingenio y 1 81 de altura. Entonces voy adelante y meto eso y te darás cuenta a pesar de que el bloque era así de grande, se encogió el dedo del pie sostener la imagen a su tamaño completo. Entonces en este momento, esto tiene 250 píxeles de ancho, así que es del tamaño de mi archivo original. Ahora bien, si quiero que esto sea más grande, por lo que cubre el completo con su va a estirar la altura también solo para mantener la relación de aspecto . De lo contrario, es como que se veía como va a lucir realmente estirada por lo que se vería así. Entonces ya ves cómo se estira tanto con como con altura, Vale, Pero esta es una imagen de muy baja calidad. Tan sólo porque la resolución fue muy baja para empezar. De acuerdo, así es como es eso lo que hace ese botón de estiramiento y si alguna vez tienes que usarlo, es mejor encontrar una imagen de mayor resolución. Si no tienes uno, puedes usarlo. A pesar de que realmente no me gustaría. Aquí se pueden ver todos los píxeles en las esquinas. Parecen casitas. Odio cómo se ve eso, así que nunca lo uso. Entonces déjame seguir adelante y poner una imagen real como una más grande. Entonces déjame meterme. Sí, creo que es uno más grande. Entonces pon eso, para que eso se cargue en su tamaño completo. Por lo que ha tardado bastante tiempo en procesarse, lo que me está diciendo que probablemente sea una imagen más grande. Ahí vamos. Entonces eso es como bordes lisos porque era una imagen muy grande para empezar. Entonces aquí, si nos estiramos, no pasa nada porque ya está al completo con porque es lo suficientemente ancho. De acuerdo, entonces otra vez, podemos tener que hacer click a través. Todos ustedes están aquí. Entonces si alguien hace clic en esta imagen hacia donde va, así que veamos qué podemos hacer con esta imagen. ¿ De acuerdo? Entonces primero veremos que tenemos este pequeño punto aquí si pasas sobre él. Verás este poco que cambia a gustar estas dos líneas con un aire subiendo y bajando. Si haces clic y mantienes pulsado y sube y baja, puedes cambiar el tamaño de la imagen. De acuerdo, entonces va a un poco pop Aquí vamos un segundo. Entonces cuando vas allá abajo vamos. Tan justo cuando empieza, como pasar de estirarse verticalmente a estirarse horizontalmente. Ahí es donde conoces tu espalda, la imagen original. Entonces si vas todo el camino hasta aquí y quieres volver a Original, puedes tirar hacia abajo hasta el inicio, estirando horizontalmente. Entonces un poco más. Ahí vamos. Entonces eso se trata de cómo comenzó la imagen original o de la forma más fácil que acaba de hacer doble clic en el círculo, y luego vuelve al sitio original. De acuerdo, así que ahora digamos que quieres usar esta imagen de alta resolución, pero no quieres que sea así de grande. La forma más fácil de hacerlo pequeño como para poner en espaciadores tan espaciador que necesitarás espacio es uno para la izquierda, uno para la derecha, Así que uno para la izquierda, uno para la derecha. Ahí vamos. Entonces y luego puedes cambiar donde está tan moviéndose más a izquierda. Muévete aún más a la izquierda. Muévete todo el camino a la derecha. Entonces ahí vamos. Y si lo quieres a ras de este lado derecho, puedes eliminar este espaciador. Esto me encanta más. Está bien. Y una cosa más con esta imagen, si realmente vas a redimensionarla y mantienes pulsada la tecla shift en tu teclado para que eso quede justo por encima del control. Si mantiene pulsado, cambia y sube y baja, automáticamente se redimensionará en intervalo de 20 píxeles. Por lo que 2020 2020 20. En tanto que si leko es más suave y en realidad puedes encontrar Sintonizarlo más. De acuerdo, entonces eliminaré esto. Sí, borraré eso. Entonces eso fue justo como un rápido, um imágenes mostradas. Ahora otra cosa que tal vez quieras hacer es mostrar una imagen al lado del texto. Entonces, por ejemplo, si realmente vuelvo a poner esa imagen así aquí arriba otra vez, haga clic en eso y no muestre subtitulado. De acuerdo, entonces esperaremos a que eso vuelva a cargarse ahí arriba. Esto suele suceder porque es una imagen más grande. Uno es re dimensionando como una vez procesando aquí. No pegues. Aplicar todavía. Espera a que aparezca primero esta imagen porque he tenido muchos bichos que surgen como si la imagen no se cargara correctamente. Así que solo asegúrate de que haya terminado de cargar aquí y luego golpea, aplica, y mucho bloque de texto. Y en el libro de texto se acaba de poner textos aleatorios en realidad todavía bio. Entonces podría ser como un Vamos a fingir que esta es una foto de una persona y un poco de bio. Este soy yo. Esto es lo que hago. De acuerdo, Ahora vamos a tomar este texto y ponerlo a un lado de la imagen, y verás que lo que pasó es dejarme copiar. Y pegar es un par de veces, solo para que veas cómo se ve. De acuerdo, entonces verás que no es realmente texto lago envuelto, Así que la imagen no está envuelta como el texto. Lo siento no está envuelto alrededor de la imagen. Entonces, por ejemplo, si lo quiero de este lado, irá directo a ese lado. Segundo, muevo esta imagen todo el camino hacia la izquierda. En lugar de sólo esa cuadra, me fui hasta el final. Entonces déjame realmente poner un cofre en esa cuadra. Ahí vamos, así verás que realmente no está envuelto con esta imagen. Al igual que este texto teóricamente podría ir por aquí, recorrer todo el camino, pero no lo es. Entonces si hago esto más pequeño, este texto realmente debería estar yendo hasta aquí. Pero ahora no. ¿ Cómo arreglamos eso? Déjame mostrarte. Entonces agarras esta imagen y recuerdas cuando llegaste aquí, era, ah moverla al lado izquierdo y al lado derecho. Lo que haremos es traerlo. Entonces ahí vamos. Por lo que se ve así. Entonces tienes esa pequeña superposición de gris en lugar de esa línea. Eso lo tienes excesivamente. Es un área muy pequeña. Al igual que, por ejemplo, esto está arriba Ir izquierda, izquierda superposición izquierda, izquierda, y es ahora se va a dejar la línea. Por lo que tienes habitación muy pequeña, por lo que tendrás que jugar un poco con ellos. Ahí vamos. Entonces una vez lo tiré ahí con hazlo como fue. Entonces intentemos hacer doble clic. Ahí vamos. Por lo que ahora lo tenemos enfurecido. Perdón. Texto rap a la izquierda, y podemos hacer lo mismo con la derecha. De acuerdo, ahí vamos. Entonces eso es a la derecha. Está bien. Para que puedas jugar con eso. Puedes usar eso si quieres poner, como, como, una imagen dentro del texto para mantenerla como no tan aburrida. Pero también quieres que esté envuelto en texto. De acuerdo, así es como envuelves el texto alrededor de una imagen. Entonces una cosa más que añadiré es que squarespace cambió recientemente cómo trataban las imágenes aire en el propio sitio Web. Por lo que ahora en realidad se pueden tener imágenes que son de hasta 2500 píxeles de ancho o alto en. Lo que eso significa para ti es que puedes subir imágenes realmente de alta calidad que podrías, por ejemplo, usar como fondo. Um, ahora, cómo se trata eso es que cuando subes una imagen, squarespace crea automáticamente alrededor de media docena de versiones diferentes de tu imagen, cada una con un ancho y alto diferentes. Entonces cuando alguien visita tu sitio web en un dispositivo móvil, se carga a imagen que es, ya sabes, el tamaño perfecto para ese dispositivo. Entonces podría ser, ya sabes, 300 píxeles y látigo, mientras que si lo visitan como una computadora de escritorio, en realidad podría cargar la imagen de cuatro tamaños o incluso, como, ya sabes, 1000 con imagen. Para que no tengas que preocuparte demasiado por la velocidad de la página. Cuando subas imágenes, solo tienes que seguir adelante y subir la copia de mayor resolución de la imagen que tienes ahora. La única vez que esto no funciona en realidad es si estás configurando una imagen como tu imagen de fondo , porque entonces realmente usa el tamaño completo de tu imagen. Ahora te mostraré dónde puedes configurar tu imagen de fondo, y no puedes hacer eso por cada plantilla. Pero te mostraré cómo encontrarías ese escenario. Entonces lo primero que harías es que seguirías adelante y entrarías en tu ir al diseño y luego editor de estilo, y una vez que estés ahí, te desplazarías hacia abajo hasta donde dice fondo de página. Ahora, ahora mismo, sólo puedo establecer un color, y eso es sólo porque esta es la plantilla que estoy usando solo permite el color. Ahora bien, si realmente puedes establecer una imagen, verás aquí una imagen de una pequeña montaña, y cuando veas esa montaña y haces click sobre ella, realidad puedes subir una imagen para que puedas usar una imagen para el fondo aquí donde acabo de esperar. Entonces, por ejemplo, puedo configurar Es negro. En realidad podrías cambiar eso a una imagen si tu plantilla lo soporta. Está bien. Ahora, cuando realmente establezcas una imagen como esa para el fondo, automáticamente usará la resolución máxima que pueda. Entonces si subes una imagen que es de 3000 píxeles blanco, usará esa imagen sin volver a dimensionarla. Así que asegúrate de saber lo que estás haciendo. Porque si esa imagen es realmente blanca, tardará un tiempo en cargarse lentamente. ¿ Dónde? Conexión. Está bien. Gracias por acompañarme con esta conferencia, y los veré en la próxima. 23. Páginas de edición: crea diseños con Espacio: De acuerdo, Entonces hoy vamos a echar un vistazo a los diferentes tipos de espaciado que podemos tener en squarespace para que todas las páginas no sean solo texto. Por lo que algunos de los diseños que quieres usar los principales están en realidad pre hechos para ti. Por lo que Squarespace se ha tomado la libertad de crearlos. Por lo que sólo hay que rellenar el contenido. Entonces, por ejemplo, si fuera a hacer una nueva página de un llámalo una página de prueba, hay algunos diseños aquí que ya puedes escoger de No, ahora mismo está configurado para todos los diseños. Puedo elegir uno específico. Entonces, por ejemplo, sobre páginas, páginas de contacto, detalles, características, imágenes, equipo y otros. Por lo que no tengo una página de equipo. No voy a añadir uno, pero te voy a mostrar cómo se ve. Por lo que esta es la primera página del equipo. Entonces pondría una foto de un like, quien esté en mi equipo en la pequeña descripción y el nombre del compañero de equipo, y también podemos tenerlo así son los dos principales así que tal vez CEO de los dos fundadores Sears o Kohls y podemos tener el personal por lo que podríamos tener solo a todos listados con imágenes pequeñas e incluso imágenes más pequeñas. Entonces eso es para Team. Y luego, para aproximadamente tenemos de nuevo un layout como este. Tenemos esto. Esto es muy, muy pequeño, como muy estrecho. También tenemos esta y luego la página de contacto. Tenemos esto, así que es como solo variaciones diferentes. Um, para ser honesto, suelo ir con la página en blanco y solo rellenar como la quiero. Pero hay algunos bastante aseados aquí. Entonces, por ejemplo, imágenes. Por lo que esto ya está pre formateado para ti. Aún así, serán de ese tamaño cuando los subas. Entonces si tienes, como un sitio web de fotografía, alguien sube un álbum específico y estas podrían ser como las imágenes destacadas. Entonces digamos que fui al equipo realmente sé qué voy a hacer con Paige y con Peach. Ahí vamos. Entonces así sería como se vería. Y empiezo a editar. Por lo que inmediatamente te llevan al editor, al editor visual, por lo que podríamos hacer clic aquí para agregar una imagen. Probemos eso varios. Yo sólo lo pondré. A ver qué puedo meter. Pongo en éste. Creo que esta es una imagen comprimida por ahí vamos y no hay subtítulos. El foco puede estar justo a la izquierda aquí porque creo que eso se ve mejor. Y luego vamos a golpear, aplicar. Y luego Así que esa es la imagen ahí. Y entonces podríamos poner, como de nosotros página aquí, así que sólo voy a copiar esto. Esto es de mi sitio web existente, y lo pegaré como texto plano porque, claro, no quiero que se lleve eso jodido con él. Ahí vamos. Ahora eso se ve bien. Voy a pegarle guardar. Voy a echar un vistazo rápido a cómo se ve eso. Entonces eso es lo que parece. Y, um, echemos un vistazo rápido. Entonces, ¿qué? Lo que quiero, explíquense chicos, es cuando hacen como una página sobre que probablemente va a tener más texto en su página web. Lo que no quieres hacer es tener todo ese texto es un párrafo simplemente bajando porque gente se aburrirá de leerlo y se detendrán después, como, como, la primera oración. Entonces, por ejemplo, si tuvierais algo como esto, dejadme mostrarles muy rápido chicos. Entonces si ustedes tenían algo como esto en su página web. Te garantizo que nadie va a leer todo eso. Esa es una promesa que te estoy haciendo. Probablemente se pondrán como, ya sabes, primera frase 1ra 2 frases. A lo mejor si tienes suerte, hasta tres. Pero nadie va a perder tanto tiempo leyéndolo. Y quiero decir, podría tener el contenido más interesante del mundo, pero a menos que lo sepas, en realidad es como algo que les va a dar valor, no van a mirar eso. Así que mantén esto corto y conciso y asegúrate de romperlo. Si tienes que tener, como, como, un párrafo largo para, como, conoces un ensayo, asegúrate de dividirlo en secciones. Eso tiene sentido. Entonces, por ejemplo, en mi sitio web actual, verás que tengo un poco sobre mí blurb ahí y luego más sobre, pero se dividió en, como, como, amigable para móviles. Entonces si quieren aprender más, pueden leer aquí que expanden su negocio y luego se dividen más aquí y luego se dividen en servicio al cliente por aquí y finalmente sobre el propio hosting por aquí. Entonces si hubiera puesto eso todo en igual que un párrafo, habría venido hacer. Probablemente como media página aquí sólo de texto. Habría estado lleno de texto. Y de nuevo, nadie habría leído en absoluto eso. Excepto ahora, gente en realidad quiere decir tal vez incluso leer sólo los encabezados él mismo. Tan amigable para móviles, expande tu negocio en lugar del texto. Entonces definitivamente eso es algo en lo que quieres trabajar cuando estás haciendo espaciado. Y definitivamente aprovecha estos despidos que un pre hizo para ti. Porque son los que squarespace han probado y saben que funcionan bien. Entonces, sí, aprovecha eso. ¿ De acuerdo? Por lo que finalmente entrará en pies de página. Entonces pies de página en la próxima conferencia, y entonces realmente empezaremos a crear este sitio web. 24. Páginas de edición: Prefooter y Footer: De acuerdo, Entonces en esta conferencia, vamos a echar un vistazo a cómo vamos a modificar el pre pie de página y el pie de página. Entonces si te desplazas al fondo del sitio web, este es el pre pie de página como muestra aquí, y este es un pie de página ahora. No todas las plantillas tienen un pre pie de página, pero cada una tiene un pie de página. Entonces en mi plantilla, la plantilla de Bedford, tengo un pre filtros, así que sigamos adelante y modificamos eso. Entonces ahora mismo tengo un cuadro de suscripción aquí, y eso es en realidad lo que quiero conservar. Excepto que en realidad voy a conectarlo ahora para que esa caja roja no aparezca a su alrededor. Entonces vamos a almacenar chimpancé macho. Y en realidad voy a simplemente iniciar sesión y recoger mi lista de correo electrónico para que la gente pueda empezar a inscribirse en boletines. Así que déjame seguir adelante y escoger un tec B G, y luego escogeré hospedaje gratuito Upton. ¿ Y jugarán? Ahí vamos. Y si hubiera guardado esa caja exterior que se leía ahora se ha ido, así que volvamos a entrar, así que cambiaré esto para suscribirme a uno. Por lo general cuando la gente se suscribe. Quieres darles algún tipo de oferta, como algo gratis o como una descarga de libros e, solo para atraerlos a suscribirse. Y luego después de eso, en realidad podrías enviarles, ya sabes, promociones y cualquier venta que pudieras estar teniendo. Entonces esto en realidad es un poco pequeño. En realidad, me gusta Está bien, podemos cambiarlo. Te mostraré cómo sería a través del editor de estilos, Um, o personalizado. CSS. Si son la opción para esto, ¿no? Echaré un vistazo en solo un segundo, así que lo mantendremos. Senador, flote los campos o podemos apilar el campo. Entonces esta es Stack. Ya verás más si digo requiero nombre. Entonces así es como se ve cuando es eso y cuando está flotando. De acuerdo, entonces no me gusta coleccionar nombres. Quitémoslo porque eso es bastante fácil, ya sabes, sabes, solo ingresan una dirección de correo electrónico y luego pueden suscribirse. Es bastante fácil que no se pospongan tan avanzados. Por lo tanto presentar, suscribirse o cambios para suscribirse. De acuerdo, así que eso debería ser bueno. Sí, así que eso es bueno. Por lo que vamos a golpear, aplicar y cinta para que ese ratón esté suscrito. Déjame ver de esta diversión porque es un poco pequeña. Vayamos al editor de estilo. Da clic aquí y solo hay relleno ligero estilo, color de botón. Realmente no hay nada para texto aquí, solo color de texto. Entonces parece que podría tener que mostrarles cómo cambiar esa fuente como el tamaño están usando CSS personalizado. Entonces lo cubriré más adelante solo porque no quiero que te empantañes demasiado con la semántica y como poco la sintaxis, me refiero a la codificación. Entonces estamos preocupados por ese líder. Por lo que sin llevó el CSS personalizado aquí líder. Entonces por ahora, solo lo dejaremos como es. No es demasiado, muy malo. Entonces dejaremos que yo también tenga aquí mi longitud de redes sociales y esa que puse antes en una de las conferencias y en realidad así. Entonces hojea por ahí y luego finalmente pasará al pie de página. Entonces antes de pasar real en el pre pie de página y el pie de página, si solo pasas el cursor aquí igual que con páginas y bloques regulares, puedes agregar cualquier bloque que quieras para poder agregar ya sabes, un mapa, gráfico, comercio, cualquier cosa. Podrías tener un producto. Si estás arriba celular, puedes. Es igual que un bloque regular. Excepto ahora, en el Pie de Página. Ahora el pie de página y la prefigura van a aparecer en cada página exactamente igual . Entonces este es el mismo pie de página que veremos. Por ejemplo, estoy en el hogar. Si voy a cartera y luego me desplaza hacia abajo hasta el fondo. Es exactamente lo mismo. Entonces si hago un cambio en una página, automáticamente se aplicará a todas las páginas, que no tengas que seguir cambiándolo. Entonces en el Footer ahora mismo, está alimentado por squarespace, y eso es todo lo que puedo editar. En realidad no puedo agregar esta parte donde se inicia mi nombre. El A B G Tec, Toronto, Ontario. En realidad puedo cambiar eso porque esa es la información de mi negocio que rellené. Es decir, podría cambiar la información de mi negocio, pero esto es lo que es, y no quiero que se muestre. Simplemente puedo ir al editor de estilos, solo tienes que hacer clic en él y ocultar la información del sitio para que simplemente desaparezca así. De acuerdo, Y también puedes cambiar la fuente de esto. Por lo que esta parte en realidad se puede cambiar la fuente de, pero no la caja de suscripción de subíndice. Entonces es todo gorras, cerraduras lo harían, ya sabes, capitalizar. Entonces es que sabes qué? mayúsculas se veía realmente bien, así que déjalo un zit es, y vamos a volver. Entonces ahora lo que realmente voy a hacer es quitar esto. ¿ De acuerdo? Así que quita toda esta parte justo aquí. No quiero seguir impulsada por squarespace. Lo que preferiría que tenga es un menú secundario. Porque cuando la gente se desplaza hacia abajo hasta el fondo de tu sitio web, ese menú se ha ido, por lo que quieres que puedan navegar rápidamente a las diferentes páginas fácilmente. Así que tuvimos hosting de portafolio de casa, así que hospedaje de portafolio Y luego tuvimos sobre nosotros blogueando. Contáctanos sobre nosotros sangre y contáctanos. Ahora con esto, en realidad podemos ir adelante y centrar eso o podemos escribir una línea. De acuerdo, ahora, otra cosa que podemos hacer es una vez que se entra, podemos poner como un divisor para que podamos poner como la pequeña línea ahí mismo. Entonces eso es justo por encima de la tecla enter en tu teclado mientras se mantiene pulsado el turno y así lo sería esto con turno. Cómo eso te daría eso solo a especie de separado. O otra cosa que podemos hacer es que a veces me gusta. Por lo que hay como hospedaje de portafolio de casa sobre nosotros bloquear tipo de contacto espaciado uniformemente. Entonces para hacer eso, lo que tenemos que hacer es dejarme mostrarte poner un texto, lo haré en casa, y luego pones otro texto, y luego pones otro texto, lo haces portafolio y nos llevamos portafolio. Ponlo al lado derecho a casa y se centrará. Esto enviado a través de esto y voy a poner en hosting. Entonces básicamente, estamos agregando un bloque para cada uno de estos que podemos espaciarlo uniformemente a lo largo de la parte inferior. Es un poco más de trabajo, pero creo que se ve mejor. Ahí vamos. Creo que se ve mucho mejor, pero demasiado alto. Ahí vamos. Y de nuevo, no funciona para todos los casos, así que si tienes mucho, realmente no va a funcionar demasiado bien. Así que hospedaje casero per para ti tuve eso mezclado. Entonces lo siguiente es sobre nosotros. Traté de poner en el mismo orden. Aparece en el en el menú en la parte superior. Entonces toma esto y ponte de este lado en el centro de éste. Y entonces hemos blogueado. Yo sólo quiero que ustedes vean cómo sería esto cuando finalmente se haga. A mí me gusta más así. Entonces por eso me estoy tomando mi tiempo para hacer esto. Y luego tenemos contacto con nosotros, te mandó ahí. Arrastrará esto un poco complicado porque es solo una línea de texto y también centrará esto . De acuerdo, entonces ahora lo que notarás es que desde que puse seis de ellos, todos son de tamaño extraño. Por lo que estos dos son muy pequeños. Entonces está esto, que es como el tamaño normal, y el resto parece bastante bien, así que podemos Mattingly seguir adelante y arreglar esto así, o podemos dejarlo a las cinco después de las cinco. El con tipo de empieza a arruinarse. Um, y realmente no hay forma de arreglarlo incluso cuando realmente lo arrastras. Al igual que cuando lo arrastras y lo haces diferente ingenio. Se ve raro en diferentes dispositivos para cinco es lo más que realmente iría con. Um así en este caso desde que tengo seis uniendo Seguro tienen seis todavía Así que realmente no se verá bien esta manera. Podría dejar uno fuera, como la página de contacto, que es probablemente lo que voy a terminar haciendo. O simplemente puedo seguir adelante y hacerlo de esta manera. Entonces yo elimino estos porque en realidad quiero poner todos mis enlaces ahí porque la página de contacto es bastante grande y también lo son todas mis otras páginas. No hay nada que realmente quiera dejar fuera. Entonces déjenme seguir adelante y eliminarlos No es una completa pérdida de tiempo, porque de verdad quería que ustedes vean cómo sería eso. Ahí vamos. Entonces ahora lo que puedes hacer es resaltar cada uno para que puedas hacer doble clic en él o simplemente violarlo. Y puedes hacer click en Editar Enlace y puedes cambiar el enlace a la página principal para este portafolio hosting sobre nosotros bloquear y contactar con nosotros. Por lo que de esa manera conducen a la página. Se supone que lo hagan. De acuerdo, así es como tendrías enlaces al pie de página. Y hay otra cosa que normalmente me gusta agregar Dos pies de página y eso es un copyright. Por lo que escribiría como copyright 2016 a B G tec. Entonces esto es como el estándar que suelo seguir. Y también me gusta poner aquí un símbolo de derechos de autor para realmente conseguir ese símbolo. Lo que hago es ir a Google escribiendo símbolo de copyright. Basta con agarrar esto resaltado. Copia y ven ahí mismo en medio. Uh, así que justo ahí. Entonces entre estos espacios oportunos, retrocede uno. Entonces estoy justo en el medio. Pegar es texto sin formato. Ahí vamos. Entonces es un espacio entre otra cosa que puedes hacer en tu teclado. Puedes aguantar, Ault. Y si Azzam no tienes bloqueo encendido, esto funcionará. Entonces aguantas y pones 0169 Y eso también pondrá un símbolo de copyright ahí mismo . De acuerdo, entonces eso suele ser lo que me gusta poner en mi pie de página. De acuerdo, así que eso es todo por un pie. Y los veré en la próxima conferencia. 25. Blogs: aprende a blog: De acuerdo, Entonces en la última conferencia, hicimos el pie de página en el contenido pre pie de página. Ahora les voy a mostrar cómo van a estar usando este sitio web a Blawg. Ahora, bloguear es extremadamente importante. Mantiene tu sitio web fresco para que sigas apareciendo. Ya sabes, primero en Google buscador algo así, si realmente estás brindando información valiosa a tus clientes Y como personas que visitan tu sitio web, obviamente. Entonces, una vez que llegues a la primera página de Google, es más fácil permanecer en la primera página si realmente bloqueas y aprenderás más sobre eso una vez que realmente tomes, como, un curso de marketing si aún no lo has hecho. Entonces lo primero que vamos a hacer es crear un post de bloque en la página real. Entonces les mostré cómo hacer una página antes. Por lo que solo tienes que hacer clic en plus y luego bloguear, y así es como haces la página de bloque real. Por lo que mi página de bloque se ve así ahora mismo. Por lo que tengo un post aquí para posar tres post. Por lo que tengo tres en total si hago clic en la página blogueada real en el lado izquierdo. Entonces si hago clic aquí mismo, mi post sube. De acuerdo, Entonces si haces click en el plus, déjame mostrarte lo que hay aquí dentro. Configuración de primer bloque. Entonces esto es sólo un nombre del blogueado, el conde del bloque y una contraseña. Si quieres una contraseña, protéjala. Entonces vamos a dar click en Adblock Post. Entonces este es el nombre del bloque, por lo que de los mensajes de bloque. Entonces digamos que va a haber primer post blogueado o en realidad que sea bienvenido a mi bloque . De acuerdo, entonces aquí es donde realmente escribirías tu puesto de bloque. Entonces esta es una nueva bienvenida blogueada. Nos vemos pronto. Entonces porque sólo vas a ser mucho más largo. Sólo estoy poniendo esto al frente porque realmente no sé qué poner ahí. Entonces ese es tu post de bloque real. Ahora puedes agregar etiquetas a tu post de corteza o algo así como es una bienvenida y tal vez squarespace y cursos. Por lo que estas etiquetas de aire. Por lo que la gente podrá hacer clic en una etiqueta específica para ver todas sus publicaciones de bloque que tengan una etiqueta de bienvenida en ella. Y también tienes categorías, por lo que presionas plus categoría creada para que podamos hacer estos hechos aleatorios y luego presionar enter y eso creará la categoría. Y podemos hacer otro llamado, por ejemplo, consejos y trucos. De acuerdo, entonces estas van a ser diferentes a las etiquetas. Entonces en este momento, si tienes seleccionada una categoría, será un tono más oscuro. Entonces en este momento tengo cero categorías elegidas hará esta ronda, de hecho, y luego hago clic afuera. No es, está en la categoría. Hechos aleatorios. Ahora los comentarios están activados. Puedo apagarlo aquí haciendo clic en él, y ahora mismo es un borrador. Puedo publicarlo, programarlo en el futuro, así que saldrá mañana al mediodía. Puedo mercado es revisión para que mi real me gusta digamos que solo soy editor si lo pongo es revisión. El administrador en la página web tiene que venir al mercado como como lo revisó y luego publicarlo para que también podamos publicarlo. Nosotros mismos aquí, ahorrando, publicado. Ya que tenemos la opción, um, y luego otra cosa que podemos hacer, nos puede igual que editar páginas. Tienes este pequeño símbolo aquí el cual te permitirá añadir bloques para que puedas añadir tus enlaces sociales , por ejemplo, por ejemplo, Al igual que antes podemos poner en presentaciones de diapositivas de texto de audio, boletines boletín de noticias inscríbase. Por lo que es exactamente como una página excepto para no bloquear post. Por lo que hay mucha personalización es que puedes hacer a la publicación real. Entonces aquí está otra vez agregando bloques. Y si vas a opciones en otra cosa genial, realidad podrías ir a pantalla completa con esto para que puedas ver toda la publicación del bloque y era buenas opciones. Y luego podemos añadir una imagen en miniatura. Definitivamente te recomiendo agregarlo. No soy imagen. Entonces, por ejemplo, si voy a, vamos a añadir, esto no es algo ahora, Sí, en realidad usamos éste porque es una imagen más pequeña. Por lo que probablemente se cargará más rápido aquí. Cómo podemos realmente cambiar el Conde del Post aquí para que podamos hacer este post de bienvenida. De acuerdo, realmente no me gusta el generado dicho abasto de escuarespace. Entonces uso esto. Podemos dejar eso en paz. Casi nunca necesitas eso. Entonces eso es como tus fuentes como lista de referencia. Y el extracto es en realidad lo que aparece en esta página de bloque. Entonces en el fondo, yo te muestro así antes de que diga Leer más así si voy a mi página bloqueada ahí, llegamos así que ahí vamos. Por lo que ahora mismo dice, lee más. Este es el extracto real. tanto que aquí, no ahorra Leer más porque este es el post de bloque entero, porque era un post muy corto, así que puedo poner en un extracto en este momento. Yo lo haré. Entonces copia esto. Buena opción. Ponga esto como un extracto. Se salvó. Entonces ahora en realidad muestra. Leer más. De acuerdo, Si no pones una pastilla extra, pon todo tu poste de bloque, que, si es realmente largo, no se verá realmente limpio aquí. Y también necesitas un pago extra si vas a usar tu puesto de bloque como galería o un semi bloque, lo cual te mostraré apenas un segundo después de esto. De acuerdo, entonces aquí puedes escoger al autor. Soy el único autor en mi sitio web, y en realidad también puedo marcar este es un post destacado, que lo haré solo porque es mi post de bloque real. Por ahora, puedes agregar ubicaciones que no tienes por qué, y yo no voy a ir y puedes poner en social. Entonces si reviso esto cuando golpea. Ah, publicar. Automáticamente tomará este post y lo empujará hacia fuera a mi página de Facebook para que la gente sepa que lo escribí. Entonces vamos a pegarle a guardar. De acuerdo, así que eso es lo que parece. No, realmente no me gusta cómo se ve esto para ser honesto, porque quiero decir, tienes el encabezado aquí, y luego solo todos estos post listados aquí, prefiero tenerlo como como como, solo como una página donde es un poco más ordenada, así que te mostraré cómo hacer eso. En primer lugar, voy a quitar esto de mi menú, Así que lo puse aquí abajo. De acuerdo, Así que ahora si voy a casa, verás que esa cuadra ya no está aquí arriba. Sigamos adelante y agreguemos una página llamada Blawg. No un blogueado, sino un nombre animal de página que bloquea. Y luego toda su edición de inicio y lo que voy a hacer está aquí. A lo mejor voy a poner en cuadra y todo el siglo, que sea una cabecera. Y luego aquí abajo, voy a poner en resumen. A lo mejor en realidad, veremos cómo se verá esto. Probemos primero la pared. Vamos a recoger bitácora. Por lo que Leo realmente exhibe primero, Así que mostrará 30 que es un máximo. Vayamos al contenido. Hagámoslo tan cuidado. Entonces esto mostrará esa pequeña etiqueta de ahí arriba. Esto se destaca. Déjame en realidad golpear save porque las imágenes no están apareciendo aquí. Ahí vamos. Había simplemente demasiado grandes, así que puedo cambiar esa palabra Allí destacaron dos destacados pose última pose de bloque y luego podemos mostrar más de tres por líneas de cuatro o cinco. Por lo que cuatro se verían así. Y entonces, claro, es igual al resumen que les mostré chicos. Veamos qué luce mejor. Por lo que vamos a poner Paul se vería como esta lista. A mí me gusta el look de lista y genial. Sí, vamos a mantenerlo en lista porque me gusta cómo esa imagen muestra perfecciona las imágenes de la izquierda y mostrando 10. Ella leerá más. Entonces otra vez, si Markoff muestra extracto, no mostrará nada. No mostrará tu publicación en bloque, así que si no tienes un extracto, no mostrará nada. Es por eso que los extractos son realmente importantes para asegurarte de que te sientas eso en, y eso se ve bien. A mí me gusta mucho más el aspecto de esto. Sí, esto es mucho mejor que en realidad cómo se ve esto, al menos en mi opinión. Entonces depende de ustedes chicos, pero tengan en cuenta, um, um, sólo movemos eso a donde pertenece. Entonces debería ser sobre nosotros entonces. Blawg. Entonces sobre nosotros, luego bloquear. Entonces ten en cuenta que ahora mismo hay un límite de 30. Por lo que después de 30 cuadras de poste, no podrán ver ningún otro poste de bloque. Entonces lo que puedes hacer es ir justo aquí, poner un botón de búsqueda de botón y leer más bloque post. Y entonces puedo vincular eso a mi actual blogueado. Por lo que bloquea y también puedes enlazar a una categoría específica. Pero quiero que realmente lean todo el blogueado, y lo haremos un botón de tamaño mediano. Y ahora cambiaré esto a tres. Porque si quieres, si te pones 30, ahí va a ir todo el camino hasta el final de la página. Va a hacer que sea una página realmente larga. Entonces hagámoslo tres. Entonces tengo cuatro cuadras post, pero solo estoy mostrando tres. Entonces si quieren ver más tienen que dar click, leer más, y luego serán llevados aquí donde puedan ver fuera para el poste de bloque. De acuerdo, así que esas son las dos formas diferentes en que puedes tener una página bloqueada. Una sería una página bloqueada y otra sería un bloque real, y ustedes pueden seguir adelante y escoger cuál es el que todos ustedes piensen que luce mejor. 26. Comercio electrónico: añadiendo productos: De acuerdo, Entonces si vas a estar vendiendo algo en tu página web en absoluto, o si vas a tener un tipo de web de comercio electrónico, entonces esta conferencia es muy importante. Lo que vamos a estar haciendo es agregar productos que la gente realmente puede comprar, para que puedas empezar a hacer algunos ingresos en tu sitio web. De acuerdo, entonces lo primero que tienes que hacer antes incluso de agregar productos es crear una página de tienda. Entonces no quiero que me moleste en la parte superior aquí, así que lo voy a poner debajo, no vinculado. Entonces voy a presionar el plus y vamos a hacer una página para productos y voy a nombrarlo. Simplemente nos iremos. Se trata de productos. En realidad, ese es un título bastante decente, ¿de acuerdo? Y serás llevado a esta página. Ahora, si alguna vez tienes que volver a esta página, todo lo que tienes que hacer es dar click en productos aquí mismo y te llevaremos aquí. ¿ De acuerdo? Ahora, desde esta página, vamos a seguir adelante y añadir un producto haciendo clic en el signo más aquí. Y luego veremos que hay tres tipos de productos físicos, digitales y de servicio. El físico es algo que la gente pagaría y sería enviado a su casa. Entonces si están comprando como un dispositivo electrónico, o si están comprando como una copia física real de un libro, lo digital es como un archivo que pagarían, y podrán descargarlo por cierto tiempo. Entonces eso es algo así como un libro e que el tocino compra y servicios algo que harás por ellos. Y no hay costos de envío ID asociado. Entonces si estuvieran comprando como servicio S CEO o si estuvieran comprando hosting o vas a hacer un sitio web para ellos a cambio de dinero, lo pondrías bajo servicio. Entonces lo que voy a agregar es mi paquete de hosting, 10 pasos de producto que en realidad voy a estar vendiendo. Entonces sigamos adelante y pinchemos en el servicio. El primero que me gusta hacer es fuera de imagen de producto. Entonces vamos a pasar a mi carpeta, donde tener todas mis imágenes y pondré una imagen de un servidor, vale, y puse en los precios Bueno, en tan solo un segundo, iba a esperar a que se hiciera esta imagen. Voy a estar tomando la información de esta página de mi actual sitio web. Entonces van a ser 45 descontados a 20. Entonces déjame realmente poner en hosting por un año primero. De acuerdo, Así que hospedando un año una copia de la descripción aquí también, no la pego aquí. Entonces otra vez, en texto plano, está bien. Y luego voy a hacer de cada una de estas una lista tal abajo así de nuevo o el cursor no tiene que estar en el frente. Podría estar en cualquier lugar aquí. Al hacer clic en el icono de la lista, así que haz de cada uno una lista a la que se refieren. Ese es el último. Perfecto. Y luego a continuación, si hace clic en los precios aquí lo llevará a los precios en la parte superior. Entonces si hago clic, los precios me llevarán aquí. Entonces, en stock, tengo precios limitados y de precios regulares. 45 yo mismo. Precios 20. Entonces ahora mismo, estará listado como 45 si me lo pongo hasta que se lleve el precio de venta. ¿ Alguna información adicional? Realmente no tengo ninguno para este producto en un formulario si al final, tienen que llenar un formulario para poder comprarlo, Así que voy a crear un nuevo formulario para producto y en realidad información de negocios solo para poder obtener alguna información sobre ellos para configurar el hosting. Por lo que pediré su nombre, el cual se requiere una última para su dirección de correo electrónico. Ver correo electrónico, que también se requiere. Y también les pedí su dominio ing nombre de dominio. Ahí vamos. Por lo que también se requiere eso. Y también tendré apenas un año de textura donde si tienen alguna pregunta, pueden hacer preguntas sobre comentarios. Y eso no es necesario porque si no tienen preguntas, no tienen que llenarlas. De acuerdo, y entonces ahorraré. Entonces nos iremos. Opciones hacen de este producto que eres l en hosting porque de nuevo, el que genera Squarespace no siempre es el mejor. Y creo que eso es que debería hacerlo tan bien, realidad poner en categorias bien categoría llamaré hosting y luego darle a tomar. Yo no entré. Entonces, ¿quién se queda? Entra en tu teclado. Ahí vamos. Y luego para las etiquetas, salida de hosting. Creo que ese debería ser el único ahí. Y luego seguiré adelante y guardaré y publicaré. No, tengo mi producto aquí. Entonces así es como añades un producto, déjame realmente cambiar cómo aparece la imagen. Por lo que dupliqué rápido y quería estar más enfocado aquí, y voy a golpear seguro. Una cosa más que quizá quieras hacer con el producto es en diferentes variaciones del mismo . Entonces solo te mostraré cómo hacer eso en este producto, lo sepas So por variación. Entonces diría que quiero tener una variación llamada Duración. Y ahora puedes tener una llamada talla de color si estás vendiendo camisetas o ropa. Por lo que haré el 1er 1 una duración de un año y agregarán un segundo producto con una duración de tres años. Y cambiaré el precio por eso. Porque, por supuesto, no va a ser lo mismo para diferente duración de tiempo. Por lo que se trata de 1 35 descontados a 50 por lo que 1 35 descontados a 50. Adelante y le pegaré a guardar, y te mostraré cómo se ve eso. Entonces si voy ahora a productos y hago clic en este producto, verás que cuando alguien lo vaya a comprar, verán duración y cantidad para que puedan recoger un año y les mostraré $20 o tres años y les mostraré que $50 para que puedas tener diferentes productos. Podrás tener diferentes existencias para cada producto. Entonces, por ejemplo, digamos que solo quieres vender 10 productos en En esta variación, puedes limitar que puedes ir a stock y cambiar eso demasiado limitado y aún así tener el otro es ilimitado, por lo que eso también es una opción. De acuerdo, entonces ahora si volvemos, el producto se verá así. Entonces es perfecto. Entonces en el lado izquierdo, ves categorías que puedes filtrar por lo que hospedando el único producto que tengo. Entonces eso es todo lo que vas a ver por ahora, Así que así es como agregarías un producto. 27. Comercio electrónico: toma de pagos: ahora que tenemos nuestro producto realmente agregado al sitio web, Vamos a seguir adelante y entrar en nuestra configuración de huelga para que podamos conectar nuestra cuenta de franjas y empezar a tomar pagos. Algo que quiero mencionar es que como puntajes del 1 de diciembre de 2016, por favor sí tiene apoyo para PayPal. Entonces en el siguiente verde, cuando estés echando un vistazo en mi configuración, se mostrará justo maduro, um, en tu pantalla. Cuando estés haciendo un sitio web, en realidad verás PayPal como una opción también, y para conectarlo. Todo lo que tienes que hacer es iniciar sesión con tu cuenta comercial de PayPal, y te solicitará que crees una cuenta si aún no tienes una. Entonces entraremos en ajustes y luego en la sección de comercio. Entonces debería ustedes chicos justo antes y ahora realmente vamos a empezar a usarlo, así que vamos a pagar y vamos a dar click en Connect Strike. Ahora, Si no vuelves a tener una cuenta recta, puedes crear una rellenando este formulario aquí. En realidad ya tengo uno, así que voy a llenar eso aquí por lo que me va a dejar sólo llenar mi información y vamos a seguir adelante e iniciar sesión y voy a golpear contraseña segura y conectar mi cuenta de stripe. Por lo que ahora debería tirar automáticamente toda esa información a Squarespace. le daremos un momento. Ahí vamos. Y ahora tengo un par de opciones. Puedo aceptar Apple pay. Seguiré adelante y encenderé eso. Esa es solo otra forma de hacerlo más fácil para los clientes, así que ¿por qué no? Y órdenes de prueba? Realmente no voy a habilitar eso porque no voy a estar haciendo ninguna orden de prueba ahora mismo. Y entonces estoy a salvo ahora. Volveremos atrás y almacenaremos monedas Dólares canadienses, lo cual es perfecto. Puedes cambiarlo si quieres. Pero canadienses lo que acepto. Entonces eso es perfecto. Y luego echa un vistazo. Conectaré mi chimpancé de correo para que la gente pueda iniciar sesión. Lo sentimos, inscribirme a mi newsletter y puedo recolectar direcciones de correo electrónico. Entonces sigamos adelante y escojamos mi cuenta y haré el país predeterminado Canadá, ya que ahí es donde mi objetivo, nuestras audiencias y habilitar fundir al menos optan. Entonces ese es el segundo. El segundo pierde más ligero que la gente consigue. Consigue decir ¿Estás seguro de que quieres suscribirte? Entonces escogeré eso. Entonces de esa manera sólo tienen que suscribirse aquí, y no tienen que confirmar. Y luego me pegaré a salvo. Entonces todo lo demás lo configuré antes, así que todo es perfecto. Por lo que ahora la raya está conectada. Entonces cualquier vez que alguien, por ejemplo, haga clic en el producto, agregue al carrito y luego verifique que el dinero debe ir directamente a huelga. Es una simple es que Ok, Entonces en la siguiente sección, mostraré chicos cómo podemos tener estos productos a la página real a la que pertenecen, y luego iremos de ahí. 28. Comercio electrónico: muestra productos: De acuerdo, entonces ahora que bateamos el producto a nuestra tienda, sigamos adelante y agregamos a una página, Así que vamos a ir a hosting. Ahí es donde quiero mostrar mi producto de hosting. Y creo que es una página vacía por ahora. Por lo que haremos click en Editar ignorará el bloque de texto, y haremos clic aquí y haremos una búsqueda de producto. Perfecto. Daremos click en el producto y solo escribiremos en hosting. Ahí está el hosting que quería mostrar y podemos mostrar el título mostrar la descripción. Sí, en realidad. Descripciones finas muestran. Botón Agregar al carrito, y eso funciona realmente bien. Entonces sigamos adelante y ahorremos. Y voy a cambiar esto a hosting solo para especie de reiterar de qué se trata y lo haremos un encabezado. Número uno. Como dije antes, quieres tener al menos un headier no lo hará. Al menos quieres tener exactamente un encabezado uno en cada página porque eso es realmente bueno para ASIO. Entonces vamos a golpear seguro. Ahora creo que esta imagen podría ser un poco demasiado ancha, así que vamos a seguir adelante y hacerla un poco más pequeña. Entonces mientras estamos aquí, podemos alinear centralmente el texto porque, como pensé, me gusta todo línea central y una cosa que te darás cuenta es que los pequeños puntos que la izquierda en la lista en ordenada donde es un texto pasar al centro. Ahora te mostraré cómo puedes hacer un pequeño cambio para mover esos puntos también, usando TSS personalizado. Pero por ahora, lo dejaremos como queda. De acuerdo, lo verás en las conferencias de bonificación. Entonces para hacer la imagen más pequeña, sigamos adelante y pongamos dos espaciadores, uno por cada lado, y la pondremos Justin a la izquierda de esa sección. Entonces ahí vamos, y luego iremos aquí. Eso lo hará un poco más grande aquí, y eso es perfecto. Entonces vamos a seguir adelante y golpear save. Entonces así es como agregarías ese producto de página específica. Otra cosa que tal vez quieras hacer es ir a tu página principal y agregar tus tres mejores productos vendidos , por ejemplo, para que puedas poner, por ejemplo, un resumen lo hará una lista de productos y vamos a escoger solo los productos destacados. Entonces para mí, ese es éste. El único harino con usar un resumen es que no hay forma de sumar. Botón Agregar al carrito para que alguien realmente tenga que hacer clic en este producto antes de poder comprarlo . Y no lo hagamos una lista. Hagámoslo un gran sí, Grid se ve mejor y lo hará con En realidad, tres está bien. Está bien, eso es perfecto. ¿ Y centrará alinear el texto? Y entonces todo lo demás se ve bastante bien abajo. Sí, eso es bueno. OK, entonces vamos a golpear. Aplicar Bueno, se guardó. Y así como hice de este un producto destacado fue, simplemente quiero a mis productos doble clic en el producto que quería cambiar, y vamos a opciones y dijo que está destacado. De acuerdo, en la tercera y última cosa que tal vez quieras hacer es simplemente poner productos como en una categoría específica . Entonces digamos que solo quieres mostrar aquí tus productos de hosting, y tenías más de uno que irías a exhibir y apagas destacados. Y para categoría, pondrías algo así como hosting. Por lo que ahora mostrará todos los productos que tienes ese aire bajo la categoría hosting, o puedes usar etiquetas. Creo que el que dije estaba hospedando así de nuevo. Cualquier producto tiene toma con esta etiqueta aparecerá aquí. De acuerdo, así es como configuraste, Um, como diferentes productos en diferentes páginas. Y luego la siguiente conferencia te mostrará cómo podemos cambiar algunos de los looks usando el editor de estilos . Entonces eso podría ser un poco más largo de una conferencia. Sólo porque hay un poco que cubrir, así que mantente atentos. 29. Editor de estilo: cómo usar el editor de estilo: Entonces esta conferencia es todo sobre el editor de estilos, que es donde iríamos a cambiar fuentes y tamaños de fuente y todas esas cosas buenas. Entonces entraremos en diseño y luego editor de estilo, la tercera opción. Entonces esto es algo así como el centro de mando donde lo cambiamos todo. Entonces vamos primero, te mostraré aquí abajo. Ya ves como mis enlaces el color de los enlaces es su color verde, que realmente no me gusta. Entonces ahora mismo, si hago clic en él Color de enlace de página es este color verde que vino con el tema con la plantilla y realmente no me gusta eso. Entonces voy a ir a elegir mi color rojo regular que me gusta mucho. Es decir, una copia y van a dar click en este verde, y yo voy a pegar. De acuerdo, eso es lo primero que hago porque me di cuenta de inmediato mientras hacía cambios que eso no me gustaba. Entonces, como pueden ver, así es como se ve mi editor de estilo. El tuyo inevitablemente se verá diferente solo porque lo más probable es que escojas una plantilla diferente para acompañarla. Si no, entonces el tuyo también se verá igual. Entonces veamos. Entonces ahora mismo navegación del sitio. Esto lo cambié antes en una de las conferencias anteriores. Entonces, chicos, ¿saben qué hay? Entonces el encabezado del sitio está arriba en la parte superior aquí, y tenemos navegación del sitio que la sección de encuadres. ¿ Está toda esta sección aquí? contenido principal es el contenido de la página en los años blancos, todo esto. Y luego tenemos el blogueado, que es que tendría que dar click en bloque, te mostraré. Y entonces tenemos el bloque de resumen, que creo que se trata de un bloque de resumen. Entonces sí, es para que pueda hacer esto rojo. Hazlo mismo. El rojo es mi color rojo de en mi logo. Y también podemos cambiar la fuente. Ahora mismo es nova proximada, así que podemos hacerla como tú lo haces. Adobe Presidente hará Brie. Dejaremos su calzoncillo ahora. Y luego está el contenido del pre pie de página después de aquello que está justo por aquí y en el contenido del pie de página justo por aquí. Entonces el pie de página me gusta el color de me gusta este gris se adapta a mi el negro en mi logo. Por lo que tenemos este real hacer de este un negro sólido si no lo es ya. Sí, no es así que lo haremos un negro sólido. Haré la fuente para el color del texto en blanco. Ahí vamos, en peso completo. También haré de esto el peso completo. Ahí vamos. Entonces de nuevo, esto es como el brillo. De acuerdo, así que ese es el peso total del 100% blanco, y luego volveremos a mostrar todo así de nuevo, puedo hacer que los encabezados también en ese color rojo, solo para que se destaque del resto del texto. Por lo que ahora les mostraré la cuadra. Entonces para el bloque, realidad podemos hacer click en Blogger aquí arriba, y estoy bastante seguro Sí, lo tenía. Este es un resumen. Entonces déjame mostrarte mi actual bloque, post o block page. Fue cuando hago clic aquí, punto. Entonces esa es la vuelta local de mi blog real en esto la violó. Y tenemos una sección solo para Blawg. Entonces aquí mismo. Entonces esto es para las presentaciones de diapositivas. No tengo una presentación de diapositivas en mi blog, así que eso realmente no me importa. Y entonces tenemos la prioridad de materia, que es fecha que podríamos convertir en categoría, que es una de top aquí. Podríamos hacerlo a autor, o podemos convertirlo en tuerca. Entonces creo que déjame ver cómo luce el 1er 1. Fecha. Creo que no me gusta más nada sólo porque entonces ambos. Entonces ahora mismo es fecha y luego la categoría aquí Si escogí ninguna categoría de citas baja aquí . Eso me gusta lo mejor. Esto es centro. Qué centro se ve bien, en realidad. Entonces mantendremos centro de escondite por ahí. Entonces algo solo un blogueando sobre esto realmente ocultará Los autores sólo van a decir mi nombre una y otra vez. Ocultar entrada de Lis. Sí, estas son las etiquetas. ¿ Cuántos comentarios? Todo lo que tenemos se ve más limpio así, pero supongo que esto muestra más información y a la gente le puede gustar. Estupendo lejos. Entonces supongo que dejaremos esto dentro y esta barra lateral. Entonces ahora mismo hay un Hay una barra lateral justo por aquí. A ver cómo cuando voy aquí hay un poco de espacio que queda desde aquí todo el camino hasta aquí. Esa es la barra lateral. No me gustan las barras laterales en los sitios web. A menos que vayas a tener uno ¿Dónde vas a poner, como publicidad en el costado? Entonces esa es la barra lateral. Y eso es casi todo lo que podemos editar con Blawg. Ahora, una cosa realmente no me gusta de squarespace que tienes que tipo de CSS personalizado, que te voy a mostrar. Pero otra vez, solo hazte saber lo que no me gusta de ello. Digamos en mi página principal, ¿verdad? Por lo que en mi página principal tengo un par de encabezados los cuales hice rojos, si recuerdas. Entonces este es un rubro. Entonces este es un número de rubro. Veamos estilo ayudado. Aquí haremos click en esto. Entonces este es un rubro número uno. OK, entonces este es un número de rubro. Es sólo un enlace. No es una cabecera. Por lo que este es el encabezado número uno. OK, ahora si entro en cartera, por ejemplo, ¿no hizo nada ahí? Digamos que voy al hosting. Por lo que bajo el hosting, soy otro rubro. Entonces veamos qué es esto. Creo que esto es hosting. El hosting también es el número uno. Así que cabeza ahí, número uno tan rápido que se dirige en el número uno. Entonces digamos que en la página de hosting quería que esto fuera digamos verde. De acuerdo, Tan verde. Correcto. Y yo diría que lo verás cuando regrese a mi página principal y me desplace hacia abajo. Este rubro ahora es verde al cual es horrible porque van a haber momentos en los que quieres encabezados de diferentes colores en páginas de diferentes colores. Pero squarespace no permite que si eliges adelante y coloreas, ese es el único que vas a poder usar. Entonces todos mis encabezados ahora van a ser de este color rojo. Entonces si quieres cambiar eso, sí tenemos que usar CSS personalizado. Les mostraré eso en un poquito, pero por ahora, solo sepan que lo que ustedes establezcan aquí es un estilo global global. Entonces cualquier uso de rojos que será global. De acuerdo, entonces otra vez, fondos. Ahora, lo que puedes hacer definitivamente es pasar por aquí y echar un vistazo a las diferentes fuentes. Y no uses más de uno o dos en tu página web. Sólo porque no quieras tener como, ya sabes, sabes, muchos tipos diferentes de fondos que tipo de gente confundida usa uno o dos que crees que se ve bien. Es decir, primero guia el guión lirio. Se ve un poco bien. El último agarre se ve bien, y en los fondos regulares regulares hay play fair display, que se ve realmente bien. Déjame mostrarte cómo se ve. Probablemente sea la que más utilizo. Por lo que esto es play fair play fair display. Me gusta mucho cómo se ve eso. Y luego también Helvetica. Obviamente mucha gente usa y Ariel otra vez. Algo que la gente usa bastante conjunta se ve muy bien, en mi opinión, por supuesto. Definitivamente echar un vistazo. Katherine se ve muy bien. Catalin y yo hemos usado bastante a Oswald, y creo que eso es todo. Y nova proximada. Esos son probablemente los fondos que utilizo con más frecuencia. Me gusta mucho el look allá arriba muy limpio y de aspecto profesional. De acuerdo, así que también echa un vistazo a través de tu editor de estilo también, porque aquí tendrás diferencias. Como dije, para tus antecedentes, podrías tener aquí una pequeña montaña, lo que significa que en realidad puedes establecer imágenes de fondo. Entonces eso es solo en plantillas específicas. Y mi plantilla, que es mejor para ello no tiene apoyo para eso. Además de eso. Eso es prácticamente todo aquí. Y si tú si hiciste algunos cambios y no te gusta, siempre puedes restablecer el valor predeterminado. Um, y si eres tal defecto por accidente, solo puedes golpear cancel sin ahorrar. Entonces voy a guardar esto. Y creo, Sí, eso es bastante bueno por ahora. Cuando yo empiece a hacer algunas de mis páginas, me verás rebotando de ida y vuelta entre el editor de estilos y mi página sólo porque voy a hacer algunos retoques sobre la marcha a medida que voy. Entonces esto definitivamente es definitivamente esto es definitivamente Page estará volviendo a una y otra vez. De acuerdo, Entonces ese tipo de cubre todas las conferencias básicas porque ahora sabemos agregar páginas cómo agregar productos, todas esas cosas buenas. Lo único que queda por hacer es mostrarte algún CSS personalizado que he usado bastante, y probablemente los encuentres bastante útiles también. Y luego finalmente, ustedes pueden verme crear este sitio web el resto del camino. Tómalo, llévalo a casa, y luego aprenderás qué podría funcionar fluye como 30. Mira a tu trabajo: la página de inicio: De acuerdo, Así que por fin quiero las conferencias de bonificación donde en realidad voy a seguir adelante y crear mi sitio web y ustedes pueden seguir adelante solo para ver como tipo de hacer las cosas. Entonces lo primero que me gusta hacer es que me gusta el tipo de en mi mente tener una idea de cómo quiero que se vea la página. Entonces en este caso, lo voy a hacer muy similar a mi otro sitio web. Entonces mi sitio web real, así que con múltiples secciones aquí. Entonces obviamente, para poder implementar algo como esto, tengo que hacer ahora mismo una página de índice en mi página principal. Sólo tiene, ya sabes, un banner y luego una sección sobre yo quería ser un índice, Así que vamos a seguir adelante y dar click en Index aquí y que sea casa. Y luego llevaré esta página principal y dragón adentro solo para que no tenga que empezar de cero. No es, tengo mi página regular se ve muy similar a como lo hacía antes tiempo realmente idéntico. Mira antes, con una excepción, puedo agregar más secciones. Entonces después de la página principal regular, tuve la sección sobre, que está aquí. Déjame borrar estos extras, así que borra eso estoy seguro de que volveremos y agregaremos la mayoría de estos en un segundo. Pero sólo para mantener las cosas como parecidas a cómo son mi otra página y la siguiente arriba que tenemos , vamos a ver, después de nosotros, tenemos cartera, así que adelante. Y así esto es como una pequeña sección de portafolio, no lo mismo que un real realice su página porque sí tengo ambos. Por lo que este es un puerto para tu página. Esto es sólo una sección. Entonces sigamos adelante y agreguemos otra sección y lo llamaremos cartera, y solo la dejaré como página en blanco por ahora. Y probablemente podría reutilizar esta reutilización la misma imagen aquí. Entonces déjame hacer clic en este pequeño engranaje, vaya a medios en Image. Adelante y traigamos algunas de las imágenes. Entonces creo que fue éste. ¿ Ves qué tan grande es esto? 300 kilobytes de perfecto, porque redimensiono mis imágenes solo porque no me gustan demasiado grandes. Ahí vamos. Adelante y guarde eso, y entonces en realidad voy a volver a subir y cambiar el texto aquí. Si algunas obras pasadas, ya sabes, ahorra ahora esto quiero ser un poco más grande. Entonces volvamos a la configuración y lo pondremos en negrita. ¿ Quién ahorraría? ¿ Ves cómo se ve eso? Perfecto. Ahora, aquí quiero mostrar mi portafolio real. Entonces déjame tener en una creo que quiero la pared real poner en una gran causa. Grados muy organizados y uso existentes. Yo lo haré la galería de fotos. En realidad, ¿sabes qué? Antes de hacer eso, sólo voy a hacer un cambio. Y cuando cambió la galería de fotos a Galería de Portafolios Vale, copia eso. Pega aquí, sólo de la URL cambia también. Por lo que volveremos a casa, y esto automáticamente actualizado iba rápidamente. Asegúrate porque no quiero ningún problema más adelante. Por lo que ojalá otra vez galería. Eso es perfecto. Ahora voy a entrar a la galería de portafolio, y voy a eliminar todas estas imágenes porque este no es mi portafolio, y en realidad voy a navegar en mi computadora y sacar todos los archivos que pueda que estén relacionados con mi portafolio Así que quiero decir, así que voy a añadir algunas imágenes. Podría llevarme un rato, así que en realidad voy a cortar esta parte de video. ¿ De acuerdo? Está bien. Por lo que he ido adelante y he sumado todo mi portafolio. Entonces esto está todo arriba en herramienta, creo que abril son, o marzo o abril de 2016 teniendo ese tiempo para actualizar esto. Entonces sigamos adelante y retrocedamos. Entonces ahora ese es mi portafolio. Así que vuelve a mi página principal. Entonces ahora se ve así. Entonces ve algo de nuestro trabajo pasado y luego muestra todo eso. Entonces lo que quiero en realidad, es que me vaya a escuchar Déjame pegarle. No quiero mostrar tantos porque hace que la página sea demasiado larga, así que sólo voy a mostrar. Digamos a ver, Así que ahora mismo no puedo recoger aquí, así que tendría que hacer Así que cuando elijas galería, automáticamente recoge todas las fotos de esa galería. Entonces no hay manera de tipo de limitar cuántos hay, así que podría tener que subirlos poco a poco. Al igual que puedo subir cuatro imágenes para poder volver a Aiken, convertirla en una cuadrícula y luego subir manualmente solo cuatro imágenes aquí, pero quiero no quiero rehacer todo. Entonces en cambio, lo que haré es hacer de este un bloque de resumen porque eso sé que puedo limitar. Entonces hagámoslo un resumen, y lo haremos una cuadrícula. Entonces galería de fotos, señor,galería señor, Portafolios y luego exhibir. Yo lo lograré. A lo mejor seis deberían ser buenos y sólo la imagen. Por lo que no muestro nada más y nada de metadatos y luego voy a disponer. Por lo que ahora mismo, se pueden ver los lados de mi imagen de ser cortado. Por lo que a lo largo del lado izquierdo aquí en el lado derecho. Entonces hagámoslo auto para que automáticamente lo redimensione ahí. Eso es perfecto. Y cogí seis bits solo mostrando cinco. Entonces tendremos que hacerlo siete. Parece que la numeración está un poco fuera y no quiero mostrar todo así que no quiero mostrar solo lo más reciente quiero escoger imágenes específicas que me gusten, Así que voy a volver a puerto para ti y me voy, Digamos, por ejemplo, este quiero una categoría Mickey, hazlo página principal. Bueno , ahorra. Entonces escogeré seis que realmente me gustaría en la página principal. Tan rápido ahí categoría, página principal, guardar y esperar eso. Y entonces también tal vez esta de una categoría home page save. Ah, ahí vamos. Eso es yo creo 1234 Sí, eso son cuatro. Y creo que éste se ve bien porque de nuevo, no todos los sitios web que crees van a ser increíbles. Cuando tú cuando echas un vistazo a lo que quieren los clientes y les das lo que quieren, no siempre va a ser lo que quieres presumir. Y eso está perfectamente bien. Ya sabes, algunas personas quieren realmente jugar a sitios web buscando y que no hay nada que puedas hacer. Tienes que darles lo que quieren, verdad? Entonces si estuvieras haciendo como un tipo de web fotográfico, esto estaría lleno de fotos, y podrías ordenarlas dos categorías como bodas, cumpleaños, cosas así, y luego mostrar un específica en la página principal. Entonces volveré a la página principal y ojalá hiciera seis y no menos que eso. Entonces voy a seguir adelante y en ello, esperar a que esto venga aquí y luego haga clic en editar. Yo sólo voy a mostrar cosas que están en la página principal. Ya veremos cuántos realmente escogieron. Sí. Entonces esto es todos los que realmente quieren mostrar con lo que estoy mostrando. Y luego finalmente, lo que voy a hacer es agregar un botoncito aquí así que vamos a añadir un botón. Y eso será ver cartera completa. Y eso los llevará a mi página de portafolio. Bueno, ten todo. Así que desplázate aquí abajo. Apoyo para ti. Eso es cartera de slash, que es la primera página de portafolio. Hice de éste un puerto slash para ti uno, que es, creo, esta página en la que estoy ahora mismo. Entonces el portafolio en la sección Así que ese es mi puerto para tu página. Eso es perfecto. Medio centrado. Y eso se ve bien. Entonces vamos a golpear, aplicar, y vamos a mover esto hacia abajo. Y en realidad voy a cambiar el color de esto al rojo para que coincida con mi página web. Um, sólo en un segundo aquí, Así que ahorra. Entonces eso es un portafolio. Y creo que lo que voy a hacer ahora es que voy a quitar esta fuente aquí porque recuerda te dije que no encaja con mi página web, y no me gusta. Entonces sigamos adelante y quitemos esto. ¿ De acuerdo? Perfecto. Me gusta el pensamiento que estaba ahí originalmente. Vuelve atrás, vuelve de nuevo. Entonces sobre nosotros, um, siento que debería tener más texto ahí. O puedo hacer lo que hice aquí. Podría poner una imagen a un lado para tener una página sobre. Sí, sí lo hago. Para que pueda poner Ah, botón Eso lleva directo a mi página de cinturón aquí abajo. Y estoy pensando, si debería mover todo a la izquierda, probablemente no debería. Entonces, solo pongamos un botón y nos desharemos del espacio o aquí. No hay razón para tener aquí el espaciador, así que adelante y agrega otro botón y lo haremos del mismo tamaño que el que usamos a continuación . Simplemente mantener las cosas consistentes, para que ésta pueda ser como esta que se lea más. Sé más y así va a tener un click a través de Yarrow y será medio. Entonces eso es perfecto. Haremos que lleve a la página sobre que tenemos así de nosotros y luego aplicar y seguir adelante y decir eso. De acuerdo, son dos secciones. Por el momento tenemos la página principal y tenemos el portafolio. A continuación voy a agregar de hecho dejaré esto fuera en la sección de esta página principal y bloquearé publicaciones. Les mostré cómo agregar el resumen. Ya que no voy a estar blogueando en este sitio web, de verdad debería Pero , um, ya que lo estoy haciendo sólo para que ustedes puedan t no voy a poner un bloque ahí, así que pondré algún testimonio. Por lo que algunas críticas de la gente. Entonces sigamos adelante, volvamos aquí en la página de la sección y lo haremos reseñas. Ahora, una cosa que notarás, como estoy agregando, esto es que en mi sitio web de squarespace, tengo el banner de imagen arriba y luego el parecido, el texto para cada uno de abajo. ¿ Dónde está todo mi sitio web real? Tengo la imagen de fondo. Entonces si quieres algo como esto, tendrías que usar una plantilla que lo soporte Like Pacific o Marquis. Um, esta plantilla de Bedford no tiene apoyo para eso. Entonces estoy un poco atascado usando cómo se supone que se use, así que tendré la imagen de top y luego el texto de abajo. Entonces déjenme copias. Copia esto. En realidad, ¿Te rasgaste? De acuerdo, entonces en la página principal, me desplazaré hacia abajo a las opiniones. A lo mejor debería tener la imagen en primer lugar llena de pulgares arriba. Por lo que las críticas se reúnen. Cancelar aquí, en realidad, y banner. Y voy a añadir la misma imagen que utilicé para mi página web personal. Entonces es el que tiene el tipo con el dedo apuntando hacia arriba. Entonces los pulgares arriba apuntan, vamos. Y debería poder encontrarlo aquí. No creo que lo haya movido. A lo mejor no. De acuerdo, entonces no lo tengo aquí. Um, así que usé uno diferente. A lo mejor usó esta imagen. Eso es raro en eso, seguro que lo tenía aquí. De acuerdo, usaré esta imagen en ese caso. Y la redacción todo utiliza revisiones. Y no voy a tener vista todas las opiniones, porque en esta página, sólo voy a mostrar sólo tres opiniones. Así que adelante y guarde esto. ¿ Quién? Debí haber editado la redacción real. Entonces para decirlo, críticas, tal vez lo tenga. Guarda, lee, lee algunas de nuestras últimas críticas. De acuerdo, Así que ahora rápidamente poner en eso la redacción que quería poner en así que lee nuestras críticas y me acuerdo de hacerlo audaz y luego guardar la luz. Entonces lo primero que voy a poner es este 'll tomaré el nombre de la persona también y me dejaré ir adelante y editar, y voy a poner fuera del bloque de texto. Ahí hay una prueba. Um ¿Quién cotiza? Perdón, cita, no testimonial. Entonces cita Veamos cómo se ve esto primero, porque no siempre se ve lo mejor. No está tan mal. Entonces cuando añadamos otro abrigo, así que voy a tener tres aquí. Entonces me pongo tres primeros rápido, veamos cómo se ve uno al lado del otro. No está mal. De acuerdo, pues déjame tomar el 2do 1 Déjame tomar el mejor i e perfecto. Y finalmente tenemos el último aquí. Vamos a sacar esto. Esperanza. De acuerdo, así que eso es todo. Y este es un poco más pequeño, así que tal vez pondré en el medio. Simplemente equilibra las cosas. Perfecto. Entonces eso es críticas críticas de lectores. Eso no está mal. Por lo que portafolio de nuevo aquí, la gente acaba de hacer clic aquí y se abrirá en tamaño completo para que puedan ver en caja de luz. O en realidad puedo ponerlo para que cuando hagan clic aquí, los lleve directamente al sitio web que está destinado para Y para eso entraría en portafolio y haga clic en el engranaje pequeño para cada imagen. Pero creo que eso se ve bastante bien por ahora. El pie de página está bien. Así es como lo quería. Y vamos a ver. Página Principal se ve bien. Podría hacer de eso un deslizador más adelante, pero quizá no. Simplemente causa demasiadas partes móviles solo hace que las cosas que lo viven sean más confusas. De acuerdo, así que podría dejarlo así por ahora. Podría poner una imagen de mí mismo año para sobre nosotros solo para especie de dar un toque más personal con el visitante real. Pero además, eso se ve bien vista cartera completa. Me lleva a la página del portafolio , en realidad, modifique rápidamente esto porque no quiero hacer una conferencia completa sólo por esto porque es bastante sencillo. Entonces cuando el techo que y voy a poner en galería realmente resumen, va a ser un resumen con su resumen. Haremos de ella una galería esta vez porque no voy a escoger y elegir imágenes. Voy a poner toda la galería aquí. Yo lo haré Vamos a ver. El 43 sigue siendo un poco fuera de pantalla ancha. Sí, eso se ve bien para la libertad condicional. Que sean tres. Entonces no es tan pequeña y como caja, para que puedan,por supuesto,dar por supuesto, click en ella y verlo en un tamaño más grande, más grande y luego contenido. Entonces eso es perfecto. Y luego me desharé de ese bloque de texto que estaba ahí por defecto. De acuerdo, entonces ahí vamos. Ese es nuestro portafolio. Y recuerda, hice esto el real Sí, vale. Y entonces Así me deshice de ese deslizador, el deslizador de cabecera. Me deshice de él porque no quiero tener un slider en esta página, pero sí quiero un banner. Entonces veamos qué imágenes puedo usar para un portafolio. A lo mejor uso el mismo que usé en la página principal para portafolio. Así que solo mantén las cosas consistentes y pondremos el foco en el equipo perfecto. Eso ya está hecho. Y entonces también, en realidad, podría tener que usar una imagen de color más claro porque ahora mismo, ya que los fondos oscuros, es difícil ver el menú. Ahora puedo agregar como una superposición, pero eso podría ser un poco demasiado trabajo. Entonces vamos a quitar esto, A ver si pudimos encontrar una imagen de luz. Quiero usar eso para la página de contacto. Entonces tal vez esto funcionaría mejor aún está un poco oscuro en la parte superior. Esperemos que funcione. Sí, en realidad, esto fue Esto se ve bastante bien. Vamos a bajarlo un poco. Además de eso, creo que se ve bien. A mí también me encantó. Muy abajo en la página principal está un poco fuera. De acuerdo, así que eso es perfecto. Por supuesto, la imagen realmente no coincide, pero, ya sabes, solo estoy haciendo lo que tengo. Por ahora, puedo ir a Paxil y encontrar más imágenes, pero no es demasiado de preocupación en este momento. Entonces vamos a hacer esto, um, um, nuestro puesto lleno usted y otra vez tiró de él porque de lo contrario es demasiado pequeño. De acuerdo, entonces ese apoyo para tu página. Entonces, cuando alguien hace clic en ver cartera completa en la página principal, los lleva aquí para que puedan ver a cada uno completamente, así que eso es perfecto. Y luego puedo agregar más imágenes al portafolio bajando aquí, y eso es genial. Entonces eso es casa y vierte por tu hecho y luego en el siguiente. Yo me encargaré de la página sobre, pero esa es otra página que uso para todos. El hosting está prácticamente hecho, para ser honesto. Es decir, podemos darle estilo un poco,ya sabes, ya sabes, ponerlo como una imagen, Una charla en la parte superior aquí. Pero esta no es realmente una página que tengo en cada sitio web, así que realmente no aclararé demasiado. En cambio, iré a la página sobre Estados Unidos. Desde esto uso casi todos los sitios web han hecho, tiene una página sobre, así que les mostraré chicos que en la próxima conferencia. 31. Mira a trabajo: la página Acerca de la página de atención: esta conferencia es todo sobre el durazno sobre nosotros. Entonces para esta página, voy a empezar con el banner. Entonces voy a poner mi propio bateador aquí. Simplemente echamos un vistazo rápido a lo que estoy usando en mi otro sitio web. ¿ De acuerdo? Era la misma imagen aquí, y no creo que pueda, en realidad, en realidad, porque recuerdo que las imágenes oscuras no funcionaban. Bueno, déjame ver rápidamente cómo va a ser esto. No es terrible. En realidad lo guarda porque en realidad no está mal. De acuerdo, entonces sobre nosotros en la u son menos perfectos. Entonces cree eso. Y luego vamos a copiar esto, y voy a dar el paso justo aquí. Entonces déjame borrar este cuadro de texto. Por lo que este es todo el contenido demo que vino con él. Es por eso que no me gusta usar las páginas de demostración porque tienes que pasar por la molestia de eliminar todo antes de empezar realmente. Entonces déjame salir y pegar esto como texto plano. Por supuesto. Y luego escribiremos una línea este No, manténgalo a la izquierda de la línea. Y aunque en otro bloque de texto Así que otro libro de texto aquí sobre nuestro trabajo Esta vez no lo haré . Um debería dejarme ver cómo se ve si solo pego este texto plano. Sí, lo mantendré atrevido tirón Eso lo hará un rumbo. Número dos. Sí, eso se ve mejor. Yo puedo jalarnos. Sí, eso se ve bien. De acuerdo, así que manténgalo así, y luego voy a tener móvil amigable con una imagen de la tableta a un costado y luego los libros reales de Mac. Por lo que hacemos móvil amigable. En primer lugar, no voy a hacer de esta una página de índice porque no tengo mucho que añadir aquí que no quiero otra imagen que separa a los dos. Entonces déjame realmente poner un divisor, lo haré una línea, y luego voy a poner una imagen que está en mi escritorio. Entonces primero, es el iPad otra vez sin subtítulos seguro y que voy a poner en un bloque de texto así que va a entrar aquí y va a hacer de esto un encabezado número dos. Porque, recuerda, solo tienes un encabezado número uno por página, y esto está por delante del número uno. Por eso escogí un número dos aquí y volveré a elegir dos aquí. Y todo esto va a estar centrado. Oh, no, me equivoqué. Dejó la línea. Es decir, intentaré siglos mientras ver qué luce mejor. Ahí vamos. Centro de trajes. No, definitivamente dejó la línea. Esta vez vamos a tener otra imagen. El libro de Mac y sin leyenda una vez más porque no me gusta la leyenda aquí abajo. ¿ De acuerdo? Y luego otro cuadro de texto de este lado. Eso es todo. Amplía tu negocio y esto se puede dejar alineado. Y esto va a ser el rumbo número dos. De acuerdo, solo estoy revisando. Ahí hay una línea vacía arriba. Entonces, Heather, número dos. Caso de Eso es perfecto. Y también queremos poner iconos aquí, así que está siendo un poco raro. Déjame salir y poner código. Elimina eso. Mueve esto a la cima. Ahí vamos. Pon otro abrigo aquí antes de continuar. De acuerdo, Entonces en este código, lo que vamos a poner es y yo tipo de teléfono. Entonces cuando conseguimos iconos y hacemos una búsqueda de teléfono, toma éste. Adelante y cópielo. Pega. Y yo quería ser un poco más grande, tal vez tres veces Hope un tres veces cuatro, en realidad. Está bien. Y sí, eso es Sí, eso es bueno. Y me encanta esto a la izquierda un poco y se trasladarán de oficina. Ahí vamos. Entonces esto va a ir de este lado también. De acuerdo, entonces el código que vamos a poner ahora es una llave inglesa cuando volvamos y agarraremos la llave . Ahí vamos. Perfecto. Copia esto. Ponga aquí. Y creo que fue tres veces si un cuatro veces sólo para mantenerlo igual este año. Por lo que esto fue golpeado cuatro veces, para luego mover esto. Empezó la imagen de nuevo. De acuerdo, Tal vez esto será mejor en este sitio. Mm. No, creo que se veía mejor en el sitio. Está bien. Sí, Aquí hay bastante juicio en el cabello, así que eso se ve bien. De acuerdo, así que adelante y golpea. Guardar. Ahora. Yo quiero que estos iconos sean rojos. Entonces déjame coger el frío por mi rojo primero. Entonces editor de estilo, toma esa costumbre en curso. CSS, recuerda, para el ícono, era una clase I Así que si solo voy a ir a debería trabajar color. Ahí vamos. Por lo que cambió para leer. ¿ De acuerdo? Y creo que eso se trata de todo lo que quiero para mi página sobre. Pero también tendría aquí. No quiero eso. Mm. Podría ser demasiado y nada sobre el hosting. Puedo poner eso en la página de hosting si es necesario. Y estos logotipos, me voy a dejar fuera también causa especie de portafolio. Y luego así que esa es la página sobre contáctanos página. Ya estaba hecho. Um, esto era todo lo que quería. Podría agregar un poco, unos campos más y las preguntas que voy a cambiar, obviamente. Pero además de eso, la página de contacto está prácticamente hecha también excepto por el bateador, porque realmente no se puede ver ese fondo. Y tenía una foto especial para esto. Eso no es todo. Por lo que waas este de aquí. Entonces déjame ver lo grande que es eso. Cinco millones de bytes. Definitivamente no el que quiero usar. Ahí vamos a esperar eso, la subida y luego cambiarla para contactarnos. Yo me desharé del botón. Aquí vamos. Entonces veamos cómo se ve esto. Perfecto. Espera. Utilicé esto en la página principal. Por eso parece un poco familiar. ¿ Ves qué más puedo usar para el contacto? Podría usar esto. En realidad, estoy bastante seguro de que ya usé eso. Dos mega Bates. Sí, así es. Usaré esa. En realidad, no he usado eso para el portafolio. Elegí usar el otro. Ahí vamos, y vamos a golpear seguro. Entonces vamos a ver. ¿ Qué? Que tú ese tipo de lista de trabajo, tal vez a ver si puedo. Moverse sólo un poquito. A lo mejor eso ayude. Eso es un poco mejor. En realidad no. Um, tal vez bajando un poco para conseguir oferta chaqueta oscura, Esperemos, iPad. Aún así, uso eso, pero no, me gusta mejor antes realmente me gusta, así que sólo lo dejaremos como estaba justo en el centro ahí. mí, me gusta que lo mejor siga siendo bastante ilegible. Entonces sí. Entonces así es como haría la página de contacto también. De acuerdo, así que si ustedes tienen alguna pregunta, siéntanse libres de contactarme. Um, en ti, Demi, en realidad puedes seguir adelante y hacerme preguntas. Y si suficiente gente hace la misma pregunta, haré nuevos videos. Entonces si alguien quiere conocer un tema específico que podría haberme perdido, seguiré adelante y haré un video sobre y luego lo subiré al curso. Y sí, y en algunos de los videos. Perdón si cometí algún error. Yo sí traté de ser lo más preciso que pude, pero de nuevo, soy humano. Entonces si ves algún error, avísame, y lo arreglaré enseguida. ¿ De acuerdo? Gracias. Chicos estaban tomando este curso, y realmente espero que tu página web salga tan hermosa como esperabas que lo hiciera. 32. Añadir características: CSS personalizado: Ahora sé que prometí que no habría codificación en este sitio web, pero te voy a mostrar un poco de CSS personalizado porque hay momentos en los que querrás usarlo, y en absoluto no es necesario. Pero digamos, por ejemplo, como te estaba mostrando en una de las conferencias anteriores. momento, este rubro número uno es tasa roja. Entonces si entro en hospedar el encabezado número uno que está en hosting así que aquí mismo también se lee . Ahora, digamos, por ejemplo, quería que esto fuera negro, pero en la página principal, quería ser Brett. Realmente no hay forma de hacer eso ahora mismo en Squarespace, por lo que no puedes tener Kalish específico para páginas específicas a menos que uses CSS personalizado. Otra razón por la que podría querer usar como CSS personalizado es digamos que desea cambiar la fuente del texto en una página específica, pero no todas las páginas. Entonces de nuevo, tendrás que usar CSS personalizado para cambiar lo foráneo, recorrer el estilo de la fuente o ejercitar algo así. De acuerdo, ahora, para poder hacer eso, necesitarás conocer alguna costumbre básica. CSS Voy a adjuntar un enlace a W tres escuelas. Por lo que tiene algunas cosas muy básicas que puedes probar y hay algunas. Algún costo es que puedes tomar. Es libre de usar. Entonces hay de nuevo ejemplos. Hay preguntas de práctica que puedes pasar y ejercicios, Así que definitivamente echa un vistazo. Vinculo eso en curso real. De acuerdo, en esta conferencia. Por lo que algunos de los básicos se airean aquí mismo para que esto apuntara como todo en el cuerpo. Este sería Heather número uno otra vez párrafo, que es, como más o menos texto. Por lo que esto sería sólo p por párrafo. H uno se dirige uno. Entonces aquí, Así que es muy, muy sencillo, y es muy básico, pero de nuevo, sí te ayuda bastante si realmente quieres tener esa pequeña melodía fina en tu página web. Entonces sigamos adelante y te mostraré cómo hacemos eso. Vale, Entonces lo primero que te voy a mostrar es como la forma equivocada de hacer las cosas solo porque quiero que entiendas por qué no lo hacemos de esta manera. Por lo que en chrome o Firefox o Internet Explorer si haces clic derecho en el lugar en el que quieres comprobar el código para que puedas dar click en inspeccionar. De acuerdo, Entonces eso traería automáticamente al código con el resaltado en lo que haga clic derecho . Entonces hice clic derecho en el encabezado uno. Entonces si tengo por aquí, es el encabezamiento uno. ¿ De acuerdo? Entonces cada cosa tendrá Así que cada líneas son Tendrás un i d A menos que vuelva a ser el rapero , que de nuevo sí entiendo esto un poco más avanzado, así que definitivamente recomiendo que le echen un vistazo a esa w tres escuela. Entonces aquí, por ejemplo, este es un rubro número uno, y es fuerte. Significado es negrita ID. Correcto. Entonces el encabezado uno que pongo tiene un i d. Entonces si tomo eso d tan justo ahí ideas iguales a cada idee es único. De acuerdo, no hay otro yo d en este sitio web que vaya a tener este abrigo. De acuerdo, entonces te mostraré por qué esta es la forma equivocada de hacer las cosas. De acuerdo, así que digamos que tomo esto d. Así que para apuntar a un I d Utilizamos este símbolo aquí mismo. Digamos que quiero hacer negro el cuello. ¿ Verdad? Entonces todo está bien y bien. Es negro, ¿verdad? Que es lo que queríamos. Pero ahora déjame mostrarte lo que pasa. Esto no sucede cada vez, pero sucede la mayoría de las veces que te vas y vuelves y está de vuelta a leer a pesar que aún ahorra tasa negra. Entonces ahora es un poco confuso. ¿ Qué pasó? ¿ Por qué volviste a Black? Echemos un vistazo. Por lo que ahora la H una etiqueta. Lo mismo cuando usé yo d y luego 22 o cuatro antes era 2196 Así que ha cambiado. Por lo que cada vez que actualizamos la página, el i d cambia. Esta es una característica terrible, terrible que es implementada por squarespace, y personalmente la odio. De acuerdo, esto es lo único que realmente odiaba de squarespace es el hecho de que las ideas cambien porque eso es algo que es una convención que realmente no debería estar cambiando. De acuerdo, así que esto es lo que puedes hacer. Está bien. Lo que puedes hacer es, en lugar de apuntarlo por su I d. Puedes apuntarlo como cada uno. ¿ De acuerdo? Otra cosa que puedes hacer es que hay algunas ideas que no cambian por lo que ninguna i d. Eso tiene la palabra bloque al principio no va a cambiar. Entonces, por ejemplo, si copié esto así bajo el diff esta bajo este Dave, voy otro Dave y luego cada uno y luego tengo mi rumbo, ¿no? Entonces si voy y meto, por ejemplo, ese es el Dev y pongo en 81 porque ahí está el rubro debajo de esto. Entonces es un niño de este bloque. Ahora si voy a otra página y vuelvo y vuelvo, es Es tan negro. De acuerdo, entonces ya ves lo que pasó. Mientras usaras bloque, aún me quedaré. O si solo usas H uno por sí mismo. El motivo por el que no usaría 81 por sí solo es que apuntaría a cada uno, cada uno en la página web. Entonces si voy a como hosting, esto también sería negro. Si no usara block, Verá, eso también sería negro. De acuerdo, entonces es como un vivo. Se puede ver una versión en vivo del sitio web cuando se realizan cambios a la izquierda. También lo abres en una ventana nueva para que puedas verlo más grande aquí. El caso incluye eso. Entonces así es como apuntarías para CSS su de nuevo. Es como una situación extraña, pero es lo que tiene Squarespace por ahora. Entonces supongo que eso es lo que tendremos que seguir. De acuerdo, esa es la convención que tenemos que seguir. Um, la otra cosa que podemos hacer desde aquí es otra vez. Ahí hay color. Podemos cambiar las fuentes. Te voy a mostrar en la próxima conferencia cómo agregar realmente en tus propios frentes. Pero por ahora, podemos cambiar como divertidos también podemos cambiar como divertidos. Así familia de fuentes a Helvetica. ¿ De acuerdo? O podemos cambiarlo a Ariel. Ariel. No es un gran cambio. Podemos cambiarlo por hijos abiertos que abran tapón espacial. Consiguió la convención para hijos abiertos. Eso está bien. Um, así que sí, puedes seguir adelante y jugar con esto. De acuerdo, así es como haces eso. Y también, se puede cambiar el tamaño de fuente a, por supuesto, hasta ahora en tamaño 16 píxeles. De acuerdo, ahora, la otra cosa que quieres tener en cuenta digamos que vas aquí y pones color negro y no toma que se quede. Lee lo que puedes hacer su poner un espacio y luego poner un signo de exclamación y ponerlo importante . De acuerdo, Eso más o menos le dice al CSS que anule todas las demás reglas y surta efecto. De acuerdo, entonces así es como te burlas si realmente pones de color negro y no cambia. Prueba esto. En primer lugar, intenta hacerlo importante primero. Y si aún no funciona, entonces probablemente apuntes mal. Así que sólo echa un vistazo por aquí, ¿de acuerdo? Entonces seguiré adelante y cerraré eso. Entonces así es como cortarías hacer CSS personalizado. He tenido que usar eso para cambiar el color de la fuente es cambiar los tamaños de fuente. Um, haciendo más ancho el texto. Entonces, por ejemplo, um, algunas páginas, como el ancho del texto sólo consigue ese blanco derecho. Por lo que en algunas plantillas, en realidad puedes hacerlo más ancho yendo al contenedor que lo sostiene. Entonces, por ejemplo, subo hasta así eso es todo en la página que sugiere el texto. Entonces ese es el 1er 1 que contiene el texto. Y luego puedes hacer como, el ancho. Por lo que la mayoría de las páginas tendrían como un con de 50. Pero esto tiene 100. Entonces no me está dejando poner esto porque no puse por ciento para que puedas poner algo así, ¿ verdad? Um, ahora, para ser completamente honesto, preferiría realmente poner un espaciador sólo porque no quieras poner demasiado CSS festivo porque podría romper el sitio web. Es muy improbable. Y quiero decir, podrías volver al CSS personalizado y quitar la línea que tipo de lo arruinó. Entonces no es como un gran rescate tomando. Realmente no hay riesgo. En realidad, todo es insuperable. Entonces así es como pones CSS personalizado. Ahora, además de esto, todo lo que pongas aquí es global para todo el sitio web, a menos que lo apuntes usando, como, bloques como este, ¿ verdad? Entonces si lo hiciera bloquear cada uno y luego colorearlo así que automáticamente cierra tus etiquetas también, Así que color negro sería justo esta página porque esta es la única página con esto con un bloque con este d. mientras que si lo hiciera cada uno lo llame negro, te mostraré cómo luce eso. Entonces si voy en el hosting, esto también va a ser negro. De acuerdo, Ahora, digamos que no quieres apuntar a bloques o no tienes otro bloque al que apuntar. Lo que podrías hacer si solo quisieras que esto fuera negro es que puedes entrar a páginas. Entonces puedes hacer click en solo hospedar el ícono del engranaje pequeño aquí. Goto avanzado, y luego vamos a seguir adelante y poner estilo. Tienes que incluir eso porque esto va directamente al encabezado donde es personalizado. CSS obtiene automáticamente estilo agregado a la parte superior en la parte inferior. Entonces pondremos en cada uno color negro. Vamos a ahorrar. Entonces ahora ves que aquí es negro. Dónde está No es negro aquí, pero una cosa que te darás cuenta es que mientras estaba haciendo ese cambio Lo siento, Página incorrecta hosting. Y así mientras que eso. Por ejemplo, si deshago esto, verás que sigue siendo negro en el fondo. En realidad no verás ningún cambio hasta que pegues guardar. Entonces ese es el único inconveniente de pasar por este camino. Entonces lo que incluso recomendaría es que entres en CSS personalizado diseñado. Prueba cualquier CSS que quieras, asegúrate de que funcione y luego cópielo y péguelo en la pintura específica. De acuerdo, así es como ustedes tipo de uso CSS personalizado en su sitio web, y hay un poco más avanzado. Por eso voy a incluir ese tutorial sobre las escuelas W tres para ti. Y en la próxima conferencia, realidad les mostraré cómo podemos seguir adelante y usar esto a nuestra ventaja. Está bien. Está bien. Los veré en la próxima conferencia. 33. Añadir características: cómo añadir fuentes personalizadas: De acuerdo, entonces te mostré antes cómo puedes cambiar la fuente de un texto específico en tu página. Entonces vas al editor de estilo de diseño, y luego podemos seguir adelante y dar click en esto y luego ir a Font y podemos elegir una frontera . Ahora, digamos que pasaste por este año pasado y no te gusta ninguna de las fuentes de aquí. Sí sucede, pesar de que aquí hay bastantes. Y digamos que te gusta peleado. Eso está en una página web diferente. Hay una manera de que descargues una fuente y subas al espacio cuadrado, y te mostraré cómo en esta conferencia. Por lo que hay tres sitios web principales que uso para fondos. Seguiré adelante e incluiré el enlace para esos como recursos adicionales para esta conferencia para que puedas ir y dar click en aquellos de los que tengo listado D A fondo. Entonces sigamos adelante y te mostraré cómo podemos usar por ejemplo, este de aquí detrás del guión. Lo primero que haría es asegurarme de que Squarespace no lo tenga ya, Así que estaba escribiendo detrás del guión y aquí no hay nada, así que vamos a seguir adelante y descargar esto. Por lo que acaba de descargar al escritorio. ¿ De acuerdo? Y lo voy a extraer Perfect extraído al escritorio también. Ahora, lo que haces es ir al CSS personalizado. Por lo que vas a diseñar CSS personalizado y nos desplazamos hacia abajo hacia su administrar archivos personalizados. Vamos a seguir adelante y hacer clic en esa imagen del anuncio o fondos, y entonces en realidad iré a mi escritorio. Iré detrás de guión y subiré el archivo para que esto pudiera ser en una variedad de cuatro maestros diferentes O T F T f y WTF. Yo creo. Entonces. Vamos a seguir adelante y dar click en ese click al abrir. Entonces ahora tenemos la frontera. Adelante y vuelve aquí. Entonces lo primero que tenemos que hacer es configurar la fuente para que realmente podamos usarla. Entonces lo que hacemos es teclear cara de fuente, ¿de acuerdo? Y ahora vamos a vincular realmente el archivo de fuente a él. Entonces primero le daremos un nombre, así que la familia de fuentes lo llamará. Creo que se llamaba detrás del guión, así que hazlo atrás, vale, e iremos al SERC. Entonces esa es la fuente. Y es el cierre de apertura U R L en realidad poner el semi colon así que dentro del soporte. Simplemente pones tu cursor ahí, ve a gestionar archivo personalizado y haz clic en esto y automáticamente rellenarás el abrigo. De acuerdo, entonces ahora que tenemos eso, si vamos a H uno y cambiamos la familia de fuentes dos atrás, deberíamos ver que patea y se ve así ahora, Ahora mismo, es Se ve un poco raro así porque no hay espacio suficiente. que pueda ir a un espaciado entre letras uno e m. Así que eso es un poco demasiado. Podríamos hacerlo un 0.5 yem. Sí, esa es un poco mejor. Entonces así se vería ahora. No me gusta realmente cómo se ve eso No exactamente lo que tenía en mente, pero de nuevo sólo únete a ti cómo se hace. OK, ahora, la razón por la que creo que se ve así es porque todo es capital. Entonces tratemos de hacerlo no todos gorras sobre nosotros. Sí, eso se ve mejor. De acuerdo, entonces obviamente no usaría este formulario para mi sitio web porque esto es sólo una demostración desde mi sitio web, quería ser un vivo más moderno, usaría más como fuentes. Eso es algo así como lo que era antes y más como este tipo de bonos sin Sarah. Entonces eso es lo que usaría, Um, solo mostrarte cómo se agrega, aunque una cosa más que quiero mencionar es que a veces la tendrás cambiada como esta otras veces. Incluso después de que pongas todo exactamente así, el frente que se está usando en realidad no cambiará ahora. Hay una solución realmente fácil para eso. Simplemente vas a la U. R L y todo después Lo siento, todo antes estático. Por lo que https, semi colon slash slash Nosotros borraríamos eso. De acuerdo, entonces cuando se borra eso, um, sólo un segundo aquí había tanto apenado todo antes de la corte. Por lo que eliminarías https y luego el semi colon y liderarías las varillas. Entonces, cada vez que uses archivos personalizados en tu sitio web y encuentres que no funciona, solo prueba a apagar la Barra inclinada Ok. El motivo por el que normalmente no funciona es porque se está sirviendo sobre https y cuadrados basados por defecto. No tenía eso. Entonces ahora que squarespace soporta https, en realidad va a estar funcionando para nosotros aquí, así que incluso sin eliminarlo, funcionará. De acuerdo, entonces si no estás usando SSL, asegúrate de eliminar ese semi colon https antes de que empiecen a funcionar. De acuerdo, así es como agregarías fondos personalizados. Entonces otra vez, sólo puedes ir aquí. Aquí puedes ir por algunas de las fuentes. Por lo tanto para extranjeros look vacaciones Así, por ejemplo, Navidad. Por lo que para Navidad, solo tienes que hacer clic aquí. Y aquí hay unas fuentes muy, muy geniales que puedes usar solo para darle a tu página web un look vacacional rápido sin demasiado trabajo. Por lo que pueden cambiar rápidamente los encabezamientos a uno de thes solo para las vacaciones y luego apagarlo cuando termines. De acuerdo, así que eso es Pie Custom. 34. Añadir características: crea una FAQ Accordion: De acuerdo, entonces en esta conferencia, voy a mostrar cómo crear un acordeón estilo F A. Q. Entonces, cómo se verá eso cuando esté hecho es similar a esto. Entonces hay una pregunta y le haces clic para la respuesta. De acuerdo, entonces este código viene de Silva Baucus, um dot com. Entonces él es el que se le ocurrió la codificación, y lo creó para que funcione con Mark down. Entonces definitivamente es algo que recomiendo, sobre todo si vas a estar respondiendo algunas preguntas que tiene la gente, que yo seré. Entonces vayamos a la página de contacto, porque aquí es donde la voy a agregar. De acuerdo, entonces pondré el enlace a esto en el recurso extra real es. Pero Pero también tengo la codificación real. Lo junté en un documento de texto, y tenía algunas instrucciones que puedes seguir y te mostraré lo que se hace aquí. Lo primero que tenemos que dio es que tenemos que habilitar la Biblioteca J Query, por lo que entraremos en ajustes y luego avanzaremos y luego en inyección de código. Y luego en la cabecera, sólo vamos a pagar la estancia, Así que ya la tenía ahí. Entonces volveremos atrás, atrás, atrás, y volveremos a diseñar a continuación. De acuerdo, entonces a continuación, vamos a estar pegando esto en la página real que quieres tener el f A Q. Así que lo voy a tener en la página de contacto. Entonces voy a ir a la página de contacto, click en el engranaje pequeño al que voy a ir avanzado y pegar esto. Está bien. Y vamos a golpear. Guardar. Y luego finalmente, tenemos un bloque más de código, que está justo aquí abajo. Vamos a copiar esto, y vamos a entrar en diseño CSS personalizado y ponerlo aquí. Entonces solo deja un poco de espacio, ponlo ahí dentro, ¿de acuerdo? Y luego seguiré adelante y golpearé. Guardar. Atrás, retrocede . Entonces ahora estamos listos para poner esto en realidad. Entonces lo que hacemos es dar click en editar donde queramos ponerlo. Voy a dar click aquí mismo. ¿ Qué? Yo quería en la parte superior por ahora, y voy a buscar marcado hacia abajo. De acuerdo, Entonces esto es todo aquí mismo. Puede entrar a eso. Entonces para mark down. Lo que hacemos es que pones tú también, um signos de hashtag y luego la pregunta. Entonces, ¿cuánto son sus servicios? Y luego presionas enter y luego pones la respuesta Así que cada proyecto es diferente, ¿de acuerdo? Y luego ponemos base espacial. Y luego la siguiente pregunta, um, no puedo hacer usaste la página, Utilizó el formulario en esta página. De acuerdo, así que vamos a golpear. Aplicar. Entonces por ahora, todavía no está apareciendo un desplegable al hacer clic para que para que eso funcione, tengamos que refrescar la página. Entonces primero moveré esto a un lado. Yo creo así todo lo ahorra. Entonces voy dedo del pie, por ejemplo, Blawg y luego vuelvo a la página Contáctanos. Y ahora se puede ver puesto pulcramente cuando, Cuando se presiona sobre la pregunta, aparece la respuesta y el signo cambia de más a menos. De acuerdo, entonces eso es usar javascript. Y entonces ahora digamos, por ejemplo, tienes este código ingresado correctamente y te gusta cómo se ve. Pero no quieres usar header to. Por lo que tener a símbolos es de cabecera a derecha. Que alguien use el encabezado tres, ¿verdad? Pondrías aquí tres símbolos y pegarías aplicar, y es seguro, así que por delante de tres se ve un poco diferente. Es ah tamaño de fuente más pequeño. Entonces les mostraré a los dos, en realidad uno de cada uno. Para que puedas ver Así ves cómo se trata de un tamaño más grande y este es un tamaño más pequeño. Entonces si quieres usar el encabezado tres, pones tres. Pero antes de que empiece a trabajar, en realidad hay que entrar en el en el código aquí en avanzado. Y en todas partes se ve que ocho h dos, hay que cambiar a 83 h tres. Por lo que cada tres ahí también aquí. Hay uno por aquí. Creo que ese es el último otro más y finalmente ese sobre el blanco guardar. Por lo que ahora funciona para H tres. También puedes cambiar esto para trabajar con H one. Si quieres que la fuente sea realmente grande, o puedes entrar en el editor de estilos Así que el estilo terminó aquí y podría desplazarse hacia abajo a H uno y puedes cambiar el tamaño de la fuente aquí. Pero nuevamente, ten en cuenta que esto sí cambia el tamaño de fuente para todo tu sitio web. Entonces si quieres que esto sea hte a pero una fuente más pequeña, tu mejor apuesta sería convertirla en un H tres. De acuerdo, entonces así es como tendrías un acordeón estilo F a Q. 36. Añadir funciones: múltiples Menús (avanzado): De acuerdo, así que he tenido bastantes personas que me pregunten cómo crear diferentes menús en Squarespace. Entonces esto es, por ejemplo, si quieres mostrar como inglés, francés y español o diferentes idiomas en tu página web y tener diferentes páginas para cada menú. Así es como lo haces. Entonces, por ejemplo, lo configuré para tres ubicaciones diferentes. Este es un sitio web de clientes diferentes. No necesitaba esta funcionalidad por la mía. Entonces te estoy mostrando en el suyo. Entonces si voy a Bellevue en la orilla así Bellevue se vería como esta orilla se vería así. Entonces se ve cómo la navegación de faltar algunos y también cada página es en realidad diferente. Ahora mismo, estoy en la página principal, y esto es diferente a la página principal para esta ubicación, ¿ verdad? Entonces en la parte posterior real. Y lo que verías si Bellevue Navegación Shoreline Seattle y no vinculado y principal, que se construye automáticamente. Entonces te mostraré cómo hacer esto. Lo es. Yo vivo con más complicado, pero vamos a ir. Está bien. Entonces, antes que nada, vamos a la configuración y vamos a avanzar en el modo desarrollador y encendimos esto por lo que en cuanto lo enciendas, verás todos tus detalles de conectividad aparecen aquí. Lo bueno del modo desarrollador es que impide que tu plantilla se actualice. Por lo que un código de rompemoldes en el futuro. Por lo que siempre se quedará levantado. De acuerdo, Así que con el fin de realmente iniciar sesión en tu sitio web así que ftp en, utilizo cuando SCP puedes usar lo que todo el mundo quieras. Um, así que sigamos adelante. Y así cuando hablo, SCP es en realidad libre de usar, así que sientes miedo a Google por ello y descargarlo. También incluiré un enlace. Entonces esta es la información real. Entonces, ¿acabas de entrar aquí? Asegúrese de que esto esté configurado en sftp porque es sftp. Por lo que ya había entrado. Entonces está justo aquí. Adelante y firmémoslo. Te darás cuenta de que a veces te cerrará y te dirá: ¿Quieres reconectarte? Tan solo asegúrate de golpear la reconexión para que tus guardadas realmente se lleven a cabo porque hay algunos bichos en los que simplemente te patea al azar a veces. Entonces déjame realmente volver a esto antes de continuar. Está bien, Perfecto. Entonces, cuando realmente estás aquí, hay 22 cosas que tenemos que cambiar a los archivos el archivo de plantilla y el archivo sombrerero. De acuerdo, entonces el archivo de plantilla es lo que se muestra en el back end. Entonces para ti, no para las personas que visitan tu sitio web, sino para ti para que realmente puedas crear el menú. Entonces, cuando inicies sesión por primera vez, verás lo que verás es en realidad esto, um en realidad simplemente yendo, verás esto. De acuerdo, así que quieres buscar esa navegación principal Significa eso y justo aquí, después del corchete rizado y antes del corchete cuadrado, quieres copiar todo hasta aquí. Por lo que todo dentro de los pequeños rizos bordillo soporte cualquiera una copia y pegarlo tantas veces como necesites. De acuerdo, así que necesitaba tres localizaciones, así que hice tres. Yo les di títulos, y también les di un nombre. Asegúrate de que el nombre no tenga espacios porque se va a usar en la d. Vale, así que una vez que lo tengas hecho, lo mantendré abierto para que veáis lo que estoy haciendo, y luego iremos a la región de cabecera. Entonces hay tres lugares a los que llegamos para hacer cambios aquí. De acuerdo, entonces deja eso abierto. Entonces aquí tengo tres menús. El principal de navegación. Solo tengo mi portada donde la gente realmente escoge qué idioma o qué ubicación. Por lo que no quiero mostrar ese menú en ninguna parte. ¿ De acuerdo? Yo sólo quiero mostrar estos tres menús. Por eso. Aquí, sólo estoy usando esos tres. Entonces, cuando inicies sesión por primera vez, lo que verás aquí es squarespace. Ahora puede tener una denuncia. Entonces lo que quieres hacer es copiar que pegó tres veces y cambiar la navegación yo d Eso es lo único que tienes que cambiar por el nombre que le diste. Por lo que Bellevue línea costera en Seattle. De acuerdo, entonces te desplazas hacia abajo y luego tienes otra otra aquí. Entonces otra vez, el 1er 1 aquí, dirá, puede navegar. ¿ Quieres copiado esto? Te aseguras de copiar esto. Y no solo pegues lo que copiaste aquí arriba. Porque ahora la plantilla es navegación principal, no navegación móvil. Para que puedas copiar pegar y darle el, um la navegación yo d para que coincida con el nombre por aquí y te desplazas hacia abajo y hay uno más justo aquí. Por lo que vamos de nuevo copiar pegar y cambiar la navegación me d dos, lo que quieras realmente mostrar. Entonces la cosa de esto es, cuando hagas esto, realidad mostrará los tres menús de cada página, así que te mostraré lo debilitado límite que es solo muestra el menú que querías mostrar en cada página. Entonces una vez que hayas hecho eso, acabas de golpear, Ahorra. Tendrás una caja viniendo aquí abajo diciéndote que está ahorrando. Y una vez hecho, puedes cerrar esto, terminar la sesión y luego refrescar esta página y luego verás los tres menús para poner páginas ahí dentro. Todo lo que haces es hacer clic en él y arrástrelo dentro. De acuerdo, Algo que debes saber es que de nuevo no hay dos páginas que puedan tener lo mismo. También eres Este es el Hogar tres. Este es el hogar de, y este es el hogar uno de casa uno. Entonces no hay forma de tenerlo. ¿ Está casa en casa? casa? Pero quiero decir, eso es una cosa pequeña, pequeña a la que rendirse. Incluso puedes hacer la navegación. A lo mejor Bellevue casa, ¿verdad? Por lo que se ve un poco un poco mejor en los motores de búsqueda, pero eso depende de ti. Entonces después de eso, lo que hacemos. Déjame mostrarte cómo te va a buscar. De acuerdo, así que de inmediato verás que los tres hombres usan aire apareciendo. Y si en realidad vas a la vista móvil, verás que los tres hombres usan aire apareciendo. Esto es bastante guay también. Se puede cambiar entre las vistas aquí arriba, así que para ocultarlo, lo que tenemos que hacer, déjame realmente ponerlo en un sitio web en vivo no se ve afectado. Entonces si vas a avanzado, lo que estoy haciendo es que voy a may naff y al cuarto hijo. Entonces déjame mostrarte por qué estoy haciendo eso. Por lo que verás que hay principal en mayo. Navin. Yo lo suficiente. Ahí hay tres de ellos. Entonces eso es Bellevue, Shoreline y Seattle. De acuerdo, la siesta principal no aparece porque no lo incluí en mi archivo de plantilla real. Perdón. El archivo de cabecera son mi único tenía esos tres. Porque, recuerda, no quiero mostrar esto en ninguna página. Entonces a continuación qué tenemos que hacer si tenemos en esta página. Ya que este es el primer real que sabes, menú, voy a ocultar el segundo en la tarifa 3er 1 pero el segundo. Entonces, por ejemplo, la línea costera es mi segundo menú riel. Pero en mi lista de menús, hay uno a tres. Entonces este es en realidad mi tercer menú. Este mi cuarto menú. De acuerdo, entonces, ¿qué tengo que hacer? Entonces este es mi segundo menú. Entonces ya que no estoy mostrando el 1er 1 no necesito ocultar el 1er 1 Entonces lo que haces es que lo cubrías en etiquetas de estilo. Por lo que sólo es específico de esta página. Todo lo que pongas aquí solo es específico de esta página. Entonces, por ejemplo, puede no cuatro niño va a esconder el Seattle en el muy 4to 1 Ok, entonces a continuación tenemos que esconder el 3er 1 Así costera, y luego hacemos lo mismo para móvil. De acuerdo, Así que las navegaciones móviles llamaron a la navegación móvil para encontrar que todo lo que tenía que hacer era ir aquí, clic derecho aquí, inspeccionar. Y es la navegación móvil. OK, navegación móvil. Entonces ella está mostrando dos veces aquí, Así que vamos a ver qué hice. En realidad, tal vez sólo tenga que refrescarse. Echamos un vistazo rápido. Entonces tercero y cuarto mostrando uno Eso es bueno. Sigues mostrándome acaba de comprobar rápidamente algo aquí que mostrarme? ¿ Cuál es éste? Para que veas cómo este tiene destacada casa. Entonces estoy en la página principal. Por lo que este es un menú Bellevue. Así que pinchemos a casa aquí y veamos adónde me lleva. Por lo que me lleva a la línea de costa. De acuerdo, entonces la línea costera no está siendo escondida por alguna razón. Entonces, veamos si es lo mismo para esta página. Por lo que está sucediendo para todas las páginas. Tendré que echar un vistazo rápido al por qué es eso. Echemos un vistazo rápido, navegación móvil y niño. Entonces déjame hacer click derecho aquí. Inspeccionar. Por lo que no debería estar mostrando ese 2do 1 bonito. Este está configurado para no mostrar en. Esto se explica en esto. El 3er 1 el 2do 1 Así que el 1er 1 fue el correcto. Sí. Por lo que el 1er 1 es correcto. El 2do 1 debería estar oculto, pero no lo es. Entonces esto es tercero. Por lo que debería tener oculto el 2do 1. Está bien. Está bien. Por lo que en el móvil es un poco diferente. La navegación principal automáticamente no se muestra porque no pusimos eso en nuestro archivo de plantilla . Entonces lo que tenemos que hacer es en realidad donde aquí es cuatro y tres. Esto en realidad serían tres. Y, uh, dos por dos por tres. Es uno detrás. Entonces, adelante y di eso. Sólo asegúrate de que eso sea correcto. Eso es correcto. Entonces, ¿ahora quieres copiar eso y pegarlo en todas las páginas? De acuerdo, ahí vamos. Tan pegado aquí. Y luego verás que ese menú desaparece. Entonces ahora sólo hay dos ahí. Perdón. Uno ahí. Ahora hay dos aquí, así que lo voy a pegar aquí otra vez. No voy a pasar por todas las páginas, pero pegarlo y ahí vamos. Siéntate, Teoh. Un menú y un menú aquí, y está resaltado. Entonces eso significa que es el menú correcto. Entonces si un mes f a ke quiere Bellevue en la página de Bellevue, hay que destacar la f A Q. Vale, entonces eso es lo que haces. Y entonces en realidad configuré un principal navegar por la página principal, la portada. Esto lo necesitas absolutamente, um, tan rápido aquí. O puedes tener algo en tu menú que diga inglés, y lleva a la página principal de la página web en inglés. Entonces así es como se vería. De acuerdo, así es como se hace eso. 37. Añadir funciones de chat en vivo: Oigan, chicos. Así que tenía bastantes de ustedes preguntaron cómo implementarían, como un chat en vivo a sus sitios web o algo así, ¿eh? Entonces seguí adelante y miré alrededor y parece que éste podría ser uno de los mejores para usar su llamado talk dot t o.Voy a incluir el enlace en la descripción. Es realmente genial, porque es absolutamente gratis. No hay anuncios. No hay sección como pintura a ella. El modo en que trabajan es si quieres pagar, puedes, y te darán, como sus propios agentes que manejarán tus chats por ti. Y así es como hacen su dinero. Entonces no hay como pre miembros ni nada por el estilo. Entonces todas las características que esperarías de un tipo premium rosa, Así que quiero decir es realmente genial, supongo, hasta usar. Entonces solo voy a configurarlo rápidamente para que veas cómo lo voy a hacer, y puedes como que sigas. Entonces primero tenemos que registrarnos, así que te van a llevar tu correo electrónico. Supongo que esa es otra forma de comercializar a ti. Pero quiero decir, veo el valor en esto. Entonces voy a seguir adelante y hacer esto. Basta con hacer contraseña corta. No estoy seguro de cuánto tiempo puede tardar ese correo en llegar allí. Está bien. Iba a decir contraseña, ver si ya viene. De acuerdo, aquí vamos. Entonces sigamos adelante y confirmemos que nos llevará al tablero de instrumentos. Perfecto. Entonces vamos a ingresar el nombre del sitio en cualquier otro lugar. Entonces voy a ir a mi página web de squarespace. Tomaré esta es la chica que acabo de configurar esto fue una demo rápida para mostrarles chicos así que no tengo nombre de dominio. Esta es una especie de la temporal que da squarespace por ahora. Entonces creo que eso fue ¿Revisaste? No puedes saltarte el Mago, pero no voy a hacerlo, porque solo hay tres pasos. De todos modos, no voy a invitar a nadie más, así que está bien, sólo dejaremos que vaya a continuación. Entonces, para instalar el chap donde, um, widget todo lo que tienes para solo poner este abrigo en cada página ante el cuerpo. De acuerdo, bastante fácil. Entonces copia eso. Pasado a ajustes, código avanzado, inyección inyectable, y lo van a poner en Bueno, podríamos estar voy a tener que poner en el encabezado porque dijeron antes del cuerpo y el pie de página viene generalmente después el cuerpo. No siempre. Entonces Vamos a seguir adelante y golpear, guardar y los dedos cruzados. Ahí vamos. Entonces vamos a charlar con ella. Hablemos y luego en línea. Entonces veamos cómo se ve. Estamos en vivo y listos para empezar. Estamos en vivo listos para chatear con, ya sabes, decir algo comenzó live check y powered by talk T o.Así que eso sí aparece. Pero eso está bien. O sea, no me importa ese pequeño branding de ahí. Entonces hay gustos con esto. Rompe la conversación, consigue archivos de sangre, envíate por correo electrónico la transcripción y a su vez, el sonido se enciende o apaga. Y creo que esto es Papa chat. Sí. Entonces debería volver aquí. Perfecto. Entonces hace todas las cosas geniales que necesitas. Se puede cerrar esa parte. De acuerdo, así que sigamos adelante y veamos cómo realmente charlaríamos con la gente. Um, supongo que te mostraría notificaciones en tu escritorio. Uh, realmente no quiero eso. Vamos a seguir adelante y se hizo. Entonces aquí es donde subirían tus chats. Entonces vamos a ver si en realidad está funcionando um, hola. Mientras estés aquí, obtienes ese pequeño sonido trayendo. Supongo que por eso podrías querer las notificaciones encendidas. Entonces si no tienes este sitio web abierto todo el tiempo, vine aquí Okay, así que esa es un poco Emily. Por lo que aguanta conmigo por una segunda etiqueta de banda. Supongo que hay que aceptar de alguna manera esto, Pero mira aquí, únete para que puedas unirte a nosotros o a cualquiera. Entonces, ¿qué va y únete? No puedo creer eso, señorita eso todo este tiempo. Entonces supongo que por eso quieres la notificación de escritorio. Entonces si, como, digamos que alguien te envía mensajes y no tienes este sitio web abierto, en realidad puedes conseguir un pequeño pop aquí abajo abajo, ¿ verdad? No importa dónde se encuentre. Entonces te pones un poco de pop up viendo que alguien está tratando de chatear contigo para que puedas tener múltiples personas en línea al mismo tiempo. Entonces, um, así que aquí es lo que los invitados que para conseguir dijeron hola. Entonces digo: Oye, Oye, cómo y yo ayudé. A ver. Sí, conseguimos un pequeño ícono aquí, es decir esas notificaciones que tengo que ayudar al gas en su se unió a la conversación. Perfecto. Entonces me estoy probando ahora mismo, así que sí parece estar funcionando. Entonces si tienes, como, cinco personas que su trabajo está justo por delante del chat en vivo, puedes tenerlos aquí. ¿ Y qué? Se hace un chat, pueden recoger el siguiente capítulo verá una lista de todos los que están esperando a ser hablados aquí. Entonces, ¿qué, En realidad son salir del niño y luego intentarlo? Si vuelvo aquí, este chat ya está terminado. Bueno, ¿qué pasó con mi alegría? ¿ Se volvió a subir? Sí lo hace. Está bien, eso es raro. Pero quiero decir, eso está bien. Si tienes justo cómo, diles algo, vuelve a crear, toma una copia. El transcrito imprime en una nota sobre, haz que la gente se sienta en su dirección de correo electrónico aquí y dale un nombre diferente aquí. Entonces todo eso es perfecto. Um, no. Déjame sólo tratar de averiguar cómo nos iríamos. Si quiero salir del chat, debería haber una manera de sobrellevar. Lo dijo. Y sí, OK, ahí vamos. Entonces una vez que hayas terminado, acabas de terminar. Y entonces eso los despeja desde aquí para que puedas esperar a la siguiente persona y aparecer. Sí, característica realmente genial. Definitivamente sugiero que uses esto si es útil para tu sitio web. Sí, gracias. Entonces, ustedes la próxima vez 38. Añadir características: añadiendo la revista: cómo Mensajero de Facebook: Oigan, chicos, Bienvenidos a otro tutorial de squarespace. hoy vamos a estar agregando Facebook messenger a tu página web de Squarespace. Entonces si has estado contemplando agregar un chat en vivo a tu sitio web y no quieres, ya sabes, iniciar sesión en otro software de terceros solo para poder hablar con personas o cualquier sitio web. Facebook Messenger es mucho más fácil porque estoy seguro de que la mayoría de nosotros tenemos Facebook instalado en nuestros teléfonos de todos modos, por lo que puedes responder a la gente prácticamente desde cualquier lugar. Por lo que cuando la gente acuda a tu página web, verán este icono de Facebook. Estará abierto por defecto. Entonces Bueno, estoy firmando soy yo mismo. Pero, um, va, ya sabes, aparece tu página. Entonces lo que sea que tus páginas llamaran en Facebook, y la gente solo puede hablar, así continúa el gas adentro y justo aquí. Así que acabo de hacer una prueba, pero, um, gente podría escribir, ya sabes, todo ese tipo de cosas es igual que el mensajero de Facebook. Um, así que para empezar eso, lo primero que vamos a hacer es ir a Facebook, y luego vas a ir a tu página. Entonces estoy en mi propia página de negocios. Pero tú mucho obviamente ves el tuyo en la parte superior, ¿verdad? Vamos a dar click en ajustes. Entonces una vez que eso haya terminado de cargar por el lado izquierdo Ahora vamos a bajar a la mensajería avanzada . Y si nos desplazamos hacia abajo donde dice dominios listados blancos, Así que aquí mismo, realidad vamos a poner en nuestro sitio web real. Tú lo eres. L así para mí, pondría, ya sabes, marketing atlético dot com. Pero lo que hice fue, um cuando estás en el backend como editar squarespace, vas a ver una u R L Esa no es tu realidad. En realidad tú Earl. Entonces tenemos que añadir que en esto Bueno, quiero decir, no tienes que hacerlo. Es solo que si no lo haces, no verás este ícono mientras estás conectado al back end. Entonces solo las personas que están visitando tu sitio web lo harán, um así que es un poco más difícil de depurar. Por lo que en realidad me gusta añadir este ahí también. Entonces solo copia esto y saca la parte CONFIG, así que yo sería todo esto. Um, está bien si tienes ese corte no es realmente importante. Entonces copiamos que pegamos aquí, así que ya lo tengo pegado aquí mismo. Entonces sin la config al final, y luego también mi principal te Errol está aquí y luego pegas Save. Y luego una vez que sea un éxito seguro, luego por el lado izquierdo, vamos a pasar a la mensajería. Por lo que una vez traseros y mensajería, vamos a desplazarnos hacia abajo y justo aquí donde dice agregar mensajero a tu sitio web. Vamos a dar click en empezar. Ahora, aquí está lo primero que aparece. Se podría leer a través de él. Yo sólo voy a golpear a continuación. Um, entonces eliges tu idioma predeterminado. Para que lo sepas, si tus sitios web no están en inglés, puedes escoger uno de los que están disponibles. Si tu idioma no está disponible, entonces yo diría que escoge lo que sea el segundo más común que la gente habla cuando viene a molestar. Porque, um, hasta que Facebook apoye eso, no hay manera de que podamos agregar más idiomas. Um, entonces tu saludo. Entonces en este momento, por ejemplo, en mi página web, si lo levantas, dice hola, ¿cómo podemos ayudarte? Um, así que es el predeterminado, pero puedes hacer clic en cambiar y puedes cambiar esto a lo que quieras y luego golpear guardar, y vamos a ir al siguiente. Entonces ahora este es color personalizado. Entonces ya ves cómo en mi página web es, um, um, el color naranja para que coincida con mi marca en lugar de este color azul de Facebook. Entonces ahí es donde esto ha cambiado. Por lo que solo hacías clic, ya sabes, escribiendo aquí, ingresa tus valores hex. Entonces digamos que lo quieres. Ah, negro. Siento tanto que 000 Así que eso es negro. Entonces si ese es el color de tu marca, puedes ponerlo, y luego le pegamos a continuación. Y entonces lo que vamos a hacer es solo asegurarnos de que tu dominio esté listado aquí. Es esto debería sacar automáticamente todo de, ah, la otra pantalla. Acabamos de hacerlo en, um, la razón por la que no agregamos el tú Earl aquí es que está un poco molesto en este momento. No sé si se va a arreglar, pero lo que sea que agregues aquí y pegas seguro, en realidad no se guarda eso. Ves, esa es la razón por la que tenemos que ir al teatro. Mensajería Vance. Ah, paso que hicimos antes de esto. Así que solo asegúrate de que tus sitios web aquí, um y esto se debe revisar automáticamente para que no tengas que hacer nada. Son todo lo que tienes que hacer es donde dice copiar código al portapapeles, solo tienes que hacer clic en él y luego asume que haces clic en él. Se copiará, y entonces en realidad se puede golpear, terminar, um, y luego hecho. Entonces ahora vamos a ir a nuestro sitio web squarespace, así que solo estoy usando, como, un sitio demo predeterminado. Por eso se está mostrando así. Entonces vamos a ir por el lado izquierdo, Así que vas a estar en este menú vas a hacer clic en ajustes, inyección avanzada de código. Y lo que vamos a hacer es que vamos a ver algo como esto si tienes código para de otros proyectos, está bien. Al igual que si tienes otros widgets y esas cosas, eso está bien. Pero en realidad vamos a poner el código y el pie de página. Um, la razón de eso es que si lo ponemos en Encabezado, Um, Um, esto se va a cargar antes de que tu sitio web empiece a cargarse. Y no queremos nada para frenar la carga de la página web. Um, preferiríamos la carga del sitio web. Y cuando los sitios web casi se descargan y llega al pie de página, entonces el mensajero puede cargar. Entonces vamos a seguir adelante y poner en el pie de página que pegas. Entonces de nuevo, aquí es donde estaba nuestro color. Esta es nuestra página i d Así que realmente no tienes que mirar esto. Es que, um ya sabes, solo es interesante ver si quieres cambiar las cosas. También puedes cambiarlo aquí también. Entonces si tus colores temáticos ya no podrían ser negros, podrías lograrlo. Ya sabes, um, como, algún tipo de gris como este. Y entonces así logueado saludo es lo que la gente ve si ya están logueados en Facebook. Y esto es lo que la gente ve si no están ya iniciadas sesión en Facebook cuando hacen clic icono de tu mensajero. Um, para que los cambies también. Simplemente lo voy a dejar como está. Um, bien golpeó guardar. Y deberíamos ver el tubo de cambio de color. Sí, el gran color que elegí tan alto, ¿Cómo podemos ayudarte? Y siguen siendo gaseando con logueado como, um y eso es todo. Entonces deberías verlo justo ahí. Aunque vaya,ya sabes, ya sabes, vaya a la página web mientras no esté ingresada. Entonces si lo sabes, voy a la página web. Está bien. Déjame solo configurar la contraseña. Sólo te voy a mostrar cómo se ve el front end solo para que lo veas. Entonces si lo hago protegido por contraseña y luego voy de incógnito Mozart. Squarespace no sabe que estoy ingresado y luego me inicio de sesión. Ahí vas. Deberías ver pops de justo aquí. Entonces en este momento no estoy conectado. Por lo que pide a la gente que inicie sesión con tu cuenta de Facebook. Pero la mayoría de la gente se reúne ya encerrada. Sólo son bienes. Esto es navegación privada. Y ahí lo tienes. Así es como tú, um, ad ah, como Facebook Messenger a página web. 39. Añadir características: carga de archivos en Formularios: Por lo que tienes una página web de squarespace y quieres dejar que las personas suban archivos a tu formulario de contacto . Pero cuando llegas al formulario haces clic en editar, vas a agregar campo extranjero. Miraste a través de todas estas opciones y te das cuenta de que no hay opción de dejar que la gente suba archivos mientras estoy aquí para ayudar. Hay una manera de lograrlo. Es, ah, sistema que fue hecho por sitios web cuadrados, y solo voy a reiterar para que puedas entender mejor cómo conseguirlo actitud sitio web. Entonces lo primero que vamos a hacer es ir a esta página web. Um, dejaré el enlace para esto abajo en la descripción, pero lo primero que vas a hacer es que te vas a apuntar. Ya tengo algún conteo, así que solo voy a iniciar sesión ahora. Esta es una herramienta gratuita, gratuita de usar, pero puedes hacer clic, donar y darles, ya sabes, algunas donaciones para el trabajo que meten en esto. Entonces lo primero que vamos a hacer en este sitio web es que realmente vamos a agregar nuestro sitio web que tengamos permiso para usar esta herramienta. Por lo que el nombre del sitio que podrías poner en lo que quieras. No importa. El sitio te donde l es tu nombre de dominio. Entonces, por ejemplo, tiene que tener los https, Um, o simplemente Http, si no tienes un SSL, está bien, y luego el sitio squarespace tú, Earl, es lo que me gusta llamar el dominio feo. Entonces cuando tú cuando estás conectado al backend del squarespace, eso es lo que veas aquí arriba. Um, solo copia todo antes de la configuración. Entonces vamos a venir aquí y vamos a añadir esto. Por lo que ahora verás que el sitio web aparece a la derecha. Si tienes otro sitio web o, ya sabes, tu diseñador y quieres agregar múltiples webs, puedes hacerlo aquí también, pero yo solo tengo el de ahora. Entonces ahora, tan pronto como esto no lo sea, significa que tenemos permiso para usarlo. Entonces volvamos a nuestra página web aquí, y sí tenemos que añadir un poco de código. Entonces es solo un forro. Solo puedes copiarlo y pegarlo. Eso también estará en la descripción a continuación. Entonces vamos a ajustes. Entonces eso es justo aquí. Configuraciones entonces avanzaron. Entonces vamos a ir a la inyección de código y luego en el encabezado, vamos a simplemente pegar este código. Um, y luego volveremos a pegarle a guardar. Este código estará en la descripción y volverá atrás, Así que eso es en realidad todo lo que hay para ello. Entonces ahora si hago clic en editar en la misma página en la que estaba antes, misma forma. Ahora, si hago clic en agregar campo formulario en la parte superior izquierda, verás que hay una opción para subir archivo. Entonces si hago clic en él, hace esto subir archivos y se siente en un montón de cosas que no tienes que preocuparte por ello todavía. Um, solo sé que está funcionando ahora para que puedas usarlo tal como está. Um, pero voy a hacer que se requiera. Entonces déjame explicarle qué es esto. Entonces el segundo campo es de lo que hablaré primero, porque es más fácil. Entonces esquivar un pack solo significa que la gente puede subir archivos dot jpeg y dot J. Peg a veces se deletrea con una E también, así que voy a dar cuenta de eso también. Dom, P y G. En caso de que sea una imagen PNG si si es una imagen GIF va aquí y también se puede subir el archivo dot txt . Um, así que voy a borrar todo eso solo porque solo quiero que la gente pueda subir clavijas J, por ejemplo. Entonces déjame cubrir ambos sobre lo que estoy haciendo aquí es dot jp e g coma space dot jp g coma coma space . También incluiré los pdf. En realidad, es un pdf. Ahí vamos. Entonces es solo punto y luego tipo de archivo X coma. Siguiente vienen siguiente tipo de bola. No necesitas calmarte. Unos pocos sólo van a tener uno. Y entonces ahora hablaremos de esto. Entonces campo de archivo, solo dinos que sintamos que es en algún lugar donde la gente puede subir archivos. Entonces no te metas con eso. Sólo deja esa parte en paz. Max. El tamaño es lo grande que puede ser el archivo. Por lo que 5120 es de cinco megabytes. Entonces esto no es matar a internos de 5120 kilobytes, y el archivo máximo al que en realidad puedes subir es de 10,000. Um, bueno, 10 megabytes un poco más que esto. Um, pero 10,000 kilobytes son los lados máximos de archivos que jamás puedes lograr. Eso es solo que creo que eso es para que su sitio web no se vuelva , ya sabes, invadida mientras intenta ser mientras intenta subir esos muchos archivos. Entonces, por ejemplo, si mucha gente lo está usando y alguien tratando de subir como un archivo de un gigabyte y también porque a veces el navegador hace tiempo de espera, así que solo ten eso en cuenta si necesitas algo más de 10,000 esta solución no funcionará para ti. Um, la palabra múltiplo aquí solo permite a la gente subir múltiples archivos. Entonces, ya sabes, si tienen tres o cuatro archivos diferentes, pueden volver a subirlo. Todos esos tienen que venir partido hasta 10,000. Um, aún así, ese límite todavía se aplica. Entonces agrega texto. Agrega tus archivos es básicamente como se va a llamar el botón. Entonces en tus archivos con subrayado un espacio para que pudiéramos cambiar esto a, por ejemplo, subir subrayado tus archivos aquí. Entonces esto puede ser más o menos lo que quieras que sea. Asegúrate de usar un guion bajo donde se supone que sean un espacio. Voy a hacer que se requiera bajo almacenamiento. Sólo voy a asegurarme de que vaya a mi dirección de correo electrónico, que es correcta, voy a golpear, aplicar, y voy a golpear. Guardar. Entonces ahora voy a poner, ya sabes, prueba, y luego subir tus archivos. Voy a darle click. Se abrirá esto. Voy a ir a abstracto. Es justo alrededor de ellos imagen que descargado. Incluso subiré dos veces. Ahí vamos. Entonces solo para que pudieras ver que, ya sabes, soporta múltiples archivos, luego pegas a enviar, y el primero ha sido enviado. Entonces si voy a mi bandeja de entrada de correo, verás que acabo de conseguir al capataz. Ahora, si hago clic en él, dice que alguien subió, Ya sabes, dos archivos. Podía verlos a los dos aquí, um, llamado test de prueba. Entonces si hago clic en el 1er 1 me dará un enlace de descarga, y podría descargar el archivo que alguien subió. Entonces si es un pdf, puedo descargarlo a mi escritorio y mirarlo. Um, también puedo volver a esta página web donde primero hicimos su cuenta. Además, sólo para saber, una vez que hayas hecho la cuenta, nunca tendrás que volver aquí de nuevo. A menos que quieras mirar algo en particular. Por ejemplo, si voy a subir cargas. Este es el sitio web. Um, así que el hongo octagón es lo que tengo aquí. Por lo que bajo ese sitio web, la gente subió a archivos. Ambos llegaron el 7 de enero. Um, y este es el nombre del expediente. Entonces lo único que no te dice aquí es quién lo envió? Um, por eso prefiero mirar el correo que recibí en su lugar. Entonces sí, esto son solo archivos. Otra cosa que puedes hacer es si no quieres los archivos aquí, también puedes conectar tu unidad de Google, que es lo que yo haría. Por lo que una vez que conectes tu unidad de Google, en realidad subirá todos los archivos directamente a tu unidad de Google. Para que no tengas que preocuparte por descargar cada archivo. Ya está guardado en, como una carpeta que tienes. Um, Y para eso, solo tienes que hacer clic en este botón y firmar con Google. Y eso también lo he hecho, y sí funciona muy bien. Entonces eso es básicamente es cualquier momento que la gente suba archivos aquí, lo conseguirás aquí mismo. Y también recibirás un correo electrónico al respecto . Prefiero volver a mirar a través del correo solo para que puedas rastrear todos los campos. También sólo Ah, una cosa más. Esto no se limita a solo formularios de contacto. Puedes usarlo en formularios para root de tu sitio web. Entonces, por ejemplo, digamos que tienes una tienda donde alguien que conoces tiene que subir un producto porque vas a personalizar la botella con ah personalizada, tarjeta navideña, por ejemplo. En realidad puedes hacer clic en el producto, ir al formulario y luego crear nuevo formulario. Y entonces podrías, um, ¿subes archivo aquí también, para que como funciona eso sea cuando alguien está en el producto y haga clic, Añadir al carrito. Esto subirán los pop ups tus archivos y tienen que subir archivo antes de que puedan agregar al carrito para que puedas usarlo de esa manera, también. Entonces solo ten en cuenta. No se limita a solo formularios de contacto en sí. Además, digamos que no has iniciado sesión en esta cuenta y haces clic en ésta. Estás bien aquí. Verás este mensaje de error diciendo que no puedes acceder a seguir porque no estás bloqueado , así que asegúrate de que si recibes este correo electrónico en tu teléfono, por ejemplo, por ejemplo, y nunca iniciaste sesión en este sitio web. Simplemente ve a este enlace de nuevo en tu teléfono y luego sigue adelante e inicia sesión. Y una vez que hayas iniciado sesión, si vuelves a ese enlace, te permitirá descargar el archivo esta vez. Por lo que si consigues tu en el equipo que no usas a menudo, solo asegúrate de que estás iniciando sesión en este sitio web y deberías poder acceder a esos archivos. 40. Añadir una barra de progreso de lectura: Oigan, chicos, Bienvenidos de nuevo en el tutorial de hoy, vamos a estar agregando una barra de progreso de lectura a la parte superior de una publicación de bloque. Entonces a medida que la gente se desplaza hacia abajo, se llena solo para que la gente pueda ver visualmente qué tan lejos están en el poste de bloque. Soy En realidad es muy fácil, y el código se vinculará en la siguiente descripción. Entonces lo primero que vamos a hacer es que vamos a llegar al backend de la página web. Vamos a ir a las páginas y luego encontrar tus archivos de bloque. Entonces esa es la que tiene minúsculas. A al lado de ella. Entonces vamos a hacer clic en el icono de engranaje aquí, y fueron buenos avances y luego inyección de código de encabezado de página. Entonces esto es vamos a pegar el código. Es el primer bit del código de todos modos, nuevo, el código está en el enlace de la siguiente descripción, lo vamos a pegar aquí. Entonces vamos a golpear, salvar, y vamos a volver al diseño. Entonces en lugar de páginas, vamos a diseñar esta vez y luego ir a CSS personalizado y de nuevo, Este código también está en el ah, en el bloque post. Entonces vamos a pegar el código aquí y en realidad, eso es todo lo que hay en ello. Um, así que ahora si alguien va a, por ejemplo, blawg, no hay ningún bar en la parte superior. Si van a la página principal, no hay bar en la parte superior. Pero si entran en Blawg y luego dan clic en un poste, entonces aparece la barra. Um, ahora así es como puedes ir a personalizarlo. Entonces si recuerdas el código que agregamos al CSS personalizado por lo que nuevamente diseñó CSS personalizado, aquí es donde lo vas a diseñar. Entonces no tenemos que editar ninguno del otro código solo para codificar que está aquí. Por lo que lo primero que puedes cambiar es que ahora mismo aparece la barra en la parte superior. Si querías al fondo. En cambio, sólo vamos a cambiar donde dice cero superior por cero inferior y luego verás que está a lo largo de la parte inferior aquí. Denuncias desestimadas Esto es más fácil de ver. Ahí vas para que lo veas sentado en la parte inferior. Ahora, um, la otra cosa que puedes hacer es volver arriba. La otra cosa que puedes hacer es ver tener ahora mismo es grano. El trasfondo. Digamos que ese no es tu Brad Color o simplemente no te gusta Gray. Um, puedes entrar aquí y cambiarlo a, como, negro, que es 000 Así que es así. Puedes cambiarlo dedo del pie blanco, pero como tengo fondo blanco, podrás verlo de todos modos, um, así que, así, puedes poner, ya sabes, valores hexagonales o valores RGB, o simplemente escriba, ya sabes, amarillo. Entonces así cambiaste ese color. Ahora, para cambiar el color de relleno naranja, vas a bajar aquí hasta donde está la barra Progreso, y puedes cambiar esto a, digamos, por ejemplo, negro. Entonces se llena de negro. Um, lo otro que tal vez quieras cambiar es lo grande que es esa barra, así que quizá quieras que sea un poco más gruesa. Entonces solo subimos aquí y por ejemplo, ahora mismo son cinco picks que podríamos cambiarlo a tal vez 10. Si haces un cambio ahí, solo asegúrate de que también cambiaste esto a 10. Entonces está en dos lugares, así que altura. Por lo que de esa manera, tanto el bar como el partido de fondo y la niñita de enfermeras pequeño espectáculo así. Personalmente tengo como cinco. Um, podría ser un poco difícil de ver para algunas personas, así que tal vez quieras ir, ya sabes, 10 o 15 o algo así. Um, la otra cosa final que quizá quieras cambiar es que quizá quieras que aparezca este Bart, ya sabes, por todo el sitio web, no solo en los puestos de bloque. Entonces para eso, lo que harías es volver a las páginas, entrar en el ícono del engranaje aquí. Bien avanzado. Después Paige tuvo su inyección de código. Vamos a sacar este código, y luego vamos a volver. Y luego en lugar de ponerlo ahí, vamos a ir a ajustes, inyección avanzada de código y lo publicado en el pie de página aquí, así publicado en el pie de página. Y luego lo otro final que tenemos que hacer es entrar en el diseño CSS personalizado y luego sacar este último bit. Porque lo que hace ese último bit es que lo esconde en las páginas de archivo de bloques de esta página. Entonces si saco esto solo ese último poquito , también aparecerá en esta página. Entonces eso es si lo quieres, ya sabes, en cada página. Entonces, como puedes ver, se está cargando en cada página, justo en la parte superior de ahí, y eso es todo. Entonces, nuevo, um, todo el código va a estar en el enlace en la siguiente descripción. Sólo para que ustedes chicos y copien y peguen y tengan un gran día. Chicos, cuídense. 41. Añadir características: crea un Mega menú: Oigan, chicos, bienvenidos de nuevo a otro tutorial de squarespace. En el tutorial de hoy, vamos a estar hablando de crear un mega menú en squarespace. Por lo que ahora mismo estoy ejecutando la plantilla de salmuera. Pero esto funcionará en cualquiera de las plantillas de la familia Brian. A pesar de que se puede modificar ligeramente el código para trabajar con cualquier plantilla. Y he probado con dos o tres así que sí funciona. Um, así que así es como se vería. Entonces cuando se cierren, se verá así. Y puedes tener múltiples columnas. Tienes dos o uno o cuatro. Ah, mucho que quieras. Y podrías reducir el espaciado y personalizar más o menos exactamente cómo quieres. Um, así que empecemos. De acuerdo, Entonces cómo funciona esto es básicamente vamos a construir primero el menú regular. Entonces, por ejemplo, he llamado a un mega menú, pero puedes llamarlo como quieras. Y luego solo vas a construirlo cómo querías aparecer en el móvil porque obviamente el mega menú no va a funcionar en el móvil solo porque no hay suficiente con en una pantalla móvil. Entonces esto es lo que se va a ver. Entonces, en todos tus enlaces que quieras aquí. Ya sabes, solo puedes ser como un menú regular, un móvil. Entonces si alguien está por ejemplo aquí y hace clic en lo que sea que se llamen los menús, todo se enumerará aquí. Entonces eso es como, ya sabes, escuarespace normal o construirlo como quieras. Y luego lo segundo que vamos a hacer es bajar al pie de página y donde dice cerraduras con patas arriba. Eso es lo que estoy usando. Um, y el código va a reflejar eso, también. Pero puedes usar pie de página, medio o pie de página inferior. Y si eres, um, um, Template no tiene diferentes niveles de pie de página, entonces necesitarás personalizar el código que proporciono. No soy mucho justo lo suficiente para que puedas apuntarlo un poco mejor. Y explique que tal vez más adelante o en los comentarios si ustedes tienen alguna pregunta, Um, Y de nuevo, el código para este tutorial también va a enumerarse en la descripción también. Entonces lo que hice fue ir a los cuadras superiores de pie de página. Entonces, de nuevo, si se desplaza de abajo a medio y borde inferior, eso es abajo justo aquí. Entonces vamos a ir a la cima y luego hacer clic en editar, y tú nos vas a construir exactamente como quieras. Entonces, ya sabes, agregué el rubro tres. Otro rubro tres. Añadí, acabo de escribir, por ejemplo, casa. Entonces podrías hacer, como, ya sabes, si tienes un bloque para, um tal vez quieras bloque de anuncios al final. Entonces en lugar de golpear como si golpeas enter , te dará dos líneas. Entonces si lo hago, por ejemplo, blawg, si no quieres que sean dos líneas basta con mantener pulsado, cambiar y golpear. Entrar. Y vamos a vincular esto a, ya sabes, sólo una cuadra regular. Supongo que sí. Hagámoslo solo. Golpeará, Aplicar. Um, Así que digamos que así es como quería verme. Ya sabes, yo lo tenía. Un botón. Podrías tener cuatro columnas aquí. Simplemente, ya sabes, haz clic aquí, te sales del bloque de texto, lo arrastras hacia la izquierda, y esto le llamará uno, por ejemplo. Um, realmente no iría por sólo porque todo se va a poner, ya sabes, un poco estrecho, así que manténgalo a las cuatro. Si es posible. Lo voy a mantener a las tres. Um, y lo otro es que cuando subes una imagen aquí, simplemente no subas una imagen grande. Lo que hice es cambiar el tamaño de esta imagen para ser, creo, 100 pixeles de altura para que pudieras ir un poco más grande si quieres. Pero a Squarespace no le gustará, hazla la imagen más grande de lo que la tienes. Entonces lo mantuve fuera de cientos, así que siempre va a aparecer 100 en lo más grande. Um, así que ya no he construido, no tengo mucho que hacer ahora. Ahora solo tengo que añadir en el código. Entonces lo que voy a hacer es que voy a Adam el código, y luego te lo explicaré para que puedas cambiar. Se necesita. Entonces para el JavaScript, vamos a pasar a ajustes, inyección avanzada de código, y luego solo voy a copiar el código. Lo tengo bajo pantalla diferente aquí, pero de nuevo, esto se vinculará en la descripción. Lo digo en serio, pegarlo. ¿ Qué? Ah, este abrigo hace es que mueve esto hasta la cima, Pero de nuevo, va a quedar bastante feo hasta que realmente lo peinemos. Entonces, sí, Como puedes ver, se ve muy feo. Entonces volvamos atrás y luego volvamos otra vez. Vamos a ir a diseñar CSS personalizado. Y voy a copiar este código, que otra vez, vas a estar en la descripción hit save. Entonces una vez que haces eso, se ve así. De acuerdo, Ahora, si el tuyo no está funcionando, no te preocupes. Tienes que modificar el código. Entonces lo que vamos a hacer es primero lo primero, vamos a ir al primer código que agregamos. Entonces ajustes, inyección avanzada de código. Voy a echar un vistazo a esto. Entonces la primera línea todo lo que estamos haciendo es, um, agregar los archivos de consulta J para que realmente podamos usar la consulta J en el sitio web y en realidad iban a usar una consulta aquí mismo. Entonces por eso es que Link está ahí. Um, siguiente, Lo que va a hacer es cuando se carguen los sitios web, va a buscar Header. Vamos a todo esto básicamente y va a buscar el cuarto ítem, que es una carpeta. Entonces vamos a buscar el cuarto y luego vamos a escribir bloques de pie de página arriba. Entonces lo que eso hace es que toma bloques de pie de página arriba y lo agrega a la carpeta que ya teníamos aquí. Entonces lo único que podría tener que cambiar. ¿ Este es el número cuatro? A menos que estés en una plantilla diferente a la que podrías tener que cambiar. Ah, pocas de estas clases, dependiendo de qué clase usas tu plantilla. Um, para todos los demás en la familia Brian, sólo hay que cambiar este número. Para mí, el mega menú es el cuarto ítem. Entonces 1234 Así que tengo cuatro aquí. Y solo para mostrarte lo que pasaría si tuvieras como 1/3 ítem, por ejemplo, Así que digamos que tenía mega menú y luego el blawg, Así mega menú va aquí. Si lo pruebo ahora, sólo me muestra mi menú predeterminado. El que hice por aquí. Entonces, por supuesto, no son nuestras páginas. Entonces lo que tenemos que hacer es volver en la configuración avanzada inyección de código, y entonces aquí ya no es el cuarto ítem. No es el tercer punto. Entonces vamos a cambiar esto a tres. Y sólo lo voy a dejar a las tres. Porque de esa manera puedo mostrarles el resto del código. Entonces ahora verás que se ve feo, pero está funcionando. Entonces eso significa que tenemos que modificar el CSS porque eso tiene que ver con el estilo. Entonces ahora vamos a ir a diseñar CSS personalizado y luego aquí mismo si te das cuenta de que dice cuatro otra vez. Pero sí lo trasladamos al tercer puesto. Entonces en el tipo en tres en su lugar. Y luego también por aquí, donde dice ah y niño por cambiar tres y luego aquí y niño por cambiado tres. Y eso debería ser. Y ahí vamos. Por lo que está en el tercer puesto ahora. Entonces ahora para darle estilo a esto déjame explicar cómo funciona este código ahora. Entonces voy a dar click derecho en el menú de menú y solo voy a hacerlo para que siempre se quede ahí Solo para que puedas ver los cambios sin que yo tenga un hover Algunos van a ir demasiado aquí mismo . Donde dice cabecera ahora Vitamina a suspenderé Voy a dar click en hover Oh, y para llegar aquí en realidad solo tienes que hacer clic derecho en mega menú y dar click en Inspeccionar Y luego cuando llegue, solo subes a esta banda justo aquí y verás en lo que hago click sobre span. Destaca en la parte superior aquí en verde, azul y naranja alguien lo Sin embargo aquí luego ve a flotar y voy a encender flotador Así que básicamente eso hace pensar que estoy flotando sobre él incluso cuando no lo estoy. Y cuando refresqué la página, esto pasaría más. Entonces es solo que es solo un mecanismo de prueba. Entonces ahora lo que voy a hacer es así por con así ya ves como la mente ahora va casi llena con, pero hay algo de espacio en los lados, así que eso es porque lo tengo fijado al 90% del ingenio. Por lo que el 90% del tamaño de pantalla para poder ponerlo 200 si quiero, um, incluso podría ponerlo a, ya sabes, más pequeño. Digamos que solo quiero el 60%. Yo podría hacer eso. Entonces 60% ahora, lo otro que tienes que hacer es si quieres moverlo,ya sabes,a ya sabes, izquierda o a la derecha. Eso es justo aquí. Entonces ahora mismo, lo tenía a la izquierda de cinco porque tenía 90. Por lo que quería cinco a la izquierda, cinco a la tarifa. Entonces si hago 60 probablemente querría 20 a la izquierda y 20 a la derecha, así que suma 100 así 20 a la izquierda y eso lo centraría. Ahora verás que está un poco apagado porque los mega menús por aquí, esto funcionaría si eres navegaciones de mega menús en el centro. Pero como el suyo desde el nuestro está del lado derecho aquí, en realidad vamos a dar click a la izquierda, y vamos a moverlo un poco más a la derecha. Entonces tal vez tú vas a hacer 40. Por lo que va a la derecha de la pantalla. Entonces haces eso, um, um, incluso podrías ir un poco menos solo para que haya algo de espacio en el costado, así que 35. Entonces eso es 35% del espacio por aquí. Entonces tenemos 60% de esto que otros cinco por aquí y luego top 60 pixeles. Entonces eso digamos que tienes un tamaño de fuente realmente grande y esto es una especie de correr por encima, Así que déjame mostrarte cómo se ve. Tan top 60. Digamos que tenía a cero. Entonces así es como se vería por defecto, Así que queremos moverlo hacia abajo solo para que esté sentado justo debajo de nuestra opción de menú. Entonces Vamos al top 30. Está bien, tenemos que irnos. Un poco más tendría antes de los 60. Supongo que los años sesenta un buen, buen tamaño. Podríamos ir Tal vez 50 a demasiado bajo un intento must. 65? Sí. También funciona 65. Um, así que vamos a hacer 65. Yo solo estoy así que hay algo de espacio por aquí. Entonces eso es lo que hace este primer bit de código. Básicamente solo está posicionando todo este bloque. Entonces tenemos, Ya sabes, lo estamos arreglando a la parte superior de la pantalla el ancho de los bloques. Um, ¿cuánto espacio hay por encima? Por lo que 65 pixels No te preocupes por ese índice. Eso sólo se utiliza para ocultar, um, el menú. De modo que eso sólo aparece cuando se pasa el cursor. Soy tan nativo de básicamente lo pone atrás. Ya sabes, este verde y este blanco para que nadie pueda verlo. Y entonces lo que vamos a hacer es bajar aquí. Entonces lo que esto hace es si alguien clics lo lamenta, ni siquiera haga clic. Entonces si alguien se cierne así sobre la palabra mega menú, que es el tercer elemento, entonces vamos a tomar el índice set y hacerlo para así antes de que fuera negativo dos. Así estaba detrás de todo. Ahora lo estamos haciendo cuatro. Entonces está frente a todo. Entonces cuando alguien se cierne aquí, trae esto al frente. Y entonces lo que hace disco es que sabes cómo por defecto teníamos, um, nuestro menú regular, que era yo creo que teníamos, como, nuestros cursos y casa o algo ahí dentro que hicimos para móvil. Entonces esto de aquí, menú Megan. Entonces, ¿cursos en nuestras páginas? Sí. Entonces ese menú, básicamente estamos escondiendo eso, porque , quiero decir, no queremos mostrar. Simplemente queremos tu mega menú. Um, entonces la fosa final es, um, deshacerse de la frontera en la parte inferior. Entonces ya ves como si yo era dueño Lo siento, esto sólo se pega porque lo tengo. Tengo este set para flotar así en un pie de página. Si realmente voy a, por ejemplo, medio y pongo en texto y lo hago un enlace. Lo que pasará por defecto es que se pondrá subrayado, correcto, y no quiero que se subraye, sobre todo cuando tengamos arriba en el mega menú. Y lo otro que estoy haciendo es que veas cómo es, muy abarrotado. Yo quiero espaciarlo más. Por eso estoy cambiando la noche de línea. Entonces altura de línea de dos en lugar de, um probablemente era uno o algo antes. Entonces si quieres aún más espacio, déjame volver a pegar esto. Entonces si quieres aún más espacio, haces como 2.5 y verás crecer el espaciado entre estos. Te vas, ya sabes, tres. Para que puedas jugar con eso. Encuentra el número que funcione para ti. Um, y esto acaba de quitar esa frontera inferior que tenía antes, que es la otra línea. Um, entonces lo último que probablemente quieras cambiar es el color. Por lo que ahora mismo lo tengo set es gris. Um, que en realidad sólo vas a estilos de sitio. Entonces diseña y luego los estilos de sitio ejecutando un tipo en carpeta, así color de carpeta. Lo vamos a tener negro. Si quieres cambiar el color del texto, tienes que ir al contenido del pie de página. Y eso enlaza y puedes cambiarlo a como blanco. Y luego en el móvil. Perdón. En tableta otra vez. Se ve así. Entonces esto es porque tenemos el 60% con pero quizá quieras aumentarlo. Tendrás que usar una consulta de medios si querías ser flaco en el escritorio y luego grande en el móvil. Entonces vamos a repasar en Tablet Terry. Entonces vámonos. Cubramos esto. Y así donde tenía 60% con, podría querer hacerlo, por ejemplo 70. Y entonces también tengo que moverlo a la izquierda porque ahora que 70 es probablemente alrededor de 15 a la izquierda . Um, sí. Podemos incluso ir a E. T. Ahí vamos. Sólo para que eso esté en la parte superior. Por lo que 80 más cinco a un costado y 15 a la izquierda, tal vez un tirón Dejó un poco más así 10 a la izquierda. Y entonces ahora es algo así como centrado. Por lo que 80 más 10 en la mano izquierda en los derechos 100. Entonces está exactamente centrado, Um, y en el escritorio se ve así. Y luego si yo sin prisas, se va a ir, y sólo voy a echar un vistazo rápido a cómo se ve en el móvil. Entonces en el móvil, debería volver a sí, menú Megan, y luego es solo tu menú regular. Eso es sólo otra vez, porque no hay lugar para ningún mega hombre usado en el móvil. Así que asegúrate de construir esa navegación inicial correctamente. Entonces otra vez, eso está en páginas. Entonces aquí, solo asegúrate de que esto esté construido correctamente. Por lo que en el móvil, ellos saben que no tienen una experiencia rota. Todavía pueden acceder a todas las páginas. Y lo último es, si alguna vez quieres hacer cambios a ese menú, um, lo que tienes que hacer es ir a ajustes, inyección avanzada de código y sacar esto. Puedes dejar las otras partes en. La otra cosa que puedes hacer se acaba de comentar, que es así. Entonces es, um, menos que signo de exclamación, guión, guión y luego guión, guión mayor que en la parte inferior. Y eso comentarios que tampoco hace nada. Y entonces de esa manera tienes el pie en la parte inferior otra vez. Después solo tienes que hacer clic en editar, realizar los cambios que quieras. Entonces digamos, por ejemplo, ya no quiero esta imagen. ¿ Se ahorrará eso? Voy a ser poco común esto otra vez. Entonces ahora se va a ejecutar de nuevo, así que el código funcionará. Entonces ahora si voy a la cima ahí vas, la imagen se ha ido y sí, así es como haces hacer menú en squarespace Guys, que tengas un gran día.