¿Quieres darle un toque más dinámico a tu sitio web? Con Sitejet, puedes integrar archivos de audio fácilmente para enriquecer la experiencia de tus visitantes. Ya sea que estés compartiendo un podcast, música original, testimonios en audio o ambientación sonora, aquí te mostramos cómo hacerlo.

🎯 ¿Por qué agregar audio a tu sitio web?

• Mejora la experiencia del usuario: Añade una dimensión extra al contenido.

• Ideal para podcasts o músicos: Presenta tus pistas directamente en tu página.

• Accesibilidad: Algunos visitantes prefieren escuchar en lugar de leer.

• Ambientación: Usa sonidos para reforzar la identidad de tu marca (por ejemplo, en sitios de yoga o meditación).

📁 ¿Qué formatos de audio se aceptan?

Sitejet acepta los formatos más comunes como:

• .mp3

• .ogg

• .wav

Recomendamos .mp3 por su compatibilidad y peso reducido.

🔧 ¿Cómo agregar audio en Sitejet?

1. Sube el archivo de audio

• Ve al Administrador de Archivos en tu proyecto.

• Sube el archivo que deseas usar (máximo 20 MB por archivo es lo ideal para mantener buena carga).

2. Inserta un reproductor de audio

• En el editor de tu página, busca el componente “HTML”.

• Inserta el siguiente código personalizado:

html
CopiarEditar
<audio controls>
<source src="/assets/audio/nombre-del-archivo.mp3" type="audio/mpeg">
Tu navegador no soporta la reproducción de audio.
</audio>


• Asegúrate de reemplazar /assets/audio/nombre-del-archivo.mp3 con la ruta correcta del archivo que subiste.

3. Estiliza tu reproductor (opcional)

Puedes agregar estilos con CSS para personalizar el tamaño, márgenes o incluso crear un diseño más a medida.

💡 Ideas para usar audio en tu sitio

• 🎙️ Podcasts: Crea una sección con episodios semanales.

• 🎶 Músicos y DJs: Muestra tus demos o producciones.

• 📢 Testimonios en audio: Añade voces reales de clientes.

• 🧘‍♂️ Sitios de meditación o mindfulness: Audio de fondo suave o sesiones guiadas.

• 🏢 Corporativo: Mensaje de bienvenida en audio para una intro más cercana.

⚠️ Recomendaciones

• No configures el audio para que se reproduzca automáticamente (autoplay), ya que puede ser molesto para los usuarios y ralentizar la carga.

• Verifica que tu archivo esté optimizado para web (peso y calidad balanceados).

• Siempre ofrece controles al usuario: Play / Pausa / Volumen.

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

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

Tiempo de lectura: 2 minutos

Hoy en día, tener presencia en redes sociales no es opcional: es esencial. Con Sitejet, puedes integrar fácilmente tus redes sociales en tu sitio web para mejorar la visibilidad, fomentar la interacción y reforzar tu marca.

 ¿Por qué integrar redes sociales en tu sitio web?

• Aumenta tu alcance: Facilita que los visitantes compartan tu contenido.

• Genera confianza: Muestra tus perfiles activos para dar mayor credibilidad.

• Mejora la interacción: Permite que los usuarios te sigan o contacten rápidamente.

• Centraliza tu presencia online: Todo en un mismo lugar: sitio + redes.

🔧 ¿Qué tipos de integraciones puedes hacer en Sitejet?

1. Iconos de redes sociales

Agrega iconos en el encabezado, pie de página o donde prefieras. Solo necesitas:

• Arrastrar el componente de íconos sociales.

• Elegir las redes (Facebook, Instagram, TikTok, X, LinkedIn, YouTube, etc.).

• Pegar los enlaces a tus perfiles.

2. Botones para compartir

Facilita que tus visitantes compartan tu contenido en sus redes:

• Usa botones como “Compartir en Facebook”, “Tweet”, “Guardar en Pinterest”, etc.

• Perfecto para blogs, productos o promociones.

3. Feeds integrados

Muestra publicaciones en vivo desde tus redes sociales:

• Embed de Instagram, Facebook o TikTok.

• Ideal para mostrar testimonios, eventos, noticias, etc.

4. Pixel de seguimiento (Meta, TikTok, etc.)

• Inserta códigos de seguimiento fácilmente para hacer remarketing o medir conversiones.

• Útil para campañas publicitarias en Meta Ads, Google Ads o TikTok Ads.

💡 Mejores prácticas

• Asegúrate de que tus perfiles estén activos y actualizados.

• Usa íconos con el mismo estilo o color de tu marca.

• No recargues tu sitio con demasiados widgets; menos es más.

• En tiendas online: incluye reseñas sociales, publicaciones de clientes o “Lo que dicen de nosotros”.

✅ ¿Dónde integrar las redes sociales?

• Encabezado: Ideal para enlaces a perfiles.

• Pie de página: Buen lugar para íconos simples.

• Blog y artículos: Perfecto para botones de compartir.

• Landing Pages: Agrega contenido dinámico desde tus redes.

• Página de contacto: Incluye Messenger o WhatsApp como opciones rápidas.

🧩 ¿Cómo se hace en Sitejet?

1. Ve al editor de tu sitio.

2. Busca en la barra lateral los elementos sociales.

3. Arrástralos al lugar deseado.

4. Personaliza colores, estilo y enlaces.

5. ¡Guarda y publica!

🚀 Integra y potencia tu marca

Las redes sociales son un puente entre tu marca y tu comunidad. Sitejet te ofrece todas las herramientas para conectar de forma visual, efectiva y profesional.

¿Listo para conectar tu mundo digital? 💬📱

Añadir un mapa

Para agregar una sección de mapas a su sitio web, siga estos pasos:

1. Vaya a “Elementos” en el panel de contenido izquierdo y haga clic en él. 
2. Seleccione “Mapa” y muévalo mediante arrastrar y soltar en el sitio web.

   

3. Ahora verás un mapa básico en tu Creador de sitios web. Por defecto, el marcador en el mapa será la dirección de tu cliente.

   

4. Tras colocar el elemento del mapa, encontrará la configuración a la izquierda. Allí encontrará varias opciones, como la altura, el nivel de zoom, la escala y si se activan los controles de zoom y la rueda del ratón.

   

Algunas opciones adicionales no están disponibles hasta que agregue una clave API de Google Maps.

Más opciones con la clave API de Google Maps

Al proporcionar una clave API de Google Maps en la configuración del sitio web, se abren más opciones. Estas incluyen la posibilidad de cambiar el estilo (hay muchos esquemas de color disponibles) y el tipo de mapa (satélite, el callejero predeterminado y otros), además de añadir más de un marcador. 

Para encontrar su clave API de Google Maps, siga estas instrucciones de Google . 

Si desea agregar la clave API de Google Maps en el generador de sitios web (CMS), vaya al menú superior y haga clic en más en el lado derecho.

Ahora se abrirá un nuevo menú a la derecha. Haz clic en “SEO y Meta” y añade la API en el campo inferior. Guarda tu progreso después. 

En el panel “Editar mapa” de la izquierda, en “Opciones de mapa”, ahora puedes configurar el “Tipo” y el “Estilo”. 

Para el “Tipo”, hay cuatro opciones disponibles: “Mapa de calles” (predeterminado), “Vista de satélite”, “Vista de satélite con calles” y “Mapa de terreno”. Todos estos “Tipos” son compatibles, en distintos grados, con las opciones de “Estilo”, lo que permite cambiar la apariencia. La única excepción es la “Vista de satélite” sin etiquetas de calles.

Hay 14 opciones de “Estilo” diferentes para los mapas. La opción “Predeterminado” es el esquema de colores habitual de Google Maps. La opción “Colorear” te permite configurar una serie de colores personalizados para que el mapa destaque o combine con los colores de tu marca. Si no quieres personalizarlo por completo, pero quieres algo que combine con tu sitio web, puedes elegir una de las muchas opciones disponibles que ofrecen otros colores, como el estilo oscuro “Midnight Commander”, el azul claro “Blue Water” o los numerosos estilos grises o monocromáticos. También hay un estilo “Sin etiquetas” y un estilo “Apple Maps”. 

Por defecto, se añade un único marcador al mapa con la dirección de la empresa como ubicación. Sin embargo, si hay varias ubicaciones, puede ser útil mostrarlas también en el mapa. Para añadir otro marcador, vaya a la sección “Marcador” del panel “Editar Mapa” y haga clic en el botón “+ Añadir” a la derecha de “Nuevo marcador”. Después, puede añadir la dirección.

Evitar errores

Para evitar cualquier error, tenga en cuenta los siguientes puntos:

• Ingrese su clave API de Google Maps en la pestaña “SEO / Meta” de la configuración del sitio web
• Asegúrese de que la clave que ingrese sea correcta: “copiar y pegar” suele ser el método más seguro
• Proporcionar a Google información de pago válida
• Si la ubicación no se muestra correctamente, verifique la dirección, utilizando Google si es necesario
• Limpia la caché de tu navegador

Este artículo es una traducción del original en inglés titulado “How to add a map in Sitejet” publicado por Sitejet.

Las superposiciones (o overlays) son una excelente forma de mejorar el diseño visual de tu sitio web, destacar contenido o mejorar la legibilidad del texto sobre imágenes o videos. En Sitejet, puedes añadir superposiciones fácilmente a secciones, columnas, imágenes y otros elementos visuales.

🎯 ¿Por qué usar superposiciones?

• Mejorar la legibilidad: Aumenta el contraste entre texto e imagen.

• Destacar elementos: Crea un enfoque visual atractivo en secciones específicas.

• Agregar profundidad: Genera una sensación más profesional y dinámica en tu diseño.

• Estilo y consistencia: Mantiene una línea gráfica coherente con tu marca.

✅ ¿Cómo añadir una superposición en Sitejet?

Sigue estos pasos para añadir una superposición a una sección o elemento:

1. Selecciona el elemento donde quieres aplicar la superposición (por ejemplo, una imagen de fondo de una sección).

2. En el panel de la derecha, haz clic en la pestaña de Estilo (Style).

3. Busca la opción llamada “Superposición” o “Overlay”.

