Avisos
Vaciar todo

elementor imagenes con texo  

 
FERNANDO LIBERTO
 FERNANDO LIBERTO
Usuario activo

Hola a ver si alguien puede ayudarme que llevo ya unos días perdido. Quiero hacer algo que debería ser muy fácil con elementor pero no doy con la clave.
Se trata de incorporar una imagen con un botón abajo y a la derecha de esa imagen (y botón) y por debajo, pueda escribir texto rodeándolo.
No sé si me explico. Si me voy a un cuadro de texto e incorporo una imagen, queda ok, pero no tengo opción de incluir un botón dentro de ese cuadro de texto. Puedo introducir una segunda imagen con forma de botón pero entonces, esta segunda imagen me descuadra todo.
Se podría hacer mediante una sección que incluyera dos columnas pero entonces ya no conseguiría que el texto rodease la imagen.
No sé yo pienso que debería ser sencillo.
Aporto un ejemplo de lo que busco. Poder hacer reseñas de artículos como figuran en esta web. Contenido solo visible a usuarios registrados

Citar
Respondido : 03/12/2019 3:28 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

El problema es que el botón como tal es bloque, podrías evaluar agregar el botón como HTML, es decir en la vista HTLM del bloque editor de texto.

El botón no es más que un enlace con estilos CSS, si logras agregar el enlace luego puedes poner las clases CSS.

La imagen y el botón, ambos tendrían que estar en el mismo contenedor, por lo que posiblemente tengas que envolverlos en una etiqueta "div"

Saludos.

ResponderCitar
Respondido : 03/12/2019 5:56 pm

FERNANDO LIBERTO
 FERNANDO LIBERTO
Usuario activo

buff lo de programar me queda grande, por eso uso elementor. Esperaba que fuera más sencillo.

ResponderCitar
Respondido : 03/12/2019 6:41 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Si, lamentablemente para este tipo de cosas tendrías que hacerlo por HTML.

Otra cosa que puedes evaluar es que el botón sea parte de la imagen y hacer toda la imagen como enlace.

Saludos.

ResponderCitar
Respondido : 03/12/2019 8:29 pm

Cursos Gratuitos WordPress

FERNANDO LIBERTO
 FERNANDO LIBERTO
Usuario activo

Podrías facilitarme un ejemplo del código y lo intento?

ResponderCitar
Respondido : 04/12/2019 2:13 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola.

Podrías facilitarme un ejemplo del código y lo intento?

Podrías utilizar algo parecido a esto:Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

En la primera etiqueta <img src="imagen.jpg" le indicamos la ruta donde donde esta la imagen.

Para saber la ruta de la imagen lo puedes localizar en la biblioteca de medios editando esa Imagen:

 

Con la etiqueta "style="float: right;" le indicamos que queremos la imagen alineada a la derecha, lo demás ya es el texto que queremos añadir.

Un saludo

Esta publicación ha sido modificada el hace 4 años por antonio
ResponderCitar
Respondido : 04/12/2019 4:58 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

FERNANDO LIBERTO
 FERNANDO LIBERTO
Usuario activo

genial, gracias, lo intentaré.

ResponderCitar
Respondido : 04/12/2019 5:06 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Con el propio Elementor puedes "envolver" una imagen con texto, de hecho lo haces con el editor.
Revisa el siguiente video:
https://www.youtube.com/watch?v=3mizMSu8S2s

La idea es que la imagen ya tenga el botón como parte de la imagen, tal como la imagen adjunta.

Saludos.

ResponderCitar
Respondido : 04/12/2019 5:24 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

FERNANDO LIBERTO
 FERNANDO LIBERTO
Usuario activo

Hola, finalmente lo hice tal como me recomendaste. Integré el botón en la imagen, por lo que sólo hay una imagen y con el edito lo envuelvo con el texto muy fácilmente.
No obstante el problema que me encuentro es que en pc queda perfecto pero en tablet no funciona. No lo entiendo. La imagen se queda arriba y el texto debajo. No envuelve el texto a la imagen.

ResponderCitar
Respondido : 27/12/2019 10:26 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Fernando.

Ese es el comportamiento normal ya que si lo envuelves en la versión móvil es posible que Google te indique que algún aviso de que los elementos están demasiado juntos, para que lo entiendas, en las versiones paar móvil o tablet de normal la etiqueta float que es la que hace que los elementos tengan esa propiedad, está desactivada y por eso se muestra todo en una columna, imágenes, textos, etc...

Si revisas la URL que indicaste al principio verás que el resultado es el mismo, la imagen se muestra encima del texto:
-> Contenido solo visible a usuarios registrados

Este comportamiento es posible que se pueda cambiar mediante CSS pero no consegui ver un producto con ese formato para revisarlo.

Si puedes adjunta una URL de uno de los productos donde podamos verlo y revisar si podemos modificar algo, nos seria de ayuda.

Un saludo

ResponderCitar
Respondido : 27/12/2019 1:57 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

FERNANDO LIBERTO
 FERNANDO LIBERTO
Usuario activo

hola, si miras la web donde salen 10 mejores pulsómetros, en versión tablet, se ve exactamente igual que en versión pc.
Sin embargo, en mi web https://llavedinamometrica.com/bicicleta/ en versión tablet se ve igual que en móvil, con la imagen arriba y el texto debajo. No lo entiendo...

ResponderCitar
Respondido : 27/12/2019 2:36 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Fernando.

Añade lo siguiente al final del archivo style.css que encontrarás dentro de la carpeta de tu plantilla:

@media (max-width: 768px) {
.alignleft, .alignright {
float:left;
}
}

Un saludo

ResponderCitar
Respondido : 27/12/2019 4:22 pm

FERNANDO LIBERTO
 FERNANDO LIBERTO
Usuario activo

Genial, eso sí ha funcionado, lo único es que ahora el texto que se sitúa a la derecha de la imagen, aparece pegado, sin separación, ¿cómo lo ajusto?

ResponderCitar
Respondido : 27/12/2019 4:52 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Fernando.

Modifica el anterior por el siguiente:

@media (max-width: 768px) {
.alignleft, .alignright {
    float: left;
    padding: 1.5em;
}
}

Un saludo

ResponderCitar
Respondido : 27/12/2019 5:08 pm

Cursos Gratuitos WordPress