Cómo utilizar el generador de diseño de columnas, encabezados y pies de página de Avada

Nuestro propio creador de páginas, Avada Builder, ahora está disponible en dos interfaces: Avada Builder, que es nuestro creador de páginas de estructura alámbrica back-end, y Avada Live, que es nuestro creador front-end, que se introdujo recientemente con Avada 6.0. .

Utilizando nuestro sencillo sistema de contenedores, columnas y elementos, ambas versiones de Avada Builder le permiten diseñar fácilmente hermosos diseños de página para su sitio web. Avada Builder es una herramienta fantástica tanto para los diseñadores web modernos como para los propietarios de sitios, ya que les brinda control total sobre todos los aspectos del contenido y el diseño de la página. Ambas versiones de Avada Builder también generan el mismo código. Son completamente intercambiables, lo que le permite tener lo mejor de ambos mundos con Avada Builder, que está disponible actualmente.

La página Creador de diseños es donde encontrará todos sus diseños y cualquier diseño condicional que desee crear además del diseño global creado de forma predeterminada. También se encuentra aquí el área donde asigna secciones de diseño a sus diseños y especifica las condiciones para que sus diseños condicionales entren en vigor.

Se puede acceder al Layout Builder desde el Panel de control de Avada seleccionando Diseños > Layout Builder en el menú desplegable. Una de las formas más sencillas de describir los diseños es decir que son contenedores que albergan las cuatro secciones de diseño de una página: la sección de encabezado, la sección de la barra de título de la página, la sección de contenido y la sección de pie de página. Puede obtener más información sobre las diferencias entre las secciones de diseño y los diseños leyendo este documento: Comprensión de los diseños y las secciones de diseño (PDF). Continúe leyendo para obtener más información sobre las cosas que puede hacer en esta página.

Hay dos partes ubicadas en la parte superior de la página del Creador de diseño. En la primera sección se describe una técnica para completar las secciones de diseño en el diseño global o generar diseños condicionales (pista: puede cerrarla con la X), y en el lado derecho de la pantalla hay un área desde la cual puede crear directamente nuevos diseños (ver más abajo). Escriba un nombre para su nuevo diseño y luego haga clic en Crear nuevo diseño para completar el proceso. Se crea un diseño en blanco cuando se utiliza este método; no se especifican secciones de diseño ni condiciones.

A medida que crea diseños, se importan automáticamente a la página Creador de diseños. Puede cambiar el nombre de un diseño haciendo clic en el botón Cambiar nombre en la parte superior de la página. También puede hacer clic en el icono de engranaje para establecer las condiciones para el diseño, y puede eliminar un diseño haciendo clic en el icono de la papelera en la parte superior de la página. También puede ver y asignar criterios haciendo clic en la parte inferior de todos los diseños, excepto el diseño global.

Dentro de cada Diseño, puede ver las cuatro Secciones de Diseño asignadas a un Diseño en particular, una para cada uno de los cuatro diseños. En cada Sección de Diseño, verá un ícono +, que le permitirá asignar una Sección de Diseño a esa sección del Diseño cuando mueva el mouse sobre ella. Tiene la opción de asignar una sección de diseño existente a esta sección o crear una sección nueva desde cero.

Usando el diseño de la sección

Como parte de Avada Layouts, ahora puede crear pies de página totalmente personalizables para su sitio web, aprovechando toda la capacidad creativa de Avada Builder para lograrlo.

Un diseño de pie de página es una sección de diseño agregada a un diseño. Por amp , un pie de página personalizado requiere una sección de diseño de pie de página, que se puede agregar al diseño global o personalizado. Veremos la construcción de una sección de diseño de pie de página personalizado en la siguiente sección, pero primero, veamos la introducción de Avada Layouts.

En la barra lateral de WordPress o en el Panel de Avada, seleccione Avada > Diseños. Los diseños y las secciones de diseño de Avada se crean y administran aquí. Como se muestra a continuación, el diseño global está inicialmente vacío, sin secciones de diseño asociadas.

Personalizar un diseño

Esta sección se puede agregar al Diseño global o al Diseño condicional y solo se muestra en ciertos tipos de publicaciones personalizadas o páginas individuales. El diseño global ya está presente, pero primero debemos desarrollar un diseño condicional.

