Cómo Limitar el Número Palabras de tus Títulos o Párrafos usando Elementor

Elementor es una herramienta increíblemente poderosa para diseñar páginas web en WordPress. Sin embargo, a veces necesitamos ajustar detalles específicos, como por ejemplo: limitar el número de palabras en los títulos o párrafos. Esto puede ser útil para mantener un diseño uniforme o para optimizar el espacio en tu sitio.

En este tutorial, te mostraré cómo lograrlo utilizando CSS personalizado en Elementor de una forma muy sencilla. Aprenderás a aplicar este método en diferentes widgets, como encabezados, párrafos, posts dinámicos e incluso productos de WooCommerce.

Ejemplo 1: Limitar el Número de Palabras en un Widget de Encabezado o Título

El primer ejemplo es el más sencillo. Vamos a limitar el número de palabras en un widget de encabezado o título de forma manual.

1. Agrega un widget de encabezado: En el editor de Elementor, arrastra y suelta un widget de «Encabezado» en tu página.
2. Escribe el título: Ingresa el texto que deseas mostrar.
3. Accede a las opciones avanzadas: Haz clic en la pestaña «Avanzado» en el panel de configuración del widget.
4. Pega el código CSS: En la sección «CSS personalizado»:

selector {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* Cambia este número para limitar las líneas */
  -webkit-box-orient: vertical;
}

Este código limitará el texto a un número específico de líneas y agregará puntos suspensivos (...) si el texto excede el límite.

Ejemplo 2: Limitar el Número de Palabras en un Widget de Párrafo

El proceso para limitar palabras en un widget de párrafo es muy similar al anterior.

1. Agrega un widget de párrafo: Arrastra y suelta un widget de «Texto» en tu página.
2. Escribe el contenido: Ingresa el texto que deseas mostrar.
3. Accede a las opciones avanzadas: Ve a la pestaña «Avanzado».
4. Pega el código CSS: En la sección «CSS personalizado», pega el mismo código que usamos en el ejemplo anterior.
5. Guarda los cambios: Actualiza la página y verás cómo el texto se ajusta al límite establecido.

Ejemplo 3: Limitar el Número de Palabras en un Widget Dinámico de Posts

Si estás utilizando un widget dinámico para mostrar posts, el proceso es un poco diferente, ya que este widget agrupa varios elementos (como la imagen destacada, el título y el párrafo).

1. Agrega un widget de posts: Arrastra y suelta un widget de «Posts» en tu página.
2. Accede a las opciones avanzadas: Ve a la pestaña «Avanzado».
3. Pega el código CSS: En la sección «CSS personalizado», pega el siguiente código para limitar el número de palabras en los títulos de las entradas:

selector h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Cambia este número para limitar las líneas */
  -webkit-box-orient: vertical;
}

En este caso, debemos ser más específicos al momento de añadir nuestro código CSS. Primero, debemos referirnos al widget en general utilizando la palabra clave «selector», seguida de un espacio. Luego, debemos indicar la etiqueta HTML del título que corresponde al encabezado de la entrada o post. Por ejemplo, en este caso, he utilizado h3 porque es la etiqueta que Elementor trae configurada por defecto en su widget de posts. Esto asegura que el CSS se aplique correctamente al título de las entradas.

Si necesitas limitar el número de palabras o líneas en el párrafo o contenido de las entradas, debes utilizar el siguiente código. En este caso, ya no nos referimos a un título (h3), sino a un párrafo (p). Aquí te dejo el código:

selector p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Cambia este número para limitar las líneas */
  -webkit-box-orient: vertical;
}

Ejemplo 4: Limitar el Número de Palabras en un Widget Dinámico de Productos de WooCommerce

Si estás utilizando Elementor para mostrar productos de WooCommerce, también puedes limitar el número de palabras o líneas en los títulos de los productos. Por defecto, Elementor asigna la etiqueta HTML h2 a los títulos de los productos, por lo que, con esta información, podemos aplicar el siguiente código CSS de manera específica.

1. Agrega un widget de productos: Arrastra y suelta un widget de «Productos» en tu página desde el editor de Elementor.
2. Accede a las opciones avanzadas: Una vez que hayas colocado el widget, dirígete a la pestaña «Avanzado» en el panel de configuración.
3. Pega el código CSS: En la sección «CSS personalizado»:

selector h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Cambia este número para limitar las líneas */
  -webkit-box-orient: vertical;
}

En conclusión: limitar el número de palabras en los títulos o párrafos usando Elementor es más fácil de lo que parece. Con un poco de CSS personalizado, puedes controlar la longitud de tus textos y mantener un diseño uniforme en tu sitio web. Ya sea que estés trabajando con widgets estáticos o dinámicos, estos métodos te permitirán optimizar el espacio y mejorar la experiencia del usuario.