Avisos
Vaciar todo

Customizar botones  

 
Walter
 Walter
Reputable Member

Hola,

Necesitaria que sólo para la vista movil el contenido inserto en los botones de WhatsApp y LLamar quede en una sola linea y si es posible reducir el espacio entre el texto y los bordes de los botones sólo de esta pagina

https://estudiowls.com.ar/contacto/  

Page id 215

 

Gracias!

Contenido solo visible a usuarios registrados

Citar
Respondido : 26/04/2021 3:33 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Walter,

Como estas añadiendo los botones en tu sitio web? estas usando algún constructor? si es posible envíanos una captura como los estas añadiendo de esta forma podemos verificar con mayor detalle

Un Saludo

ResponderCitar
Respondido : 26/04/2021 3:46 pm

Walter
 Walter
Reputable Member

Hola Karen, lo hago con los botones que trae integrados Gutenberg nativo.

Te copio el codigo que se genera

<!-- wp:buttons {"contentJustification":"center"} -->
<div class="wp-block-buttons is-content-justification-center"><!-- wp:button {"backgroundColor":"vivid-green-cyan","textColor":"white","className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-white-color has-vivid-green-cyan-background-color has-text-color has-background" href="https://wa.me/5491159271763/?text=WhatsApp sólo por temas laborales y sucesiones en CABA (Capital Federal). Casos de GBA, Córdoba y Rosario podés enviar la consultas por el formulario https://estudiowls.com.ar/contacto /" target="_blank" rel="noreferrer noopener"><img class="wp-image-8850" style="width: 50px;" src="https://estudiowls.com.ar/wp-content/uploads/2021/01/Icono-WhatsApp-min.png" alt=""> Consultas online (sólo CABA)</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

ResponderCitar
Respondido : 26/04/2021 3:58 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Walter,

En este caso al tenerlo añadido en dos bloques estos se ajustaran de forma que se posicionen uno encima de otro, para que los puedas añadir los dos en linea deben estar en el mismo bloque

Un Saludo

ResponderCitar
Respondido : 26/04/2021 4:04 pm

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

Walter
 Walter
Reputable Member

Me expliqué mal.

Lo que necesito es reducir el tamaño de la fuente (solo para vista movil) ya que en la vista movil sobrepasa el tamaño del bloque y ello hace que se muestre el texto en dos lineas).

 

ResponderCitar
Respondido : 26/04/2021 4:19 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Walter,

Entiendo, en este caso prueba el siguiente código CSS, solo debes modificar el tamaño de la fuente por la que desees

@media screen and (max-width: 500px) {
.wp-block-buttons.is-content-justification-center {
font-size: 12px;
}
}

Un Saludo

ResponderCitar
Respondido : 26/04/2021 4:32 pm

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

Walter
 Walter
Reputable Member

Gracias!

Podria hacer algo para reducir el espacio entre el contenido del boton y el borde? (Creo que le dicen padding), me gustaria ajustarlo un poco mas para que haya menos espacio vacío.

ResponderCitar
Respondido : 26/04/2021 6:05 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Walter,

En este caso puedes probar el siguiente código, ten en cuenta que lo que añade mas espacio es el tamaño de las imágenes dentro de los botones por lo que debes probar reducirlas

@media screen and (max-width: 500px) {
.wp-block-buttons.is-content-justification-center {
font-size: 12px;
}
.wp-block-button.is-style-outline img {
width: 35px !important;
}
.wp-block-button.is-style-outline {
padding: 5px;
}
}

Verifica si con ello logras modificar lo que deseas

Un Saludo

ResponderCitar
Respondido : 26/04/2021 6:17 pm

Cursos Gratuitos WordPress

Walter
 Walter
Reputable Member

Gracias, solucionado!

Se podrá dar un efecto hover sobre el boton de WhatsApp? para que cambie de color al pasar sobre el mismo (color inverso podría ser)

ResponderCitar
Respondido : 27/04/2021 4:01 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Walter,

En este caso prueba con el siguiente código CSS

:root .has-vivid-green-cyan-background-color:hover {
background-color: #df6060;
}

Ten en cuenta modificar el color por el que deseas, de igual forma si necesitas realizar nuevos cambios te recomiendo abras un nuevo tema para ello de esta forma mantenemos un control sobre el hilo y podemos ayudarte ccon mayor detalle

Un Saludo 😊 

ResponderCitar
Respondido : 27/04/2021 4:09 pm

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