Cómo personalizar al máximo tu Orbital Theme (GUÍA)

Orbital Theme es una plantilla que ha sido muy bien acogida por bloggers y SEOs hispanos, y es muuuuy utilizada en webs de nicho. A mí personalmente me encanta, y es junto a Generate Press y Astra mi plantilla favorita a la hora de crear nuevos proyectos.

Como en todo lo que hace Romuald Fons hay polémica, encontrarás tanto devotos absolutos que defiende a muerte esta plantilla como críticos hater a los que les parece una auténtica basura.  Leyendo a estos últimos, me he dado cuenta que los principales peros que le sacan a esta plantilla están principalmente relacionados con el diseño. Sus principales críticas son:

#1 Todos los nichos de Orbital se ven iguales

Sí y no.  Tienen parte de razón, y si buscas en las serps, encontrarás muchas páginas con Orbital, sin logo y con el footer blanco y pobre que canta tantísimo. Pero esto no es culpa de la plantilla. A los SEOS no les gusta perder ni un segundo en hacerlo bonito, y eso hace que el principal fuerte de este theme (viene listo para usar) origine también su principal crítica.

#2 No dispone casi de opciones

Aquí directamente no estoy de acuerdo. Puede que los que estéis acostumbrados a comprar plantillas de 70€ en themeforest echéis de menos un menú interno con 10.000 opciones, de esas que luego acabas volviéndote loco para recordar como cambiaste aquel detalle. Luego sin embargo, esas mismas plantillas son las que no permiten ni poner el aviso de cookies, y necesitas instalarte como mínimo 3 plugins para cumplir con las funciones más básicas.

Como he dicho, creo que las opciones de Orbital, aunque escasas, dan en el clavo y son las que en otras plantillas echo de menos. Recordemos que con Orbital te ahorras el plugin de cookies, el de insertar los anuncios de adsense, y además tiene opciones para mejorar el rendimiento como el render blocking. Y los clusters joder, que harán que no tengas que pasar por editores visuales pesados como Visual Composer o Elementor.

? Diseña una página de inicio diferente

Otra de las “pegas” que dicen que tiene Orbital es que su página de inicio es muy reconocible. Y ciertamente, es verdad que existen pocas opciones para personalizar los posts que aparecen si seleccionamos la opción de mostrar los últimos posts en la página de inicio.

No obstante, esto también tiene solución si tienes un poco de imaginación y un dominio básico de html y css. Te damos algunas ideas.

– Crea una página y selecciónala como portada

Si queremos sacarle todo el jugo a nuestra página de inicio, lo ideal será que creemos una página para esa misión. Más adelante explicaremos cómo hacerla bonita, pero de momento tendremos que ir a ponerla como portada desde el menú apariencia / personalizar / ajustes de la página de inicio.

– Personaliza la cabecera

Vamos a utilizar como ejemplo esta misma web. Con unos sencillos cambios, vamos a darle un cambio de look a nuestra plantilla.

Cambiando el color de fondo de la cabecera

Este es un tip que sirve para todas las páginas. Si quieres cambiar el color de fondo de la cabecera de los posts y páginas, simplemente añade este código a tu css adicional:

.default-header {
width: 100%;
padding: 2rem 0;
padding-bottom: 40px!important;
background: #FDF9F3;
}

Jugando con el tamaño de letra 

Un efecto que me gusta utilizar en mis blogs es el de, en la página de inicio, sobre ampliar el tamaño de letra para que funcione parecido a los sliders que solemos ver en muchas páginas. El propósito es que la cabecera ocupe gran parte (o toda) la pantalla de un ordenador portátil, atrayendo toda la atención del usuario a nuestro H1 o eslogan de nuestra web.

Para ampliar la letra del título vamos a utilizar las llamadas unidades rem. ¿Qué es una unidad rem?

Las unidades de medida em sirven para ampliar o reducir un tamaño en proporción al tamaño actual. En un principio, si queríamos que el tamaño de letra de la web fuese 16 píxeles, simplemente añadiríamos esto en el código css:

font-size:16px;

Pero, como en este caso queremos hacer una excepción, vamos a decirle a nuestra web que queremos que el titular de la home tenga un tamaño 5,7 veces más grande que el habitual. Así. el código quedaría de la siguiente manera.

.default-header .title {
position: relative;
font-weight: 400;
font-size: 5.7rem;
margin-top: 0;
margin-bottom: 0;
text-align: left;
letter-spacing: -1px;
padding-top: 3%;
padding-bottom: 3%;
}

Para resolver el primer problema vamos a utilizar las media queries, un recurso que explico más a fondo en este post. Ya tendrás tiempo de leerlo, pero de momento, te recomiendo que simplemente utilices este código en su lugar.