4. Activa la superposición y selecciona:

   • El color de la superposición.

   • El nivel de opacidad (recomendado entre 30% a 60% para texto sobre imágenes).

5. Puedes usar gradientes para efectos más sofisticados. Por ejemplo, de negro a transparente para hacer que el texto destaque solo en la parte inferior.

🧪 Consejo de diseño

Utiliza colores de superposición que coincidan con tu paleta de marca. Por ejemplo, si tu color principal es azul, usa una superposición azul oscuro con opacidad para mantener coherencia visual.

💡 Ideas para usar superposiciones

• Encabezados con imagen de fondo: Añade una superposición oscura para que el título sea más visible.

• Secciones de llamada a la acción (CTA): Usa una superposición colorida para resaltar botones.

• Galerías o portfolios: Crea efectos de hover con superposición para mostrar texto adicional.

⚠️ Recomendación

Evita usar superposiciones demasiado opacas o con colores chillones, ya que pueden distraer al usuario. La clave está en el equilibrio visual.

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

No solo puede dar a sus clientes acceso parcial o total al sitio web, sino que también puede determinar con qué frecuencia pueden duplicar una sección o si se puede eliminar. Aquí es donde el número mínimo/máximo entra en juego. 

Puede encontrar estas configuraciones haciendo doble clic en cualquier sección o elemento, seleccionando Elemento de estilo y desplazándose hacia abajo hasta Varios. 

• El  recuento mínimo  determina cuántos de los elementos elegidos se supone que constituyen la  menor cantidad posible.
• El  recuento máximo  determina cuántos de los elementos elegidos se supone que constituyen la  mayor cantidad posible.

En este ejemplo, queremos duplicar esta sección cuatro veces como máximo, pero nunca menos de una. Al establecer el mínimo en 1 y el máximo en 4, aparece un pequeño icono junto a la sección que queremos duplicar. Como podemos ver, por ahora solo tenemos la opción de duplicar. A diferencia de la mayoría de las configuraciones y opciones que están ocultas para los clientes, podrán ver estos iconos y trabajar con ellos una vez que sean editables (puede activar la opción haciendo clic derecho en el elemento ” Es editable para el cliente “). 

Al duplicar, se ofrecen opciones adicionales, como eliminar el elemento, moverlo hacia arriba o hacia abajo e intercambiarlo con el anterior o posterior al elemento seleccionado. Si se alcanza el número máximo de duplicados, ya no es posible duplicarlo. 

Ejemplo:

Un buen ejemplo de esto es la sección de noticias del sitio web. Supongamos que su cliente desea añadir y eliminar noticias e información por sí mismo. Puede crear una sección editable y establecer un límite alto. Dentro de la sección, puede añadir titulares, textos y, quizás, una imagen, todos editables. De esta forma, su cliente puede duplicar una sección (y eliminarla) y editar todos los textos e imágenes que contiene. Duplicar elementos (por ejemplo, imágenes) y reorganizarlos dentro de esta sección también funciona. Asegúrese de establecer un límite que se ajuste al diseño general. Si establece el límite mínimo en 0, se puede eliminar por completo. 

Este artículo es una traducción del original en inglés titulado “Set Min/Max Count” publicado por Sitejet.

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. Son la unidad más pequeña del editor web. Son como bloques de construcción y se utilizan para proporcionar funciones básicas como textos, titulares, botones, etc.

Recomendamos buscar primero un ajuste preestablecido, ya que son secciones prediseñadas del sitio web que constan de diferentes elementos con opciones de estilo predefinidas. Le mostraremos cómo trabajar con ajustes preestablecidos en nuestro artículo de ayuda sobre ajustes preestablecidos .

Para editar un elemento, haga doble clic en él con el botón izquierdo del ratón o pulse Intro si ya está seleccionado. Puede usar las flechas para navegar entre elementos.

Al hacer doble clic en un elemento, no solo se puede editar su contenido, sino también ajustar la configuración que se abrirá en el panel izquierdo del CMS. Cada elemento tiene su propia pestaña (indicada por su nombre; en nuestro ejemplo, “Título”), donde se pueden realizar ajustes específicos. Todos los elementos también tienen una pestaña “Estilo”, donde se encuentran las configuraciones universales para todos los elementos.  

Añadir elementos

Para agregar un elemento, simplemente haga clic en la categoría “Elementos” en la barra lateral de contenido a la izquierda:

Junto a la barra lateral de contenido, aparecerá el panel “Añadir contenido”. Aquí puede seleccionar el elemento deseado y colocarlo en la posición deseada en el sitio web mediante la función de arrastrar y soltar. Una línea verde indicará dónde se añadirá el elemento.

Si ya ha seleccionado un elemento en el sitio web, también puede agregarlo desde el panel con un simple clic izquierdo del ratón. Si desea agregar varios elementos a la vez, pulse la tecla Ctrl mientras los selecciona todos. Si los arrastra y suelta en el sitio web, se agregarán en el mismo orden en que haga clic en ellos. También puede agregar elementos con nuestros atajos integrados. Por ejemplo, con Ctrl + 2 (o Cmd + 2) puede agregar un elemento de texto. Para ver todos los atajos, pulse Ctrl + K (o Cmd + K). 

