En Diseño, puede definir opciones de diseño globales o para todo el sitio, como tamaño de fuente, color, configuración de diseño, botones y más, para garantizar un estilo consistente en toda la página. 

Para definir la configuración de diseño, haga clic en Diseño en la navegación superior.

Verá diferentes pestañas en Diseño que le permiten definir en todo el sitio:

• Texto: Puede seleccionar la fuente, el color, el tamaño, la altura de línea, etc., que se usará para los textos predeterminados, la negrita y los enlaces. También puede definir esto para los títulos H1 a H6. 
• Colores: Elige tu paleta de colores para el sitio web. Define el color de fondo, el color principal, el color secundario y el color de la fuente. También puedes preseleccionar colores personalizados. Todos los colores que hayas definido aquí serán visibles en todas las configuraciones donde puedas seleccionar un color. 
• Botones : define texto, color, borde, espaciado, sombra y otras opciones para tus botones, en estado predeterminado pero también al pasar el mouse sobre ellos o cuando están activos. 
• Diseño : En Espaciador, puede definir el ancho y el relleno del contenedor global del sitio. En Características, puede seleccionar la duración y la función de la transición para definir el comportamiento de un menú desplegable. 
• Tienda : determina cómo se muestran los diferentes elementos de la tienda. 

Estas son las configuraciones globales que se aplicarán a cada nuevo elemento. Sin embargo, puedes sobrescribirlas en un elemento o en un preajuste. 

Este artículo es una traducción del original en inglés titulado “Design settings” publicado por Sitejet.

En este artículo, explicamos qué es un favicon, por qué deberías tener uno para tu sitio web y cómo puedes cargar el tuyo en Sitejet.

Conocimientos básicos

Favicon es la abreviatura de “ícono favorito” y es el pequeño icono o logotipo que aparece junto al título de un sitio web en las pestañas, marcadores y favoritos del navegador. Su propósito es ayudar a los usuarios a encontrar sus páginas favoritas guardadas más rápido. Al fin y al cabo, una imagen vale más que mil palabras.

Anteriormente, el favicon también se podía encontrar junto a las URL en el navegador, pero ahora que el cifrado se ha vuelto más común, generalmente se muestra allí un ícono de candado.

Los faviconos siempre son cuadrados y pueden tener dimensiones de píxeles de 16×16, 32×32 o 64×64.

Hay muchos generadores de favicon disponibles en la web, y puedes usarlos para crear un favicon a partir de tu logotipo con solo unos pocos clics.

Faviconos en Sitejet

Puedes agregar un favicon en Sitejet con solo unos pocos clics:

1. Haga clic en Más en la esquina derecha de la navegación superior.
2. Seleccione Configuración del sitio web
3. En el menú que se abre a la derecha, haz clic en la imagen “Favicon”
4. Seleccione su archivo de favicon usando el cuadro de diálogo de carga que aparece
5. Tu favicon ahora aparecerá en la imagen junto a “Tu sitio web” como vista previa.
6. Al hacer clic nuevamente en la imagen “Favicon” podrá elegir otra imagen si lo desea.
7. Al hacer clic en la “X” que ahora aparece en el lado derecho podrá eliminar por completo el favicon.

Este artículo es una traducción del original en inglés titulado “Add a favicon” publicado por Sitejet.

Las migas de pan le brindan una descripción general útil del elemento y la jerarquía preestablecida y le permiten navegar rápidamente a ciertos elementos.

Al principio, siempre verás la página en la que te encuentras (en este caso, ”  Inicio “). Si haces clic en cualquier elemento de tu página, verás la jerarquía de los elementos anidados. Los elementos principales siempre están a la izquierda. Esto te permite navegar a todos los elementos, incluso a aquellos a los que no podrías acceder haciendo clic en el editor porque están superpuestos. En este ejemplo, hicimos clic en una imagen (indicada por su borde naranja y es el elemento más a la derecha en la ruta de navegación). 

También verá las clases que están asociadas a los elementos en azul después del tipo de elemento. 

Al hacer doble clic en un elemento, se abrirá su configuración. También puede desplazarse por las rutas de la jerarquía con las teclas [ARRIBA] y [ABAJO]. Al pulsar [ENTER], también se abrirá la configuración del elemento.

