Design Sidekick is a free extension powered by Pagecloud to help you find, save, and copy design styles directly into your Pagecloud website. Design Sidekick also generates checklist of SEO and OpenGraph tags on each page. 

How to Install Design Sidekick

You can install this extension for free from the Chrome store for Google Chrome, Arc, Edge and Brave browsers. Install Extension.

Design Styles

Now that you have Design Sidekick installed on your web browser, you can visit any web page to view the page's design styles, including Colors and Typography. 

View Page Colors

Open your Design Sidekick extension and click Design Styles 

1. In the colors tab, you can see all the colors used on the page 
2. Sort the page colors by Hue or Usage 
3. Favorite the color for later use 
4. Copy to your the color to your clipboard, or directly into your Pagecloud website

View Page Typography

Open your Design Sidekick extension and click Design Styles 

1. Click the Typography tab to view all fonts and text styles used on the page 
2. Click the text styles to view the font, color, size, weight, line height, and alignment of the text 
3. Favorite specific fonts or text styles for later use 
4. Copy font or text style to your clipboard, or directly onto an object in your Pagecloud website

Inspect Page Elements 

Design Sidekick's inspector allows you to click on any element on a web page to view, favorite, and save the styles used on that element, without having to open the page inspector. 

Using Design Sidekick Inspector

1. Open your Design Sidekick extension and click Inspect Page 
2. Click on any element on the page to view all design styles used including color, font, alignment, positioning, padding, etc. 
3. Save the style for later use 
4. Copy the style to your clipboard or directly onto an element in your Pagecloud website

View your Favorites Library 

Once you've saved a color, font, or other design style, you can view what you've save by clicking on the favorite icon in the top right corner of your extension. 

Sort your favorites

• Type: Sort your favorites by types including fonts, colors, and text styles 
• Source: View all favorites from specific URLs

SEO Checklist

Design Sidekick allows you to view a checklist of important SEO meta tags and OpenGraph tags that appear on a web page. You can also view the page's content structure. 

SEO tags

1. Open your Design Sidekick extension and click the SEO checklist 
2. At the top of the checklist you can see every Search tag. If the search tag is present on the page there will be a ✅ . If the search tag is missing there will be a ❌ . If there is an error with the tag there will be a yellow warning label.

OpenGraph tags 

1. Open your Design Sidekick extension and click the SEO checklist 
2. Under OpenGraph you can view your OpenGraph checklist. If the OpenGraph tag is present on the page there will be a ✅ . If the search tag is missing there will be a ❌ . If there is an error with the tag there will be a yellow warning label.
3. Click View markup to view how your OpenGraph tags are displaying 

 Content structure 

1. Open your Design Sidekick extension and click the SEO checklist 
2. Under Content Structure you can all the available H1, H2, H3, H4, H5, H6, and paragraph tags on the page. 
3. Click View details to view the content structure for all content or just the headings.

Using Design Sidekick with Pagecloud website builder

Design Sidekick Chrome extension is even more powerful when used alongside Pagecloud website builder! 

Paste styles into Pagecloud

You can copy and paste any color, font, or style directly into your Pagecloud page! Click the copy icon in Design Sidekick and use your Paste shortcut (command+v on Mac, cntrl+v on PC) to paste the style directly onto an object. 

For colors, you can paste the RBG value into the color picker. 

Edit in Pagecloud button

As a Pagecloud user, you will see an Edit in Pagecloud button in their Design Sidekick extension when visiting a Pagecloud page you have edit access to. Click the Edit in Pagecloud button to jump into edit mode on the page. 

Style library

Your saved styles will sync into your Pagecloud library. Access the library in your editor from your left toolbar.  All styles including colors, fonts, text styles, buttons, images, and other styles will be saved to your library for you to use across your Pagecloud website. 

Apply styles

Select your object and click the style to apply. If the style cannot be applied to the object you will be notified.

Sort

Sort your saved styles by color, text styles, font, button, image, and styles. You can also sort your colors by hue, dark, light, or usage.

View details 

To view or edit the details of your saved style, click into the style. You can change the name, view the source, apply the style to your selection, or copy the style to your clipboard.