Let’s look at creating a page that matches with the mockup.
We’ll start with a small section like this one:
As you can see, there are three columns containing content.
To implement the changes, you will need a section, row, text and images.
Start with an empty page to begin placing content on your site.
First, let’s add a section header using the “add new elements” button, then content section and then text element.
As you can see, there is a bunch of test content on the page already. You can easily change that.
You also have to provide margins. Switch to the “Style” tab to do this.
Fill in all the needed margins, paddings, borders, etc.
In this situation, we only needed the paddings.
Now that the section header text is done, we can move on to the next element. Let’s add a row.
By default, all new rows have a “1\2 + 1\2” layout. You can easily change this though.
Hover over it and choose the layout you want.
If you need a specific layout that isn’t listed, you can customize your own.
Make sure you pay attention when creating your layout. It should be a bootstrap grid layout. Bootstrap is a CSS framework used to provide a grid, typical elements, styles, etc. Bootstrap has a 12 column grid layout, so you can use layout definitions like “1\12 + 4\12 + 1\12 + 6\12”.
In our case, we need a “1\4 + 2\4 + 1\4” or a “1\3 + 1\3 + 1\3”. Let’s explore which one looks better.
You can place a phone image the same way you did the other content. Click the “add new elements” button, then content section, then image element. The image will need to be saved from your mockup first.
Download your image first. You’ll be able to define the image style for it, including width, height, etc. To match the mockup, you should avoid using an image style. Just leave it like the original was. If you really want to adjust it, use caution when adjusting the height and width.
In this situation, we will use a bootstrap class “text align center”. You are also able to define your customer class for custom CSS, which will be covered later.
Remember to save your changes often or you will end up losing all your hard work. The green button in the top right corner is the save button.
Let’s proceed with adding content to the left column.
As you can see, there should be two columns. The first column will have text and the second column will contain your icon. Let’s begin by creating a row inside of your left column and placing the necessary items inside of the row. The layout for your column should be “¾ + ¼” ideally.
You now have text in the left column. Let’s proceed with placing an icon in your right column using a pre-installed icon element on VisualCMP.
Browse through the icons and choose the one you desire. Select the proper size.
Switch to the “Icon Utilities” tab.
In this case, we will use the circle style. However, you can see that there are plenty of really nice options available from which you can choose.
Let’s proceed with setting the background like we did on the mockup and customizing the icons’ position.
If you go with the typical elements like we did, you can simply clone and modify them to simplify the process.
Take a look at what we got:
We utilized an assortment of icons to show you how to use this particular element. You can always use assets from your own mockup.
While the standard flow tends to work well for most situations, you can always customize something using your own CSS style in two simple steps:
1. Add a custom class to the element you want to customize.
Click on “Switch to custom text input” and enter your class name.
Make sure to save the changes.
Paste your custom styles here.
Save the changes.