They also need some top-margin of 33px, bottom-margin of 22px, left-margin of 6% and lastly set the display to inline-block. Let’s style them by changing the font-size to 20px, color to #000000 and line-height to 1. 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. Add 4 text link elements each sharing a class of nav-link and changing the text of each link to match the theme. 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). Now, the design is spot on and looks (thus far) as the theme does. 
Again this is accomplished via the Layout pane by changing the Pull to 2 spans. Since the layout is looking a little off, this column needs to be pulled by just 2 spans. There will be more detail on why this was done in the Adding the Breakpoints section. But move on to the third column instructions and that will correct the visual display of the columns. This will make the layout look a little strange for the moment. Do this by going to the Layout pane and pushing the column 7 spans.
One last thing needed is to push the social-icon-column a few spans. Now, remove the background by setting its opacity to 0. For the last icon, choose Instagram from the Social drop down and apply the insta.png image. For the second icon choose Twitter from the Social drop down and change the image Source to twitter.png. Apply a top-margin of 34px and a left margin of 10%. Change the button under the Source input and select the facebook.png from the resources previously added to the project. Select the first icon and choose Facebook from the Social drop down. 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 column and give it a class name of social-icon-column. 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 Grid and go to the Design pane. There are only two things that need adjustment on the Grid. Next, locate the project images you just downloaded and add them to your project resources. To get started, open RSD and click the Resources button on the toolbar and click Add Files/Folders. #RESPONSIVE GRIDS WIX DOWNLOAD#
As knowing the basics first will help you master this tutorial much faster.įirst, you will need to download the project resources which includes all the images that you will need to complete the theme. 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. After the foundation of the design is complete, I will create the breakpoints for the page to "responsify" the design. 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.
0 kommentar(er)
