Suscríbete
Ofertas

#Podcast 114. CSS Hero

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 CSSCSS Lenguaje de hojas de estilo utilizado para definir la apariencia visual y el formato de los documentos HTML. En WordPress, se almacena en el archivo style.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 pluginPlugin Complemento que se añade a la instalación de WordPress para dotarla de más funciones. Existe un repositorio oficial con miles de completos disponibles para instalar. 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

Recipe Blocks

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.

 

Deja una respuesta

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

Información básica sobre protección de datos

El responsable del proceso es Juanma Aranda | Tus datos serán tratados para gestionar y moderar tus comentarios | La legitimación del tratamiento es por consentimiento del interesado | No se transferirá ningún dato a terceros, salvo obligación legal | Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.

 

in velit, elit. sed lectus venenatis, amet, facilisis vulputate, dolor ipsum Vuelve al inicio

WordPress en Directo

wplive-logo

Actualidad, entrevistas, comunidad, eventos…

Cada semana emitimos un nuevo programa en abierto a través de nuestro Canal de YouTube.

X