Circle Pagina (General)

Circle Pagina refers to the small dots (circles) on the bottom of galleries and catalogs to help the navigation between slides. It is possible to locally style individual circles on different modules or you can do it globally. The advantage of global styling is that it automatically styles all the circles 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 Circle Pagina under the Module Design section of the Global Styling tab of the editor.


1. Local Styling

It is possible to find circle pagina 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 circle group. 


2. Global Styling

By defining a global styling in Circle Pagina (General), all 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 size of the circles, where it is possible to specify their width and height. Simply type down the value or use the slider to increase/decrease the dimensions.


2.2. Border Color

In this section you can set the border color of the icon, so the outer line of the circles. It is possible to differentiate three colors depending on the state - normal, active or hover state.


2.3. Background Color

In this section you can set the background color of the icon, which is the inside of the circles. Just like the border, it is possible to differentiate three colors depending on the state - normal, active or hover state.


2.4. Border Width

In this section you can define the width of the border, which is the outer line of the circles. 


2.5. Border Radius

Finally you can set the border radius. As the icons are circles, the radius are by default 100% - however, if you'd like to make it less round or even make it a square, you can do it in this section by decreasing the border radius.

 

Anything we’ve not covered?

Contact Us