Cada elemento tiene su propio ID. Puedes copiarlo al portapapeles mediante el menú contextual (haz clic derecho en cualquier parte del editor y haz clic en ” Copiar ID de elemento” para obtener el ID del elemento situado más a la derecha en la ruta de navegación).

Los pequeños iconos junto al nombre del elemento indicarán algunas características especiales de este elemento:

• Icono de paleta de colores  : este es el  contenedor principal de un ajuste preestablecido, por ejemplo, el encabezado, el pie de página o cualquier elemento prediseñado.
• Icono de estrella : Este elemento tiene una animación.
• Icono de imagen: Este elemento tiene una imagen de fondo en este contenedor
• Icono de enlace : Este  elemento está vinculado a algo.

Las migas de pan también son útiles para mantener diseños limpios. Permite identificar fácilmente varios contenedores dentro de otros y determinar si todos son realmente necesarios.

Este artículo es una traducción del original en inglés titulado “Breadcrumbs” publicado por Sitejet.

Sitejet ofrece una gran variedad de fuentes que puedes añadir fácilmente a tu proyecto y usar. En este artículo, te mostraremos cómo añadir más fuentes a un sitio web, personalizarlas e incluso subir las tuyas.

Añade más fuentes a tu sitio web

Para agregar una fuente a su sitio web, abra el administrador de fuentes en el generador de sitios web siguiendo estos pasos:

1. Haga clic en “Más” en la esquina superior derecha.
2. Seleccione el elemento de menú “Fuentes”
   

Se abrirá el administrador de fuentes a la derecha de la pantalla. Aquí podrá ver las fuentes ya asignadas a su proyecto en “Fuentes seleccionadas”, así como muchas otras fuentes que puede previsualizar con texto de muestra haciendo clic en “Fuentes disponibles”. 

Puede cambiar el texto de muestra directamente en el administrador de fuentes para ver rápida y fácilmente cómo se vería el texto deseado con esta fuente. Para ello, haga clic en el texto de muestra e introduzca el texto deseado. Si desea previsualizar el nuevo texto de muestra para todas las fuentes, puede hacer clic en el botón “Copiar texto a todas las vistas previas”.

Una vez que haya elegido una fuente, haga clic en el símbolo más a la derecha para agregar la fuente a su proyecto.

La fuente seleccionada se mostrará en la parte superior y estará disponible para su proyecto. Puede configurar las fuentes predeterminadas para el texto normal (Predeterminado) o para los titulares (Titulares) marcando la casilla correspondiente.

También puedes personalizar las fuentes añadidas a tu proyecto haciendo clic en el icono de configuración. Esto abrirá más opciones para la apariencia de la fuente. En los elementos de texto, solo estarán disponibles los estilos de fuente que selecciones aquí marcando la casilla.

Personalizar fuentes

Por supuesto, hay ajustes detallados disponibles para cada fuente. Para acceder a ellos y modificarlos, simplemente haga clic en “Diseño” en la barra de navegación superior y se abrirá la pestaña “Texto” . Aquí puede ajustar las opciones de fuente para textos y titulares. Ajustando la ventana gráfica en la barra de navegación superior, también puede definir el tamaño de fuente para tabletas y dispositivos móviles. 

Subir fuentes

Si desea utilizar una fuente que no está en la lista de “Fuentes disponibles”, puede cargar la suya haciendo clic en “Cargar fuentes” y seleccionando el archivo desde el administrador de medios o cargando el archivo desde su computadora. 

Recomendamos usar los formatos WOFF o WOFF2, ya que están optimizados para su uso en navegadores modernos. Si solo dispone de otro formato, puede usar herramientas en línea como Font Squirrel Webfont Generator para convertir a formatos de fuentes web, incluido WOFF. Sin embargo, por lo general, también se admiten los formatos .ttf, .eot y .svg.

Seleccionar fuentes

