• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Letra capital en párrafos en WordPress

Letra capital en párrafos en WordPress

Letra capital en párrafos en WordPress

[ 9 diciembre 2020 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Básico] [ ]

css editor

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

Resultado final primera letra capital

Adicionalmente a establecer la letra capital veremos cómo modificar el color y el tipo de letra.

 

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.

Gutenberg letra Capitalizar

 

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.

Editor clásico establecer clase CSS para capitalizar primera letra

 

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;
}
Este código servirá tanto si tu theme tiene o no definida la clase has-drop-cap
Puedes agregar este código al final de tu archivo style.css de tu tema hijo.

 

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.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Agregar CSS personalizado al área de administración de WordPressAgregar CSS personalizado al área de administración de WordPress
  • Clases CSS por defecto WordPressEstilos CSS por defecto que genera WordPress
  • Agregar cuadros de alerta en el contenido de WordPressAgregar cuadros de alerta en el contenido de WordPress
  • Tabla de Contenidos en WordPress sin PluginsTabla de Contenidos en WordPress sin plugins
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (1 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Caco

    16 septiembre, 2021

    Gracias por el dato!

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Contenido de relleno para probar Gutenberg

Cómo usar Transients en WordPress

Optimizar la carga de imágenes con Lazy Load

Empaquetar WordPress con install.php

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados