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

Página 2 / 2
 
Sergio
 Sergio
Usuario activo

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

Citar
Respondido : 02/04/2021 10:18 am
Karen Rios
 Karen Rios
Soporte CMS Webempresa 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

ResponderCitar
Respondido : 06/04/2021 1:54 pm

Cursos Gratuitos WordPress

Sergio
 Sergio
Usuario activo

@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.

 

ResponderCitar
Respondido : 06/04/2021 3:00 pm
Sergio
 Sergio
Usuario activo
 
 
 
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.

 

ResponderCitar
Respondido : 06/04/2021 3:04 pm

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

Sergio
 Sergio
Usuario activo

@jmarreros

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

ResponderCitar
Respondido : 06/04/2021 3:05 pm
Pepe
 Pepe
Soporte CMS Webempresa 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 1 mes 2 veces por Pepe
Esta publicación ha sido modificada el hace 1 mes por Bulmaro
ResponderCitar
Respondido : 06/04/2021 3:52 pm

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

Sergio
 Sergio
Usuario activo

@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.

ResponderCitar
Respondido : 07/04/2021 10:10 am
Pepe
 Pepe
Soporte CMS Webempresa 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

ResponderCitar
Respondido : 07/04/2021 10:54 am

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

Sergio
 Sergio
Usuario activo

@pepesoler

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

ResponderCitar
Respondido : 07/04/2021 5:27 pm
Argenis
 Argenis
Soporte CMS Webempresa 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 🖐️ 

ResponderCitar
Respondido : 07/04/2021 5:54 pm

Cursos Gratuitos WordPress

Sergio
 Sergio
Usuario activo

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
ResponderCitar
Respondido : 08/04/2021 10:38 am
Pepe
 Pepe
Soporte CMS Webempresa 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

 

 

ResponderCitar
Respondido : 08/04/2021 12:25 pm

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

Página 2 / 2