Una vez que haya añadido fuentes a su sitio web, estarán disponibles en todos los elementos que muestran texto, a menos que su fuente esté configurada mediante propiedades predefinidas. En el modo de edición del cuadro de texto, puede seleccionar una fuente del menú desplegable que aparece al hacer clic en el icono “A”. Puede ver más detalles en la imagen a continuación:

Este artículo es una traducción del original en inglés titulado “Add and select fonts” publicado por Sitejet.

Para evitar que los visitantes de un sitio web abandonen el sitio cuando se produce un error, puede crear páginas de error personalizadas para informarles del problema. En este artículo, explicaremos cómo crear este tipo de página en Sitejet.

Conocimientos básicos

Los dos errores más comunes que pueden ocurrir al visitar un sitio web son “404 – Página no encontrada” y “403 – Acceso denegado”. Si no se crean páginas de error personalizadas para estos errores, aparecerá una página blanca poco atractiva con texto negro informando al usuario del problema. Esto da una mala impresión y desalienta a muchos visitantes, obligándolos a abandonar la página. Para evitarlo, Sitejet le permite crear sus propias páginas de error personalizadas.

Páginas de error en Sitejet

Para crear páginas de error personalizadas, siga estos pasos:

1. En la parte superior del Creador de sitios web (CMS), haga clic en “Páginas” en el menú
2. Cree una nueva página desde el menú “Páginas” haciendo clic en “Nueva página” o duplique una página existente
3. Dale a tu página recién creada un nombre adecuado según el tipo de error
4. Haga clic en la flecha hacia abajo para obtener más configuraciones
5. En el campo “Tipo”, seleccione “Página 403” o “Página 404”

Dependiendo del “Tipo” que seleccione al crear la página, ya sea “Página 403” o “Página 404”, la página se mostrará en el futuro cada vez que ocurra el error respectivo.

En la siguiente captura de pantalla, encontrará el menú “Páginas” con un ejemplo de cómo configurar la página de error al crearla.

Luego, puedes editar la página como lo harías con cualquier otra página a través del Creador de sitios web (CMS).

Este artículo es una traducción del original en inglés titulado “Custom error pages (404, 403)” publicado por Sitejet.

Los sitios web multilingües creados con Sitejet reconocen el idioma del navegador de los visitantes y les muestran automáticamente el idioma correspondiente, si está disponible. Si su sitio web no tiene una versión disponible para el idioma del navegador del visitante, se usará el idioma predeterminado. Sugerimos usar el inglés como idioma predeterminado, ya que facilita la comprensión del contenido del sitio por parte de los visitantes, incluso si su idioma nativo no está disponible. 

Sitejet proporciona los idiomas y los transfiere al navegador. Según el idioma configurado en el navegador del visitante, se muestra el sitio web correspondiente. En principio, no es necesario configurar un idioma principal. El idioma lo elegirá el navegador y el sistema del visitante. 

Configurar varios idiomas

Para ilustrar cómo añadir un idioma a su sitio, le mostraremos cómo añadir una versión en alemán a un sitio web en inglés. Los idiomas se pueden gestionar en la configuración del sitio web. Para activar la función multiidioma, siga estos pasos:

1. Haga clic en “Más” en la esquina derecha del menú superior.
2. Seleccione “Idiomas” para acceder a la configuración de idioma.
3. Haga clic en el campo “Multiidioma” y seleccione “Habilitar multiidioma”.

Tras activar el multiidioma, verá que el idioma predeterminado ya aparece en la lista. Está en gris porque no se puede eliminar ni cambiar. Pase el ratón sobre él y aparecerá un símbolo “+” a la izquierda. Haga clic en él para añadir otro idioma al proyecto. 

A continuación, haga clic en el campo vacío para seleccionar un idioma de la lista desplegable. En este caso, seleccionaríamos “Alemán”. A continuación, haga clic en el icono de guardar en la barra de menú de la esquina superior izquierda del Creador de Sitios Web (CMS) o utilice la combinación de teclas [Ctrl] + [S] para guardar el proyecto. La opción “Alemán” aparecerá en gris y ya no se podrá cambiar.

Sitejet ha duplicado todas las páginas creadas previamente en segundo plano y ha almacenado la información de idioma necesaria. Ahora, abra el gestor de páginas del idioma correspondiente haciendo clic en el botón de enlace a la derecha del idioma. En este ejemplo, abriremos el gestor de páginas en alemán:

