Transcripciones
1. Introducción: Entonces hay otros
tutoriales de Squarespace por ahí. Pero quería
crear uno que estuviera al día con los últimos cambios que
el squarespace ha puesto en marcha. Y uno que
te ayude primero a decidir si Squarespace es la plataforma
adecuada para ti. Entonces veremos algunos de los
pros y los contras de usarlo. Y luego le permite
comenzar a construir rápidamente y corta muchas de las opciones avanzadas
innecesarias. No vamos a repasar
cada menú en detalle, pero voy a mostrarte
la forma más rápida posible de
empezar a diseñar algo que luzca pulido y profesional. Squarespace es una
opción fantástica para aquellos que quieran sumergirse en el diseño web
profesional. Menos la larga curva
de aprendizaje de opciones como WordPress, que también usé por cierto, si eres genial
diseñando y creando, pero no te gusta la idea
de codificar o desarrollar, entonces esta es una gran opción. Realmente puedes crear resultados
muy impresionantes con una mínima inversión de tiempo. Hola, soy Jason Miller, diseñador gráfico y web radicado en Londres. Tengo más de diez
años de experiencia, y he pasado más de
siete años trabajando con Squarespace y
WordPress como plataformas. Por lo que esta clase se
divide en tres partes. En primer lugar, proporcionaré una visión general
completa y responderé algunas preguntas
frecuentes, que estoy seguro que tienen dos. ¿Qué es Squarespace? ¿Cuáles son los pros y los
contras de usarlo? ¿Cuánto tiempo tardará en
familiarizarse lo suficiente como para
construir sitios web? Y cuánto control
o libertad te da
Squarespace
sobre tu diseño. Después de la primera sección, deberíamos estar en una
buena posición para decidir si esto
es para ti o no. En la segunda sección, te
daré un tutorial de
racionalización refinada sobre el diseño usando Squarespace. Esta sección está realmente diseñada
para orientarte y hacerte diseñar y crear usando la plataforma lo antes
posible para obtener los mejores resultados, te
recomendaría seguir
adelante y crear la tuya propia
sitio web de muestra. medida que te guíe a través de esto, estaré creando mi propio
sitio web de muestra para evoke brewery, marca
ficticia que creé en
mi última clase de Skillshare. Por último, tenemos una comprensión
de cómo
funciona Squarespace y ahora hemos creado
su propio sitio web de muestra. Te voy a compartir algunos consejos, trucos y mejores prácticas. Pero he recogido en durante mi tiempo creando sitios web
con Squarespace. Y eso es todo. El proyecto de la clase es
seguir y crear tu propio sitio web de muestra usando una cuenta de
prueba gratuita de Squarespace. Entonces estoy listo para esto. Cuando estés listo,
comencemos.
2. ¿Es espacio para mí Squarespace? Preguntas frecuentes: Entonces preguntas frecuentes, una buena para empezar es,
bueno, ¿qué es Squarespace? Squarespace es una
plataforma al igual que las aplicaciones de redes
sociales como
Facebook o Instagram, te
permiten presentar
y compartir contenido. Squarespace es una plataforma web, por lo que te permite crear, organizar, diseñar y luego
compartir con el público. El contenido de un sitio web de una plataforma web
incluye WordPress, que es quizás el
más utilizado, Wix, Webflow, y otros. Así que ningún diseño web en sí mismo
no es demasiado avanzado. Quizás al principio,
hay que tener un conocimiento de servidores hosting, codificación. Entonces hubo una curva de aprendizaje bastante
empinada. Pero en estos días,
muchos de los artículos que diseñamos para uso digital, terminan
mostrándose en un sitio web. De todos modos, la diferencia entre el diseño
web y el diseño, digamos que las páginas estáticas en una aplicación
suelen ser
el software, la interfaz que estás usando. Entonces SquareSpace para todos los efectos y
propósitos, actúa como un
AP, una interfaz. Una plataforma es un
término técnico en el que inicias sesión, luego usas para diseñar
y crear tus diseños. Puede ser tan simple como eso, pero tiene la capacidad de
ir mucho más profundo y ofrecer algunas funciones avanzadas si necesitas
aprovecharlas. Yo diría que en estos días si
eres diseñador gráfico, la
pena ramificarte
hacia el diseño web. Y Squarespace es
un gran lugar para comenzar porque
no es demasiado avanzado. Puedes usar los
principios que
usarías en el diseño estático e inmediatamente
traducirlos en la creación de
hermosos sitios web. La mayoría, si no todos tus clientes van
a necesitar un sitio web en
algún momento y les
encantará como su diseñador preferido. Tú también eres capaz de
encargarte de esto. Entonces no toma
mucho tiempo en absoluto. Yo diría, para familiarizarse
con todas las opciones, todas las funciones avanzadas lo harán que puedan llevar semanas de uso. Pero para crear algo
que sea profesional, que sea apto para un propósito, definitivamente
podrías apuntar
a hacerlo dentro de un día, si no en unos pocos días. Squarespace realmente
comercializa su plataforma como una herramienta que es tan simple que los dueños de
negocios individuales pueden usarla y crear
algo profesional. Ahora eso podría ser cierto
si alguien simplemente está intercambiando contenido y no
haciendo ningún otro cambio. Pero creo que para realmente
entenderlo y entender las
mejores prácticas, se necesita un poco más de
inversión de tiempo que eso. Dicho todo esto, mi objetivo es que para cuando
termines esta clase corta, estés en condiciones de
crear algo
que sea profesional. Comprenderás
lo esencial que necesitas crear en nombre
del cliente
y te sentirás muy familiarizado con Squarespace
en general. Así que para los resultados puede parecer
muy profesional de hecho. De hecho, si
miraras mi portafolio, creo que tendrías dificultades para saber qué sitios web se crearon
usando qué plataforma. No creo que sea
obvio qué sitios se han creado usando WordPress y qué sitios usando Squarespace. Dicho esto, somos increíbles. Las funciones avanzadas
sobre una plataforma como las ofertas de WordPress en squarespace no
están realmente diseñadas para atender a. Entonces, por ejemplo si tuvieras un cliente que era un agente de bienes raíces y
necesitabas crear esencialmente una base de datos
que enumerara diferentes propiedades
y sirviera resultados, responder a las consultas de búsqueda entonces WordPress
sería tu plataforma. Pero para la gran mayoría de las empresas que quieren que un sitio web realmente muestre sus
marcas para brindar información, Squarespace es una
excelente opción. Entonces hay algunas limitaciones
y pasaremos por algunas de las de la siguiente lección
con pros y contras. Pero una de las
diferencias clave es que
WordPress es software de
código abierto, por
lo que da la bienvenida a las contribuciones de una comunidad más grande. Y mucha gente ha creado varios complementos
que atornillas en Wordpress y que te
permite resolver problemas
específicos de una manera personalizada, Squarespace sí te
permite agregar unos pocos terceros modificaciones de fiesta, pero no hay nada cerca de
tantas como WordPress tiene para ofrecer si echas un vistazo a las plantillas de muestra,
pero las ofertas de espacio cuadrado, generalmente
puedes decir con
bastante rapidez si tiene más características que estás buscando o si hay
algo más a medida, pero no podrá cubrir. Squarespace sí permite una gama muy amplia
de personalización, pero no te permite personalizar más allá de las
características para el preset. Entonces, si bien WordPress está
completamente a medida, literalmente
te burlarías de
algo en Photoshop y luego te vas, lo
construyes y lo crearías. Squarespace tiene
parámetros y opciones predefinidos, que están muy probados
y funcionan muy bien, lo cual es una gran noticia para las
pequeñas empresas que no tienen presupuesto para un diseño
completamente a medida. Con todo,
compararía Squarespace con comprar un traje fuera de la estantería, pero luego tenerlo a medida, personalizado para que se ajuste a sus necesidades. Donde WordPress, bueno, es
lo mismo elegir las
telas y materiales individuales, idear un estilo
desde cero y tener un traje
completamente hecho a medida. Muy a menudo el resultado final
es muy similar, pero el proceso es soldaduras separadas. Ojalá eso responda a
algunas de sus preguntas. En la siguiente lección, veremos algunos pros y
contras
específicos para ayudarte a decidir
si esto es para ti.
3. Pros y desventajas de Squarespace: En esta lección,
vamos a revisar rápidamente algunos
de
los pros y los contras de usar Squarespace en comparación con otras plataformas como
quizás Wix, WordPress. Ahora para el primer pro es para
squarespace es fácil, me refiero en serio fácil de usar. Ahora Squarespace
en realidad comercializó esto como una herramienta para que las personas pudieran usar para construir su propio sitio web ellos mismos sin experiencia
previa. Ahora, a partir de los comentarios que he
recibido de varios clientes, es un poco complicado
para la gente
saltar y usarse para el dueño promedio de
su negocio, a
menos que tengan
bastante tiempo para aprender cómo
usar con software. Pero para los profesionales creativos, es realmente simple de
usar y vale la pena V inversión inicial de tiempo para aprender
a usarlo, cómo hacerlo bien. Para el próximo Pro, es rápido. Tan rápido tiende a ir de
la mano con fácil. Pero realmente
hay muchas herramientas, plantillas y atajos
en Squarespace, todas diseñadas para ayudarte a armar algo que
se vea profesional, pero lo más rápido posible. Ahora, de nuevo, hemos
tenido algunos esfuerzos. he visto
aparecer en YouTube. Estoy afirmando que alguien
podría construir un sitio web en 1 h. Quizás si eso es posible. No creo que se pueda construir un sitio web muy profesional y muy completo
tan rápido. Pero ciertamente en un día. Eso es posible,
Depende, supongo, lo alto que estés poniendo el listón, pero es rápido, muy rápido. Ahora bien, este es
uno grande para la mayoría de la gente. No hay servidores que administrar. Ahora, eso viene con
algunas desventajas también, que consideraremos más adelante. Pero significa que Squarespace en realidad
no te
da acceso
al sitio web principal. Todo queda en
sus manos para administrar, hacer copias de seguridad y solucionar problemas. Por lo que no es necesario tener ningún conocimiento de la
administración de servidores. No tiene que poner en marcha ninguna de
nuestras infraestructuras. Simplemente puedes crear una cuenta de
Squarespace y comenzar a crear sitios web y luego pasarlos a los clientes
cuando hayas terminado. Entonces, potencialmente, esto
ahorra un dolor de cabeza masivo. Y las plantillas, squarespace
tienen algunas plantillas fantásticas. En mi opinión, son
mucho mejores que las plantillas que te
da una plataforma como Wix. Algunas de las mejores plantillas
para las que me he encontrado. Ahora bien, aunque sí los retoque
y los personalice, son lo suficientemente buenos como para que
los fundamentos del aire, pero realmente te da un gran punto de partida cuando estás creando un nuevo sitio web. Entonces las plantillas,
especialmente si estás
comenzando una excelente manera de
aprender y
ponerte al día con lo que funciona y no funciona
por ingeniería inversa. Algunos de los fantásticos
inicios que te damos. Entonces ahora llegamos a
los contras y hay algunas limitaciones
de diseño
para Squarespace, por ejemplo, con los encabezados para navegación para una gran
cantidad de opciones. Pero si quieres ir más allá las opciones que
se te dan, es muy difícil y potencialmente peligroso
personalizarlo. Si personalizas
más allá de la limitación establecida, squarespace te ha dado. Bueno, significa que cuando se
implementen futuras actualizaciones, algo podría potencialmente
romperse en tu sitio web. Entonces, si estás satisfecho con la opción que Squarespace te
brinda, es fantástica y es un
número creciente y creciente de opciones. Pero si quieres hacer
algo realmente a medida o si
trabajas para clientes. Pero sabes una muy
particular y meticulosa y no aceptaré aquí ni
quizá 20 o 30 opciones, pero no puedo ir más allá de eso. Entonces sí, es posible que te
encuentres con algunos temas. Yo diría que para la gran
mayoría de los clientes, las opciones que te
dan son todas las mejores prácticas. ¿Qué funciona? Lo suficientemente bueno como para que
siempre haya algo para cualquiera. Ahora bien, esta es la con, asociada a no
poder alojar para sitio web
en su propio servidor. Entonces para algunos de nosotros, si tienes varios sitios web
de WordPress, aunque sí tienes
un gran dolor de cabeza, tienes que ofrecer
ayuda y soporte. que encargarte de las
copias de seguridad y así sucesivamente. Usted cobra a sus
clientes por ese servicio. Puede formar parte de
tus ingresos residuales. Si estás usando
Squarespace mientras
podrías alojarlo en su
nombre y hacer una maqueta. Yo no sugeriría hacer eso
porque cualquiera podría buscar en Google lo que cuesta tener un
plan con Squarespace. Y tal vez no estén contentos si estás tratando de
cobrar además de eso. Entonces, en términos generales,
le entregas un sitio web al cliente
al final y le dejas que
tengan directamente un
enlace de cuenta de Squarespace a su sitio web. Eso significa Squarespace
y ganar dinero con su plan de alojamiento
anual. Pero no lo eres. Entonces esta es otra con, una falta
de ingresos por hacer cambios. Ahora para mí,
realmente no quiero
hacer una gran parte de mis ingresos con solo hacer
pequeños cambios y retoques, pero no son de naturaleza creativa. Es simplemente que en el
sitio como WordPress, plataforma como
WordPress o cliente no se siente cómodo para hacer
ciertos cambios ellos mismos, o para actualizar o implementar cambios que
provienen de nuevos plug-ins . Nada de eso tiene que
pasar en Squarespace. Una vez que le
entregas esto a un cliente, es muy fácil para ellos
cambiarse y actualizarse. Pero muy probablemente
para la mayoría de las cosas, no
van a volver a ti para ajustar esto o arreglar eso. Ellos van a poder hacerlo. Entonces eso es potencialmente
un profesional para tu cliente, pero podría ser una
trampa si confías en obtener ingresos por
hacer cambios especializados. Squarespace es una plataforma
donde tus clientes realmente
podrán hacer la mayoría de
esos cambios ellos mismos. Dicho esto, odio cuando
me llegan correos electrónicos pidiéndome que haga cambios técnicos o actualizaciones a un sitio web
que estoy aquí para crear. Eso es realmente lo que me gusta
hacer mi dinero. Entonces para mí, esto es una buena noticia, pero sé que para algunos de ustedes, esto podría ser una trampa
y nuestra última con, y esto no es un
rompedor de trato de ninguna manera. Pero si bien el SEO
en Squarespace
lo es, es decente, yo
diría que es bueno. No es tan bueno como WordPress. Entonces, si estás presionando por términos de
búsqueda
realmente competitivos en Google, notarías que un sitio web de
WordPress tiene, tiene una ventaja. No vas a
notar esa diferencia o esa ventaja a menos
que
estés realmente,
realmente optimizando y
pasando por palabras clave extremadamente
competitivas. Pero aun así, es un factor
a considerar es que el SEO está bien, pero no es sobresaliente. Entonces, ojalá esa
visión honesta de algunos de los pros y los contras te informe para tomar una decisión sobre si esta es una plataforma que te
gustaría usar o no. Yo uso tanto Squarespace,
WordPress. He tenido un intento rápido
con algunos sitios en Wix y Squarespace es una
de mis plataformas favoritas. Utilizo WordPress para trabajos
más personalizados o a veces
más exigentes. Y pero Squarespace para muchos de mis clientes ha sido
absolutamente fantástico. Si estás convencido, únete a
mí en la siguiente lección y de hecho comenzaremos a
crear usando Squarespace.
4. Creemos - elige un punto de partida: Para comenzar, lo
primero que tenemos que
hacer es visitar squarespace.com. Ahora lo he hecho
sin haber iniciado sesión. Y esta es la
pantalla que verás. Estás buscando v
se pone en marcha por ellos. Pin la parte superior derecha aquí. Voy a guiarte a
través de esto como si no hubiera creado otras cuentas de
Squarespace. De hecho tengo una pantalla
diferente. Yo visitaría para hacer esto
porque como pueden ver, he creado bastantes sitios web de
squarespace. De hecho, no
todos caben en esta página. Hay 32 de ellos. Entonces voy a caminar
por esto contigo. Saltaré a mi cuenta. Pero verás una página como
esta y haz clic para empezar. Hay un, supongo que
solías llamar a esto un mago que
te guía a través de los pasos. Si quisieras,
podrías saltarte este asistente, que solo está
diseñado para mostrarte plantillas e ideas que
sean relevantes para ti. Así que en realidad voy a
hacer clic en saltar, saltar, saltar. Y esta es la página a la
que quiero llegar aquí, donde solo puedo buscar y elegir qué plantillas me interesan. Entonces voy a cerrar esto. Y para mis propósitos,
voy a crearlo. Entonces esto está vinculado a mi cuenta. Como estoy dando esta clase, puedo volver a iniciar sesión y puedo
llevarte a través de las etapas. Entonces aquí estamos en esta pantalla. Ten en cuenta que aún no
tendrás una cuenta de Squarespace, por lo que tendrás que crear una una una vez que hayas
seleccionado tu plantilla. Ahora sobre las plantillas
y esta es una de las mejores características
de Squarespace. Puedes encontrar algo
que se acerque lo más posible
a lo que buscas crear. Y luego, en lugar de intentar imaginarlo y crear
todo desde cero, puedes comenzar por ajustar y personalizar e
intercambiar tu contenido en. Ahora como diseñador profesional, probablemente
querrás cambiar
mucho más de una nueva hoja. También jugarás
con el diseño. No es probable que aceptes una plantilla exactamente como
viene de Squarespace. Y si estás haciendo
esto profesionalmente, eso es lo que otros te
van a contratar que realmente pongas tu
propia versión creativa en ello. Pero este es un gran
lugar para comenzar y puedes ver que
hay una amplia gama de plantillas disponibles. Entonces, si quisieras, puedes explorar las
distintas categorías. Obviamente estoy creando
mi sitio web de muestra para la cervecería evoca ficticia. Para que pudiera mirar en los alimentos, ver qué plantillas la gente ha etiquetado bajo esa categoría. Quizás también podría
mirar en los restaurantes. Podría tener por tipo de aspecto
y sensación que voy por. Pero se entiende la idea. Hay muchas y muchas
plantillas para elegir. Y si estás realmente seguro de la plantilla
que quieres usar, clic en comenzar con,
pero
te recomendaría
hacer clic
primero en la vista previa en lugar de
juzgarla por la miniatura. Y haz clic en la vista previa
y echa un vistazo, desplázate, mira lo que
piensas de una plantilla. Ahora, si quisieras
, podrías hacer clic, empezar sin
plantilla y
simplemente empezar desde cero
y simplemente empezar desde cero crear un sitio web a
partir de páginas en blanco. Esa es una opción. Pero creo que la
ingeniería inversa de algunas de estas plantillas realmente te
va a ayudar inicialmente a entender lo que se puede hacer. Y es mucho más fácil de modificar que crear desde cero cuando aún no
estás familiarizado
con Squarespace. Entonces tal vez pausar el video aquí. Si estás siguiendo junto
con tu propio proyecto, un buen vistazo a
las plantillas y elige una que creas que es
relevante para ti. Um, tú por supuesto, no tienes
que escoger la misma plantilla que yo. Ahora vale la pena decir que
esto no es como plataformas como WordPress, donde la plantilla que eliges, significa que tienes
ciertas limitaciones. En Squarespace. La plantilla es solo
un punto de partida. Entonces podría, si
pasara por los ajustes de estilo
e hiciera cambios, podría convertir esta
plantilla en el centro aquí en esta plantilla aquí podría hacer que se
vea exactamente igual. No hay nada
que me vaya a
encontrar que a causa
de una plantilla, no
voy a poder hacer. Entonces. Aún tienes acceso completo, personaliza todos los ajustes. Entonces, ¿qué buscas
en las plantillas de inicio? Bueno, no tiene que ser
necesariamente fuentes. Esos son muy fáciles de cambiar. Los colores son fáciles de cambiar. A veces busco
solo para maquetación general, el aspecto y la sensación que han
usado qué plantilla me
va a dar
menos trabajo por hacer, y qué plantilla a
medida que me desplace, ¿Veo diseños, pero creo que esto
funcionaría bien para mi marca. Este se veía bien, pero a medida que me desplazaba hacia abajo, no
estoy seguro
de este tipo de encabezamientos offset,
las imágenes de
esos Denver se fueron. No estoy seguro de eso. Esa es realmente la opción
adecuada para mí. Bien. Aquí hay uno. Me gusta bastante no estoy seguro de
cómo se pronuncia esto. Kolíma tal vez. Pero definitivamente voy a
tener un tema bastante oscuro. Creo que es un fondo
negro mate. Me gusta bastante el texto grande. Al igual que algunas de las ideas de diseño, un montón de imágenes de sangrado completo. Entonces sí, para mí, creo que este sería
un buen punto de partida. Por lo tanto, puede hacer clic para ver un sitio de demostración completo
aquí si lo desea, pero se abriría en una nueva
pestaña si quisiera
comparar algunos uno al lado del otro.
Pero estoy feliz. Entonces voy a hacer clic
Empezar con este diseño. Haz lo mismo con tu plantilla
preferida, y luego únete a mí
en este siguiente paso. Entonces squarespace lo hará ahora, para mí, es agregar
esto a mi cuenta. Y enseguida llego a una página donde puedo rellenar detalles específicos
de este sitio web. Para ti, solo
tendrías que crear una cuenta de Squarespace. Entonces, las cosas habituales que
esperarías, ingresa una dirección de correo electrónico, elige una contraseña,
cosas así. Entonces una vez que llegues a esta página, voy a nombrar el
sitio evocan cervecería. Haz lo mismo, da v, cita el título relevante
para tu marca. Y estas páginas solo nos están dejando saber
qué podemos hacer ahora con un
Squarespace nuevo y mejorado y dónde estamos. Así que vamos a orientarte con lo que tenemos
frente a nosotros aquí. La barra lateral a la izquierda. Esta es esencialmente
tu forma de navegar por el back-end de Squarespace. Entonces el front-end,
lo que
ve el visitante una vez que estamos sitio se pone en marcha será todo a
la derecha de esa barra lateral, que puedo pop-up para ir a pantalla
completa haciendo clic en ese
botón en la parte superior derecha. Entonces este es el front-end que verían
tus visitantes. Esta barra lateral nos ayuda a
navegar en V backend. En squarespace te da
una cierta cantidad de tiempo, que ha variado a lo largo de los años. Normalmente son alrededor de dos meses porque tengo una cuenta Pro,
una cuenta circular, me
sale un poco más, así que en realidad tengo 182 días, lo cual es bastante generoso. Siempre puedes
contactarlos si estás trabajando en nombre de un cliente y
necesitas un poco más de tiempo, pero esa es la cantidad de
tiempo que puedes construir un sitio sin necesidad de ningún plan
pago. ¿Dónde existe este sitio web? Por el momento? Si bien puedes hacer aparecer un nombre de dominio, nombre de
dominio que hayas
comprado ya sea Squarespace o en otro lugar. Se puede hacer estallar eso en
su lugar con bastante facilidad. Pero por el momento, Squarespace asigna un nombre principal de dominio
temporal. Por lo que vale la pena
marcar esta página. Esto es lo que volverás a visitar para poder acceder
con back-end. Y esto se puede personalizar. me ha dado una cadena aleatoria Aquí me ha dado una cadena aleatoria
de palabras,
cocodrilo Gato siete. Entonces si voy a
Ajustes y dominios, lo puedes ver
además de tener la opción de comprar o conectar. Un dominio adecuado, Squarespace nos da
subdominios de forma gratuita. que significa que mientras
estamos desarrollando esto, si hago clic aquí en este nombre de dominio asignado
aleatoriamente, podría elegir uno que sea más relevante para la marca, lo cual creo que es un buen toque
profesional. Así que voy a usar, asumiendo que es gratis, evocar cervecería y hacer clic en Cambiar nombre. Y así, verás que eso ha cambiado. Y esto es ahora vía vestido que visito para acceder al
backend de un sitio web. Hablaremos, aunque
vamos a volver a esto cuando veamos lo que haces para lanzar el sitio web, veremos la visibilidad del
sitio y los permisos que Squarespace
configura por defecto. Entonces, si vas a Configuración, Disponibilidad
del sitio, puedes ver por defecto esto
está configurado en privado. Entonces solo a ti mismo o
a alguien a quien le proporciones ese enlace específico. Y no necesitas v, los
bits al final aquí, es solo fess up a.com. Si le proporcionas a alguien ese enlace y no está conectado, no verá nada. Entonces podrías cambiar eso. Puede seleccionar una opción protegida por
contraseña y seleccionar una contraseña. De esa manera si envías a tus clientes potenciales o a alguien que quisieras
ver de un sitio web. Si los envías a través de
URL en la parte superior aquí, junto con una contraseña has
seleccionado Bell en realidad
podrás guardar un
sitio web ahora mismo. Cualquier cambio que realices
se reflejará en tiempo real. Entonces ese es un toque bastante
agradable a la
hora de trabajar con
clientes y enviarlos. A lo mejor les envías actualizaciones
de tu progreso o
envías las etapas del sitio web para
obtener algunos comentarios de ellos. Bastante agradable poder
hacer eso y tener una URL agradable de aspecto profesional. Entonces esta es una de las cosas que debo decir que me
encantan de Squarespace. Si estás trabajando con
WordPress u otras plataformas, puede
haber bastante trabajo de
administración detrás de obtener
un nombre de dominio en su lugar, configurar algo en el servidor, solo prepararte
para comenzar diseñando. Con Squarespace. Literalmente puedes hacerlo
con solo unos pocos clics. Entonces aquí estamos. Hemos seleccionado nuestra plantilla. Tenemos un dominio temporal y estamos listos para comenzar a
personalizar y diseñar. Entonces lo haremos juntos
en la siguiente lección.
5. Creemos - personalizar la plantilla: En una lección anterior, preparamos nuestro punto de partida y ahora tenemos esto en su lugar. Esta es nuestra plantilla elegida, algo de contenido de muestra, y estamos listos para
comenzar a personalizar. Entonces lo que sugeriría, de nuevo, este curso no es
para mostrarte lo que hace
cada menú y
botón de una opción, es guiarte a través un proceso simplificado para
simplemente conseguir crear y aprender lo esencial para
crear algo que se vea profesional lo más
rápido posible. Por lo que recomiendo comenzar
desde la página principal. Y si quieres consultar
qué página estás
viendo actualmente en la barra lateral de V
Squarespace. Si haces clic en Páginas, verás gris en
mayúsculas junto a cada una
de nuestras secciones. Tiene la palabra demo. Eso es para hacerte saber que esto es solo contenido de demostración
que estás usando. Actualmente estamos viendo la página
de inicio que
se destaca. Y
a la hora de hacer estilo, creo que esta puede ser
una página bastante buena para
mirar porque tiene una
mezcla de contenido. Entonces todo esto va a tener un poco más de sentido a
medida que nos sumergimos. En lo personal, empiezo
con el encabezado. Entonces ingresas al modo de edición. En primer lugar. Y tienes un pequeño
botón en la parte superior izquierda. Butt te lleva al modo de
edición o puedes hacer doble clic
en cualquier parte de la página. Entonces voy a hacer clic en el
botón para entrar en modo de edición. Y ves esto ahora carga la página menos nuestra barra lateral de
Squarespace. Y a medida que pasas el cursor sobre
diferentes elementos, puedes ver los
bloques que componen estos elementos en Squarespace. También se
dividen en secciones. Y tienes un poco de control sobre los ajustes
para cada sección, para cada bloque y
para cada página entera. Entonces entraremos en un
poco más de detalle en eso una vez que empecemos a
personalizar el contenido. Pero comencemos con
solo mirar el estilo y mantener este
contenido de demostración en su lugar por ahora. Entonces el encabezado, si vuelo el cursor hacia
arriba hacia el encabezado del sitio, y mientras esté en modo de edición, verá que aparece esta opción Editar
encabezado del sitio. Entonces voy a hacer clic en eso. Y como dije, nosotros la
plantilla que elijas. No bloquea opciones. Simplemente te da
ciertas configuraciones para comenzar con contenido de
demostración incierto. Así podría lograr
cualquier tipo de encabezado que me guste simplemente alterando los
ajustes que tenemos aquí. Entonces, en el título y el logotipo del sitio, tenemos la opción de
agregar nuestro propio logotipo personalizado, lo cual definitivamente estaré haciendo. Pero primero sólo
voy a volver. Y voy a
buscar usando esta pestaña aquí en la vista de escritorio. Quiero seleccionar un diseño con el que estoy contento, el encabezado. Así que voy a
hacer clic en Encabezado Layout. Y me gustaría bastante
ver cómo se ven las cosas. Creo que tenemos nuestro
logo en el centro. Esa cajita representa
tus vínculos sociales. Y entonces la navegación
estaría por la izquierda. Yo podría cambiar eso. Es bastante fácil cambiar
eso revertido en el futuro. Voy a hacer clic en eso
por ahora y volver atrás. Algo más que me gustaría hacer. No quiero que esto
sea transparente. Me gustaría bastante
poder ver un
color sólido detrás del encabezado. Entonces para eso,
voy a volver
a estos ajustes
aplicados globalmente, que es esta pequeña
pestaña globo terráqueo en la parte superior aquí. Y si hago clic en estilo, se
puede ver si un momento,
etcétera dinámico. Me gustaría seleccionar
tema a medida que diseñamos. Y eso me permitirá
elegir uno de los colores, pero está presente en mi tema. La otra opción, sólida, que te permite elegir cualquier color
que te guste desde aquí mismo. Pero me gustaría bastante atar
eso a los colores de mi tema. Así que voy a seleccionar V opción oscura tiene en realidad bastante cerca de lo que estoy buscando, para mi marca. Pero voy a pasar por personalizar estos colores contigo. Siguiente. Si vuelvo al
título y el logotipo del sitio ahora, estoy listo para cambiar mi logotipo. Entonces voy a navegar hasta eso. O simplemente puedes arrastrar y soltar. Y tengo un expediente preparado,
pero es justo. Así que no querrías ningún espacio
negativo alrededor del logotipo. Lo quieres recortado
agradable y bien apretado. Y para mis propósitos necesito
una versión ligera de mi logo. No voy a
usar para logo completo, que te puedo mostrar si lo
aparto justo aquí, este sería mi logo completo. En cambio voy a usar esto, que es solo para el tipo de logotipo. Entonces voy a arrastrar eso a la sección de
logo veterinario. Y eso es todo. Se lo puso en su lugar. Entonces eso es un poco
más pequeño de lo que me gustaría. Y puedes ver que aquí
tienes algunas opciones para ajustar el tamaño. Solo te da la opción de
ajustar por altura, pero para WIP para luego
seguir en consecuencia. Así que vamos a aumentar para la altura 80 píxeles, Eso se ve bien. Y luego una altura móvil. Voy a mover este control deslizante para que
sea una especie de coincidencia. Puedes alternar, por cierto, entre la vista de escritorio
y móvil usando los dos botones
en la parte superior de aquí, lo cual es bastante útil. Entonces, si hago eso, así es como se ve en
la vista móvil. Así que estoy bastante contento
con esos ajustes. Vale la pena mencionar cualquier
cambio que realices en el contenido de V, incluso el estilo que
necesites para guardarlos, no
se publicarán automáticamente. En la parte superior izquierda sobre
donde dice Hecho. Si pasas el cursor sobre eso, tienes dos opciones para
guardar o descartar tus cambios. Entonces voy a hacer clic en Guardar. Y eso es ahora el
estilo V guardado para este nuevo encabezado. Pero ya he configurado todos
los demás cambios de estilo en realidad
se realizan, no viven en la página, sino luego una sección especial. Entonces, si navegamos de regreso a la parte de inicio de nuestra barra lateral de
Squarespace, verás que hay
un encabezado de diseño. Y aquí es donde se
llevarán a cabo el resto de nuestros cambios de estilo. Si haces clic en la primera
opción, estilos de sitio, puedes ver que tienes una
serie de categorías aquí, fuentes, colores, animaciones. Esa es una nueva característica con la que
estoy muy satisfecho. Squarespace han agregado y
espaciado, espaciado global. También puedes personalizar
botones, una imagen de bloques. Por lo que recomendaría
revisar estos encabezados es
tranquilo, intuitivo,
bastante autoexplicativo, pero solo personalizarlo y
cambiarlo para que se adapte a sus necesidades, para que se adapte a su marca. Entonces voy a comenzar con
fuentes y tener un momento. La fuente no
refleja del todo lo que tenía en
mente para la cervecería. Esta es una fuente bastante
genérica y negrita. Es legible, es fácil de leer, pero quiero usar
algo que
tal vez sea un poco más ligero,
un poco más elegante. Y para mis encabezamientos principales, podría intentar
elegir algo un poco más cercano a la
redacción para evocar. Un tipo de letra serif. Squarespace te da
algunos puntos de partida. Siempre trata de casi
darte una opción más fácil y luego puedes sumergirte
más profundo si quieres. Entonces, si te gustaron las fuentes que ya han sido
sugeridas por la plantilla, podrías mantenerlas en su lugar. Tienes algunas opciones como
ajustar el tamaño base, que puedes ver en tiempo real. Te muestra una vista previa a nivel global. Pero de nuevo, hasta que vayas
a Guardar en la parte superior izquierda, nada, nada
está escrito en piedra. Por lo tanto, puede hacer clic en
estos encabezados, párrafos y puede elegir entre
una variedad de opciones aquí. Si quisieras
mantener la misma fuente o si haces clic en la familia de fuentes, podrías intercambiar una fuente
diferente él. Si hago clic en la parte posterior. Antes de llegar a eso, si querías
cambiar por fuentes, si haces clic en esta sección
aquí, tenemos un momento. Dice Acumen Pro. Verás que dice paquete de fuentes y tiene la
opción de cambiar. Entonces, si hacemos clic para
cambiar el paquete de fuentes, en
realidad
te da una combinación de emparejamiento de fuentes preconfiguradas. Así que recomendaría
ir con algunos de estos. No estás guardando nada. Así que es bastante fácil simplemente hacer clic en ellos y echar un
vistazo e intentar obtener algo que esté en
una dirección
general está buscando antes luego afinar y
pasar y hacerlos cambios
más minuciosos. Entonces esta es una característica bastante
útil de usar. Acumen Pro. Creo que ese es el pack de
fuentes que venía precargado con esta plantilla. Futuro. Ese es uno que
uso a menudo, y así sucesivamente. Ahí hay muchas opciones. También los
divide en sans-serif. Serif, un sans serif mixto, sin las pequeñas serifs en
los bordes de los personajes. Serif incluye esos bordes, por lo que tiene un aspecto más tradicional,
más clásico. Y si hago clic en algunas
de estas opciones, verás que hace una
gran diferencia el estilo general. Ahora, para la lectura de pantalla, soy sans serif
definitivamente es mejor para
tu texto más pequeño, tus textos corporales, es
menos probable que se rompa. Y si alguien no tiene
la última pantalla retina. Así que ahí es donde hay opción
mixta es bastante buena y no siempre,
pero en general, estas opciones mixtas pueden combinar una fuente serif para
tus encabezados para el texto más grande con san-serif
para v, más pequeño texto. Lo ha hecho en la vista previa, realidad no se lo
ha hecho a
este trozo de texto de aquí. Me pregunto si tal vez, bien, entonces es
clasificarlo como texto corporal. Esto supongo, sigue
siendo una pequeña partida. Así que de nuevo, puedes haber salido o vía
las opciones de Font Pack. Pero nuevamente, podrías hacer clic y echar
un vistazo a algunas de las opciones aquí en seleccionar algo que creas que
funciona para tu marca. Ahora, para esta marca, sé lo que busco. Entonces voy a pasar por y escoger algo
más específico. Entonces para mis párrafos, definitivamente no
quiero usar a Arielle. Si vas a Examinar todas las fuentes, verás que hay
una amplia biblioteca. Y creo que por el momento, esto es sacar fuentes
de fuentes de Google, de Adobe Typekit, y de algunas otras
fundiciones también. Así que hay una gran selección
y te llevaría bastante tiempo desplazarte
por todas las opciones. Entonces está esta práctica función
de búsqueda. Si estás trabajando en
una marca en la que
ya has escogido
fuentes y colores. O simplemente podrías
escribir el nombre de una fuente que estás
buscando directamente ahí. Voy a usar Lato, que es mi
fuente preferida para el texto del cuerpo. Y nos hemos
encerrado como opción. Entonces podría optar por el peso
personalizable,
lo cual voy a hacer. Voy a hacer eso
solo un toque más ligero. Espaciado entre letras. Estoy contento con. Se puede ver visa, opciones bastante
autoexplicativas para el ajuste fino. Squarespace administra las
fuentes
dándoles uno de los pocos tipos de estilo
diferentes. Por lo que hay varios tipos
diferentes de encabezamiento y hay tres tipos
diferentes de párrafo. Entonces si guardo mis cambios por ahora, y la velocidad es
bastante buena en esto, pero a veces
seleccionarás una función. Nos lleva unos segundos
cargar y refrescar. Si hago doble clic para
entrar en modo de edición, nos centraremos solo en esta
parte del texto aquí. Se puede ver como destaco
ese texto de un momento, se le asigna
rumbo para las oraciones, siendo
también el encabezado 32.11 el más grande, por ser el más pequeño. Y entonces tienes
tus párrafos, 1, siendo
nuevamente el más grande, libre siendo el más pequeño. Entonces ahora sabemos qué
es lo que está afectando. Van a ser estas
porciones de textos, pero puedes dar uno
de estos presets. Si volvemos a ahorrar, no
tendríamos
ese texto gordo pequeño. Pero solo como demostración, volveremos al estilo,
a fuentes, a los párrafos. Ahora bien, si nos fijamos en la parte inferior donde tenemos este deslizador para elegir el tamaño para cada uno
de estos tipos de párrafos. Porque he asignado párrafo libre a esta porción del texto. A medida que muevo el deslizador, se
puede ver que eso es
lo que está afectando. Entonces es bastante agradable
apilar esos soviéticos. Tienes algunas
opciones
a la hora de diseñar algunos párrafos
más grandes, pero luego quizás algún texto
más pequeño también. Ahora para mi encabezamiento
textos y tened en cuenta, mientras os llevo
a través de mi ejemplo. Por favor, trabaja en
esto usted mismo. No tendrás que usar cada una de
las opciones que estoy seleccionando. Esto es justo lo que
siento que sería mejor para la marca con la que estoy trabajando. Entonces en mi caso, para mis encabezados, no
creo que pueda
encontrar una fuente que coincida con
esta fuente personalizada para
evocar lo suficientemente cerca. Si no puedo igualarlo exactamente, prefiero usar algo
que lo complemente. La fuente que he usado
aquí para Cervecería, el lema es Futura. Entonces voy a
hacer click en encabezados, seleccionar familia, navegar por todos. Busca Futura
PT, eso es perfecto. Eso ahora intercambiará cama
como fuente de encabezado. Ahora bien, eso está bastante lejos de lo que espero
lograr para los encabezamientos. Por un lado quiero que
sea un peso de fuente mucho más ligero. Entonces voy a
cambiar el peso, voy a repasarlo bajando a 300. Acerca se ve bonito y
ligero y un elegante. También quiero que sólo
aparezca en mayúsculas. Y eso es un pequeño consejo, pero a veces funciona
bastante bien. Únicamente encabezamientos en mayúsculas. Entonces lo hacemos bajo
esta sección aquí. Transformación de texto en mayúsculas. Y ahora eso sólo va a mostrar en mayúsculas así. Y luego mientras no
voy a espaciarlo tan
dramáticamente como lo tengo
en el logo para cervecería. Definitivamente voy a
aumentar V, menor espaciado. Así que intentemos. Eso tal vez sea un poco demasiado. Vamos a intentarlo. Nada 0.15 EM. Eso se ve bastante bien. Pero puedo ver que
voy a meterme en algunos problemas si
lo tengo tan espaciado, podemos ver este
pedacito de textos. Está ocupando tres líneas. Creo que ese es el tamaño de rumbo
más grande. Entonces voy a escalar
esto un poco. Yo uso gratis como v, escala de tamaño
más grande esta
vuelta un poco. Si quisiera encontrar
ejemplos de textos con esos tamaños particulares,
puedes mirar a través de ellos. Pero generalmente las
plantillas en la página principal, deberías poder encontrar
un ejemplo de todo. Entonces ahí está mi rumbo dos, no
estoy seguro de si voy a
tener una partida libre, pero podríamos sí, hay algunos textos moviéndose. Se van libres. Va a ir un poco más pequeño. Otra vez. Encabezando libre, realmente usaría para una cantidad considerable de textos, tal vez un párrafo, pero algo que
quiero llamar para destacar. Creo que ahí se ve
bastante bien. Y luego rumbo a lo personal, voy a usar la grasa para los textos, pero tal vez sólo voy a
introducir un párrafo. Entonces tendría que ser del mismo tamaño
que el texto del párrafo. Yo pondría eso justo al 1.1. Entonces es casi del mismo tamaño. Simplemente tiene un estilo diferente. Entonces eso es todo. Una vez haga clic en Atrás
y luego haga clic en Guardar. Eso transformó masivamente
el aspecto y la sensación. Una plantilla que ya realiza
esos cambios de fuente. Y eso es todo. Podemos afinar a medida que
avanzas en el diseño. Pero como punto de partida, Eso es todo, mis fuentes
están en su lugar. Ahora. También puedes personalizar las
fuentes para tus botones, cosa que aún no he hecho. Puede que no te lleve paso a
paso por
cada una de esas configuraciones porque está
repitiendo el mismo proceso. Tú eliges tus fuentes. Y luego solo vas y
estás ajustando cada uno de estos deslizadores
para personalizarlo. Entonces eso es bastante
autoexplicativo. No te voy a llevar
a través de cada uno de esos, pero voy a pasar por
fuera de cámara y solo ajustar el estilo para los botones y donde estamos si
te interesa, estos son los ajustes a los
que llegué eso otra vez, me gusta bastante mayúsculas
para los botones. Algunos espaciados agradables y generosos. Entonces para mí, eso se ve, se
ve muy bien. Una característica bastante agradable voy a mencionar ya que hice clic en
la pestaña del botón secundario, realidad
tenemos
una pequeña advertencia ahora para decirte que esta página no tiene un entonces
sea cual sea el elemento. Entonces eso es bastante útil
ya que estás estilizando. Si llegas a un elemento
que no está presente en la página, ese es un toque bastante agradable. Ahí hay un pequeño
aviso para ti. Así que de nuevo, tienes tres tipos
diferentes de botones. Configura el preset, y luego estás listo para usar
pero a través de la plantilla. Así que la próxima gran
personalización es el color. No voy a estar cambiando tanto
el color porque en
mi marca en realidad estamos
usando colores en escala de grises, que están muy cerca de lo que
tenemos en la plantilla. Pero de todas formas te guiaré a través de
ese proceso. Así que de nuevo, estamos
bajo Estilos del sitio. Y esta vez en lugar de fuentes, queremos hacer clic en colores. Y se puede ver que esta es
la paleta de colores actual. Entonces tienes algunas opciones. Explicaré primero cómo
se aplican estos. Entonces cada uno de los colores de
la paleta en tu tema, lo aplicará a un preset, y comienza
dándote presets de luz, presets
brillantes,
presets oscuros, y luego más oscuros. En realidad estoy usando un cóctel de los colores que
le has dado. Ahora, eso te lleva a un punto de partida
realmente rápido. Pero nuevamente, si necesitas
personalizar y afinar, hay mucha
personalización que puedes hacer. Si tuvieras que hacer clic en el
pequeño icono de edición para cualquiera de estos,
estas opciones preestablecidas. Verás que
te lleva a todos y cada uno de los elementos de tu sitio web. Y puedes personalizar completamente
el color que se usa. Entonces, si hice clic por ejemplo este de aquí para
pequeños párrafos por quería que tuvieran
un color diferente. Podría escoger cualquier color que me guste. O si hago clic en la pestaña de la paleta, podría hacer clic en uno
de los colores que he programado en
la paleta de colores. Así que mucha personalización, pero no tienes que
pasar por todas las opciones. Solo usas esto para encontrar, afinar y retocar lo que me encanta. Y en realidad puedes
ver en la parte superior derecha de cada sección de página qué combinación de
colores se ha
aplicado desde tu paleta. Para que puedas ver esta sección. Tiene uno oscuro aplicado a él, que coincide
con este de aquí. Y esta sección tiene brillante a, esto coincide aquí arriba. Entonces, antes de que realmente
modifiquemos los colores, pero debería
darte una idea de cómo Squarespace los está usando y aplicando y
el tipo de nivel de control que tienes. Entonces no voy a guardar mis cambios, pero voy a hacer algunos retoques bastante
dramáticos aquí, solo para que puedan ver esto. Siendo utilizado. Por lo que tienen presets entre los que
puedes seleccionar. Estoy usando uno de los
presets en este momento. Si elijo un preset como ese, tan solo hacer clic en
este botón, cada color a lo largo de todo
su sitio web cambiará así de igual manera. Así que es una forma bastante poderosa de previsualizar diferentes combinaciones
de colores sin hacer ningún cambio
destructivo. Ahora bien, si eres como yo, sobre todo si estás
trabajando para una marca, si has llegado a esta etapa, ya
has creado un logo. Probablemente hayas establecido
la paleta de colores, si no en su totalidad, probablemente al menos obtuviste los colores centrales que
planearás usar. Entonces, una opción, y no uso esto porque no
estoy seguro de que sea 100 por ciento en
Corea es que tienes una pestaña
de Imagen y realmente
puedes arrastrar una imagen y Squarespace
identificará los colores que
aparecen en esa imagen. Entonces eso podría ser útil
si estás buscando ideas o si
miras por la parte superior, puedes ignorar los
presets y en realidad
puedes seleccionar cada uno
de estos colores tú mismo. Squarespace
implementa esto pasando de más ligero a más oscuro. Y supongo que tienes tu, tus colores saturados
parecían funcionar mejor si los colocas
en medio de un paladar. Entonces cuando vamos a Editar paleta, si intentas darle al
menos un color claro y oscuro. Y gratis en el centro, eres un poco más libre
para retocar y jugar con él. Eso tiende a asegurar que cuando estos colores se
lanzan a la plantilla, funcione según
lo previsto. Entonces por ejemplo I. Podría elegir una
versión polvorienta de una turquesa. Entonces podría escoger una
versión fuerte de una turquesa. Podría escoger algo
así para esta
cuarta opción aquí. Entonces se dirige hacia
un color realmente oscuro, pero aún existe la
posibilidad de que tenga algo, algo de saturación
que aún funciona bien. Y luego para tu color oscuro, realmente incluso quieres que eso sea negro o tal vez un gris
apagado negro. Ahora bien, si me desplazo, se
puede ver
esa combinación, ya que se lanza
a la plantilla, funciona como se pretendía. Hay un buen contraste y estamos obteniendo los
resultados que esperaríamos. De hecho voy a descartar
esto porque estaba contento con la paleta que me
han dado para empezar. Incluso bastante como esta tonalidad
marrón polvorienta que tenemos aquí. Así que estoy muy feliz de comenzar a
usar esta paleta de colores. Y eso sucede
a veces en Squarespace. Es una de las ventajas. A veces te sorprende
gratamente y una plantilla te acerca lo suficiente a lo
que buscas, que no tienes que desplazarte
por páginas de opciones. Y no necesitas
afinar si estás contento con lo que se
te presenta para empezar. Así que ahora hemos ingresado algunas de las facetas centrales del aspecto y la sensación de una
marca, las fuentes, los colores, y podemos ver que esos están llegando a nuestro contenido de demostración. Pero estoy seguro de que tienes
muchas ganas de empezar a poner tu propio contenido en su lugar. Pero hay un paso
más que va a dar antes de comenzar a
intercambiar contenido en, que es simplemente mirar
nuestras páginas y navegación. Y ahora que tenemos una
buena idea de un look and feel que estamos obteniendo
de nuestro estilo femenino, empezaremos a decidir qué
páginas estaban guardando. Y pasaremos un poco de tiempo
explicando la navegación. Entonces lo haremos juntos
en la siguiente lección.
6. Crear - tipos de páginas y navegación: En esta lección, vamos
a ver nuestras páginas son tipos de
página y v. V navegación
funciona en Squarespace. Ahora bien, los tipos de página
es algo que podría ser potencialmente
un poco confuso. Creo que eso se debe a que los
squarespace han ido
desplegando progresivamente actualizaciones una
encima de la otra. Entonces no es la
parte más intuitiva de Squarespace, pero te prometo
que sí tiene sentido. Entonces comencemos con
la navegación. Ahora. Si miras la barra lateral, visité la sección v Páginas. Y esto se
divide en dos partes. En la primera parte tenemos un
encabezado de navegación principal, y notarás cualquier contenido
que coloquemos aquí arriba. También aparece en nuestra navegación en el
encabezado de un sitio web. Hay otra sección
llamada no vinculada. Y nuestra página principal es una de
estas páginas en estos momentos. Y cualquier cosa en
esta sección aquí, si bien es una página, se
puede visitar, se puede vincular a, no aparecerá en la
navegación por la parte superior. Entonces
para demostrar por ola que funciona, si arrastro nuestra sección de inicio hasta la parte superior de nuestra navegación
principal, verás que ahora aparece en la navegación
en nuestro encabezado. Está subrayado para resaltar que esa es la página que
estamos
viendo actualmente y ya no está
en la sección no están vinculados. Ahora, no tuve que hacer clic en
guardar para que eso sucediera. Entonces esto es algo
que realmente sucede en tiempo real cuando estás
arrastrando páginas en la navegación. Entonces eso da un poco de miedo. Al mismo tiempo,
es realmente fácil de
deshacer y simplemente arrastrarlo hacia atrás. Si no estaba contento
con lo que había hecho. Creo que colocaré a casa arriba al inicio de
nuestra navegación. Por defecto, el logotipo V
actúa como un botón de inicio. Creo que muchos visitantes
están familiarizados con eso ahora, pero a algunos todavía les gusta ver
casa en la navegación. Entonces voy a
guardarlo ahí por el bien de mantenerlos felices. Entonces, parte de este contenido de demostración, decidirás
quedarte, parte de ella no necesitarás. Entonces sugeriría
hacer clic a través. Voy a pinchar sobre y solo ver si me gusta
este contenido demo. Si prefiero crear
algo desde cero. Así v Acerca de la página. Sí, a lo mejor hay
algo con lo que podría trabajar. Podría cambiar el tema de esto de algo ligero
a algo un poco más oscuro. Pero puedo mantener v sobre si
hago clic en instructores. Y te darás cuenta una
vez que haya hecho clic en una página, ese pequeño
ícono de demostración desaparece. Eso es porque si haces clic
en una página y decides no hacer clic en este pequeño
bote de basura a la izquierda para eliminarlo. Creo que Squarespace asume que tal vez quieras
conservar ese contenido, así que elimina ese
pequeño recordatorio de demostración. Nuestros instructores, eso
no me encanta. Creo que podríamos hacerlo mejor. Voy a hacer clic en el
bote de basura a la izquierda y eliminar. Una vez que haces clic en Confirmar,
entonces eso es todo. Se ha ido la página. Pero te darás cuenta al
borrar mi primera página, esta pequeña sección aparece
aquí, páginas eliminadas. Y si haces clic en eso, en realidad tienes 30 días antes de que esos se eliminen
permanentemente. Así que un poco de red de seguridad para cualquier contenido eliminado allí. Haré clic en Clases a continuación. Es un diseño bastante simple. No creo que necesite
mantener esa ubicación. Podría mantener algo
así para la ubicación, pero borre eso por ahora. Hay algunas otras buenas opciones para contactos y páginas de ubicación. Y luego un blog. El blog viene con generalmente las primeras
publicaciones como contenido de demostración. Y el blog es el primero de nuestros tipos de página para
los diferentes. Si vuelvo por un momento, el home y la página about, tienen el mismo icono. Y estos son tipos de páginas
regulares. Lo que eso significa es que si
hago clic en los modos de edición, estos son los que Squarespace
causa páginas irregulares. Están divididos en secciones. Cada sección puede tener
bloques flotando sobre ella. cada sección se le puede dar
su propio tema de color. Entonces eso es lo que define
como una página normal. Si voy al blog, verás que esto tiene su
propia barra lateral única. No funciona. Si entro en
modo Edición en secciones. Es una sola sección, y te da opciones
para administrar tus publicaciones de blog. Así que no voy a sumergirme
en ningún detalle real en V, la función de blog de Squarespace creo que
es muy intuitiva. Probablemente puedas atravesar
el juego. Configurando eso. Y como dije, te
da algunas publicaciones para empezar, para que puedas echar un vistazo a la
forma en que se han configurado esas. Pero para el blog
reflejará cualquier cambio de
estilo del sitio que hayas realizado
en el resto del sitio web. Y a medida que te
abras paso a través de personalizarlo, verás que puedes elegir algunas opciones que se aplicarán, ya sea a más de publicaciones de blog o a dos cada una de
ellas individualmente, como la colores, las fuentes que se utilizan
para diferentes secciones. Pero tiene una oportunidad. No necesitas mi aporte para ayudarte a
configurar las páginas del blog. Así que nos centraremos en
cosas que estén un poco más orientadas al diseño. Así que si quería
agregar una nueva página, tipo de
página, ahora
hemos eliminado hacia abajo, tenemos solo para
casa vía bout. Y en realidad voy
a borrar para blog. Mi cervecería no va a
tener ningún tipo de feed de blog. Si haces clic en el botón Plus, incluso los dos siguientes
navegación principal para agregarlo para
que comience aquí
o no esté vinculado. Verás que hay un número bastante
grande de opciones. Entonces bajo páginas, esto
es lo que mencioné. espacio cuadrado causa un tipo de página
irregular. Pero entonces tienes estos
diferentes tipos de páginas que categoriza
como colecciones. También tienes
carpetas y enlaces. Entonces comenzaremos con
las opciones sobre
las colecciones y la tienda. De nuevo, creo que eso va un poco más allá del alcance
de este tutorial, pero puedes
crear y personalizar muy fácilmente tu
propia tienda de comercio electrónico. Super intuitivo, fácil de usar. Entonces esa no es una página normal, Eso es un tipo de página especial. Y eso es con el propósito
de configurar esa tienda, poder categorizar productos y
muchas otras características. Tiene cartera que es un tipo de página especial y está compuesta por elementos de cartera. Entonces, si eso es algo
que es realmente útil para los fotógrafos, supongo que también para los diseñadores. Y seleccionas entre
algunas plantillas. Y esto sirve casi como
una página índice de sales. Así que muy similar a la
funcionalidad del blog en Squarespace, cada uno de tus proyectos, pero está anidado aquí, es efectivamente su propia página, que puedes personalizar
por completo. Pero cuando vuelves
a esa página de portafolio, ves una miniatura y un encabezado que representan
cada uno de ellos. Puede arrastrar y soltar
para cambiar el orden. Así que puedes imaginar para
fotógrafos o diseñadores, si quisieras presentar
tus diferentes proyectos. Esta es una característica realmente agradable, en lugar de
intentar manualmente crear y vincular a diferentes
páginas para cada una de ellas. Así que voy a cervecería ciertamente
no necesita una cartera. Entonces voy a eliminar
ese tipo de página. Volveré a hacer clic en el Plus. Eventos. Nuevamente, eso está un poco más allá del alcance de esta clase, pero esa es una característica muy
útil. Así que
ahí tienen algunas opciones para programar eventos. Si está creando un
sitio web para una banda, por ejemplo, quería incluir fechas de gira. Hay
características tranquilas y agradables que te permiten hacer eso y videos. Este es uno nuevo que
en realidad te permite vender contenido bajo demanda. Entonces, si quisieras ocultar
algunos videos tutoriales,
por ejemplo, detrás de un muro de pago. Usted es capaz de hacer eso aquí. Pero dos tipos de página especiales
para que usé con más frecuencia, carpeta
RV y la opción de enlace. Entonces si empiezo
agregando una carpeta, esto literalmente solo te ayuda a organizar la navegación de
tu sitio. Ahora molesto por el
momento en Squarespace, no
puedes anidar una página dentro de otra sin
usar una carpeta. Entonces lo que quiero decir con eso, si le doy a esto un título, galería, puedo arrastrar
la página acerca de. Entonces se sienta debajo de la galería. Y si utilizo la
navegación en la parte superior, verás cuando pase el
cursor sobre la galería, ahora muestra acerca de la página
como sentada dentro de esa. También podría agarrar
esta pequeña página de demostración aquí y ponerla dentro. Entonces ahora bajo nuestra sección de
galería, tenemos dos páginas. Pero no podría colocar si me quito sobre me quito la clase Booker. No pude colocar la clase Booker como una página que
se sienta debajo de aproximadamente, esto es bastante irritante. Es algo que espero que
actualicemos en el futuro. En el momento en que
quieres anidar páginas, tienes que usar
esta función de carpeta. Entonces eso es lo que hace el plegado, te
permite organizar tus páginas para que se sienten
dentro de una sección. Y por último,
tienes una opción de enlace. Entonces esto es útil para
algo
a lo que llegaremos como una característica más avanzada hacia el final de la clase. Enlaces de anclaje. El enlace en el que harías clic
y te desearía bajar a cierto
punto de la página. Es muy útil para eso. O podrías crear un enlace a algo externo a
tu sitio de Squarespace. Por lo que podría vincularse a un externo. Soy una app de calendario que usas. Podría vincularse a, no
sé por qué los
colocarías en tu navegación principal podría ser un enlace a uno de tus canales de redes
sociales. Aunque creo que hay una
mejor manera de hacerlo. Entonces eso es para la opción de enlace. Y una vez que haces clic en enlace, literalmente le das un título que se
mostrará en la navegación. Y cuando ingresas a la
ubicación de ese enlace. Ahora puedes usar esto
para enlazar internamente. Para ello, si
solo comienzas con una barra diagonal hacia adelante y debajo las páginas que tienes que comprenden tus sitios web hasta ahora
aparecen en la lista. Por lo que es bastante fácil seleccionar uno de esos si lo deseas, o puedes ingresar una URL externa
completa. Ahora, antes de que
terminemos esta lección, hablando de URLs, ¿cómo
determinas la URL
de tus páginas? Esto de nuevo, no es lo
más intuitivo. Podrías pensar que
simplemente usa el nombre de la página. No lo hace. Hay una configuración
separada para esto. Entonces, si haces clic en el ícono de la pequeña rueda dentada
de alguna de tus páginas, verás que aparece la
configuración de la página. Y algunas de las primeras
opciones son un título de página. Y eso es lo que
va a aparecer en la parte superior de la ventana del navegador. Título de navegación. Eso es lo que aparecerá
en V navegación del sitio. Y finalmente la URL. Ahí es donde puedes
personalizarlo. Así que podrías, por ejemplo cambiar eso a Acerca de nosotros, se habrá actualizado a través de URL. Entonces, si pongo Acerca de
Nosotros y golpeo Enter, verás que eso
nos llevaría a esa página específica. Entonces eso es bastante útil. Muy a menudo querrás
ingresar una URL específica, tal vez
con fines de marketing o fuera de las solicitudes de
un cliente
si quieres vincular
a ciertas páginas externamente. Así que eso cubre con páginas, los tipos de página y
la navegación. A continuación, realmente vamos a
sumergirnos en la personalización del contenido. Pero tenemos en la página web. Así que estamos bastante contentos
con el estilo. Todavía hay algunos
retoques y cambios podríamos hacer a eso más adelante. Pero la siguiente lección, comenzaremos a personalizar
ese contenido.
7. Crear - construir bloques: En esta lección, llegamos
a trabajar con bloques, que es lo que
usa el squarespace para componer todo
nuestro contenido. Y esencialmente
ahora es cuando
vamos a empezar a
personalizar nuestro contenido. Entonces mi cervecería tiene muchas imágenes
de un estudio de yoga. Una vez que los cambiemos, realmente va a
empezar a tomar forma. Trabajar con bloques. Si entramos en modo de edición, primero
estoy trabajando desde la
página principal. Y a medida que pasas el cursor y
te desplazas, verás un pequeño contorno azul alrededor de diferentes partes
de tu contenido. Y los V's son lo que
se conoce como bloques. Entonces tienes el control total
para moverlas o editarlas. Para editar el contenido en sí. En un bloque de texto, simplemente
haga clic, haga doble clic y escriba
sobre lo que hay aquí. Entonces esto podría decir,
bienvenido al flúor. Y esto es sólo
una demostración. Entonces no voy a
intercambiar contenido, sino solo para
darte una idea general de cómo me sentiría de esta manera,
armé esto
si fuera a ser un sitio web para la Climb. Ahora bien, el tamaño y
el posicionamiento, se
puede ver en este momento, tengo este texto en mi encabezado, talla
única y todo este tipo de vista de
escritorio donde va a depender del tamaño
de alguien pantalla. Creo que me
gustaría bastante poder
encontrarme un poco más allá. Entonces aquí es donde entra
esta característica de cuadrícula, pero Squarespace de ahora
implementada. Hubo una época en la
que esto era mucho más complicado. Entonces, si flojo y solo arrastre
en el borde de ese bloque, verán
que Squarespace
está alineando esto a una cuadrícula que es invisible. Tan pronto como sueltes, haces clic fuera de ese artículo. Entonces hay una pequeña cuadrícula
invisible en el trabajo y arrastrando para cambiar el tamaño o agarrar algo y realmente mover su posición
física. Se puede ver una pequeña pauta
amarilla aparece ahí arriba para decirme
que eso estaría centrado. De hecho, creo que voy a
enviar a este texto. Entonces voy a
Controlar a para seleccionar todo ese contenido y usar esta herramienta de alineación de
párrafos. Esto es bastante intuitivo. Tipo de iconos y características con las
que estoy seguro que te
familiarizarás aquí. Clase. No voy a necesitar eso,
pero sólo voy a
mantener la bienvenida a nuestra cervecería. Entonces cuando eliminé parte
del contenido ahí, lo que elimina la necesidad de
un bloque del tamaño que teníamos. Se ve que se
cerró automáticamente. Si quisiera, podría arrastrar
podría agrandar eso
arrastrando hacia abajo. Y esta página
en realidad está alineando rejilla del
veterinario a la parte inferior. Entonces antes de hacer más
cambios, hablemos de ola. Esa herramienta funciona y
las opciones que tienes para jugar con una grilla. Al pasar el cursor sobre esta sección. Si hago clic en Editar sección
arriba en la parte superior derecha, verás que aparece la
cuadrícula. Y se puede ver que
hay un recuento de filas para la grilla de un momento. Tiene cuatro celdas, que es suficiente para el
contenido que tenemos en este momento. Puedo
aumentarlo manualmente o disminuirlo. No puedes ir por debajo
del mínimo que necesitas para ajustar el contenido que tienes
actualmente en su lugar. Y si miro hacia abajo la alineación, se
puede ver por un momento. Esta rejilla se está alineando
hasta el fondo. Podría
alinearlo al centro en esta sección, o podría alinearlo a la parte superior. Así que realmente intuitivo,
fácil de usar. Vamos a moverlo de nuevo
al fondo. Y entonces tienes opciones
aquí también para alturas. Esta es la altura
de la sección. Nada que ver con una grilla. Entonces esta sección, si
cambio la altura a pequeña, tenemos apenas la
pequeña astilla más pequeña. Para mostrar nuestra imagen
en el fondo, hay suficiente espacio
para encajar el contenido. Pero si elijo
con opción grande, eso es apuntar a pantalla completa, permitiendo un poco de encabezado de
barra de navegación en la parte superior. Si desea ingresar
una altura específica, si hace clic en los tres puntos, puede ingresar un valor. Siempre permitirá
espacio para tu rejilla. Pero un valor que es, creo que se supone
que esto es un porcentaje. Así que 100 por ciento tanto espacio como puedas
caber con el encabezado. Y luego 15%, 1%. Todo lo que está haciendo es
permitir espacio para nuestra cuadrícula y el pequeño
relleno que
puede alterar bajo esta configuración de
espaciado que vimos anteriormente
en los estilos del sitio. Entonces sólo voy a poner eso de
nuevo al gran precepto. Lo que me gusta del impacto de
página completa cuando alguien aterriza en esto. Pero te da una pequeña
idea de las opciones que tienes para trabajar con esta grilla, lo cual es realmente útil para
diseñar tu contenido. Ahora también se puede cambiar brecha
V que está presente entre
las celdas de la cuadrícula. Así que puedes hacer clic en esa primera opción si
quieres no tener ninguna brecha en absoluto. Y eso podría ser útil
si estás tratando de colocar imágenes en
mosaico en la cuadrícula. Pero voy a volver
a la configuración predeterminada. Ahora bien, si hago clic en
Antecedentes, ten en cuenta, este es el trasfondo para
solo esta sección aquí. Aquí es donde podemos configurar
nuestra imagen de fondo. Y también hay una
superposición en la parte superior de esto, lo que hace que el texto sea un
poco más legible. Entonces si un fondo aquí
superpone opacidad, si muevo este deslizador hacia arriba, eso te da una mejor
idea de lo que está haciendo eso. Entonces es como si estuviera
superponiendo una película de un color sólido
encima de la imagen. Y entonces la opacidad
controla bien la capacidad, ¿cuánto está mostrando a través? Entonces ese es un escenario bastante
útil. El color que está
tirando está relacionado con los colores de la cuadrícula
debajo de la pestaña Color. Entonces, antes de cambiar
nuestra imagen de fondo, simplemente
haremos clic en la pestaña Color. Y lo puedes ver
en este momento. Es usar esta opción más oscura
de nuestra paleta de colores. Ahora bien, si elegía una de
las opciones más ligeras que superponíamos usaríamos, usaría blanco. En este caso. Si elegí una de las opciones del
tipo de centro, si tuvieras algo
vívido en tu tema, como un naranja brillante, bueno, se superpondría ese naranja
brillante y así sucesivamente. Ojalá se te ocurra la idea. Entonces voy a volver a
poner eso a, usemos el más oscuro, oscuro,
oscuro, más oscuro. Aquí se puede ver la diferencia entre los más oscuros, 1.2. Es hacer que los encabezamientos sean de
este color de acento. Cuando uso la opción dos. Y cuando también está encima
de una imagen, es del todo,
no es lo suficientemente clara,
no del todo legible. Entonces voy a usar dark es uno. Y solo asegúrate de
que el texto sea agradable y claro en esta situación. Entonces cambiemos el fondo. He editado mi texto, pero hagamos clic en la pestaña de
fondo. Puede hacer clic en Reemplazar
o golpear el bote de basura, y luego arrastrar y soltar
una imagen en su lugar allí. Entonces tengo algo en mente. He elegido de un sitio web de stock
libre de regalías. Incluso si usas stock
libre de regalías, a veces quieren que le
des alguna atribución. Así que siempre vale la pena verificar si estás trabajando para clientes. Solo asegúrate de que
estás usando acciones que no necesitas incluir, tal vez un poco de crédito o una
nota en algún lugar de la página. Squarespace en realidad tiene
su propia biblioteca de stock, que no es necesario
atribuir en la página. Y accedes a eso. Si vuelvo a Editar
sección fondo, y sólo voy a eliminar
temporalmente eso. Haga clic, agregue una imagen. Y en lugar de
arrastrar y soltar, al hacer clic en este
botón más para agregar una imagen, tienes algunas opciones. Puedes subir un archivo localmente. Puedes seleccionar
de tu biblioteca. Entonces esa será cualquier
imagen que ya hayas usado en este sitio de Squarespace. Entonces ahí es donde lo
encontrarías. Y por último, Explorar imágenes
de stock. Y debajo de la pestaña de imagen gratis, esto es alimentado por Unsplash, es una selección bastante amplia de imágenes que puedes usar libremente. Ahora bien, estos no serán
los más singulares. Probemos Cervecería. Estas no serán las opciones
más singulares. Subir, pero les va a salvar si no tienen presupuesto para
fotografía o imaginería. Entonces algunas opciones decentes aquí. Algunas de sus fotografías
tienen un estándar bastante alto. Un toque realmente agradable para eso
ahora está integrado con Squarespace. Para que puedas ver los
resultados ahí. Ese sería quizás un buen
enfoque si quisiera que su marca se viera como una cervecería moderna a
gran escala, creo que voy por un enfoque cada
vez más clásico. Un poco más. ¿Cuál es la palabra boutique? ¿Cervecería boutique? Entonces, si
vuelvo a hacer clic en el Plus y esta vez
selecciono de la biblioteca, deberíamos ver la imagen
SVG que había subido antes, y volveré a cambiarla. Tienes algunas
opciones de posicionamiento a la hora de colocar imágenes. Encima de una diversión. Ahora, hay un pequeño círculo de puntos focales. Y puedes hacer clic y arrastrar. Y eso va a cambiar
para punto focal. Ahora porque esta
imagen está llenando la pantalla muy bien de un momento. Pero no parece
hacer nada. Pero si guardo mis
cambios y cuando hago clic y solo arrastre
para cambiar el tamaño de la pantalla, verás que está centrando
el recorte en la porción. Um, pero resalté
el uso de esa herramienta. Por lo que bastante útil. Y vale la pena revisar
el punto focal en caso tus antecedentes se vayan
a cortar. Entonces eso ya se ve
mucho más en el tema. A medida que me desplazo, solo voy a
buscar otras secciones. A veces en mi primer pase, solo
busco algunas victorias fáciles
para empezar
a tirar mi
contenido ahí y,
y dar forma a las cosas. Entonces diseñar en Squarespace
es muy diferente
al proceso que usarías en
una plataforma como WordPress, donde en realidad te
burlarías de todo en teoría primero, puedes hacerlo por Squarespace, luego recrear a partir de una maqueta. Pero creo que la mayoría de
nosotros en realidad
solo diseñaremos libremente
porque es muy fácil pasar al
juego de elementos que estás diseñando en vivo sobre la marcha. Entonces estoy buscando una
sección que pueda usar. Tengo mi página de inicio. Este es el tipo
de área de aterrizaje. Un visitante podría
mirarles la navegación, pero podría desplazarse hacia abajo. Y si creo que la
siguiente sección que quiero incluir sería sólo un poco algo sobre la cervecería. Entonces, si tenemos una página independiente Acerca de, que por el momento, he sido quizás solo un breve extracto sobre febrero y luego un botón para que alguien pueda hacer clic
para obtener más información. Necesito agregar una sección. No quiero usar esta
con esta plantilla de próximas
clases. Entonces voy a entrar en modo edición. Y se puede ver como flojo
entre las dos secciones, Aquí
hay un botón
para la sección de anuncios. Si hago clic en eso, viene con una gama bastante amplia
de opciones que podemos usar. Y estos son puntos de partida, nuevo para ayudarnos a empezar a
lanzar nuestro contenido. Entonces, si hago clic en el
encabezado Acerca de algunas opciones que los diseñadores de Squarespace
consideran apropiadas para
una sección Acerca de. Y puedes hacer click en personas, productos, servicios,
muchas opciones diferentes. No es necesario usar una plantilla acerca de para
la sección Acerca de. Podrías detectar algo
en las
citas de ejemplo que creas que funciona mejor en esa sección para que
puedas mezclarlas y combinarlas. Pero en términos generales,
es bastante bueno. Algunas de las sugerencias
funcionan muy bien. Para nuestra sección
sobre la cervecería. Puedes ver que tienes algunas preguntas frecuentes incluidas al final
de esta categoría. Pienso algo que combina un poco de texto
con algunas imágenes más. Entonces esto parece
interesante. Y entonces podría
intercambiar mi contenido en. Entonces te voy a mostrar
una opción adicional. Hago clic en Agregar sección, y en su lugar voy a
agregar una sección en blanco. Se pueden agregar bloques y
crear desde cero. Si eliges hacerlo, si haces clic en el botón
Agregar bloque, crea una lista de todos
los diferentes elementos de bloque que
hay en Squarespace. Lo más común
es usar textos, botones en imágenes. Estoy seguro de que no es
casualidad Vose, o justo hacia la cima. Hay otros pequeños
elementos como líneas que podrías usar
para dividir el diseño. Se pueden agregar galerías, y había algunos controles de galería bastante
avanzados. Bajo galerías,
también se puede crear una presentación de diapositivas. Así que muchas opciones para jugar. Escojamos texto. Y nuevamente, una vez que
comienzas a arrastrar, ves aparecer una cuadrícula. Porque empecé con
una sección en blanco. Esto incluye los valores por defecto. Si hago clic en Añadir, Editar sección, cambiar los colores a
uno de los temas oscuros. Me vendría bien una
imagen de fondo si así lo prefiriera. Podría editar el número de
filas de creo que
no hay necesidad de hacer eso hasta que hayas
posicionado tu contenido. Así podría crear
un encabezado sobre. Hacer grasa grande. Tal vez podría crear
el texto junto a la grasa, pero hay muchas cosas
diferentes que podría hacer, pero esto es algo que
usaría si eres mejor
pensando desde cero, si prefieres trabajar
con una página en blanco. Personalmente en Squarespace, en realidad
he encontrado que es una ventaja trabajar desde un punto de partida y luego
modificarlo desde ahí. Voy a quitar
eso por ahora. Voy a cambiar el esquema de color a éste que me gusta bastante. Haga doble clic para cambiar
nuestro rumbo a aproximadamente. Fíjate cuando hice eso porque
eliminé todo el texto, solo
puedo presionar Deshacer. Debido a que seleccioné todos
los textos antes de escribir, en realidad cambiar esto de
H1 al párrafo dos. Entonces eso es una
cosita molesta que puede pasar. O bien podrías
empezar a escribir después de
la primera letra. Voy a quitar
la primera letra. O podrías
cambiar manualmente pero al final, una vez que hayas terminado con él. Y luego en el
lado derecho aquí. Y esta vez, esta no es una imagen de fondo
para esta sección. Lo que significa que podemos
hacer clic y arrastrar. Ves esta imagen en realidad
vive en la grilla. Y de igual manera nuestro texto, no
es estrictamente del tamaño H1, en realidad
está usando una función que
asegurará que este
texto llene este cuadro. Va a ir tan grande como
necesite para llenar la caja. Y esa opción, si selecciono
una parte del texto, puedes encontrar aquí en
la barra de herramientas escalar texto. Entonces, si deselecciono el texto de escala, eso ahora volverá a ese tamaño H1 y
no irá por encima de eso. Esa en realidad va a
ser mi opción preferida. Creo que me va a permitir más consistencia en el dimensionamiento a
medida que alguien se desplaza
por el sitio web. No me importa esta línea divisoria. lo mejor sólo quiero
sacarlo un poco más alto. Y luego agrandar el
tamaño de mi texto. Párrafo uno. Cierra ese espacio para
que veas que es muy fácil, particularmente cuando te
familiarizas con esto, simplemente arrastrar y soltar
y ajustar las cosas. Y solo diseño. No te preocupes por la codificación, no te preocupes por nada que tenga
que ver con el desarrollo web. Simplemente disfrutando usando la
plataforma para diseñar, razón por la
cual a muchos de nosotros nos encanta. Así que voy a elegir seleccionar entre las imágenes
de stock disponibles aquí. Echemos un vistazo a la cervecería. Otra vez. Hay uno bastante agradable. Usando esos barriles. Una vez que eso esté en su lugar. Y Squarespace escala
automáticamente los tamaños, crea copias que se
servirán dependiendo del
dispositivo que alguien esté usando. Entonces todo lo que sucede
en el fondo, solo
puedes
enfocarte en el front-end. A pesar de que estaba usando
la pestaña de campo por defecto, en realidad no estaba llenando. Estaba configurado para encajar, por lo que es chasquear entre
ellos, a veces revertirlo. Y eso ahora está
llenando nuestro espacio. Bastante contento de que
el punto focal sea el centro. Haré clic en Guardar, para guardar
mi trabajo a medida que avanzo. Y eso se ve muy bien. A lo mejor estamos abusando un poco de
barriles. Pero ese es el tipo de apariencia que quiero
expresar inicialmente. Ahora, una característica que dije que
agregaría, aún no lo he hecho. Voy a volver a abrir el modo de
edición, era un botón para leer
más sobre la empresa. Entonces esto sería solo un
breve extracto en grasas. Vamos a quitar un poco de eso. Solo estoy usando esto como copia de
marcador de posición por ahora. Y voy a hacer clic para agregar un bloque. Utilizamos bloque de botones en V. Arrastra eso hacia abajo como queremos
que se posicione. Y aquí es donde podemos
elegir entre nuestro tipo de
botón primario, secundario o terciario. Entonces terciario, generalmente más pequeño, secundario un poco más grande. Y la primaria suele ser de
mayor tamaño. Pero depende de la
configuración que hayas usado en los estilos de sitio que
revisamos anteriormente. Ahora, a pesar de estos
diferentes ajustes, todavía
eres libre de arrastrar
y soltar para el botón para
que exista en este
tamaño de cuadrícula con el que estés contento. Así que podrías tener un botón enorme que abarca todo el ancho. O puedes
alinearlo un poco más pequeño. Depende completamente de ti
en cuanto a los
colores en este momento, y solo me desplazaré hacia arriba. Entonces tienes una visión
clara de esto. Disculpas, me olvido
a veces mi
mi imagen, mi miniatura está ahí en
la pantalla por un momento, está dibujando en un color que
hemos usado para esta sección. Si hago clic en Editar sección
y luego colores, verás que si
cambiaba entre estos, el color de
nuestro botón cambiaría
realmente. Entonces quiero mantener el resto
de esta sección como estaba,
que era esta opcion oscura a. Pero en realidad me gustaría que el
botón fuera diferente. Entonces aquí es donde podemos hacer esas
personalizaciones de afinación fina que mencioné. Y en la oscuridad también, si hago clic en el botón Editar, entonces nos lleva a. Soy los estilos del sitio
en la barra lateral. Y está tratando de darnos diferentes colores que están presentes en esta
página en este momento. Ahora para ahorrarnos algo de tiempo desplazándonos por
todas estas opciones, si pongo el cursor y selecciono, ves que aparece un poco de
selección azul alrededor de esto, o puede aparecer alrededor de
diferentes bloques de la página. Si hago clic en el
botón que lo selecciona, y automáticamente nos lleva a las opciones irrelevantes
en nuestra barra lateral. Entonces tenemos una opción aquí para el botón primario fondo
negro. Si estamos usando la
oscuridad a la paleta. Te agradezco al principio esto probablemente
sea un poco para darte la
cabeza y se siente
tal vez innecesariamente complicado. Pero realmente te permite afinar
y personalizar este sitio. No siempre
vas a querer
usar los valores predeterminados
que están en su lugar. Por lo que es realmente
útil poder profundizar un poco más aquí y
elegir algunos colores personalizados. Quiero cambiar el fondo. Uno de los colores
de nuestra paleta, pero quiero usar un fondo
blanco. Entonces es realmente prominente. Y luego para el texto, porque eso ahora es
invisible, de nuevo, voy a usar un color
de la paleta, y voy a usar este negro apagado. Guarde mis cambios. Ahora algo que he notado
que o ha revertido o quizás no guardé inicialmente es el
estilo para el botón. Yo quería que eso fuera todo gorras. Y aquí está mostrando
es minúscula. Entonces para cambiar eso
rápida y fácilmente, si voy a Design Site Styles, botones, quería que
esto fuera futuro. Yo quería que fuera mayúscula. Le di un poco
de espaciado entre letras. Creo que el peso necesita
ser solo un poco más alto así que sea legible cuando se
invierte de luz blanca eso y en lugar de
entrar en primaria, secundaria y
terciaria, si quiero aplicar esto a todos
esos tipos de botones, puedo hacer clic en el botón aquí, aplicar a todos los tipos de botones. Y eso coincidirá por
estilo en todas ellas. Ahora voy a
asegurarme de guardar para los cambios y la página se actualiza. Y eso está hecho,
eso ya está en su lugar. Así que trabaja a través del sitio web, echando secciones
si no las necesitas. Aquí hay una sección. Creo que en realidad eliminaré las
próximas clases para
eliminar una sección. Si usted acaba de hacer clic en
el icono de la papelera en la parte superior derecha para eliminar eso. Y sólo unos cuantos consejos, algunos tipos de sección que
me parecen bastante efectivos. Camino. Tienes una imagen en el fondo con
algo de texto en la parte superior. Esto es en realidad un formulario de suscripción al
boletín, pero si lo quito
y coloco un bloque, y esta es
una forma bastante efectiva de cambiar el tempo de un sitio web mientras alguien se
desplaza, en lugar de ser muchos
textos o mucho duro, las imágenes a
todo color pueden ser bastante agradables para romper
secciones simplemente incluyendo tal vez un lema dentro de la imagen tan
suavemente en el fondo. Para nuestra cervecería, podría incluir decir sabor creíble
y refrescante. Eso no va
a ganar ningún premio, sino que solo demostrar
por exenciones podría funcionar. Si quisiera, podría usar esa opción de escala
para hacer ese texto. Siempre llene ese
espacio en la página. Pero estoy bastante contento con eso. Entonces si hago clic en Editar
sección colores, feliz de usar más oscuro, pero en la pestaña de fondo, voy a aumentar
la opacidad de superposición. Un poco menos de la
imagen se está mostrando a través. Y hace que los textos sean
un poco más fáciles de llamar. Por supuesto, voy
a cambiar la imagen de este estudio de yoga. Búsqueda de biblioteca, biblioteca
de stock para cerveza. Y algo que
se ve refrescante. Csv, oscura, estética malhumorada. A lo mejor ese pequeño
lúpulo sobre la mesa. Bastante así. Tiene un ambiente
bastante refrescante. Veamos cómo se ve eso. Eso se ve muy bien. Y luego vamos
a ir al formato. Y no creo que esta sección
tenga que ser tan alta. En la altura. En el momento se trata de ocupar 80% del
espacio disponible en la página. Así que vamos a tener eso. Vamos a darle. En realidad entonces perdemos
demasiados de nuestros lúpulos. Aquí, dividamos
la diferencia. 60 por ciento, eso es bastante agradable. Sección así para
mí es realmente útil, como digo, para como
romper el tempo. Entonces mientras me desplazo por el sitio, si siento que hay demasiado
de una cosa u otra, me gusta poner algo
así en el medio solo
para ralentizar las cosas. Para dividirlo y editar el orden de las secciones no
puedes arrastrar y soltar. Pero si pasas el cursor sobre una sección, puedes usar las flechas para mover esa sección hacia arriba o hacia abajo
en el orden de las páginas. Voy a hacer click para subir. Y tan fácilmente como
eso es swaps con sección
V pero estaba por encima de ella. Puedo moverlo de
nuevo si quisiera. Un sitio web fluiría así, pero voy a usar eso. Siéntate entre nuestra sección Acerca de. Y entonces podría llegar algún texto para dar
más información aquí, tal vez sobre contactos en una
cervecería que van en absoluto. Muchas opciones. Entonces
no quiero aburrirte. La idea no era guiarte a través de todas las opciones posibles, sino las más comunes
que usarías y ojalá enseñarte algunas de las herramientas y los principios que puedes usar. Entonces eres libre de comenzar a
construir tus propias páginas. Así que recuerda cuando haces
clic en Agregar sección, tienes acceso a
una amplia biblioteca
de secciones con plantillas para
comenzar e incluso intercambiar tu contenido en
todas estas secciones, están compuestas por
varios bloques. Algunas secciones especiales. Tienen contenido preconfigurado. Y te voy a mostrar
lo que eso significa. Nuevamente, esto es algo que es
Squarespace, ha ido sumando
incrementalmente. Entonces no todo cae
bajo el mismo paraguas. Pero si hacemos clic en las imágenes y elegimos una de
estas secciones de imagen, aquí
tiene muy poco icono de
ojo. Y el tooltip dice V secciones. Le permite agregar rápidamente elementos de
contenido y cambiar entre diseños sin
tener que reorganizarlos manualmente. Esa es la razón de
esta distinción. Y se aplica a
bastantes de estas plantillas de imagen. Entonces te voy a mostrar la diferencia. En primer lugar, agregaremos uno, que usa este estilo de contenido
intercambiable. Entonces, al colocarme sobre la página, estas imágenes no son bloques. Se controlan usando este botón de edición
aquí, Editar galería. Y esta
herramienta de configuración de galería vive dentro de aquí. Puedes reordenar las imágenes V, pero no puedes editar
para la cuadrícula. Un poco de ventaja de eso, si hago clic en Editar galería, pero editar sección es, puede intercambiar entre los tipos de galería
disponibles. Un momento que tenemos sencillo. Podría cambiarme a mampostería. Y luego
tienes estas herramientas para personalizar el número de
columnas para el espaciado. No te aburriré corriendo a través de algunas opciones disponibles. Pero estoy seguro de que entiende
la idea general. Entonces ese es otro ejemplo de
un tipo de página especial que
mencioné y
facilita
probar algunas opciones diferentes. Tienes presentaciones de diapositivas, reales, muchas cosas
con las que jugar y experimentar. Pero voy a eliminar
este tipo de sección por ahora. Y te voy a mostrar
la alternativa. Volvemos a las imágenes y
seleccionamos una de estas pero no tiene el pequeño I,
poco icono de información. Entonces una de estas páginas de imágenes
regulares. Entonces, si seleccioné esta plantilla, esta vez
se puede ver
como coloco el cursor sobre las imágenes, aparece
una selección azul alrededor de ellas. Y puedo arrastrar y soltar
estos alrededor de la cuadrícula. Pero lo que significa es
que no puedo ir a la
sección Editar y cambiar los
presets sin problemas. Esto es un diseño personalizado al 100 por
ciento. Entonces espero que eso te dé una
buena visión general de lo básico. Ciertamente suficientes herramientas para comenzar a personalizar y
crear algunos diseños, pero se ven realmente efectivas, intercambiando tu
contenido relevante en ellos. Así que haz un experimento de juego, mira cuáles son algunas de
las opciones. Es bastante fácil
probar algo, pero luego desecharlo o
cambiarlo a otra cosa. Así que pasa algún tiempo
haciendo eso y cuando te sientas agradable y
feliz y familiarizado con ello. Únete a mí en la siguiente lección
donde veremos algunas características adicionales que
Squarespace tiene para ofrecer.
8. Crear - Características de Misc: En esta lección, vamos a cubrir algunas características
que son bastante esenciales que aún no hemos
implementado en nuestro sitio web. Y solo me desplazaré
para que puedas tener una idea de cómo se ve mi sitio de demostración. Entonces he estado tomando
varias secciones, arrojándoles algo de contenido. Ahora hemos intercambiado
nuestras imágenes. El pie de página, que
vamos a llegar más lejos. Aquí está. El pie de página Esa es definitivamente una característica
esencial que vamos a ver en
la personalización en esta lección. He agregado una pequeña sección de
contexto aquí abajo. Vamos a crear un enlace ancla que nos
lleve a eso. Entonces vota vidas en la
parte inferior de la página principal, tendrá que aparecer
en nuestro menú en la parte superior. Entonces te voy a enseñar cómo hacer eso. He cambiado nuestro
botón para reservar en absoluto, pero vamos a agregar
enlaces sociales en la parte superior aquí. Y agregué algo de contenido a, solo
tengo dos subpáginas
para este sitio de muestra. Tan simple Acerca de la página,
pero bastante efectiva. Y nuevamente, visa solo personaliza los elementos
que Squarespace nos
da en las plantillas
y una página de proceso de elaboración de cerveza. Entonces esto solo te da una
pequeña idea de lo que se puede hacer. Y es muy rápido, muy fácil de lograr. Realmente está diseñado
primero, diseño web. Entonces comencemos por tal vez trabajando en el encabezado y
luego iremos al pie de página. Por lo que queremos agregar nuestros enlaces de redes
sociales. Y te voy a mostrar cómo he
incluido este botón, que nos lleva a un,
un libro, una página de recorrido que no está vinculada en mi navegación
rumbo a la izquierda. Así que entremos al modo de edición
haciendo doble clic. Luego coloco el cursor hacia arriba y selecciono
Editar elementos de encabezado del sitio. Verás que
tengo un botón habilitado. Si deshabilité eran botón, entonces eso desaparecería. Y si volvemos, el diseño que hemos elegido
para nuestra vista de escritorio. El diseño de cabecera que dicta cómo se posicionará cada uno de estos
elementos. Así podría fácilmente
posicionarme con
logo a la izquierda, tener una navegación en el centro, y luego cualquier botón o elemento
social a la derecha. Pero me voy a quedar
con este diseño. Y volveremos a los elementos. Habilita nuestro botón, que
me lleva a mi página alta de Booker. Nuevamente, para vincular páginas, puede escribir
la URL exacta. Si comienzas con
una barra diagonal, eso siempre te llevará
al primer directorio
después de tu sitio web. Probablemente no
quiera mirarlo esa manera para hacerlo más fácil, Squarespace te permite
comenzar a escribir con
una barra diagonal hacia adelante. Y ves una lista de
tus páginas que aparecen a continuación. Y ahí está mi
libro, una página de recorrido. Por lo que también tenemos un toggle
para los enlaces sociales. Voy a encender eso. Y se puede ver como marcadores de posición, tenemos Instagram,
Facebook, Twitter. Hacemos clic en Editar enlaces sociales. Cuando empieces a escribir. Squarespace
asigna automáticamente el icono correcto para esa plataforma social. Entonces, si empiezo a escribir
twitch ahí, puedes ver que aparece el ícono de
twitch. Para los efectos
de este sitio de demostración. Voy a dejar estos enlaces en realidad apuntando a Squarespace es perfiles de redes sociales
para esas plataformas. Entonces eso está bien. Tenemos nuestros
vínculos sociales ahí dentro. La cabeza se ve bien. Usaremos la navegación
para agregar un enlace de anclaje, que nos llevará a nuestro formulario de contacto en la
parte inferior de la página de inicio. Pero primero vamos a darle
estilo al pie de página. Así que he decidido
mantener este sitio web con un tema oscuro y puedes alternar de manera
bastante efectiva. Podrías cambiar de secciones
oscuras a secciones
claras para
romper el diseño. Pero a lo largo del
resto del sitio, he mantenido el tema oscuro
pasando por todo el camino. Entonces voy a hacerlo, la excepción a eso es
esta pequeña tira de contexto, que no me importa destacar. Pero voy a cambiar
esto por el pie de página. Entonces nuevamente, si hago
doble clic en cualquier parte la página para ingresar al modo de edición, y el movimiento para pasar el cursor sobre la sección de pie de página
aparece con Editar. Footer funciona de la
misma manera que el encabezado, pero esta vez el fitter
funciona mucho más como una página normal con bloques. Entonces, si un momento,
tenemos este diseño aquí que en realidad
usa un sistema de cuadrícula. Y puedes mover estos bloques de textos con los que nos
iniciaron alrededor. Voy a ir por algo
un poco más sencillo. Entonces esta sección aquí, no
voy a incluir, puedes elegir discretamente, lo que a menudo pongo
diseñado y desarrollado por tu nombre cuando estás
creando un sitio web para un cliente. Voy a borrar
eso por ahora. Es un tramo con texto. Y voy a tratar de centrar esto. Aquí estamos. Al otro lado del fondo. Centrar los contenidos. Pondré la
dirección en una línea, un número de contacto
en la otra línea. Ser nombrado por cervecería. Estoy muy contento de mantener
tus vínculos sociales, pero creo que los
posicionan centrados. Si hago clic en el botón Editar, en la pestaña Diseño, puedo
elegir la alineación central. También podría cambiar el tamaño, pero estoy bastante contento con eso. Y luego voy a hacer clic en
Editar sección y cambiar los colores para
todo el pie de página también. Creo que voy a ir por un negro
oscuro para
rematarlo con un bonito contraste
fuerte. Si quisiera, un pequeño
toque agradable puede ser agregar, si no el
logo completo en la parte inferior. Podría agregar tal vez las sub marcas, así que creo que voy a hacer eso. Entonces esto funciona
igual que nuestras páginas normales o agrega un bloque, arrastra una imagen. Permitir un
área bastante pequeña para esto. Significa que
voy a tener que arrastrar el resto de
mi contenido hacia abajo. Entonces, para ello, empieza por los vínculos sociales. Y si arrastras y
arrastras por debajo de V, parte inferior de la cuadrícula,
simplemente extenderá la cuadrícula por ti. Creará filas adicionales. Por el momento la cuadrícula está configurada a una
línea desde la parte superior. Entonces tus bloques adicionales
bajarán. Así que vamos a arrastrar nuestro marcador
de posición de imagen. Justo ahí. Creo que voy a darle
sobre tanto espacio. Así que un espacio bastante pequeño
para nuestra sub marca. Voy a mover el texto hacia arriba. Volveré a subir los
enlaces sociales. Y luego haré clic en Editar
contenido y subiré. Mi sub marca. Muy
son un pequeño toque, pero creo que eso
se ve muy inteligente. Y ahora te darás cuenta de una grilla. Todavía nos está dando más
líneas cuando necesitábamos. Para que no tengas que
entrar en la sección Editar. Puedes, mientras pasas el cursor,
ahí está esta pequeña, parece un ícono de párrafo, pero esto indica lo que
puedes arrastrar la cuadrícula hacia arriba. Entonces haré clic y
arrastraré eso hasta que hayamos cerrado el espacio innecesario. Guarde mis cambios. Y muy bonito, sencillo, limpio pie de página, que es la
forma en que me gusta mantenerlo. Entonces, a continuación, vamos a crear
un enlace de anclaje, pero nos va a llevar
a nuestra sección Contáctenos. Entonces esto no es tan
sencillo como podría ser. Espero que sea algo que
Squarespace pueda cambiar, pero te mostraré el método del
colorante para hacer esto. Entonces, antes que nada, necesito editar,
ingresar al modo de edición haciendo
doble clic. Y tengo que añadir un tipo
especial de bloque, y es el bloque de código. Entonces, idealmente, quiero que
este bloque se posicione lo más alto
que pueda dentro de la sección. Entonces, para habilitar eso, yendo a mover estas
secciones existentes hacia abajo un poco, realidad
puedes superponer una
sección encima de otra. Y sólo voy a
posicionar mi pedacito de código. Ahora bien, el código no
mostrará nada, va a estar oculto. No vamos a tener
esta demostración de Hello Word. Así que en realidad está bien si se
superpone como lo he hecho allí, pero solo quería
mover las cosas hacia abajo para que sea fácil para mí hacer
clic y acceder. Entonces si hago clic, Edita
el código que necesitamos
usar para crear el destino
para nuestro enlace de anclaje. El código que necesitamos usar es, y por supuesto puedes copiarlo. No es necesario memorizarlo. Y
soporte abierto y triangular p espacio id es igual. Después abrimos comillas. Y entre esas
comillas
ponemos el nombre del enlace ancla. El nombre del enlace ancla, eso es para el nombre que
usaremos cuando creamos
un enlace para él, salta a él y
aparecerá en la barra de URL. Al final mismo. Habrá un hashtag y luego la
etiqueta de anclaje que elijamos. Entonces voy a usar el contacto. Cierre esos soportes abiertos. Y luego tenemos que
cerrar esto de otro soporte abierto, barra
hacia adelante p y
cerrar con soportes. Entonces eso es tanta codificación como
ojalá tengas que
hacer para crear un sitio básico de
Squarespace. Pero hay mucho más
código que puedes agregar un inusitado para ajustar y
personalizar las cosas para siempre. Pero eso va a estar más allá
del alcance de esta clase. Entonces sin código para
nuestro destino. Etiqueta de anclaje creada. Así que recuerda su contacto. Incluso puedes copiar eso para asegurarte de que
es exactamente lo correcto. Voy a hacer click
off, guardar esa página. Y ahora necesitamos agregar un
enlace a nuestra navegación. En la barra lateral. Se
asegura de que estás debajo de las páginas. Estás viendo la navegación
principal y haz clic en el botón más para agregar lo que actualmente es la opción
final y el enlace. Y el título que elegimos
es el nombre del enlace como aparecerá en la navegación A lo largo de
la parte superior en nuestro encabezado, pero no es la etiqueta de
anclaje, Todavía no. Entonces, por ejemplo esto podría decir contáctanos, pero nuestro
enlace de anclaje real podría usar contacto que teníamos, habíamos copiado de antes. Si una forma de crear este enlace de anclaje es
usar un símbolo hash. Y luego el nombre del enlace
que hemos elegido. Tan simple como eso. Pero debido a que se puede
hacer clic en este enlace desde diferentes
páginas del sitio web, también
tenemos que agregar
una barra diagonal para indicar que
queremos que Squarespace
vuelva al directorio de inicio. Entonces estamos indicando que
este enlace de anclaje se coloca en la
primera barra diagonal hacia adelante, ese es el directorio raíz. Si eso no tiene sentido
para ti, no te preocupes. Pero créeme, funciona. Si tu enlace de anclaje o en
una página diferente, por ejemplo, si estuviera en la página acerca de, escribirías el enlace
como te muestra aquí. Entonces sería
slash hacia adelante sobre nosotros. Entonces el contacto de camioneta hashtag
que nos llevaría a esa misma posición de enlace ancla si se colocara en
una de esas subpáginas. Así que lo hemos colocado
en la página principal. Estamos usando este hashtag de barra diagonal
hacia adelante. Y luego nuestro enlace
dará clic en Guardar. Voy a arrastrar eso para que aparezca como último elemento
en nuestra navegación. Y luego a pesar de que estamos en el back-end de Squarespace, si hago clic en ese enlace, deberías ver que
nos salta a la página. Y nos ha llevado directamente a ese enlace objetivo
que creamos. Entonces esa es una forma muy
larga de hacer lo que en algunas otras plataformas
es bastante sencilla. Entonces esta es una característica que espero que
Squarespace actualice, pero al mismo tiempo no es demasiado dolor de cabeza implementar. Así que podrías agregar
tantos objetivos de anclaje y enlaces de anclaje como quisieras. Podrías usar ese mismo hashtag I'm
forward slash y tu nombre objetivo para
crear un enlace a partir de un botón de
parte resaltada del texto. Ese sería el
proceso para hacerlo. Ahora, una característica esencial final que debemos considerar
es dónde se ve el móvil. Ahora, si haces clic en la parte superior derecha, puedes alternar entre la vista de
escritorio y móvil. Y la mayoría de las veces, si diseñas primero en escritorio, Squarespace hace
un muy buen trabajo al convertir el
contenido en respuesta. Y todo se
alineara bien. Pero ahora vamos a hacer
click en esto. Y aún no he revisado
esto para mi sitio web. Y a medida que nos
desplazamos hacia abajo, solo vamos a tener que
buscar cualquier área donde quizás para espaciar
la alineación, algo no se haya alineado
justo en la vista móvil. Y aquí he visto
el primero. No me gusta el hecho de que
este botón engaña directamente a la
sección v debajo de él. Así que de nuevo, para ingresar al modo de edición, simplemente
haces doble clic en
cualquier parte de la página. Y lo que está bien es
cualquier ajuste que haga a esta vista móvil. No los va a
reflejar en la vista de escritorio si el
diseño justo y la cuadrícula cambian. Entonces voy a arrastrar solo para
crear un
espacio extracelular debajo de ese botón. Y voy a guardar ese cambio. Entonces eso soluciona ese
problema para la vista móvil. Y si vuelvo a
la vista de escritorio, nuestro diseño sigue siendo el mismo. Está diseñado de
tal manera que si
comienzas con el diseño de tu escritorio, pasas y
puedes afinar y hacer ajustes de manera
no destructiva. Si tuviera que editar
y cambiar el texto
obviamente va a cambiar se
reflejaría en ambos puntos de vista. Entonces esto es solo para cuadrículas. Cualquier cambio que realice en la
afinación fina de su posicionamiento
en la red móvil. Squarespace tiene una forma
de conservarlo, no cambiarlo, no estropear el diseño de
tu escritorio. El resto de esa página
se ve bien ya quizás un poco
demasiado espacio negativo
en la parte inferior aquí. Eso ha sido
causado por nuestro código. El enlace de anclaje, que
en la vista móvil, curiosamente, se
coloca en la parte inferior. Así que voy a necesitar
cambiar las cosas hacia abajo y supervisar quiero que mi código
aparezca en la parte superior. Ahora, una característica práctica
que puedes usar. Y creo que a mi entender, esto sólo se aplica en
la vista móvil es hay esta pequeña flecha
aquí que dice moverse hacia arriba. Y se puede mover un elemento
hacia arriba de la cuadrícula móvil. Entonces voy a hacer clic en
eso una, dos veces. Y muy abierto ahora
comienza con nuestro código. Cuando un visitante ve
sobre desde el front-end. Recuerda que estamos en el back-end. Ese código no debería crear ningún espacio que pueda ser ignorado en términos de un
diseño y este espaciado. Entonces otra vez, voy
a guardar ese cambio. También se dio cuenta en la vista
móvil para pie de página no funciona.
Como me gustaría. Me alegro de
encontrarme con algunos de estos pequeños problemas para modificar porque esto
te está mostrando lo que podrías necesitar hacer por tu sitio web. Entonces nuevamente, haga doble clic
para ingresar al modo de edición. Haz clic en Editar pie de página,
pasando el cursor sobre él. Y creo que el tema aquí
es que se trata de agregar algo de
espacio negativo a un lado. Así que voy a arrastrar y solo asegurarme de que mis
elementos crucen
por todo el ancho de la pantalla. Y entonces mi imagen, creo, puede darse el lujo de ser
un poco más pequeña. Entonces le voy a dar menos
espacio para trabajar dentro nuestra posición en el
centro de la grilla. Y luego usaré mi
práctica función de mover hacia arriba para simplemente cambiarlo a la parte superior ya
que queremos que se coloque. Por lo que solo toma unos segundos planchar algunos de los pliegues. Pero bien vale la pena revisar
tu sitio web una vez que hayas terminado y solo verificarlo. Nada de eso ha
pasado para la vista móvil. Así que no voy
a recorrer todas las páginas, pero por favor recorre
cada una de las páginas su sitio web y solo
haga pequeños ajustes, pequeños ajustes para asegurarse de que el diseño móvil se
vea como debería. Entonces estoy bastante contento con
mi sitio web de muestra. Ojalá estés contento con
lo que has creado hasta ahora. En la siguiente lección, veremos algunos
consejos profesionales que pueden ayudarte a poner ese
toque final en tu sitio web.
9. Consejos profesionales: Entonces, aunque he llamado a
esta lección pro tips, estas son cosas que busco. Habiendo hecho esto desde hace
más de diez años, diez años de experiencia
en diseño web. Estos no son
consejos difíciles de implementar, por lo que crearán un campo
profesional y terminarán en su sitio web, pero muy fáciles de implementar. Entonces nuestro primer consejo
es un icono del navegador, y puedes encontrarlo
navegando a la sección de diseño desde la barra lateral y
luego
el ícono del navegador. Y a esto se
le llama técnicamente favicon. Es un pequeño icono. Por lo que no se puede incluir algo con un alto nivel de detalle. Pero aparece si miras
hacia arriba en la parte superior izquierda de mi, ventana de
mi navegador,
Es un pequeño icono. Y en los dispositivos móviles que se usan cuando marcas sitios web, aparece como
un pequeño ícono en la esquina superior. Bastante agradable si no es de
culpa el bloque de Squarespace. Entonces tengo algo
perfectamente adecuado para esto. Tengo un icono de corona muy
simple, toma solo por parte central de uno de mis elementos de logo. Entonces voy a usar
eso como mi favicon. Así que simplemente arrastra y suelte. Entonces tiene que ser un archivo PNG, pero por lo demás Squarespace
redimensionarlo por ti. Entonces voy a ahorrar más. Aquí no aparece. Si copio esto y abro
una nueva ventana de incógnito, puedes ver que aparece ahora
que se ve realmente inteligente. Realmente tiene que
ser un icono sencillo. En algunos lugares. Es un espacio absolutamente
minúsculo, pero es un bonito toque
profesional. Algo más mientras
estamos en esta pestaña. Entonces esta es la
pestaña Diseño, la pantalla de bloqueo. Entonces probablemente te diste cuenta cuando
visité esa ventana de incógnito,
si enviaste a un posible
cliente a ver un sitio web, quizás una vez que estés
listo para revelarlo. Esta es la página que
verían si tienes la contraseña bloqueada e ingresas la
contraseña, obtén acceso. Bueno, esto es bastante genérico. Esto no va a ganar
ninguna recompensa de diseño. Así que en realidad podemos
crear algo mejor sin demasiados problemas. Así que solo un agradable toque
profesional. Si visitamos la pantalla de bloqueo de
pestañas Diseño, tenemos algunos
diseños diferentes entre los que podemos elegir. Entonces tal vez éste. Sólo para demostrarte esto. Haré clic en Guardar. Voy a volver. Y luego, si trabajas
a través de estos encabezados, puedes personalizarlo
y darle estilo a esto. Entonces sobre el branding y
los textos, si quisiéramos, podría incluir mi logo, lo cual voy a hacer. Así que eso es lindo. Evoque Cervecería. Puedes agregar un titular si
quisieras o textos corporales, pero no creo que eso
sea necesario para mí. Voy a ahorrar. Vuelve al siguiente
menú que tiene medios. Aquí realmente es donde
podemos elegir para este diseño en particular,
una imagen de fondo. Así que de nuevo, eres capaz de
buscar a través de Squarespace es imágenes de
stock o la biblioteca de imágenes que has
subido hasta ahora. Y me gusta bastante
esta abstracta. Está mostrando cerveza
arremolinándose en un vaso. Creo que eso crea un efecto
bastante agradable cuando los murciélagos subieron
y hicieron lo suyo. Entonces una pantalla de
bloqueo mucho más profesional solo nos
llevó un minuto más o menos armar eso. Si ahora visito y refresco
mi ventana de incógnito, eso va a crear una primera impresión
mucho mejor cuando un cliente viene a iniciar sesión y
visitar con emoción su nueva página web. Entonces otro consejo profesional y quizás Squarespace no estará muy contento. Estoy diciendo esto,
pero el consejo es
evitar que ciertas características de diseño se
hayan agregado a
la última versión. Si hago clic en Modo Editar y
voy a agregar una sección. Desafortunadamente, algunas de
las últimas opciones con última plantilla
Squarespace add
parecen aparecer en la
parte superior de esta página. Se han obsesionado con
este texto que se mueve lentamente, que creo que se ve horrible
desde el punto de vista del diseño. Puedes ver que aquí hay
más de ellos. ¿Qué está pasando aquí? Es para mí, es
realmente desalentador. A lo mejor te gustaría, pero mi consejo profesional es evitar
esas características engañosas. Quiero decir, mira esta. A lo mejor,
a lo mejor hay alguien ahí afuera que
lo aprecia. Pero a mí. Aunque técnicamente es
inteligente, han podido programar
la capacidad para hacerlo. Yo evitaría este
artimacosos textos móviles. Mantenga el texto, mantenga
el diseño estático. Pero si quieres
agregar un poco de micro animación es una
mejor manera de hacerlo. Y ese es mi próximo consejo profesional. Entonces, si cierro eso y
saldremos del modo de edición, absolutamente
deberías
usar la micro animación, pero úsala de la manera correcta. No tendría texto moviéndose cuando alguien está
tratando de leerlo. Entonces, si vamos a la
sección Inicio de nuestra barra lateral, visita v
Encabezado Diseño, estilos del sitio. Y es posible que te hayas
dado cuenta de esto antes, pero si no te has
metido aquí, la tercera opción
abajo son las animaciones. Y esto aplica, en mi opinión, son
micro animaciones bastante de buen gusto a todos sus elementos a
lo largo de la página web. Y la diferencia es, si hago clic en la opción de fundido. Una vez que hemos reproducido la animación, tu contenido es cuando es estático. Entonces puede ser rojo,
se puede disfrutar. No sigue moviéndose. Y para mí, creo que esa es una
diferenciación
bastante importante. Entonces voy a cambiar
con velocidad a despacio. Se desvanece en agradable y lentamente. Y pueden ver, a medida que empiezo
a desplazarme hacia abajo en la página, nuestro texto se desvanece. Y eso es simplemente perfecto. Bonita animación sutil. Si nos desplazamos hacia atrás hacia arriba, no
vuelve a circular. Hay otras opciones
para escalar es bastante bueno. Si quieres que tenga
un poco más de impacto. Algunas de las imágenes
realmente escalan en su lugar, modo que eso crea un
poco más de movimiento. Se irán diapositivas de copia de seguridad. Es otra opción de buen gusto. Así que eso crea una
sensación premium
realmente agradable mientras
navega por el sitio web. Y puedes experimentar
con estos por ti mismo, pero el clip y el flex también son opciones
bastante agradables también. Entonces lo que me gusta de esto es que
todas esas opciones
son de buen gusto. No distraen,
y solo agregan un buen
acabado profesional a tu sitio web. Entonces mi último consejo profesional tiene
que ver con el equilibrio. Y cuando se trata de diseños como visitante desplazándose
por un sitio web, si hay muchas
secciones ocupadas, demasiados textos, no hay suficiente espacio
negativo en el medio. Puede sentirse muy abarrotado
y claustrofóbico. Así que trata de crear
un cierto tempo. Aunque Squarespace te da secciones y divide tu
contenido en secciones, intenta espaciar tus imágenes. Trate de incluir mucho espacio
negativo alrededor de cualquier sección de
texto como lo tenga, e intente crear flujos
suaves y agradables para que en cualquier momento de un
visitante que se desplace hacia abajo, tal vez
haya solo
uno o dos para llamar su atención a la vez. Trate de no tener
demasiados elementos diferentes compitiendo por la atención. Para que puedas ver si ese es el
caso con este sitio de muestra. Cualquier sección dada por la que nos estamos
desplazando, generalmente solo
hay
un encabezado principal. Van a notar que hay un elemento luchando
por su atención. En las páginas donde tienes algunos elementos más se pueden mostrar juntos como
esta página de proceso. Es muy importante
incluir suficiente espacio negativo, pero esto no se
siente abrumador. Te imaginas si esto fue presionado
hasta los bordes. Si un texto cortara
más de un espacio, se sentiría muy, muy ocupado. Y donde tienes una sección
como esta, una sección más ocupada, es agradable o bien precederla o seguirla con
alguna calma agradable, quizás secciones ricas en imagen. Sólo para que de nuevo, se crea
en un agradable tempo suave. Y por último, solo
quería compartir contigo un ejemplo de esto es un sitio que creé para
un cliente mío, un fotógrafo muy talentoso. Y debido a que es
fotógrafa por algunas características que
he implementado, pero cuando es apropiado
para la cervecería, pero definitivamente para
ciertos tipos de clientes, querrás
ponerlas en su lugar. Así que notarás que hay
una agradable pantalla semi
completa efectiva porque toma como encabezado en
consideración la presentación de diapositivas medida que aterrizas en la página de inicio. Entonces ese es un efecto muy agradable. Y luego a medida que te desplazas por
toneladas de espacio negativo, ese tempo del que hablamos, para asegurarte de pasar
de rico en imagen a tal vez textos ricos y
romper bien las cosas. También hemos alternado
de la oscuridad a la luz con una sección
que es bastante efectiva. Otra vez, pensando en el tempo. Como visitante se desplaza
por este sitio. Testimonios, Squarespace, Hay bastantes plantillas y
opciones
agradables para mostrar
reseñas o testimonios. Si tu cliente tiene un
negocio donde eso va a ser importante y
un poco de toque, me gusta incluirlo para clientes en Google o trust pilot. Será para incluir en realidad un botón que diga más reseñas sobre las tomas con visitante a
esa plataforma en una nueva ventana. Para que puedan ver que estos
no solo están maquillados. Estas son reseñas
verificadas reales que pueden navegar
gratis por ellos mismos. Si tu cliente tiene
un sitio web
donde ofrece una gama de servicios
diferentes, eso no será todo de
interés para un visitante. Estoy tratando de, quizás antes de que lleguen al
final de nuestra página de inicio, presionar a un visitante para
que tome una decisión y canalizarlo hacia contenido V
que sea relevante para ellos. Y una buena manera de hacer esto, puede ser una grilla. Si solo tuvieras opciones gratuitas, eso también funcionaría. En este caso fueron seis opciones
diferentes. Y esta grilla, es solo
atraer a un visitante para que elija, mostrándole lo que podría estar buscando. Un clic a través. Se llevará a la sección
correspondiente. Y de esa manera el contenido
que encuentran en esta página es completamente
irrelevante para ellos. Si esa es
una técnica bastante innecesaria en el diseño web, estoy tratando de pensar el flujo que sus
visitantes podrían tomar sitio web de
Froogle y asegurarme que
encuentren lo que buscan para lo antes posible. Y entendiendo que no todos mirarán de inmediato
a la barra de navegación. Cuando aterrizan en un sitio web. Algunas personas, naturalmente
comenzarán a desplazarse hacia abajo
cuando visite por primera vez un sitio web que atienda a
cualquier tipo de visitante y
solo se asegure de que
tenga algo para
canalizarlos para mostrarles
lo que buscan.
10. Lanzar tu sitio web: Entonces un último paso importante. Si un sitio web que has
seguido y creado es algo que
planeas lanzar realmente. O simplemente si quieres saber el proceso para
hacerlo en el futuro, vamos a mirar y correr libres juntos
en esta lección. Entonces, por el momento, tengo un sitio web de aspecto
atractivo, pero existe usando este subdominio de
Squarespace. Y también está cerrada
al público. Entonces, a menos que proporcione acceso, nadie más
puede ver esto. Entonces, la primera etapa
antes de hacer que tu sitio web esté en vivo es elegir
un plan con Squarespace. Puedes hacerlo
visitando ajustes en la barra lateral y luego facturando. Ahora por el momento,
como puedes ver aquí, dice
que no hay ningún enlace de
suscripción activo a esta cuenta. Y por el momento estoy usando
una suscripción de prueba, que es Squarespace,
solo dándote tiempo para crear y
diseñar un sitio web. Para poner un plan en marcha, necesito hacer clic en este enlace aquí. Y luego haz clic en el botón
Actualizar. Y me dice aquí
cuántos días me
quedan en las pruebas gratuitas. Entonces voy a hacer clic en actualizar. Y entonces es simplemente un
caso de seleccionar un plan. Y a la hora de decidir
qué plan es mejor para ti. Mi consejo sería
mirar hacia abajo la lista de características y características
que no están tipificadas. Comprueba si hay error en alguno
de estos que necesites. Y obviamente
asegúrate de que el plan que selecciones incluya esas características. Así que notarás que muchas de estas características caen bajo
este rubro de comercio. Entonces, si estás construyendo
un sitio web de comercio electrónico, si estás usando esas
funciones, bueno, definitivamente
tienes que optar por
al menos para el plan de negocios. Y entonces quizás incluso uno
de los planes de comercio. Soviético, te estás
beneficiando de cosas como cero comisiones por transacción
y otras características. Hay algunas
características de marketing, pero generalmente, encontré que el plan personal para su sitio web promedio que
solo quiere una presencia en la web, quiere servir información
a sus, sus visitantes. Este plan es más que suficiente. Cuando hayas hecho tu selección, simplemente haz clic en seleccionar en
el plan correspondiente. Y entonces tendrás
la oportunidad ingresar tu información de
facturación, cosa
que no voy a hacer
contigo en este momento. Entonces voy a cerrar esto. Pero asumiremos que ahora tienes un plan de Squarespace en su lugar Cuando estés listo
para el siguiente paso, que es elegir un nombre de dominio. Ahora, si quisieras, podrías usar el subdominio que Squarespace te ofrece que está incluido en tu plan. Pero el hecho de que sea
punto squarespace.com, para mí es un poco innecesario, un poco de publicidad gratuita
para Squarespace of air. Para un sitio web profesional. No creo que
sea necesario transmitir el hecho de que hayas usado
Squarespace para crearlo. Mantenlo corto y dulce. Así que visitamos la configuración
nuevamente desde nuestra barra lateral. Y esta vez estamos viendo
el rumbo de los dominios. Si haces clic en dominios, tienes dos opciones diferentes. Una es conseguir un dominio. Y si haces clic en esa opción, Squarespace actuará realmente
como tu registrador de dominios. Para que puedas hacer una búsqueda. Ya está
recomendando en base al subdominio que
tengo en su lugar. Y puedes obtener cualquiera de
la gama habitual de dominios
desde aquí, so.com, tus
nombres de dominio locales como.co.uk, que es lo que usamos aquí, e incluso algunos de los dominios de nicho
V. Así que dark beer dot Pub, puedes obtener una gama completa aquí. Pero significa que tu nombre de dominio
está vinculado a Squarespace. Entonces, pensando en el futuro,
si
quieres que se aleje de
Squarespace y futuro, medida que tu marca
creciera, sería un poco
más complicado trasladar el dominio lejos de
Squarespace, pero no imposible. Entonces esta es de lejos
la opción más fácil. Si compras
tu dominio aquí, entonces squarespace se
encarga de eso por ti. Regresaré y echaremos
un vistazo a las otras opciones. Así que usa un dominio que poseo. Esto significa que básicamente has comprado el dominio usando
un sitio web diferente. Entonces tal vez un registrador
de dominio independiente. Entonces GoDaddy, uno-dos-tres, rojo. Esos son populares. No voy a recomendar
uno en particular. Pero cualquier registrador de dominio
que elijas usar, una vez que hayas configurado
algo con ellos y tengas tu nombre de dominio
preferido, lo ingresarías aquí. Y sólo como ejemplo, voy a poner en
la dirección web de mi. Sitio web propio. Golpeé Enter. Y Squarespace realmente buscará los detalles actuales
de ese sitio web. Una vez que encuentre esos detalles, te dará la
opción de transferir eso nuevamente a
Squarespace es control. Creo que eso derrota el
propósito de usar este método. Es probable que utilice el dominio
connect. Si selecciono esa opción, te preguntará solo
por facilidad de uso, si puedes identificar
al proveedor. A veces eso significa que mientras estás conectado a
ambos servicios, puedes simplemente hacer clic en un
botón y este hará la transferencia por ti.
Sé que ese es el caso. Nos iríamos papi.
Lo dejaré como otro dominio connect. Entonces estos son los ajustes de DNS. Pero Squarespace necesita que tenga
mi nombre
de dominio para obtener el control y
poder hacer uso
de ese nombre de dominio. Por un momento, se pueden ver los registros actuales
que tengo en rojo. Algunos de esos son privilegiados, así que eso no va
a aparecer aquí. Pero esta es la
dirección IP que estoy usando, por ejemplo así que no voy a ejecutar
el proceso para cambiar estos detalles de DNS
con cada registrador. Pero generalmente
habrá una página que te
invita a administrar
tu configuración de DNS. Y todo lo que necesitas
hacer es copiar y pegar los valores
de estas columnas. Entonces el valor de host en esa columna de host
con tu registrador. Asegúrese de que el tipo suele
haber un desplegable y algunas opciones. Así que asegúrate si es una
entrada CNAME y el tipo es nombre C. Y para los datos requeridos, a veces esto será
referido como el destino o objetivo en el sitio web de su
registrador. Entonces ahí es donde
ingresarías esta información. Entonces, una vez que revisas y
actualices estos registros, si no existe un registro. Entonces, por ejemplo, hay
bastantes registros de tipo para agregar aquí. Es posible que tenga que
agregar un nuevo registro. Entonces solo ingresa estos datos. Entonces, si una vez que has ingresado todos esos registros en el sitio web de tu
registrador, haces clic en Actualizar en esta página. Y si lo has hecho correctamente,
tienes
que permitir
unos minutos para que eso se propague, se actualice. Pero empezarás a ver
que los valores coincidentes aparecen en el
campo de datos actual y serán verdes si eso es correcto. Entonces, una vez que consigues que todos
esos registros aparezcan como verdes,
entonces eso es todo. Tu dominio estará en su lugar
y esa etapa está completa. Entonces eso es un poco técnico. Puedes ver por qué
squarespace ha incluido la opción de permitirles
administrar esto en tu nombre. Entonces, si esto se siente un poco
más de lo que te sientes cómodo
para trabajar, y luego solo haz que Squarespace
lo administre por ti. Entonces el paso final, y esto, lo prometo, es mucho,
mucho más fácil que trabajar
con la configuración de DNS, es hacer que su sitio sea
visible para el público. Entonces, una vez que tenga
un plan en su lugar, una vez que su
nombre de dominio esté en su lugar, puede ir a la configuración
para la disponibilidad del sitio. Y siempre que tenga
un plan en su lugar, esta opción,
el público no estará atenuado. Simplemente haga clic en
la casilla de verificación para público y haga clic en Publicar. Y eso es todo. Su sitio estará
oficialmente en vivo. El enlace para enviar personas a voluntad, ese será el nombre de dominio
que hayas puesto en su lugar. Y eso es lo que
ingresarías en la barra de URL. Eso es lo que
enviarías para que las personas visiten tu nuevo sitio web. Sin embargo, para entrar al
backend y obtener acceso a la barra lateral y v herramientas de edición de
Squarespace. Aún tendrías que
visitar este
subdominio de Squarespace. Entonces vale la pena llevar
un registro de los dos.
11. Conclusión: Bien hecho. Si estás viendo esto, probablemente
significa
que te gustó lo que viste y decidiste
darle a Squarespace e intentarlo. Y ojalá lo
siguieras. Tienes una buena idea de lo que Squarespace
te permite crear. Y ojalá hayas
podido crear tu propio
sitio web de muestra en el camino. Espero seguir
adelante y ver mi proceso para crear
el sitio web de la cervecería
también le haya brindado un
flujo de trabajo viable que
puede usar para crear sitios web
para futuros clientes. Realmente nos hemos centrado en una visión general y los
elementos esenciales que necesitas, pero es posible
sumergirte mucho más. Hay muchos
recursos por ahí. Si quieres ampliar tus
conocimientos usando Squarespace. Si siguió junto
con el proyecto de la clase, asegúrese de
compartir un enlace a su creación en el área de Proyectos de
Clase V. Me encantaría ver lo que has
podido armar. Siéntete libre de dejar
una reseña si has disfrutado de la clase y no
olvides seguir
mi perfil para que ojalá pueda
verte en la siguiente.
Jason Miller, Freelance Graphic Designer
