¿Cómo insertar un código HTML en Elementor?

Inicio » ¿Cómo insertar un código HTML en Elementor?

Html code in elementor einfügen

Elementor es un plugin gratuito (o Pro con más funciones) de construcción de diseños para WordPress que simplifica el diseño de páginas web sin gastar un solo centavo. Sin embargo, ofrece características limitadas en su versión gratuita, pero en comparación con otros (gratis) ofrece mucho de forma gratuita. Con Elementor puedes crear cualquier tipo de diseño de cuadrícula y añadir muchos módulos como texto/html, vídeos, galería de imágenes, slider de imágenes, caja de iconos, pestañas, testimonios, shortcode, etc. Además, hay muchos diseños gratuitos listos para instalar directamente a través del panel de control del plugin.

En este breve tutorial aprenderemos a incrustar una página externa como iframe en Elementor. Elementor ofrece la posibilidad de incrustar vídeos de fuentes externas e internas pero no tiene ningún módulo para incrustar páginas externas.

Generalmente hay un código simple para incrustar iframe en html – <iframe src=”…url-to-embed”></iframe> Con la ayuda de este código puedes incrustar iframe en cualquier página html. Pero el problema es que WordPress niega la llamada a iframe por razones de seguridad. Para evitar esto podemos hacer uso de los plugins de WordPess que permiten obtener el contenido del iframe.

Vista html de Elementor

He creado varias secciones con HTML plano y CSS que me gustaría utilizar como secciones “envolventes” para que mis clientes puedan rellenarlas utilizando la interfaz de arrastrar y soltar de Elementor. He intentado hacer esto creando un widget personalizado de Elementor, pero no hay ningún “Controls_Manager::NAME_OF_CONTROL” que haya podido encontrar que se corresponda con una sección o sección interna de Elementor. (Controls_Manager::WYSIWYG es en realidad un editor de texto).

La solución más cercana que pude encontrar es crear dos plantillas. Una plantilla es el contenido simple de Elementor de arrastrar y soltar que el cliente puede editar. La segunda contiene sólo un bloque HTML personalizado con un código corto que apunta a la primera plantilla. El cliente entonces insertaría eso en su página. Esto no es ideal porque 1) Cuando se previsualiza la página, el contenido de la sección con código corto no se muestra, y 2) tienen que editar esa sección por separado del resto de la página en el área de plantillas y no pueden crear otras secciones como ésta sin meterse con el HTML directamente o involucrarme.

Widget iframe de Elementor

¿Por qué cargar archivos HTML en WordPress? Si estás construyendo o ampliando un sitio web en WordPress, la importación de archivos y páginas HTML puede ahorrarte mucho tiempo a la hora de configurar tu sitio web o de añadir contenido nuevo y personalizado. A veces, es posible que desee crear una página HTML personalizada o utilizar páginas de un sitio web anterior y luego añadirlas a WordPress.

Los archivos HTML pueden cargarse en cualquier tipo de navegador web. Esto hace que sean más amigables con los dispositivos móviles, ya que se renderizarán correctamente independientemente del dispositivo o sistema operativo que se utilice. Si tienes varias personas trabajando en tu sitio web, o si has subcontratado el trabajo a un desarrollador externo, los archivos HTML son una gran manera de distribuir el contenido antes de publicarlo en tu sitio web.

Pero esta no es la única ventaja de utilizar archivos HTML. Cuando trabajas en WordPress, los archivos HTML son geniales para crear contenido personalizado que puede no ofrecerse de forma nativa con tu tema actual de WordPress.

WordPress no es sólo un constructor de sitios web, es un sistema de gestión de contenidos. Lo que significa que, incluso si su sitio está alojado en WordPress, no tiene que crear cada página dentro de la interfaz de WordPress.

Elementor a html

WordPress es una gran plataforma para crear sitios web, incluso para los no codificadores. Sin embargo, siempre puedes editar el código de WordPress para tener más control sobre tu sitio web y personalizarlo a tu gusto. Puedes añadir nuevas funciones o retocar el aspecto haciendo algunos pequeños cambios en los códigos. Vamos a sumergirnos y aprender a editar el código de WordPress que incluye HTML, CSS y PHP.

WordPress es una plataforma muy intuitiva y fácil de usar que tiene muchas opciones de personalización para crear un sitio web. Puedes utilizar muchos temas y plugins para añadir múltiples funcionalidades. Puedes tener un control total sobre tu sitio web sin tener que codificar. Sin embargo, al utilizar WordPress, es posible que te encuentres con caídas del sitio u otros problemas técnicos. En ese caso, necesitas saber cómo editar el código de WordPress para suavizar tu viaje con WordPress. Los códigos HTML, CSS y PHP son algunos lenguajes de código básicos que puedes aprender fácilmente para diseñar y mantener tu sitio web de forma eficiente.

En caso de que quiera cambiar la apariencia de su sitio web, necesita saber cómo editar los códigos HTML en WordPress. Por supuesto, puedes usar temas prefabricados e insertarlos en tu sitio web fácilmente, pero a veces puedes querer que se muestre algo diferente en tu sitio web de WordPress. Ahí es cuando entra en juego el código HTML y puedes hacerlo siendo más cuidadoso.

Ir arriba