![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/5-1-1024x576.jpg\")
<\/figure><\/div>\u00bfPor qu\u00e9 es tan importante el interlineado?<\/h3>
El interlineado afecta directamente a la presentaci\u00f3n visual del texto de su sitio web y, a su vez, a la experiencia de sus usuarios. He aqu\u00ed algunas razones por las que es esencial:<\/p>
- Mejora de la legibilidad<\/strong>: Si su texto est\u00e1 muy espaciado, los lectores necesitar\u00e1n ayuda para seguirlo, lo que provocar\u00e1 fatiga visual y frustraci\u00f3n. Por otro lado, un espaciado excesivo puede facilitar que los usuarios mantengan la atenci\u00f3n. El equilibrio adecuado mejora la fluidez de su contenido, facilitando su lectura y absorci\u00f3n.<\/li>\n\n
- Mejor est\u00e9tica<\/strong>: Un sitio web bien espaciado parece m\u00e1s limpio y profesional. Por ejemplo, un blog con un espaciado adecuado entre l\u00edneas y secciones resulta m\u00e1s atractivo y organizado que unos bloques de texto desordenados y dif\u00edciles de leer.<\/li>\n\n
- Influir en el compromiso de los usuarios<\/strong>: El compromiso de los usuarios suele estar relacionado con la legibilidad. Si los visitantes encuentran que su contenido es dif\u00edcil de seguir, es probable que abandonen su sitio r\u00e1pidamente. Un interlineado adecuado aumenta las posibilidades de que los usuarios permanezcan m\u00e1s tiempo, consuman m\u00e1s contenido e interact\u00faen con su sitio web.<\/li><\/ol>
Ejemplo: En un mundo ideal, los usuarios leen el contenido con atenci\u00f3n, reflexionando antes de hacer clic en los enlaces. En la realidad, hojean en busca de algo en lo que puedan hacer clic, y a menudo pulsan el bot\u00f3n de retroceso si no es lo que buscan. Un contenido claro y bien espaciado ayuda a los usuarios a encontrar lo que necesitan, mientras que un texto desordenado provoca frustraci\u00f3n y mayores tasas de rebote.<\/h4>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-327.png\")
<\/figure>Supongamos que desea obtener m\u00e1s informaci\u00f3n sobre c\u00f3mo optimizar la experiencia de usuario de su sitio web mediante el interlineado. En ese caso, es recomendable que lea algunos materiales sobre legibilidad web y dise\u00f1o de la experiencia del usuario, tales como No me haga pensar<\/strong>un libro que proporciona muchos consejos \u00fatiles sobre dise\u00f1o.<\/p>
C\u00f3mo ajustar el interlineado en WordPress<\/h3>
Dependiendo de sus necesidades y preferencias, WordPress ofrece varias formas de ajustar el interlineado, desde editores integrados hasta codificaci\u00f3n personalizada y plugins. He aqu\u00ed los m\u00e9todos m\u00e1s comunes, cada uno con ejemplos para guiarle.<\/p>
1\u3001Ajustar el interlineado en el editor Gutenberg<\/h4>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/4-1-1024x481.jpg\")
<\/figure><\/div>El editor de bloques predeterminado de WordPress, Gutenberg, proporciona cierto control esencial sobre el interlineado. Si utiliza el editor Gutenberg, siga estos pasos para ajustar el interlineado:<\/p>
Pasos:<\/strong><\/p>
- Seleccione el p\u00e1rrafo<\/strong>: Abra la p\u00e1gina o entrada de WordPress que desee editar y haga clic en el bloque de p\u00e1rrafo que requiera un ajuste del espaciado.<\/li><\/ul>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-328-1024x433.png\")
<\/figure><\/div>- Buscar ajustes tipogr\u00e1ficos<\/strong>: En el panel de ajustes de la derecha, localice la opci\u00f3n \"Tipograf\u00eda<\/strong>secci\u00f3n \".<\/li>\n\n
- Ajustar la altura de la l\u00ednea<\/strong>: Bajo los ajustes de tipograf\u00eda, encontrar\u00e1 una opci\u00f3n para \"Altura de l\u00ednea\". Puede aumentar o disminuir el espaciado ajustando el valor num\u00e9rico o introduciendo un n\u00famero personalizado.<\/li><\/ul>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-342-1024x461.png\")
<\/figure>Ejemplo<\/strong>: Supongamos que tiene un bloque de texto demasiado espaciado, lo que dificulta su lectura. Si la altura de l\u00ednea por defecto es de 1,4, aumentarla a 1,8 o 2,0 proporcionar\u00e1 m\u00e1s espacio para respirar entre l\u00edneas, mejorando la legibilidad.<\/p>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-330-1024x393.png\")
<\/figure><\/div>Se trata de un m\u00e9todo sencillo para ajustar el interlineado de p\u00e1rrafos individuales o bloques de texto. Sin embargo, CSS personalizado<\/strong> puede ser m\u00e1s eficaz si requiere un control m\u00e1s preciso o necesita ajustar el espaciado en todo el sitio.<\/p>
2\u3001Ajustar el interlineado usando HTML personalizado en Gutenberg<\/h4>
Puede a\u00f1adir CSS en l\u00ednea<\/strong> en Gutenberg para un control m\u00e1s preciso sobre p\u00e1rrafos o elementos individuales.<\/p>
Pasos:<\/strong><\/p>
- Cambiar al modo C\u00f3digo<\/strong>: Seleccione el bloque que desea editar y haga clic en el men\u00fa de tres puntos de la barra de herramientas de bloques. Seleccione \"Editar como HTML<\/strong>\" para cambiar a la vista de c\u00f3digo.<\/li><\/ul>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-331.png\")
<\/figure><\/div>- A\u00f1adir c\u00f3digo de altura de l\u00ednea<\/strong>: Modifique el
<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-light-green-cyan-color"><p><\/mark><\/code> (o cualquier etiqueta HTML que utilice) a\u00f1adiendo una propiedad de altura de l\u00ednea. Por ejemplo:<\/li><\/ul><p style="line-height: 1.8em;">Se trata de un párrafo con interlineado aumentado.<\/p><\/code><\/pre>Ejemplo<\/strong>: Supongamos que su sitio web utiliza un tono formal y desea que cada p\u00e1rrafo de un art\u00edculo tenga un interlineado ligeramente m\u00e1s ancho para facilitar la lectura. Utilizando el m\u00e9todo anterior, puede fijar el interlineado de los p\u00e1rrafos individuales en 1,8 em, lo que facilita a los usuarios la digesti\u00f3n de trozos largos de texto.<\/p>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-332-1024x576.png\")
A\u00f1adir c\u00f3digo de altura de l\u00ednea<\/mark><\/strong><\/figcaption><\/figure> ![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-334-1024x234.png\")
<\/figure>Este bloque tiene un contenido inesperado o no v\u00e1lido. Seleccione Convertir en bloque cl\u00e1sico.<\/p>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-335-1024x254.png\")
<\/figure>![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-333-1024x349.png\")
<\/figure><\/div>Este m\u00e9todo ofrece flexibilidad, permiti\u00e9ndole ajustar con precisi\u00f3n la altura de l\u00ednea para bloques de texto o elementos espec\u00edficos.<\/p>
3\u3001Ajuste del interlineado en el editor cl\u00e1sico<\/h4>
Si sigue utilizando el editor cl\u00e1sico, WordPress le permite ajustar el interlineado tanto en el editor visual como en el c\u00f3digo HTML.<\/p>
- Uso del desplegable de formato<\/strong>:
- Resalte el p\u00e1rrafo que desee modificar.<\/li>\n\n
- En la barra de herramientas, busque un men\u00fa desplegable llamado \"Formato\". Dependiendo de su tema, puede haber alturas de l\u00ednea preestablecidas como 1,5, 2,0, etc.<\/li><\/ul><\/li><\/ul>
Ejemplo<\/strong>: Si su tema lo permite, puede configurar todo el cuerpo de su texto para que tenga una altura de l\u00ednea uniforme de 1,6 o 1,8. Esto es \u00fatil para blogs o contenidos de formato largo, ya que garantiza que cada art\u00edculo tenga un espaciado uniforme.<\/p>
- Uso del editor de texto (vista HTML)<\/strong>:
- Pulse el bot\u00f3n \"Texto<\/strong>\" en el Editor cl\u00e1sico para cambiar a la vista HTML.<\/li>\n\n
- A\u00f1ada CSS en l\u00ednea directamente al HTML del p\u00e1rrafo:<\/li><\/ul><\/li><\/ul>
<p style=" line-height: 1.7;">Este párrafo tendrá una altura de línea de 1,7.<\/p><\/code><\/pre>![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-336-1024x356.png\")
<\/figure><\/div>Ejemplo<\/strong>: Para quienes busquen un mayor control en secciones con p\u00e1rrafos largos o vi\u00f1etas, el ajuste manual del interlineado con HTML le permite personalizar partes concretas de su p\u00e1gina dejando intactos otros elementos.<\/p>
4\u3001Ajuste el interlineado a trav\u00e9s del personalizador de temas<\/h4>
Muchos temas de WordPress proporcionan controles de interlineado directamente a trav\u00e9s del personalizador de temas. Este m\u00e9todo es ideal para aplicar un interlineado coherente en todo su sitio sin modificar entradas o p\u00e1ginas individuales.<\/p>
Pasos:<\/strong><\/p>
- Abra el personalizador de temas<\/strong>: Desde el panel de control de WordPress, navegue hasta Apariencia<\/mark> > Personalice<\/mark><\/em>.<\/li><\/ul>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-337.png\")
<\/figure><\/div>- Buscar ajustes tipogr\u00e1ficos<\/strong>: Dependiendo de su tema, una secci\u00f3n estar\u00e1 etiquetada como \"Tipograf\u00eda<\/strong>\" o \"Estilos globales<\/strong>.\" En esta secci\u00f3n, busque una opci\u00f3n para ajustar la altura de la l\u00ednea.<\/li><\/ul>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/image-338.png\")
<\/figure><\/div>- Ajustar la altura de la l\u00ednea globalmente<\/strong>: Algunos temas ofrecen un control deslizante o un cuadro de entrada en el que puede fijar la altura de l\u00ednea de varios elementos de texto, como el cuerpo del texto, los encabezados e incluso las comillas de bloque.<\/li><\/ul>
Ejemplo<\/strong>: Supongamos que utiliza un tema como Astra o GeneratePress, que ofrece controles detallados de tipograf\u00eda. Establezca la altura de l\u00ednea global para el texto del cuerpo en 1,6 y aumente la altura de l\u00ednea para los encabezados a 1,2. Esto dar\u00eda a su sitio un dise\u00f1o equilibrado y legible, con un espaciado entre encabezados m\u00e1s ajustado y un espaciado entre el texto del cuerpo m\u00e1s relajado.<\/p>
![\"\"](\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/210a6dab2f4d0e99bf78f84cb692328-1024x479.jpg\")
<\/figure><\/div>
- Ajustar la altura de la l\u00ednea globalmente<\/strong>: Algunos temas ofrecen un control deslizante o un cuadro de entrada en el que puede fijar la altura de l\u00ednea de varios elementos de texto, como el cuerpo del texto, los encabezados e incluso las comillas de bloque.<\/li><\/ul>
- Buscar ajustes tipogr\u00e1ficos<\/strong>: Dependiendo de su tema, una secci\u00f3n estar\u00e1 etiquetada como \"Tipograf\u00eda<\/strong>\" o \"Estilos globales<\/strong>.\" En esta secci\u00f3n, busque una opci\u00f3n para ajustar la altura de la l\u00ednea.<\/li><\/ul>
- A\u00f1ada CSS en l\u00ednea directamente al HTML del p\u00e1rrafo:<\/li><\/ul><\/li><\/ul>
- Pulse el bot\u00f3n \"Texto<\/strong>\" en el Editor cl\u00e1sico para cambiar a la vista HTML.<\/li>\n\n
- Uso del editor de texto (vista HTML)<\/strong>:
- Uso del desplegable de formato<\/strong>:
- A\u00f1adir c\u00f3digo de altura de l\u00ednea<\/strong>: Modifique el
- Ajustar la altura de la l\u00ednea<\/strong>: Bajo los ajustes de tipograf\u00eda, encontrar\u00e1 una opci\u00f3n para \"Altura de l\u00ednea\". Puede aumentar o disminuir el espaciado ajustando el valor num\u00e9rico o introduciendo un n\u00famero personalizado.<\/li><\/ul>
- Buscar ajustes tipogr\u00e1ficos<\/strong>: En el panel de ajustes de la derecha, localice la opci\u00f3n \"Tipograf\u00eda<\/strong>secci\u00f3n \".<\/li>\n\n
- Mejor est\u00e9tica<\/strong>: Un sitio web bien espaciado parece m\u00e1s limpio y profesional. Por ejemplo, un blog con un espaciado adecuado entre l\u00edneas y secciones resulta m\u00e1s atractivo y organizado que unos bloques de texto desordenados y dif\u00edciles de leer.<\/li>\n\n