Mover elementos

Tienes diferentes opciones para mover elementos en el sitio web. Puedes usar atajos o usar la gestión de jerarquías . Por ejemplo, si usas la combinación de teclas Ctrl + flecha arriba, puedes mover el elemento hacia arriba. Con Ctrl + flecha abajo, puedes mover el elemento hacia abajo según corresponda.

Con la gestión de jerarquías, puede mover elementos haciendo clic en la etiqueta con el botón izquierdo del ratón, manteniéndolo pulsado y arrastrando el elemento a la posición deseada con el ratón. Preste atención a la línea verde, que indica dónde se colocará el elemento al soltarlo. Si desea colocar un elemento entre dos contenedores, pulse Ctrl.

Pestaña de estilo

En la pestaña Estilo, puede configurar las preferencias básicas de diseño. Estos ajustes son los mismos para todos los elementos. Además, la pestaña Estilo le permite cambiar a los ajustes preestablecidos si el elemento se encuentra en un contenedor preestablecido. Para más información, consulte el artículo de ayuda sobre ajustes preestablecidos .

Diseño (elemento de Flexbox)

El editor web organiza los elementos según el principio “Flexbox” . El eje principal (uno junto al otro o uno debajo del otro) se define para el contenedor principal y se realizan especificaciones adicionales de organización. Esto siempre define cómo se deben organizar los elementos y evita sorpresas desagradables al moverlos manualmente: el diseño es siempre predecible y estable en todos los dispositivos, resoluciones de pantalla y circunstancias.

Para este propósito, la configuración de “Flexbox-Item” especifica cómo debe comportarse el elemento dentro del contenedor principal:

• La “Base” especifica qué tan grande debe ser el elemento en el eje principal en relación con el contenedor principal.
• Con “Crecer” puedes especificar si el elemento también puede crecer si hay más espacio disponible
• “Reducir” define hasta qué punto se puede reducir el elemento para liberar más espacio
• Si tiene varios elementos uno al lado del otro y cambia a la vista móvil, por ejemplo, estos se mostrarán uno debajo del otro. Con “Ordenar”, puede decidir la posición en la que se mostrará un elemento sin modificar su estructura original.

Visibilidad

En la sección Visible, puedes decidir si un elemento debe mostrarse o no. Puedes ajustar esta configuración según el dispositivo seleccionando escritorio, tableta y móvil en la barra de navegación superior y ajustando la configuración según corresponda. 

Además, puede reducir la opacidad y trabajar con transparencia. Además, puede especificar con “desbordamiento” si el contenido que excede los límites del elemento debe seguir mostrándose. Las flechas junto a la configuración de desbordamiento determinan si las barras de desplazamiento deben mostrarse en la parte inferior, a la derecha o automáticamente, según el tamaño de la ventana.

Espaciado

En Espaciado, puede definir el relleno (espaciado interno) y el margen (espaciado externo) de un elemento. Aquí puede especificar los valores para los lados superior, inferior, izquierdo y derecho. También puede introducir el mismo valor para todos los lados utilizando el campo de entrada junto a la etiqueta. 

Fronteras

Los marcos ofrecen una forma interesante de resaltar ciertos elementos o separarlos del resto del contenido. 

En Estilo, puede especificar si el marco debe ser una línea sólida, discontinua, punteada o doble. Además, puede establecer diferentes valores para el ancho del borde para los cuatro lados del elemento, similar al espaciado, o usar el campo de entrada junto a la etiqueta para establecer el mismo valor para todos. También puede especificar un color para el borde.

Si desea tener esquinas redondeadas, ingrese sus valores preferidos, ya sea para cada esquina o para todas las esquinas, utilizando el campo de entrada junto a la etiqueta.

Sombra

El sombreado crea una sensación de profundidad. Los elementos se pueden elevar o bajar para resaltarlos mejor. Puedes elegir entre:

• Por defecto
• Ninguno
• “Exterior”: este es el caso de uso típico para sombreado, donde se proyecta una sombra alrededor del elemento sobre los elementos “detrás” de él.
• “Dentro”: esto significa que los demás elementos alrededor del elemento seleccionado actualmente proyectan una sombra sobre el elemento seleccionado.

Después de seleccionar una opción en la parte superior, puede utilizar los campos correspondientes para ajustar el color de la sombra, su orientación y el desenfoque de la sombra y su propagación.

Sombra de texto

También puede administrar sus preferencias para la sombra del texto.

Posicionamiento

En Posicionamiento, puedes especificar la posición del elemento en el sitio web: 

• Con el posicionamiento “Estático”, el elemento siempre se muestra exactamente donde se colocó en el editor.
• Los elementos “relativos” sirven como “puntos de anclaje” para otros elementos subordinados, que, por lo tanto, están “dentro” del elemento relativo; este posicionamiento es importante para los elementos contenedores; aquí también se especifica el “Índice Z”, que define la posición en el eje Z (desde la pantalla).
• Los elementos con posicionamiento “Absoluto” se posicionan en relación con el siguiente elemento de nivel superior, que tiene un posicionamiento “relativo”; aquí también se puede especificar un índice Z.
• Los elementos “fijos” son relativos a la ventana del navegador: de esta manera, puede garantizar que el elemento siempre se muestre en la misma posición en la ventana del navegador, sin importar si el visitante del sitio web se desplaza hacia arriba o hacia abajo.
• “Fijo” garantiza que un elemento esté “fijo” en una posición relativa a la parte superior de la pantalla después de que el visitante del sitio web se desplaza por él.

