Avisos
Vaciar todo
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
Respondido : 03/12/2019 3:28 pm
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.
Respondido : 03/12/2019 5:56 pm
buff lo de programar me queda grande, por eso uso elementor. Esperaba que fuera más sencillo.
Respondido : 03/12/2019 6:41 pm
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.
Respondido : 03/12/2019 8:29 pm
Podrías facilitarme un ejemplo del código y lo intento?
Respondido : 04/12/2019 2:13 pm
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
Respondido : 04/12/2019 4:58 pm
genial, gracias, lo intentaré.
Respondido : 04/12/2019 5:06 pm
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.
Respondido : 04/12/2019 5:24 pm
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.
Respondido : 27/12/2019 10:26 am
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
Respondido : 27/12/2019 1:57 pm
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...
Respondido : 27/12/2019 2:36 pm
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
Respondido : 27/12/2019 4:22 pm
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?
Respondido : 27/12/2019 4:52 pm
Hola Fernando.
Modifica el anterior por el siguiente:
@media (max-width: 768px) {
.alignleft, .alignright {
float: left;
padding: 1.5em;
}
}
Un saludo
Respondido : 27/12/2019 5:08 pm
Por favor Iniciar Sesión o Registro to reply to this topic.
