Configuración Avada (borrar)

16 marzo - 1 junio | 9:00-12:00

Curso UI

(150 h)

Módulo 4. Wordpress

Guada Romero Carrascosa | Trazos

Wordpress

Editando con Avada

Maquetando | Preparamos una página

Páginas > empezamos de cero

• Eliminamos las 2 páginas existentes
• Creamos una página nueva (partimos de 0)

¡Ojo! Hay que establecer la nueva pantalla ppal.

1.1

• Nos vamos a ajustes de Wordpress > Lectura
• Indicamos que la página de inicio muestre: Una página estática (seleccionar abajo) + Página: Home

RETO

Maquetando | Avada | Header

Cambiamos el Header Desktop

• Nos vamos a Avada > Options > Header
• Configuramos el tipo de header que queremos
• ¡Guardamos cambios!

Cambiamos el Header Mobile

• Nos vamos a
• Classic - De manera predeterminada nos muestra uno que no es común
• Flyout - Aplicamos este tipo de menú, el + accesible para mobile (hamburguesa)
• ¡Guardamos cambios!

¿Ampliar tipos de headers y/o menús?

RETO

• Si queremos otro tipo de menús (ej.: mega menús), tendremos que aplicar un plugin

Maquetando | Avada | Título de página

Eliminamos el título de página (texto)

• Nos vamos a Avada > Options > Page Title Bar
• Ocultamos (Hide) la sección
• Deseleccionamos el resto para partir de cero

Eliminamos el fondo del título de página

• Con el Hide debería haberse ocultado por completo, pero si no lo hace, le quitamos el fondo manualmente

RETO

Maquetando | Avada | Footer

Eliminamos el Widgets Footer

• Ahora mismo tenemos dos footers, el superior y el inferior
• El superior es para Widgets, lo vamos a eliminar desactivándolo

Cambiamos el contenido del Footer (brevemente)

• Para poder cambiar el contendo del Footer lo podemos hacer desde Footer Content
• Le cambiamos el texto por uno personalizado

RETO

¿Cómo cambiamos la apariencia?

• La cambiamos desde los otros apartados del Footer

Maquetando | Avada | Searcher y Logo

Eliminamos el icono buscador

• En Avada > Menu, desactivamos que aparezca el icono de buscar

Añadimos un logo

• En Avada > Logo, sustituímos la imagen por la nuestra

RETO

Maquetando | Menú

Creamos un menú y enlace a la Home

• Apariencia > Menú
• Creamos el menú poniéndole nombre y dándole al Enter
• Ya podemos seleccionar a la izquierda qué queremos que tenga el menú (en nuestro caso solo la Home)

Creamos botones para futuros anclajes

• En Enlaces personalizados creamos un botón con el nombre de la sección
• Como aún no tenemos la URL añadimos una #
• Añadimos al menú y lo colocamos con respecto a Home donde queramos

Adaptado a Landing Page

RETO

• Como realmente estamos haciendo una Landing Page, si queremos podemos eliminar el acceso a Home, ya que dándole al logo ya sabemos que se recargará. Añadimos solo anclajes

Enlazado del menú

Finalizando la Landing Page

Menú en Avada por pantallas

Copiamos el enlace a la pantalla desde Páginas

Pegamos el enlace en el botón correspondiente del menú

PRÁCTICA

¡Muchas gracias!

Guada Romero Diseñadora UX-UI