Transformar

Con Transformar, se puede modificar aún más la apariencia del elemento. Hay cuatro opciones disponibles:

• Con “Traducir”, mueves el elemento en el sitio web sin mover ni afectar de otro modo a los elementos restantes.
• “Escala” cambia el tamaño del elemento mediante un factor porcentual
• “Rotar” gira el elemento según el ángulo que especifique
• “Skew” distorsiona el elemento en los ejes X e Y, haciendo que el elemento en sí esté sesgado.

Identificación y clase

En la sección “ID y clase”, se asignan los ID necesarios para trabajar con enlaces y CSS. También se asignan clases a un elemento. Puede obtener más información sobre ID y clases en nuestro artículo sobre código personalizado .

Animación

Con Sitejet, puedes asignar fácilmente diferentes animaciones a cada elemento. Tienes una amplia gama de animaciones para elegir. Explicamos más sobre estas animaciones y sus opciones de configuración en nuestro artículo de ayuda sobre animaciones .

Cronograma

En Programación, puede especificar una fecha de inicio y/o finalización para cada elemento, después de la cual el elemento debe mostrarse o desaparecer.

Otro

En “Varios”, especifique el número mínimo y máximo de elementos. Esto resulta útil si permite a sus clientes editar ciertas secciones o elementos. El número mínimo y máximo de elementos define la frecuencia con la que sus clientes pueden duplicar o eliminar un elemento, por ejemplo, para garantizar que el diseño siga siendo atractivo.

Al duplicar un elemento, el campo del elemento de origen se completa automáticamente con el ID del elemento original para que sepa desde qué elemento se duplicó el elemento actual.

Ajustes preestablecidos

Como se mencionó anteriormente, los ajustes preestablecidos constan de diferentes elementos. Por lo tanto, si hace clic en un elemento que forma parte de un ajuste preestablecido, encontrará dos categorías en “Estilo”: la categoría del elemento y la categoría del ajuste preestablecido correspondiente, que tiene el mismo nombre que el ajuste preestablecido. En nuestro ejemplo, usamos el ajuste preestablecido “Tarjetas”. 

Manejo de jerarquías

La gestión de jerarquías ofrece funciones adicionales además de la función “Mover” descrita anteriormente. Lo más importante es que proporciona una vista general intuitiva de todos los elementos anidados al pasar el cursor sobre una etiqueta. Para distinguir entre preajustes y elementos, puede observar el color de la etiqueta y el borde: 

• Naranja: preestablecido
• Azul claro: elemento

Si hace clic en un elemento, también puede consultar la ruta de navegación en el pie de página del editor del sitio web para obtener otra descripción general rápida de la jerarquía.

Cada etiqueta consta de un icono único y correspondiente al elemento correspondiente, para que puedas ver de un vistazo de qué elemento se trata. El elemento sobre el que se encuentra el ratón también tiene su nombre en la etiqueta. Dependiendo del elemento, también podrías ver opciones adicionales junto a la etiqueta: 

• Icono de puntos suspensivos para abrir el menú contextual
• Duplicado
• Borrar
• Subir
• Bajar
• Icono de estrella para indicar que el elemento está animado

Configuraciones responsivas

“Responsive” significa que el diseño se adapta según el dispositivo y la resolución para garantizar que el sitio web se muestre de la mejor manera posible. Tiene varias opciones para usar la configuración responsiva: en primer lugar, recomendamos usar ajustes preestablecidos con la mayor frecuencia posible, ya que están diseñados para ello. En segundo lugar, puede ajustar la configuración de colores, alturas, anchos, posicionamiento, etc., para la visualización en computadoras de escritorio, tabletas y dispositivos móviles.

Para hacer esto, utilice los tres íconos de dispositivos (que representan las ventanas gráficas de escritorio, tableta y teléfono inteligente) en la parte superior del CMS para cambiar a la vista deseada y cambiar el valor correspondiente para esa vista específicamente.

En el siguiente ejemplo, queremos ajustar el relleno a la izquierda y a la derecha. Para ello, proceda de la siguiente manera:

1. Cambie a la vista de tableta haciendo clic en el ícono de tableta en la parte superior del CMS
2. Asegúrate de estar en la pestaña Estilo en Elementos 
3. En Espaciado, haga clic en “Personalizado” junto a “Relleno” y escriba 3 en el campo de entrada derecho e izquierdo después de seleccionar rem

Ahora, ajusta la vista móvil seleccionando el icono correspondiente en la barra de navegación superior. En este ejemplo, cambiamos el relleno a 1 rem.

