Cómo crear contenido de lienzo en Elemento: una guía

Presentar mucho contenido en un pequeño espacio web sin confundir a los usuarios es un desafío para los diseñadores web. El contenido de lona fuera de lienzo es una solución moderna, nueva e inteligente que puede ayudarlo en este contexto.

Con el complemento de Builder de Page El Elementor, puede crear fácilmente menús fuera de canvas, pancartas promocionales, barras laterales y más en su sitio web. Esto no solo puede ayudarlo en la presentación de contenido, sino también a simplificar la navegación, mejorar la legibilidad y convertir a los usuarios.

Si su sitio está construido con Elementor, solo le tomará unos minutos crear contenido de lienzo para su sitio. En esta publicación de blog, lo guiaremos sobre cómo agregar el contenido de lienzo en Elementor con una guía paso a paso. ¡Comencemos!

¿Qué hay del contenido de lienzo?

El contenido de lona fuera de Canvas es un widget de elementor que mantiene el contenido oculto fuera de la pantalla hasta que se active por la interacción del usuario. Por lo general, este widget está conectado con un botón en la pantalla. Cada vez que los usuarios hacen clic en el botón, el contenido de CANVAS se desliza instantáneamente y muestra la información adicional.

Como se dijo anteriormente, el widget de contenido fuera de canvas cubre contenido como menús, pancartas promocionales, barras laterales, paneles de inicio de sesión y registro, carritos de compras, filtros de contenido y opciones de visión rápida. Ayuda a mantener un diseño limpio y organizado que es fácil de acceder cuando sea necesario.

Cómo crear contenido de lienzo en elemento en elemento

Ahora, en esta sección, discutiremos cómo crear contenido de lienzo fuera de lugar en Elementor con una guía paso a paso. Pero antes de saltar al tutorial, asegúrese de tener los siguientes complementos instalados y activados en su sitio.

• Elemento
• Happyaddons
• Happyaddons pro

Cuando estén listos en su sitio, comience a seguir el tutorial explicado a continuación.

Paso 01: Agregue el widget de contenido de lienzo de apagado al Canvas Elementer

Abra una publicación o página con el lienzo Elementor. Encuentre el widget escribiendo su nombre en el cuadro de búsqueda del panel Elementor. Una vez que vea el widget, arrastre y suelte en el lienzo.

Verá un botón o icono agregado al lienzo. Al hacer clic en él, puede abrir la sección de lienzo OFF. Puede echar un vistazo en el videoclip conectado a continuación.

Paso 02: Agregue el widget de lona de apagado a su página web

Arriba, colocamos el widget en un lienzo en blanco. Pero puede agregarlo a cualquier parte específica de su página web. Para explicarlo, hemos abierto una página web decorada. Luego, coloque el widget sobre la sección del héroe

Puede ver que el widget se ha agregado a la sección del encabezado de la página web.

Verifique cómo mejorar el SEO local en WordPress con Elementor.

Paso 03: seleccione Tipo de contenido personalizado para el widget de lienzo de apagado

Navegue a Contenido> Contenido OffCanVas . Haga clic en la lista desplegable junto a la opción Tipo de contenido.

Debe seleccionar un tipo de contenido adecuado en la lista desplegable para el widget basado en el tipo de contenido que desea mostrar.

Para este tutorial, hemos seleccionado el tipo de contenido personalizado.

Explore esta guía sobre cómo diseñar una base de conocimiento en WordPress.

Paso 04: Agregue información al widget

Agregue su contenido deseado al widget usando estos cuadros. Haga clic en los cuadros los expandirá y creará espacios para permitirle agregar información.

Puede ver que hemos agregado contenido a una caja expandiéndolo. Puede agregar texto y archivos multimedia haciendo clic en las opciones respectivas.

Aprenda a crear impresionantes páginas web infográficas en Elementor.

Paso 05: seleccione una fuente de alternativa

Desde la sección de alternar, puede cambiar el tipo de fuente, posición, animación y etiqueta de la fuente de alternar.

Abra la lista desplegable junto a la opción de origen de alternar. Seleccione el tipo de palanca que desee. Hemos seleccionado el botón como tipo de palanca para este tutorial.

A continuación, cambie la copia del botón de la opción de texto del botón . Incluso puede agregar un icono de botón . Verifique todos los cambios en el botón en el lienzo.

Paso 06: Personalice el icono de barra cerrada

La sección de lienzo fuera de lugar viene con un ícono cruzado (x) en la esquina superior derecha. Para personalizarlo, expanda la sección de barra de cierre en el panel Elementor.

Usando las opciones respectivas desde allí, puede deshabilitar el icono, cambiar la alineación, cambiar el tipo de icono, el título del icono y más. Espero que puedas hacer esto tú mismo.

Aquí hay un tutorial sobre cómo crear un calendario de eventos en WordPress.

Paso 07: Cambiar la configuración del widget

Expanda la sección Configuración . Desde la opción de dirección , puede cambiar la posición del widget de lona OFF. Puede colocarlo en la izquierda, derecha, superior o inferior.

A continuación, puede seleccionar un efecto de transición de contenido . Agregará un efecto de animación a la página web y lo mostrará cuando se haga clic en el botón.

Por ejemplo, hemos seleccionado revelado como el tipo de transición de contenido. Ahora, vea el videoclip conectado a continuación. Una vez que se hace clic en el botón, la página también se mueve junto con la sección de lienzo de OFF.

De la misma manera, configure las otras opciones.

Paso 08: estilice el widget de lienzo apagado

Ven a la pestaña de estilo y expanda el contenido de Offanvas .

Desde aquí, puede cambiar el tamaño de lienzo fuera de lugar , agregar un tipo de borde , aumentar el ancho del borde , cambiar un color de borde y establecer un radio de borde . Espero que puedas hacerlos tú mismo como lo hemos hecho.

Expanda la sección de contenido . Obtendrá opciones para personalizar la alineación de contenido, el color de fondo, el tipo de borde, el ancho de la frontera, el color de la frontera y el radio de borde para el contenido con el widget de lona.

De la misma manera, puede cambiar la tipografía, el tamaño de la fuente y el color de texto.

Aquí hay una guía simple sobre cómo mostrar la fotografía de productos giratorios 360 en WordPress.

Paso 09: estilizar el botón de alternar

De la misma manera, expanda la sección de alternar . Esto le permitirá personalizar la alineación del botón, la tipografía, el color de texto, el radio de borde, el fondo del botón, etc.

Paso 10: Personalice el icono de la barra cerrada

Al expandir la sección de barra cerrada , puede personalizar el color, el tamaño y más cosas del icono de cierre.

Paso 11: Realice la respuesta de Widget Off Canvas Widget

Cada uno de sus elementos web debe optimizarse para dispositivos móviles para que se muestren bien en todos los tipos de dispositivos. De lo contrario, puede perderse un gran potencial de tráfico, ya que alrededor del 50% de todo el tráfico en la mayoría de los sitios web proviene de usuarios móviles.

Para la optimización móvil, haga clic en el icono del modo de respuesta en la parte inferior del panel Elementor. Aparecerá una barra superior con opciones para permitirle cambiar entre diferentes tamaños de pantalla.

Ahora, cambie entre diferentes tamaños de pantalla y verifique si los diseños están bien para dispositivos respectivos. Si hay algún problema, puede cambiar el tamaño de fuente, el tamaño del botón, el ancho de lienzo, la altura y otras opciones según sea necesario.

Los cambios se guardarán solo para ese tamaño de pantalla en particular, sin afectar a los otros. Por lo tanto, puede hacer que el widget de lienzo fuera de la sensación de móvil.

Paso 12: Vista previa del widget de contenido de lienzo fuera de lugar

Ahora, vaya a la opción de vista previa de la página web y verifique si el widget funciona bien o no. Puedes ver, está funcionando bien por nuestro lado.

Cosas a considerar al usar el widget de contenido de lienzo OFF

Para hacer el mejor uso del widget, hay varios puntos que debe considerar cuidadosamente al usar el widget de contenido de lona OFF. Míralos a continuación.

• Experiencia de usuario suave

El contenido de CANVAS debería admitir a los usuarios para navegar a través del sitio en lugar de perturbar su experiencia. Asegúrese de que el widget funcione sin problemas con animaciones bien coordinadas. Sin embargo, minimice los efectos de movimiento pesado que podrían degradar el rendimiento, especialmente en los teléfonos móviles.

• Optimizar para un teléfono móvil

Como ya se dijo anteriormente, un número significativo de visitantes web hoy generalmente proviene de usuarios de dispositivos móviles, debe optimizar bien sus sitios web para todos los tipos de dispositivos. De lo contrario, los usuarios centrados en dispositivos móviles tendrán una experiencia severamente negativa.

• Cierre fácil

El widget de contenido de lienzo de OFF debe incorporar una opción de cierre simple. Si es difícil de encontrar, los usuarios seguramente se sentirán frustrados. Por lo tanto, no olvide el ícono de cierre de tal manera que se vuelve fácil de navegar.

• Relevancia del contenido

El contenido fuera de canvas debe permanecer breve y enfocado para cumplir con funciones específicas como herramientas de navegación o pancartas promocionales. La inclusión de información excesiva o elementos irrelevantes socava su propósito de ofrecer una experiencia de usuario enfocada y perfecta.

¡Palabras finales!

El widget de contenido de lienzo OFF podría ser una forma poderosa de involucrar a los usuarios y aumentar las conversiones una vez que sepa cómo aprovecharlo bien. Hemos tratado de cubrir un tutorial básico en el widget. Porque es realmente difícil discutir todas las características del widget y cómo usarlas.

Entonces, más allá de este tutorial, si desea tener más ideas sobre qué otras cosas puede hacer con el widget, puede visitar nuestra página de demostración de contenido de Canvas Elementer Off. Obtendrá una buena colección de diseños fuera de canvas que puede copiar y pegar directamente en su sitio.

Si tiene más consultas sin respuesta, háganos saber a través del cuadro de comentarios a continuación. Nos pondremos en contacto con usted muy pronto con respuestas útiles.