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 emplea 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 su sitio, observe el texto en el indicador de ubicación azul (solo editor tradicional):
-
Insertar aquí. El widget se agregará a una fila o columna existente.
-
Insertar en nueva fila. Se agregará una nueva fila y el widget se colocará dentro de ella.
-
Insertar en 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 del mouse 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 ícono 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
(Relevante para el modo Tradicional, 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.
Puede personalizar widget para ajustar el contenido, la apariencia y el diseño de su 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 widget tienen un área para su contenido, así como para 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.
Las siguientes son configuraciones de diseño comunes.
Para widget con texto, puede editar los estilos de texto. Cualquier cambio que realice para un widget específico anulará el estilo 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 en función del 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 más pequeño que 16 px en dispositivos móviles o tabletas. Y no se ajustará a más de 60 px en tableta o 40 px en dispositivo móvil. Esto es para garantizar que el texto aún sea legible y proporcional a cada tamaño de 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á 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 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 permanecerá igual a 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 ese es el máximo, en lugar de 80 px, que sería el 80% del tamaño de texto desktop .
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 ícono de color redondo a la derecha del nombre de la configuración para abrir el selector de color y cambiar el color.
-
Borde. Cambie el ancho del borde empleando el control deslizante o el cuadro de texto. Haga clic en el icono de engranaje (
) para más opciones.
-
Fondo. 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.
-
Ancho y alto. Emplee el control deslizante o el cuadro de texto para cambiar la cantidad 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 incorporen 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 de temas. Además, puede elegir entre los distintos diseños de botón, realizar modificaciones en el estilo del botón (anchura, altura) y en el texto del botón (fuente, tamaño del texto), y ajustar el espaciado interior y exterior.
Cualquier cambio que realice dentro del 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 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 del widget) y el espaciado externo (espaciado fuera de los bordes widget). Cada número en el cuadro exterior establece el espaciado externo para su propio lado (arriba, abajo, izquierda o derecha), y cada número en el cuadro interior establece el espaciado interno para su propio lado (arriba, abajo, izquierda o derecha).
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 pueden 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, puedes controlar dónde comienza y termina la animación en la pantalla empleando la configuración de Desplazamiento .
Para agregar una animación:
-
Vaya a la sección Animación .
-
Seleccione un disparador ( Entrada o Desplazamiento) y una animación.
-
(Opcional) Personaliza la animación (por ejemplo, la dirección desde donde ingresará).
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ás en el 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 desktop y Tablet están vinculadas y serán las mismas. Sin embargo, los móviles son independientes y las animaciones configuradas para desktop/Tablet no se les 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:
Nota
Si un elemento no tiene animación, se podría aplicar a uno de los contenedores en los que se encuentra el elemento. Se recomienda verificar todos los contenedores para detectar posibles animaciones.
Nota
Esta información es específica del Editor 2.0, anteriormente conocido como Editor All-Flex. Para identificar su versión actual del editor, consulte Cómo identificar la versión del editor que emplea su 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 anclado se adhiere a su elemento principal (columna o columna interior) mientras el elemento principal esté en la ventana gráfica.
widget pueden establecer como fijos o anclados 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. Desplazar 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 puedes anularlo si es necesario. Una vez que seleccionas la posición, no puedes cambiar de Fijo a Fijado. 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 tuviera que cambiar de Fijo a Anclado, el editor no sabría en qué contenedor colocar el widget. Si necesita cambiar, primero deberá volver al valor 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.
Los widget anclados 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 anclada en la misma posición, la widget en la parte superior será la primera widget.
Nota
Fijado 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 Fijado. 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 puedes anularlo si es necesario.
-
En la sección Posición, configure el desplazamiento del widget. El desplazamiento es donde se anclará 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 del encabezado predeterminada. Si habilita un encabezado fijo luego de configurar el desplazamiento, no se actualizará automáticamente y deberá regresar y ajustar manualmente el desplazamiento.
Si en algún momento mueve el widget anclado a un elemento principal diferente (columna o columna interior), la configuración del panel de diseño, como el desplazamiento, se mantendrá.
Nota
Esta información es específica del Editor tradicional y no es relevante para el Editor 2.0 (antes conocido como Editor All-Flex). Para identificar su versión actual del editor, consulte Cómo identificar la versión del editor que emplea su 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 conocer las opciones de alineación en el modo Flex o Editor 2.0, consulte Diseñar con Flex.
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.
Alternativamente, en el Editor 2.0, haga clic en el ícono Duplicar en el menú flotante.
Advertencia
No recomendamos copiar y pegar formularios de contacto, ya que esto generalmente genera 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 ocultas por la función Ocultar en el dispositivo no se eliminan.
En el Editor tradicional, Haga clic con el botón derecho en el widget, haga clic en Ocultar en dispositivo, seleccione un dispositivo (en Editor 2.0, los elementos solo se pueden ocultar en los dispositivos que se están editando actualmente).
Alternativamente, en el Editor 2.0, los elementos se pueden ocultar en el panel de capas. En el panel lateral, haga clic en Capas, hover sobre el elemento deseado y haga clic en el icono Ojo.
Si aparece un icono de ojo () está presente en el panel lateral, esto indica que hay elementos ocultos en el dispositivo que estás editando actualmente (solo editor tradicional). Para ver los elementos ocultos, haga clic en el icono del Ojo.
En el Editor 2.0, si hay elementos ocultos en el dispositivo que estás editando actualmente, se indicará en el panel de capas. En el panel lateral, haga clic en Capas. Los elementos ocultos aparecerán desactivados con un icono de un ojo tachado al lado ().
Nota
Es posible que aún se muestre contenido oculto en el código del sitio activo (luego de publicarlo o volver a publicarlo). Esto es esperable y se debe a la tecnología empleada. Para obtener información detallada, consulte Rendimiento y optimización del sitio.
Los enlaces de anclaje 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 a la que desea hacer referencia. Para obtener más información sobre los anclajes, consulte Acciones y opciones del lienzo.
Haga clic con el botón derecho en el widget y, a continuación, haga clic en Establecer como anclaje.