En la parte superior de la vista, ahora tienes pestañas para cambiar entre los idiomas. En el área “Nombre”, encontrarás la abreviatura ISO del idioma correspondiente. En este caso, es “de” para alemán. Tras añadir un nuevo idioma, solo se activa la página de inicio, ya que siempre debe haber una. Las demás páginas también se pueden crear haciendo clic en “Traducir”.

Si desea que todas las subpáginas se creen de forma predeterminada al agregar un nuevo idioma, puede cambiar esta configuración abriendo el menú de hamburguesa en la esquina superior izquierda, haciendo clic en “Preferencias” y cambiando el “Modo de copia de idioma” a “Copiar todas las páginas”. 

Tenga en cuenta que los cambios en las páginas que se realizan en un idioma no afectan la estructura de las páginas en otros idiomas. 

También puedes modificar la configuración de SEO y otros detalles por separado para cada página de cada idioma, como se describe en nuestros artículos sobre SEO y navegación .

A partir de ahora, las páginas respectivas ya no serán accesibles a través de www.your-domain.com/subpage , sino a través de  www.your-domain.com/en/subpage o www.your-domain.com/de /subpage. 

Permitir que los visitantes seleccionen un idioma en su sitio

Como mencionamos antes, si hay una versión de su sitio web disponible que coincida con el idioma del navegador del visitante, este será redirigido automáticamente. Sin embargo, puede permitir que los visitantes decidan qué versión desean ver. Puede hacerlo añadiendo la configuración predeterminada “Idiomas” a su sitio. Vaya a la categoría “Funciones” en la barra lateral y arrastre y suelte la configuración predeterminada “Idiomas” en su página.

Al hacer clic en la configuración preestablecida y ir a “Idioma”, puede seleccionar cómo se deben mostrar los idiomas:

Puede elegir entre códigos de país, banderas o texto.

URL y “hreflang”

Sitejet coloca automáticamente “hreflang” para todos los idiomas disponibles de la página a la que se accede actualmente, por ejemplo, www.sitejet.io/en/templates , de la siguiente manera:

“Hreflang” también se usa en el elemento de idioma para indicar a los motores de búsqueda a qué idioma dirige el enlace. Los demás enlaces no contienen “hreflang”, ya que en esos casos siempre están en el mismo idioma.

Las URL canónicas expresan la URL real bajo la cual se puede acceder a la página abierta actualmente si se debe acceder a ella a través de varias URL (para evitar contenido duplicado) y, en realidad, no tienen nada que ver con los idiomas.

Desactivar multiidioma

Si desea desactivar el multiidioma en un sitio web, debe eliminar todos los demás idiomas para que solo haya uno disponible. A continuación, puede seleccionar “Desactivar multiidioma”.

Este artículo es una traducción del original en inglés titulado “Create a multilingual site” publicado por Sitejet.

La Barra de Consentimiento de Cookies es una solución nativa de Sitejet que bloquea todo el código JavaScript de terceros hasta que el visitante haga clic en el botón para aceptar las cookies. Para añadir la Barra de Consentimiento de Cookies, haga clic en la categoría ” Características ” en la barra lateral izquierda y arrastre y suelte el ajuste preestablecido de la Barra de Consentimiento de Cookies en el sitio web.

Tenga en cuenta que la barra de consentimiento de cookies solo se añadirá al sitio en el que está trabajando actualmente. Para garantizar que sea visible en todas las subpáginas, le recomendamos añadirla al pie de página del sitio web y usar referencias .

Nota: Tenga en cuenta que el RGPD es un tema muy extenso y abstracto, sujeto a frecuentes modificaciones debido a la nueva jurisprudencia. La información y las funciones que compartimos y proporcionamos no constituyen asesoramiento legal. Para obtener asesoramiento completo y experto sobre el RGPD, le recomendamos contactar con un abogado. Este tema también se ha debatido extensamente en nuestra comunidad. 

Incluir en la lista blanca herramientas de terceros

