Site Settings Pro Documentation
1.INTRODUCTION
Website URL : https://industry-pro.com/
Theme Compatibility : Astra, OceanWP, Beaver, Page Builder Framework, GeneratePress and Divi
- Before Installation of plugin. Please install your theme .
This plugin consists of two main panels, Admin & User Panel. Admin can install the plugin & activate the License. User can manage the site settings.
ADMIN PANEL
- Installation
- Activate Plugin
- License Activation
- Configuration
USER PANEL
- Website Settings
- Business Details
- Typography
- Colors
- Buttons
- SEO
- Menu Settings
2.ADMIN PANEL
2.1.INSTALLATION
After successful login to backend:
1. Upload or extract the documentation folder to your site’s wp-content/plugins/directory. You can also use the Add new option found in the Plugins menu in WordPress.
2. Enable/Activate the plugin from the Plugins menu in WordPress.
2.2.LICENSE ACTIVATION
1. After activation, a new page of plugin configurations is added under Settings tab. ( see screenshot ) path: Go to Network admin -> Settings -> Site Settings Pro Config
Screenshot:->
2. To activate license ( path: Go to Network admin -> Settings -> Site Settings Pro Config -> License Tab ) add License key & click Activate or save.
Screenshot:->
2.3.CONFIGURATION
This is the Global configuration of plugin which reflects to all templates/sites. Admin can configure the fetaures in configuration tab.
1. To enable features ( path: Go to Network admin -> Settings -> Site Settings Pro Config -> Configuration Tab ) check the features need to enable & click SAVE CHANGES.
- Business Details
- Typography
- Colors
- Buttons
- Menu Settings
- Advanced Settings
- SEO Settings
Screenshot:->
BUSINESS DETAILS
- This feature consists of site general settings like Site Name, Logo, Contact Information & Social info.
TYPOGRAPHY
- This feature consists of site fonts, font color & sizes of all headings & text respectively.
COLORS
- This feature contains fonts, font color & sizes of all headings & text respectively.
BUTTONS
- It consists of buttons typography i.e font,size & colors of buttons used into site.
MENU SETTINGS
- This feature adds a link to goto menu Settings.
ADVANCED SETTINGS
- This feature adds a advaned settings sub-tab under Typograpgy & Colors Tab into User panel & used when different styling for same elements is needed.
SEO SETTINGS
- This feature inserts a tab into user panel & user can add OG data for site which reflects when site link is shared somewhere.
3.USER PANEL
3.1.WEBSITE SETTING
1. When user Visits the Site Dashboard, a new page of plugin configurations is added under sidebar called SITE SETTINGS PRO. ( see screenshot )
path: Go to Admin -> Settings -> Site Settings Pro
3.2.BUSINESS DETAILS
1. This tab consists of three sub-tabs : Identity,Contact & Social.
>> In Identity tab user can add the Site name, Logo & can set the Logo width. Once user adds all thsese settings & clicks UPDATE, it will reflect directly into site frontend. ( see screenshot )
FRONTEND :
3.3.SHORTCODES
- There’s functionality to add shortcodes which can be placed anywhere into Elementor theme’s Text Editor.
- The highlighted text is shortcode ( see screenshot )
- [short var=business_name] For example, if i want to display the business name anywhere inside text .Just add the shortcode there & it will automatically be there.
- [short var=logo] If needed to display logo anywhere in site just add this shortcode & var=logo requires the image src/path. Logo will automatically be there.
- Example how shortcode (Email Address) added in Elementor Editor’s text : ( see screesnshot )
- Highlighted Email on Backend. ( see screenshot )
- Edit Frontend page using Prosite Editor & click on section wanted to Edit.Add the shortcode there.
- When Clicking Update/Save page button changes will be reflected on frontend. ( see screenshot ) .Highlighted Email added through SHORTCODE is there (On Frontend).
NOTE : The above described process of USING SHORTCODES can be
applied to each shortcode available in Setings.
> In Contact tab user can Contact Information about Site i.e Address, City, State & Zip etc. Each field has its shortcode & used anywhere.
> In Social tab user can add social links to respective social network. Each field has its shortcode & used anywhere as explained above. ( see screenshot )
3.4.TYPOGRAPHY
- This tab obeys the styling of site, i.e font family, font-weight & font-size etc.
- This Typography is applied to site only if user had disabled the FONT Settings of Elementor’s Editor ( Explained below ).
DISBALE PROSITE EDITOR DEFAULT TYPOGRAPHY & COLORS:
-
- Find Prosite Editor in Sidebar of dashboard ( path: Go to Admin -> Settings -> Prosite Editor >Settings)
- Check/Uncheck the highlighted field According to requirement.( see screenshot )
- Base Typography : Settings here of Font Family, Size 7 font weight are applied to whole website.
- Headings : Settings here will be applied to all headings into site (FROM H1 to H6).
- H1 to H6 Tabs: These settings used when user want to override the main typography of any headings. For example, user need different font family for H1 or H6 tag. ( see screenshot )
- Advanced Classes: Used when user needs different styling for some text. We’ve introduced the classes here highlighted in screenshot. Use the class where you need particular size of font. ( see screenshot ) . Highlighted text is the class you can add this class in any Element of Elementor’s & styling will be auto applied.
3.5.COLORS
- Color Settings: Here user can manage the colors of site i.e theme color, text color, buttons color etc. ( see screenshot ) . Once user adds the desired color here its automatically changed on frontend.
Screenshot:->
For example, i changed the color of link from settings to #bf7200 & updated the settings.Color is reflected on frontend ( see screenshot )
Screenshot:->
- Advanced : This tab has advanced settings of colors for theme. Two classes are created here for Light Color & Dark color of site. User can add the Colors as per choice & can use particular class anywhere in the Elementor theme’s editor.
For Example: Current dark color is #000000 & adding the class in elementor theme’s element ( see screenshot )
Screesnhot represnt how a class is applied to Element in Elementor’s Editor.
path: Go to Site -> Edit with Prosite Editor
3.6.BUTTONS
- Here user can manage the settings of buttons in website. Button’s color size hover effect everything can be managed. ( see screenshot )
Screenshot:->
Text Color: This is button’s text color.
Hover Color: This color is applied when user mouse over the button.
BG Color: This setting is for background color of button.
BG Hover Color: This color is applied to background of button when mouseover.
Radius: User can fix the radius if wanted to round of corners.
Vertical Padding: This is the vertical space around button.
Horizontal Padding: This is the horizontal space around button.
3.7.SEO
- In this setting User can add the OG (Open Graph) information regarding website which is useful in terms of SEO.
Screenshot:->
4.MENU SETTINGS
- In User Panel, this plugin also introduced setting for Menus. User can manage the Menus (Navigation) here i.e change the menu text, order etc. ( see screenshot )
path: Go to Network admin -> Settings -> Site Settings Pro Config > Menu Settings > GOTO Menu Settings
Screenshot:->
NOTE: Everytime you change any settings Click the UPDATE Button in right sidebar only when settings are saved & reflected.( see screenhot )