Avisos
Vaciar todo

[Resuelto] Corregir ubicación boton WhatsApp flotante  

 
Walter
 Walter
Reputable Member

Hola,

En el sitio https://estudiowls.com.ar no estoy logrando ubicar el boton flotante de WhatsApp junto al icono del Email. 

Actualmente el icono flotante de WhatsApp (lo he creado manualmente y lo llamé whatsapp-me) aparece bien abajo de todo en la pagina y no logro modificar la posicion con CSS.

Les dejo mi CSS personalizado para que por favor me orienten donde esta el error:

Gracias

 

header.site-header {
border: none !important;
}
@media only screen and (max-width: 500px) {
.page .title {
margin-top: 15%;
}
}
#content header div.container{
margin-top:7%;
}
header.site-header{
position: fixed;
width: 100%;
z-index: 999;
}
.site-logo img {
max-width: 200px !important;
}
/*Entradas*/
.single .title{
text-align: center;
}
/*Páginas*/
.page .title{
text-align: center;
}
h1 {
font-size:35px !important;
}
h2 {
font-size:28px !important;
}
.site-footer .widget-area { color: #fefefe; background-color: #000; }
.site-footer .widget-area .widget-title {
color: silver;
}
.site-footer{
padding: inherit;
}
.site-footer .widget-area {
margin-bottom: inherit!important;
}
.navbar-form {
background: black !important;
}
.navbar-form .btn-search-form {
background: black !important;
}
.widget-area .widget {
margin-bottom: 0px!important;
}
img.attachment-large.size-large.wp-post-image {
width: 100%;
}
.site-footer .credits {display:none}
.site-header ul li a {
font-size: 18px;
font-weight: bold;
}
/*Contact Form*/
.wpcf7-form {
margin-left: 25px; margin-right: 25px; margin-top: 25px;
background-color: #4B4A50;
padding: 20px;
border: 3px solid #8B8B8B;
-webkit-box-shadow: 0px 5px 40px -1px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -1px rgba(0,0,0,0.57);
box-shadow: 15px 40px -1px rgba(0,0,0,0.57);
border-radius: 6px;
}
.wpcf7-form textarea::placeholder,
.wpcf7-form input::placeholder{
color:gray;
border-radius: 6px;
}
.wpcf7-form textarea,.wpcf7-form input{
color:white;
border-radius: 6px;
}
.wpcf7-form textarea, .wpcf7-form input {
color: white;
border: solid 1px white;
border-radius: 6px;
}
@media (max-width:720px){
.wpcf7-form{
margin: 20px 0px 0px 0px !important;
}
}
@media (max-width:480px){
.wpcf7-form{
padding:8px;
}
}
@media screen and (max-width: 600px) {
textarea.wpcf7-form-control.wpcf7-textarea, input.wpcf7-form-control.wpcf7-text {
font-size: 11px;
line-height: 1.5em;
}
}
.wpcf7-form-control.wpcf7-submit {
background-color: #000000;
color: #F5FFFA;
}
input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]), textarea, select {
background-color: #4B4A50;
}
input, button, select, textarea {
font-size: 14px;
color:#fefefe;
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder{
color: #f0f0f0;
opacity: 1;
}
.wpcf7-form-control.wpcf7-submit{
padding:10px;
}
.wpcf7-response-output{
color:white;
padding:10px!important;
}
/*Oculta iconos en Contacto*/
.page-id-215 #contact-me {
display: none !important;
}
.page-id-215 #whatsapp-me {
display: none !important;
}
/*Icono Email Flotante*/
#contact-me {
position:fixed;
right:13px;
bottom:100px;
width:50px;
height:50px;
background-color:
padding:10px;
border-radius:10%;
}
/*Boton Texto Flotante*/
#contact-me p {
position: absolute;
margin-left: -50px;
margin-top: 10px;
}
div#contact-me p {
position: absolute;
margin-left: -29px;
background-color: silver;
font-weight: bold;
color: black;
padding: 2px 4px;
text-align: center;
font-family: 'Arial', Helvetica, sans-serif;
font-size: 14px;
margin-top: px !important;
width: 120px !important;
right: 50px;
border:2px solid grey;
border-radius: 13px;
}
#grw_widget-11 > h2{
text-transform: initial;
}
// DEBE SER TEXTO WHTAPP
#whatsapp-me p {
position: absolute;
margin-left: -39px;
margin-top: 0px;
font-weight: bold;
}
//Boton Flotante Whatsapp
div#whatsapp-me p {
position: absolute;
margin-left: -5em;
margin-top: 53px;
background-color: rgba(0,0,0, .6);
font-weight: bold;
color: white;
padding: 0px 4px;
white-space: nowrap;
}
div#whatsapp-me img.lazyloading {
margin-left:-2px
}
//Icono WhatsApp
#whatsapp-me {
position:fixed;
right:13px;
bottom:160px;
width:50px;
height:50px;
background-color:
padding:10px;
border-radius:10%;
}
#grw_widget-11 > h2{
text-transform: initial;
}
/*Tabla de contenidos*/
div#ez-toc-container {
color: white;
font-size: 22px !important;
background-color: #1e73be !important;
}
div#ez-toc-container a {
color: white;
font-size: 18px !important;
}
div#ez-toc-container p {
font-size: 22px !important;
}
li.ez-toc-page-1::marker {
font-size: 18px !important;
color: white;
}
/*Fecha ultima entrada*/
.last-updated{
font-weight: bold;
font-style: italic;
color: #1e73be;
font-family: 'Arial', Helvetica, sans-serif;
}
@media only screen and (max-width: 439px) {
.page .title {
font-size: 29px !important;
}
}
/*Hover en botones*/
:root .has-vivid-green-cyan-background-color:hover {
background-color: #00d100;
}
/*Hover en texto flotante*/
#contact-me p:hover {
background: #000;
color: #fff;
font-size: 15px;
}
.wp-block-button__link:hover {
background: #3A3A3A !important;
color: #fff !important;
}
/*Oculta WhatsApp en Paginas*/
.postid-3961 #whatsapp-me {
display: none !important;
}
.postid-4252 #whatsapp-me {
display: none !important;
}
/*Oculta WhatsApp y Mail en Paginas*/
.postid-3961 #whatsapp-me {
display: none !important;
}
.postid-3961 #contact-me {
display: none !important;
}
.postid-6912 #whatsapp-me {
display: none !important;
}
.postid-6912 #contact-me {
display: none !important;
}
@media only screen and (max-width: 500px){
.alto-img img {
height: 155px!important;
}
}

