Avisos
Vaciar todo

Top header deslizante  

 
Fran
 Fran
Usuario experto

Buenas tardes,

Quiero añadir una barra encima del header con unos mensajes sobre la web (pago seguro, envio gratuito, etc...) pero no consigo que se muevan los mensajes de un lateral de la página a otro. ¿Cómo podría hacerlo?

imagen

Gracias, un saludo!

Contenido solo visible a usuarios registrados

Citar
Respondido : 01/09/2022 12:51 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Fran, 

Disculpa si no comprendo bien la consulta, cuando nos indicas que se muevan de un lateral a otro quieres decir que estos textos se muestren al final del top hader?, por ejemplo donde te indico en la imagen 

image

En este caso si lo que deseas es que se muestren ya sea del lado izquierdo o derecho de tu pantalla puedes probar el siguiente código CSS

/*Alineación a la izquierda*/

.et_pb_slider .et_pb_slide_0_tb_header.et_pb_slide .et_pb_slide_description .et_pb_slide_title, .et_pb_slider .et_pb_slide_1_tb_header.et_pb_slide .et_pb_slide_description .et_pb_slide_title, .et_pb_slider .et_pb_slide_2_tb_header.et_pb_slide .et_pb_slide_description .et_pb_slide_title, .et_pb_slider .et_pb_slide_3_tb_header.et_pb_slide .et_pb_slide_description .et_pb_slide_title, .et_pb_slider .et_pb_slide_4_tb_header.et_pb_slide .et_pb_slide_description .et_pb_slide_title {
text-align: left!important;
}

/*Alineación a la derecha*/

.et_pb_slider .et_pb_slide_0_tb_header.et_pb_slide .et_pb_slide_description .et_pb_slide_title, .et_pb_slider .et_pb_slide_1_tb_header.et_pb_slide .et_pb_slide_description .et_pb_slide_title, .et_pb_slider .et_pb_slide_2_tb_header.et_pb_slide .et_pb_slide_description .et_pb_slide_title, .et_pb_slider .et_pb_slide_3_tb_header.et_pb_slide .et_pb_slide_description .et_pb_slide_title, .et_pb_slider .et_pb_slide_4_tb_header.et_pb_slide .et_pb_slide_description .et_pb_slide_title {
text-align: right!important;
}

Este coligó debes añadirlo en el apartado de Divi -> Opciones del tema -> General, ten en cuenta vaciar la cache de tu sitio web para visualizar los cambios 

Verifica si con ello puedes configurar lo que necesitas

Un Saludo 

ResponderCitar
Respondido : 01/09/2022 1:31 pm

Fran
 Fran
Usuario experto

Buenas tardes,

No te preocupes no he sido muy claro. Sí es más o menos eso pero que salgan las letras del lado izquierdo y se oculten por el derecho y vuelvan a salir en bucle, algo como la pantalla del pacman, perdona no sé explicarlo mejor 🤣

topheader

 

ResponderCitar
Respondido : 01/09/2022 6:44 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Fran, 

Entiendo, en este caso para añadir este tipo de texto es posible necesites configurarlo directamente en un módulo de texto y no a través de un módulo deslizante. Puedes revisar en este caso el siguiente artículo oficial de Divi donde indican como configurarlo Contenido solo visible a usuarios registrados

Verifica esto y nos comentas como ha ido todo

Un Saludo 

ResponderCitar
Respondido : 01/09/2022 7:27 pm

Fran
 Fran
Usuario experto

@karen gracias por responder tan rápido, he conseguido hacer lo que quería, pero las letras se ven un poco borrosas al moverse, no sé si siempre es así o hay alguna manera de hacerlas ver bien.

Le hecho un ojo al enlace que me pasas y dejo aquí la solución que he encontrado.

#textoPacMan{
animation-duration: 30s;
animation-name: leftToRight;
animation-iteration-count: infinite;
animation-direction: absolute;
}
@keyframes leftToRight {
0% {
transform: translateX(-860px);
}
100% {
transform: translateX(1460px);
}
}

Gracias de nuevo, un saludo!

ResponderCitar
Respondido : 01/09/2022 7:37 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Fran, 

Gracias por compartir la solución para el texto en movimiento, estoy segura será de utilidad para otros usuarios que desees configurar algo similar.

Es posible que se vea de esta forma por el formato de la fuente, prueba jugar un poco con el peso de la fuente y el color, luego revisa si con ello se muestra de forma correcta. 

Un Saludo 

 

ResponderCitar
Respondido : 01/09/2022 7:54 pm