Change the properties of your page component
Click the gear button on top of the code editor to open the settings menu. (1)
Change Name (2)
Click to change the name of your component.
A modal will open where you can edit the name of your page component.
Click Save Changes if you are done editing.
Settings & Info (3)
Click this to open the settings & information panel for the component.
Component Settings
General properties for your page component.
You can update the following:
(1) Description: This text or HTML will be shown on top of the CMS page of the component. This can be used to give additional information to the CMS user about the component.
(2) Reload: When you have a component that uses JavaScript libraries it might be necessary to reload the website preview page after editing.
(3) Availability: Switch Off if you don't want to show this component in the CMS component list. This can be handy for components that are only used once. Doing so makes the component list more organized.
(4) Database: If you have databases active on your project you can switch a page component to a database component. Select the database (5) if you want to do this.
Click the green save button at the bottom to apply your changes.
Component Information
Some static information about your component.
(1): Shows in which pages the component is being used and how many unique style instances have been used for this component.
(2): Information color legend
(3): If you have added this component from the Upgrade Center you can unlink it. Doing so enables you to add the same component again from the Upgrade Center.
Included Libraries (4)
You can attach JavaScript and CSS libraries to your page component. These will only be loaded on the pages where the component is used. Even if you have multiple instances of the same component on your page the library will only be loaded once.
(1): Add the library files code here.
(2): Some well-known Libraries can be selected from a list here and added by clicking the button (3) to the code (1).
PageSpeed Settings
All your custom lib files will be compressed and combined into single files with the pagespeed engine. To exclude files from this action simply add data-smps-nocombine in the library link.
<script data-smps-nocombine src='swfiles/body/libfile.js' />
All lib files that are not combined are added to the head section of the page. If you want to move them to the bottom of the page you simply add the tag data-smps-movebottom
<script data-smps-nocombine data-smps-movebottom src='swfiles/body/libfile.js' />
PageSpeed Functions
Sometimes you want CMS users to add plugins and embeddable code to the site. This might not work with the pagespeed settings. You can use two functions in the code editor to force the script and link data inside these functions to be automatically converted to the correct pagespeed settings.
1. add the no combine tag
[:smps_force_nocombine:(your_code_here)/:smps_force_nocombine:]
2. add the no combine tag and move the script/link to the bottom of the page.
[:smps_force_nocombinemove:(your_code_here)/:smps_force_nocombinemove:]
Design Panels (5)
When clicking this button a right panel will open showing the design panels attached to this component.
A Design Panel is a way for non-coding designers to manipulate the CSS and JavaScript of the components.
Content Editor (6)
If your component is used on a page you will see a direct link to the CMS page for this component.
Design Editor (7)
If your component is used on a page you will see a direct link to the Design editor for this component.
Delete (8)
You can only delete a component from your project it is no longer used on any page.
If this is the case you will receive the following warning:
