Creating a Smart Object (Part 1/4 Inserting HTML and CSS)

Lets try building a smart object. We will use a button as example.

Step 01
Start off by clicking on the Create Button.
Step 02
After clicking, you will see as shown. Insert a number to SO Number(Tracking Purpose). Insert the name of Smart Object, Register Name(Name you will see when you want to edit), Editor Name(Name you will see in editor).
Step 03
Start of by inserting the HTML code within the HTML box. Give a class name that starts with aps-0*-so-wrapper for the most outer tag. * can be replace with any number. Other than that, any class can be place within the HTML code.
Step 04
Next to insert CSS code to the Fixed CSS Box. There are 3 boxes. Mobile, Tablet, and Desktop.
Each boxes are set with different media query:
  • Mobile @media screen and (min-width:0){}
  • Tablet @media screen and (min-width:768px){}
  • Desktop @media screen and (min-width:1024px){}

Can't find what you're looking for? Let us help you!

Contact Us