En este artículo aprenderemos cómo destacar la primera letra de un párrafo, veremos cómo realizar esto tanto en Gutenberg, en donde ya viene por defecto como en el editor clásico.
Resultado final
Al final lo que queremos obtener será algo similar a lo que se muestra en la siguiente imagen.
Letra Capital en Gutenberg
En Gutenberg esta funcionalidad ya viene incluida, al seleccionar un bloque de párrafo puedes ver en la sección de Ajustes de Texto, la opción de Capitalizar, tal como se muestra en la siguiente imagen.
Letra Capita en editor clásico
En el caso del editor clásico no tienes esta opción, pero si tu theme soporta Gutenberg posiblemente ya tengas una clase llamada has-drop-cap, entonces simplemente puedes usar la vista HTML del editor para agregar esta clase CSS al primer párrafo.
Código CSS para establecer o modificar la letra capital
Si quieres cambiar el estilo de la primera letra, como color, tipo de fuente, etc. entonces puedes sobrescribir la clase has-drop-cap.
p.has-drop-cap:first-letter {
font-family: "Times New Roman", Times, serif;
text-transform: uppercase;
font-size: 4rem;
line-height: 1;
margin-right: 1rem;
float: left;
color: red;
}
Conclusión
Puedes establecer diseño diferente en tus artículos capitalizando y dando un aspecto diferente a la primera letra del párrafo, y puedes hacer esto directamente a través de código.
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.
Artículos Relacionados
(1 votos, promedio: 5,00 de 5)
Cargando...