Cómo personalizar su sitio web de WordPress con CSS: 3 métodos sencillos

WordPress ha evolucionado a lo largo de los años, y hoy en día es una plataforma bastante flexible y fácil de personalizar a través de su editor de bloques, Gutenberg. Aún así, habrá ocasiones en las que necesite un poco más de alcance que el que proporciona el editor de Gutenberg.

Aquí es donde el CSS personalizado resulta útil. El estilo CSS le permite editar los colores, el espaciado, las fuentes, los diseños y, básicamente, cualquier otro elemento visual de su sitio web de WordPress, lo que le permite hacer que se vea exactamente como lo desea.

En este artículo, lo guiaremos a través de los conceptos básicos para personalizar su sitio web de WordPress con CSS.

¿Por qué personalizar su sitio web con CSS?

Agregar CSS personalizado es solo uno de los métodos que puede utilizar para ajustar la apariencia de su sitio. Otros métodos incluyen el uso de un tema premium de WordPress con muchas funcioneso instalando un creador de páginas.

Si bien estos dos métodos son un poco más fáciles de usar para principiantes y no requieren conocimientos de codificación, el uso de CSS personalizado es más ventajoso de dos maneras principales:

Costo cero

Los temas premium y los creadores de páginas de WordPress pueden ser útiles, pero tienen un costo: en dólares y centavos. Con el conocimiento de cómo escribir CSS personalizado, por otro lado, puede lograr los mismos efectos sin incurrir en gastos adicionales.

Hinchazón mínima

Los creadores de páginas y los temas bien presentados están diseñados para brindar a los usuarios más flexibilidad y una amplia gama de opciones para personalizar sus sitios web. Debido a esto, tienden a agregar hinchazón a los sitios web, lo que potencialmente los ralentiza.

Al escribir CSS personalizado, por otro lado, solo agregará las funciones necesarias, lo que generalmente dará como resultado sitios web más livianos y velocidades de carga más rápidas.

3 métodos sencillos para personalizar su sitio web de WordPress con CSS

Ojalá ya lo sepas cómo escribir CSS. Una vez que esté familiarizado con los conceptos básicos, puede usar cualquiera de los siguientes métodos para agregar CSS personalizado a su sitio web de WordPress:

Método 1: use el personalizador de WordPress

Con WordPress 4.7 o cualquier versión posterior, puede agregar CSS personalizado directamente desde el área de administración. Este es el método más sencillo y, dado que hay una vista previa en vivo disponible, puede ver cualquier cambio que realice en tiempo real.

También es el más recomendado, ya que todos los cambios que realizará se guardan dentro de WordPress. Esto significa que incluso si cambia o actualiza su tema, no perderá su CSS personalizado.

Estos son los pasos a seguir:

Paso 1: Navegar a Apariencia> Personalizar.

Esto abrirá el personalizador de temas de WordPress, que le muestra una vista previa en vivo de su sitio a la derecha, junto con algunas opciones de personalización a la izquierda. Desplácese hacia abajo hasta la parte inferior del panel izquierdo y encontrará un CSS adicional pestaña.

Paso 2: Clickea en el CSS adicional Pestaña.

Esto abrirá un pequeño cuadro en el panel izquierdo donde puede agregar su CSS personalizado. Puede escribir tantas líneas de código CSS como desee. Lo mejor de este editor es que valida tu código y te avisa si hay algún error.

Paso 3: Publique sus cambios.

Cualquier regla CSS válida que agregue aparecerá en el área de vista previa en vivo a la derecha. Para aplicar los cambios a su sitio, haga clic en el Publicar en la parte superior del panel izquierdo una vez que esté satisfecho. Si no desea que los cambios surtan efecto de inmediato, también puede programar la publicación para más adelante o guardar su trabajo como borrador.

Es importante tener en cuenta que cualquier cambio que realice con el personalizador está vinculado a su tema actual. Si alguna vez cambia a otro tema, los cambios se perderán a menos que copie su CSS personalizado y lo agregue al nuevo tema. Es una buena práctica guardar todo el CSS personalizado que agrega a un tema en un bloc de notas. De esa manera, puede simplemente copiar el código y pegarlo en la sección "CSS adicional" para un tema diferente.

Si eso le parece demasiado trabajo y prefiere una solución que le permita aplicar su CSS personalizado a cualquier tema de WordPress que utilice, el siguiente método es para usted.

Método 2. Usar un complemento

Los complementos de CSS personalizados almacenan su CSS personalizado por separado de su tema, lo que permite que sus cambios se apliquen independientemente del tema que utilice. Estos complementos también vienen con características adicionales como la finalización automática que pueden facilitar la adición de CSS.

El único inconveniente es que son software de terceros, lo que significa que potencialmente pueden ralentizar su sitio. Sin embargo, la mayoría de estos complementos son livianos, por lo que generalmente tienen poco impacto en el rendimiento de su sitio. Estos son algunos de los mejores complementos CSS personalizados que puede usar:

• CSS personalizado simple

CSS personalizado simple es uno de los complementos CSS personalizados más populares. Es liviano, fácil de usar y ofrece excelentes funciones. Configurarlo es fácil. Todo lo que necesita hacer es instalar y activar el complemento. Luego, navega hasta el Apariencia en el panel izquierdo de su panel de control.

Verá una nueva opción llamada CSS personalizado. Al hacer clic en él, se abrirá un editor donde puede agregar su CSS personalizado. Haga clic en el Actualizar CSS personalizado para guardar los cambios. Para ver los cambios, simplemente actualice su sitio web.

• CSS y JS personalizados sencillos

Si desea aún más funciones, el Complemento simple de CSS y JS personalizado es una gran opción. Además de agregar CSS, le permite agregar entradas de JavaScript.

• Héroe CSS

Si no desea escribir una sola línea de código, el Complemento CSS Hero es perfecto para ti. Este complemento ofrece un editor CSS visual con menús desplegables y campos de entrada que le permiten editar casi cualquier estilo CSS en su sitio sin tener que escribir ningún código.

Método 3. Editar el código sin formato

Los dos métodos que describimos anteriormente le permiten agregar CSS personalizado a su sitio sin la necesidad de tocar ninguno de los archivos de su tema. Pero, en algunos casos, es posible que desee editar el CSS de su tema o agregar directamente CSS personalizado al código de su tema.

Para hacer esto, deberá acceder a la hoja de estilo de su sitio web. Una forma sencilla de acceder a esta hoja de estilo es a través del Editor de temas en su panel de WordPress.

Sin embargo, antes de continuar, hay algunas medidas de seguridad que debe implementar. Primero, hacer una copia de seguridad de su sitio web. Al editar los archivos de su tema, es fácil cometer errores que potencialmente pueden bloquear su sitio.

Una copia de seguridad garantiza que tenga un sitio web funcional al que volver. Próximo, crear un tema hijo. Si realiza ediciones directas en su tema principal, los cambios se perderán cada vez que se actualice el tema.

Una vez que se hayan implementado estas medidas de seguridad, inicie sesión en su backend de WordPress. Ir a Apariencia> Editor de temas. Cuando haga clic en la opción del editor de temas, verá un cuadro emergente que le advierte que no debe realizar cambios directos en los archivos de su tema. Si sigue los pasos anteriores, estará listo.

Hacer clic entiendo para proceder.

Después de hacer clic, debería ver la hoja de estilo de su sitio de forma predeterminada. Si no es así, simplemente busque en el panel derecho y haga clic en style.css bajo la Hoja de estilo opción.

Desde aquí, puede realizar cambios directos en los archivos de su tema. Solo no olvides hacer clic Guardar y actualizar una vez que hayas terminado.

Tome el control de la apariencia de su sitio con CSS personalizado

Aprender a escribir CSS personalizado en WordPress puede llevar algo de tiempo para los principiantes, pero le dará un verdadero control sobre la apariencia de su sitio web. Y eso es sin costo y con un impacto mínimo en el rendimiento de su sitio.

Sin embargo, si prefiere no hacer ningún diseño manual, hay otras formas de hacer el trabajo, como mediante el uso de uno de los creadores de páginas principales para WordPress.

5 creadores de páginas de WordPress que pueden ayudarlo a crear sitios web increíbles

¿Quiere que su sitio de WordPress se vea increíble pero no puede pagar un desarrollador? En su lugar, pruebe estos creadores de páginas de WordPress.

Leer siguiente

Sobre el Autor