Ask a Question ?
Design & Publish Websites Faster

Mirroring Kaleidoscope: The Many Sides Of Color

Hi, welcome back! Today we are going to recreate and work with Kaleidoscope, a website that also serves as a landing page for a file comparison software. Take a look at the image below and click on it to see the full picture; that¡s what we will be recreating today!

Kaleidoscope

We will approach this breakdown in a broader and at the same time simpler way.we will try to edit most of the things at the same time and instead of doing each element and app at it’s own time we will do everything in a batch way.

Where To Start?

First we need to analyze the original page and decide how we are going to build our layout. For this site it’s pretty easy since most blocks are already differentiated from the rest, see the next image and take a look on how it was done.

Blocks

Click on the image to see how the blocks are going to work on the site

Now we need to do is analyze what kinds of apps we will need and what can be translated into our platform and what not. Check previous breakdowns and our list of apps to get an idea on what we can do and on the next image you will see what kind of apps we’ve used. Click on it to see the full view.

apps

This are some of the apps we’ve used, click on the image to check the bigger version. All images are on it’s default state!

Working With Content

Now that our layout it’s constructed and apps are placed, it’s time to replace content. We will began by replacing all images on the site, some are directly extracted from the original site itself. Double click on any picture and replace the default image with the one that needs to be used.

To replace an image double click on it, you’ll see a modal pop up with a few controls, hit the replace button and choose the source of your image, once replaced hit the “Use Full” button .

replace image

This is how you can replace an image.

Replace all images on the site, take a look at the next image and lick on it to see how it will look like at the end. Take into account dummy text and styles still need to be changed so this is just a glimpse on how everything is going so far.

Images Replaced

This is how our header looks once images have been replaced, click on this image to see the whole picture.

Once all pictures have been placed we need to add content and replace the default one. This is a pretty simple step, make sure not to add any kind of style yet. Double click on the text to change it on place or hover over an app and click on the pencil icon.

Check the next picture, this is how the site looks now that text have been replaced and partially styled (check further pictures to see how it was done)

Text Replaced

Text has been replaced, click this picture to see how the whole site looks.

The first thing that we did was, as we said previously, replace all dummy text for the proper one, once that that was done we need to add Heading Tags to it, this will allow us to batch edit text in the future and organize our text properly. Do this by double clicking on the text and selecting the heading you want to apply. see how it was done on the next picture.

H Tag

H Tag being added, we used an H2 Tag here.

If you’re having trouble adding H Tags, check this and this articles to learn a little bit more on how to use tags properly.

Once we have replaced and tagged our text it’s time to style it, to do this really fast click on the Skin tab at the shelf at the bottom of the editor and hit the Get More Skins button, then click on the Partial Skin section at the top and select one of the font skins that we have there, right now we’re using Font Pairing #7.

Get More Skins

Click here to go to the Skins pannel.

Once pannel is open, browse trough our skins gallery.

Partial Skins

This is the skin that we are using.

Hit live preview, then apply, this will edit every piece of text on the site in a bulk way, it may take a little bit since there are many apps with text on our site. Once that done you’ll see a big improvement (see two images above and click on it to check it out)

Backgrounds & Colors

Now it’s time to add backgrounds and color before we move into details. We are going to start by adding BG Colors to each one of our blocks.

Background Color

Reach out for this BG Dot located on the top left corner of each block, hit the BG Color square and choose a color or upload your own.

 

Once background color has been added, we need to add a background texture, do this the same way we added the bg color but now hit the background image option, upload your background and hit the repeat option, see the next image for a view.

Uploading BG

Seen here we’re uploading the background image. Background color and button color looks different since some areas will change color when you hover over their dot.

Once that background colors have been changed, it’s time to edit the text that we place since background colors will interfere with it, what we will do will be to open our Bulk Style Editor, this will allow us to edit text in a broader way.

The Bulk Style Editor

Do this by clicking in the Styles tab at the Shelf on the bottom of the editor. A modal will show that will allow you to edit things in a broader way. Go to the All Blocks drop down menu at the top and deselect all blocks but the one you will work one, then hit the Text Tab.

See on the next image how arrows point to the blocks being modified and selected as well as the active Styles Tab.

BSE

This is the Bulk Style Editor panel.

Once text has been edited in a broader way, go into each piece of text and edit it the way that you want, double click on it or use the Content Management System (This can be reached trough the pencil icon on the hovering toolbar on some apps)

EIP

See how through editing in place we are bolding the text and changing it’s color.

Now it’s time to edit the buttons, this can be done in many ways but using the BSE will facilitate it. As we did with the text open the BSE pannel  by clicking on the Styles tab at the shelf on the bottom of the editor.

BSE Buttons

See how every value for all buttons in our site is the same but the ones pointed by the arrows, this were changed later on and modified on each dot.

See on the next picture how we edited each one of the dots.

Button

After we edited all buttons trough our Styles panel, we changed the color and with of each of the buttons using it’s dot.

That’s all of the details that we have to modify, see on the next image how our site looks at the end and click on it for a full view!

Output

Click to see the full image!

Thanks for reading, if you have any questions please check our How section or post a comment!

Menu