Avisos
Vaciar todo

responsive pagina shop  

 
Lourdes
 Lourdes
Estimable Member

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

Citar
Respondido : 01/07/2021 9:41 am
Lourdes
 Lourdes
Estimable Member

@argenis Puede ayudarme con estas dudas?

ResponderCitar
Respondido : 01/07/2021 12:03 pm

Cursos Gratuitos WordPress

Karen Rios
 Karen Rios
Soporte CMS Webempresa 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 

ResponderCitar
Respondido : 01/07/2021 1:45 pm
Lourdes
 Lourdes
Estimable Member

@karen

 

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

 

IMG 6757
ResponderCitar
Respondido : 01/07/2021 2:40 pm

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

Lourdes
 Lourdes
Estimable Member

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
ResponderCitar
Respondido : 01/07/2021 3:18 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa 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 

ResponderCitar
Respondido : 01/07/2021 3:19 pm

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

Lourdes
 Lourdes
Estimable Member

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

ResponderCitar
Respondido : 01/07/2021 3:36 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa 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 

ResponderCitar
Respondido : 01/07/2021 3:46 pm

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