Listivo Design Settings provide a comprehensive suite of options to globally enhance the visual aspects of your website. These settings allow you to manage global colors, typography, border radius, shadows, form inputs, dropdowns, buttons, navigation arrows, paginations, and the interfaces for login and register. You can also configure ad cards, which may include customizable fields with optional icons, and elements such as user name, phone number, location, labels, rating, and description. Additional customization options are available for featured ad cards, quick preview popups, blog cards, and package styles for monetization.
Customizing these settings ensures a consistent appearance across different pages, improving usability with recognizable design patterns. Modifying these core elements helps personalize your website, making it truly unique.
How to Access Site Settings
1. To access these options, navigate to any page, hover over "Edit with Elementor," and select "Site Settings" as shown below:
2. Alternatively, you can edit any page via Elementor by clicking the hamburger icon in the top left corner
and then selecting "Site Settings."
Here's what you will see; the green box highlights options related to Listivo design:
You will have access to the following tabs:
1. Global Colors: Set global colors here. These colors are used by default in most widgets on your website. You can view this tab with a Style Guide Preview or without it.
a) With Style Guide Preview, it will look like the image below.
b) Without Style Guide Preview, it shows your current page and allows you to view color changes on a live preview.
2. Global Typography: Here, you can set global typography.
Important settings in typography include:
- Family (font family you use)
- Size
- Weight (some fonts allow variations in boldness)
- Line Height (ensure it is higher than size for optimal readability)
Note that most widgets on individual pages have their own styling options that can override these global settings, as shown in the screenshot below from a homepage edited by the Elementor Page Builder (not global design).
3. Design: This general tab includes many options related to design such as border radius, buttons, and shadows. Explore these options to further enhance your site’s aesthetics.
4. Ad Card: Globally configure how ad cards look.
Important points to note:
- Some changes in this module require you to save and reload the website to take effect, as dynamic PHP code changes cannot be instantly visualized.
- If you configure fields like attributes on your card, you have separate controls for standard cards and row cards. Make sure to configure both if you use both types of cards.
5. Featured Ad Card: This setting builds on the "Ad Card" settings and allows changes to the styles and colors of cards that are featured, effectively overwriting them.
6. Quick Preview:
Refers to the module available on a card that opens when you click the loop icon.
You’ll find multiple options related to its style and display features here.
7. Blog Card: Restyle blog cards as needed. This card displays in different contexts, like blog pages or related articles. Like the ad card, some options do not have a live preview and require saving changes in Elementor to see updates.
8. Pagination: Influences various paginations across your website, such as on search pages, blog pagination, and other related areas like user panel pages.
9. Package: Change how monetization packages appear in the pricing table.
This does not cover redesigning the "My Packages" section or choosing packages that a user already has.