Contenido solo visible a usuarios registrados

Respondido : 22/12/2022 7:58 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Walter, 

Recuerda que donde indica dominio debes escribir el tuyo, adicional has verificado con algún plugin para esto? por ejemplo tienes este muy bueno:

https://wordpress.org/plugins/buttonizer-multifunctional-button/

Un saludo 🖐️ 

Respondido : 22/12/2022 8:01 pm

Cursos Gratuitos WordPress

Walter
 Walter
Reputable Member

No uso plugins. Uso codigo y esta funcionando.

Solo necesito que me des el codigo css para colocar el icono WhatsApp debajo del icono del email (el sobre azul que flota a la derecha de la pantalla.

El sitio es https://estudiowls.com.ar

Mira todo mi Css porque ahi está el error y directamente dame un css para la ubicación

Respondido : 22/12/2022 8:12 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Walter,

No podemos indicarte el css si al ingresar a tu sitio no está dicho botón. Primero haz visible el botón si comentas que está funcionando y luego vemos si te podemos ayudar con el css.

Un saludo 🖐️ 

Esta publicación ha sido modificada el hace 2 años por Argenis
Respondido : 22/12/2022 8:16 pm

Walter
 Walter
Reputable Member

El boton aparece ABAJO DE TODO

 

image
Respondido : 22/12/2022 8:26 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Walter, 

Entiendo que deseas colocarlo debajo del botón de email, si es así prueba añadir el siguiente código CSS en tu sitio web

#whatsapp-me {
float: right;
margin-top: -95px;
margin-right: 10px;
}

El resultado debe ser:

image

PD: Ten en cuenta no escribir las respuestas en Mayúscula, esto en internet puede ser tomado de forma incorrecta por otros usuarios. 

Un Saludo 

 
Respondido : 22/12/2022 8:35 pm

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

Walter
 Walter
Reputable Member

Disculpa no era mi intención gritar al usar mayusculas, pero era el tercer mensaje que decia lo mismo queria dejar claro donde esta el icono.

Lamentablemente no ha funcionado con tus instrucciones, pero entiendo que mi CSS está muy desorganizado y debe haber algun comando que luego anula el tuyo. Por favor revisa mi CSS en lo que hace al icono de WhatsApp

 

