Avisos
Vaciar todo

Cambiar la fuente de un elemento de un menú en Elementor

26 Respuestas
5 Usuarios
0 Reactions
90 Visitas
Respuestas: 19
Active Member
Topic starter
 

Hola, tengo un menú principal de navegación en el header. Éste tiene su tipografía y su tamaño de letra para todo el menú.

¿Se podría cambiar fuente , tamaño y color de uno de los elementos?

He pensado en hacer dos menús diferentes, por ejemplo, 6 elementos de una tipografía para menú 1, y 1 elemento con otra tipografía para menú 2, y colocarlos de tal manera que parezca que hay uno. ¿Hay alguna otra manera de hacerlo? ¿Por código...?

Gracias.

Contenido solo visible a usuarios registrados


 
Respondido : 02/04/2021 9:18 am
Tags del tema
Karen Rios
Respuestas: 18663
Illustrious Member Moderator
 

Hola Sergio,

En esta caso si haz subido la fuente que mencionas como Marykate bajo las opciones de Elementor puedes usarlas ya sea a traves de las opciones del constructor o llamándola por su nombre, debes verificar que nombre tiene añadido en Elementor, por ejemplo para usarlo en algún item de tu menú seria

.menu-item-2561 a{
color:green!important;
font-size: 40px!important;
font-family: "Marykate", Helvetica, sans-serif
}

De esta forma en este elemento se mostrará la fuente con este nombre, ten en cuenta que el nombre debe ser el mismo que le añadiste cuando la subiste. Puedes ver un poco mas de las fuentes en el siguiente URL -> Contenido solo visible a usuarios registrados

Un Saludo


 
Respondido : 06/04/2021 12:54 pm
Respuestas: 19
Active Member
Topic starter
 

@karen

Hola, insisto, es que no estáis resolviendo el problema. Recomiendo que os leáis todo el hilo. Necesito el código para usar dos tamaños de fuente diferentes para un mismo elemento del menú de navegación.

 


 
Respondido : 06/04/2021 2:00 pm
Respuestas: 19
Active Member
Topic starter
 
 
 
 
Respondido por: @sergi-alvarez-fgmail-com

Hola, 

Ya tengo más claro cuál serán las fuentes que utilizaré. Al final el nombre se llamará El Club de los MalosPadres.

(El Club de los) irá con la fuente sans serif Yanone Kaffeesatz y el resto irá con la fuente Marykate.

Uso el constructor Elementor y he visto que la Yanone ya la tiene por defecto y la Marykate no. Lo que he hecho ha sido descargar la de Marykate y la he subido mediante los ajustes de Elementor.

Ahora bien, no he subido nada de Google Fonts, ni he modificado el function.php. Si lo tengo que hacer mediante Google Fonts la fuente Yanone la puedo cambiar por otra sans serif porque son muy parecidas y Google Fonts tiene muchas para elegir, pero la Marykate no está en Google Fonts y me interesa que sea esta.

Ya me dices si se puede hacer mediante Elementor ya que ahí tengo las dos. Gracias.

@jmarreros

Hola Jhon, cuando puedas necesitaría que me siguieras guiando. Gracias.

 


 
Respondido : 06/04/2021 2:04 pm
Respuestas: 19
Active Member
Topic starter
 

@jmarreros

Hola Jhon, cuando puedas necesitaría que me siguieras guiando. Gracias.


 
Respondido : 06/04/2021 2:05 pm
Pepe
 Pepe
Respuestas: 41113
Illustrious Member Admin
 

Hola Sergio.

A ver estoy revisando toda tu consulta:

¿Se podría cambiar fuente , tamaño y color de uno de los elementos?

Si se puede por css

El elemento "El blog"

Puedes modificarlo co lso siguiente:

 li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-2561 a {
font-size:2em!important;
color:aqua!important;
font-family: "Brandon Grotesque", Sans-serif!important;
}

Puedes variar el tamaño de la fuente, color y el tipo de fuente que quieres utilizar

El código lo puedes añadir en apariencia -> personalizar -> CSS personalizado

 

 Cómo añadir en el código un color mediante un código de color RGB

En este enlace tienes un tabla de colores:

-> https://htmlcolorcodes.com/es/tabla-de-colores/

Si quieres que el color sea RGB:

color:rgb(0,255,0);

 

Entre paréntesis tienes que añadir el código del color que quieres que se muestre.

Por ejemplo, el elemento entero sería: el blog "Laboratorio del postureo"

