Iframe es principalmente una parte de la misma estructura HTML que ejecuta un sitio web. Te permite añadir o incrustar contenido de otros sitios web en tu sitio web.
Por muchas razones, puede que necesites crear un widget iframe en tu página web. Incluye imágenes, vídeos, otra página web, etc.
En general, la idea es acelerar la carga del elemento de destino desde una fuente externa y reducir la carga en su sitio.
En cuanto a cómo incrustarlo, tienes dos formas de crear widget iframe en Elementor:
- Utilizar shortcode sin formato
- Utilizar un plugin Elelemntor Iframe
En este blog, te explicaremos exactamente cómo puedes crear un widget iframe en Elementor.
Método 1: Crear Elementor iframe Widget con Shortcode
Siendo parte de un software de código abierto WordPress, Elementor tiene un montón de integraciones. Una de ellas es Shortcode. Incluso para operaciones como un iframe, hay shortcodes disponibles.
En pocas palabras, puedes abrir cualquier página usando el editor Gutenberg de WordPress o el editor Elementor, insertar shortcodes y convocar un iframe. ¡Pan comido!
Sólo tiene que obtener un bloque editor de HTML en su página y añadir el código anterior. Esto simplemente convocar el contenido deseado / sitio web en una caja con 400px de altura.
La creación de un widget iframe tiene algunos atributos que puede utilizar para personalizar la apariencia del contenido.
- Fuente - Enlace a la fuente. (https://) puede ser necesario para evitar el bloqueo del protocolo de seguridad del sitio.
- Anchura/Altura - Valores en píxeles que definen el área de tamaño del contenido.
- Alinear - Define la alineación del iframe dentro de la página.
- Borde del marco - Añade un borde alrededor del iframe si el valor es mayor/igual a 1. No muestra borde si el valor es 0.
- Desplazamiento - Permitir la opción de desplazamiento de contenido en el iframe definiendo 'yes', 'no', y 'auto'.
Además del código HTML, iframe también admite atributos CSS. Así que puedes añadirle más funciones.
Una cosa que debes recordar es que no todos los sitios web son compatibles con iframe. Eso significa que su sitio web podría rechazar un sitio web iframe o viceversa.
Methos 2: Crear widget iframe en Elementor con plugins
Si estás buscando un widget iFrame para crear iframe, entonces la mejor opción será Elementor addon-Paquete de elementos. Este plugin viene con widget para iframe Elementor.
En Widget Iframe de Element Pack te permite incrustar cualquier sitio web externo, Google Maps, estadísticas criptográficas o app directamente dentro de tu diseño Elementor. Sigue estos sencillos pasos para configurarlo.
Paso 1: Insertar el widget Iframe en Elementor
- Abra su página en Elementor Editor.
- En la barra de búsqueda del widget, escriba "Iframe".
- Seleccione el widget con el botón Logotipo Element Pack Pro.
- Arrástrelo y suéltelo en la sección de su página.
- Por defecto, verá un marcador de posición hasta que añada una URL.
Paso 2: Añadir una URL y configurar el diseño de iframe
- Ir a Contenido → Diseño.
- En el URL de origen del contenido pegue el enlace que desea incrustar.
- Ejemplo:
- Enlace Google Maps → Muestra la ubicación.
- Estadísticas criptográficas URL → Muestra datos criptográficos en directo.
- URL del sitio web → Muestra la página web completa.
- Ejemplo:
- Ajuste las opciones de diseño:
- Altura automática → Ajusta automáticamente la altura del iframe.
- Altura del marco → Establece una altura fija personalizada.
- Anchura del contenedor Iframe → Ajuste la anchura del recipiente.
- Ratio de respuesta → Mantén las proporciones de anchura × altura.
- Alineación → Coloca el iframe (Izquierda, Centro, Derecha).
Nota: Si el El widget Iframe ocupa toda la pantalla en ElementorEl problema suele estar en la configuración de la relación altura/anchura o de respuesta. Para solucionarlo, desactive Altura automática y establecer un Altura del marco (por ejemplo, 400-600px) y ajustar el Anchura del contenedor Iframe en lugar de dejarlo en 100%. Compruebe también si Ratio de respuesta está activado, ya que puede forzar al iframe a estirarse. Por lo tanto, desactívalo o establece una proporción adecuada como 16:9.
4. Configure Configuración de Lazyload y Ajustes adicionales para un mejor rendimiento y opciones de pantalla completa/barra de desplazamiento. Y, debe habilitar Carga perezosa al utilizar varios iframes para una carga más rápida.
Paso 3: Mostrar Iframe en maquetas de dispositivos
- Ir a Contenido → Dispositivos Iframe.
- Activar Mostrar dispositivo Iframe.
- Elija entre los marcos de dispositivos preconstruidos: Chrome, Firefox, Safari, Edge, Tablet, Móvil o Personalizado.
- Si selecciona A medidapuede establecer un Anchura × Altura, aplique una MuescaAñadir Botoneso ajustar el Bisel.
Paso 4: Personalizar y dar estilo al iframe
- Ir a Estilo → Dispositivo.
- Personaliza la apariencia del iframe:
- Color del bisel (Color1) → Ajuste el color del marco exterior.
- Color de la muesca (Color2) → Cambia el color del estilo de la muesca.
- Estilo de los botones → Personaliza los colores, la anchura y los desplazamientos de los botones.
- Aplique bordes redondeados o ajuste el grosor del marco para conseguir un aspecto pulido.
Paso 5: Vista previa y publicación
- Utiliza Elementor's Modo sensible para comprobar la apariencia del iframe en todos los dispositivos.
- Ajuste con precisión la altura, la anchura o la carga lenta para mejorar el rendimiento.
- Cuando todo esté perfecto, haz clic en Actualizar / Publicar.
Consejo: Algunos sitios web bloquean la incrustación de iframe. En ese caso, utiliza su código de incrustación oficial o el enlace para compartir.
Puedes añadir varios tipos de contenido, ya sea vídeo, audio, texto, imagen, sitios web, utilizando este widget.
Vea este vídeo para saber cómo utilizar correctamente el widget iframe en Elementor.
Tenga en cuenta que el widget iframe de Element Pack le ofrece una función Lazyload integrada. Por lo tanto, con esta herramienta mejorará el rendimiento de su sitio web. Compruebe esto Página de demostración del paquete de elementos por ejemplo.
Conclusión
IFrame, una función muy utilizada, se ha convertido en un widget para que sea más dinámico y fácil de usar.
Es posible que los sitios web con políticas de seguridad estrictas no permitan incrustar contenidos en un iframe. Pero el número de sitios web que lo admiten es mayor. Por lo tanto, es una solución rápida para añadir contenido de múltiples capas a su sitio web.eso es todo. Espero que hayas aprendido el método para crear widgets iframe hoy.
Gracias por quedarte despierto.
