En este artículo, aprenderá cómo agregar un logotipo y cómo puede utilizar la detección de identidad corporativa integrada de Sitejet para extraer los colores del logotipo.
Video
Agregar un logotipo
Para cambiar el logotipo de su sitio web siga estos pasos:
Haga clic en Más en la esquina derecha de la navegación superior.
Seleccionar configuración del sitio web
Cambiar el logotipo en el panel derecho.
Para agregar un logotipo a su sitio web, siga estos pasos:
Haga clic en la categoría Elementos en la barra lateral de contenido a la izquierda
Busque el elemento Logotipo y arrástrelo a la posición donde desea tener el logotipo en su página
Cada vez que cambie su logotipo en su configuración, se cambiará automáticamente de forma global en el sitio web.
Utilice los colores del logotipo para su sitio web
Para ahorrar tiempo al elegir colores, puede usar la función integrada de detección de color. Al subir un logotipo, sus colores se extraerán automáticamente. Esto abrirá una superposición donde podrá seleccionar nuevos colores para el sitio web que combinen con el nuevo logotipo. Si decide cambiar de color, tenga en cuenta que la paleta de colores seleccionada en la sección “Colores de diseño” se sobrescribirá.
Este artículo es una traducción del original en inglés titulado “Add a website logo” publicado por Sitejet.
Regrese al editor y reemplace el Unicode actual en el CSS de su sitio web con el nuevo Unicode:
Pulse el botón Guardar en el editor de código para ver el resultado:
Este artículo es una traducción del original en inglés titulado “How to change the bullets for unordered lists in the text element” publicado por Sitejet.
En este artículo, le mostramos cómo agregar fácilmente animaciones y superposiciones simples para atraer la atención de sus visitantes.
Vídeo: Animaciones en Sitejet
Las animaciones en diseño web son una forma ideal de captar la atención del visitante o destacar una parte específica de la página. Sitejet ofrece una selección de animaciones útiles que se pueden aplicar rápidamente con un par de clics y producen resultados increíbles.
Configurar una superposición o ventana emergente
Sitejet ofrece una variedad de animaciones útiles, fáciles de conseguir y muy fiables. Entre ellas, se encuentra la opción “Superposición”, disponible en la configuración de cada elemento. También hay superposiciones predefinidas que puedes usar y personalizar según tus necesidades. Para encontrarlas, haz clic en “Marketing” en el panel izquierdo del Creador de Sitios Web.
Puedes agregar estos elementos con ajustes predefinidos en cualquier parte de tu sitio web. Sin embargo, para una mejor visión general, recomendamos colocarlos al final de la página. Elijamos la superposición del adorable cachorro. Arrastra y suelta este ajuste predefinido en tu sitio web y accede directamente a las animaciones.
Aquí tienes diferentes maneras de animar este contenedor. Como queremos que este adorable cachorro se abra como superposición, cuando un visitante acceda al sitio web, seleccionamos “Abrir como superposición”.
Ahora tendrás más opciones para personalizar el contenedor. Si prefieres que la superposición se abra cuando un visitante acceda a tu sitio web, selecciona “Abrir al cargar la página”.
Si desea conservar la superposición, porque le gusta el cachorro cuando visita el generador de sitios web, pero no desea usarlo como superposición ahora, simplemente use el activador “sin activador automático” en Animación.
En la programación, también puedes establecer una hora determinada en la que se mostrará esta superposición en tu sitio web y en la que desaparecerá.
Si lo desea, puede probar fácilmente la superposición en nuestro “Modo de vista previa” en la sección “Ver”. O simplemente presione [CTRL + P].
Este artículo es una traducción del original en inglés titulado “Animations and Overlays” publicado por Sitejet.
Utilice código HTML, CSS y JavaScript personalizados
Última actualización: 8 abril, 2025
Tiempo de lectura: 2minutos
Con las plantillas y ajustes preestablecidos de Sitejet , puedes superar la mayoría de los desafíos de diseño sin necesidad de conocimientos de programación o diseño. También puedes insertar código personalizado. En este artículo, explicamos qué tipos de código puedes insertar y cómo hacerlo.
Conocimientos básicos
Sitejet le permite no solo escribir y usar su propio código, sino también integrar herramientas de terceros mediante fragmentos de código en HTML, CSS o Javascript. Tenga en cuenta que algunas herramientas podrían no funcionar o mostrarse correctamente si utiliza el ajuste preestablecido de la barra de consentimiento de cookies. Por seguridad, Sitejet prefiere bloquear demasiados scripts a no suficientes para cumplir con los requisitos legales. Pueden surgir problemas con la visualización y la funcionalidad de algunas herramientas, por ejemplo, cuando se carga un script desde fuentes externas y un segundo script accede a él. Si el proveedor no garantiza que el segundo script solo acceda al primero después de que este se haya cargado, la herramienta no funcionará correctamente.
Mira el video
Editor de código
El código CSS, JavaScript y HTML se puede editar desde el editor de código. Para acceder a él, haga clic en “<> Código” en la esquina inferior derecha del Creador de Sitios Web (CMS). También puede abrir el editor de código con la combinación de teclas [Ctrl] + [Alt] + [C].
Desde aquí, también tienes acceso a las otras pestañas “CSS”, “JavaScript”, “HTML”, “Config” y “Boilerplate”.
Un código personalizado sin errores ayudará a que tu sitio web funcione a la perfección. Asegúrate de que el código funcione correctamente utilizando herramientas externas como depuradores o pruebas.
Configuración básica
“Configuración” es una pestaña del editor de código. Aquí puede configurar su sitio web definiendo variables de color, tamaño de fuente, características, etc. Todos los ajustes preestablecidos utilizados en su sitio web se proporcionan como “mixins”. El Creador de Sitios Web (CMS) inserta automáticamente estos mixins en la pestaña “Configuración”. Esto le permite ajustar las propiedades CSS según corresponda una vez insertado el primer ajuste preestablecido. Tenga en cuenta que eliminar un ajuste preestablecido en el Creador de Sitios Web (CMS) no elimina automáticamente el código CSS o JavaScript incrustado.
Consejo: Si no estás familiarizado con CSS, ¡no te preocupes! Casi todos los valores de CSS se pueden ajustar mediante la configuración del tema y los ajustes preestablecidos. Para ello, tienes tres opciones:
Ajustes preestablecidos: se puede acceder a ellos haciendo clic en el icono del rompecabezas en el elemento o haciendo clic derecho en el elemento y luego haciendo clic en “Ajustes preestablecidos”.
A través del elemento de menú “Diseño” del Creador de sitios web (CMS)
Todo el código estándar se almacena en un “boilerplate”, que se integra automáticamente en el sitio web y puede usarse en otros lugares. ¿Quiere ver el funcionamiento interno de su sitio web? Entonces, el “Boilerplate” es el lugar ideal. También puede ver el código en el Editor de Código, en la pestaña “Boilerplate”. Aquí puede ver todas las variables predefinidas, tanto los valores predeterminados de ciertos elementos como ciertas propiedades y efectos de diseño. También puede usar estas variables para su diseño con otros elementos para crear un diseño lo más uniforme, profesional y fácil de mantener posible.
(S)CSS
El constructor de sitios web (CMS) Sitejet ofrece un potente editor de (S)CSS que le permite personalizar su sitio web de la forma que desee.
Si la pestaña “CSS” no está preseleccionada, ahora puede hacer clic en ella para ver y editar todo el código CSS.
Aquí puede asignar las propiedades de diseño adecuadas a sus clases estándar, tanto propias como existentes (p. ej., “.ed-button”). Por defecto, el código de cada clase está “contraído”, es decir, no visible, para ahorrar espacio y ofrecer una mejor visión general. Al hacer clic en la flecha pequeña junto al número de línea, a la izquierda del editor, puede desplegar la clase y hacer visibles todas las propiedades.
Aquí puedes añadir tus propios estilos CSS, que luego se aplicarán al sitio web. Si usas ajustes preestablecidos, se guardarán aquí y podrás añadir sus modificaciones a las secciones correspondientes. Puedes usar todas las variables definidas en las pestañas “Boilerplate” o “Config”.
El Creador de Sitios Web también comprende tu código CSS. Puedes encontrar las reglas CSS aplicables a un elemento de tu sitio seleccionando un elemento y presionando simultáneamente [Ctrl] + [Alt] + [C]. Esto abre el Editor CSS y resalta las líneas que se aplican a los elementos seleccionados.
También puede utilizar el botón “Optimizar” para encontrar reglas no utilizadas y limpiar su código.
También puedes utilizar archivos CSS/JS desde el administrador de archivos a través de “Pegar archivo”.
Al hacer clic en “Selector de color”, puede seleccionar el color deseado en la ventana de selección de color de su sistema. Esto le facilita encontrar los valores correctos para el color deseado o, por ejemplo, en sistemas Mac y Linux, seleccionar un color en cualquier lugar de la pantalla.
Uso de identificaciones y clases
Dentro de Sitejet, los elementos se pueden direccionar de varias maneras.
Cada elemento de Sitejet tiene su propio ID único. Este ID siempre tiene el formato #ed-xxxxxx. Puede encontrarlo en las propiedades del elemento, a las que se puede acceder mediante los siguientes métodos:
Haga clic en el elemento y luego haga doble clic en las migas de pan en la parte inferior de la pantalla.
Haga doble clic en el elemento
Seleccione el elemento y presione [ENTER]
En las propiedades del elemento, en el lado izquierdo de la pantalla, el ID se muestra en la pestaña “Opciones” en la sección “ID y clase”.
Los ID de los elementos <div> no se pueden cambiar en Sitejet. Sin embargo, sí se puede asignar un ID a los subelementos.
Clases
Las clases son la forma más conveniente de personalizar y diseñar elementos. Además, permiten a otros desarrolladores y diseñadores crear código comprensible o reutilizable en otros proyectos.
Para asignar clases a un elemento, proceda de la siguiente manera:
Abra las propiedades del elemento de una de las formas descritas anteriormente.
En “ID y clase”, en la pestaña “Opciones”, se muestran las clases individuales asignadas a este elemento. El elemento preseleccionado es el elemento contenedor (en la imagen, un elemento <div>). Sin embargo, también puede personalizar los elementos secundarios de este elemento haciendo clic en la pestaña correspondiente; por ejemplo, en “Botón (a)” para personalizar el elemento de enlace del botón.
Se pueden asignar varias clases a cada elemento para lograr una mayor especificación en el código CSS. Encontrará más detalles en este artículo sobre clases CSS .
En “Clases CSS” puedes agregar tantas clases como quieras separándolas con un espacio.
Consejo: Puedes seleccionar varios elementos manteniendo pulsada la tecla [Mayús] mientras haces clic. También puedes usar la combinación de teclas [Ctrl] + [A] para seleccionar todos los elementos a la vez. De esta forma, puedes asignar clases específicas a varios elementos a la vez.
Identificaciones
Usar identificadores para diseñar elementos específicos permite tomar decisiones de diseño más específicas que las que permiten las clases. Las clases proporcionan propiedades de diseño para múltiples elementos, mientras que un identificador solo se aplica a ese elemento específico. Por lo tanto, los valores predeterminados especiales del identificador anulan los valores predeterminados generales de la clase.
Ejemplo: Un elemento de botón incluye un elemento <div> y un elemento <a>. El elemento <div> es el elemento padre porque encierra al elemento <a>. En este ejemplo, al elemento <div> se le asigna el ID #ed-1234567 y la clase predeterminada .ed-button. Si ahora agrega diferentes valores predeterminados de diseño para la clase .ed-button y el ID #ed-1234567, las propiedades CSS del ID siempre sobrescribirán las de la clase.
Especialmente para las animaciones, los identificadores son útiles, porque las animaciones generalmente hacen referencia a determinados elementos.
Los ID se asignan automáticamente a un proyecto específico. Si copia código CSS existente en otro proyecto, no tendrá ningún efecto, ya que los ID utilizados no corresponden a este. En este caso, trabaje con clases.
Para copiar los ID, haga clic derecho en el elemento y seleccione “Copiar ID de elemento”. También puede hacer lo mismo presionando [ Ctrl] + [I].
HTML
Para insertar código HTML directamente, tienes dos opciones:
Usando un elemento HTML
Usando el editor
Elemento HTML
El elemento HTML es ideal, entre otras cosas, para integrar ciertos módulos y herramientas de proveedores externos. Puede incrustarlo en su página arrastrando y soltando como se indica a continuación:
Haga clic en la categoría “Elementos” en la barra lateral izquierda.
Esto abrirá un panel donde puedes seleccionar “HTML” y arrastrarlo al lugar donde deseas incluir elementos HTML adicionales.
HTML en el editor
Puede acceder al editor de código haciendo clic en:
“<> Código” en la esquina inferior derecha del Creador de sitios web (CMS)
Luego haga clic en la pestaña “HTML”
Normalmente, solo verá el marcador {{content}} aquí, a menos que haya insertado código adicional. Todo lo almacenado aquí se mostrará en el sitio web. El marcador {{content}} representa todo el contenido que puede administrar con el Creador de Sitios Web (CMS), es decir, todos los elementos que edite, mueva, añada o elimine en la vista principal del Creador de Sitios Web (CMS). Si es necesario, puede agregar su propio HTML o fragmentos de terceros alrededor de este marcador. Actualmente, no es posible editar el HTML que ya está en el sitio web para garantizar el correcto funcionamiento de las estructuras existentes.
JavaScript
También puede usar el elemento HTML para incluir JavaScript en las etiquetas <script>. Sin embargo, estos elementos no se ejecutan en el Creador de Sitios Web (CMS). Para ver el efecto, debe cambiar a la vista en vivo. Esta vista muestra el sitio web tal como se vería sin usar el Creador de Sitios Web (CMS) de Sitejet. Puede hacerlo haciendo clic en el enlace de vista previa del sitio web. El sitio web se abrirá en una nueva pestaña.
El Editor de Código es otra opción disponible. Puede acceder a él como se describe en la sección ” HTML en el editor “, en la pestaña “JavaScript”. jQuery, una biblioteca de JavaScript ampliamente utilizada, se integra automáticamente en todos los sitios web de Sitejet para que pueda usarla en su JavaScript. El código utilizado en el Editor de Código es global, por lo que se ejecutará en todas las páginas.
Píxeles, códigos de seguimiento, etc.
Los píxeles se utilizan para recopilar datos con fines publicitarios. Son código JavaScript. Los píxeles más conocidos provienen de Google y Facebook. Generalmente, se utilizan para la optimización de motores de búsqueda y marketing, y se insertan en el área <head> del sitio web.
Para insertar código en el área <head> de su sitio web, vaya a “Más” en el menú superior y seleccione “SEO”:
Aquí puedes introducir toda la metainformación relevante sobre tu sitio web, como títulos, palabras clave o una breve descripción. Encontrarás más información sobre SEO en nuestro artículo sobre SEO .
Para insertar el código de seguimiento en el área <head> del sitio web, se puede utilizar el campo denominado “Meta tags”.
Para usar Google Analytics, basta con insertar el ID de seguimiento en el campo “ID de seguimiento de Google Analytics”. Este artículo de Google explica cómo encontrar el tuyo.
Asegúrate de tomar el TRACKING_ID (o Pixel ID para Facebook) de tu panel respectivo y completar tu política de privacidad en consecuencia.
Si necesita código adicional para otras herramientas, también puede insertarlo en “Metaetiquetas”. Normalmente, las etiquetas <meta> se insertan aquí, pero también se pueden insertar etiquetas <script>. Si el código se coloca justo antes de la etiqueta de cierre </body>, se recomienda insertarlo como se describe en la sección ” HTML en el editor “, en “{{content}}” de la pestaña “HTML”.
Por ejemplo, para Google Tag Manager, tendrá dos tipos de código. Uno para la sección de encabezado, que se implementa en la sección “metaetiquetas”. El segundo fragmento debe pegarse inmediatamente después de la <body> etiqueta de apertura (abra el editor de código, cambie a HTML e inserte el código allí). Para más información, consulte una guía rápida de Google.
Manteniendo el código limpio
Añadir código rápidamente en el editor de código a veces puede ser confuso. Simplemente presione [Ctrl] + [I] para formatear automáticamente todo el código en la ventana activa. Esto funciona tanto con CSS, JS como con HTML. Esto le permite realizar un seguimiento de las áreas individuales de su código, sus variables y sus definiciones.
Hormiga
Emmet es un plugin para diversos editores de texto y código que puede usarse para mejorar tu flujo de trabajo de HTML y CSS. Puedes crear sitios web fantásticos en un abrir y cerrar de ojos con Sitejet, incluso sin conocimientos de Emmet. Sin embargo, Emmet tiene algunas ventajas que no queremos dejar de mencionar.
Por ejemplo, las abreviaturas pueden ahorrar mucho tiempo, pero esto solo tiene sentido si usted mismo escribe mucho código y ya sabe cómo escribir código HTML y CSS.
Todos los editores de Sitejet son compatibles con Emmet, así que puedes aprovecharlo al máximo. Para ello, pulsa la tecla [Tab] en la ventana del editor correspondiente.
Si no conoces Emmet, pero escribes mucho código personalizado, sin duda deberías probarlo. Aquí tienes algunos ejemplos:
Con elementos y ajustes preestablecidos, Sitejet te permite crear sitios web atractivos de forma rápida y sencilla, sin necesidad de código adicional. Los elementos proporcionan objetos individuales con los que puedes crear sitios web, como iconos, controles deslizantes, etc. Los ajustes preestablecidos combinan elementos y los amplían con opciones de diseño adicionales. En este artículo, explicaremos cómo usar y personalizar los ajustes preestablecidos.
Conocimientos básicos
Los ajustes preestablecidos se componen de un contenedor que contiene un conjunto de elementos .
Por ejemplo, el ajuste preestablecido “Tarjetas” combina un elemento de imagen (naranja), un elemento de título (azul) y un elemento de texto (morado), todos ellos ubicados en un contenedor (rojo). Puedes identificar rápidamente si estás trabajando con un ajuste preestablecido por el borde naranja que aparece al pasar el cursor o hacer clic. Allí también puedes ver el nombre del ajuste preestablecido.
Estas secciones web prediseñadas ofrecen opciones de estilo personalizables. La mayoría de los ajustes preestablecidos ofrecen variantes y configuraciones para personalizar tu sitio web en diversas dimensiones.
Mira un video
Cómo usar ajustes preestablecidos
Usar ajustes preestablecidos facilita la creación de sitios web. Por ejemplo, el ajuste preestablecido Galería te permite elegir entre varias variantes prediseñadas para darle a tu galería un aspecto impactante que se adapte a tu estilo. Las variantes son conjuntos de opciones para un ajuste preestablecido. Puedes personalizarlo según tus necesidades con la configuración a continuación.
Cada ajuste preestablecido tiene una clase única (p. ej., .preset-gallery-v3-default ). Al añadir un ajuste preestablecido a su sitio web, se añadirá automáticamente un nuevo bloque de CSS al final de la ventana CSS personalizado. El código CSS incluye todas las configuraciones que ha seleccionado en el panel de ajustes preestablecidos de la izquierda. Esto significa que cambiar las variables de uno afectará al otro.
Si desea crear dos secciones con el mismo ajuste preestablecido, pero desea que una sea diferente (por ejemplo, una cantidad diferente de columnas), simplemente puede cambiar la clase preestablecida y agregará un nuevo bloque CSS con un nuevo nombre de clase, por lo que las configuraciones del ajuste preestablecido anterior no se alterarán.
Configuraciones responsivas
Al igual que en la configuración de elementos, también puede cambiar la configuración de diseño en los ajustes preestablecidos para que se adapte al dispositivo y su tamaño. Por ejemplo, puede ajustar los márgenes o el tamaño de fuente específicamente para computadoras de escritorio, tabletas o smartphones, para que tenga control total sobre el diseño de su sitio web en cada dispositivo en todo momento.
Para facilitar la identificación de las configuraciones aplicables a las ventanas gráficas específicas, el color de las etiquetas de configuración se ajusta según el dispositivo. Puede encontrar instrucciones detalladas sobre cómo ajustar la configuración según el dispositivo aquí .
Este artículo es una traducción del original en inglés titulado “What are presets?” publicado por Sitejet.
Los acordeones son una excelente manera de mostrar contenido específico solo cuando el usuario lo solicita y crear un diseño limpio. Este artículo te mostrará cómo usar acordeones en Sitejet.
Cómo trabajar con acordeones
Puede agregar un acordeón haciendo clic en la categoría “Acordeón” en la barra lateral.
Simplemente arrastra y suelta el ajuste preestablecido en la posición que prefieras en el sitio web o haz clic una vez para pegarlo después del último elemento seleccionado. Una vez añadido el ajuste preestablecido de acordeón, se verá así en el editor del sitio web:
Como puedes ver, un acordeón siempre consta de un disparador y un contenido:
Este es el disparador. Los titulares, entre otros elementos, pueden usarse como enlace para dirigirse a páginas web, archivos u otros elementos; en este caso, a nuestro contenido. Puedes personalizar el disparador modificando la configuración en el panel izquierdo al hacer doble clic en él.
Este es el contenido de nuestro Acordeón. Nuestro contenido puede ser cualquier cosa.
En nuestro ejemplo, utilizamos un elemento contenedor y agregamos un elemento de texto (4.) para mostrar el contenido.
Como puede ver en la siguiente imagen, puede agregar cualquier cosa al elemento contenedor principal, como imágenes, videos, titulares, etc. Aquí agregamos un elemento de imagen encima del elemento de texto:
Para que el contenido de este acordeón sea visible al pulsar el disparador, se necesita una animación. Al ser un ajuste preestablecido, la animación ya se añadió al elemento contenedor. Sin embargo, puede usar estos ajustes para cambiar la animación, por ejemplo, cómo o qué tan rápido se abre. Los elementos con animación se indican con un icono de estrella delante del nombre del elemento en la ruta de navegación inferior.
Una vez que hayas personalizado el acordeón según tus necesidades, puedes activar el modo de vista previa haciendo clic en el ícono del ojo en la barra superior:
Consejo: El primer contenedor de contenido está configurado para ser visible por defecto. Si desea que este contenedor solo se vea al hacer clic, vaya a la configuración de animación y seleccione “Elemento oculto” en “Inicial”.
Acordeones de imágenes
Como ya mencionamos, puedes usar diferentes elementos como activadores. En lugar de un título, también puedes usar una imagen. En ese caso, las “Pestañas de imagen” son un ajuste preestablecido muy útil.
Una vez que hayas agregado el acordeón de imágenes a tu sitio web, verás esto:
En este ejemplo, el elemento de imagen es nuestro disparador. Puedes cambiar la imagen de marcador de posición subiendo una nueva imagen o seleccionándola en el Administrador de medios.
Puede agregar texto encima de la imagen cambiando el texto del marcador de posición.
En “Enlace”, puedes vincular el disparador a cualquier elemento, ya sea otra página, fuentes externas o un elemento específico. Para este acordeón, y para los acordeones en general, la opción “Siguiente elemento” es la más útil. Por eso ya está seleccionada. Vinculará el disparador al siguiente elemento o contenedor en el editor. En este caso, nuestro cuadro de contenido.
Para crear más activadores y cuadros de contenido, puede seleccionar el activador y presionar [CTRL+D] para duplicarlo, o hacer clic en el icono de copia pequeña mientras pasa el cursor sobre el elemento. Al copiar elementos de acordeón, asegúrese de que el activador y su contenido correspondiente estén uno debajo del otro; de lo contrario, el mecanismo de enlace “Siguiente elemento” no funcionará correctamente. Puede comprobarlo fácilmente pasando el cursor sobre los elementos y observando las etiquetas, de modo que “Activador 1” esté seguido de “Contenido 1”, y así sucesivamente.
Este artículo es una traducción del original en inglés titulado “Accordion Preset” publicado por Sitejet.
La cuenta regresiva es una función divertida para informar a los visitantes del sitio web sobre un próximo evento. En este artículo, encontrará información sobre cómo agregar y personalizar la cuenta regresiva según sus necesidades.
Añade y personaliza la cuenta regresiva
Ve a la barra lateral, haz clic en la categoría “Funciones” y desplázate hasta ver “Cuenta regresiva”. También puedes usar la barra de búsqueda en la parte superior. Una vez que encuentres el ajuste preestablecido, simplemente arrástralo y suéltalo en la ubicación que prefieras en el sitio web.
Una vez que hayas añadido la cuenta regresiva, se abrirá un panel a la izquierda. Aquí puedes añadir la hora y la fecha (formato AAAA/MM/DD) y ajustar otros ajustes como el número de columnas, el espacio entre los cuadros, el color de fondo de los cuadros o el color del contador. Con estos ajustes, puedes personalizar fácilmente la cuenta regresiva para que se adapte al diseño de tu sitio web.
Este artículo es una traducción del original en inglés titulado “Countdown” publicado por Sitejet.
Integrar una herramienta de correo electrónico en su sitio web
Al usar nuestra integración con código de terceros, también puede incluir formularios de herramientas de correo electrónico como Campaign Monitor. En este artículo, usamos Campaign Monitor como ejemplo para la mayoría de las herramientas de correo electrónico que ofrecen código HTML para insertar formularios de registro.
1. Crea tu formulario
Antes de incrustar tu formulario en Sitejet, deberás crearlo en Campaign Monitor o en tu herramienta preferida. Una vez configurada la lista, puedes decidir si quieres incrustar el formulario, si debe aparecer en una superposición o si solo debe ser un enlace. Queremos que el código esté incrustado.
Después de eso, tienes la opción de diseñar el formulario según tus necesidades, por ejemplo, cambiar el color, el texto y los campos de entrada.
Una vez que esté satisfecho con el resultado, puede generar el código:
2. Pegue el código en el sitio web.
Si desea incluir el formulario en una nueva sección, puede agregar primero un nuevo contenedor para que el formulario no ocupe todo el ancho de la pantalla. Haga clic en la categoría “Elementos” en la barra lateral izquierda y arrastre y suelte un elemento contenedor en la posición deseada. Luego, realice los ajustes en el panel de configuración que se abre a la izquierda.
Una vez que haya terminado, puede hacer clic en “Agregar contenido” en el contenedor recién creado y seleccionar HTML:
Ahora simplemente pegue el código dentro del cuadro HTML en la parte inferior y su formulario ya aparecerá dentro del lienzo.
Este artículo es una traducción del original en inglés titulado “E-Mail Marketing” publicado por Sitejet.
Un archivo sitemap.xml es fundamental para la optimización de tu sitio web en buscadores. En este artículo, explicamos sus funciones y cómo usarlo.
Conocimientos básicos
El sitemap.xml es un archivo importante que facilita el trabajo de los motores de búsqueda. Está dirigido específicamente a los rastreadores. Esto permite que los motores de búsqueda rastreen el sitio web fácilmente y muestren todas las páginas, prioridades y estructura. Con un buen sitemap, facilita que los rastreadores encuentren páginas con pocos enlaces o páginas anidadas. De esta manera, su contenido se muestra de forma fiable en los motores de búsqueda.
Hoy en día, los motores de búsqueda suelen rastrear las páginas automáticamente, por lo que no es necesario un mapa del sitio para la indexación. Sin embargo, se recomienda encarecidamente enviar el mapa del sitio a los motores de búsqueda. En el caso de Google, se recomienda enviar el mapa del sitio a Google Search Console (enlace externo). En el caso de Bing, el motor de búsqueda de Microsoft, esto es posible a través de Bing Webmaster Tools (enlace externo).
No se garantiza que las URL creadas en el mapa del sitio se indexen. Además de esta función, el mapa del sitio también sirve como índice y estructura para el usuario.
Nota: Para obtener más consejos y herramientas, le recomendamos nuestro artículo sobre preguntas frecuentes sobre optimización para motores de búsqueda (SEO). Tenga en cuenta que ni la estrategia SEO ni los problemas al enviar el archivo Robots.txt a los motores de búsqueda son nuestra responsabilidad. Le recomendamos nuestra comunidad, donde puede intercambiar ideas con otros profesionales.
Un sitemap.xml para su sitio web
Añadir manualmente un mapa del sitio en el Editor web no es necesario y actualmente no es posible. El mapa del sitio se crea automáticamente y se actualiza cada vez que se realiza un cambio en el Editor web. Por lo tanto, tampoco es posible personalizarlo.
Puede acceder fácilmente al mapa del sitio simplemente agregando /sitemap.xml al final de su URL.
Tenga en cuenta que, en caso de multilingüismo, debe eliminarse la extensión URL, por ejemplo, /de o /en. Si introduce www.yourwebsite.com/sitemap.xml , verá el mapa del sitio de su sitio web.
La URL y el mapa del sitio se verán así:
Ocultar páginas en el mapa del sitio
Actualmente, no ofrecemos una opción directa para no mostrar subpáginas individuales en el mapa del sitio. Si te interesa esta función, vota en la comunidad .
Sin embargo, existe una solución alternativa que permite excluir páginas del mapa del sitio. Si desmarca la casilla “Menú” de su subpágina, esta y sus subpáginas no aparecerán en el mapa del sitio.
Este artículo es una traducción del original en inglés titulado “A sitemap.xml for your website” publicado por Sitejet.
Los sitios web creados con Sitejet están optimizados para obtener buenos resultados en la prueba Google PageSpeed . Esta prueba verifica ciertos detalles técnicos de un sitio web para garantizar que cumpla con las mejores prácticas para una carga rápida.
¿Por qué es importante optimizar tu sitio web?
Lo primero que notará un visitante es el tiempo de carga de tu sitio web. Si tu sitio web carga lentamente, es frecuente que los visitantes reboten y no tengan una experiencia de usuario positiva. Es decir, justo lo contrario de lo que buscas. El tiempo de carga promedio de un sitio web hoy en día es de entre uno y tres segundos. Puedes medir este valor con una herramienta y luego optimizarlo. Esta optimización no solo te ayuda a mejorar la experiencia de los visitantes en tu sitio web, sino que también puede influir en el posicionamiento en los resultados de búsqueda.
La herramienta PageSpeed de Google está diseñada para analizar y evaluar tu sitio web. Este análisis puede ayudarte a identificar posibles puntos débiles en el rendimiento. Te ofrece sugerencias de mejora y tiene en cuenta no solo la estructura de los archivos JavaScript, HTML y CSS, sino también la integración de imágenes o las especificaciones de caché del sitio web.
Sin embargo, tenga en cuenta que el tiempo de carga es solo uno de los muchos factores para un buen posicionamiento. Google PageSpeed se promociona a menudo como una herramienta para optimizar el tiempo de carga, pero suele malinterpretarse. La herramienta en sí y un valor de 100 o cercano no son cruciales para el posicionamiento, ya que el algoritmo del motor de búsqueda tiene en cuenta muchos otros factores. La pregunta que debe hacerse es: ¿se supone que debe complacer a Google o es primordial la experiencia del usuario?
Al fin y al cabo, otro factor de posicionamiento en Google es el tiempo que el usuario permanece en tu sitio. Quieres que el visitante permanezca en tu sitio el mayor tiempo posible. Más importante que una excelente puntuación en PageSpeed es un sitio web con texto inteligente, imágenes atractivas y bien recortadas, y un diseño consistente, atractivo y fácil de usar. Un sitio web rápido no sirve de mucho si el usuario no se siente involucrado o no encuentra su camino.
Por lo tanto, recomendamos Google PageSpeed para obtener una buena visión general. Sin embargo, siempre es útil analizar críticamente las herramientas y sus sugerencias. Un buen resultado en Google PageSpeed no lo es todo.
Nota: Para obtener más consejos y herramientas, le recomendamos leer nuestro artículo sobre preguntas frecuentes sobre optimización para motores de búsqueda (SEO). Tenga en cuenta que ni la estrategia SEO ni los problemas con el envío del archivo Robots.txt a los motores de búsqueda son responsabilidad nuestra. Para ello, le recomendamos nuestra comunidad, donde podrá intercambiar ideas con otros profesionales.
Qué comprueba Google
Google cuenta con una lista de optimizaciones que verifica tanto en la versión de escritorio como en la versión móvil de un sitio web. Luego, suma los resultados de la optimización de su sitio para cada una de estas comprobaciones para obtener una puntuación general (sobre 100) de la velocidad de su sitio web.
Esto es lo que Google comprueba:
Evite las redirecciones a páginas de destino: Esto significa que no debe redirigir a los usuarios a otra página de su sitio web al cargarlo. Por ejemplo, no debe redirigir a todos los visitantes a una segunda versión de su página de inicio.
Elimina el JavaScript y CSS que bloquean la visualización en el contenido de la mitad superior de la página: Esta es, sin duda, la comprobación más importante que realiza Google. Analiza el código de tu sitio web y garantiza que priorices el contenido sobre el resto del código. A menudo, los desarrolladores web colocan scripts y archivos CSS pesados al principio de un archivo HTML. Esto hace que el navegador procese o cargue primero estos recursos, en lugar de cargar primero el contenido. Esta comprobación garantiza que priorices el contenido de la mitad superior de la página. (Nota: “Falta de la página” se refiere al primer contenido que ve un usuario al cargar una página web antes de desplazarse hacia abajo. Suele ser el encabezado, la navegación y el contenido superior del cuerpo de la página).
Habilitar compresión: Esta opción verifica que su servidor web comprima los datos sin procesar (HTML, CSS y Javascript) para reducir su tamaño antes de transmitirlos por internet a su navegador. Esto reduce significativamente el tamaño total de su sitio web.
Aprovechar el almacenamiento en caché del navegador: La comprobación del almacenamiento en caché garantiza que el navegador guarde este contenido localmente, en lugar de volver a descargarlo la próxima vez que necesite acceder a él. Esto ahorra tiempo valioso que a menudo se pierde conectando y descargando contenido al recargar la página.
Minificar CSS: Minificar CSS significa reducir al mínimo el tamaño del archivo CSS eliminando espacios, saltos de línea y otros formatos. Es similar a comprimir el archivo para reducir su tamaño.
Minificar JavaScript: similar a minificar CSS, minificar JS puede ahorrar mucho tamaño en el archivo individual que descarga el navegador.
Minificar HTML: similar a los dos anteriores, pero elimina el espacio adicional del HTML principal del sitio web.
Optimizar imágenes: La segunda comprobación más importante que realiza Google garantiza que las imágenes que envías al navegador estén optimizadas, comprimidas y no sean demasiado grandes. Las imágenes representan aproximadamente el 65-70 % del tamaño/peso total de un sitio web. Optimizar imágenes significa comprimirlas y reducir su tamaño de archivo al mínimo antes de que el navegador las descargue. Hay dos pasos importantes que debes hacer: (1) Asegurarse de que las imágenes estén comprimidas. Esto implica pasarlas por herramientas de compresión para reducir su tamaño, sin reducir su calidad. (2) Ajustar el tamaño de las imágenes. No hay motivo para enviar una imagen muy grande (por ejemplo, 5000 píxeles) a un navegador móvil, por lo que debes ajustar su tamaño.
Priorizar el contenido visible: Esto garantiza que el contenido se ubique en la parte superior del HTML del sitio web. Procura no cargar contenido adicional que no sea relevante para la primera carga del sitio web.
Reducir el tiempo de respuesta del servidor: Esta comprobación analiza su servidor para garantizar que responda con gran rapidez a los visitantes de su sitio web. Google exige que el usuario no espere más de 200 ms (1/5 de segundo) para recibir el contenido/HTML de su servidor. Con la introducción del proyecto de código abierto Lighthouse en noviembre de 2018, Google Page Speed ahora analiza una amplia gama de propiedades del sitio web, además de la velocidad (como SEO, accesibilidad, PWA y mejores prácticas). Además de las pruebas mencionadas, Lighthouse ahora comprueba:
Primer Pintura de Contenido: Esta métrica se obtiene de un navegador real al cargar un sitio web. Al ejecutar una prueba Lighthouse, un navegador real visitará su sitio web, lo cargará y supervisará su rendimiento. La métrica Primer Pintura de Contenido informa sobre el tiempo que tarda en mostrarse cualquier tipo de contenido después de que una página empieza a cargar. Puede ser una imagen, un color de fondo, etc., y el tiempo de Primer Pintura de Contenido se mide en segundos. Su valor radica en que es la primera vez que un usuario sabe que algo en el sitio web se va a cargar; es el primer indicio de que un sitio web se está cargando.
Índice de Velocidad: Esta métrica proviene de una antigua herramienta de rendimiento web llamada WebPageTest . Existe desde 2012 y es bastante eficaz para determinar la velocidad de carga del contenido de un sitio web. Funciona tomando capturas de pantalla del sitio web cada 0,5 segundos durante la carga. Con estas capturas, calcula el porcentaje de contenido cargado en la página web en incrementos de 0,5 segundos y emite una puntuación de velocidad general. Cuanto menor sea el número, más rápido parece cargar el sitio web para el usuario. El objetivo de esta prueba es comprender con precisión la velocidad con la que el usuario ve el contenido y si hay algún obstáculo que impida que el sitio web muestre el contenido lo más rápido posible.
Tiempo de interacción: Otra métrica importante es la rapidez con la que el usuario puede interactuar con la página. Por ejemplo, podría querer hacer clic en un botón o desplazarse por la página. Esto es especialmente importante en dispositivos móviles, donde el usuario tocará directamente la pantalla para interactuar con la página. El objetivo de los desarrolladores web siempre debe ser garantizar que una página sea interactiva, independientemente de su contenido. Esto supone un reto muy complejo debido al funcionamiento de los navegadores.
Primer tiempo de inactividad de la CPU: Esta métrica está estrechamente relacionada con el tiempo de interacción, ya que indica la rapidez con la que se cargan todos los recursos/contenidos iniciales del sitio web y la CPU del dispositivo entra en estado de inactividad (sin realizar ninguna acción). Esto se informa porque los desarrolladores deben centrarse en cargar primero la menor cantidad de contenido posible. Al enviar una pequeña cantidad, la CPU del dispositivo procesará todo el código y entrará en estado de inactividad más rápidamente.
Latencia de entrada estimada: La última métrica que Lighthouse reporta no tiene nada que ver con el rendimiento de tu sitio web en la primera carga. En cambio, intenta darte un número (en milisegundos) en el que tu sitio web responde a los clics. La idea es que cuanto más rápido responda tu sitio web, más usuarios lo considerarán rápido y será menos probable que lo abandonen.
Tras realizar estas pruebas, Lighthouse también ofrecerá recomendaciones priorizadas sobre cómo mejorar la velocidad general. Esto aparece en la segunda mitad de la página y ofrece detalles técnicos sobre lo que puede hacer y los beneficios que estos cambios pueden ofrecer.
¿Qué hace Sitejet?
Sitejet ha optimizado los sitios web creados en nuestra plataforma para obtener una alta puntuación en la prueba de Google PageSpeed. Esto significa que hemos estudiado las pruebas mencionadas anteriormente y optimizado nuestros sitios web para cada una de ellas. A continuación, se detalla cómo gestionamos cada una de estas comprobaciones:
Evite las redirecciones a páginas de destino: En la mayoría de los sitios web de Sitejet, superamos esta verificación al 100 %. Sitejet no controla completamente esta opción, ya que permitimos que los usuarios configuren sus propias redirecciones. Le recomendamos asegurarse de no enviar enlaces a sus clientes, socios, etc., que no dirijan a páginas reales de su sitio web.
Eliminar el JavaScript y CSS que bloquean la visualización en el contenido de la mitad superior de la página: Sitejet optimiza la estructura de los sitios web para cumplir con esta recomendación. Por ejemplo, todos los scripts se encuentran en la parte inferior del sitio web, de modo que el contenido se carga primero.
Habilitar compresión: Sitejet habilita la compresión gzip para las conexiones a todos los sitios web. Esto garantiza que el archivo se comprima, se transfiera por internet y luego el navegador lo descomprima.
Aprovechar el almacenamiento en caché del navegador: Sitejet configura encabezados de caché en todos los archivos cargados. Esto garantiza que los navegadores que descargan estos archivos (CSS, JS e imágenes) sepan cómo almacenarlos temporalmente en la caché del navegador, de modo que la próxima vez que el navegador necesite acceder a ellos, se almacenen localmente en el equipo, en lugar de tener que descargarlos de nuevo del sitio web.
Minificar CSS, JS y HTML: Recursos como CSS, JS y HTML se minimizan automáticamente. Esto garantiza que ocupen el menor tamaño posible al descargarlos.
Optimización de imágenes: Ofrecemos un completo proceso de compresión y redimensionamiento para las imágenes que subas. Cada imagen se reducirá a una resolución lo más cercana posible al tamaño real de la pantalla: incluso si las imágenes están recortadas, solo se descargará la parte recortada. Durante el proceso de reducción, las imágenes se someten a un algoritmo de compresión que minimiza su tamaño, manteniendo la nitidez.
Priorizar el contenido visible: Como parte del proceso de desarrollo de cada sitio web en Sitejet, lo estructuramos para que cumpla con esta recomendación de forma predeterminada. Esto implica colocar primero el contenido del encabezado y luego el contenido del cuerpo de la página.
Reducir el tiempo de respuesta del servidor: Esta comprobación se centra más en asegurar que su sitio web no sea demasiado lento, sino lo suficientemente rápido. Dado que Sitejet aloja todos los sitios web en nuestra plataforma, podemos garantizar que todos los sitios web que alojamos respondan rápidamente.
Qué hacer si su sitio tiene una mala puntuación
Aunque Sitejet desea que todos los sitios web que gestionamos siempre tengan una buena clasificación, no podemos garantizarlo. Esto se debe a que nuestros clientes pueden añadir su propio código, contenido y diseños al sitio web, por lo que no tenemos control total sobre lo que pueden o no añadir. Por esta razón, en algunos casos, los sitios web de Sitejet no alcanzan una puntuación superior a 90. A continuación, se muestra una lista de errores o problemas que Google PageSpeed nos informa, según el diseño del sitio web:
Elimine el JavaScript y CSS que bloquean la representación en el contenido que se encuentra por encima del pliegue:
Elemento de mapa en la parte superior de la página: Si coloca un elemento de mapa en la parte superior de su sitio web de Sitejet, esto suele afectar negativamente su posicionamiento en PageSpeed. Para solucionarlo, mueva el elemento de mapa a la parte inferior de la página.
Tienda en la parte superior de la página: Si colocas una tienda en la parte superior, a menudo puede aparecer esta advertencia. Sitejet está trabajando en una solución, pero por ahora, la única recomendación es mover el contenido hacia abajo en la página. Una forma de hacerlo es añadir una imagen y un texto útil sobre el elemento de la tienda para que esta no aparezca en la parte superior de la página.
Código/script personalizado en el encabezado : Si colocaste código personalizado en la sección de encabezado del sitio web, Google suele mostrar un error indicando que esto ralentiza la visualización de la página. Hay dos opciones para solucionarlo: (1) Colocar el código al final del HTML del sitio web en lugar del encabezado. Esto desplaza el código al final, forzando así su carga. (2) Asegúrate de que el script incrustado aquí se cargue de forma asíncrona. Esto significa que el navegador lo carga en segundo plano mientras continúa cargando el resto del contenido del sitio web. Para habilitar la carga asíncrona en los scripts, debes modificarlo de la siguiente manera:
Código antiguo:
Nuevo asíncrono:
Notarás que el código anterior le indica al navegador que cargue este código “async”, lo que debería ayudar a pasar esta prueba particular de Google PageSpeed.
Incrustar iframe : Si insertas un iframe personalizado en un sitio web de Sitejet en la mitad superior de la página, es probable que aparezca este mensaje de error. Mueve este contenido hacia abajo en la página o elimínalo por completo.
Redimensionar imágenes : Reduce el tamaño de las imágenes en tu sitio web. Esto reduce la resolución y, por lo tanto, las descargas.
Aprovecha el almacenamiento en caché del navegador: Si incluyes código personalizado en tu sitio web, este se cargará a menudo desde un sitio web de terceros. Si este sitio web no habilita el almacenamiento en caché, Google lo detectará y recomendará habilitarlo. Debes contactar con el servicio externo para solicitarle que implemente este cambio en su servidor.
Tu página podría ser demasiado grande : Si tienes mucho contenido en una sola página, puede que esta se vea demasiado grande incluso después de que Sitejet lo optimice. Considera usar menos imágenes o dividir el contenido moviéndolo a otras páginas.
Casos en los que Sitejet no optimiza el sitio
Hay algunos casos en los que Sitejet no intenta optimizar el sitio web al publicarlo. Por ejemplo, si ha colocado código personalizado que usa jQuery en el encabezado del sitio web, Sitejet no intentará optimizarlo al publicarlo. Esto se debe a que este código suele requerir jQuery o las funciones dmAPI para su funcionamiento. Sin embargo, dado que nuestra optimización movería este código hacia abajo en la página, interrumpiría el código instalado y dejaría de funcionar.
Este artículo es una traducción del original en inglés titulado “Website Performance and Google PageSpeed” publicado por Sitejet.
