« Back to Documentation

1. Let's create a new homepage for our site.

Create a new Drag and Drop Page. (How to do this you can see here: http://www.visualcmp.com/help/documentation/create-new-drag-and-drop-page).

For example, we need five main section with content on our homepage.

First off all we need to create a first section for our homepage. For example, let’s create a image slider.

Click Content, Revolution Slides, Add new Slider.

Add some Title to your Slider.

We need 4 images in our slider.

At the result we have obtained slider with four images:

The next step is to add new created slider to the our homepage. Click section, Block and select your slider (for me it’s Slider Revolution Homepage Slider first).

And at the result we have obtained a new slider.

Let’s create a block similar to the layout below:

Create a new section below section with slider.

  1. Add row with three column to the section.

1.1 Let's add image to each column of the row:

1.2 Click Content -> Image and select image that you want to add.

2. Add titles to each column like in mockup:

2.1 When you click on the button “Text” a new window will opens. Here you can see a WYSIWYG editor with a lot of options.

2.2 Choose “Style” option and you will have a possibility to add a font color, font-size, padding, borders, margins and many other properties to you text.

2.3 Add a button “Read more” to each column.

Click Content -> Button. Add Title text to the button. Add link that should redirect user to full content of the article, button text color, border color, background color, font size…

It's all. The new block is created.

3. Creating a section with fixed background image position:

In a section options select “Style”. Add image for a background of the section.

Go to the section option. Select Background Effects.

4. Add collapsible elements to the page:

Collapsible elements can hide/display information placed inside them.

Click on a cross icon near Toggle tab. Add row with three columns into the toggle.

For the example we’ve created a three collapsibles elements on the page. Also, to each toggle, we've added one image and some random text.

On images below you can see the results of application collapsible element. First image show us the result if user is not clicked on the title.

Second image show us the result if user clicked on the title.

5. Creation of section that takes full width of the screen with the addition of animation to the picture.

First of all let’s create a new section and enable option Full Width.

Creation of the new site footer.

1.1 First of all, we need to create a new block that will be placed on footer region.

1.2 Click Content->Block

For example, let's create site footer like on layout.

We'll need to add a row with four columns to the section.

Let’s add some logo image to the left block, links to the central and right block. 

1. We will add the title text to the block.

2. The header text of the block must be in uppercase.

It is all. Do not forget to save your changes in the blocks.

The next step is to add a new created footer block instead of the old one.

Go to the Structure->Blocks and look for the name of your new footer block.

When you will find footer block in region select list you should select a Footer region.

Save all changes in blocks.