Cómo personalizar mi blog con 6 simples trucos de CSS

Seguro que en algún momento de tu vida emprendedora te has preguntado: ¿Cómo personalizar mi blog sin arruinarme en el intento?

Su aspecto no representa tu marca, y te encuentras en un callejón sin salida.

No te preocupes, porque aquí tienes 6 trucos profesionales de CSS que te sacarán de más de un apuro.

¡Y a diseñar!

No necesitas dominar el pincel y la escuadra

El HTML te da alergia y el resto de «nombrajos» que lo acompañan te provocan urticaria.

Piensas que es imposible lograr un diseño memorable, o al menos algo llamativo, y que tu blog siempre quedará en el olvido entre los cientos de diseños aburridos que no sirven para nada.

Si este es tu caso, quiero que sepas que tu problema aún tiene solución.

¿Es posible personalizar mi blog a mi gusto?

¡Efectiviwonder!

Define tu propio blogstyle

Para editar de forma segura cualquier theme en WordPress podemos recurrir a 3 opciones distintas según la plantilla que estemos utilizando.

Recuerda realizar una copia de seguridad antes de hacer cambios

Opción 1: Cómo personalizar mi blog desde opciones del tema

Gran parte de los temas para WordPress ya vienen con una sección por defecto que permite personalizar las opciones de la plantilla a través de CSS propio.

Tan solo has de acceder a APARIENCIA y buscar dentro del submenú, la opción que normalmente se conoce como OPCIONES DEL TEMA.

En ella, te encontrarás con la cajita CUSTOM CSS que te permite introducir código sin problemas.

En algunos casos no encontrarás esta opción, y sin embargo podrás ir a APARIENCIA > EDITOR y allí seleccionar la hoja de estilos para hacer las modificaciones oportunas.

Opción 2: Utilizar plugins custom CSS

Si en tu plantilla no encuentras la opción anterior, recuerda que el plugin de Jetpack viene con una función para editar la CSS una vez conectado a tu cuenta de WordPress.com.

No obstante, también existen otros plugins, como Simple Custom CSS, que te permiten realizar personalizaciones sin necesidad de tocar nada de tu plantilla y correr riesgo de sufrir catástrofes naturales provocadas.

Opción 3: Creación de un child theme para los más aventureros

Si ya posees algunas nociones básicas de diseño y piensas realizar grandes cambios en el blog, siempre tienes la opción de crear un child theme en el que a través de unas líneas de código puedas tunear el aspecto de tu site.

Desde hace ya unas versiones, WordPress permite llevar a cabo estas tareas desde sus propias plantillas estándar.

No obstante, el proceso es bastante más complicado, e incluso puede retardar bastante más la velocidad de carga de la web si no sabes lo que haces.

6 trucos alucinantes de diseño amateur

Venga, no te arrugues, que ahora viene lo bueno.

Echa un ojo a estos truquillos, y verás lo fácil que es tunear un poco tu blog.

#1 Cambiar el color de fondo

Pregunta: ¿Cómo personalizar mi blog modificando el color de fondo?

Este cambio es sencillo, y puede ayudarnos a ofrecer una imagen más corporativa que siga el estilo de nuestra imagen de marca.

Partimos de un theme de WordPress con fondo gris y transformamos su fondo al color azul.

Para ello, debemos de añadir lo siguiente en nuestra caja de customización:

body {
background-color: #5AC9EC;
}

Si prefieres optar por un color diferente tan solo has de cambiar la cifra que aparece tras la #.

Puedes revisar todos los tonos desde el HTML Color Picker.

#2 Poner una imagen de fondo

Pregunta: ¿Cómo personalizar mi blog añadiendo una imagen de fondo?

Esta opción puede recargar un poquito el blog, repercutiendo en su velocidad. No obstante, si deseas implementar alguna fotografía en particular de fondo, esta es la mejor opción.

Súbela al apartado MEDIOS de tu WordPress y copia la URL a partir del dominio de tu blog.

Supongamos por ejemplo que el nuestro es www.blogdeprueba.com. En ese caso solo necesitaremos copiar el resto de la dirección que sería wp-content/uploads/imagen.jpg

Una vez conocemos la URL de nuestra foto, procedemos a escribir el siguiente código:

body {
  background: url(URL de la imagen) no-repeat center center fixed;
  background-size: cover;
}

 

#3 Mejora la visibilidad de tu texto

Pregunta: ¿Cómo personalizar mi blog aumentando el contraste de mi letra?

Muchas veces nos encontramos ante webs con combinaciones tipográficas muy mejorables, o párrafos en gris o de difícil lectura.

La solución a esto es sencilla.

El parámetro font size permite aumentar o disminuir el tamaño de tu fuente, mientras que line height hace referencia al espacio que queda entre líneas.

Puedes probar con el código que aquí te presento e ir tú mismo testando la mejor posibilidad:

body {
  font-size: 16px;
  line-height: 1.8;
}

#4 Cambiar el color de los links

Pregunta: ¿Cómo personalizar mi blog cambiando el color de los enlaces?

Por defecto, cualquier web viene con los links en color azul, un aspecto que puede resultar bastante impersonal.

Ahora, tan sólo has de modificar su tono con este código que te pongo más abajo, y luego no te queda más que definir el color que más te guste a través de la paleta HTML que te explicaba anteriormente.

a {
color: #D80000;
}

 

#5 Personalizar el color de los widgets

Pregunta: ¿Cómo personalizar mi blog cambiando el color de los widgets?

El color de fondo de los widgets suele ser en la mayoría de ocasiones bastante aburrido.

Imagina que tu cabecera por ejemplo es de color azul y deseas que el diseño general gire en torno a ese estilo.

Para ello, no tienes más que añadir:

.widget {
  background-color: #BDF4FF;
}

 

#6 Cambiar el estilo de los títulos

Pregunta: ¿Cómo personalizar mi blog cambiando el estilo de los títulos?

Al igual que ocurre con el caso anterior, existen plantillas en las que los títulos resultan nada llamativos o poseen un color que ni fú ni fá.

Aquí he optado por cambiarlos a mayúsculas y ponerlos en negrita para un mejor contraste.

.entry-title {
  text-transform: uppercase;
  font-weight: bold;
}

Si te resulta demasiado complejo hacerlo o crees que no tienes tiempo suficiente para dedicar a aprender y conseguir un resultado profesional, date una vuelta por mi servicio de diseño web con WordPress y consigue un blogstyle diferente.

De todas formas…  ¡con estos 6 trucos podrás empezar a personalizar tu blog y convertirte en un crack de la blogosfera!

¿Qué te parece el efecto final? ¿Has visto cómo personalizar mi blog solo me ha llevado unos minutos? Ahora es tu turno.

Descubre lo que
necesitas ahora
para vender más

Realiza el Quiz ahora y conocerás el resultado al instante

¿Quieres saber qué herramientas uso en mi negocio, cuáles recomiendo a mis clientes y cuál necesitas tú ahora mismo, en el momento actual en el que te encuentras, para vender más o mejor en tu negocio digital?

Realiza ahora mismo el quiz tecnológico que he preparado, para determinar tu fase actual, y decirte en el instante en que deberías enfocarte ahora mismo para vender más o de la mejor forma posible

Mockup escritorio herramientas
Ir arriba