Today, I am going to take a “somewhat” responsive Wix™ theme and recreate parts of it in Responsive Site Designer and make it fully responsive.

The original theme offers only a desktop view and one mobile view. While many may think this is responsive, it’s not because it is only targeting a few select screen sizes. With Responsive Site Designer, you can target them all -- yup, even an Apple Watch! Check out the completed theme below and you will see the power of Responsive Site Designer.

 

In this article, I am going to implement a new workflow by starting with the grid, and then work down from there, by explaining the settings and styles for each row, column, and element. After the foundation of the design is complete, I will create the breakpoints for the page to "responsify" the design.

This is a fast-paced tutorial, so if you’re just launching RSD for the first time, I recommend you start with our Quick Start Guide. As knowing the basics first will help you master this tutorial much faster.

First, you will need to download the project resources which includes all the images that you will need to complete the theme. To get started, open RSD and click the Resources button on the toolbar and click Add Files/Folders. Next, locate the project images you just downloaded and add them to your project resources. Now, let’s jump in and get moving!


Download Project Resources

Grid

There are only two things that need adjustment on the Grid. Select the Grid and go to the Design pane. Here apply a grid-bg class name and change the background-color to #f3f3f3 making sure to change the opacity (a) to 1 so the background will be visible.

First Row

  1. Select the first row, apply a class name of white-row and change the Background-color to #ffffff.
  2. From the Design pane, select the Apply To drop down and choose Type. Change the max-width of the row to 980px this will ensure all rows in the project are the same width.
  3. Divide the row into three columns, making the first column 3 spans, the second column 2 spans, and the third 7 spans.

This does not resemble the theme at this moment, but in a few more short steps, it will start to take shape. Now let’s add the elements.

First Column
  1. In the first column add a Heading 4 element, triple-click on the H4 element to launch the inline editor and type the text “Who likes CoffeeCup?”. Give it a class name of top-heading and apply a font of Gill Sans, font-color of #141414, make it Italic and give it 17px top-margin and 9% left-margin.
  2. Now edit the word CoffeeCup? within the H4. Reopen the text editor, select the word CoffeeCup? and apply a class name of bold. Choose 700 - Bold from the font-weight drop down and exit the text editor.
Second Column
  1. Select the column and give it a class name of social-icon-column.
  2. From the Elements pane, drag over a social icon element, give it a class name of social-icons and duplicate it three times. Select the first icon and choose Facebook from the Social drop down. Change the button under the Source input and select the facebook.png from the resources previously added to the project. Apply a top-margin of 34px and a left margin of 10%.
  3. For the second icon choose Twitter from the Social drop down and change the image Source to twitter.png.
  4. For the last icon, choose Instagram from the Social drop down and apply the insta.png image.
  5. Now, remove the background by setting its opacity to 0.
  6. One last thing needed is to push the social-icon-column a few spans. Do this by going to the Layout pane and pushing the column 7 spans.

This will make the layout look a little strange for the moment. But move on to the third column instructions and that will correct the visual display of the columns. There will be more detail on why this was done in the Adding the Breakpoints section.

Third Column

Since the layout is looking a little off, this column needs to be pulled by just 2 spans. Again this is accomplished via the Layout pane by changing the Pull to 2 spans. Now, the design is spot on and looks (thus far) as the theme does.

  1. Head over to the design pane and give the column a class name of nav-column and align the content right (this is found in the Typography section).
  2. Add 4 text link elements each sharing a class of nav-link and changing the text of each link to match the theme. Change the first link text to Home, second link to Find talent, the third link to Find a job and the last link to About us.
  3. Let’s style them by changing the font-size to 20px, color to #000000 and line-height to 1.
  4. They also need some top-margin of 33px, bottom-margin of 22px, left-margin of 6% and lastly set the display to inline-block.
  5. Now that the style is done, let's go ahead and add a transition this way, when the links are moused over they show as a different color. Do this via the design pane and choosing Apply to All under Transitions and set the function to ease out with a Duration of 0.3s. Then select the State drop down and choose Hover.
  6. Select Apply to All, but this time choose ease in with a Duration of 0.3s and apply a font-color of #fcd307.
  7. One last thing needs to be applied to the Home nav link. Select the Home text link element and apply an ID name of current and select ID from the Apply To drop down. Change the font-color to #fcd307 as this allows the user to know what page they are currently on.

Select the Preview button and mouse over the links to see how the hover effect looks. That completes the first row, off to a good start! Compare the first row with the video below. If they do not resemble each other, review the previous steps.

Second Row

This row is considered the header as it contains the main callout or attention grabber.

  1. Select the second row and add a class name of header-row to it. Under the background section, select the Image drop down, choose resource and choose the creative-corner.jpg.
  2. Change the background position vertical, to center and horizontal, to left. Adjust the Repeat control to no-repeat and Size to cover.
  3. Lastly, merge all columns in the row, making it 12 spans.
