In this article, we are going to look at how you use the OptimizePress 3 List Menu element. The List Menu element is great for adding vertical menus to your pages. These work great in a footer area, or other areas where you would need to have similar menus.
Before you add your List Menu element, please ensure that you have already created a WordPress Menu under "Appearance > Menus" which we also have a guide for:
https://docs.optimizepress.com/article/2728-create-menus-in-wordpress
To add the List Menu Element to your page, you would simply click on the "+" icon or the "+Elements" link in the top left of the editor window.
Then, you can search for the element in the element sidebar. Just type in "Menu" and you'll see it there.
Then drag/drop the List Menu element onto your page.
When you add the element to your page you'll see the List Menu Inline Toolbar where you can set all the settings to the desired options to make the List Menu element conform to your site's design.
The first option there in the toolbar when you click the hamburger icon will allow you set select the menu you want to use. This menu should have been created prior to adding the element. You can also setup the Title & Link spacing, and the indent for the sub-menu items.
You can change the Title Font Options
The Link Font Options can also be changed
If you want a different color for the Title Text or Link Text you may select those as well
Hover Options are also a great tool to use to help your site visitors know what link they are about to click on. You can set the hover color as well as text options for the links.
This is what the hover option does when you move your mouse over the menu. You can see above I set the color to orange, so when the mouse is moved over the links, you can see the orange color fade in and out as I hover over the different links
As with most other elements, you can also 1) Reposition the element, 2) Clone the element, and 3) Delete the element
To adjust the spacing above and below the List Menu element, just click the gear icon and you'll see those settings.
To open the advanced options for the List Menu, click the gear icon, then click the blue "Advanced Options" button.
Positioning - You can edit the margin and padding. Just put your mouse pointer over the dashed or solid line and drag the padding/margin where you need.
Responsive - You can set what devices this element will show on
Animation & Delay - You an setup how the element reacts and choose the animation effect and what triggers the effect. You can also choose to just delay the element for a short time.
Advanced - Here you can choose from other advanced options such as setting a custom CSS Class, changing the z-index (layer option), as well as the Code before/Code after if you want to add any shortcodes or other custom HTML code.
Why is there not a width setting?
Since you will be adding this element within a column, you would just set the width of the column in order to control the width of the element that is placed inside of it.
Why is there no alignment options in this element?
As it is a vertical List Menu, there is no alignment because these type of menus should always be justified to the left side of the area they are placed in.
Should you have any other questions about how to use the List Element, or any other elements in OptimizePress, please reach out to our team and they'll be happy to guide you further.
