widget son los componentes clave de un sitio, lo que le permite 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 widget, puede crear una experiencia de usuario dinámica y atractiva.
A continuación se muestra 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 desplazándose 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.
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, algunos widget no permiten editar el espaciado interior, otros no permiten cambiar el espaciado exterior.
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 para un widget específico anulará el estilo Texto del tema.
El tamaño del texto establecido en widget específicos (editor de texto, formulario de contacto, navegación, negocios, clic para enviar por correo electrónico, 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 móvil 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 móvil. Esto es para garantizar que el texto siga siendo legible y en proporción 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á por tamaño de pantalla.
-
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 móvil.
-
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 móvil, 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 en 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 el panel de diseño :
-
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 con el control deslizante o el cuadro de texto. Haga clic en el icono de engranaje (
) para ver más opciones.
-
Antecedentes. Utilice una imagen de fondo o un color para este widget mediante el cuadro de diálogo Elegir y colocar imágenes o una URL de vídeo.
-
Anchura y altura. Utilice el control deslizante o el cuadro de texto para cambiar el número de píxeles.
-
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 principal o secundario definido en el panel del tema. Además, puede 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 realice en el editor de diseño anulará los estilos establecidos 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.
Cambie 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 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 Espaciado exterior e interior
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 se centren los visitantes, 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 a los valores predeterminados.
Si utiliza 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 vivo.
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 haya agregado en algún lugar inesperado.
Para eliminar animaciones:
- Haga clic en el elemento para abrir el menú flotante y, a continuación, haga clic en la opción para editar el diseño.
- Vaya a la sección Animación .
-
Haga clic en el menú desplegable Animación 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 comprobar todos los contenedores en busca de posibles animaciones.
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 establecerse como fijos o anclados en la sección Posición del Panel de diseño.
Las widget fijas le permiten mantener un widget visible en todo momento, incluso cuando un visitante se desplaza hacia abajo en la página. Utilice 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ácese 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 tuviera que cambiar 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, utilice 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
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, desplácese 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 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 predeterminada del encabezado. Si habilita un encabezado fijo después 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), la configuración del panel de diseño, como el desplazamiento, se mantendrá.
Un widget se puede copiar y pegar en otra ubicación. La opción de pegar solo aparece si tiene un widget que se ha copiado.
Haga clic con el botón derecho en el widget y, a continuación, haga clic en Copiar o Pegar.
Advertencia
No recomendamos copiar y pegar formularios de contacto, ya que esto suele dar lugar a problemas en el formulario de contacto duplicado.
Utilice la función Ocultar según dispositivo para cambiar el contenido en función del dispositivo que utilice el visitante para acceder al 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.
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 en Capas, hover sobre el elemento deseado y haga clic en el icono del ojo. Si hay elementos ocultos en el dispositivo que está editando actualmente, se indicará en el panel de capas con un icono de ojo tachado.
Nota
El contenido oculto aún puede mostrarse en el código del sitio activo (después de publicar/volver a publicar). Esto es de esperar 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 el desplazamiento 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, a continuación, haga clic en Establecer como anclaje.
Comentarios
0 comentarios
El artículo está cerrado para comentarios.