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

OVERVIEW

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

STEP 1

Start off by clicking on the Create Button.

STEP 2

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 3

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 4

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){}

Related articles

Let's chat

+603.7955.5148

let us help you

Can't find what you're looking for?

Get in touch
Name
Email
Contact No
Company Name
Role / Designation
I am interested in
Thank you

We will get in touch with you soon.

Ooops!
Generic Popup2