@media (min-width: 1281px) {
.default-header .title {
position: relative;
font-weight: 400;
font-size: 5.7rem;
margin-top: 0;
margin-bottom: 0;
text-align: left;
letter-spacing: -1px;
padding-top: 3%;
padding-bottom: 3%;
}
}

Para resolver el segundo problema, yo utilizo un plugin que se llama Post/Page specific custom CSS. Éste nos permitirá añadir código css en cada página o entrada. En nuestro caso, nos interesará añadir el código anterior en la página de inicio.

– Añade un subtítulo descriptivo

La opción de Orbital de añadir subtítulos me parece muy interesante. Si queremos cambiar el diseño de los subtítulos, tenemos que editar la clase llamada subtitle. Os dejo el código de como lo tengo yo, pero te animo a editar el css para que quede a tu gusto.

.default-header .subtitle {

font-weight: 400;
margin-bottom: 0;
margin-top: 1rem;
color: rgba(0,0,0,0.75);
line-height: 1.5;
text-align: center;
}

? Jugando con los colores

Por defecto, el menú de Orbital nos permite únicamente personalizar el color  de los textos principales (enlaces y menú) así los fondos del menú y el general. No obstante, añadiendo un poco de css podremos personalizar a nuestro gusto casi todo lo que imaginemos.

De acuerdo. Entonces ¿Cómo le sacamos partido a los colores en Orbital Theme?

Cambiando el color de fondo del encabezado

Un buen ejemplo es el de cambiar el color de la sección de encabezado. Para ello añadiremos este código a nuestra plantilla desde el menú apariencia / personalizar / css adicional.

Sustituiremos “#FDF9F3” por el código del color del que queramos nuestro encabezado. Además, hemos añadido algo de espacio de padding para que el diseño se vea más consistente. El width al 100% significa que el fondo debe llegar hasta el ancho máximo de la pantalla.

.default-header {
width: 100%;
padding: 2rem 0;
padding-bottom: 40px!important;
background: #FDF9F3;
}

Cambiando el color de fondo de Orbital

Aunque el menú tiene la opción de cambiar el color de fondo, nos encontraremos con que solo nos cambiará parte de este, dejando en blanco la sección del contenido de páginas y posts. Para cambiar el fondo completamente, tendremos que añadir el siguiente código a nuestro css adicional:

#content-wrapper {
padding: 1rem;
background-color: #eff9ff;
}

Sustituiremos “#eff9ff” por el código del color del que queramos nuestro encabezado.

Retocando el color del footer

Si hemos editado el color de fondo de la plantilla, será muy recomendable retocar también el footer para que quede un color uniforme. Para ello, de nuevo tendremos que añadir css adicional a nuestra plantilla, tanto en la parte de los widgets como en el propio footer.

Elegiremos un color, y pegaremos este código en el apartado de css adicional:

? Retocando clusters a nuestro gusto

? Personalizando posts y páginas

– Imágenes atractivas y con estilo

Las imágenes son súper importantes para que tu blog marque la diferencia. Unas imágenes de calidad y bien escogidas pueden convertir un blog  descuidado en uno de apariencia profesional. Pero como no siempre podemos elegir la imagen que queramos, también podemos tirar de maquetación web para conseguir que nuestras imágenes sean un poco más originales.

– Recursos de diseño para mantener al lector atento

– Tips de diseño de encabezados y párrafos

– Diseño de botones, links y otros elementos

➡️ Sacando partido a la barra lateral

Aunque los sidebar o barras laterales están en desuso debido al predominio del tráfico móvil, es posible que te interese utilizarlas en tu página web. Todavía quedan sectores en los que la mayor parte del tráfico es de PC, como por ejemplo blogs relacionados con la programación, las películas online, o algunos nichos especializados.

Encontrarás las opciones de barra lateral de Orbital en dos partes: tanto en el menú de apariencia / personalizar como a nivel de cada post o página, justo debajo de la caja de texto. Especialmente interesante es la opción de dejar la barra lateral fija o sticky, muy interesante para conseguir la máxima visibilidad de lo que allí pongamos.

Añadir el índice de contenidos en la barra lateral

??‍♀️ Tip: una cosa que me gusta bastante es aprovechar la barra lateral para poner el índice de contenidos. Crea un efecto muy guay y es muy útil para el lector, especialmente en los artículos largos.

Para hacer esto necesitaremos implementar el plugin de easy table of contents, ya que es el único que conocemos que viene con la opción de añadirlo en el sidebar. Además, le vamos a dar un poco de diseño en css, pero como es un proceso largo, hemos creado este post en el que lo explicamos paso a paso.

¿Tienes alguna duda con tu Orbital? Hemos creado un grupo de Telegram para ayudarnos con esos pequeños ajustes de diseño que soléis preguntar en comentarios. Te esperamos!
Accede al grupo