Aprende a cambiar la disposición derecha e izquierda de la llamada a la acción y la ilustración que aparecen en la parte superior de la home en el T Theme.
El T Theme de AsiThemes tiene una página principal muy atractiva formada por secciones útiles bien diferenciadas. Por ejemplo, la zona superior muestra un texto seguido de CTA (call to action) a la izquierda y una ilustración a la derecha.
¿Qué ocurre si, por motivos de diseño o mensaje, prefieres que la ilustración se sitúe a la izquierda? Pues nada grave. 😉
![Banner cabecera T Theme invertido](https://codigogenesis.com/genesis/2018/09/Banner-cabecera-T-Theme-invertido.jpg)
Para conseguirlo solo tienes que seguir las instrucciones de este tutorial, realizar unas pequeñas alteraciones en el fichero front-page.php y ajustar los estilos de CSS.
¿Vamos a ello?
Instrucciones para invertir el banner superior del T Theme
1. Modifica el fichero front-page.php
Si deseas obtener el mismo resultado que ves en la imagen superior, sustituye este código dentro del fichero front-page.php:
Para ver este código y los otros 2045 snippets de esta web,
identifícate o suscríbete aquí.
Con este paso, cambias el orden en el que se cargan los elementos del primer banner.
2. Edita el fichero style.css
Ahora debes ajustar los estilos de CSS para que se muestren de forma correcta. Para ello, en la línea 1905 de style.css sustituye:
Para ver este código y los otros 2045 snippets de esta web,
identifícate o suscríbete aquí.
¡Ya lo tienes!
Con estas modificaciones inviertes los selectores .left-wraper y .right-wraper para aplicar los estilos adecuados a la imagen y CTA en su nueva posición.
Conclusiones
¿Quieres jugar con la localización de los elementos en la sección superior de T Theme? Derecha o izquierda: con estos snippets, tú eliges.
Si te interesa saber cómo mover alguna otra sección en una plantilla concreta de AsiThemes, dímelo en los comentarios y haré lo posible por preparar un tutorial a medida.
Ventajas de ser suscriptor. 😉