Avisos
Vaciar todo

[Resuelto] Cabecera personalizada  

 
Fran
 Fran
Usuario experto

Hola,

estoy haciendo una cabecera personalizada y no sé cómo conseguir exactamente lo que quiero, os cuento a ver si me podéis ayudar.

En pc sería algo así:

imagen

Pero haciendo que la barra de búsqueda fuese más ancha y el teléfono, usuario y carrito mas estrecho y junto. He probado a ponerle en el css personalizado de la fila, las siguientes propiedades;

display: grid;

grid-template-columns: 40% 50% 10%;

Pero no me lo coge, es raro porque en la última columna sí lo coge.

La versión móvil me gustaría dejarla tal que así:

imagen

Manteniendo el icono del teléfono al lado del usuario.

¿Hay alguna forma de hacerlo?

Gracias, un saludo.

Contenido solo visible a usuarios registrados

Respondido : 09/11/2023 12:21 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Fran.

A la barra de búsqueda le puedes asignar un tamaño fijo:

.dgwt-wcas-search-form {
width: 750px;
}

Lo que no veo es el el telefono, usuario y carrito en la URL que indicas:

screenshot aminower cp537.wordpresstemporal.com 2023.11.09 13 56 43

 

Un saludo

Respondido : 09/11/2023 12:58 pm

Fran
 Fran
Usuario experto

Hola Pepe,

por alguna extraña razón habían desaparecido sin yo hacer nada, ahora están de nuevo disponibles.

He cambiado el tamaño como dices pero invade el espacio de la otra columna y se superponen.

Respondido : 10/11/2023 10:28 am
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Fran, 

En este caso lo primero que debes hacer es asignar el ancho que deseas a cada columna para que el contenedor del formulario de buscar tenga más espacio, por ejemplo como te muestro en el siguiente video → Contenido solo visible a usuarios registrados

Luego de ello para que tu formulario de búsqueda tenga más ancho necesitas añadir el siguiente código CSS

.dgwt-wcas-search-wrapp {
max-width: 100% !important;
}
.dgwt-wcas-search-form {
width: 100% !important;
}

Verifícalo y nos comentas como va todo.

Un Saludo

Respondido : 10/11/2023 5:00 pm

Fran
 Fran
Usuario experto

Hola Karen,

He seguido los pasos y por el momento he obtenido esto:

imagen

Un saludo.

Respondido : 14/11/2023 11:11 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Fran.

Ok, es lo que buscas y podemos cerrar la consulta ?

 

Un Saludo

Respondido : 14/11/2023 11:25 am

Fran
 Fran
Usuario experto

Hola Pepe,

En versión escritorio sí, pero en vista tablet y móvil aún está lejos. Quiero poner las barras de menú y la lupa a la izquierda, luego el logo en el centro y a la derecha el usuario y el carrito. La única manera que se me ocurre de hacerlo es teniendo una fila oculta con la distribución que quiero y mostrarla en tablet y móvil, no sé si esto será muy eficiente a nivel de rendimiento o si me aconsejáis otra forma de hacerlo.

Un saludo.

Respondido : 16/11/2023 10:58 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Fran.

No veo los iconos del carrito y usuario.

screenshot nimbusweb.me 2023.11.16 16 04 23

Si puedes los añades y lo revisamos.

 

Un Saludo

Respondido : 16/11/2023 3:07 pm

Fran
 Fran
Usuario experto

Hola Pepe,

Pues el caso es que en el móvil yo tampoco lo veo, pero en el la vista adaptable del navegador sí.

 

imagen

¿Porqué puede ser?

 

Respondido : 16/11/2023 5:06 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Fran, 

Los iconos están, pero no se están mostrando. 

image

Verifica si al limpiar la caché del constructor se muestran, para eso accede a Divi → Opciones del tema → Constructor → Avanzado y pulsa en el boton de claro

image

Luego de ello revisa sí se muestran

Un Saludo 

Respondido : 16/11/2023 5:25 pm

Fran
 Fran
Usuario experto

Buenos días Karen,

Siguen sin salir 😕 

Tengo otro problema, al haber metido el menú en una columna ahora sale muy estrecho, ¿cómo hago para que tenga el ancho completo en el móvil?

imagen

Gracias, un saludo.

Respondido : 17/11/2023 9:13 am
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Fran, 

En este caso lo que veo es que en el código tienes un código añadido para estos iconos de tu cabecera que generan algún conflicto, como los estás añadiendo?, prueba eliminar este módulo y añade los iconos con el módulo de icono como tal que utiliza Divi.

image

Ten en cuenta que para añadir iconos de Divi en un módulo de texto necesitas utilizas su clase como

<span class='et-pb-icon' style='font-size: 33px; color: red;'></span>

Puedes verificar como funciona en su documentación oficial → Contenido solo visible a usuarios registrados

Sobre el menú, ya que es una consulta diferente, te recomiendo abras un tema para ello, de esta forma mantenemos un control sobre el hilo y podemos ayudarte con mayor detalle. 

Un Saludo 

 

 

Respondido : 17/11/2023 5:28 pm

Fran
 Fran
Usuario experto

Buenos días,

solucionado, gracias!

Respondido : 21/11/2023 8:48 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Fran, Buenos días.

Nada, gracias a ti.

Cualquier consulta que tengas no dudes en comunicarlo.

 

Un saludo

Respondido : 21/11/2023 10:43 am