Los cambios en las vistas de otros dispositivos se aplican automáticamente a todos los dispositivos más pequeños: todos los ajustes que realice en la vista de escritorio se aplican a todos los tipos de dispositivo, a menos que se sobrescriban. Si modifica los ajustes de la vista de tableta, estos también se aplican a los dispositivos móviles, pero no a los de escritorio. Observará que, tras ajustar el relleno, como en el ejemplo anterior, el color de la etiqueta de ajustes ha cambiado de blanco a morado para la tableta y de amarillo para el móvil, según el color de los iconos de la barra de navegación superior.

Este artículo es una traducción del original en inglés titulado “What are elements?” publicado por Sitejet.​

Con los ajustes preestablecidos de formulario, puede agregar un formulario de contacto funcional en segundos. Los elementos adicionales le permiten ajustar los ajustes preestablecidos según las necesidades individuales de sus clientes. Los elementos “Captcha” también forman parte de cada ajuste preestablecido de formulario y garantizan que el formulario sea completado por una persona y no por un ordenador.

De forma predeterminada, las entradas del formulario se envían a la dirección de correo electrónico predeterminada del cliente, definida en los Datos de Contacto del sitio web. Puede especificar la dirección del destinatario en la configuración del formulario, en el campo “Destinatario”. También puede agregar varios destinatarios con este formato: email@abc.com; anothermailaddress@abc.com; thirdone@my-inbox.io;

Consejo: El Portal del Cliente es donde puede organizar toda la información de su cliente, como sus datos de contacto, dirección y correo electrónico de inicio de sesión. Si no ha introducido una dirección de correo electrónico en la configuración del formulario, Sitejet enviará automáticamente las entradas del formulario a la dirección de correo electrónico de inicio de sesión del cliente. Una vez enviado el formulario de contacto, toda la información introducida también se puede consultar como una entrada en el portal del cliente .

Agregar un formulario

Para añadir un formulario a tu sitio web, haz clic en la categoría “Formularios” en la barra lateral izquierda. Se abrirá el panel de contenido, donde se muestran todos los preajustes de formulario (marcados en naranja), que son formularios de contacto completamente funcionales y constan de diferentes elementos. Debajo de los preajustes, puedes ver todos los elementos individuales (en azul). Puedes añadir más elementos a los preajustes para personalizarlos según tus necesidades. 

Una vez que hayas arrastrado el ajuste preestablecido al sitio web, tendrás disponible un formulario de contacto completamente funcional. Como puedes ver en la ruta de navegación, un ajuste preestablecido de formulario consta de tres niveles diferentes:

• El ajuste preestablecido
• El contenedor de formularios
• Y los elementos de forma

Como siempre, puedes utilizar el panel de configuración del lado izquierdo para ajustar el formulario a tus necesidades.

Configuración del formulario

Con la configuración del formulario, define el comportamiento del formulario.

Utilice el campo “Título” para introducir un nombre representativo. La ventaja de esto es que las entradas del formulario en el portal del cliente se ordenan según el nombre del formulario de contacto. De esta forma, usted y su cliente siempre sabrán dónde han ingresado los visitantes del sitio web.

Los campos “Redireccionar” y “Webhook” desempeñan un papel tras enviar un formulario: en el campo “Redireccionar”, se introduce la URL o el slug de la subpágina a la que se redirige a los visitantes del sitio web tras enviar correctamente sus datos. Suelen ser páginas de agradecimiento o similares, que se utilizan mediante píxeles, por ejemplo, para rastrear el comportamiento de los visitantes del sitio web con mayor precisión. Puede obtener más información sobre los píxeles en el artículo sobre la inserción de código HTML, CSS y JavaScript personalizado . Además, la información se puede reenviar a herramientas externas, como sistemas CRM, a través de la URL de un webhook en cuanto un visitante del sitio web envía el formulario. Consulte la sección sobre webhooks para obtener más información. 

En la configuración del formulario, también se definen las direcciones de correo electrónico del destinatario, del remitente y el asunto. Esto puede ser útil, por ejemplo, para que los filtros automáticos de correo electrónico clasifiquen las entradas del formulario en carpetas específicas.

Elementos de formulario

Como se mencionó anteriormente, junto a los ajustes preestablecidos de formulario, también encontrará elementos de formulario en la categoría “Formularios” de la barra lateral izquierda. Analicemos los elementos de formulario y sus funciones con más detalle.

Todos los elementos del formulario se pueden marcar como “Obligatorios”. Si un elemento es “Obligatorio”, se informa al visitante del sitio web que debe completar este campo si sigue vacío al intentar enviar el formulario. Algunos elementos también ofrecen “marcadores de posición”. Estos rellenan el campo de texto con contenido de muestra hasta que se sobrescribe.

1. Campo de entrada de texto

Los elementos de texto son útiles cuando se requiere introducir texto sin formato. Pueden usarse para nombres, cargos, direcciones, etc. Se pueden asignar etiquetas que se muestran encima o junto al campo de entrada. También se pueden usar marcadores de posición.

2. Campo numérico

Un campo numérico es útil cuando se espera que la entrada contenga números, pero no texto. Se pueden especificar valores mínimos y máximos para este campo, lo cual resulta útil para pedidos, por ejemplo.

3. Campo de correo electrónico

