Una de las muchas características muy útiles que ofrece Elementor a la hora de crear la web de tu negocio es la posibilidad de crear imágenes de ancho completo.
Esto significa que las imágenes se muestran en todo el ancho de la página, sin barras laterales de ningún tipo, y en función del tamaño de pantalla del usuario, en lugar de estar limitadas por el tamaño de un contenedor.
Pero, ¡atención! Muy atento o atenta a lo que voy a contarte a continuación.
Puede que lo que tú estés buscando no sea exactamente poner una imagen a ancho completo según el concepto puro y duro de este término…sino otra cosa que es parecida pero ligeramente diferente.
Te explico a continuación a qué me refiero exactamente.
Índice de contenidos
Diferencia entre imagen a ancho completo e imagen de fondo
Lo primero que quiero enseñarte en este post es que seas capaz de diferenciar estas dos cosas: una imagen a ancho completo y una imagen de fondo a ancho completo.
Puede parecer lo mismo…pero no es igual.
La diferencia principal entre una imagen a ancho completo y una imagen de fondo a ancho completo en diseño web con Elementor es que la primera es solamente eso, una imagen.
En cambio, la segunda es una imagen que actúa como fondo de una sección, en la que puedes poner otros elementos dentro de dicha sección (y, en consecuencia, de la imagen a ancho completo de fondo) como puede ser texto, botones, otras imágenes, etc.
De hecho, también puedes entender la diferencia entre estos dos conceptos por los objetivos que persiguen dentro del diseño de la web de tu negocio.
El único fin de implementar en Elementor una imagen a ancho completo pura y dura es el de hacer esa parte de la web más atractiva de forma visual, ya que realmente no podemos poner dentro de ella otro tipo de contenido (como pueden ser los textos mencionados anteriormente).
En cambio, una imagen de fondo a ancho completo, además de lo anterior, te permite destacar una sección de forma visual con la intención de que el usuario pueda, por ejemplo, ejecutar una acción que deseas enfatizar o que no se le pase leer algo que quieres destacar de tu producto, tu servicio o tu negocio.
Si aún así te lías un poco con la explicación que te he dado, no te preocupes. Lo vas a entender mejor con los siguientes ejemplos de cada caso.
Cómo poner una imagen a ancho completo con Elementor
A continuación, voy a explicarte las diferentes formas que hay de implementar en Elementor una imagen a ancho completo (tanto lo que es únicamente una imagen en sí como mediante una imagen de fondo).
Imagen a ancho completo simple en Elementor
El primer tipo de imagen a ancho completo con Elementor que puedes implementar en tu web es el de una imagen en el sentido puro y duro de la palabra.
Es decir, que siguiendo este método únicamente vas a poder implementar una imagen a ancho completo en la que no vas a poder añadir texto, botones o cualquier otro elemento de diseño.
Digamos que, en esta ocasión, el contenido de la sección es la imagen en sí. Crear una imagen a ancho completo de este tipo con Elementor tiene un fin únicamente estético.
Crea la sección a ancho completo
Para crear una imagen a ancho completo de este tipo, ve a una página de tu WordPress, pulsa en el botón Editar con Elementor y crear una nueva sección.
En las opciones de edición de sección, pulsa en Disposición y marca la opción de Extender Sección a Sí. Posteriormente, en la opción de Ancho de Contenido selecciona también Ancho Completo.
Con esto habrás conseguido que la nueva sección donde vamos a insertar la imagen esté en ancho completo de pantalla.
Añade la imagen a tu web
Ahora, tienes que tener una imagen en tu ordenador que tenga al menos 1.920 píxeles de ancho (si tiene más, no pasa nada. Lo que no puede tener es menos). Si no la tienes, puedes buscar una que se adecue a lo que quieres poner de un banco de imágenes como puede ser Freepik.
Ahora, añade a la sección que hemos creado antes un widget de imagen de Elementor.
Una vez añadido el widget a tu diseño, pulsa en la opción de Seleccionar imagen para implementar en tu diseño web la imagen que tienes en tu PC arrastrando y soltando la misma hasta la biblioteca de medios de WordPress. Posteriormente, pulsa en el botón Insertar Medio.
En las opciones del widget de imagen de Elementor, selecciona en Tamaño de imagen la opción de Completo para que la imagen se muestre en su tamaño original y máximo.
¡Ya lo tienes casi! Ahora lo único que hay que hacer para que no quede un fino recuadro blanco alrededor es pinchar en el icono de la columna de nuestra sección y posteriormente en el apartado de Avanzado. En los valores de relleno de la columna pon en todos 0.
Ahora sí. Ya está. Tienes tu imagen a ancho completo creada.
Imagen de fondo a ancho completo
¿Pero qué pasa si tú no quieres sólo la imagen? ¿Qué pasa si lo que quieres es que dentro de esa imagen haya un texto, un botón o cualquier otro widget de diseño de Elementor?
Pues entonces, realmente, tú lo que quieres hacer no es una imagen a ancho completo, sino una imagen de fondo a ancho completo.
Para conseguir esto, tienes que crear una sección de forma similar a lo explicado para la imagen a ancho completo. Sin embargo, en esta ocasión, la opción de Ancho de contenido puedes dejarla en Caja si quieres.
Ahora, pulsa en la sección y pincha en la pestaña de Estilo. En las opciones de Fondo, como Tipo de fondo selecciona el Clásico (la primera opción que tiene como icono un pincel).
Ya tienes tu imagen de fondo a ancho completo. Pero, si quieres un consejo, te recomiendo poner los siguientes parámetros para que la imagen siempre se muestre correctamente: Repetir > No repetir y Tamaño > Abarcar.
Ahora vas a ver que en esta ocasión sí que puedes meter dentro de esa sección tu texto, tus botones o lo que quieras. Para que quede mejor, te recomiendo que todo lo que introduzcas en la sección lo alinees al centro.
Si ves que, tras añadirlos, estos no son muy legibles, pincha de nuevo en la sección, pestaña Estilo y en Capa de fondo selecciona un color que haga buen contraste con el color de tu texto y botón para que estos se vean perfectamente. No olvides darle la opacidad que tú consideres para que la imagen se siga viendo de fondo más o menos.
Superponer texto en imagen a ancho completo en Elementor
Como habrás podido comprobar, la opción anterior deja la imagen totalmente de fondo atrás y los otros elementos del diseño (texto, botones, etc.) superpuestos haciéndose necesaria una capa de fondo.
Pero…¿qué pasa si lo que tú quieres es que la imagen de fondo se vea bien y poner tu contenido al lado izquierdo o derecho de la misma?
Pues bien, el proceso sería similar al anterior con la única salvedades de que:
- Tienes que crear una sección a ancho completo con dos columnas, no con una.
- Aquí lo que cobra importancia es la selección de imagen antes de subirla a tu web.
Me explico.
Si quieres crear algo similar a lo que ves por ejemplo en la primera sección de mi servicio como diseño de tiendas online, lo que debes hacer es conseguir una imagen que tenga un espacio en blanco en el lado en el que tú quieras introducir tu texto, botones, encabezados o lo que quieras.
Entiéndeme lo que quiero decir con espacio en blanco: no necesariamente tiene que ser un fondo de color blanco, puede ser del color que quieras. Lo que quiero decir es que sea una imagen que tenga un espacio vacío en el lado donde vayas a poner tu contenido.
Por ejemplo, si yo quiero poner mi contenido a la derecha, tendré que buscar una imagen que tenga un espacio vacío en ese lado como la de debajo de estas líneas.
Por lo demás, como te decía, el proceso sería similar al del apartado anterior. Eso sí, recuerda, con la diferencia de crear una sección de dos columnas en vez de una para poder poner el texto en el lado que desees.
De todos modos, si tienes dudas sobre el proceso, recuerda revisar el vídeo que encontrarás al principio de este artículo en el que verás paso a paso cómo hacerlo de una manera mucho más visual.
Hasta aquí este post en el que has aprendido cómo hacer en Elementor una imagen a ancho completo de 3 formas distintas. Por último, recordarte que si quieres que yo realice para tu negocio un diseño web estratégicamente preparado para vender, tienes a tu disposición mis servicios como diseñador web WordPress.
