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
CAMBIAR COLORE TEMA WORDPRESS CON CSS HERO
- 0.- Vídeo funcionamiento del Plugin CSS HERO
- 1.- Plugin CSS HERO para modificar diseño de header, footer y páginas de una web wordpress
- 2.- Instalación del plugin CSS HERO
- 3.- Cómo cambiar colores, tamaños y otros en tu plantilla wordpress con CSS HERO
- 4.- Seleccionar elemento de la plantilla wordpress a editar y modificar diseño
- 5.- Cómo eliminar una modificación de diseño creada y volver al diseño original
- 6.- Modificar colores en hover, actived y visited CSS en plantilla wordpress
0.- Vídeo funcionamiento del Plugin CSS HERO
QUIERO CSS HERO
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.
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.
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.
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.
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.
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
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
