Creating the Carousel
The first step was to create carousel to hold the images. All of these images represent a different style or art and have a portrait orientation. The consistent orientation helps. After some experimentation, sizing the image to 185 by 250 pixels seemed to produce the correct layout.
- Create a test page or post to create a carousel
- Using Fusion Builder, add a carousel component
- Picture size =Auto
- Maximum columns = 1
- Element Visibility – medium and large screen only
- Add each image with the hyperlink and correct alternative text
- Once complete save this carousel as a Global Element so that Fusion Builder assigns a shortcode (Figure 1)
Figure 1. Global element with shortcode
Creating a Widget
In order to use the carousel within the mega-menu you must create a widget area to hold the widget.
- Go to Appearance >> Widgets
- Create a new widget area with a name that makes sense to you
- Add the Custom HTML widget
- In the content area add the shortcode for the global element.
Figure 2. Creating a widget area and widget
Creating the Mega-Menu
Creating the menu is essentially the same as any other menu until you add the widget.
- Go to the menu editor (Appearance Menus)
- Using the Custom Links option enter the hashtag as the URL and enter the name of your menu item – I chose Courses.
- Then click on the Avada Menu Option
- Turn on Full Width Mega Menu (I have my full width set to 1200 pixels). Not choosing full width will work, but not in this instance.
- In the number of columns choose Auto
- Add you first menu item to hold the carousel
- Add the hashtag (#) as the URL
- Enter a name (you will be turning this off)
- Click Avada Menu Options
- Scroll to the bottom of the options
- Set Mega Menu Column Title to Off
- In the Mega Menu Widget Area dropdown, select the the widget area you created earlier
Figure 3. Mega menu options
- The next step is to add a new menu item Course List
- Then add the list of course posts or pages
While a course list of seven items is not excessive, I felt that a two-column layout would be best. Initially, I tried another column with an invisible title, but it has some spacing issues and doesn’t work as needed on mobile.
The solution was to add a class to the courses list (two-col-sub) and then add a few lines of custom css*. I used a media query to ensure that the behavior on mobile is as expected.
*If you do not see the CSS options on the menu, open the Screen Options and check CSS Classes.
Figure 4. Screen Option panel in the open position