Si todo es el mimo titulo no podrías cambiarlo una cosa que puedes hacer es crear un enlace de menu personalizado y utilizar HTML con la etiqueta Span, Un ejemplo seria este:

blogblue

screenshot nimbus capture 2021.04.06 16 33 05

El resultado seria este:

screenshot nimbus capture 2021.04.06 16 36 40

Si quieres que tenga otro tipo de letra puedes modificarlo en la misma etiqueta Span:

blogblue

 pero la Marykate no está en Google Fonts y me interesa que sea esta.

En una respuesta anterior te indique como añadir fuentes externas:

Veo que utilizas Elementor Pro y este permite cargar fuentes personalizadas:

Descargar la fuente que quieres instalar y descomprimes la carpeta que te descargas.

->   https://www.wfonts.com/font/marykate

Dentro de la carpeta que descargas veras que tienes un archivo con el nombre de tipo de letra " MaryKate.ttf "

.- Accede a Elementor -> Custom Fonts

.- Añade una nueva Fuente:

screenshot joomlero cp95.webjoomla.es 2021.04.06 13 24 12

.- Añade un Nombre a la fuente por defecto el nombre de la fuente y pulsa en ADD Font

screenshot joomlero cp95.webjoomla.es 2021.04.06 13 26 07

.- Sube los archivos, por ejemplo para ttf:

screenshot joomlero cp95.webjoomla.es 2021.04.06 13 28 27

.- Pulsa en Publicar

para guardar las opciones de la nueva fuente.

screenshot joomlero cp95.webjoomla.es 2021.04.06 13 29 59

A partir de aquí ya podrías utilizar la fuente en tus entradas/paginas:

Captura de pantalla 2021 04 06 a las 13.32.55

Tienes mas información en este enlace:

->  https://elementor.com/blog/custom-fonts/

No puedes pedir que te atienda un técnico en concreto somos muchos técnicos y cada uno tiene un horario.

 

Un saludo


Esta publicación ha sido modificada el hace 4 años 2 veces por Pepe
Esta publicación ha sido modificada el hace 4 años por Bulmaro
 
Respondido : 06/04/2021 2:52 pm
Respuestas: 19
Active Member
Topic starter
 

@pepesoler

Hola Pepe, 

¿Puedes pasarme el código tipo "span" para el siguiente ejemplo?

El blog "Laboratorio del Postureo"

(El blog): fuente: Yanone Kaffeesatz, tamaño: 20, color: #282828

("Laboratorio del Postureo"): fuente: Marykate, tamaño: 24, color: #FF6666

Gracias.


 
Respondido : 07/04/2021 9:10 am
Pepe
 Pepe
Respuestas: 41113
Illustrious Member Admin
 

Hola Sergio.

Tendría que ser algo parecido a esto:

<p><span style="font-family:Yanone Kaffeesatz; font-size:20px; color:#282828;"> El blog </span><span style="font-family: Marykate", Sans-serif; font-size:24px; color:#FF6666;">Laboratorio del Postureo"</p>

Un saludo


 
Respondido : 07/04/2021 9:54 am
Respuestas: 19
Active Member
Topic starter
 

@pepesoler

Hola, no ha funcionado lo que me has puesto. El color sí, pero tamaño y fuente no.


 
Respondido : 07/04/2021 4:27 pm
Argenis
Respuestas: 11585
Illustrious Member Moderator
 

Hola Sergio,

Verifica aplicar un important:

<p><span style="font-family:Yanone Kaffeesatz !important; font-size:20px !important; color:#282828;"> El blog </span><span style="font-family: Marykate, Sans-serif; font-size:24px !important; color:#FF6666;">Laboratorio del Postureo</p>

Realiza este ajuste y nos comentas.

Un saludo 🖐️ 


 
Respondido : 07/04/2021 4:54 pm
Respuestas: 19
Active Member
Topic starter
 

Hola, hemos avanzado pero se aplica todo menos la fuente Marykate:

Captura de pantalla 2021 04 08 a la(s) 11.24.56

Esto es un ejemplo de cómo es la fuente Marykate. Es un simple texto hecho con elementor y usando esa fuente:

Captura de pantalla 2021 04 08 a la(s) 11.26.09

 
Respondido : 08/04/2021 9:38 am
Pepe
 Pepe
Respuestas: 41113
Illustrious Member Admin
 

Hola Sergio.

 

Añade el elemento del blog al menu paar que lo revisemos que veo que no esta añadido.

screenshot tulikeautentico.com 2021.04.08 13 24 54

 

Un saludo

 

 


 
Respondido : 08/04/2021 11:25 am
Página 2 / 2