widget son los bloques de construcción clave de un sitio, lo que le permite agregar y gestionar 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 widget, puede crear una experiencia de usuario dinámica y atractiva.
Existen varios métodos para agregar widget. También varía si está empleando el Editor tradicional, el modo flexible o el Editor 2.0. A continuación se explica cómo puede agregar widget:
Para agregar widget de la biblioteca widget :
-
En el panel lateral, haga clic en widget para abrir la biblioteca widget.
-
widget se pueden buscar usando la barra de búsqueda en la parte superior o desplazar por las diferentes secciones de la biblioteca.
-
-
Haga clic y arrastre el widget a la ubicación que desee 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, fíjate en el texto del indicador de ubicación azul (solo en el editor tradicional):
-
Insértelo aquí. El widget se agregará a una fila o columna existente.
-
Insértelo en una nueva fila. Se agregará una nueva fila y el widget se colocará dentro de ella.
-
Insertar en una nueva columna. Se agregará una nueva columna y el widget se colocará dentro de ella.
Nota
Con Editor 2.0, widget solo se pueden agregar a las columnas existentes, no se pueden crear nuevas con la colocación de un widget.
Para agregar widget del lienzo:
-
Haga clic con el botón derecho en cualquier widget y seleccione agregar widget a continuación en el menú contextual para agregar widget inmediatamente debajo del widget actual (solo editor tradicional).
-
En el modo Flex o Editor 2.0, haga clic en el icono más (+) en el menú flotante.
-
Si está haciendo clic con el botón derecho en una columna, haga clic en agregar y seleccione agregar widget a continuación
(Tradicional, modo Flex y Editor 2.0).
-
-
Seleccione una de las cuatro widget más populares o haga clic en Más widget para abrir el menú completo. Luego de agregar el widget, puedes editarlo como de costumbre.
Puedes personalizar widget para ajustar el contenido, la apariencia y el diseño de tu sitio. La edición widget te permite tener un mayor control sobre las características que tiene tu sitio y cómo se comportan estas características.
La mayoría de widget tienen un área para su contenido y su diseño.
La mayoría de los widget en el editor tienen opciones de diseño que le permiten personalizar la apariencia del widgetpara su sitio. No todos widget tienen las mismas opciones. Por ejemplo, algunas widget no te permiten editar el espaciado interno, otras no te permiten cambiar el espaciado externo.
A continuación se muestran las configuraciones de diseño comunes.
Para widget con texto, puede editar los estilos de texto. Cualquier cambio que realice en un widget específico anulará el estilo de texto del tema.
En el Editor 2.0, el tamaño del texto establecido en widget específicos (Editor de texto, Formulario de contacto, Navegación, Negocios, Clic para enviar por email, Clic para llamar y widgetde botón) se ajustará automáticamente según el tamaño de la pantalla. En desktop, el tamaño del texto es del 100%, en la tableta el tamaño del texto se reduce al 85% y en el celular el tamaño del texto se reduce al 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 la tableta o 40 px en el celular. Esto es para garantizar que el texto siga siendo legible y en proporción con el tamaño de cada pantalla.
Si necesita anular el tamaño del texto por dispositivo, puede ajustar el tamaño del texto en el Texto del tema y el texto no se reducirá por tamaño de pantalla.
A continuación se muestran ejemplos de cómo se ajustará el tamaño del texto en diferentes escenarios:
-
Si establece el tamaño del texto en 40 px en desktop, el texto se reducirá automáticamente a 34 px en la tableta y 32 px en el celular.
-
Si establece el tamaño del texto en 16 px en desktop, no se reducirá en un 85% a 13 px en la tableta, o en un 80% a 12 px en el celular, ya que es demasiado pequeño para leer y está por debajo del mínimo de 16 px. En cambio, el tamaño del texto seguirá siendo el mismo de 16 px en todos los tamaños de pantalla.
-
Si establece el tamaño del texto en 100 px en desktop, 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 de texto desktop . 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 desktop del texto.
Las opciones de diseño suelen ser específicas de determinados widget. Para seleccionar entre el conjunto de 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 junto a él) para abrir el menú Seleccionar diseño. Para cambiar el diseño seleccionado, haga clic en el diseño que desea usar en su lugar y se actualizará en el widget.
Ejemplo de sección de diseño en la pestaña Diseño (editor tradicional):
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 a la derecha del nombre de la configuración para abrir el selector de color y cambiar el color.
-
Frontera. Cambie el ancho del borde usando el control deslizante o el cuadro de texto. Haga clic en el icono de engranaje (
) para ver más opciones.
-
Antecedentes. Emplee una imagen de fondo o color para este widget mediante el cuadro de diálogo Elegir y colocar imágenes o una URL de video.
-
Anchura y altura. Emplee el control deslizante o el cuadro de texto para cambiar el número de pixeles.
-
Esquinas redondeadas. Aumente o disminuya el redondeo de las esquinas de un widget. Haga clic en el icono 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.
widget que incorporan un botón ofrecerán la posibilidad de seleccionar si el botón hereda el estilo de botón primario o secundario definido en el panel del tema. Además, puede elegir entre los diferentes diseños de botones, realizar ediciones en el estilo del botón (ancho, alto) y en el texto del botón (fuente, tamaño del texto), y ajustar el interior y el espaciado externo.
Cualquier cambio que realices en el editor de diseño anulará los estilos establecido en el nivel del botón del tema. Si necesita volver al estilo del botón del tema, haga clic en Restablecer al estilo del tema.
-
Si se hacen cambios en el botón (que anularán los estilos establecidos en el nivel del botón del tema), aparecerá un cuadro de indicador en el estilo del botón Principal o Secundario.
-
Si se hace clic en el estilo del 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 interno (espaciado dentro de los bordes widget) y el espaciado externo (espaciado fuera de los bordes widget). Cada número del cuadro exterior establece el espaciado exterior para su propio lado (superior, inferior, izquierdo o derecho), y cada número del cuadro interior establece el espaciado interior para su propio lado (superior, inferior, izquierdo o derecho).
Para obtener información detallada, consulte Exterior y espaciado interno
Las animaciones de entrada le permiten animar widget y widget de página cuando se cargan por primera vez en su sitio. El movimiento y la interactividad hacen que su sitio sea más memorable y puede enfatizar las secciones en las que desea que los visitantes se concentren, 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 la configuración de desplazamiento.
Para agregar una animación:
-
Vaya a la sección Animación .
-
Seleccione un activador ( entrada o desplazamiento) y una animación.
-
(Opcional) Personalice la animación (por ejemplo, la dirección desde la que entrará).
Ejemplo de configuración de animación:
Para restablecer la animación, haga clic en Restablecer valores predeterminados.
Si emplea una animación de desplazamiento, puede hacer clic en Pausar animación () en el panel lateral para pausar todas las animaciones mientras está en modo de edición. Las animaciones seguirán activas en el modo de vista previa y en el sitio en tiempo real.
Nota
Las animaciones configuradas para escritorio y tablet están vinculadas y serán las mismas. Sin embargo, la versión móvil es independiente, y las animaciones configuradas para escritorio o tablet no se aplicarán.
Tenga en cuenta lo siguiente al añadir animaciones:
-
Demasiadas animaciones pueden desorientar o distraer a los usuarios, así que úselas con moderación.
-
Al eliminar una animación, recuerde que las animaciones se pueden aplicar a filas y widget, por lo que es posible que la animación que está viendo se agregó en algún lugar inesperado.
Para eliminar animaciones en el Editor tradicional:
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 comprobar todos los contenedores para ver si hay animaciones posibles.
Nota
Esta información es específica del Editor 2.0, anteriormente conocido como All-Flex Editor. Para identificar la versión actual del editor, consulta Cómo identificar la versión del editor que emplea tu sitio.
Se corrigieron widget le permiten mantener un widget visible en todo momento, incluso cuando un visitante se desplaza hacia abajo en la página, mientras que widget ancla se adhiere a su elemento principal (columna o columna interior) mientras el elemento principal esté en la ventana gráfica.
widget puede establecer como fijo o anclado en la sección Posición del Panel de diseño. Para obtener más información sobre las secciones del panel de diseño, consulte Diseño con Flex.
Las widget fijas le permiten mantener un widget visible en todo momento, incluso cuando un visitante se desplaza hacia abajo en la página. Emplee widget fijos para mantener las llamadas a la acción importantes fijas, visibles y en las que se pueda hacer clic en todas las páginas del sitio.
Para hacer que un widget sea fijo:
-
En el panel lateral, haga clic en widget. Busque el widget deseado, luego haga clic y arrástrelo al lienzo.
-
Haga clic en el widget para abrir el menú flotante y seleccione Editar diseño. Esto abre el panel de diseño en el lado derecho de la pantalla. Desplázate hacia abajo hasta la sección Posición del panel de diseño.
-
Haga clic para expandir el menú Tipo de posición y seleccione Fijo. Este cambio se aplica a todos los tamaños de pantalla, sin embargo, puede anularlo si es necesario. Una vez seleccionada la posición, no se puede cambiar de Fija a Anclada. Esto se debe a que cuando selecciona Fijo, el widget se quita de su contenedor original para que pueda permanecer visible en la pantalla a medida que el usuario se desplaza. Si cambiara de Fijo a Anclado, el editor no sabría en qué contenedor colocar el widget. Si necesita cambiar, primero debe volver a Predeterminado. El widget se moverá a la primera sección de la ventanilla.
-
En el menú Espaciado, emplee la configuración de Margen para definir dónde se encuentra el widget en la ventanilla. Esto es especialmente importante para configurar si tiene dos widget fijos en la misma posición de ventanilla.
-
Para mostrar el widget solo en la página actual, habilite la opción Mostrar solo en esta página.
Las widget ancladas se adhieren a su elemento principal (columna o columna interior) mientras el elemento principal esté en la ventanilla. Si hay más de una widget fijada en la misma posición, la widget superior será la primera widget.
Nota
Anclado no es una opción en las cuadrículas avanzadas.
Para anclar un widget:
-
En el panel lateral, haga clic en widget. Busque el widget deseado, luego haga clic y arrástrelo al lienzo.
-
Haga clic en el widget para abrir el menú flotante y seleccione Editar diseño. Esto abre el panel de diseño en el lado derecho de la pantalla.
-
En el panel de diseño, desplazar hacia abajo hasta la sección Posición.
-
Haga clic para expandir el menú Tipo de posición y seleccione Anclado. Esto garantiza que el widget se adhiera a su elemento principal (columna o columna interior) siempre que el elemento principal esté en la ventanilla. Este cambio se aplica a todos los tamaños de pantalla, sin embargo, puede anularlo si es necesario.
-
En la sección Posición, configure el desplazamiento del widget. El desplazamiento es donde se fijará el widget en el desplazamiento antes de salir de la ventana gráfica. Si se establece desde desktop, otros tamaños de pantalla tendrán los mismos valores, sin embargo, se puede anular por tamaño de pantalla según sea necesario. Si el encabezado fijo está habilitado, el desplazamiento se basará en la altura predeterminada del encabezado. Si habilita un encabezado fijo luego de configurar el desplazamiento, no se actualizará automáticamente y deberá volver atrás y ajustar manualmente el desplazamiento.
Si en algún momento mueve 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 tradicional y no es relevante para el Editor 2.0 (anteriormente conocido como el Editor All-Flex). Para identificar la versión actual del editor, consulta Cómo identificar la versión del editor que emplea tu sitio.
Establezca si el widget está alineado a la izquierda, a la derecha o al centro de su área.
Algunos widget comportar de manera muy diferente en diferentes puntos de vista. Verifique la forma en que se muestra su widget en cada vista luego de agregarla para cerciorar de que se muestre correctamente.
Para establecer la alineación, haga clic con el botón derecho en el widget y, a continuación, haga clic en un icono Alinear a la izquierda, Alinear al centro o Alinear a la derecha .
Para ver las opciones de alineación en Editor 2.0, consulte Alinear.
Selecciona el contenedor en el que se encuentra el widget, lo que le permite encontrarlo y editarlo fácilmente.
Editor tradicional: haga clic con el botón derecho en el widget, haga clic en Seleccionar contenedor y seleccione Columna o Fila.
Editor 2.0: Haga clic con el botón derecho en el widget, haga clic en Seleccionar 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 tiene un widget que se copió.
Haga clic con el botón derecho en el widget y, a continuación, haga clic en Copiar o Pegar.
Como alternativa, en Editor 2.0, haga clic en el icono Duplicar en el menú flotante.
Advertencia
No recomendamos copiar y pegar formularios de contacto, ya que esto suele dar lugar a problemas en el formulario de contacto duplicado.
Use la función ocultar en dispositivo para cambiar su contenido dependiendo del dispositivo que utiliza el visitante para ingresar a su sitio web. Por ejemplo, muestre un widget Clic para llamar a usuarios de dispositivos móviles o un Formulario de contacto para usuarios de equipos de escritorio.
widget ocultos por la función Ocultar en el dispositivo no se eliminan.
Haga clic con el botón derecho en el widget, haga clic en Ocultar en dispositivo, en el editor tradicional, seleccione un dispositivo (en el Editor 2.0, el elemento solo se puede ocultar en el dispositivo que se está editando actualmente).
Alternativamente, en el Editor 2.0, los elementos se pueden ocultar en el panel de capas. En el panel lateral, haz clic en Capas, hover sobre el elemento deseado y haz clic en el icono Ojo.
Si hay un icono de ojo () en el panel lateral, esto indica que hay elementos ocultos en el dispositivo que está editando actualmente (solo editor tradicional). Para ver los elementos ocultos, haga clic en el icono del ojo.
En el Editor 2.0, si hay algún elemento oculto en el dispositivo que está editando actualmente, se indicará en el panel de capas. En el panel lateral, haz clic en Capas. Los elementos ocultos aparecerán desactivados con un icono de ojo tachado junto a ellos ().
Nota
Es posible que el contenido oculto siga apareciendo en el código del sitio en tiempo real (luego de publicar/volver a publicar). Esto es esperable y debido a la tecnología empleada. Para obtener información detallada, consulte Rendimiento y optimización del sitio.
Los enlaces de ancla le 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 que desee destacar. Para obtener más información sobre anclas, consulte Etiquetas y enlaces de ancla.
Haga clic derecho en el widget y haga clic en Establecer como ancla.
Aunque puede haber diferencias según lo que una aplicación o widget personalizado intenta lograr, los widgets creados con nuestro creador de widgets no son necesariamente mejores que los que crean nuestros socios de aplicaciones.
Las aplicaciones también deben cumplir con estándares estrictos y someter 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 en el artículo Información general sobre la store de aplicaciones .
Consulte los siguientes recursos para widget personalizadas y el creador de widget :
Nota
Si está buscando un widget personalizado, pero necesita un desarrollador, un experto de Duda puede ayudarlo. Para obtener más información sobre el programa de Expertos, consulte Expertos de Duda. Para consultar a los expertos, visite experts.duda.co.