En algún momento puede que necesitemos hacer referencia de otra web e incluso queramos mostrar su funcionamiento o diseño, pues en esta mini entrada te mostraré rápidamente como hacerlo.
✅ Usando html para enbeber otra web dentro de la nuestra
La verdad que suena bien pero hay una palabra que tal vez hayas oido y es la de «enbeber», ¿qué es esto?, es simplemente un concepto o término utilizado en programación para hacer referencia del acto de incrustar un contenido de programación en otro diferente, lo solemos encontrar muchísimo en las páginas web con vídeos, fan pages de Facebook o Instagram, imágenes, etc.
En un alarde de sencillez vamos a usar las etiquetas iframe.
<iframe></iframe>Nada más añadir este código y dependiendo de nuestro editor de texto, nos saldrá un cuadro vacío o nuestra propia web con un error 404.
✅ Modo de empleo
Ya sea en un bloque html de WordPress o dentro de los editores que utilizan los editores visuales como Elementor por ejemplo, o también usando la pestaña de html al escribir párrafo conseguiremos visualizar esa web que necesitamos enbeber.
Para que ya nos aparezca la web simplemente vamos a añadirle al iframe lo referente a la URL o dirección web que queramos. En este caso vamos a usar una web amiga llamada Piensa en Digital.
Por cierto, Piensa en Digital es una comunidad de emprendedores y profesionales freelance que colaboran conjuntamente. (Recomendable)
<iframe src="https://piensaendigital.es/"></iframe>El resultado va a ser el siguiente, pero como podéis apreciar las dimensiones por defecto no tienen el alto que deseamos, eso sí, el ancho se ajusta al que tengamos predeterminado.
Como es natural también siempre tendremos la barra lateral de desplazamiento para el scroll, aunque una primera impresión de lo más visual de la web a enbeber será lógico de poner desde ya. Para esto vamos a definir el código con las dimensiones a continuación.
✅ El código html del iframe para enbeber correctamente
Vamos ahora al grano para lo que necesitamos de forma simple, es importante añadir que este código es el más básico y sin duda que podemos darle mayores directrices para personalizarlo aún más.
<iframe src="https://piensaendigital.es/" width="800" height="700"></iframe>Estamos añadiendo el ancho y alto en píxeles, siendo en este ejemplo width:»800″ y height:»700″.
Vamos a verlo como aparece en pantalla.
Finalmente podremos ajustar el cuadro de la web enbebida como queramos con el ancho y alto adecuados. Si te ha gustado no olvides hacer un comentario y compartirlo.
¡Hasta muy pronto!. 👋🏼
