MarketMSO Upgrade – February, 2016

Advanced Functionality Disclaimer
This list may include items that you are not familiar with. These are advanced features and setup assistance is NOT included in free support from MarketMSO.

New Features / Updates


ConvertPlug is a specialized plugin built to turn your website into a lead generation powerhouse. Many websites lose a majority of traffic without having their visitors perform a desired action and ConvertPlug is designed to reduce those missed opportunities as much as possible. Quickly create custom modals and info bars from ConvertPlug's included templates, or build your own on a blank canvas if desired.

ConvertPlug – click for everything you could possibly want to know on how it works in just 7 steps

Adobe Typekit

Go to the extension's settings page under Addons → Typekit. Once there, you can enable it and enter in your kit ID. Once you have done that, your page should look something like the following:

Please note, only published kit information is accessible to the plugin, so make sure that you have published any changes to your kit. Also, if the kit ID you have entered is invalid, the Kit Information section will not display on the page. Once a valid kit ID is entered, you will be able to see the information your kit is sending to your website. If you happen to publish any changes to your kit on Typekit's website, make sure to click the Refresh button below your kit information or save your plugin settings again as this will allow us to fetch any new data you might be sending. After you have everything setup, you will find your new font family choices in the Customizer at the top of the font family controls:

Quick Confirm Action

When hovering over the Delete or Erase buttons in the Inspector, if you hold down your Shift key you will be greeted by this messaging:


Clicking these actions in this state will bypass the confirm dialog that normally appears, allowing you to more quickly remove elements from your page as needed. This is just the first of many keyboard actions we plan on adding to the interface that will allow users to build and edit pages more efficiently.

Skeleton Mode

Skeleton Mode is an alternate editing interface that focuses on page architecture rather than the visual design. You can quickly rough out page layouts, then transition to the live preview to finish your design. It's also a great tool for locating elements in more complicated layouts, providing a structural overview. If you're more partial to a “backend” page building experience, you'll feel right at home in Skeleton Mode as well.

The really neat thing about Skeleton Mode is that even though it is intended to function more architecturally or as a “backend” type of feel, you still get all the benefits of frontend editing as well! When activating Skeleton Mode, your preview window will scale down to the bottom corner of the interface, allowing you to see what you're interacting with. As you can see from the image above, we are hovering over the row in our first section, which is also highlighting that row in the preview window. Clicking on that row will bring it up in the inspector, allowing you to quickly edit anything if desired.

Color Picker

Huebert is our answer to the numerous woes we have heard from our users about the current WordPress color picker not supporting alpha transparency (womp womp). In an effort to have more control over our controls (pun intended), we set out to develop a color picker from scratch that would not only support these modern color formats, but also make selecting that perfect color as easy as possible.

The best way to pick a color with Huebert is actually to start with the top slider and select the overall hue you plan on working with. Once you're happy there, move up to the pallete and drag the iris around to tweak the saturation and lightness all at once to your exact specifications. Finally, the bottom slider allows you to mix in transparency if needed.

If you're not a “drag and drop color picker” kind of person, the input at the bottom can be used to enter colors manually as well. Huebert supports all modern web color formats including hex, rgb, and hsl, and these will all be converted to rgb on save to ensure formatting is correct. Finally, the “reset” button to the side of the input can be used to clear your input and start over if desired. Currently, Huebert is available in the Customizer but we will eventually be rolling him out to other areas like the page meta options and our Extension options soon.

Other Notable Changes

With this release of Cornerstone we have introduced some new styling options to various elements as well as including a round of bugfixes to the builder itself. As for the new styling controls, below is a list including all new parameters for each element:

  • Icon – new options include Icon Color, Background Color, Icon Size, Background Size (i.e. height, width, and line height), and Background Border Radius. These controls are intended to be utilized when needing an icon similar to the styling of a Feature Box but in new situations or different groupings of content.
  • Icon List Item – new options include Icon Color and a Link toggle, which will allow you to wrap the entire text of an Icon List Item in an anchor element (this does not include the icon).
  • Custom Headline – new options include Text Color.
  • Feature Headline – new options include Text Color, Icon Color and Icon Background Color.
  • Card – new options include a Back Button toggle, which will allow you to optionally include the button on the back of the Card.
  • Line – new options include a Color and Height.
  • Creative CTA – new options include an Open Link in New Window toggle.