Pregunta sobre Elementor Website Builder de Wordpress:

Limitación de superposición de texto

Un usuario preguntó 👇

Parece que no hay forma de hacer que una imagen se muestre en su totalidad (sin colgar), escalando al ancho de la ventana, con texto superpuesto orientado verticalmente a la imagen.

Aquí hay un ejemplo de un sitio web que hace esto con éxito (probablemente sin Elementor). Vea el texto «Contando el historial completo» sobre la imagen y cómo el texto permanece centralizado y cambia toda la imagen a medida que cambia el tamaño de la ventana. https://savingplaces.org/

Este es un diseño básico que Elementor debería poder hacer fácilmente. ¿Es algo que se olvidaron los desarrolladores o me falta algo?

Este tema fue modificado hace 2 años, 5 meses por.

(@ lestexas60)

Hace 2 años, 5 meses

¿Qué plantilla estás usando? OceanWP hace esto. tiger721.com

Editar el diseño de la organización: sección extendida sin espacio de altura: ideal para filtrar la posición del pilar: promedio

Esta respuesta fue modificada hace 2 años, 5 meses.

(@randomeningeniero)

Hace 2 años, 5 meses

Parece que falta una opción de altura de diseño de sección para «altura de imagen de fondo». El problema que veo es que creo que aprovecharía la mayoría de las opciones de imagen de fondo no específicas.

(@randomeningeniero)

Hace 2 años, 5 meses

LesTexas, altura: «ajuste de pantalla» no hace esto. En su lugar, solo muestra la parte / imagen individual en la pantalla verticalmente y llena el resto de la pantalla con espacios en blanco para la siguiente parte. ¿O me estoy perdiendo algo?

Esta respuesta fue modificada hace 2 años, 5 meses. Esta respuesta fue modificada hace 2 años, 5 meses.

(@ lestexas60)

Hace 2 años, 5 meses

Aquí está YouTube explicándolo:

No estoy seguro de a qué te refieres con «dejaría sin especificar la mayoría de las opciones de imagen de fondo». Supongamos que agrega un widget de texto y luego establece el fondo de su imagen, puede agregar tantas líneas de texto blancas para aumentar la altura de la imagen. Luego agrega otro widget de texto debajo de eso y agrega otra imagen de fondo. Si hay huecos de los que quiere deshacerse, ajuste los márgenes. Visite tiger721.com nuevamente. Agregué 2 imágenes adicionales al original.

El vidrio original es el fondo de la pieza y luego hay vidrio y otros encajes como fondos de widget.

Esta respuesta fue modificada hace 2 años, 5 meses.

(@randomeningeniero)

Hace 2 años, 5 meses

LesTexas, agradezco el esfuerzo por ayudar, pero creo que no entendiste el problema. tiger721.com no representa una implementación exitosa de esta función. A medida que crece y baja la ventana (horizontalmente), su imagen no va de acuerdo con el ancho de la ventana. En cambio, la imagen se recorta. Si prueba esto en saveplaces.org, se comportará como se esperaba.

(@ lestexas60)

Hace 2 años, 5 meses

Cuando dices crecer y encoger, ¿te refieres a la función Zoom del navegador Ctrl + y -? Si es así, veo lo que quiere decir cuando cae por debajo del 90%. Encontré un problema similar con mi menú de encabezado y la función de zoom. El menú es muy dinámico.

(@randomeningeniero)

Hace 2 años, 5 meses

No, me refiero a que cuando cambia el tamaño de la ventana de su navegador (horizontalmente en particular), la imagen de la que estoy hablando se escala directamente al ancho de la ventana en lugar de recortarla a los lados, rellenar con espacios en blanco en los lados o repetir horizontalmente.

Esta respuesta fue modificada hace 2 años, 5 meses. Esta respuesta fue modificada hace 2 años, 5 meses. Esta respuesta fue modificada hace 2 años, 5 meses.

(@randomengineer)

Hace 2 años, 5 meses

Aquí hay un ejemplo de la última versión de su sitio web saveplaces.org. ¿Ves cómo la imagen permanece despejada a medida que reduzco el ancho de la ventana?

Esta respuesta fue modificada hace 2 años, 5 meses.

