Seleccionar página

Seguramente, si estás leyendo este post estarás intentando realizar algún cambio de diseño en tu página web realizada con wordpress (cambios de color de fondo, tamaño o color de fuentes, colores hover, etc.) y no podrás hacerlo porque tu plantilla o tema no tiene opciones para realizar ese cambio de color, tamaño u otro que estás buscando.

En este post te voy a explicar como puedes realizar cambios de color, tamaños de fuentes y otros relacionados con el diseño de tu web aunque tu tema o plantilla no tenga opciones para eso. Además, muy fácil, no tienes que saber código CSS

Podrás hacer cambios de colores, tamaños, etc. en el header de la web, footer y en el contenido de cada página.

NO tendrás que saber de código CSS, ya que utilizaremos un plugin que nos permitirá cambiar el diseño de la plantilla wordpress que estemos utilizando sin necesidad de introducir ningún tipo de código.

El plugin no solo nos permitirá cambiar el color o el tamaño de los elementos, sino que nos permitirá añadir bordes, sombras, movimientos, transformaciones, márgenes, padding y casi cualquier cosa que puedas imaginar y que esté dentro del catálogo de posibilidades del código css.

En realidad será el plugin el que añadirá el código necesario por ti. Tu solo tendrás que indicarle el cambio de diseño que quieres hacer.

IR AL PLUGIN CSS HERO

 

 

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES


VER CURSOS

 

 

 

 

0.- Vídeo funcionamiento del Plugin CSS HERO

 

QUIERO CSS HERO

 

1.- Plugin CSS HERO para modificar diseño de header, footer y páginas de una web wordpress 

 

El plugin que vamos a utilizar para modificar el diseño de nuestro tema wordpress sin saber CSS,  se llama CSS HERO y es un plugin de pago. Pero, muy económico.

El plan Starter, que es el más económico te sale por solo 19$, que son unos 15 € aprox.

QUIERO CSS HERO

 

Te explico los diferentes planes:

👉 Plan Starter / CSS HERO: Precio de 29$. Con el descuento actual: 19$. Licencia para 1 solo sitio web + 1 año de soporte y actualizaciones.

👉 Plan Personal / CSS HERO: Precio de 59$. Con el descuento actual: 39$. Licencia para 5 sitios web + 1 año de soporte y actualizaciones.

👉 Plan PRO / CSS HERO: Precio de 199$. Con el descuento actual: 69$. Licencia para 999 sitios web + 1 año de soporte y actualizaciones.

👉 Plan Lifetime PRO / CSS HERO: Precio de 599$. Con el descuento actual: 179$. Licencia para 999 sitios web + soporte y actualizaciones de POR VIDA + soporte prioritario.

QUIERO CSS HERO

 

 

2.- Instalación del plugin CSS HERO

 

Una vez hayas adquirido el plugin deberás descargarlo y ponerlo en el escritorio de tu ordenador (sin descomprimir).

A continuación, desde la administración de wordpress debes ir a: “Plugins > añadir nuevo”.

Después, haz clic en el botón: “Subir plugin” situado en la parte superior de la pantalla.

Haz clic en seleccionar archivo y selecciona el plugin que has descargado y dejado en el escritorio de tu ordenador.

A continuación, haz clic en “instalar ahora”. Después, “activa” el plugin.

Si quieres ver los pasos de cómo instalar un plugin en WordPress de una manera más detallada con un vídeo sigue el siguiente enlace: Cómo instalar plugin WordPress

 

 

3.- Cómo cambiar colores, tamaños y otros en tu plantilla wordpress con CSS HERO

 

En el menú superior de tu panel de administración de wordpress, pon el cursor sobre el nombre de tu tienda, verás que te aparece un enlace con el nombre “visitar el sitio”. Haz clic sobre el enlace y navega hasta la página que quieras modificar.

 

buscar pagina donde modificar tema wordpress

 

Una vez estés en la página, haz clic en el menú superior, en el enlace: “customize with CSS Hero” para lanzar la herramienta en dicha página.

 

modificar diseño plantilla css personalizar con CSS HERO

 

Nota: CSS Hero también se puede lanzar yendo a páginas o entradas, y haciendo clic en el enlace “customize with CSS Hero” correspondiente a la página o entrada sobre la que quieras realizar el cambio.

 

 