Con un campo de correo electrónico, puede asegurarse de que el visitante del sitio web ingrese una dirección de correo electrónico con el formato correcto. El navegador detecta entradas incorrectas (por ejemplo, un formato de correo electrónico no común, falta el símbolo “@”, etc.) y avisa al visitante del sitio web al enviar el correo para que pueda corregir la dirección de correo electrónico.

4. Campo de número de teléfono

Funciona igual que los campos de entrada mencionados anteriormente. Úselo solo para números de teléfono.

5. Campo de entrada múltiple de área de texto

Las áreas de texto ofrecen más espacio para escribir párrafos completos. Esto es ideal para mensajes o descripciones detalladas. El número de líneas es útil para determinar la altura del campo de texto. El visitante del sitio web puede personalizar esta configuración con un navegador moderno.

6. Casillas de verificación

Las casillas de verificación son ideales si desea tener varias opciones dentro del formulario. Agregue más de una si lo desea. Los nombres de las opciones se pueden cambiar en cualquier momento. Para cada opción, se puede especificar que sea “Obligatorio”. Si este campo está habilitado, el sistema comprueba si el visitante del sitio web ha hecho clic en él al enviar el formulario. De no ser así, se le informará al respecto.

7. Botones de opción

Los botones de opción funcionan de forma similar a las casillas de verificación. Sin embargo, solo se puede seleccionar una opción a la vez. Tras seleccionar una opción, solo queda seleccionada una. Se pueden añadir más opciones pulsando la tecla [Intro] o haciendo clic en el icono de la marca de verificación a la derecha.

8. Listas desplegables

Las listas de selección o listas desplegables permiten seleccionar una opción específica de una lista. Si se hace clic en el campo “Múltiple”, se pueden seleccionar varias opciones a la vez, de forma similar a las casillas de verificación. Si no se hace clic en el campo, las listas de selección funcionan como botones de opción: solo se puede seleccionar una opción. También se puede especificar si se requiere una selección. El texto “Por favor, elija” también es personalizable.

Las listas desplegables pueden ayudar a mantener el formulario simple y ordenado si hay muchas opciones.

9. Campos de fecha y hora

Los campos de fecha y hora son útiles para establecer una posible fecha y suelen crearse con Javascript. En Sitejet, basta con añadir este elemento y personalizarlo a su gusto. Sitejet ofrece numerosas opciones de configuración.

En la sección “General”, puede asignar una etiqueta y un texto de marcador de posición como de costumbre y especificar si se requiere una selección de fecha.

En la sección “Fecha y hora” puede especificar si desea seleccionar la fecha, la hora o ambas. Seleccione el formato de fecha y hora deseado y limite la hora del día con los campos de tiempo mínimo y máximo si es necesario. Por ejemplo, puede hacer reservas durante el horario de apertura de un restaurante. También puede ajustar los intervalos de tiempo que el visitante del sitio web puede elegir. Por ejemplo, el valor predeterminado “60 minutos” solo permite seleccionar las 12:00, 13:00, 14:00, etc., mientras que “15 minutos” permite seleccionar las 12:00, 12:15, 12:30, etc. Los números de las semanas se pueden atenuar para mayor claridad. “Incrustar” muestra el calendario completo en lugar de un campo de entrada. Si la vista del calendario no está incrustada, se muestra como una ventana emergente al hacer clic.

Las imágenes muestran la diferencia entre un elemento “no incrustado” (primera imagen) y un elemento “incrustado” (segunda imagen).

En la sección “Días laborables” se especifican los días laborables que se pueden seleccionar.

Si desea especificar la fecha más temprana y más tardía posible, introdúzcala en las secciones “Fecha mínima” y “Fecha máxima”. “Sin” significa que no hay restricción. “Fijo” define un día específico. “Dinámico” le permite establecer una fecha futura basándose en el día actual. Por ejemplo, con la opción predeterminada “5 días a partir de hoy” como fecha mínima, los visitantes del sitio web solo pueden seleccionar fechas que se encuentren al menos 5 días en el futuro. Esto le da a usted o a su cliente tiempo suficiente para responder a una solicitud. Si solo desea planificar un máximo de 2 meses para el futuro, proceda de la siguiente manera:

1. Introduzca el número “2” al lado de “Fecha máxima”
2. Haz clic en “Días a partir de hoy”
3. Seleccione “Meses a partir de hoy”

10. Botón de formulario

Se requiere al menos un botón para que los visitantes del sitio web puedan enviar un formulario. El botón de formulario puede tener tres funciones:

1. Restablecer el formulario y eliminar todos los datos ingresados
2. Enviando el formulario
3. Ninguna acción (adecuado para ejecutar su propio javascript, por ejemplo)

Además, puedes especificar diseños específicos independientemente de otros botones.

11. Elemento de carga de archivos