(@ lestexas60)

Hace 2 años, 5 meses

Gracias por su aclaración, hay muchas formas de interpretar un informe. Ahora entiendo lo que quieres decir. Has golpeado mi curiosidad. Descubrí que generalmente hay una manera de hacer casi cualquier cosa, todo lo que tienes que hacer es mirar hasta que encuentres la configuración correcta. Espero probar la nueva versión de Elementor, se cree que facilitará el acceso a la configuración. Uno pensaría que uno sabría la respuesta a esta.

Solo probé esto usando Chrome y FireFox & Edge. Bordeado a 1/3 de la pantalla, Chrome recortado a poco menos de la mitad y FireFox a la mitad. Esto estaba buscando en el mismo sitio que mostró. Estoy usando Win 10 con las versiones más actuales de navegadores. Al mirar sus imágenes, solo bajó a la mitad de la imagen, por lo que aún funcionó. Esto funciona con el tamaño como una «portada», pero en mi prueba y en su página de muestra se necesita la parte superior de la imagen a medida que disminuye el ancho.

Esta respuesta fue modificada hace 2 años, 5 meses. Esta respuesta fue modificada hace 2 años, 5 meses.

(@randomengineer)

Hace 2 años, 5 meses

@ lestexas60, sí, la imagen se «recorta» cuando se cambia de tamaño. Esta es una elección consciente del diseño por parte de los expertos diseñadores web de saveplaces.org. Cuando el usuario accede a una tableta o teléfono del tamaño de una tableta, la imagen cambia a una versión diferente de la foto, que luego se escala como las escalas superiores más grandes. No lo mencioné porque no es relevante para la discusión.

Seguiré buscando creadores de páginas más sólidos. Espero que Guttenberg pueda manejar esta tarea.

Esta respuesta fue modificada hace 2 años, 5 meses.

(@logologia)

Hace 2 años, 5 meses

sí, la imagen «arriba» cuando se cambia el tamaño. Esta es una elección consciente del diseño por parte de los expertos diseñadores web de saveplaces.org. Cuando el usuario accede a una tableta o teléfono del tamaño de una tableta, la imagen cambia a una versión diferente de la foto, que luego se escala como las escalas superiores más grandes. No lo mencioné porque no es relevante para la discusión.

También puede hacer esto con Elementor, utilizando las opciones de respuesta. Crea 3 imágenes escaladas y cárgalas. Crea 3 secciones con esas imágenes en cada dimensión.

Edite cada parte y ocúltela, por ejemplo, en el escritorio o en la capacidad, etc. De esa manera, las imágenes de la escala solo se mostrarán en tabletas, dispositivos móviles, etc. Y mostrarán la imagen a la escala correcta por dispositivo.

(@randomeningeniero)

Hace 2 años, 5 meses

gracias también a @logologics por intentar ayudar. Lo que parece haber hecho es crear un elemento de pantalla completa (consulte el cuarto comentario de arriba).

LesTexas, altura: «ajuste de pantalla» no hace esto. En su lugar, solo muestra la parte / imagen individual en la pantalla verticalmente y llena el resto de la pantalla con espacios en blanco para la siguiente parte.

Respecto a: el funcional “top” para pantallas más pequeñas, como dije, eso no es relevante para la limitación en Elementor. Esta publicación no trata sobre diferentes diseños para diferentes tamaños de pantalla, que ya conozco. En este punto, la incapacidad de escalar una imagen con una superposición de texto sin montarla en la pantalla es claramente una deficiencia grave de Elementor.

Esta respuesta fue modificada hace 2 años, 5 meses. Esta respuesta fue modificada hace 2 años, 5 meses.

(@ruven)

Hace 2 años, 5 meses

Soy nuevo aquí, pero no creo que esto sea posible. Me encantaría agregar la opción de contenido y capas a una función de imagen también. tal vez pueda hacer tres preguntas id?

su conexión usa flexbox. puede agregar esta función a algunos CSS personalizados, creo

Esta respuesta fue modificada hace 2 años, 5 meses. Esta respuesta fue modificada hace 2 años, 5 meses. Esta respuesta fue modificada hace 2 años, 5 meses.

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *