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!
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.
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.
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 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.
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)
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.
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.
Once pannel is open, browse trough our skins gallery.
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.
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.
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.
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)
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.
See on the next picture how we edited each one of the dots.
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!
Thanks for reading, if you have any questions please check our How section or post a comment!