Con la versión 6.2 de la plantilla se introdujo el Theme Builder de Avada. Una herramienta que nos permite construir nuevos layouts para nuestra plantilla Avada.

Es posible que con los ajustes generales de Avada o con la infinidad de posibilidades que te ofrece el constructor visual y sus elementos de diseño y de estructura, se te quede algo corto la personalización de esta plantilla de WordPress. Posible sí, aunque muy improbable.

Aún así, los desarrolladores de Avada han decidido añadir una nueva herramienta que, una vez más, multiplica las opciones de personalización de esta plantilla. Esta es el Theme Builder.

Ejemplo de nuevo layout para proyectos individuales de portfolio hecho con el Theme Buildera

He de decir que si estás empezando con la plantilla Avada o aún te estás haciendo a ella, es casi mejor que olvides por el momento esta parte del diseñador de layouts. Los posibilidades que ofrece son casi infinitas pero seguramente no lo necesites, a no ser que necesites más opciones de personalización de lo que ya te ofrece Avada de por sí.

Qué hace el Theme Builder de Avada

Todas las páginas, entradas individuales de blog y de portfolio, archivos de blog y de portfolio, etc. tienen un layout, una estructura de diseño.

Con esta herramienta podemos crear y modificar layouts (o partes de ellos) para ajustarlos al diseño que buscamos.

Panel de Theme Builder de Avada

Para acceder al Avada Theme Builder debemos ir al menú Fusion Builder > Theme Builder.

Layouts y layouts sections

Para entender mejor la estructura de diseño de cualquier página de Avada debemos imaginarnos los layouts como un gran contenedor de todo. Dentro de este layout estarían los 4 layout sections (secciones de layout) que son el header, page title bar, content y footer.

  • Layout
    • Header. Cabecera (este layout section por ahora no puede modificarse)
    • Page title bar. Barra de título
    • Content. El contenido como tal
    • Footer. Pie de página

Crear nuevos layouts con el Theme Builder

Cuando entramos al Theme Builder vemos que ya existe un Global Layout. Aquí nos permite modificar sus secciones de layout para el layout global, con lo que modificaríamos el diseño de la cabecera, barra de título, contenido o pie de página de forma global (en todo el sitio web).

Sin embargo, también tenemos la posibilidad de crear nuestros propios layouts. Solo tenemos que ponerle un nombre y pulsar en Create New Layout (crear nuevo layout).

Crear nuevo layout para entradas individuales

En mi caso he creado uno de ejemplo para las entradas individuales del blog.

Layout conditions

Una vez hemos creado un nuevo layout, debemos decirle a qué tipo de post (páginas, entradas, etc.) se aplicará. Esto lo hacemos con las layout conditions.

Añadir condicional al nuevo layout

Solo tenemos que pasar el ratón por la parte de abajo (o en la rueda dentada) de nuestro nuevo layout que hemos creado para que se habra el panel con las layout conditions.

Panel de las layout conditions

En este panel aplicamos las condiciones para decidir dónde queremos que se incluya y dónde no nuestro nuevo layout. Tenemos 3 columnas.

  • En la primera columna tenemos los tipos de post que podemos elegir (páginas, entradas idividuales, portfolio individual, página 404, archivo de blog…). Entradas en mi caso.
  • En la segunda columna tenemos las opciones para incluir y excluir dependiendo del tipo de post que hayamos elegido en la primera columna. En mi caso he incluido todas las entradas pero he excluido una entrada en concreto (la de Hello World).
  • Ya en la tercera columna tenemos de un vistazo todos los condicionales que hemos incluido y excluido.

Secciones de layout (layout secctions)

Una vez tenemos las condiciones en las que se aplicará nuestro nuevo layout podemos crearle una nueva sección de layout.

Ten en cuenta que si no creas una layout section se le aplicará la global. Por lo que podemos crearle un nuevo layout de contenido por ejemplo, y el resto de layout sections serán globales (cabecera, barra de título y pie de página).

Crear una sección de layout en Theme Builder

Para crear una nueva sección de layout solo tenemos que darle al + para escribir el nombre y darle a crear nueva sección. Podríamos seleccionar algún layout section que ya tuviéramos creado anteriormente, pero no es el caso.

Crear nuevo layout section

En este ejemplo he creado una nueva sección de layout de contenido. Sin embargo esta sección de layout de contenido está vacía, tendremos que añadirle una estructura y contenido. ¡Vamos a ello!

Editar una sección de layout

Solo tenemos que pasar por encima el ratón de dicha sección y pulsar en el bolígrafo para editar la sección. Se nos abrirá en una nueva ventana del navegador. Le damos a Fusion Builder para editarlo con el constructor visual en el backend. Puedes usar también el Fusion Builder Live si lo prefieres.

