Prototype HTML for Preset State of QL Module:

-This is what the raw HTML would look like in Live View, fresh out of the box, no changes made.

-In editor, you'll see a highlight when you hover over a component. Ignore that for now - it's just this prototype inheriting some behaviors from the actual in-editor interface version at the bottom of this page.

Your Name Here

Add your short bio here. Keep it short and sweet, no more than a brief sentence or two.

Subscribe to My Newsletter
Free Download
Book a Meeting
Contact Me
HTML for Individual Components within QL Module:

-The HTML for each component is written out here, with requirements in the comments. CSS classes are all unique and added to superadmin sheets.

-This is what the HTML for each given component would look like when it's added to the module, before changes are made.

-The only exception is the social icons module - it's currently written as raw HTML, but in the final version it should behave like the normal social icons module (automatically updating based on the user's social links in the Back Office).

-See the prototype at the bottom of this page for what each component's settings interface looks like inside the Editor.

Your Name Here

Add Your Message Here

Add your short bio here. Keep it short and sweet, no more than a brief sentence or two.

Your Link Here
Your Link Here
HTML for In-Editor Interfaces.
-View this prototype in Editor. Hover over components to see interfaces.

-Each component has a different set of option icons based on what the user can do with them.

-The two interfaces at the bottom are two different views of the same interface element. The "+ Add Line" version is how it looks normally; the version with all the icons is what it looks like after a user clicks the "+ Add Line" button

-The Headshot component uses all available option icons, so the requirements for each type of icon are commented into the HTML for the Headshot. The other components simply list which icons they use without requirements in the comments.

-I may adjust how the icons are displayed vertically on shorter components, but that's all CSS. HTML is ready to go.

-We need to discuss the requirements for the Settings modals/wizards when you click "edit" on a given module. I could design a snazzy little popover wizard, or we could just use our normal in-editor modals for consistency.

Your Name Here

Add Your Message Here

Add your short bio here. Keep it short and sweet, no more than a brief sentence or two.

Subscribe to My Newsletter
Contact Me