First Column
  1. Drag over a Heading 1 element and apply a class name of hero-heading. Change the font to Georgia, set the font-size to 60px, change the color to #ffffff and set the line-height to 1 and apply a left-margin of 4%.
  2. Since this is the first Heading 1 and it needs extra room above, add another class to it so that it can be pushed away from the top of the column, to give it a little more room to breath. To do this add another class name of first-hero and apply a top-margin of 60px. Lastly, change the text to FRESH.
  3. Now add another H1 and give it the hero-heading class name. This H1 will also need an extra class name because some styles need to be applied that will allow it to sit next to a font icon element. Add a class name of plus and change the display drop down to inline-block and edit the text to read TALENT.
  4. Drag over a Font Icon element and apply a class name of plus-icon. Select plus2 from the Glyph drop down, change the font-size to 45px, color to #facd07 and line-height to 1. Lastly, apply a left-margin of 2% and change the display to inline.
  5. Add another H1 element giving it the hero-heading class name and changing its text to TOP. Lastly, add one last H1 with hero-heading class name and change its text to EMPLOYERS.
  1. Next, add an H5 element with the text of create your future with us and give it a class name of sub-heading. Apply a font of Georgia, 32px font-size, a color of #ffffff, a top and bottom margin of 10px and a left-margin of 4%.
  2. Add the final two button link elements to the column. Drag two over and apply a class name of find-button to each. Giving the first button the text of FIND TALENT and the second FIND A JOB.
  3. Change the font-size to 20px, change the left and right padding to 16px, margin-bottom to 60px, and margin-left of 4%. Also apply a 0 opacity to the background and give it a border of 2px, solid, #ffffff. The rounded corners are not needed, so remove the radius by setting it to 0 for both the x and y.
  4. There is a mouseover transition applied to the buttons. To replicate it, choose ease-out, a duration of 0.6s and select All from the Apply To drop down. Then select Hover from the State drop down and select All from the Apply To drop down again. Set the function to ease-in with a duration of 0.3s. For this transition change the font-color and border-color to #fcd307, change the background color to #000000 and set the opacity of the background to 0.5.

Third Row

The third row is where the icons provide the visitor an “at a glance” look at what the company offers. Add a new row and give it a class name of icon-row, apply a background of #fcd307 and give it a border-bottom of 3px solid.

First Column

Instead of creating all the columns and adding the content to each of them, I will work in one first, as the rest of the columns have an identical setup. This will allow us to save time by duplicating the first column and not having to create each column separately.

  1. First reduce the column width to 3 spans and add a Picture element and below that an H6 element. Select the Picture element and apply a class of icon-image then set the max-width to 110px with a top-margin of 50px and left/right margin of auto. Now, let’s assign the pen-ruler.png image.

To give the theme a bit of life, a simple hover transition can be applied. While it is not part of the original theme, it will add a nice touch to the design.

  1. Select the image and choose All from the Apply To drop down and set an ease-in function with a duration of 0.3s. Switch the state to hover and set the ease-out function with a duration of 0.6s. Then under the Effects section change the Rotate control to -359deg.

Click the preview button on the toolbar and mouseover the image to see how it looks. Cool, right!?

This mouseover is cool, but it is time to get back to work. :P

  1. Let’s style the H6 by giving it a class name of icon-heading, font-weight of 500 - Medium, font-size of 22px, font-color of #000000, line-height of 1 and align it center.
  2. Apply a margin-bottom of 50px and add the content. Make sure to place a hard break between the two words, to do this first type GRAPHIC then hit enter and then type DESIGNERS on the next line.
Second Column

Now that the first column is complete, duplicate it 3 times and simply change the image and text to match what is needed!

Select the Picture element and click the change button under the Picture control. Choose the type.png listed in the resources. Select the H6 and enter DOCUMENT (remember to hit enter before typing the next word) COPYWRITERS.

Third Column

Select the Picture element and click change. Choose the bulb.png listed in the resources. Now select the H6 and enter CREATIVE (remember to hit enter before typing the next word) DIRECTORS.

Fourth Column

Select the Picture element and click change. Choose the folders.png listed in the resources. Select the H6 and enter CLIENT (remember to hit enter before typing the next word) MANAGERS.

Fourth Row

This last row is going to hold our copyright information. The layout of this row will be changed to include the copyright information and to give credit to Wix™ for creating the design. To start, add a new row and give it a class name of white-row.

First Column

There are no modifications needed for the column itself.

  1. To start add a paragraph element into the column and give it a class name of copyright. Change the font to Helvetica, font-size to 15px and color to #8a8a8a then remove the bottom-margin.
  2. Now open the text editor, change the text to “Free Wix™ Theme | Responsified by Responsive Site Designer ©” .
  3. Then select Responsified by Responsive Site Designer and create a link to http://www.coffeecup.com/designer/ and choose Blank from the Target dropdown. Give the link a class name of inline-link and change the color to #5c5c5c.

Now that we have created the layout and added all the images and content, it is time to add the breakpoints. To learn how I did this, please review the next article using the next button below.