Si desea excluir widgets específicos de terceros del bloqueo, puede agregarlos a la lista blanca agregando el siguiente código a sus metaetiquetas en la configuración del sitio web:

<script>!function(w,s,b){Array.isArray(w[s])&&w[s].push(b)}(ventana,'YETT_WHITELIST',/DOMINIO-DE-TERCEROS/)</script>

Debe reemplazar THIRD-PARTY-DOMAIN por el nombre de dominio (o nombre de archivo) de su script de terceros, por ejemplo:

<script>!function(w,s,b){Array.isArray(w[s])&&w[s].push(b)}(ventana,'YETT_WHITELIST',/third-party.com/)</script>

También puedes definir varias URL utilizando |

<script>!function(w,s,b){Array.isArray(w[s])&&w[s].push(b)}(ventana,'YETT_WHITELIST',/third-party.com|script-name.js/)</script>

o simplemente usar palabras clave, por ejemplo, para desbloquear la tienda Ecwid:

<script>(función(w,a,i){w[a]=w[a]||[];w[a].push(i)})(ventana,'YETT_WHITELIST',/ecwid|tienda|ecomm|nueva-interfa

Este artículo es una traducción del original en inglés titulado “Sitejet’s Cookie Consent Bar” publicado por Sitejet.

La función de exportación está disponible si se suscribe al plan Sitejet Team o superior. Puede encontrar más información sobre nuestros planes y sus ventajas en nuestra página de precios o en nuestro artículo sobre cómo elegir el plan Sitejet adecuado .

La función de exportación

Puede exportar el sitio web en el Creador de sitios web. Para ello, haga clic en el menú desplegable en la esquina izquierda del editor. Allí encontrará la opción ” Exportar sitio web” . Lea atentamente las instrucciones y haga clic en “Crear y descargar archivo ZIP” .

Tenga en cuenta que su sitio web debe ser accesible para que la exportación funcione. Esto significa que debería poder ver su sitio web al pasar el cursor sobre el icono del ojo en la barra de navegación superior del Creador de sitios web y hacer clic en “Abrir vista previa del sitio web” . 

Si ve una página de error, podría deberse a que ya agregó un dominio, pero este no está configurado correctamente para mostrar el sitio web. Tenga en cuenta que la exportación no es posible para sitios web que solo se ejecutan en un subdominio. Para iniciar la exportación, simplemente haga clic en el menú desplegable en la esquina superior izquierda y seleccione “Exportar sitio web”. Lea atentamente las instrucciones de la superposición y luego haga clic en ” Preparar y descargar ZIP” para descargar el archivo.

Tenga en cuenta que el sitio web se exportará en el idioma seleccionado. Este es el idioma que puede ver en la Vista de detalles: 

Si tiene un sitio web en varios idiomas y desea exportar todos los idiomas, le recomendamos cambiar el idioma del sitio web aquí y exportarlo nuevamente. 

Limitaciones

Recuerda que, en cuanto alojes un proyecto de Sitejet con un proveedor de hosting externo, las herramientas y la gestión de contenido de Sitejet dejarán de estar disponibles. Esto significa:

• Sus clientes ya no podrán realizar cambios en su sitio web por sí mismos (a menos que estén familiarizados con la programación de sitios web)
• Las direcciones de correo electrónico deben ser administradas por usted o su cliente
• Proteger el sitio web con un certificado SSL se convierte en su responsabilidad
• Si desea realizar cambios, usted es responsable de garantizar que su cliente le proporcione los datos correctos y que los asigne al sitio web.
• Algunas funciones ya no estarán disponibles, incluidos los formularios de contacto , las Colecciones , algunas fuentes, la configuración predeterminada de la Barra de consentimiento de cookies y la función para mostrar y ocultar elementos en un momento determinado.

Este artículo es una traducción del original en inglés titulado “Export a website” publicado por Sitejet.

Este artículo le proporcionará toda la información para crear y mostrar un submenú atractivo para ayudar a los visitantes de su sitio web a navegar por él.

Tiene dos opciones para agregar un submenú/menú desplegable a una barra de menú, dependiendo de cómo cree el menú en primer lugar: 

• Automático: Deja que el sitio web cree tu menú y submenú según la estructura de tus páginas
• Personalizado: crea el submenú tú mismo para estructurarlo como lo necesites

Estructura automática del menú

Al crear automáticamente el menú en tu sitio web, ve a Páginas  y arrastra y suelta para crear un submenú. Asegúrate de mover la página que debería estar en el submenú hacia la derecha al pasar el cursor sobre la otra página hasta que aparezca una flecha naranja y luego suéltala allí. 

Una vez que hayas soltado la página, se verá así. Por supuesto, puedes agregar más subpáginas a una página:

Estructura de submenú personalizada

Cuando creas un menú personalizado, puedes crear un submenú mediante arrastrar y soltar, pero en este caso, irás a los elementos del menú en lugar de a las páginas.

Allí, tomará el elemento del menú que debería formar parte del submenú y lo arrastrará sobre otro elemento. Asegúrese de estar completamente a la derecha al pasar el cursor sobre el otro elemento hasta que vea una línea naranja con sangría. 

Haga clic en el ícono de vista previa (ojo) en la esquina superior izquierda de la navegación del editor y, al pasar el cursor sobre el elemento del menú “principal”, verá que se creó un menú desplegable.

En el escritorio, se verá así:

En tabletas y dispositivos móviles, verá los elementos del submenú directamente debajo de la sección principal.

Este artículo es una traducción del original en inglés titulado “Add a submenu” publicado por Sitejet.

Este artículo le mostrará cómo configurar un excelente menú para que sus visitantes interactúen con él o cómo el Creador de sitios web hace el trabajo por usted. 

Cuando comience su viaje hacia su sitio web y elija una plantilla para comenzar, descubrirá rápidamente que todas las plantillas tendrán un menú diseñado de manera predeterminada. 

Si desea añadir un menú en una subpágina nueva o vacía, o usar un diseño de menú diferente, puede seleccionar uno de nuestras secciones de menú prediseñadas. Las encontrará en la categoría Encabezado , en la barra lateral izquierda de contenido.
Una vez que haya añadido una sección de menú, puede hacer doble clic en el elemento de menú para abrir el panel de configuración a la izquierda. 

Aquí puedes decidir si quieres que el menú se cree automáticamente ( Auto ) o si quieres configurar el menú por tu cuenta, que sería la  opción Personalizado  . 

• Automático: Al seleccionar “Automático”, el menú se generará automáticamente usando las subpáginas que haya añadido en  “Páginas”  para este sitio web. Esto solo es posible si tiene un sitio web con varias páginas. Si desea que ciertas subpáginas no se muestren en el menú, puede ir a  “Páginas” , hacer clic en el  icono de configuración  de la página deseada y desactivar la  casilla ” Menú”  en  “Configuración”.  Para cambiar el orden de los elementos del menú, simplemente arrastre y suelte para mover las páginas a su posición.

  

• Personalizado: Un menú personalizado es necesario si tiene un sitio web de una sola página con diferentes secciones que desea enlazar. También puede usar esta opción si tiene un sitio web de varias páginas y simplemente desea personalizar los elementos según sus necesidades. Al seleccionar  “Personalizado”  , verá una lista de elementos del menú. Puede agregar más elementos al menú colocando el cursor sobre uno existente y haciendo clic en uno de los iconos “+” que aparecen. Para eliminar un elemento, haga clic en el icono de la papelera al colocar el cursor sobre él.

  

  • Tienes diferentes opciones para vincular un elemento del menú. Puedes vincularlo a:
    • Ninguno : Si no quieres vincular nada
    • Página : Elija entre las subpáginas existentes
    • Externo : agrega una URL externa o vincula un archivo
    • Elemento : utilice el selector de elementos para seleccionar un elemento en el sitio web
    • Un número de teléfono
    • Una dirección de correo electrónico

Para editar el estilo de la barra de menú y los elementos del menú, incluidos los menús desplegables (llamados  Submenú ), acceda a la configuración de la barra de menú haciendo doble clic en la etiqueta de la barra de menú en la parte superior del elemento. 

Tutorial en vídeo

Este artículo es una traducción del original en inglés titulado “Add a menu” publicado por Sitejet