Cómo cambiar el logo en una sola página de Squarespace
Si te pasa que tu logotipo funciona perfectamente bien sobre ciertos colores de fondo, pero no tiene suficiente contraste sobre otros colores, fotografías o videos, en este tutorial te enseño cómo subir un logo alternativo a tu sitio web en Squarespace.
Te enseñaré 2 métodos:
El primero te ayudará a asignar un nuevo logo a los temas de colores que no combinan bien con tu logo original. De esta forma, podrás activar el logo alternativo siempre que selecciones el tema de color. Es muy práctico para implementar el logo alternativo en más de una página.
El segundo método, es más simple pero sólo funciona en una única página de tu elección.
Marcas de tiempo:
00:58 Cómo está organizado este tutorial
02:49 No poner una imagen de logotipo y dejar el texto
04:07 Configuración del estilo del menú de navegación
05:16 Problemas de la configuración de la navegación en modo ADAPTADO
06:41 Método 1 para instalar un logo alternativo en varias páginas
13:52 Método 2 para instalar un logo alternativo en una página específica
16:50 Subir más de un logo alternativo por tema
Método 1 para cambiar el logo en varias páginas
Para poder implementar este código necesitas familiarizarte con los temas de colores de Squarespace y con la forma en que se identifican en el código (su nombre en inglés) para que, en el paso 3, puedas identificar el indicador que debes colocar en el código y así adaptarlo a tus necesidades.
MUY CLARO 1 = White
MUY CLARO 2 = White bold
CLARO 1 = Light
CLARO 2 = Light bold
VIVO 1 = Bright reverse
VIVO 2 = Bright
OSCURO 1 = Dark
OSCURO 2 = Dark bold
MUY OSCURO 1 = Black
MUY OSCURO 2 = Black bold
Paso 1
Sube a Squarespace el archivo de tu logo alternativo
Desde Sitio web, dirígete a Páginas y haz scroll hasta el final del menú para llegar a Herramientas para sitios web y selecciona CSS Personalizado.
Haz clic en Archivos personalizados y sube el archivo de tu logo alternativo (recomiendo que sea un archivo PNG con fondo transparente con las mismas dimensiones del archivo del logo original).
Paso 2
Instala el código para activar el nuevo logotipo.
Copia el código que encontrarás aquí abajo y pégalo dentro del mismo apartado de CSS Personalizado.
/***** Logo (color por tema) *****/
[data-section-theme="tema"]
{
.header-mobile-logo, .header-title-logo {
img { content: url('');
}
}
}
Adapta el código a tus necesidades
Cambia el tema [parte del código entre corchetes]. Selecciona el código que aplica al tema en el que quieres instalar el logo alternativo (ver tabla abajo).
Coloca el cursor entre las comillas de la línea content: url(''); y haz clic en el archivo personalizado que subiste para poblar el código con el enlace que squarespace le asignó al archivo que subiste.
Dale a GUARDAR antes de salir.
Selecciona el código de tu tema
Copia sólo la parte entre corchetes [] .
MUY CLARO 1 = [data-section-theme="white"] MUY CLARO 2 = [data-section-theme="white-bold"] CLARO 1 = [data-section-theme="light"] CLARO 2 = [data-section-theme="light-bold"] VIVO 1 = [data-section-theme="bright-reverse"] VIVO 2 = [data-section-theme="bright"] OSCURO 1 = [data-section-theme="dark"] OSCURO 2 = [data-section-theme="dark-bold"] MUY OSCURO 1 = [data-section-theme="black"] MUY OSCURO 2 = [data-section-theme="black-bold"]
Paso 3
Activa el tema de color
Para ver el nuevo logo en acción, cambia el color de la primera sección de la página donde lo necesites.
Método 2 para cambiar el logo en una sola página
Si quieres cambiar el logo en una única página específica, vamos a usar un método un poco más simple. Este método funciona únicamente en si cuentas con una suscripción a Squarespace en el Plan Empresa o mayor ya que el apartado donde colocaremos el código no está disponible para usuarios del Plan Personal.
Paso 1
Sube a Squarespace el archivo de tu logo alternativo
Este paso es igual que el paso uno del primer método:
Desde Sitio web, dirígete a Páginas y haz scroll hasta el final del menú para llegar a Herramientas para sitios web y selecciona CSS Personalizado.
Haz clic en Archivos personalizados y sube el archivo de tu logo alternativo (recomiendo que sea un archivo PNG con fondo transparente con las mismas dimensiones del archivo del logo original).
A diferencia del método anterior, debemos obtener el enlace que Squarespace asignó al archivo del logo alternativo. Coloca tu cursos en cualquier parte de la caja donde se escribe el código y haz clic en el archivo personalizado que subiste. Aparecerá un enlace que debes cortar. Pégalo en algún procesador de textos como la app de notas ya que necesitarás este enlace en el paso 3.
Importante: corta el enlace para borrarlo del apartado de CSS Personalizado, ya que si lo dejas ahí puede romper otros códigos que tengas habilitados.
Paso 2
Instala el código en la página de tu elección
Copia y pega el siguiente código en la página que desear cambiar. Para ello, haz clic en la “tuerquita de configuración” de la página correspondiente, dirígete a AVANZADO y pega el código en el ENCABEZADO DE LA PÁGINA.
Luego coloca el cursor entre las comillas de la línea background-image:url(''); y ahí pega el enlace de tu archivo personalizado.
Dale a GUARDAR.
El logo alternativo debe aparecer en la página.
Facilítate la tarea de diseñar y elige tu plantilla Premium:
Navega por categorías
y recuerda:
#SéDiferenteHazLaDiferencia
