Los widgets son los componentes clave de un sitio, ya que te permiten agregar y administrar contenido de manera efectiva. Sirven como elementos esenciales que mejoran tanto la funcionalidad como el diseño de su sitio web. Al incorporar varios tipos de widgets, puede crear una experiencia de usuario dinámica y atractiva.
Hay varios métodos para añadir widgets. También varía si utiliza el Editor clásico, el modo flexible o el Editor 2.0. A continuación se muestra cómo puede agregar widgets:
Para añadir widgets desde la biblioteca de widgets:
-
-
Para buscar un widget, usa la barra de búsqueda o selecciona una categoría para navegar rápidamente hasta el widget deseado.
-
Los widgets personalizados de la cuenta y del sitio se encuentran en Personalizado categoría del panel de widgets.
-
-
Haz clic en el widget y arrástralo a la ubicación que desees en el sitio. Aparece un indicador de ubicación azul.
-
El widget aparece en la ubicación que muestra el indicador de ubicación azul.
Al arrastrar y soltar un widget en tu sitio, anota el texto del indicador de ubicación azul (Solo en el editor clásico):
-
Inserte aquí. El widget se añadirá a una fila o columna existente.
-
Insertar en una nueva fila. Se añadirá una nueva fila y el widget se colocará dentro de ella.
-
Insertar en una nueva columna. Se añadirá una nueva columna y el widget se colocará dentro de ella.
Nota
Con el Editor 2.0, los widgets solo se pueden agregar a las columnas existentes, no se pueden crear nuevos con la colocación de un widget.
Para añadir widgets desde el lienzo:
-
Haga clic con el botón derecho en cualquier widget y seleccione Añade el widget a continuación en el menú contextual para añadir widgets inmediatamente debajo del widget actual (Solo en el editor clásico).
-
En el modo Flex o en el Editor 2.0, haga clic en el signo más (+) en el menú flotante.
-
Si hace clic con el botón derecho en una columna, haga clicAgregar, y seleccioneAñade el widget a continuación
(Relevante para los modos Classic, Flex y Editor 2.0)
-
-
Selecciona uno de los cuatro widgets más populares o haz clic Más widgets para abrir el menú completo. Tras añadir el widget, puedes editarlo como de costumbre.
-
Haga clic en el signo más + icono en el menú flotante.
-
Si hace clic con el botón derecho en una columna, haga clic Agregar y seleccione Añade el widget a continuación.
El panel multimedia te permite arrastrar y soltar fácilmente archivos multimedia (imágenes, vídeos e iconos) en el lienzo y añadir un widget al mismo tiempo. Por ejemplo, si añades una imagen del panel multimedia al lienzo, se añade automáticamente un widget de imagen. Para obtener más información, consulte Panel multimedia.
Para añadir una imagen, un icono o un widget de vídeo desde el panel central:
-
(Opcional) Utilice los filtros para ayudar a localizar el medio deseado. O bien, haga clic Subir contenido multimedia para añadir nuevos archivos multimedia.
-
Haga clic y arrastre el medio deseado al lienzo. Tenga en cuenta que las imágenes no se pueden colocar en los widgets del catálogo de la tienda o la galería de productos ni en widgets conectados a páginas dinámicas.
Puedes personalizar los widgets para ajustar el contenido, la apariencia y el diseño de tu sitio. La edición de widgets te permite tener un mayor control sobre las funciones que tiene tu sitio y el comportamiento de estas funciones.
La mayoría de los widgets tienen un área para su contenido y su diseño.
La mayoría de los widgets del editor tienen opciones de diseño que te permiten personalizar la apariencia del widget para tu sitio. No todos los widgets tienen las mismas opciones. Por ejemplo, algunos widgets no permiten editar el espaciado interior, mientras que otros no permiten cambiar el espaciado exterior.
Los siguientes son ajustes de diseño comunes.
el caso de los widgets con texto, puede editar los estilos de texto. Cualquier cambio que realices en un widget específico anulará el estilo del texto del tema
Estilos de texto en el Editor 2.0
El tamaño del texto establecido en widgets específicos (editor de texto, formulario de contacto, navegación, empresa, clic para enviar un correo electrónico, hacer clic para llamar y widgets de botones) se ajustará automáticamente en función del tamaño de la pantalla. En ordenadores de escritorio, el tamaño del texto es del 100%, en tabletas, el tamaño del texto se reduce hasta un 85% y en dispositivos móviles, el tamaño del texto se reduce hasta un 80%. Sin embargo, de forma predeterminada, el editor no ajustará el texto para que sea inferior a 16 px en dispositivos móviles o tabletas. Y no se ajustará a más de 60 px en tabletas o 40 px en dispositivos móviles. Esto es para garantizar que el texto siga siendo legible y sea proporcional al tamaño de cada pantalla.
Si necesitas anular el tamaño del texto por dispositivo, puedes ajustar el tamaño del texto en el texto del tema y el texto no se reducirá según el tamaño de la pantalla.
A continuación se muestran ejemplos de cómo se ajustará el tamaño del texto en diferentes escenarios:
-
Si configuras el tamaño del texto en 40 px en el escritorio, el texto se reducirá automáticamente a 34 px en la tableta y a 32 px en el móvil.
-
Si configuras el tamaño del texto en 16 px en el escritorio, no se reducirá en un 85% a 13 px en tabletas, ni en un 80% a 12 px en dispositivos móviles, ya que es demasiado pequeño para leerlo y está por debajo del mínimo de 16 px. En cambio, el tamaño del texto se mantendrá igual en 16 px en todos los tamaños de pantalla.
-
Si configuras el tamaño del texto en 100 px en el escritorio, se ajustará a 60 px en la tableta, ya que ese es el máximo, en lugar de 85 px, que sería el 85% del tamaño del texto del escritorio. El tamaño del texto móvil también se ajustará a 40 px, ya que es el máximo, en lugar de 80 px, que sería el 80% del tamaño del texto del escritorio
Las opciones de diseño suelen ser específicas de determinados widgets. Para seleccionar una de las opciones de diseño disponibles para ese widget, haga clic en el diseño que aparece en el editor de diseño (o haga clic en la flecha pequeña situada junto a él) para abrir elSeleccione Diseñomenú. Para cambiar el diseño seleccionado, haz clic en el diseño que quieras usar en su lugar y se actualizará en el widget.
Ejemplo de sección de diseño en el Diseño pestaña (Editor clásico):
Ejemplo de sección de diseño en el panel de diseño (Editor 2.0/Flex):
-
Color. Haga clic en el icono de color redondo situado a la derecha del nombre de la configuración para abrir el selector de colores y cambiarlo
-
Frontera. Cambia el ancho del borde con el control deslizante o el cuadro de texto. Haga clic en el icono con forma de engranaje
) para ver más opciones.
-
Antecedentes. Utilice una imagen o un color de fondo para este widget mediante el cuadro de diálogo Elegir y colocar imágenes o la URL de un vídeo.
-
Anchura y altura. Usa el control deslizante o el cuadro de texto para cambiar la cantidad de píxeles
-
Esquinas redondeadas. Aumente o disminuya el redondeo de las esquinas de un widget. Haz clic en el icono con forma de engranaje (
-
Sombras. Activa o desactiva una sombra para este widget
-
Texto. Establezca varios aspectos del texto, como la familia de fuentes, el peso de la fuente, etc.
Los widgets que incorporan un botón ofrecerán la posibilidad de seleccionar si el botón hereda el estilo de botón principal o secundario definido en el panel de temas. Además, puedes elegir entre los diferentes diseños de botones, editar el estilo del botón (ancho, alto) y el texto del botón (fuente, tamaño del texto) y ajustar el espaciado interior y exterior
Cualquier cambio que realices en el editor de diseño anulará los estilos establecidos en el nivel de los botones del tema. Si necesitas volver al estilo de los botones del temaRestablecer el estilo del tema.
-
Si se realizan cambios en el botón (que anularán los estilos establecidos en el nivel del botón del tema), seguirá apareciendo un cuadro indicador en el estilo del botón principal o secundario.
-
Si se hace clic en el estilo de botón que no tiene el cuadro indicador, se restablecerá el botón al estilo establecido en el nivel del botón del tema.
Cambia el espaciado interior (espaciado dentro de los bordes del widget) y el espaciado exterior (espaciado fuera de los bordes del widget). Cada número del cuadro exterior establece el espaciado exterior de su propio lado (superior, inferior, izquierdo o derecho) y cada número del cuadro interior establece el espaciado interior de su propio lado (superior, inferior, izquierdo o derecho).
Para obtener información detallada, consulte Espaciado exterior e interior
Las animaciones de entrada te permiten animar widgets y widgets de página cuando se cargan por primera vez en tu sitio. El movimiento y la interactividad hacen que tu sitio sea más memorable y pueden destacar las secciones en las que quieres que los visitantes se centren, como un número de teléfono o un botón de contacto
Además, puede controlar dónde comienza y termina la animación en la pantalla mediante elDesplazarseajustes.
Para añadir una animación:
-
Navegue hasta el Animación sección.
-
Selecciona un Activador y Animación.
-
(Opcional) Personaliza la animación. Por ejemplo, la dirección desde la que entra.
Ejemplo de configuración de animación:
Para restablecer la animación, haga clic Restablecer a los valores predeterminados.
Si está utilizando la animación Scroll, puede hacer clic Pausar la animación en el panel lateral para pausar todas las animaciones mientras trabajas en el editor. La animación permanecerá en el sitio en vivo y en modo de vista previa.
Nota
Las animaciones configuradas para los tamaños de pantalla de escritorio o tableta están vinculadas y serán las mismas. Sin embargo, los dispositivos móviles son independientes y no se aplicarán las animaciones configuradas para ordenadores de sobremesa y tabletas.
Cuando añadas animaciones, ten en cuenta lo siguiente:
-
Demasiadas animaciones pueden desorientar o distraer a los usuarios, así que úsalas con moderación.
-
Al eliminar una animación, recuerda que las animaciones se pueden aplicar tanto a las filas como a los widgets, por lo que es posible que la animación que estás viendo se haya agregado en algún lugar inesperado.
Para eliminar animaciones:
-
Navegue hasta el Animación sección.
-
Haga clic en el Animación menú desplegable y seleccione Ninguno.
Nota
Si un elemento no tiene una animación, se puede aplicar a uno de los contenedores en los que se encuentra el elemento. Se recomienda revisar todos los contenedores para ver si hay posibles animaciones.
Usa la IA para crear rápidamente widgets de sitio personalizados sin salir del editor. Ten en cuenta que los widgets del sitio son específicos del sitio en el que se crearon y no se pueden usar en otros sitios de tu cuenta. Todos los widgets de sitio personalizados que crees se almacenan en el panel de widgets, debajo de Personalizado categoría de fácil acceso.
Nota
Esta función está disponible para los administradores y miembros del personal que tengan Copiloto permiso.
Para crear un widget de sitio personalizado en el editor:
-
Desde el panel de widgets, puedes generar un widget personalizado para el sitio de las siguientes maneras:
-
Introduzca un mensaje. Puede utilizar el @ símbolo para hacer referencia a una colección específica. Nuestra IA puede recuperar las colecciones de su sitio y su estructura, lo que le permite crear widgets que muestren su contenido.
-
Haga clic Ideas para probar para explorar una biblioteca de mensajes prediseñados. Haga clic Usa este mensaje para seleccionar la solicitud deseada.
-
Remezcla un widget ya hecho. Haga clic para seleccionar el widget deseado y, a continuación, Remezcla. El widget remezclado se añade al Personalizado sección del panel de widgets y está lista para ser arrastrada y soltada en el lienzo.
Tenga en cuenta que Copiloto se requiere permiso para remezclar un widget.
-
-
Si has introducido un mensaje, se abre una nueva ventana en el lado derecho de la pantalla. Según la complejidad de la solicitud, la IA puede tardar unos instantes en generar el widget. Cuando se haya creado el widget, haga clic Llévame allí.
-
Desde el Personalizado sección del panel de widgets, arrastra y suelta el widget en el lienzo.
-
(Opcional) Si necesitas editar el widget, haz clic en el icono de tres puntos de la tarjeta del widget personalizado del sitio y selecciona una de las siguientes opciones:
-
Edita con Copilot
-
Editar nombre e icono
-
Administrar en Workspace (Solo planes personalizados)
-
Archivo
-
Los widgets fijos permiten mantener un widget visible en todo momento, incluso cuando un visitante se desplaza hacia abajo por la página, mientras que los widgets anclados se mantienen en su elemento principal (columna o columna interna) mientras el elemento principal esté en la ventana gráfica.
Los widgets se pueden configurar como fijos o anclados en el Posición sección del Panel de Diseño.
Los widgets fijos te permiten mantener un widget visible en todo momento, incluso cuando un visitante se desplaza hacia abajo por la página. Usa widgets fijos para mantener las llamadas a la acción importantes fijas, visibles y en las que se pueda hacer clic en ellas en todas las páginas del sitio
Para corregir un widget:
-
Busca el widget deseado y, a continuación, haz clic en él y arrástralo al lienzo.
-
Haga clic en el widget para abrir el menú flotante y seleccioneEditar diseño. Esto abre el panel de diseño en el lado derecho de la pantalla. Desplázate hacia abajo hasta elPosiciónsección del panel de diseño.
-
Haga clic para ampliar elTipo de puestomenú y selecciónFijo. Este cambio se aplica a todos los tamaños de pantalla, pero puedes anularlo si es necesario. Una vez que selecciones la posición, no podrás cambiar de Fija a Fijada. Esto se debe a que, cuando seleccionas Fijo, el widget se retira de su contenedor original para que pueda permanecer visible en la pantalla mientras el usuario se desplaza. Si cambiaras de Fijo a Fijo, el editor no sabría en qué contenedor colocar el widget. Si necesitas cambiar, primero tienes que volver a la opción Predeterminada. El widget se moverá a la primera sección de la ventana gráfica
-
En elEspaciadomenú, usa elConfiguración de márgenes para definir dónde se encuentra el widget en la ventana gráfica. Es especialmente importante configurarlo si tienes dos widgets fijos en la misma posición de la ventana gráfica
-
Para mostrar el widget solo en la página actual, habilite laMostrar solo en esta páginaalternar.
Los widgets anclados se mantienen en su elemento principal (columna o columna interior) mientras el elemento principal esté en la ventana gráfica. Si hay más de un widget anclado en la misma posición, el widget de arriba será el
Nota
La opción Fijado no es una opción en las cuadrículas avanzadas.
Para anclar un widget:
-
Busca el widget deseado y, a continuación, haz clic en él y arrástralo al lienzo.
-
Haga clic en el widget para abrir el menú flotante y seleccioneEditar diseño. Esto abre el panel de diseño en el lado derecho de la pantalla.
-
En el panel de diseño, desplázate hacia abajo hasta elPosiciónsección.
-
Haga clic para ampliar elTipo de puestomenú y selecciónFijado. Esto garantiza que el widget se mantenga en su elemento principal (columna o columna interior) mientras el elemento principal esté en la ventana gráfica. Este cambio se aplica a todos los tamaños de pantalla, pero puedes anularlo si es necesario
-
En elPosiciónsección, configura el desplazamiento del widget. El desplazamiento es el punto en el que se fijará el widget en el pergamino antes de salir de la ventana gráfica. Si se configura desde el escritorio, los demás tamaños de pantalla tendrán los mismos valores; sin embargo, se pueden anular por tamaño de pantalla según sea necesario. Si el encabezado fijo está activado, el desfase se basará en la altura predeterminada del encabezado. Si habilitas un encabezado fijo después de configurar el desfase, no se actualizará automáticamente y tendrás que volver atrás y ajustar el desfase manualmente.
Si en algún momento mueves el widget anclado a un elemento principal diferente (columna o columna interior), se conservará la configuración del panel de diseño, como el desplazamiento.
Nota
Esta información es específica del Editor clásico y no es relevante para el Editor 2.0 (anteriormente conocido como Editor All-Flex). Para identificar la versión actual de su editor consulteCómo identificar la versión del editor que usa tu sitio .
Establece si el widget está alineado a la izquierda, a la derecha o al centro de su área.
Algunos widgets se comportan de forma muy diferente en diferentes vistas. Comprueba cómo se muestra tu widget en cada vista después de añadirlo para asegurarte de que se muestra correctamente.
Para establecer la alineación, haga clic con el botón derecho en el widget y, a continuación, haga clic enAlinear a la izquierda,Alinear el centro, o Alinear a la derecha icono.
Para ver las opciones de alineación en el modo Flex o en el Editor 2.0, consulte Diseñe con Flex.
Selecciona el contenedor en el que se encuentra el widget, lo que te permite encontrarlo y editarlo fácilmente.
Editor clásico:Haga clic con el botón derecho en el widget y,Seleccione Contenedor, y seleccioneColumnaoFila.
Editor 2.0:Haga clic con el botón derecho en el widget y, Seleccione una capa y seleccione el contenedor deseado.
Un widget se puede copiar y pegar en otra ubicación. La opción de pegar solo aparece si tienes un widget que se ha copiado
Haga clic con el botón derecho en el widget y seleccioneCopiaroPegar.
Como alternativa, en Editor 2.0, haga clic en Icono duplicado en el menú flotante.
Aviso
No recomendamos copiar y pegar los formularios de contacto, ya que esto suele provocar problemas en el formulario de contacto duplicado.
Usa la función de ocultarse en el dispositivo para cambiar el contenido en función del dispositivo que utilice el visitante para acceder a tu sitio web. Por ejemplo, muestra un widget para llamar con un clic para los usuarios de dispositivos móviles o un formulario de contacto para los usuarios
Widgets ocultos por Ocultar en el dispositivo la función no se elimina.
Editor clásico
Haga clic con el botón derecho en el widget, haga clic Ocultar en el dispositivo, selecciona un dispositivo. Si aparece el icono de un ojo en el panel lateral, esto indica que hay elementos ocultos en el dispositivo que estás editando actualmente. Para ver los elementos ocultos, haga clic en el icono con forma de ojo.
Editor 2.0
Los elementos solo se pueden ocultar en los dispositivos que se están editando actualmente.
Para ocultar un elemento: en el panel lateral, haga clic Capas, sitúe el cursor sobre el elemento deseado y haga clic en Icono de ojo. Si hay elementos ocultos en el dispositivo que estás editando actualmente, se indicarán en el panel de capas con un icono con forma de ojo tachado.
Nota
Es posible que el contenido oculto siga apareciendo en el código del sitio activo (después de publicarlo o volver a publicarlo). Esto es previsible y se debe a la tecnología utilizada
Los enlaces de anclaje te permiten enviar a los visitantes a una sección específica de la página, lo que les facilita ir de un lugar a otro en una página más larga o a una sección específica a la que quieras hacer referencia.
Haga clic con el botón derecho en el widget y seleccioneEstablecer como ancla.
Para obtener más información sobre los anclajes, consulte Acciones y opciones de Canvas.
Si bien puede haber diferencias en función de lo que intente lograr una aplicación o un widget personalizado, los widgets creados con nuestro generador de widgets no son necesariamente mejores que los que crean nuestros socios de aplicaciones.
Las aplicaciones también deben cumplir estándares estrictos y someterse a un riguroso proceso de control de calidad por parte del equipo de Duda.
Para obtener una respuesta más detallada, consulte la sección de preguntas frecuentes del Descripción general de App Store artículo.
Consulta los siguientes recursos para ver los widgets personalizados y el generador de widgets:
Nota
-
Si está buscando un widget personalizado, pero necesita un desarrollador, es posible que un experto en Duda pueda ayudarlo. Para obtener más información sobre el programa Experts, consulte Expertos en Duda. Para ver los expertos, visite experts.duda.co.
-
El soporte de Duda no puede solucionar problemas con los widgets personalizados.