27 octubre 2020
En este episodio hablamos sobre CSS Hero, el plugin con el que podrás modificar la apariencia de tu sitio web sin escribir ni una sóla linea de código.

El patrocinador

Este episodio está patrocinado por LucusHost, el proveedor de hosting especializado que se adapta a cualquier necesidad, desde planes de alojamiento compartido, planes multidominio, servidores dedicados, registro de dominios, certificados de seguridad, etc.

LucusHost, el mejor hosting

Modificar el código

Hay muchos usuarios de WordPress a los que les da auténtico pánico modificar el código de WordPress, ya sea la programación, los hooks o incluso el CSS.

A la hora de ponerte manos a la obra para modificar un sitio web hecho con WordPress, lo primero que tienes que tener claro es qué quieres modificar: funciones o aspecto?

Si tu respuesta es el aspecto de tu sitio, casi con toda probabilidad necesitarás modificar la hoja de estilos de la web, que está programada en lenguaje CSS.

Aunque cuando te pones a ello te das cuenta de que modificar el CSS no es algo demasiado dificultoso, lo cierto es que sí puede resultar más complicado saber qué parte o etiqueta es la que tienes que tocar para que el aspecto se modifique justo en ese lugar.

CSS Hero

Para todos los que tienen ese miedo, incertidumbre o falta de tiempo para cambiar el código CSS de un sitio web, en este episodio os quiero hablar sobre CSS Hero.

¿Qué es?

Se trata de un plugin que se instala, como cualquier otro, dentro tu sitio web hecho con WordPress. Tras la activación, necesitas activar la licencia para que funcione.

Este plugin te habilitará un editor visual de estilos en cualquier página o post de tu sitio web, de tal manera que puedas cambiar fácilmente lo que necesites con un par de clics.

¿Cómo funciona CSS Hero?

A grandes rasgos, CSS Hero hace un duplicado de la hoja estilos de tu sitio web y la habilita para que puedas modificarla a tu gusto, reescribiendo el código por ti.

Una vez que instalas y activas la licencia, aparecerá un nuevo enlace en la Toolbar que pone “Customize with CSS Hero“.

Al pulsar este enlace desde cualquier página o post de tu sitio, se te habilitará un editor visual en la parte de la izquierda de la pantalla, similar al personalizador nativo de WordPress.

Ahora, lo único que tendrás que hacer es seleccionar el elemento que quieres modificar y cambiar los valores en el personalizador de la izquierda.

A medida que vayas haciendo cambios, CSS Hero irá guardándolos de forma automática, pero no los publicará hasta que no pulses un botón que hay en la parte de abajo del personalizador.

¿Qué puedes modificar con CSS Hero?

A través de la infertaz de usuario de CSS Hero, podrás modificar el fondo, la tipografía, los bordes, el espaciado, márgenes, visibilidad, sombras, efectos de transformación… y algunas otras opciones específicas que aparecerán puntualmente.

Incluso puedes modificar la apariencia de la página de inicio de sesión de WordPress.

Además, con Hero CSS tienes la posibilidad de elegir snippets de código ya prefabricados, únicamente para insertar e incluso tiene conexión con la biblioteca de Unsplash para insertar imágenes libres de derechos.

Apariencia en otros dispositivos

CSS Hero te da la posibilidad de ir alternando entre la vista en escritorio, tablet y teléfono móvil y realizar una personalización para cada tamaño de pantalla.

Además, existe la posibilidad de administrar las Media Query y establecer los pixeles mínimos de cada tamaño.

Elegir selector desde listado

También existe la posibilidad de elegir distintos selectores de un listado que se despliega del menú superior o incluso crear tus propios selectores.

Deshacer cambios

CSS Hero también guarda un listado de modificaciones, de tal forma que en cualquier momento puedas volver a una situación anterior, sin que tengan efecto todos los cambios que hayas hecho posteriormente.

Noticias WordPress

Lanzado WordPress 5.1 

Hoja de ruta de WordPress 5.2

Vulnerabilidad de WooCommerce <=3.5.4

Plugin recomendado

Herramienta Recomendada

Esta semana te recomiendo Pinetools, una herramienta online y gratuita con la que podrás listar los códigos hexadecimales de los distintos colores que tenga una imagen. Sólo súbela desde tu ordenador y, por arte de magia, verás el listado de colores y códigos en la pantalla.

Juanma Aranda

Ayudo a usuarios noveles a dar sus primeros pasos con WordPress mediante mentorías individuales.
También creo vídeotutoriales en español para desarrolladores de WordPress que quieren mejorar su servicio de ayuda a clientes.

Ver todos los artículos

Comentar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información adicional sobre protección de datos:
Responsable: Juan M. Aranda
Finalidad: Moderar los comentarios de este sitio web.
Cesión: NO se cederán a nadie, salvo obligación legal.
Derechos: acceso, rectificación, cancelación y borrado de tus datos.
Legitimación: tu consentimiento expreso.

 

Cupón Descuento

Hasta 65% Dto
No necesitas cupón
css hero

CSS Hero -65%

Modifica el aspecto y estilo de tu web sin saber programar CSS utilizando este plugin para WordPress.
Ir a la promoción
WP Rocket - WordPress Caching Plugin

Cursos Flash GRATIS

cursos wordpress gratis

Únete a nosotros

error: Contenido protegido
porta. ut Phasellus dolor pulvinar venenatis accumsan facilisis adipiscing ipsum luctus nunc

Te espero en YouTube

para seguir aprendiendo más WordPress