Para construir el layout lo haremos de forma similar a construir páginas con el Fusion Builder. Primeramente añadiremos al menos un contenedor y una columna para poder, a continuación, añadir elementos.

Layout Section Elements

Aquí tenemos una particularidad, nos encontramos con los Layout Section Elements, al menos en la sección de layouts de contenido.

Los layout section elements son elementos específicos de la sección de layout de contenido. El resto no tiene, al menos hasta el momento. Recuerda que la herramienta del Theme Builder está recién llegada.

Los elementos de la sección de layout de contenido son archives (blog, portfolio…), author, comments, content, detalles del proyecto, featured image slider, pagination y related posts. Cada uno de ellos tiene sus propias opciones de configuración, al igual que sucede con el resto de elementos del Fusion Builder.

Ejemplo de nuevo layout para entradas individuales

Para redactar este artículo he estado probando con un nuevo layout que he creado. Se me ha ocurrido que sería buena idea cambiar el diseño de las entradas del blog.

Para ello te resumo los pasos que he seguido hasta ahora:

  • he creado un nuevo layout llamado Entradas individuales;
  • le he asignado unos condicionales, que se incluya en todas las entradas y que se excluya de la entrada «Hello world»;
  • he creado nuevas secciones de layout para la barra de título, el contenido y el pie de página, para la cabecera no está disponible aún;
  • la sección de barra de título NO la he editado para dejarla vacía, por lo tanto no se mostrará barra de título;
  • y finalmente he editado las secciones de layout de contenido y la de pie de página, te lo cuento a continuación por encima.

Diseñando secciones de layout para las entradas del blog con el Theme Builder

Para ambas secciones de layout, las de contenido y pie de página, he entrado para crear un nuevo diseño.

Sección de layout de contenido de las entradas

Aquí tienes una captura del ejemplo de sección de layout de contenido que he construido para las entradas individuales.

Sección layout de contenido para las entradas individuales

El primer contenedor, de ancho 100%, no contiene elementos en su interior. Simplemente en las opciones del propio contenedor le he dicho que tenga una padding arriba y abajo de 200 px y le he puesto una imagen de fondo. Esta imagen de fondo es un contenido dinánico de la imagen destacada. En cada entrada del blog, cogerá su imagen destacada.

En el segundo contenedor he añadido 3 columnas, las de los laterales de 1/6 vacías y la central de 1/3 con todo el contenido. A la columna central le he dado un fondo blanco y le he puesto un margen negativo (-50 px) para que quede un poco encima de la imagen destacada.

Los elementos que he añadido a esta columna central son:

  • Title. Elemento de título cambiando algún estilo y el contenido es dinámico para que muestre el título de la entrada
  • Separador con línea de puntos
  • Content. Es un elemento de sección de layout. Coge el contenido de la entrada.
  • Sharing box. Cuadro para compartir en redes sociales al que he cambiado algunos estilos
  • Related posts. Otro layout section element que incluye algunas entradas relacionadas.
  • Comments. También un elemento de esta sección de layout con incluye los comentarios

Sección del layout del pie de página

También he editado la sección del layout del pie de página para las entradas individuales. Como verás un solo contenedor y una columna. En el contenedor he añadido una imagen de fondo.

Sección de layout de pie de página para las entradas

Estos son los elementos que he añadido para que te sirva de ejemplo:

  • Section separator, que hace la separación en forma de triángulo;
  • Separator, para dejar algo de espacio;
  • Image, con el logo en blanco de nuestro negocio;
  • Separator, para dejar un espacio una vez más;
  • Social links, con los iconos que enlazan a nuestras redes sociales.

El resultado de estos cambios se vería así. (puedes ampliar la imagen).

Resultado con el nuevo layout para entradas con el Theme Builder

Antes y después de las entradas con el nuevo layout

En esta imagen puedes ver el antes y el después de crear el nuevo layout con sus nuevas layout sections. Puedes ampliarla pinchando en la imagen.

Ejemplo de las entradas de blog antes y después de crear un nuevo layout

A la izquierda vemos una entrada de blog cualquiera. A la derecha es la misma entrada de blog después de crear el nuevo layout con el Theme Builder. Con colores he querido separar lo que correspondería a cada sección de layout.

Como conclusión

En cuanto te haces un poco con ella es de lo más sencillo y podemos personalizar cada una de las partes de nuestro sitio web.

El Theme Builder acaba de llegar a Avada pero me parece una herramienta con infinitas posibilidades. En los detalles a los que no llegamos con los ajustes del tema, ahora tenemos muchas más posibilidades. Y esto solo acaba de comenzar, en la siguiente actualización incluirán la sección de layout para la cabecera, y en otras seguirán añadiendo nuevas funciones. ¡Habrá que estar al tanto!