Arrow Navigation is composed by small arrows on each side of galleries and catalogs to help the navigation between slides. It is possible to locally style individual arrow icons on different modules or you can do it globally. The advantage of global styling is that it automatically styles all the arrows in every module on your website at the same time, creating a consistent theme on your website and saving your time. It is possible to find Arrows under the Module Design section of the Global Styling tab of the editor.
1. Local Styling
It is possible to find arrow navigation in five different modules and features - Gallery, Image List, Row Groups, Product Catalog and Blog Catalog; click on top of each to find out how to locally style that individual pair of arrow icons.
2. Global Styling General
By defining a global styling in Arrows (General), all arrow icons in all modules will inherit this styling. It is possible to overwrite this styling both for the same modules, e.g. style all Galleries under Global Styling > Module Design > Galleries, and locally, on each individual module.
2.1. Width & Height
In this section it is possible to define the general width and height of the background behind the arrow icon. Simply type down the value or use the slider to increase/decrease the dimensions.
2.2. Icon Color
In this section you can set the actual icon (arrow) color. It is possible to differentiate two colors depending on the state - normal or hover state.
2.3. Background Color
In this section you can set the background color. Just like the icon, it is possible to differentiate two colors depending on the state - normal or hover state.
2.4. Icon Size
In this section it is possible to define the icon (arrow) size. Simply type down the value or use the slider to increase/decrease its dimension.
2.5. Border Radius
Finally you can set the border radius. This setting is useful to round up the icon background - the higher the radius, the more round the icon gets.