En la página Diseños, agregue un nombre y haga clic en Crear nuevo diseño, como se muestra a continuación.

Cree una sección de diseño de pie de página si desea agregarla a un diseño existente o al diseño global.

En la pantalla Generador de secciones de diseño, seleccione el tipo de sección de diseño, ingrese un nombre (en este amp , pie de página, posiblemente pie de página global) y haga clic en Crear nueva sección de diseño, como se muestra a continuación.

La siguiente imagen muestra cómo generar una Sección de Diseño directamente desde el Diseño. Las secciones de diseño de su sitio deben agregarse a un diseño. Inicialmente, simplemente hay un diseño global. Entonces, para crear un pie de página personalizado global, agréguelo a este diseño. Sección de diseño de pie de página personalizado, luego agregue condiciones a la sección Diseño de pie de página personalizado para que el diseño aparezca de acuerdo con los criterios.

No tiene nada de malo, pero es vital considerar la situación. Si el Diseño está actualmente activo (es decir, tiene condiciones o es el Diseño Global), cualquier Secciones de Diseño nuevas estarán activas inmediatamente y vacías. Tiene más sentido agregar primero un pie de página personalizado a un diseño global a través de la página Generador de secciones de diseño y luego agregarlo al diseño global.

Alternativamente, podríamos agregar una sección de diseño de pie de página, encabezado o columna a un diseño condicional y luego crearlo. Las condiciones no se utilizan hasta que se agregan condiciones. Como se ilustra a continuación, podemos modificar la sección de diseño del pie de página colocando el cursor sobre ella y haciendo clic en el icono de edición.

Edición de diseño personalizado

El editor de WordPress predeterminado aparece al editar una nueva sección de diseño; puedes usar Avada Builder o Avada Live desde aquí. Aquí se crean secciones de diseño personalizado. Para obtener información adicional, consulte Creación de contenido de sección de diseño, pero en resumen, puede crear cualquier cosa aquí.

Su pie de página personalizado puede contener cualquier cosa que pueda crear en Avada Builder. Podrás tener numerosas columnas, fotografías, etc.; Esto permite una inmensa flexibilidad. La sección Diseño es donde aparecerá el material del pie de página. El material proviene del Constructor y tu creatividad es la única limitación.

Vea el pie de página original creado para la demostración de Taxi a continuación; Esto se hizo cambiando las opciones del tema y los widgets del pie de página.

La versión de escritorio de este encabezado personalizado se muestra aquí, pero para comprender correctamente el alcance de este encabezado personalizado, debe visitar el sitio en vivo, al que puede acceder aquí.

Diseño de diseño condicional

Sin condiciones en un diseño global. Agregarle secciones de diseño se usará en todas las páginas porque es global. Si solo necesita un pie de página personalizado en algunas páginas de su sitio, como artículos de blog individuales, deberá utilizar un diseño condicional.

Un diseño condicional solo puede contener secciones de diseño existentes. Luego, en la pestaña Seleccionar pie de página del Diseño, desplácese hasta Existente, donde puede agregar la Sección de Diseño, como se ve a continuación.

Debe establecer las condiciones para cualquier diseño condicional. El Diseño se activa tan pronto como se especifican las condiciones; por lo tanto, si hace esto antes de establecer la Sección de Diseño, las páginas que coincidan con las condiciones estarán vacías.

Para agregar una condición, seleccione Agregar una condición en el menú inferior del diseño. Aparece un cuadro de diálogo, como se muestra a continuación. Para obtener más información sobre los diseños condicionales, consulte Comprensión de los diseños condicionales, pero para este amp , seleccionaríamos Todas las publicaciones en la pestaña Condiciones de las publicaciones, como se ve a continuación.

Agregar columnas desde el constructor Avada Layout

El elemento columna, al igual que el elemento contenedor, es un componente estructural esencial al diseñar un sitio Avada.

Agregar columnas es relativamente fácil con el constructor Avada Layout.

  • Haga clic en el botón ' + Contenedor ' para agregar un Contenedor a la página. Al insertar un contenedor, se le pedirá que seleccione una columna o un diseño de columna. Puede crear un contenedor vacío, pero normalmente agrega columnas en este paso.
  • Para agregar nuevas columnas a un contenedor existente, coloque el cursor sobre el contenedor y haga clic en el botón ' + Columna '. Para agregar una nueva columna, haga clic aquí.
  • En la esquina superior izquierda de una columna, haga clic en el icono "Cambiar tamaño de columna". Ahora tendrá el mismo tamaño que su columna. Por ejemplo amp una columna de 1/4 aparecerá como '1/4 ' bajo la opción Cambiar tamaño de columna.
  • Arrastre y suelte columnas para reorganizarlas. También puedes arrastrar y soltar columnas en Contenedores.

Una columna sólo se puede colocar dentro de un elemento contenedor con el mismo ancho; Este suele ser el ancho del sitio que usted establece para el sitio. Por lo tanto, si establece el ancho del sitio en 1200 px, una columna de 1/2 tendrá 600 px de ancho. Los tamaños de columna preestablecidos se muestran a continuación cuando se agregan a una página.

En Avada, puede configurar el ancho de las columnas (y más) por separado en diseños grandes, medianos y pequeños. Cómo establecer el orden de visualización y el tamaño de las columnas en diseños responsivos explica cómo usar esta nueva y excelente característica con columnas.

Los anchos personalizados se encuentran en Columnas > Diseño > Ancho . Como se muestra a continuación, utilizar un número de porcentaje le permite especificar un ancho personalizado. Por tanto, el posicionamiento no tiene restricciones.

Auto es una nueva opción de ancho. En lugar de un ancho fijo, la Columna ocupará el espacio del Elemento más significativo dentro de ella. Entonces solo funciona en algunos casos. Puede cambiar la columna principal a Automática y la columna cambiará de tamaño al ancho del elemento.

Avada también agrega conjuntos de opciones receptivas para contenedores y columnas. En la parte posterior del Constructor, puede ver los íconos responsivos en cualquier columna, como se ve en la imagen a continuación. El Front-End Builder muestra los íconos responsivos en las opciones.

Solo los nuevos contenedores Flex muestran conjuntos de opciones receptivos. Las columnas de los contenedores heredados no están disponibles.

Conclusión

Gracias a Avada Layouts, la capacidad de crear un pie de página personalizado, un encabezado y agregar columnas es ahora una realidad y una opción casi ilimitada. No solo puede utilizar el poder de Avada Builder para construir prácticamente cualquier pie de página o encabezado que pueda imaginar, sino que también puede aprovechar el poder de los diseños condicionales para mostrarlos u ocultarlos en cualquier página, categoría, tipo de publicación personalizada o cualquier combinación de criterios que se te ocurran al utilizar Avada Builder.

Cuando se trata de diseños de WordPress, Avada Layouts cambia las reglas del juego en el sentido más literal. El hecho de que permita tal libertad de diseño y flexibilidad de implementación significa que el proceso de creación de pies de página nunca volverá a ser el mismo.

Hanson F.

Publicaciones recientes

Cómo usar encabezados y pies de página con Elementor

Los encabezados y pies de página de un sitio web son elementos esenciales. En la mayoría de los casos, el encabezado proporciona navegación...

6 de enero de 2022

Comparación de temas de WordPress: Astra vs OceanWP

Dos de los temas de WordPress más populares del mercado son Astra y OceanWP. Profesional…

2 de enero de 2022

Comparación de temas de noticias de WordPress: Periódico vs. Astra

Crear un excelente sitio web de noticias no requiere que te conviertas en diseñador web. Nosotros…

25 de octubre de 2021

Cree un sitio web relacionado con noticias con Newspaper Theme

El tema Periódico es uno de los temas de WordPress más importantes diseñados por tagDiv, un…

18 de octubre de 2021

Cómo construir un comercio electrónico con el constructor Avada WooCommerce

Cuando se trata de configurar una tienda en línea, WooCommerce es el plugin ideal. Él…

4 de octubre de 2021

Cómo usar encabezados fijos y efectos de desplazamiento con Elementor

Un encabezado es generalmente lo primero que ve una persona cuando visita su sitio web,…

21 de septiembre de 2021