Conseguir efecto subrayado ancho estilo H2 de Franck Scipion

  • Autor Autor Spro
  • Fecha de inicio Fecha de inicio
S

Spro

Gamma
SEO
Muy Buenas Compañeros,

Me gusta mucho el estilo que Franck Scipion ha dado a su H2 en las entradas. De esta forma se diferencian muy bien las diferentes secciones dentro del post.
Tengo un proyecto en el que me gustaría hacer algo parecido, ya que cada entrada irá dividida en diferentes apartados diferentes.
¿Sabéis cómo se puede conseguir un efecto similar?
Os dejo una captura de lo que me refiero. Visualmente parece un subrayado de ancho completo de entrada
Captura.webp

Muchas Gracias :encouragement:
 
Botón derecho sobre el H2 > inspeccionar elemento. Copias el CSS y lo pegas en el tuyo :encouragement: .

Si no podés posteá el enlace que te lo extraigo.


Googlee un poco y pude encontrar el sitio que decias. Colocá este código css en tu plantilla (al final de todo)

.single-post h2, .entry-content h2 {
border-bottom: 3px solid #fd904d;
color: #e86515;
font-size: 1.2em;
font-weight: normal;
margin: 60px 0 50px;
padding-bottom: 15px;
text-align: center;
}
 
Última edición:
Muchísimas Gracias. La has clavado :encouragement:

Lo único es que también se visualiza esa línea debajo del título de la web. ¿Podrías decirme como quitarlo?

Muchas Gracias de nuevo

Un Saludo
 
Elimina esto: border-bottom: 3px solid #fd904d;

- - - Actualizado - - -

Spro dijo:
Muchísimas Gracias. La has clavado :encouragement:

Lo único es que también se visualiza esa línea debajo del título de la web. ¿Podrías decirme como quitarlo?

Muchas Gracias de nuevo

Un Saludo
Hacer clic para expandir...
Elimina esto:
border-bottom: 3px solid #fd904d;
 
Holaa pues como dijo tonchitoZ solo tienes que agregar en tu estyle.css las siguientes lineas

.single-post h2, .entry-content h2{
color:#E86515;
font-size:1.2em;
margin:60px 0 50px;
font-weight:normal;
padding-bottom:15px;
text-align:center;
border-bottom:3px solid #fd904d;
}

Ya lo probé y me sale igual en los h2 de mi blog (después lo elimine) si me pasas la url de tu blog para ver porque te sale tambien en el titulo ya que el código solo modifica los h2 de los post ahora bien quizás sea que tus títulos los tengas en h2 y no en h1 como deberia ser te recomiendo cheques esa parte de tu theme.
 
eswal200 dijo:
Holaa pues como dijo tonchitoZ solo tienes que agregar en tu estyle.css las siguientes lineas

.single-post h2, .entry-content h2{
color:#E86515;
font-size:1.2em;
margin:60px 0 50px;
font-weight:normal;
padding-bottom:15px;
text-align:center;
border-bottom:3px solid #fd904d;
}

Ya lo probé y me sale igual en los h2 de mi blog (después lo elimine) si me pasas la url de tu blog para ver porque te sale tambien en el titulo ya que el código solo modifica los h2 de los post ahora bien quizás sea que tus títulos los tengas en h2 y no en h1 como deberia ser te recomiendo cheques esa parte de tu theme.
Hacer clic para expandir...

Efectivamente el Título de la web me aparece como H2 y por eso muestra también ese estilo. ¿Qué formato debería ponerle para que no muestre dicho estilo?

Muchas gracias por la ayuda, de verdad 😛7:
 
Lo que sucede es que agregas el estilo en general a todos los H2, por eso se muestra tu titulo con el estilo sobreescrito. Si pudieras mostrarme tu web, para que yo vea el código y te diga exactamente la regla CSS que debes aplicar.

Aunque lo mas rudimentario y que no recomiendo hacer, porque es una mala práctica. Es envolver en un div con una clase especial a tus post y aplicar tal estilo a dicha clase.
 
Última edición:
Spro dijo:
Efectivamente el Título de la web me aparece como H2 y por eso muestra también ese estilo. ¿Qué formato debería ponerle para que no muestre dicho estilo?

Muchas gracias por la ayuda, de verdad 😛7:
Hacer clic para expandir...

pues deberia ser algo haci

h1 = solo un titulo, en este caso se utiliza en el titlo del articulo una sola vez
h2 y h3 = se utilizan para subtitulos
y pues bueno hasta hayi te puedo ayudar pues si nos proporcionas la url de tu web seria mas facil y rapido ayuderte
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba