logo websastre disenadora web wordpress

Do not remove – Anchor for back to top button

Consejo WordPress: cómo modificar CSS fácilmente

Descubre cómo cambiar el aspecto de elementos de tu página WordPress usando CSS de manera fácil.
 

Divulgación de afiliados: Algunos de los enlaces de esta entrada son enlaces de afiliados. Esto significa que si pulsas en el enlace y haces una compra, recibiré una comisión sin ningún coste para ti. ¡Gracias por tu soporte! 

WordPress nos lo ha puesto muy fácil para poder crear páginas web sin conocimiento de código ni programación. Pero en momentos puntuales necesitamos modificar el aspecto de algún elemento en concreto y sólo lo conseguiremos cambiar a nivel de CSS.
Este post lo escribo sobre todo para aquellas personas que se hayan aventurado a crear sus propias páginas web/blog y necesiten hacer pequeños cambios a nivel de CSS, de una forma sencilla y fácil.
CSS es el lenguaje que se usa a nivel de diseño visual en las páginas web, es donde se especifica cómo vamos a ver los elementos en el navegador. CSS son las siglas en inglés de “Cascading Style Sheets”, una posible traducción sería “hojas de estilo en cascada”. Cascada quiere decir que hay importancia en el orden, de todos los estilos que hay en una página web, unos caen encima de otros. “Como el agua de una cascada”, al final unos predominan y son los que veremos, y los otros van a quedar ocultos “bajo el agua de la cascada” .

En este post, voy a explicarte cómo podemos modificar algunos elementos de nuestra página, que vienen definidos en el Tema que hemos elegido o plugins, o en caso de usar Elementor / Elementor Pro y no ser posible editar lo que quieres.

¿Dónde podemos añadir CSS en WordPress?
Hay dos opciones que no voy a explicar, pero te las cuento por si te pueden interesar. Una es modificar CSS a través de Plugins y otra modificando el archivo de CSS en caso de tener un Tema hijo.
Aquí te digo el porqué:

Y las dos opciones que sí detallaré son las siguientes:
css adicional wordpress
css adicional wordpress

Dependiendo del Tema que estés usando, las opciones que vas a ver aquí pueden variar, pero al final deberías ver la opción CSS adicional. Es aquí donde podremos escribir nuestro CSS.

añadir css elementor pro

No tienes porqué escribir el código CSS en el mismo elemento, si lo escribes en otro también funcionará. Esto ya dependerá de cada uno cómo quiere tenerlo organizado. A mí me parece práctico tener, por ejemplo, todo el CSS en la sección principal, así sabes dónde está todo si necesitas modificar algo. En Elementor Pro puedes añadir CSS a todos los elementos, desde secciones, columnas, títulos, textos, imágenes, iconos, etc.. Entonces tienes que tener cuidado de poner el código en un sitio que te sea fácil de encontrar, y sobre todo tener cuidado de no eliminarlo.

añadir css elementor pro

En mis páginas siempre uso Elementor Pro (si me contratas para realizar la tuya, Elementor Pro está incluido en el precio), para mí es una de las mejores inversiones a hacer. Tengo pendiente escribir un post hablando de lo positivo que resulta este plugin y de lo muy rentable que supone la inversión. Ya te avanzo que reduce mucho la cantidad de plugins necesarios, agiliza la edición y diseño del Header y del Footer, puedes crear Popups y mucho más.

Ahora sabemos dónde, pero ¿cómo lo hacemos?
En CSS se pueden modificar elementos directamente usando h1, h2, p, div…etc… Pero esto es demasiado genérico y tenemos que poner «etiquetas» (o usar las existentes) para cambiar sólo los elementos que queremos y no todos. Los selectores para poder especificar son la clase y el id.

Esta es la jerarquía poniendo de ejemplo un elemento h1, de menos a más fuerza:

h1 <.clase < h1.clase < #id < h1#id < h1#id.clase

El último nos va a ser de utilidad para poder evitar el uso de !important, ya que no vamos a cambiar el archivo de CSS. Ésta es una manera de poder superar la fuerza del id. Te pongo un ejemplo sencillo, porqué así será más fácil entenderlo. He usado la herramienta de w3schools muy útil si quieres practicar tu CSS:

Código HTML y CSS:
ejemplo código css classes id antes
Resultado:
ejemplo código html css classes id resultado antes

En este ejemplo hay dos h1 y un h2 que comparten la clase. La clase tiene más fuerza que el h1, por eso el primero es verde y los dos siguientes son rojos. Y el id tiene más fuerza que la clase, por eso el último es naranja. Y los tres que comparten clase aparecen subrayados.
Ahora haremos el mismo ejercicio pero sin poder añadir o cambiar las clases o id, le cambiaremos el color al Soy un título h2.
Este será el caso cuando queramos cambiar el aspecto de elementos con clases e id existentes. 

Código HTML y CSS:
ejemplocódigo css classes id resultado después
Resultado:
ejemplo código html css classes id resultado después

Así hemos podido sobreescribir el estilo de la clase sólo en el h2 sin afectar a los otros, de esta manera estamos diciendo al navegador que este es más especifico y tiene más fuerza.
El texto HTML en WordPress es bastante más complejo, vamos a ver ahora ejemplos prácticos de como podemos cambiar el aspecto de un elemento en nuestra página.  

guia_paso_a_paso_

Ejemplo para bloquear el tamaño de las areas de texto en los formularios de contacto.

Si no usas Elementor Pro, tendrás que usar un Plugin extra para crear un formulario de contacto. En este caso no vamos a añadir ninguna clase ni id, vamos a inspeccionar nuestra página para encontrar el selector que necesitamos escribir en nuestro código CSS. Yo uso tanto Google Chrome como Firefox, en ambos casos se puede acceder a inspeccionar la página pulsando la tecla F12. Pero para inspeccionar un elemento en concreto, tenemos que pulsar botón derecho encima de este. Entonces puedes ahorrarte F12 y directamente pulsar bóton derecho y seleccionar inspeccionar.

clic boton derecho inspeccionar google chrome

Código HTML:

clic boton derecho inspeccionar google chrome html

Ahora que sabemos el id y las clases que tiene el elemento que queremos cambiar, vamos a nuestra página, como he explicado al inicio del post Escritorio > Apariencia > Personalizar > CSS adicional

escritorio wordpress personalizar css adicional textarea

Nota: en este caso podemos usar sólo textarea y también funcionará, pero si especificamos sólo afectará a este en concreto y no a todas las textarea de toda la página. Puede pasar que no haga falta usar textarea delante, sólo con el id sea suficiente, pero si necesitamos un grado más de fuerza, ésta es la manera de especificar.

También puede pasar que aunque hayamos especificado no veamos cambios, y aunque no es aconsejable, antes del punto y coma, podemos añadir !important. Esto hace que lo que acabamos de escribir sea lo más importante. No es muy recomendable abusar del uso de !important, si lo podemos evitar mejor, pero tampoco es un crimen en caso de que sea necesario.

escritorio wordpress personalizar css adicional textarea important
guia_paso_a_paso_

Ejemplo para bloquear el tamaño de las areas de texto en los formularios de contacto usando Elementor Pro

En Elementor Pro los formularios de contacto se pueden añadir directamente arrastrando desde la paleta de elementos. Luego es muy sencillo de editar y ver el resultado al momento. La opción de bloquear el área de texto, yo no la he encontrado. Entonces busco la alternativa CSS que me permita hacerlo.

elementor pro formulario contacto crear formulario

Así es el aspecto del formulario de contacto dentro de Elementor Pro, lo arrastramos a nuestra página y ya lo podemos editar.

En el caso de querer bloquear el tamaño de la textarea, lo podemos hacer asignando un id a este elemento en la pestaña avanzado dentro de la edición de contenido del formulario.

elementor pro formulario contacto id
elementor pro formulario contacto ocultar panel

Luego ocultamos el panel de edición para poder inspeccionar la página y saber exactamente qué tenemos que escribir en el texto CSS.

Es un truco muy práctico, ya que si no ocultamos el panel no podemos inspeccionar la página, o tendríamos que actualizar y abrirla en otro navegador para inspeccionarla. 

Entonces pulsamos botón derecho encima del elemento y lo inspeccionamos. Aquí encontraremos el id que tenemos que usar en el apartado de CSS:
elementor pro formulario contacto inspección elemento
elementor pro formulario contacto id css

En este caso he decidido poner el código CSS en el elemento de formulario de contacto. Sólo ha bastado con añadir el id y poner el siguiente código. Veremos el resultado al momento.

Si no sabes el código CSS que se tiene que usar, una página muy útil para consultar es:
https://www.w3schools.com/css/
Aquí encontrarás muchos ejemplos y además, como te he comentado al inicio del post, tienen la opción de poder practicar allí y ver el resultado.

Si te has quedado estancad@ y necesitas ayuda con tu página web WordPress, contrata bolsas de horas y te ayudaré en lo que necesites:

Compartir:
Share on facebook
Share on twitter
Share on pinterest
Share on linkedin
Share on email
Directamente en tu correo

Suscríbete a Web Sastre para recibir nuevas entradas, ofertas, novedades y conseguir la Guía iniciación Elementor Pro Gratis!

 

Loading

Utilizo cookies propias y de terceros para que navegues perfectamente por mi web. Si sigues utilizando este sitio asumiré que estás de acuerdo. Si quieres más info, visita mi política de cookies en el siguiente enlace: