Como Personalizar tu Sitio WordPress sin Tener que Entender CSS

Vamos a mostrarte cómo puedes realizar importantes cambios visuales a tus sitios WordPress sin tener ninguna experiencia en CSS. Pero primero, tomemos un minuto para una pequeña apreciación de WordPress.

¿Recuerdas ésto? Así es como se veía WordPress cuando nos enamoramos primero de él. Once años después y aún seguimos enamorados de él (afortunadamente) ha cambiado tanto que apenas es reconocible.

De una simple plataforma de blogging al más popular sistema de gestión de contenidos del mundo, WordPress es ahora la base de cientos de miles de sitios web populares con un ejército de desarrolladores trabajando en la plataforma, y otro ejército de desarrolladores creando tantos temas y plugins para él, que venderlos es un trabajo de tiempo completo para muchas personas. Themeforest es probablemente la más famosa tienda de temas online, y presumen de casi 20,000 temas, de los cuales la gran mayoría son para WordPress. Para poner ello en perspectiva, ¡pudieras tener un sitio web diferente cada día durante 54 años!

Estarías demasiado presionado para encontrar un producto comparable, gratuito o de paga, que les sea sencillo para los que no sepan escribir código de ir de cero a un sitio web totalmente funcional.

En años recientes hemos visto que la personalización de WordPress se ha hecho aún más fácil, gracias a la creciente lista de creadores de páginas que ayudan a usuarios a armar sus propios diseños con sencillez. Combinar éstas poderosas herramientas de arquitectura con la creciente lista de plugins de seguridad, para compartir y para comentar, hace muy simple elaborar el sitio que siempre quisiste.

Todo lo mencionado arriba te ayudará a recorrer el 90% del camino, todo el contenido que necesitas, en una plataforma que confías, pareciendo casi perfecta gracias al arduo trabajo de los desarrolladores que elaboran grandes temas y plugins.

Pero aún con los mejores temas siempre querrás realizar pequeños cambios. Pequeñas ediciones visuales para hacer un tema tuyo, diferente de cualquier otro. Ya sea redondear esquinas o hacer bordes más gruesos o cambiar la sombra alrededor de un objeto, 

Todos los cambios mencionados se producen para personalizar  el CSS. Suficientemente fácil si eres diseñador o desarrollador, pero como tratar de entender el léxico si no lo eres.

Anteriormente realizar cambios en el CSS significaba el uso de herramientas diseñadas para desarrolladores, herramientas como Browser Inspectors para encontrar los relevantes selectores de CSS y manipularlos manualmente. Tenías entonces que copiar ese CSS como texto, pegarlo en un editor de texto y asegurarte que solo tuviera la información que necesitabas y no eligieras opciones de navegador como casillas de verificación o los nombres de hojas de estilo. Entonces o creabas un tema hijo para tu sitio de WordPress y lo copiabas ahí, o usabas las cajas CSS personalizadas que ahora vienen con tantos temas. Eso es un proceso muy largo. Con tantos pasos la probabilidad de cometer errores se incrementa y la resolución de problemas puede consumir mucho tiempo.

Introducir CSS Hero

Al igual que los creadores de páginas hicieron más fácil el cambio de la estructura de un sitio de WordPress, CSS Hero, hace posible la edición visual. Como un no-diseñador puedes ver una esquina y pensar "hazla redondeada, no puede ser tan dura", pero luego inspeccionas el código necesario para hacer ese cambio y es desalentador;

Usar CSS Hero se siente más como usar Photoshop o un producto similar. Reguladores deslizantes te permiten ajustar cosas como el padding, márgenes, la dureza de esquinas y tamaño de fuente, mientras las paletas de colores te permiten ajustar la apariencia predeterminada para coincidir mejor con el tema y estilo de tu marca.
Incluso diseñadores veteranos y gurús de CSS destacan la interfaz en tiempo real y amistosa al usuario. Solo hace las cosas mas suaves, más rápidas y más fáciles de ajustar.

¿Qué tan fácil? Tan fácil como instalar un plugin.

CSS Hero no viene con un extenso manual de instrucciones porque no lo necesitarás. Vamos a mostrarte como puedes personalizar tu sitio en un par de minutos.

Iniciar

Cada personalización inicia con el click de un botón azul con el ícono de un rayo. Ésto abre el menú de CSS Hero de personalizaciones en el frontend de tu sitio web, sin hacer modificaciones en el escritorio, realizar cambios y posteriormente salir para  ver como se aprecian. Observas los cambios "en vivo", mientras los realizas.

Lo que haces con el CSS queda a tu decisión, déjalo en manos de CSS Hero y funcionará a las mil maravillas sin ninguna acción extra necesaria. También puedes copiarlo en un tema hijo o en el panel de tu CSS personalizado. Tu CSS, tus reglas. ¡Vayamos directamente a la edición!

Hover, Target, Cambio

Para ésta demostración usaremos el tema Divi de Elegant Themes. Éste es uno de docenas de temas Hero-Ready (que significa que hemos agregado todos los selectores que necesitas para hacerlo funcionar correctamente de forma inmediata). Si no vas a usar un tema Hero-Ready, aún puedes agregar tus propias clases e ID's en tu CSS Hero, o usa Rocket Mode, pero lo abordaremos más adelante.

Con la excepción de agregar un par de páginas y una publicación de blog, hemos comenzado con Divi casi "como es". Queremos mostrarte lo que hace CSS Hero a un nuevo tema. Vamos a usar una publicación de blog como ejemplo porque quizá es por defecto, la parte más simple de Divi. Es la única sección donde no puedes usar el creador de página integrado, así que es aquí donde más querrás agregar tus toques personales.

Cambia el Diseño del Header.

Primero queremos cambiar ese header-está casi vacío-salvo por una línea delgada línea gris debajo. Vamos a usar CSS Hero para agregar una sombra paralela debajo y poner más interesante la página. CSS Hero viene con un conjunto de opciones para agregar diferentes tipos de sombras paralelas, que pueden ser modificadas para ayudarte a obtener el efecto deseado.

Posteriormente vamos a cambiar el color muy ligeramente para quitar el blanco. Puedes usar el selector de color integrado para hacer éstos cambios, o si vas a trabajar un esquema de color puedes ingresar los valores RGBA o HEX. Ambos son soportados y se ingresan fácilmente.

Después vamos a dirigirnos a la sección del cuerpo del blog, al dar click en ella para que CSS Hero pueda mostrarnos las opciones disponibles. Desde aquí vamos a cambiar el color de fondo a un gris más oscuro. Ahora nuestro header se destaca y una vez que hicimos los cambios adicionales, también afectan a nuestro contenido y  barra lateral.

Al cambiar el fondo del área interior a blanco realmente se aprecia mejor la página, pero el color diluye un poco en el extremo por ello le hemos dado un borde más oscuro de solo un pixel de grosor. Un pequeño ajuste al radio del borde le da a la sección una bonita curva y ajustando el padding genera un bonito borde interno alrededor del contenido.

Hemos cambiado las fuentes del título a Helvetica. Una de las más de 100 fuentes de Google mostradas en el menú desplegable de fuentes en CSS Hero, pero si quieres agregar una de las mas de 550 fuentes de Google es fácil de hacer.

Cambiar el tamaño de la imagen destacada

Por defecto, Divi agrega la imagen destacada de una publicación de blog debajo del título en todo lo ancho. Ésto ocupa mucho espacio en la pantalla visible al usuario sin hacer scroll y empuja el texto fuera de la vista. Hemos usado CSS Hero para cambiar el ancho a 50% y flotar la imagen a la derecha. Al establecer la nueva height (altura) de la imagen en auto, mantiene su relación de aspecto y la imagen se ve perfecta en todos los dispositivos. También hemos agregado un poco de padding a la imagen para que el texto no se ubique pegado a ella. Agregar esquinas ligeramente curveadas a la imagen usando el regulador de border radius en CSS Hero fue todo lo que necesitamos para hacer que ésta imagen se vea perfecta.

Otras acciones de edición usando CSS Hero incluyendo las mayúsculas en el texto de los metadatos, cambiar el color y el borde del botón 'dejar comentario' y estamos muy satisfechos como se ve la sección izquierda. Si comparamos como se veía antes, puedes ver que se ha efectuado una vasta mejoría en cuestión de minutos.

La Barra Lateral

Después nos dirigimos a la barra lateral que de nuevo, por defecto, es muy simple. Al utilizar las mismas técnicas usadas para editar nuestra sección izquierda, pudimos aplicar rápidamente un borde curveado y fondo oscuro que ayuda a ésta sección a distinguirse en la página. Cambiamos las fuentes del título para que coincida con nuestras personalizaciones actuales y les dimos un color pálido para ayudar a destacarlo en el fondo oscuro.

Cambiamos los colores de enlace para hacerlos más claros y los apuntamos específicamente para cuando el usuario  posiciona el cursor sobre ellos sobre ellos y establecimos un color diferente. Nos libramos del azul eléctrico estándar y lo sustituimos con uno que vaya más de acuerdo con el tema. Si quieres, podrías también establecer un color diferente para los enlaces active (activos) y enlaces que hubieran sido visited (visitados) en el pasado usando CSS Hero.

¿Qué acabamos de hacer?

A través de la utilidad de exportar de CSS Hero podemos ver lo que acabamos de crear en nuestro sitio, en el aspecto del código.

Ésto puede ser útil para los que quieren comenzar a entender CSS, también para desarrolladores que solo quieren exportar el código generado y copiar y pegar donde quieran.

El Inspector de CSS Hero

Puedes incluso usar nuestra nueva herramienta de inspector para escudriñar el CSS que has creado y familiarizarte con la manera en que fueron hechos esos cambios. Puedes usar el inspector para realizar pequeños cambios a tu CSS también, como ajustar el tamaño de la fuente, la curva o el grosor de un borde, o cualquier otro. Mientras más dominas CSS, más útil se convierte la herramienta de inspector.

En resumen, éstas personalizaciones tomaron solamente un poco más de cinco minutos. Cinco minutos para cambiar completamente casi cada elemento de la publicación de blog.

Hero Ready, Configuración  y Rocket Mode

Los temas de Hero ready son buenos para utilizarlos de inmediato como los discutimos anteriormente. La mayoría de los temas populares de WordPress están listos para funcionar con hero, incluyendo Generatepress, Enfold, el framework Genesis, Pagelines DMS, el plugin WooCommerce y LayersWP.

Éso significa que no es necesaria ninguna configuración, pero si es necesaria, también es fácil. Hay dos formas para hacerlo.

Rocket Mode

Una característica relativamente nueva y una que no detallamos mucho, Rocket mode, buscará automáticamente la hoja de estilos de tu tema para selectores válidos. Una vez encontrado, los agregará a CSS Hero y permite que tu tema no listo para hero, funcione extremadamente bien sin configuración extra. Si por cualquier razón tu tema muestra ser incompatible con Rocket Mode, puedes agregar tus selectores con la herramienta de configuración integrada.

Agregar clases e ID's a CSS Hero

Si conoces las clases e ID's que tu tema usa, puedes agregarlos manualmente a CSS Hero y apuntarlos como lo harías con cualquier otro elemento en un tema listo para hero. ¿Necesitas ayudar para encontrarlos? Prueba la herramienta de inspeccionar elemento en la mayoría de los navegadores o busca la hoja de estilos de tu tema con un punto (.)  o un hashtag (#) antes de él. Alternativamente, la mayoría de los temas vanguardistas incluirán documentación, ya se en el mismo tema o en su sitio web con los selectores relevantes que necesitas.

Creadores de Páginas, Plugins y CSS Hero

Mencionamos anteriormente sobre los beneficios estructurales de usar un creador de páginas par agilizar y facilitar el proceso de creación de páginas en WordPress. Pero aún querrás controlar como se observan, ¿no? Lo mismo puede decirse para plugins que elaboran formularios, agregan tablas, etc.
Esa es una de las razones que hemos observado más allá de solo temas cuando se elaboran con CSS Hero. Podrás usarlo inmediatamente, como se mostró cuando se edita la página del blog, con una serie de magníficos recursos de WordPress. Beaver Builder, un creador de páginas muy popular es totalmente compatible con CSS Hero, como lo es Visual Composer y Contact Form 7. Revisa para comprobar si los plugins que estás usando son compatibles aquí.

¡Así que terminamos! Sin saber CSS (o cualquier otro lenguaje de programación para la cuestión) pueden crear un sitio web WordPress totalmente adaptable y altamente personalizado. Si lo haces, o has creado algo usando CSS Hero, dejánoslo saber en los comentarios. ¡Nos encantará verlo!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!