Utilice este elemento si desea que los visitantes del sitio web puedan subir archivos ellos mismos. En el campo “Formatos de archivo”, introduzca todos los formatos o tipos de archivo que se pueden subir. Por ejemplo, puede introducir “.jpg, .png” para permitir archivos JPG y PNG. También puede especificar “images/*” como tipo de archivo para permitir todos los tipos de imágenes a la vez.

Este campo también se puede marcar como “Obligatorio”.

Al enviar el formulario, este archivo se adjuntará al correo electrónico enviado al destinatario. Sitejet no aloja estos archivos. Por lo tanto, el límite de tamaño de archivo se basa en el tamaño máximo permitido por el proveedor de servicios de correo electrónico.

12. Captcha

Un captcha garantiza que el formulario de contacto no se utilice indebidamente para correos spam. Si desactiva la opción “Enviar correo” en la configuración del formulario, también puede eliminar el campo captcha. En este caso, las entradas del formulario se mostrarán en el portal del cliente. Si mantiene activada la opción “Enviar correo”, el captcha será obligatorio a menos que utilice una de las dos opciones siguientes:

1. Utilice una dirección de correo electrónico administrada por Sitejet y creada con un dominio registrado a través de Sitejet como destinatario de las entradas del formulario
2. Utilice formularios de terceros insertando el código de incrustación de terceros en su proyecto de sitio web, por ejemplo, con un elemento HTML

Sin estas alternativas, no es posible guardar el proyecto sin un elemento captcha.
También se pueden asignar etiquetas o marcadores al captcha. Además, se pueden configurar los colores del texto y del fondo de la imagen del captcha. Un fondo transparente puede ser útil si se utiliza una imagen o una textura de fondo en el contenedor del formulario. Tenga en cuenta que se conserva la legibilidad del captcha.

13. Elementos normales

Dentro del contenedor se pueden usar no solo elementos de formulario, sino también elementos normales. Incluso es posible usar preajustes completos. Por ejemplo, combine columnas, acordeones u otros preajustes con el contenedor para crear cualquier diseño de formulario.

Formularios de prueba

Ya puede probar si el formulario funciona en la vista previa del sitio web. No es necesario publicar el sitio web todavía. Simplemente use el formulario como visitante del sitio web y compruebe si usted o su cliente han recibido la notificación por correo electrónico o si las entradas del formulario aparecen en el portal del cliente si no la ha activado. Normalmente, la notificación debería llegar en un plazo de 5 a 10 minutos.

Webhooks

Un webhook envía información de un sitio web a otro servidor. En Sitejet, se pueden usar webhooks para enviar entradas de formulario a otro servidor. Cada vez que un visitante del sitio web envía el formulario, los datos se envían a la URL que especifique.

¿Para qué se pueden utilizar los webhooks?

De forma predeterminada, cada entrada del formulario se envía a su cliente por correo electrónico y está disponible en el portal del cliente . También es habitual procesar los datos del formulario a través de otros servicios.

Los posibles casos de uso son:

• Crear un cliente potencial en un CRM (por ejemplo, Salesforce, Pipedrive)
• Reservar un espacio en un calendario (por ejemplo, Google Calendar)
• Transferir datos a una plataforma de mensajería instantánea (por ejemplo, Slack)
• Y mucho más

Configurar un webhook

Si aún no lo ha hecho, agregue un formulario al sitio web. Su funcionamiento ya se explicó en la sección “Agregar formulario” . A continuación, acceda a la configuración del formulario haciendo doble clic en “Formulario” en la ruta de navegación.

Alternativamente, puede hacer clic en “Mostrar configuración del formulario” en el elemento de formulario actualmente seleccionado (aquí utilizando el campo de entrada como ejemplo).

En la ventana de configuración, ahora verá el campo “Webhook” en la sección “Mensajes”.

Según el servicio que desee asociar con su formulario, la URL que debe introducirse aquí variará. Puede consultar la URL que debe introducir en la documentación del servicio seleccionado. Una vez introducida la URL, confírmela con la tecla [Intro] y guarde el proyecto.

Solicitud de carga útil

Cada vez que el formulario se rellene con información y se envíe, los siguientes datos se enviarán a la URL que haya introducido.

{
  "Nombre": "John Doe",
  "Teléfono": "+1 2345 67890",
  "Correo electrónico": "john@doe.com",
  "Mensaje": "Hola mundo"
}
		

Usar webhooks con Zapier

Zapier.com ofrece flujos de trabajo para automatizar el intercambio de información entre aplicaciones web. Por ejemplo, las entradas de formulario pueden enviarse a Zapier y procesarse en pasos posteriores. En Zapier.com, estos procesos de automatización se denominan “zaps”. Primero, cree un nuevo Zap y seleccione “Webhooks de Zapier” como activador.

Haga clic en “Ver webhook” para mostrar la URL de su webhook individual.

Copie esta URL en el campo “Webhook”:

Guarde los cambios y realice los siguientes pasos:

1. Mueva el mouse sobre el ícono de vista previa en el lado izquierdo de la navegación superior.
2. Haga clic en “Abrir sitio web de vista previa” en la lista desplegable que se abre.
3. Ahora ingrese algunos valores de prueba en el formulario del sitio web y envíe el formulario.
4. Luego regresa a Zapier.com y haz clic en “Probar este paso”.

Si todo ha sido correcto, los valores de prueba se muestran aquí. A continuación, puede configurar los pasos adicionales para procesar los datos. Dependiendo de la herramienta externa a la que se transmita la información, podrían ser necesarios pasos adicionales dentro de la herramienta y de Zapier.

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