/*Oculta iconos en Contacto*/

.page-id-215 #contact-me {

display: none !important;

}

.page-id-215 #whatsapp-me {

display: none !important;

}

/*Icono Email Flotante*/

#contact-me {

              position:fixed;

              right:13px;

              bottom:100px;

              width:50px;

              height:50px;

              background-color:

              padding:10px;

              border-radius:10%;

}

/*Boton Texto Flotante*/

#contact-me p {

position: absolute;

margin-left: -50px;

margin-top: 10px;

}

div#contact-me p {

position: absolute;

margin-left: -29px;

background-color: silver;

font-weight: bold;

color: black;

padding: 2px 4px;

text-align: center;

font-family: 'Arial', Helvetica, sans-serif;

font-size: 14px;

margin-top: px !important;

width: 120px !important;

right: 50px;

border:2px solid grey;

border-radius: 13px;

}

#grw_widget-11 > h2{

  text-transform: initial;

}

/* TEXTO WHTAPP

#whatsapp-me p {

position: absolute;

margin-left: -39px;

margin-top: 0px;

font-weight: bold;

}

*//

//Boton Flotante Whatsapp

div#whatsapp-me p {

position: absolute;

margin-left: -5em;

margin-top: 53px;

background-color: rgba(0,0,0, .6);

font-weight: bold;

color: white;

padding: 0px 4px;

white-space: nowrap;

}

div#whatsapp-me img.lazyloading {

margin-left:-2px

}

//Icono WhatsApp

#whatsapp-me {

              float: right;

              margin-top:-95px;

              margin-right: 10px;

              position:;

              right:13px;

              bottom:160px;

              width:50px;

              height:50px;

              background-color:

              padding:10px;

              border-radius:10%;

}

#grw_widget-11 > h2{

  text-transform: initial;

}

Respondido : 22/12/2022 8:51 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Walter, 

Es posible que el código que esté anulando esta regla sea el que tienes en:

//Boton Flotante Whatsapp

div#whatsapp-me p {

position: absolute;

margin-left: -5em;

margin-top: 53px;

background-color: rgba(0,0,0, .6);

font-weight: bold;

color: white;

padding: 0px 4px;

white-space: nowrap;

}

Sin embargo, prueba añadir lo que te comento incorporando el !important para que le dé prioridad a este cambio, quedaría 

#whatsapp-me {
float: right !important;
margin-top: -95px !important;
margin-right: 10px !important;
}

Si tienes caché en tu sitio web prueba borrarla y ver si se aplican los cambios. 

Un Saludo

Respondido : 22/12/2022 8:58 pm

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

Walter
 Walter
Reputable Member

Lamentablemente sigue igual... borré caché y puse el important!

Respondido : 22/12/2022 9:03 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Walter,

Prueba si al aplicarlo a la imagen se efectúan los cambios

#whatsapp-me img {
float: right !important;
margin-top: -95px !important;
margin-right: 10px !important;
}

Si no funciona debes ir probando dentro de tu código cuál lo está afectando, comentando las líneas que aplican cambios al botón de WhatsApp e ir probando. 

Verifica y nos comentas como va todo

Un saludo

 
Respondido : 22/12/2022 9:26 pm

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

Walter
 Walter
Reputable Member

He logrado mover la imagen con este codigo

#whatsapp-me img {
margin-top: -395px !important;
margin-left: 745px !important;
}

Pero quiero que la imagen quede siempre en el mismo lugar (como sucede con el icono del email)

Si agrego

position: fixed !important;

La imagen desaparece...

Como lo podré solucionar?

Respondido : 22/12/2022 11:23 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Walter,

Si agrego este código:

div#whatsapp-me {
position: fixed;
right: 13px;
bottom: 40px;
width: 50px;
height: 50px;
border-radius: 10%;
}

Se ve así:

Un saludo 🖐️ 

Respondido : 23/12/2022 12:27 am

Cursos Gratuitos WordPress

Walter
 Walter
Reputable Member

@argenis Muchas gracias! lo has logrado!

Respondido : 23/12/2022 2:54 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Walter, 

Enhorabuena has logrado añadir lo que necesitabas, es un placer siempre poder ayudarte. 

No dudes en escribirnos si tienes cualquier otra consulta 

Un Saludo 😊 

Respondido : 23/12/2022 3:00 pm