Use Custom CSS tab of your ShortPoint Design Element to add more customization to it. You can also make it possible/impossible to copy the page design to other pages.

TABLE OF CONTENTS

• Before we begin
• Customizing ShortPoint Design Element
• Advanced options
  • Adding ID attribute
  • Adding Class attribute
    • Allow Copying ShortPoint Design Element
    • Disable Copying Whole Page Design

Before we begin

• Basic knowledge of CSS is required. Check our basic and advanced tutorials on how to use Custom CSS. 
• You can use Settings and/or Advanced tabs to improve the look features of your Design Elements without using Custom CSS.

Customizing ShortPoint Design Element

Write your CSS code in the Custom CSS field. 

Important: Please, note that you don't need to add declarations for the current Design Element, since the class for it will be auto-generated at runtime, and might be changed whenever you edit your page.

For more information, visit our solution tutorials on Custom CSS:

• How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial)
• Add Custom CSS to a ShortPoint Element Right from the Page Builder (Advanced Tutorial)

Check our Custom CSS solutions folder. There you will find a bunch of already created Custom CSS codes for various ShortPoint Design Elements.

Advanced options

You can add ID and Class attributes to your ShortPoint Design Elements. These options are useful to:

• apply the CSS that overrides your previously set settings or added custom CSS codes (use either ID or Class attribute);
• be accessed from JavaScript (use either ID or Class attribute);
• allow copying this Design Element (use Class attribute);
• disable copying whole page design (use Class attribute).

Adding ID attribute

Type ID attribute name to ID field.

Adding Class attribute

Type the Class attribute name to Class field.

Note: to provide multiple CSS class names to the same Design Element, separate them with a space (e.g: class-1 class-2 will add class-1 and class-2 as two separate CSS classes).

Allow Copying ShortPoint Design Element

To allow copying the current ShortPoint Design Element, use the CSS Class name shortpoint-copy

By using this Class name, other users will be able to copy this Design Element, and the whole page design.

Find out more about Copy & Paste feature, by checking these solution articles:

• Enable Copying Elements from your Page
• ShortPoint Copy & Paste Feature for Modern Pages
• ShortPoint Live Demos with Copy and Paste Magic

Disable Copying Whole Page Design

To disable copying the whole page design, add the CSS Class name shortpoint-disable-copy-all

By adding this Class to only one ShortPoint Design Element on the page, copying the whole page design will be disabled.

Related articles:

• Managing Visibility of ShortPoint Design Elements
• Managing Paddings and Margins for ShortPoint Design Elements
• How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial)
• Add Custom CSS to a ShortPoint Element Right from the Page Builder (Advanced Tutorial)
• Enable Copying Elements from your Page
• ShortPoint Copy & Paste Feature for Modern Pages
• ShortPoint Live Demos with Copy and Paste Magic