Edite usando Fusion Builder en el tema de Avada WordPress

ACTUALIZACIÓN Noviembre de 2016 : ThemeFusion ha actualizado Avada a la versión 5.0. Esta actualización separa el constructor Fusion en un complemento individual, en lugar de incorporarse con el complemento Fusion Core. Fusion Builder se ha rediseñado por completo y es muy diferente a las versiones anteriores.

Cuando se le pida que actualice Avada BACKUP todo su sitio, incluido el primer complemento Fusion Core, y esté preparado para dedicar un tiempo a reorganizar sus páginas, ya que no se mueven sin problemas.

Si ya ha realizado la actualización de Avada 5.0 y sus páginas están rotas, obtenga una versión anterior de Avada. Usando FTP, vaya a la carpeta wp-content / themes y haga una copia de seguridad de la nueva versión. Luego cámbiele el nombre y envíe por FTP la versión anterior. Debería recuperar la versión más ordenada de sus páginas.

Esta publicación es para la versión 2.0.3 o anterior.

Usando el tema Avada

Si tiene el tema Avada en su instalación de WordPress, es posible usar Fusion Builder para crear sus publicaciones y páginas, que es bastante diferente de una actualización de página estándar.

Fusion Builder es un complemento desarrollado por ThemeFusion, los desarrolladores de Avada, que permite un diseño receptivo dentro del tema.

Puede resultar un poco confuso para los principiantes.

He escrito algunas instrucciones para ayudarlo a editar páginas o publicaciones, usando Fusion Builder dentro del tema de Avada WordPress.

Siempre haga una copia de seguridad antes de hacer cambios

Nunca actualice el núcleo, los temas o los complementos de WordPress sin antes hacer una copia de seguridad completa de los complementos, los temas, las cargas y la base de datos.

Las actualizaciones pueden hacer que se rompa algo más, y debe poder revertir o depurar fácilmente. Recomendaría hacer actualizaciones importantes en un sitio de desarrollo para que pueda probarlo primero.

Activar Fusion Builder de Avada

Primero active Fusion Builder en la página o publicación, usando el botón azul sobre el área de edición de contenido.

Si su diseñador web ya ha configurado las páginas, es posible que ya haya hecho clic en el botón. Cambiará el aspecto de su editor de contenido, como se muestra a continuación.

Usando Fusion Builder de Avada, puede crear páginas web receptivas.

Cómo editar páginas usando Fusion Builder

Inicie sesión en su back-end de WordPress.

Vaya a las páginas o publique, usando las pestañas en el lado izquierdo, y luego edite.

El cuadro Fusion Builder debe estar en la parte superior de la pantalla de edición de su página. Los botones en la parte superior están etiquetados como 'Opciones de columna', 'Elementos de construcción', 'Plantillas personalizadas' y 'Plantillas prediseñadas'.

Vamos a ignorar las plantillas personalizadas y las plantillas precompiladas para esta publicación.

Empezar

Opciones de columna de Fusion Builder

Elija una opción de columna cuando desee dividir su página en columnas. Esto inserta una estructura de columnas en su página, en la que luego coloca Builder Elements. Los tamaños y números de las columnas se pueden cambiar más tarde.

Una vez que elija una opción de columna, esa opción aparece en el espacio en blanco a continuación. Para construir su página, piense como si estuviera armando un rompecabezas.

Si ha agregado una columna de 5 x sextos a la izquierda, la única otra opción que cabrá a la derecha es 1 x sexto.

Puede arrastrar una columna de la izquierda de la página a la derecha de la página.

Hacer clic en el botón menos en cualquier opción de columna disminuye el número de columnas que tomará ese elemento. El botón más es exactamente lo contrario.

Elementos de Fusion Builder

Los elementos del constructor se pueden agregar sin elegir primero una opción de columna. Los elementos se insertarán en una fila que se extiende por toda su página. Luego, estos se pueden arrastrar dentro de una columna si es necesario.

Hay una variedad de opciones de elementos de constructor en Avada. Empecemos por el texto. Una vez que haya agregado sus columnas, como se indicó anteriormente, es posible que desee agregar un bloque de texto a una columna.

Simplemente haga clic en el botón Builder Element, busque TEXT y luego haga clic y arrástrelo a su columna.

Coloca el cursor sobre el elemento y luego haz clic en el ícono de pincel que aparece arriba a la derecha para agregar o editar texto.

Todos los elementos se pueden editar utilizando el mismo icono de edición.

Cambie el texto o el medio dentro del elemento, luego haga clic en GUARDAR, el cuadro se cerrará.

Una vez que se cierre la ventana, haga clic en el botón azul ACTUALIZAR para guardar los cambios.

Editar cuadros de contenido dentro de Avada

Los cuadros de contenido se encuentran en Elementos del generador. Estos son útiles porque son realmente flexibles.

Dentro de un elemento, 'Cuadros de contenido', puede haber varios 'cuadros secundarios' o 'Elementos', que se pueden agregar desplazándose hasta la parte inferior de la pantalla Cuadro de contenido.

La pantalla principal del cuadro de contenido cambia las opciones para todos los cuadros secundarios, a menos que el 'niño' tenga su propio estilo.

Vaya a la pantalla de edición de su cuadro de contenido, utilizando el icono de pincel.

Las opciones dentro del cuadro de contenido son las siguientes:

Configuración de padres / hijos
La configuración de "Nivel principal" controlará todos los estilos de caja juntos. La configuración de "Nivel infantil" controlará cada estilo de cuadro de forma individual.

Diseño del cuadro de contenido
Seleccione el diseño del cuadro de contenido

Número de columnas
Establezca el número de columnas por fila.

Alineación de contenido
Funciona con las opciones de diseño "Icono clásico con título" e "Icono clásico en el lateral".

Tamaño del título
Controla el tamaño del título. Déjelo en blanco para la selección de opciones de tema. En píxeles ex: 18px.

Color de fuente del título
Controla el color de la fuente del título. Déjelo en blanco para la selección de opciones de tema. ej .: # 000

Color de fuente del cuerpo
Controla el color de la fuente del cuerpo. Déjelo en blanco para la selección de opciones de tema. ej .: # 000

Color de fondo del cuadro de contenido
Déjelo en blanco para la selección de opciones de tema.

Fondo del icono
Elija mostrar un fondo detrás del icono. Seleccione predeterminado para la selección de opciones de tema.

Radio de fondo del icono
Elija el radio del borde del fondo del icono. Déjelo en blanco para la selección de opciones de tema. En píxeles (px), por ejemplo: 1 px o "redondo".

Color del icono
Déjelo en blanco para la selección de opciones de tema.

Color de fondo del icono
Déjelo en blanco para la selección de opciones de tema.

Color del borde interior del fondo del icono
Déjelo en blanco para la selección de opciones de tema.

Tamaño del borde interior del fondo del icono
Déjelo en blanco para la selección de opciones de tema.

Fondo del icono Color del borde exterior
Déjelo en blanco para la selección de opciones de tema.

Tamaño del borde exterior del fondo del icono
Déjelo en blanco para la selección de opciones de tema.

Tamaño de ícono
Controla el tamaño del icono. Déjelo en blanco para la selección de opciones de tema. En píxeles ex: 18px.

Tipo de animación de desplazamiento del icono
Seleccione el tipo de animación para el icono al pasar el mouse. Seleccione predeterminado para la selección de opciones de tema.

Color de animación de desplazamiento
Seleccione un color de acento para la animación de desplazamiento. Déjelo en blanco para la selección de opciones de tema.

Tipo de vínculo
Seleccione el tipo de enlace que debe aparecer en el cuadro de contenido. Seleccione predeterminado para la selección de opciones de tema.

Área de enlace
Seleccione a qué área se asignará el enlace. Seleccione predeterminado para la selección de opciones de tema.

Destino del enlace
_self = abrir en la misma ventana
_blank = abrir en una nueva ventana. Seleccione predeterminado para la selección de opciones de tema.

Retraso de animación
Controla el retraso de la animación entre cada elemento de un conjunto. En milisegundos, 1000 = 1 segundo.

Desplazamiento de animación
Elija cuándo debe comenzar la animación.

Tipo de animación
Seleccione el tipo de animación para usar en el shortcode

Dirección de animación
Seleccione la dirección entrante para la animación.

Velocidad de animación
Escriba la velocidad de la animación en segundos (0,1 - 1)

Margen superior
En píxeles (px), por ejemplo: 1 px.

Margen inferior
En píxeles (px), por ejemplo: 1 px.

Clase CSS
Agregue una clase al elemento HTML envolvente.

ID de CSS
Agregue una identificación al elemento HTML envolvente.

Editar un cuadro de contenido 'secundario'

Haga clic en el icono del pincel para editar el cuadro de contenido.

Desplácese hasta la parte inferior para buscar 'Agregar nuevo cuadro de contenido', o posiblemente 'Elemento del cuadro de contenido 1+', si ya hay un elemento dentro del Cuadro de contenido.

Edite texto, imágenes, agregue iconos y cambie numerosas opciones en el cuadro de contenido 'hijo' aquí. Esta configuración sobrescribirá la configuración principal.

Ahora haga clic en el botón azul GUARDAR. Se cerrará el cuadro de edición.

Recuerde hacer clic en el botón ACTUALIZAR en el lado derecho para guardar la página.

Enlaces útiles

Información de actualización de Avada