Modules are a key feature of the HubSpot CMS. With Atlas 2, you have access to premium modules with extensive settings, multiple layouts, and more!
If you are new to the HubSpot CMS and the Drag and Drop system, check out this article to get you all set and ready.
Index
Atlas Cards
A card grid section showcases multiple contents or topics you want your users to know about.
With options for colors, dimensions, backgrounds, shadows, spacings, effects, and animations, the Atlas Cards can create versatile layouts. The module features a responsive grid system that will adjust your card’s distribution and dimensions to fit any device.
Fields Overview
| Field | Type | Default | Parent |
| Cards | group | ||
| Content | richtext | <h4>Hey! I'm an Atlas Card</h4> <p>And this is your main rich text field. Let the world know what your message is by changing this text. Use different font sizes, colors, images, and links, and don't forget to check out my styling capabilities!</p> | Cards |
| Link Type | choice | none | Cards |
| Button | group | Cards | |
| Button Variant | choice | filled | Button |
| Button Label | text | Get Started | Button |
| Button Icon | icon | {} | Button |
| Icon Size | number | 80 | Button |
| Button Link | link | {"url":{"content_id":null,"type":"EXTERNAL","href":""},"open_in_new_tab":false,"no_follow":false} | Button |
| Override Button Styles | boolean | Button | |
| Colors | boolean | false | Button |
| Background Color | color | {"color":"#426bcc","opacity":100} | Button |
| Text Color | color | {"color":"#323232","opacity":100} | Button |
| Border Color | color | {"color":"#426bcc","opacity":100} | Button |
| Fonts | boolean | false | Button |
| Font | font | {"font":"system-ui","font_set":"GOOGLE"} | Button |
| Font Size | number | 14 | Button |
| Bold Font | boolean | true | Button |
| Text Case | choice | none | Button |
| Borders | boolean | false | Button |
| Border Width | number | Button | |
| Corner Radius | number | Button | |
| Padding | boolean | false | Button |
| Top/Button Padding | number | 12 | Button |
| Left/Right Padding | number | 20 | Button |
| Image Link | boolean | Button | |
| Link | group | Cards | |
| Full Card Link | link | {"url":{"content_id":null,"type":"EXTERNAL","href":""},"open_in_new_tab":false,"no_follow":false} | Link |
| Image | group | Cards | |
| Image | image | {"size_type":"auto","src":"","alt":null,"loading":"disabled"} | Image |
| Form | group | Cards | |
| Enable | boolean | Form | |
| Selector | form | Form | |
| Content Alignment | group | Cards | |
| Alignment | choice | center | Content Alignment |
| Overwrite Styles | group | Cards | |
| Overwrite Background | boolean | Overwrite Styles | |
| Background | group | Overwrite Styles | |
| Type | choice | color | Background |
| Background Color | color | {"color":"#1d1d1d","opacity":100} | Background |
| Image | image | {"size_type":"auto","src":"","alt":null,"loading":"disabled"} | Background |
| Size | choice | cover | Background |
| Background Image Filters | group | Background | |
| Enable Blur | boolean | Background Image Filters | |
| Blur | number | 0 | Background Image Filters |
| Enable Gray Scale | boolean | Background Image Filters | |
| Gray Scale | number | 0 | Background Image Filters |
| Enable Brightness | boolean | Background Image Filters | |
| Brightness | number | 100 | Background Image Filters |
| Enable Scale | boolean | Background Image Filters | |
| Scale | number | 1 | Background Image Filters |
| Gradient Type | choice | horizontal | Background |
| Gradient 1 | color | {"color":"#1d1d1d","opacity":100} | Background |
| Gradient 2 | color | {"color":"#000000","opacity":100} | Background |
| Overwrite Hover Effects | boolean | Overwrite Styles | |
| Hover Effects | group | Overwrite Styles | |
| Transition Time | number | 0.5 | Hover Effects |
| Background Color | group | Hover Effects | |
| Enable | boolean | Background Color | |
| Color | color | {"color":"#EEEEEE","opacity":100} | Background Color |
| Background Image Filters | group | Hover Effects | |
| Enable Blur | boolean | Background Image Filters | |
| Blur | number | 0 | Background Image Filters |
| Enable Gray Scale | boolean | Background Image Filters | |
| Gray Scale | number | 0 | Background Image Filters |
| Enable Brightness | boolean | Background Image Filters | |
| Brightness | number | 100 | Background Image Filters |
| Enable Scale | boolean | Background Image Filters | |
| Scale | number | 1 | Background Image Filters |
| Box Shadow | group | Hover Effects | |
| Enable | boolean | Box Shadow | |
| Type | choice | normal | Box Shadow |
| Box Shadow Color | color | {"color":"#000000","opacity":30} | Box Shadow |
| Scale | group | Hover Effects | |
| Enable | boolean | Scale | |
| Scale | number | 1 | Scale |
| Offset Y | group | Hover Effects | |
| Enable | boolean | Offset Y | |
| Value | number | 0 | Offset Y |
| Overwrite Cursor Effects | boolean | Overwrite Styles | |
| Glow Effect | group | Overwrite Styles | |
| Overwrite Color | boolean | Glow Effect | |
| Color | color | {"color":"#FFFFFF","opacity":50} | Glow Effect |
| Styles | group | ||
| Box Shadow | group | Styles | |
| Enable | boolean | Box Shadow | |
| Type | choice | normal | Box Shadow |
| Box Shadow Color | color | {"color":"#000000","opacity":30} | Box Shadow |
| Border | group | Styles | |
| Enable | boolean | Border | |
| Width | number | 1 | Border |
| Border Color | color | {"color":"#000000","opacity":100} | Border |
| Border radius | group | Styles | |
| Enable | boolean | Border radius | |
| Value | number | 8 | Border radius |
| Padding | group | Styles | |
| Enable | boolean | Padding | |
| Top | number | 32 | Padding |
| Bottom | number | 32 | Padding |
| Left | number | 25 | Padding |
| Right | number | 25 | Padding |
| Background | group | Styles | |
| Type | choice | Background | |
| Background Color | color | {"color":"#1d1d1d","opacity":100} | Background |
| Image | image | {"size_type":"auto","src":"","alt":null,"loading":"disabled"} | Background |
| Size | choice | cover | Background |
| Background Image Filters | group | Background | |
| Enable Blur | boolean | Background Image Filters | |
| Blur | number | 0 | Background Image Filters |
| Enable Gray Scale | boolean | Background Image Filters | |
| Gray Scale | number | 0 | Background Image Filters |
| Enable Brightness | boolean | Background Image Filters | |
| Brightness | number | 100 | Background Image Filters |
| Enable Scale | boolean | Background Image Filters | |
| Scale | number | 1 | Background Image Filters |
| Gradient Type | choice | horizontal | Background |
| Gradient 1 | color | {"color":"#1d1d1d","opacity":100} | Background |
| Gradient 2 | color | {"color":"#000000","opacity":100} | Background |
| Hover Effects | group | Styles | |
| Transition Time | number | 0.5 | Hover Effects |
| Background Color | group | Hover Effects | |
| Enable | boolean | Background Color | |
| Color | color | {"color":"#EEEEEE","opacity":100} | Background Color |
| Background Image Filters | group | Hover Effects | |
| Enable Blur | boolean | Background Image Filters | |
| Blur | number | 0 | Background Image Filters |
| Enable Gray Scale | boolean | Background Image Filters | |
| Gray Scale | number | 0 | Background Image Filters |
| Enable Brightness | boolean | Background Image Filters | |
| Brightness | number | 100 | Background Image Filters |
| Enable Scale | boolean | Background Image Filters | |
| Scale | number | 1 | Background Image Filters |
| Box Shadow | group | Hover Effects | |
| Enable | boolean | Box Shadow | |
| Type | choice | normal | Box Shadow |
| Box Shadow Color | color | {"color":"#000000","opacity":30} | Box Shadow |
| Scale | group | Hover Effects | |
| Enable | boolean | Scale | |
| Scale | number | 1 | Scale |
| Offset Y | group | Hover Effects | |
| Enable | boolean | Offset Y | |
| Value | number | 0 | Offset Y |
| Cursor Effects | group | Styles | |
| Glow Effect | group | Cursor Effects | |
| Enable | boolean | Glow Effect | |
| Color | color | {"color":"#FFFFFF","opacity":50} | Glow Effect |
| Size | number | 50 | Glow Effect |
| Blur | number | 20 | Glow Effect |
| Tilt Effect | group | Cursor Effects | |
| Enable | boolean | Tilt Effect | |
| Tilt Strength | number | 5 | Tilt Effect |
| Invert Tilt | boolean | Tilt Effect | |
| Grid Alignment | group | ||
| Vertical Alignment | choice | stretch | Grid Alignment |
| Horizontal Gap | number | 20 | Grid Alignment |
| Vertical Gap | number | 20 | Grid Alignment |
| Enable Max Width | boolean | Grid Alignment | |
| Max Width | number | 225 | Grid Alignment |
| Horizontal Alignment | choice | space-evenly | Grid Alignment |
Blog Posts List
Showcasing relevant blogs can greatly enhance your customer engagement. Pointing toward blogs that add relevant content to your page can give users a better understanding of your expertise.
The Blog Post List module allows you to showcase cards for multiple blog posts. The card’s contents get pulled automatically from your published Blog Posts. You can disable/enable your cards' summary, image, author, date, and tag. You can also select a custom number of posts and columns. If you’d like to know more about how blogs and blog posts work, check out our blog guides.
Fields Overview
| Field | Type | Default | Parent |
| Blog | blog | ||
| Number of Columns | number | 3 | |
| Number of Posts | number | 3 |
Button Group
Buttons are essential to help a user navigate through your page.
The Button Group module allows you to set up multiple buttons. The buttons will inherit styling settings from the theme settings but can then be overridden for each button individually.
Fields Overview
| Field | Type | Default | Parent |
| Buttons | group | ||
| Button Variant | choice | filled | Buttons |
| Button Label | text | Get Started | Buttons |
| Button Icon | icon | {} | Buttons |
| Icon Size | number | 80 | Buttons |
| Button Link | link | {"url":{"content_id":null,"type":"EXTERNAL","href":""},"open_in_new_tab":false,"no_follow":false} | Buttons |
| Override Button Styles | boolean | Buttons | |
| Colors | boolean | false | Buttons |
| Background Color | color | {"color":"#426bcc","opacity":100} | Buttons |
| Text Color | color | {"color":"#323232","opacity":100} | Buttons |
| Border Color | color | {"color":"#426bcc","opacity":100} | Buttons |
| Fonts | boolean | false | Buttons |
| Font | font | {"font":"system-ui","font_set":"GOOGLE"} | Buttons |
| Font Size | number | 14 | Buttons |
| Bold Font | boolean | true | Buttons |
| Text Case | choice | none | Buttons |
| Borders | boolean | false | Buttons |
| Border Width | number | Buttons | |
| Corner Radius | number | Buttons | |
| Padding | boolean | false | Buttons |
| Top/Button Padding | number | 12 | Buttons |
| Left/Right Padding | number | 20 | Buttons |
Custom Image
Images are a key component of web design. They can communicate ideas in ways that text can’t. They also amount to visual stimulation and provide places for users to rest their eyes.
The Custom Image module allows you to add a responsive image to your site alongside multiple configurations such as alt text, size, maximum size, image loading, and alignment.
Fields Overview
| Field | Type | Default | Parent |
| Image | image | {"size_type":"auto","loading":"eager","width":"1920","height":"1080","max_width":"1920","max_height":"1080","src":"https://via.placeholder.com/1920x1080"} | |
| Styles | group | ||
| Box Shadow | group | Styles | |
| Enable | boolean | false | Box Shadow |
| Box Shadow Color | color | {"color":"#e0e0e0","opacity":100} | Box Shadow |
Custom Rich Text
Images are a key component of web design. They can communicate ideas in ways that text can’t. They also amount to visual stimulation and provide places for users to rest their eyes.
The Custom Image module allows you to add a responsive image to your site alongside multiple configurations such as alt text, size, maximum size, image loading, and alignment.
Fields Overview
| Field | Type | Default | Parent |
| Pre Header | text | Get started | |
| Content | richtext | <h1>This is the <strong>Custom Rich Text</strong> module</h1> <p> Feel free to edit this text to reflect your unique voice and message. Tell visitors what you do, why you do it, and what sets you apart.</p> | |
| Styles | group | ||
| Preheader Color | color | {"color":"#4678EE","opacity":100} | Styles |
Dynamic Backogrund
The Dynamic Background module applies a background from our library to the drag-and-drop section it lives on. All backgrounds from our library inherit your theme’s colors to ensure brand consistency. You can also override these colors to further customize your backgrounds.
Fields Overview
| Field | Type | Default | Parent |
| Styles | group | ||
| Dynamic Background | choice | atlas-dynamic-background-01 | Styles |
| Background Size | choice | cover | Styles |
| Background Alignment | choice | center-center | Styles |
| Override Colors | boolean | false | Styles |
| Primary Color | color | Styles | |
| Accent Color | color | Styles | |
| Surface Color | color | Styles | |
| Background Color | color | Styles |
FAQ
A rich text is a type of field that allows users to highly customize content. You can change font sizes, weights, colors, and spacings and add multiple types of elements such as links, images, files, CTAs, and more. HubSpot’s rich texts allow you access the rich text source code, which is the raw inline HTML code that gives structure to the content.
The Custom Rich Text module includes a preheader, a rich text, a primary call to action, a secondary call to action, a form, an alignment option, a max width input field, a preheader color option, and a Custom bullet list icon option, which turns the bullets on bullet lists into an icon of your choice. You can also use the rich text field to embed any HTML elements, making it one of our most versatile modules.
Fields Overview
| Field | Type | Default | Parent |
| Frequently Asked Questions | group | ||
| Heading | text | Q: How does a penguin build its house? | Frequently Asked Questions |
| content | richtext | A: Igloos it together! | Frequently Asked Questions |
| Styles | group | ||
| Theme Overrides | group | Styles | |
| Corner Radius | number | 0 | Theme Overrides |
| Shadows | choice | none | Theme Overrides |
| Variant | choice | separated | Styles |
| Indicator Settings | group | Styles | |
| Indicator Type | choice | simple | Indicator Settings |
| icon | icon | {} | Indicator Settings |
| Custom image | image | {"size_type":"auto","src":"","alt":null,"loading":"disabled"} | Indicator Settings |
| Same color as text | boolean | Indicator Settings | |
| Indicator Color | color | Indicator Settings | |
| Border Settings | group | Styles | |
| Border | border | {"top":{"width":{"value":2,"units":"px"},"opacity":100,"style":"solid","color":"#515151"}} | Border Settings |
| (Question) Header Styles | group | Styles | |
| Header Background Color | color | {"color":"#f1f1f1","opacity":100} | (Question) Header Styles |
| Background Settings | group | (Question) Header Styles | |
| Background Color | color | Background Settings | |
| Background Gradient | gradient | Background Settings | |
| Background Image | backgroundimage | Background Settings | |
| Glass Background Effect | boolean | Background Settings | |
| Header Spacing | spacing | {"padding":{"top":{"value":"20","units":"px"},"right":{"value":"20","units":"px"},"bottom":{"value":"20","units":"px"},"left":{"value":"20","units":"px"}},"margin":null} | (Question) Header Styles |
| (Answer) Content Styles | group | Styles | |
| Background Settings | group | (Answer) Content Styles | |
| Background Color | color | Background Settings | |
| Background Gradient | gradient | Background Settings | |
| Background Image | backgroundimage | Background Settings | |
| Glass Background Effect | boolean | Background Settings | |
| Content Spacing | spacing | {"padding":{"top":{"value":"10","units":"px"},"right":{"value":"20","units":"px"},"bottom":{"value":"30","units":"px"},"left":{"value":"20","units":"px"}},"margin":null} | (Answer) Content Styles |
| FAQ Spacing | number | 20 | Styles |
Footer Settings
The footer is an area at the bottom of your page that summarizes your site’s basic information and lists important links.
The Footer Settings module is included in the footer’s editor. It allows you to make changes that affect the entire footer’s drag-and-drop sections. You can tweak colors, text, behavior, etc.
Fields Overview
| Field | Type | Default | Parent |
| Styles | group | ||
| Background Settings | group | Styles | |
| Background Color | color | {"color":"#2C2C2C","opacity":100} | Background Settings |
| Background Gradient | gradient | Background Settings | |
| Background Image | backgroundimage | Background Settings | |
| Text Colors | group | Styles | |
| Text Color | color | {"color":"#ffffff","opacity":100} | Text Colors |
| Links Color | color | {"color":"#ffffff","opacity":100} | Text Colors |
| Links Hover Color | color | {"color":"#ffffff","opacity":60} | Text Colors |
| Footer Style | group | Styles | |
| Floating Footer | boolean | false | Footer Style |
| Theme Overrides | group | Styles | |
| Corner Radius | number | 0 | Theme Overrides |
| Shadows | choice | none | Theme Overrides |
Global Blog Subscribe
A blog subscription form prompts the user for their basic information for them to be added to a mailing list with updates on your blog.
The Global Blog Subscribe module is a global type of content. This means that once this module’s content gets edited, all the instances of the module that live on your page will also get updated.
This module includes a header rich text field, a Blog object selector, a title, and a response rich text field, which will pop up once the user submits the form. Keep in mind that the module will display a subscription form only when the corresponding blog subscription emails (for that specific blog) have been set up.
Fields Overview
| Field | Type | Default | Parent |
| Pre Header | text | Get started | |
| Content | richtext | <h1>This is the <strong>Custom Rich Text</strong> module</h1> <p> Feel free to edit this text to reflect your unique voice and message. Tell visitors what you do, why you do it, and what sets you apart.</p> | |
| Blog | blog | ||
| Title | text | ||
| Response | richtext | <p>Thanks for subscribing!</p> | |
| Styles | group | ||
| Preheader Color | color | {"color":"#4678EE","opacity":100} | Styles |
| Background Color | group | Styles | |
| Override Background Color | boolean | Background Color | |
| Background Color | color | {"color":"#f0f5ff","opacity":100} | Background Color |
Global Social Sharing
A social sharing section lists buttons or links that lead to your social media pages.
The Global Social Sharing module is a global type of content. This means that once this module’s content gets edited, all the instances of the module that live on your page will also get updated. This module features a rich text header and multiple social network icons meant to redirect users to your page on each platform. The module allows for any custom icons and links.
Fields Overview
| Field | Type | Default | Parent |
| Pre Header | text | Get started | |
| Content | richtext | <h1>This is the <strong>Custom Rich Text</strong> module</h1> <p> Feel free to edit this text to reflect your unique voice and message. Tell visitors what you do, why you do it, and what sets you apart.</p> | |
| Alignment | choice | flex-start | |
| Link URL | text | ||
| group | |||
| Enable | boolean | ||
| Link | text | http://www.facebook.com/share.php?u= | |
| Twitter / X | group | ||
| Enable | boolean | Twitter / X | |
| Link | text | https://twitter.com/intent/tweet?original_referer=&url=&source=tweetbutton&text= | Twitter / X |
| group | |||
| Enable | boolean | ||
| Link | text | http://www.linkedin.com/shareArticle?mini=true&url= | |
| group | |||
| Enable | boolean | ||
| Link | text | http://pinterest.com/pin/create/button/?url=&media= | |
| Pin image | image | {"size_type":"auto","src":"http://pinterest.com/pin/create/button/?url=&media=","alt":null,"loading":"disabled"} | |
| group | |||
| Enable | boolean | ||
| Link | text | mailto:?subject=Check out &body=Check out | |
| Custom Links | group | ||
| Link | text | Custom Links | |
| Icon | icon | {} | Custom Links |
| Styles | group | ||
| Preheader Color | color | {"color":"#4678EE","opacity":100} | Styles |
| Icons Color | group | Styles | |
| Button Color | boolean | Icons Color | |
| Button Color | color | {"color":"#4678EE","opacity":100} | Icons Color |
Hero / Banner
A hero section is meant to be used at the top of your pages as a first impression of your site. Use it to describe what your company does and point users toward key actions.
The Hero / Banner module features a main rich text field, a button group, an image / Lottie / video section, a form, and alignment settings. The background settings allow you to choose between a static color, a gradient, and image, or a video, with an overlay option for the video setting.
Fields Overview
| Field | Type | Default | Parent |
| Pre Header | text | Get started | |
| Content | richtext | <h1>This is the <strong>Custom Rich Text</strong> module</h1> <p> Feel free to edit this text to reflect your unique voice and message. Tell visitors what you do, why you do it, and what sets you apart.</p> | |
| Buttons | group | ||
| Button Variant | choice | filled | Buttons |
| Button Label | text | Get Started | Buttons |
| Button Icon | icon | {} | Buttons |
| Icon Size | number | 80 | Buttons |
| Button Link | link | {"url":{"content_id":null,"type":"EXTERNAL","href":""},"open_in_new_tab":false,"no_follow":false} | Buttons |
| Override Button Styles | boolean | Buttons | |
| Colors | boolean | false | Buttons |
| Background Color | color | {"color":"#426bcc","opacity":100} | Buttons |
| Text Color | color | {"color":"#323232","opacity":100} | Buttons |
| Border Color | color | {"color":"#426bcc","opacity":100} | Buttons |
| Fonts | boolean | false | Buttons |
| Font | font | {"font":"system-ui","font_set":"GOOGLE"} | Buttons |
| Font Size | number | 14 | Buttons |
| Bold Font | boolean | true | Buttons |
| Text Case | choice | none | Buttons |
| Borders | boolean | false | Buttons |
| Border Width | number | Buttons | |
| Corner Radius | number | Buttons | |
| Padding | boolean | false | Buttons |
| Top/Button Padding | number | 12 | Buttons |
| Left/Right Padding | number | 20 | Buttons |
| Image / Lottie / Video | choice | image | |
| Image | group | ||
| Image | image | {"size_type":"auto","src":"","alt":null,"loading":"disabled"} | Image |
| Lottie Animation | group | ||
| Source Type | choice | url | Lottie Animation |
| Lottie URL | text | https://assets9.lottiefiles.com/packages/lf20_PBgNop.json | Lottie Animation |
| JSON Animation File | file | Lottie Animation | |
| Loading | choice | lazy | Lottie Animation |
| Play Mode | choice | normal | Lottie Animation |
| Direction | choice | 1 | Lottie Animation |
| Width | text | 100% | Lottie Animation |
| Height | text | Lottie Animation | |
| Animation speed | number | 1 | Lottie Animation |
| Show Controls | boolean | Lottie Animation | |
| Play On-Hover | boolean | Lottie Animation | |
| Autoplay | boolean | true | Lottie Animation |
| Loop | boolean | true | Lottie Animation |
| Video | group | ||
| Video Type | choice | file | Video |
| Video File | videoplayer | Video | |
| Video Embed | embed | Video | |
| Form | group | ||
| Enable | boolean | Form | |
| Selector | form | Form | |
| Layout Settings | group | ||
| Text Alignment | choice | flex-start | Layout Settings |
| Max Width | number | 1240 | Layout Settings |
| Switch Column Sides | boolean | Layout Settings | |
| Content Distribution | number | 50 | Layout Settings |
| Background | group | ||
| Background Type | choice | none | Background |
| Color | color | {"color":"#4b8bec","opacity":100} | Background |
| Gradient Type | choice | horizontal | Background |
| Gradient 1 | color | {"color":"#4b8bec","opacity":100} | Background |
| Gradient 2 | color | {"color":"#ffffff","opacity":100} | Background |
| Background Image | image | {"size_type":"auto","src":"","alt":null,"loading":"disabled"} | Background |
| Size | choice | cover | Background |
| Image Overlay | group | Background | |
| Enable Image Overlay | boolean | Image Overlay | |
| Image Overlay Color | color | {"color":"#4b8bec"} | Image Overlay |
| Image Overlay Opacity | number | 50 | Image Overlay |
| Video File | videoplayer | Background | |
| Video Overlay | group | Background | |
| Enable Video Overlay | boolean | Video Overlay | |
| Video Overlay Color | color | {"color":"#4b8bec"} | Video Overlay |
| Video Overlay Opacity | number | 50 | Video Overlay |
| Styles | group | ||
| Preheader Color | color | {"color":"#4678EE","opacity":100} | Styles |
| Padding | group | Styles | |
| Desktop | group | Padding | |
| Enable Padding | boolean | Desktop | |
| Top | number | 120 | Desktop |
| Bottom | number | 120 | Desktop |
| Left | number | 20 | Desktop |
| Right | number | 20 | Desktop |
| Mobile | group | Padding | |
| Enable Mobile Padding | boolean | Mobile | |
| Top | number | 120 | Mobile |
| Bottom | number | 120 | Mobile |
| Left | number | 20 | Mobile |
| Right | number | 20 | Mobile |
Lottie Animation
LottieFiles is a platform that allows designers to update animations for you to browse and download.
The Lottie Animation module allows you to embed a Lottie animation into your site. The module uses a public Lottie JSON URL as a source for your animation. You can change the play mode, direction, width, height, animation speed, autoplay, and more.
Fields Overview
| Field | Type | Default | Parent |
| Source Type | choice | url | |
| Lottie URL | text | https://assets9.lottiefiles.com/packages/lf20_PBgNop.json | |
| JSON Animation File | file | ||
| Loading | choice | lazy | |
| Play Mode | choice | normal | |
| Direction | choice | 1 | |
| Width | text | 100% | |
| Height | text | ||
| Animation speed | number | 1 | |
| Show Controls | boolean | ||
| Play On-Hover | boolean | ||
| Autoplay | boolean | true | |
| Loop | boolean | true | |
| Styles | group | ||
| Background Color | color | {"color":"#ffffff","opacity":0} | Styles |
Modal Card
Modals are a type of triggerable window that takes relevance away from the main window to highlight pop-up content. A card about is a stylized boxed container with relevant content of a specific person or subject.
The Modal Card module, like any other modal module, triggers a pop-up card when referenced through a link or button. The card features a rich text field, a button group, an image, and a form. It also includes multiple styling settings for the card’s borders, shadow, padding, background, and closing button. The required HTML ID field allows you to input a unique identifier that can then be referenced through any Href fields, which can be set within a call to action or an anchor.
Fields Overview
| Field | Type | Default | Parent |
| HTML ID | text | unique-identifier | |
| Content | richtext | <h1>Your marketing team, from the ground up</h1><p>Your pain? We understand. This is why we do what we do, and can provide you with an experience like no other.</p> | |
| Buttons | group | ||
| Button Variant | choice | filled | Buttons |
| Button Label | text | Get Started | Buttons |
| Button Icon | icon | {} | Buttons |
| Icon Size | number | 80 | Buttons |
| Button Link | link | {"url":{"content_id":null,"type":"EXTERNAL","href":""},"open_in_new_tab":false,"no_follow":false} | Buttons |
| Override Button Styles | boolean | Buttons | |
| Colors | boolean | false | Buttons |
| Background Color | color | {"color":"#426bcc","opacity":100} | Buttons |
| Text Color | color | {"color":"#323232","opacity":100} | Buttons |
| Border Color | color | {"color":"#426bcc","opacity":100} | Buttons |
| Fonts | boolean | false | Buttons |
| Font | font | {"font":"system-ui","font_set":"GOOGLE"} | Buttons |
| Font Size | number | 14 | Buttons |
| Bold Font | boolean | true | Buttons |
| Text Case | choice | none | Buttons |
| Borders | boolean | false | Buttons |
| Border Width | number | Buttons | |
| Corner Radius | number | Buttons | |
| Padding | boolean | false | Buttons |
| Top/Button Padding | number | 12 | Buttons |
| Left/Right Padding | number | 20 | Buttons |
| Image | group | ||
| Image | image | {"size_type":"auto","src":"","alt":null,"loading":"disabled"} | Image |
| Form | group | ||
| Enable | boolean | Form | |
| Selector | form | Form | |
| Styles | group | ||
| Border | group | Styles | |
| Enable | boolean | Border | |
| Width | number | 1 | Border |
| Border Color | color | {"color":"#000000","opacity":100} | Border |
| Border radius | group | Styles | |
| Enable | boolean | Border radius | |
| Value | number | 8 | Border radius |
| Box Shadow | group | Styles | |
| Enable | boolean | Box Shadow | |
| Type | choice | normal | Box Shadow |
| Box Shadow Color | color | {"color":"#000000","opacity":30} | Box Shadow |
| Padding | group | Styles | |
| Enable | boolean | Padding | |
| Top | number | 42 | Padding |
| Bottom | number | 42 | Padding |
| Left | number | 50 | Padding |
| Right | number | 50 | Padding |
| Background | group | Styles | |
| Background Type | choice | color | Background |
| Color | color | {"color":"#ffffff","opacity":100} | Background |
| Gradient Type | choice | horizontal | Background |
| Gradient 1 | color | {"color":"#4b8bec","opacity":100} | Background |
| Gradient 2 | color | {"color":"#ffffff","opacity":100} | Background |
| Background Image | image | {"size_type":"auto","src":"","alt":null,"loading":"disabled"} | Background |
| Size | choice | cover | Background |
| Close Button Color | group | Styles | |
| Close Button Color | color | {"color":"#929292","opacity":100} | Close Button Color |
Navbar
The navbar is where you will be able to edit the website logo, navigation menu, the primary call to action, and the secondary call to action.
The Navbar module allows you to add a logo, navigation links, buttons, search bar, and much more. To learn more about how the header and its menus work, check out this article on customizing the global header content.
Fields Overview
| Field | Type | Default | Parent |
| Logo | group | ||
| Logo Type | choice | inline_svg | Logo |
| Logo SVG | group | Logo | |
| Logo SVG Code | text | <svg width="122" height="42" viewBox="0 0 308 104" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M117.571 80.11c-.399 0-.773-.149-1.122-.448-.299-.349-.449-.723-.449-1.122 0-.3.025-.524.075-.673l17.429-47.95c.499-1.446 1.496-2.169 2.992-2.169h11.67c1.496 0 2.493.723 2.992 2.17l17.429 47.949c.05.15.075.374.075.673 0 .399-.174.773-.524 1.122-.299.3-.648.449-1.047.449h-9.724c-1.197 0-2.045-.549-2.544-1.646l-2.693-7.256h-19.598l-2.693 7.256c-.499 1.097-1.347 1.646-2.544 1.646h-9.724Zm18.102-20.121h13.316l-6.658-19.075-6.658 19.075ZM191.369 80.11c-10.573 0-15.859-4.961-15.859-14.885V51.386h-5.909c-.499 0-.948-.174-1.347-.524-.349-.398-.523-.847-.523-1.346v-6.433c0-.549.174-.997.523-1.347.399-.349.848-.523 1.347-.523h5.909V28.87c0-.549.175-.997.524-1.346.399-.35.848-.524 1.346-.524h9.201c.549 0 .998.174 1.347.524.349.349.523.797.523 1.346v12.343h9.351c.548 0 .997.174 1.346.523.399.35.599.798.599 1.347v6.433c0 .549-.2.997-.599 1.346-.349.35-.798.524-1.346.524h-9.351v12.717c0 1.745.324 3.067.973 3.965.648.897 1.695 1.346 3.142 1.346h5.909c.549 0 .997.2 1.347.598.349.35.523.798.523 1.347v6.882c0 .499-.174.947-.523 1.346-.35.35-.798.524-1.347.524h-7.106ZM208.322 80.11a2.088 2.088 0 0 1-1.422-.523c-.349-.349-.523-.798-.523-1.346V28.87c0-.55.174-.998.523-1.347.399-.35.873-.524 1.422-.524h9.35c.549 0 .998.174 1.347.524.349.349.523.797.523 1.346v49.37c0 .5-.174.948-.523 1.347-.349.35-.798.524-1.347.524h-9.35ZM239.817 80.859c-2.643 0-5.062-.499-7.256-1.496-2.144-1.047-3.84-2.469-5.086-4.264-1.197-1.795-1.796-3.765-1.796-5.91 0-3.39 1.397-6.133 4.189-8.228 2.843-2.144 6.733-3.615 11.67-4.413l9.275-1.422v-.897c0-1.846-.374-3.192-1.122-4.04-.748-.847-2.019-1.271-3.815-1.271-.997 0-1.845.174-2.543.523-.648.35-1.396.873-2.244 1.571-.648.549-.737.633-1.228 1.124-.491.492-.941.597-1.241.597h-8.677c-.499 0-.923-.15-1.272-.45a1.516 1.516 0 0 1-.374-1.196c.05-1.347.723-2.843 2.02-4.488 1.297-1.696 3.267-3.142 5.91-4.339 2.643-1.197 5.909-1.795 9.799-1.795 6.184 0 10.772 1.371 13.764 4.114 2.992 2.693 4.488 6.358 4.488 10.996v22.666c0 .499-.174.947-.523 1.346-.35.35-.798.524-1.347.524h-9.201c-.499 0-.947-.175-1.346-.524-.349-.399-.524-.847-.524-1.346v-2.618c-1.097 1.546-2.618 2.817-4.563 3.815-1.945.947-4.264 1.421-6.957 1.421Zm3.74-8.827c2.195 0 3.965-.723 5.312-2.17 1.396-1.445 2.094-3.54 2.094-6.283v-.897l-6.209 1.047c-4.189.798-6.283 2.294-6.283 4.488 0 1.147.474 2.07 1.421 2.768.997.698 2.219 1.047 3.665 1.047ZM288.722 80.859c-4.089 0-7.505-.573-10.248-1.72-2.743-1.147-4.787-2.519-6.134-4.115-1.297-1.596-1.945-3.042-1.945-4.338 0-.5.175-.898.524-1.197.399-.35.823-.524 1.271-.524h9.052c.299 0 .548.1.748.3.848.548 1.321.872 1.421.972.948.698 1.82 1.247 2.618 1.645.848.35 1.845.524 2.992.524 1.347 0 2.444-.25 3.292-.748.897-.549 1.346-1.296 1.346-2.244 0-.798-.249-1.446-.748-1.945-.449-.499-1.346-.972-2.693-1.421-1.296-.499-3.291-.998-5.984-1.496-8.627-1.746-12.941-5.735-12.941-11.969 0-2.045.648-3.99 1.945-5.835 1.346-1.895 3.291-3.416 5.834-4.563 2.594-1.147 5.686-1.72 9.276-1.72 3.641 0 6.782.573 9.425 1.72 2.693 1.097 4.738 2.444 6.134 4.04 1.397 1.546 2.095 2.967 2.095 4.264 0 .448-.175.847-.524 1.196-.299.35-.673.524-1.122.524h-8.228c-.449 0-.798-.1-1.047-.3-.599-.298-1.197-.672-1.796-1.121-.897-.599-1.695-1.047-2.393-1.347-.649-.349-1.497-.523-2.544-.523-1.247 0-2.219.274-2.917.822-.698.549-1.047 1.247-1.047 2.095 0 .748.199 1.371.598 1.87.449.449 1.322.898 2.618 1.347 1.347.448 3.366.922 6.059 1.42 4.887.849 8.428 2.37 10.622 4.564 2.245 2.144 3.367 4.663 3.367 7.555 0 3.74-1.671 6.733-5.012 8.977-3.292 2.194-7.929 3.291-13.914 3.291Z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M105.326.554c11.219 0 18.797 11.453 14.411 21.779L100.401 67.86c-6.686 20.651-26.077 35.586-48.955 35.586C23.033 103.446 0 80.413 0 52 0 23.712 22.832.756 51.073.556V.554h54.253ZM95.436 52c0 24.295-19.695 43.99-43.99 43.99S7.456 76.295 7.456 52 27.15 8.01 51.446 8.01 95.436 27.705 95.436 52Zm-1.28-24.556a.847.847 0 0 0 .578.212h15.57c.223 0 .405-.07.546-.212a.692.692 0 0 0 .243-.547v-3.065a.692.692 0 0 0-.243-.547.737.737 0 0 0-.546-.212h-7.8l2.792-2.823a30.445 30.445 0 0 0 2.823-2.397c.809-.79 1.426-1.61 1.851-2.459.445-.87.668-1.8.668-2.792 0-1.316-.314-2.459-.941-3.43-.627-.991-1.548-1.76-2.762-2.307-1.194-.546-2.651-.82-4.371-.82-1.254 0-2.387.183-3.4.547a7.7 7.7 0 0 0-2.579 1.548 7.234 7.234 0 0 0-1.67 2.246 6.906 6.906 0 0 0-.606 2.732c0 .182.06.334.182.455a.618.618 0 0 0 .455.182h3.794c.223 0 .425-.05.607-.152.202-.1.344-.283.425-.546.08-.425.222-.84.425-1.244.202-.405.496-.729.88-.972.405-.263.901-.394 1.487-.394.87 0 1.477.233 1.821.698.365.445.547 1.012.547 1.7 0 .586-.253 1.214-.759 1.881-.506.668-1.285 1.437-2.337 2.307-1.032.85-2.357 1.892-3.976 3.126l-3.157 3.096c-.344.263-.556.547-.637.85-.081.283-.121.496-.121.637v2.155c0 .223.07.405.212.547Z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="m46.497 17.703 20.589 3.53L83.76 38.2l-2.605 11.32 5.176 10.587L74.26 78.362 52.83 86.47 28.69 78.326 17.15 47.454l8.883-18.95 11.83-2.167 8.635-8.634ZM34.36 29.84l-6.395 1.17-4.61 9.835L34.36 29.84ZM22.546 53.855l7.073 18.922 2.497-8.418-9.57-10.504ZM34.33 66.79l-2.018 6.801 4.919-3.617-2.901-3.184Zm5.18 1.507-4.245-4.66 1.407-4.743 8.988 4.881-6.15 4.522Zm-.373 3.769-6.352 4.671 15.316 5.168-8.964-9.84ZM53.2 83.32 41.417 70.39l6.976-5.13 21.574 11.718L53.2 83.321Zm23.254-13.378 6.643-10.045-2.944-6.022-3.7 16.067Zm1.735-20.083-5.807 25.226-21.484-11.67 24.949-18.348 2.342 4.792Zm1.003-4.357.803-3.485-1.844 1.356 1.041 2.13Zm-2.297-4.699.005-.004-.007.001.002.003Zm-1.302-2.663 3.661-.511-7.784-7.921 4.123 8.432ZM65.605 24.12 72.66 38.55l-31.248 4.367 4.507-15.195 19.685-3.604Zm-7.267-1.53-11.52 2.109 1.153-3.887 10.368 1.777Zm-14.287 1.54-1.317 1.316.98-.179.337-1.137Zm-1.235 4.162-3.584.657L22.639 45.54l15.711-2.195 4.466-15.055ZM37.47 46.31l-14.372 2.008 11.864 6.444 2.508-8.452Zm.02 9.825 10.675 5.798L74.59 42.499l-.63-1.288-33.428 4.671-3.041 10.253Zm-3.346 1.385-1.094 3.687-7.72-8.474 8.814 4.787Z" fill="#fff"/></svg> | Logo SVG |
| Override SVG Fill Color | boolean | Logo SVG | |
| Inherit From Nav Color | boolean | Logo SVG | |
| SVG Fill Color | color | {"color":"#4678EE","opacity":100} | Logo SVG |
| Logo File | image | {"src":"","alt":null,"loading":"eager","size_type":"auto_custom_max","height":48,"max_width":48,"max_height":200} | Logo |
| Link | link | {"url":{"content_id":null,"type":"EXTERNAL","href":""},"open_in_new_tab":false,"no_follow":false} | Logo |
| Navigation | group | ||
| Main Navigation Style | choice | simple | Navigation |
| Menu Type | choice | custom | Navigation |
| Custom Menu | simplemenu | Navigation | |
| Hubspot Menu | menu | default | Navigation |
| Menu Items | group | Navigation | |
| Menu Item Label | text | Menu Items | |
| Menu Item Type | choice | link | Menu Items |
| Mega Menu Columns | group | Menu Items | |
| Mega Menu Items | group | Mega Menu Columns | |
| Mega Menu Item Type | choice | link | Mega Menu Items |
| Menu Item Label | text | Mega Menu Items | |
| Menu Item Link | link | {"url":{"content_id":null,"type":"EXTERNAL","href":""},"open_in_new_tab":false,"no_follow":false} | Mega Menu Items |
| Menu Item Rich Text | richtext | Mega Menu Items | |
| Menu Item Image | image | {"src":"","alt":null,"loading":"lazy","size_type":"auto_custom_max","height":200,"max_width":200,"max_height":200} | Mega Menu Items |
| Button Variant | choice | filled | Mega Menu Items |
| Button Label | text | Get Started | Mega Menu Items |
| Button Icon | icon | {} | Mega Menu Items |
| Icon Size | number | 80 | Mega Menu Items |
| Button Link | link | {"url":{"content_id":null,"type":"EXTERNAL","href":""},"open_in_new_tab":false,"no_follow":false} | Mega Menu Items |
| Override Button Styles | boolean | Mega Menu Items | |
| Colors | boolean | false | Mega Menu Items |
| Background Color | color | {"color":"#426bcc","opacity":100} | Mega Menu Items |
| Text Color | color | {"color":"#323232","opacity":100} | Mega Menu Items |
| Border Color | color | {"color":"#426bcc","opacity":100} | Mega Menu Items |
| Fonts | boolean | false | Mega Menu Items |
| Font | font | {"font":"system-ui","font_set":"GOOGLE"} | Mega Menu Items |
| Font Size | number | 14 | Mega Menu Items |
| Bold Font | boolean | true | Mega Menu Items |
| Text Case | choice | none | Mega Menu Items |
| Borders | boolean | false | Mega Menu Items |
| Border Width | number | Mega Menu Items | |
| Corner Radius | number | Mega Menu Items | |
| Padding | boolean | false | Mega Menu Items |
| Top/Button Padding | number | 12 | Mega Menu Items |
| Left/Right Padding | number | 20 | Mega Menu Items |
| Menu Item Link | link | {"url":{"content_id":null,"type":"EXTERNAL","href":""},"open_in_new_tab":false,"no_follow":false} | Menu Items |
| Call to Action Buttons | group | ||
| Buttons | group | Call to Action Buttons | |
| Button Variant | choice | filled | Buttons |
| Button Label | text | Get Started | Buttons |
| Button Icon | icon | {} | Buttons |
| Icon Size | number | 80 | Buttons |
| Button Link | link | {"url":{"content_id":null,"type":"EXTERNAL","href":""},"open_in_new_tab":false,"no_follow":false} | Buttons |
| Override Button Styles | boolean | Buttons | |
| Colors | boolean | false | Buttons |
| Background Color | color | {"color":"#426bcc","opacity":100} | Buttons |
| Text Color | color | {"color":"#323232","opacity":100} | Buttons |
| Border Color | color | {"color":"#426bcc","opacity":100} | Buttons |
| Fonts | boolean | false | Buttons |
| Font | font | {"font":"system-ui","font_set":"GOOGLE"} | Buttons |
| Font Size | number | 14 | Buttons |
| Bold Font | boolean | true | Buttons |
| Text Case | choice | none | Buttons |
| Borders | boolean | false | Buttons |
| Border Width | number | Buttons | |
| Corner Radius | number | Buttons | |
| Padding | boolean | false | Buttons |
| Top/Button Padding | number | 12 | Buttons |
| Left/Right Padding | number | 20 | Buttons |
| Auxiliary Navigation | group | ||
| Enable | boolean | Auxiliary Navigation | |
| Left Side | group | Auxiliary Navigation | |
| Menu Item Label | text | Left Side | |
| Menu Item Link | link | {"url":{"content_id":null,"type":"EXTERNAL","href":""},"open_in_new_tab":false,"no_follow":false} | Left Side |
| Right Side | group | Auxiliary Navigation | |
| Menu Item Label | text | Right Side | |
| Menu Item Link | link | {"url":{"content_id":null,"type":"EXTERNAL","href":""},"open_in_new_tab":false,"no_follow":false} | Right Side |
| Search | group | ||
| Show Search Button | boolean | Search | |
| Button Location | choice | main_navbar | Search |
| Language Swithcer | group | ||
| Show Language Switcher | boolean | Language Swithcer | |
| Button Location | choice | main_navbar | Language Swithcer |
| Styles | group | ||
| Menu Alignment | group | Styles | |
| Main Menu Alignment | alignment | {"horizontal_align":"LEFT","vertical_align":"TOP"} | Menu Alignment |
| Navbar Behavior | group | Styles | |
| Sticky Nav | boolean | false | Navbar Behavior |
| Floating Nav | boolean | false | Navbar Behavior |
| Navbar Background | group | Styles | |
| Background Color | color | {"color":"#2C2C2C","opacity":100} | Navbar Background |
| Background Gradient | gradient | Navbar Background | |
| Background Image | backgroundimage | Navbar Background | |
| Glass Background Effect | boolean | Navbar Background | |
| Auxiliary Nav Background | group | Styles | |
| Background Color | color | {"color":"#2C2C2C","opacity":100} | Auxiliary Nav Background |
| Background Gradient | gradient | Auxiliary Nav Background | |
| Background Image | backgroundimage | Auxiliary Nav Background | |
| Theme Overrides | group | Styles | |
| Corner Radius | number | 0 | Theme Overrides |
| Shadows | choice | none | Theme Overrides |
Pricing Table
A pricing table is a type of table of contents designed to compare multiple pricing plans, price comparisons, or subscriptions alongside features for each column.
The Pricing Table 01 module features highly customizable contents. Each column header includes multiple rich text instances, a button group, styling overrides, and more. The rest of the cells also allow for deep customization because each uses a Custom Rich Text module. You can use the style tab to make general style tweaks that can then be overridden locally by every cell.
Fields Overview
| Field | Type | Default | Parent |
| Header | group | ||
| Columns | group | Header | |
| Featured | boolean | Columns | |
| Column background | group | Columns | |
| Overwrite | boolean | Column background | |
| Color | color | Column background | |
| Title | richtext | <h3>Basic</h3> | Columns |
| Content | richtext | <h4><span style="font-size: 32px;">$30</span><span style="font-size: 14px;">/mo</span></h4> <p>Set the foundation with all your team needs for basic data integrations.</p> | Columns |
| Buttons | group | Columns | |
| Button Variant | choice | filled | Buttons |
| Button Label | text | Get Started | Buttons |
| Button Icon | icon | {} | Buttons |
| Icon Size | number | 80 | Buttons |
| Button Link | link | {"url":{"content_id":null,"type":"EXTERNAL","href":""},"open_in_new_tab":false,"no_follow":false} | Buttons |
| Override Button Styles | boolean | Buttons | |
| Colors | boolean | false | Buttons |
| Background Color | color | {"color":"#426bcc","opacity":100} | Buttons |
| Text Color | color | {"color":"#323232","opacity":100} | Buttons |
| Border Color | color | {"color":"#426bcc","opacity":100} | Buttons |
| Fonts | boolean | false | Buttons |
| Font | font | {"font":"system-ui","font_set":"GOOGLE"} | Buttons |
| Font Size | number | 14 | Buttons |
| Bold Font | boolean | true | Buttons |
| Text Case | choice | none | Buttons |
| Borders | boolean | false | Buttons |
| Border Width | number | Buttons | |
| Corner Radius | number | Buttons | |
| Padding | boolean | false | Buttons |
| Top/Button Padding | number | 12 | Buttons |
| Left/Right Padding | number | 20 | Buttons |
| Rows | group | ||
| Title | richtext | Rows | |
| Columns | group | Rows | |
| Content | richtext | Columns | |
| Highlight | group | Rows | |
| Enabled | boolean | Highlight | |
| Color | color | Highlight | |
| Styles | group | ||
| Border Color | color | {"color":"#515151","opacity":100} | Styles |
| Features Column | group | Styles | |
| Font | font | Features Column | |
| Background Settings | group | Features Column | |
| Background Color | color | Background Settings | |
| Background Gradient | gradient | Background Settings | |
| Background Image | backgroundimage | Background Settings | |
| Glass Background Effect | boolean | Background Settings | |
| Spotlight Column | group | Styles | |
| Font | font | Spotlight Column | |
| Background Settings | group | Spotlight Column | |
| Background Color | color | Background Settings | |
| Background Gradient | gradient | Background Settings | |
| Background Image | backgroundimage | Background Settings | |
| Glass Background Effect | boolean | Background Settings | |
| Button Styles | group | Styles | |
| Colors | group | Button Styles | |
| Background Color | color | {"color":"#426bcc","opacity":100} | Colors |
| Text Color | color | {"color":"#323232","opacity":100} | Colors |
| Border Color | color | {"color":"#426bcc","opacity":100} | Colors |
| Font | group | Button Styles | |
| Font | font | {"font":"system-ui","font_set":"GOOGLE"} | Font |
| Font Size | number | 14 | Font |
| Bold Font | boolean | true | Font |
| Text Case | choice | none | Font |
| Border | group | Button Styles | |
| Border Width | number | Border | |
| Corner Radius | number | Border | |
| Padding | group | Button Styles | |
| Top/Button Padding | number | 12 | Padding |
| Left/Right Padding | number | 20 | Padding |
| Mobile Styles | group | Styles | |
| Tab Hover | group | Mobile Styles | |
| Background Color | color | Tab Hover | |
| Background Gradient | gradient | Tab Hover | |
| Background Image | backgroundimage | Tab Hover | |
| Glass Background Effect | boolean | Tab Hover | |
| Tab Active | group | Mobile Styles | |
| Background Color | color | Tab Active | |
| Background Gradient | gradient | Tab Active | |
| Background Image | backgroundimage | Tab Active | |
| Glass Background Effect | boolean | Tab Active |
Social Sharing
A social sharing is a listing of buttons or links that lead to your social media pages.
The Social Sharing features multiple social network icons meant to redirect the user to the personal page of each platform. The module allows for any custom icons and links.
Fields Overview
| Field | Type | Default | Parent |
| Alignment | choice | flex-start | |
| Link URL | text | ||
| group | |||
| Enable | boolean | ||
| Link | text | http://www.facebook.com/share.php?u= | |
| Twitter / X | group | ||
| Enable | boolean | Twitter / X | |
| Link | text | https://twitter.com/intent/tweet?original_referer=&url=&source=tweetbutton&text= | Twitter / X |
| group | |||
| Enable | boolean | ||
| Link | text | http://www.linkedin.com/shareArticle?mini=true&url= | |
| group | |||
| Enable | boolean | ||
| Link | text | http://pinterest.com/pin/create/button/?url=&media= | |
| Pin image | image | {"size_type":"auto","src":"http://pinterest.com/pin/create/button/?url=&media=","alt":null,"loading":"disabled"} | |
| group | |||
| Enable | boolean | ||
| Link | text | mailto:?subject=Check out &body=Check out | |
| Custom Links | group | ||
| Link | text | Custom Links | |
| Icon | icon | {} | Custom Links |
| Styles | group | ||
| Button Color | group | Styles | |
| Button Color | boolean | Button Color | |
| Button Color | color | {"color":"#4678EE","opacity":100} | Button Color |
Tabs
A pricing table is a type of table of contents designed to compare multiple pricing plans, price comparisons, or subscriptions alongside features for each column.
The Pricing Table 01 module features highly customizable contents. Each column header includes multiple rich text instances, a button group, styling overrides, and more. The rest of the cells also allow for deep customization because each uses a Custom Rich Text module. You can use the style tab to make general style tweaks that can then be overridden locally by every cell.
Fields Overview
| Field | Type | Default | Parent |
| Tabs | group | ||
| Tab Title | text | Atlas Tab | Tabs |
| Pre Header | text | Get started | Tabs |
| Content | richtext | <h1>This is the <strong>Custom Rich Text</strong> module</h1> <p> Feel free to edit this text to reflect your unique voice and message. Tell visitors what you do, why you do it, and what sets you apart.</p> | Tabs |
| Image Options | group | Tabs | |
| Image | image | {"size_type":"auto","src":"","alt":null,"loading":"disabled"} | Image Options |
| Full Width | boolean | Image Options | |
| Layout Options | group | Tabs | |
| Number Of columns | choice | one-col | Layout Options |
| Swap Sides | boolean | Layout Options | |
| Buttons | group | Tabs | |
| Button Variant | choice | filled | Buttons |
| Button Label | text | Get Started | Buttons |
| Button Icon | icon | {} | Buttons |
| Icon Size | number | 80 | Buttons |
| Button Link | link | {"url":{"content_id":null,"type":"EXTERNAL","href":""},"open_in_new_tab":false,"no_follow":false} | Buttons |
| Override Button Styles | boolean | Buttons | |
| Colors | boolean | false | Buttons |
| Background Color | color | {"color":"#426bcc","opacity":100} | Buttons |
| Text Color | color | {"color":"#323232","opacity":100} | Buttons |
| Border Color | color | {"color":"#426bcc","opacity":100} | Buttons |
| Fonts | boolean | false | Buttons |
| Font | font | {"font":"system-ui","font_set":"GOOGLE"} | Buttons |
| Font Size | number | 14 | Buttons |
| Bold Font | boolean | true | Buttons |
| Text Case | choice | none | Buttons |
| Borders | boolean | false | Buttons |
| Border Width | number | Buttons | |
| Corner Radius | number | Buttons | |
| Padding | boolean | false | Buttons |
| Top/Button Padding | number | 12 | Buttons |
| Left/Right Padding | number | 20 | Buttons |
| Mobile Settings | group | ||
| Select Label | text | Select | Mobile Settings |
| Styles | group | ||
| Theme Overrides | group | Styles | |
| Corner Radius | number | 0 | Theme Overrides |
| Shadows | choice | none | Theme Overrides |
| Layout options | group | Styles | |
| Direction of Tabs | choice | horizontal | Layout options |
| Equalize Panel Height | boolean | Layout options | |
| Tab Styles | group | Styles | |
| Container Settings | group | Tab Styles | |
| Tablist Type | choice | contained | Container Settings |
| Justify Tabs | choice | Container Settings | |
| Horizontal Gap | number | 16 | Container Settings |
| Vertical Gap | number | 12 | Container Settings |
| Bottom Spacing | number | 4 | Container Settings |
| Background Settings | group | Container Settings | |
| Background Color | color | Background Settings | |
| Background Gradient | gradient | Background Settings | |
| Background Image | backgroundimage | Background Settings | |
| Glass Background Effect | boolean | Background Settings | |
| Default Tab | group | Tab Styles | |
| Body Font | font | {"size":16,"size_unit":"px"} | Default Tab |
| Corner Radius | number | Default Tab | |
| Tab Spacing | spacing | {"padding":{"top":{"value":"20","units":"px"},"right":{"value":"20","units":"px"},"bottom":{"value":"20","units":"px"},"left":{"value":"20","units":"px"}},"margin":null} | Default Tab |
| Border | border | {} | Default Tab |
| Shadows | choice | none | Default Tab |
| Background Settings | group | Default Tab | |
| Background Color | color | Background Settings | |
| Background Gradient | gradient | Background Settings | |
| Background Image | backgroundimage | Background Settings | |
| Glass Background Effect | boolean | Background Settings | |
| Active Settings | group | Tab Styles | |
| Body Font | font | {"size":16,"size_unit":"px"} | Active Settings |
| Active Indicator | border | {} | Active Settings |
| Shadows | choice | none | Active Settings |
| Background Settings | group | Active Settings | |
| Background Color | color | Background Settings | |
| Background Gradient | gradient | Background Settings | |
| Background Image | backgroundimage | Background Settings | |
| Glass Background Effect | boolean | Background Settings | |
| Hover Settings | group | Tab Styles | |
| Body Font | font | {"size":16,"size_unit":"px"} | Hover Settings |
| Border | border | {} | Hover Settings |
| Shadows | choice | none | Hover Settings |
| Background Settings | group | Hover Settings | |
| Background Color | color | Background Settings | |
| Background Gradient | gradient | Background Settings | |
| Background Image | backgroundimage | Background Settings | |
| Glass Background Effect | boolean | Background Settings | |
| Panel Styles | group | Styles | |
| Panel Spacing | spacing | {"padding":{"top":{"value":"50","units":"px"},"right":{"value":"30","units":"px"},"bottom":{"value":"50","units":"px"},"left":{"value":"30","units":"px"}},"margin":null} | Panel Styles |
| Shadows | choice | none | Panel Styles |
| Border | border | {"top":{"width":{"value":2,"units":"px"},"opacity":100,"style":"solid","color":"#515151"},"bottom":{"width":{"value":2,"units":"px"},"opacity":100,"style":"solid","color":"#515151"},"left":{"width":{"value":2,"units":"px"},"opacity":100,"style":"solid","color":"#515151"},"right":{"width":{"value":2,"units":"px"},"opacity":100,"style":"solid","color":"#515151"}} | Panel Styles |
| Corner Radius | number | Panel Styles | |
| Background Settings | group | Panel Styles | |
| Background Color | color | Background Settings | |
| Background Gradient | gradient | Background Settings | |
| Background Image | backgroundimage | Background Settings | |
| Glass Background Effect | boolean | Background Settings | |
| Custom Select Styles | group | Styles | |
| Arrow Color | color | {"color":"#fafafa","opacity":100} | Custom Select Styles |
| Label Styles | group | Custom Select Styles | |
| Label Font | font | {"size":16,"size_unit":"px"} | Label Styles |
| Selected Option | group | Custom Select Styles | |
| Selected Option Font | font | {"size":16,"size_unit":"px"} | Selected Option |
| Selected Background | group | Selected Option | |
| Background Color | color | Selected Background | |
| Background Gradient | gradient | Selected Background | |
| Background Image | backgroundimage | Selected Background | |
| Glass Background Effect | boolean | Selected Background | |
| Option List Settings | group | Custom Select Styles | |
| Option List Font | font | {"size":16,"size_unit":"px"} | Option List Settings |
| Option Background | group | Option List Settings | |
| Background Color | color | Option Background | |
| Background Gradient | gradient | Option Background | |
| Background Image | backgroundimage | Option Background | |
| Glass Background Effect | boolean | Option Background | |
| Option List selected Font | font | {"size":16,"size_unit":"px"} | Option List Settings |
| Active Option Background (When option is selected) | group | Option List Settings | |
| Background Color | color | Active Option Background (When option is selected) | |
| Background Gradient | gradient | Active Option Background (When option is selected) | |
| Background Image | backgroundimage | Active Option Background (When option is selected) | |
| Glass Background Effect | boolean | Active Option Background (When option is selected) | |
| Preheader Color | color | {"color":"#4678EE","opacity":100} | Styles |
Testimonials
A testimonials section is used to display your past clients’ experiences through quotes. The slider feature allows the user to navigate through your cards by dragging them.
The Testimonials module allows you to exhibit cards with your client’s information and quotes. You can choose between a card grid view or a slider view. Each card features an author, the author’s position, the quote’s content, the author’s photo, a content image, a button group, and alignment settings. The style tabs allows for border, shadow and background settings for all cards.
Fields Overview
| Field | Type | Default | Parent |
| Testimonials | group | ||
| Author | text | Natasha Brown | Testimonials |
| Position | text | Marketing Manager, Drive | Testimonials |
| Content | richtext | <p>“We needed a way to show our senior leadership team that marketing was producing results, and that’s hard when your metrics are scattered. This dashboard saved the day.”</p> | Testimonials |
| Autor Photo | image | {"size_type":"auto","src":"","alt":null,"loading":"disabled"} | Testimonials |
| Buttons | group | Testimonials | |
| Button Variant | choice | filled | Buttons |
| Button Label | text | Get Started | Buttons |
| Button Icon | icon | {} | Buttons |
| Icon Size | number | 80 | Buttons |
| Button Link | link | {"url":{"content_id":null,"type":"EXTERNAL","href":""},"open_in_new_tab":false,"no_follow":false} | Buttons |
| Override Button Styles | boolean | Buttons | |
| Colors | boolean | false | Buttons |
| Background Color | color | {"color":"#426bcc","opacity":100} | Buttons |
| Text Color | color | {"color":"#323232","opacity":100} | Buttons |
| Border Color | color | {"color":"#426bcc","opacity":100} | Buttons |
| Fonts | boolean | false | Buttons |
| Font | font | {"font":"system-ui","font_set":"GOOGLE"} | Buttons |
| Font Size | number | 14 | Buttons |
| Bold Font | boolean | true | Buttons |
| Text Case | choice | none | Buttons |
| Borders | boolean | false | Buttons |
| Border Width | number | Buttons | |
| Corner Radius | number | Buttons | |
| Padding | boolean | false | Buttons |
| Top/Button Padding | number | 12 | Buttons |
| Left/Right Padding | number | 20 | Buttons |
| Featured Image | group | Testimonials | |
| Use Custom Image | boolean | Featured Image | |
| Featured Image | image | {"size_type":"auto","src":"","alt":null,"loading":"disabled"} | Featured Image |
| Layout Settings | group | Testimonials | |
| Alignment | choice | flex-start | Layout Settings |
| Layout | group | ||
| Vertical Alignment | choice | stretch | Layout |
| Horizontal Gap | number | 20 | Layout |
| Vertical Gap | number | 20 | Layout |
| Enable Max Width | boolean | Layout | |
| Max Width | number | 225 | Layout |
| Horizontal Alignment | choice | space-evenly | Layout |
| Styles | group | ||
| Border | group | Styles | |
| Enable | boolean | Border | |
| Width | number | 1 | Border |
| Border Color | color | {"color":"#000000","opacity":100} | Border |
| Border radius | group | Styles | |
| Enable | boolean | Border radius | |
| Value | number | 8 | Border radius |
| Box Shadow | group | Styles | |
| Enable | boolean | Box Shadow | |
| Type | choice | normal | Box Shadow |
| Box Shadow Color | color | {"color":"#000000","opacity":30} | Box Shadow |
| Background | group | Styles | |
| Background Type | choice | Background | |
| Color | color | {"color":"#1d1d1d","opacity":100} | Background |
| Gradient Type | choice | horizontal | Background |
| Gradient 1 | color | {"color":"#1d1d1d","opacity":100} | Background |
| Gradient 2 | color | {"color":"#000000","opacity":100} | Background |
| Background Image | image | {"size_type":"auto","src":"","alt":null,"loading":"disabled"} | Background |
| Size | choice | cover | Background |
