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.
sob_03.jpg
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).
sob_04.jpg
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.
sob_05.jpg
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){}
sob_06.jpg

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

Contact Us