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
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.
- Select the first row, apply a class name of white-row and change the Background-color to
- From the Design pane, select the Apply To drop down and choose Type. Change the max-width of the row to
980pxthis will ensure all rows in the project are the same width.
- Divide the row into three columns, making the first column
3spans, the second column
2spans, and the third
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.
- 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
- 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 - Boldfrom the font-weight drop down and exit the text editor.
- Select the column and give it a class name of social-icon-column.
- 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.pngfrom the resources previously added to the project. Apply a top-margin of
34pxand a left margin of
- For the second icon choose Twitter from the Social drop down and change the image Source to
- For the last icon, choose Instagram from the Social drop down and apply the
- Now, remove the background by setting its opacity to
- 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
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.
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.
- 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).
- 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.
- Let’s style them by changing the font-size to
20px, color to
#000000and line-height to
- They also need some top-margin of
33px, bottom-margin of
22px, left-margin of
6%and lastly set the display to
- 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 outwith a Duration of
0.3s. Then select the State drop down and choose
- Select Apply to All, but this time choose
ease inwith a Duration of
0.3sand apply a font-color of
- 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
#fcd307as 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.
This row is considered the header as it contains the main callout or attention grabber.
- 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
- Change the background position vertical, to
centerand horizontal, to
left. Adjust the Repeat control to
no-repeatand Size to
- Lastly, merge all columns in the row, making it
- 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
#ffffffand set the line-height to
1and apply a left-margin of
- 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.
- 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-blockand edit the text to read TALENT.
- Drag over a Font Icon element and apply a class name of plus-icon. Select
plus2from the Glyph drop down, change the font-size to
45px, color to
#facd07and line-height to
1. Lastly, apply a left-margin of
2%and change the display to
- 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.
- 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
32pxfont-size, a color of
#ffffff, a top and bottom margin of
10pxand a left-margin of
- 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.
- 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
0opacity to the background and give it a border of
#ffffff. The rounded corners are not needed, so remove the radius by setting it to
0for both the x and y.
- There is a mouseover transition applied to the buttons. To replicate it, choose
ease-out, a duration of
0.6sand 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-inwith a duration of
0.3s. For this transition change the font-color and border-color to
#fcd307, change the background color to
#000000and set the opacity of the background to
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
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.
- First reduce the column width to
3spans 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
110pxwith a top-margin of
50pxand left/right margin of
auto. Now, let’s assign the
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.
- Select the image and choose All from the Apply To drop down and set an
ease-infunction with a duration of
0.3s. Switch the state to hover and set the
ease-outfunction with a duration of
0.6s. Then under the Effects section change the Rotate control to
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
- 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
1and align it center.
- Apply a margin-bottom of
50pxand 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.
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.
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.
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.
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.
There are no modifications needed for the column itself.
- 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
15pxand color to
#8a8a8athen remove the bottom-margin.
- Now open the text editor, change the text to “Free Wix™ Theme | Responsified by Responsive Site Designer ©” .
- Then select Responsified by Responsive Site Designer and create a link to
Blankfrom the Target dropdown. Give the link a class name of inline-link and change the color to
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.