What is Pagination Preset?
Pagination Preset allows you to prepare a pagination style for carousels and use it across whole website. This type of preset is slightly different than standard presets for shortcodes. Once created preset can be used inside multiple different shortcodes with Pagination support.
How to install Pagination Presets?
In order to get Pagination Presets installed, please navigate to Massive Panel and scroll down for Presets section. Then choose Pagination from Select Shortcode dropdown. After a while, all predefined presets will be installed in your website. All of them can be edited, renamed or deleted.
List of available options in Pagination Preset
Below, we present all of the Pagination Preset options.
| Option | Description |
|---|---|
| Main Preset | Presets are used to easily configure your shortcode. You can choose one of the premade presets or create your own. You can preview the available presets with Preview & Load Preset button. Learn More » |
| Type | Select pagination type: Load More: displays load more button to load next items under current ones; Infinity: automatic load more when user reach last item; Classic: normal pagination with next/previous buttons and pages. |
| Position | Select pagination position. |
| Gap | Choose gap between buttons. |
| Disable AJAX( Available only for Type: Classic ) | Check to disable AJAX reloading and use traditional method. |
| Mid Size( Available only for Type: Classic ) | Specify how many items should be displayed around the current page number. |
| End Size( Available only for Type: Classic ) | Specify how many items should be displayed around Next/Prev buttons. |
| Force Square Buttons | Check to force square shape of buttons. |
| Typography | Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More » |
| Text | Define button text. |
| Icon | Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More » |
| Display Effect | Select icon display style: None: hide the icon; Stay: display icon on selected side; Slide In: slide icon in from selected side; Push Out: push out button text with icon from selected side. |
| Custom Gap | Define gap between icon and text. |
| Background | Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More » |
| Border | In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right) Learn More » |
| Padding | It is one of most common field across our shortcodes. The simple mode, contain options for padding size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Title Color | If you want to change the title color after hover choose a different one from the color picker below. |
| Icon Color | If you want to change the icon color after hover choose a different one from the color picker below. |
| Hover – Background | Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More » |
| Hover Effect | Select background hover animation style: Fade: simple fade in effect; Slide In: slide background in from selected side; Expand: expand background from selected position. |
| Custom Offset | Define custom offset for expanded background size. Offset might be different dependent on the button size. |
| Hover – Border | In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right) Learn More » |
| Previous Button – Icon | Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More » |
| Text | Define previous button text. |
| Display Effect | Select icon display style: None: hide the icon; Stay: display icon on selected side; Slide In: slide icon in from selected side; Push Out: push out button text with icon from selected side. |
| Custom Gap | Define gap between icon and text. |
| Next Button – Icon | Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More » |
| Text | Define next button text. |
| Display Effect | Select icon display style: None: hide the icon; Stay: display icon on selected side; Slide In: slide icon in from selected side; Push Out: push out button text with icon from selected side. |
| Custom Gap | Define gap between icon and text. |
| Previous/Next Button – Background | Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More » |
| Pagination – Margin | It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Custom Class | Add your custom class to the element. Mostly used for custom CSS/JS. |
How to use a created or installed Pagination Preset?
Installed and created presets are available for later usage inside all shortcodes with Pagination support (mostly Grids). To load a Pagination preset to shortcode, please create or edit a shortcode (Grid: Posts in our example) then select preset which should be loaded at Pagination tab(1) from preset field(2) .
If you made a changes to preset fields, you would need to click at Save Pagination Preset(3) button before closing the edit popup.
How to create a new Pagination Preset?
To create a new preset, add a corresponding shortcode or edit an existing one. In popup, find a Pagination Preset field and click at New(1) button.
An empty Pagination Preset form will appear. All properties have been described in a options table above.
When you finish with settings, please take a look at preview field. If the end effect satisfy you, click Save Changes button and start using your new Pagination Preset.
How to modify or rename a Pagination Preset?
Pagination Preset can be modified only from shortcode edit popup. To make changes to existing preset please select a preset from dropdown list which you want to update (if different from already selected) and click ‘Pencil’ icon. The same actions are needed to modify preset name.
There are few things that you should remember:
- Pagination Preset changes will affect all elements using the modified preset
- instead of editing a predefined presets (our presets) we recommend to create a new one which will contain your settings
How to delete a Pagination Preset?
Each Pagination Preset can be deleted from the shortcode popup by selecting it from dropdown list and clicking ‘Trash‘ icon. The same mechanism is used for Typography Presets.