Avisos
Vaciar todo

responsive pagina shop

8 Respuestas
2 Usuarios
0 Reactions
26 Visitas
Respuestas: 399
Reputable Member
Topic starter
 

1/ ¿Como puedo ponerle en la pagina shop, en la version movil, mas altura a la imagen background del titulo? (en el movil se ve con muy poca altura)

2/ Como poner para movil, en el apartado shop, que se visualicen dos columnas en lugar de una de productos ?

3/ es normal que elementor no permita editar la pagina shop?

Contenido solo visible a usuarios registrados


 
Respondido : 01/07/2021 8:41 am
Respuestas: 399
Reputable Member
Topic starter
 

@argenis Puede ayudarme con estas dudas?


 
Respondido : 01/07/2021 11:03 am
Karen Rios
Respuestas: 18663
Illustrious Member Moderator
 

Hola Lourdes, 

La página de shop no es editable con las opciones básicas de Elementor, esta página puedes editarla si tienes Elementor pro, ya que te permite crear plantillas para los archive de wordpress o woocommerce por ejemplo que no se puede editar de forma convencional, puedes ver un poco como funciona esto en el siguiente articulo -> Contenido solo visible a usuarios registrados

Por otro lado, te comento algunas de tus prefguntas

Respondido por: @lour-homedesgmail-com

1/ ¿Como puedo ponerle en la pagina shop, en la version movil, mas altura a la imagen background del titulo? (en el movil se ve con muy poca altura)

 

En este caso veo que el título está añadida en una imagen lo que ocasiona que esta imagen tome un tamaño adaptable para dispositivos pequeños y por ello se visualice de este tamaño, si deseas tener un mayor control sobre como mostrar estos títulos en versión móvil puedes probar primero separa la imagen del texto y que el título de esta página esté añadida en una etiqueta como h2, h3, h4... de forma que puedas asignar un tamaño específico de fuente para las versiones móviles, ya que si cambiar ahora el alto de tu imagen el resultado puede ser por ejemplo

image
Respondido por: @lour-homedesgmail-com

2/ Como poner para movil, en el apartado shop, que se visualicen dos columnas en lugar de una de productos ?

 

Comprueba si el siguiente código te permite configurar los productos en dos columnas como deseas

@media only screen and (max-width: 500px){
.columns-2 .woocommerce_with_sidebar ul.products li.product, .columns-2 ul.products li.product, .columns-3 .woocommerce_with_sidebar ul.products li.product, .columns-3 ul.products li.product {
width: 46%;
}}

Un Saludo 


 
Respondido : 01/07/2021 12:45 pm
Respuestas: 399
Reputable Member
Topic starter
 

@karen

 

Las dos columnas no han funcionado, se queda 1 columna pero mas pequeña y a la izquierda:

 

IMG 6757

 
Respondido : 01/07/2021 1:40 pm
Respuestas: 399
Reputable Member
Topic starter
 

Disculpe olvide comentar el punto 1/

La imagen de la arena sobre la que pone shop es todo una imagen, lo que necesitaria en movil es darle mayor altura

La añadi desde editar pagina shop, abajo en titulo puse background

IMG B53C36575D7E 1

 
Respondido : 01/07/2021 2:18 pm
Karen Rios
Respuestas: 18663
Illustrious Member Moderator
 

Hola Lourdes, 

Entiendo, elimina el código anterior y verifica si el siguiente código CSS te permite configurarlo como deseas

@media only screen and (max-width: 500px){
.columns-3 ul.products li.product {
width: 45.89%!important;
display: inline-block;
}

}

Verifica esto y nos comentas como ha ido todo

Un Saludo 


 
Respondido : 01/07/2021 2:19 pm
Respuestas: 399
Reputable Member
Topic starter
 

@Karen Arreglado. Podria ayudarme con el punto 1 que le comento en el anterior mensaje? Gracias


 
Respondido : 01/07/2021 2:36 pm
Karen Rios
Respuestas: 18663
Illustrious Member Moderator
 

Hola Lourdes, 

Entiendo te refieres a este punto

Respondido por: @lour-homedesgmail-com

1/ ¿Como puedo ponerle en la pagina shop, en la version movil, mas altura a la imagen background del titulo? (en el movil se ve con muy poca altura)

 

Para veríficar como solucionar esto debes aplicar lo que te he comentado anteriormente:

Respondido por: @karen

En este caso veo que el título está añadida en una imagen lo que ocasiona que esta imagen tome un tamaño adaptable para dispositivos pequeños y por ello se visualice de este tamaño, si deseas tener un mayor control sobre como mostrar estos títulos en versión móvil puedes probar primero separa la imagen del texto y que el título de esta página esté añadida en una etiqueta como h2, h3, h4... de forma que puedas asignar un tamaño específico de fuente para las versiones móviles, ya que si cambiar ahora el alto de tu imagen el resultado puede ser por ejemplo

image

Ya que este título lo tienes añadido con una imagen si se modifica con CSS el contenido se distorsiona, para que puedas tener mayor control sobre como se visualizan los elementos debes separa la imagen del título

Comprueba como puedes separa la imagen del título y verifica si con ello tienes una mayor control para añadir el alto que deseas a esta sección

Un Saludo 


 
Respondido : 01/07/2021 2:46 pm