4.- Seleccionar elemento de la plantilla wordpress a editar y modificar diseño

 

Ahora, ve moviendo el cursor del ratón por toda la pantalla y verás como está formada por diferentes elementos.

Haz clic (con el botón izquierdo del ratón) sobre el elemento cuyo diseño quieres cambiar.

Después de hacer clic, en la parte izquierda te aparecerá un menú con las opciones de diseño (propiedades) que puedes modificar sobre ese elemento que has seleccionado.

 

seleccionar parte de la plantilla wordpress a modificar diseño

propiedades css y valores css modificar plantilla wordpress

 

Las propiedades se agrupan en tres pestañas diferentes: Properties, snippets y Animations. Las propiedades más usadas son las que hay dentro de la pestaña Properties.

Las propiedades u opciones de diseño más habituales a modificar son las de “Properties > background” para realizar modificaciones en el color de fondo y “Properties > Typography” para modificar tamaños y colores de fuentes.

Pero, verás que hay muchas otras opciones como: “Properties > borders” (bordes), “Properties > border radius” (curvatura esquinas), etc.

Una vez hayas elegido la propiedad que quieres modificar, realiza el cambio del valor de dicha propiedad y verás dicha modificación reflejada en la previsualización (parte derecha de la pantalla).

Pero, ese cambio aún no es permanente. Para que ese cambio quede guardado, habrás de ir al menú lateral izquierdo, a la parte inferior y hacer clic en el botón: “SAVE & PUBLISH”.

En el menú lateral izquierdo, en la parte inferior verás también que aparecen los códigos css que se están aplicando (lo hace automáticamente el plugin) para realizar las modificaciones de diseño que estás estableciendo.

QUIERO CSS HERO

 

 

5.- Cómo eliminar una modificación de diseño creada y volver al diseño original

 

Una vez hemos guardado una modificación en una propiedad de un determinado elemento, verás que aparece un número a la derecha de la pestaña en la que hayas realizado el cambio.

Por ejemplo, si realizamos una modificación en “Properties > Background > color” verás que a la derecha de la pestaña “properties” te aparece un “1”. Eso quiere decir, que hay una modificación de una propiedad dentro de la pestaña properties.

 

modificaciones hechas en la plantilla o tema wordpress

 

Si hacemos clic en “1” se nos mostrará solo esa propiedad. Ahí, podremos establecer el valor original directamente o hacer clic en los “tres puntos” y después en “reset”. Finalmente, tendremos que guardar los cambios en “SAVE & PUBLISH”

Lógicamente, si en vez de un “1” nos aparece un “3” significa que se han modificado tres propiedades. Si hacemos clic sobre el “3” nos aparecerán esas tres propiedades y el valor correspondiente a cada una de ellas.

Nota: otra opción sería borrar el código que aparece en la ventana “Code Editor” pero esto sería solo para aquellos que se manejan con el código CSS.

 

 

6.- Modificar colores en hover, actived y visited CSS en plantilla wordpress

 

Seguramente te estarás preguntando si el plugin CSS Hero permite cambiar colores de elementos cuando se ponen el ratón sobre ellos. Es decir, en posición “hover”.

Claro, que sí.

El plugin CSS Hero es muy completo y te permite realizar modificaciones de propiedades css en estados hover, actived y visited.

¿cómo?

Simplemente, tendrás que hacer clic en el botón “STATE” situado en la parte superior del menú lateral izquierdo.

 

cambiar color hover plantilla wordpress

 

Al hacer clic verás que te apare un desplegable con las opciones: None, hover, Actived y Visited. No siempre te saldrán todas estas opciones. Eso va a depender de la naturaleza del elemento cuyo diseño quieras modificar.

Selecciona la que quieras y cuando realices la modificación, vuelve a seleccionar “NONE” para volver al estado normal.

QUIERO CSS HERO

 

Compártelo ya!!
Curso gratis de wordpress y divi

▷LLÉVATE EL CURSO WORDPRESS Y DIVI GRATIS

Aprende a crear una página web con Wordpress y Divi

22 vídeos gratis

Consentimiento

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.

Abrir chat
¿Dudas sobre mis cursos o servicios?
🙋🏻‍♂️** ¿Alguna duda sobre mis cursos o servicios? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com