[vc_row type=”color” bg_color=”#e8e8e8″ vertical_align=”yes” column_gap=”no” padding_top=”” margin_top=”0″ margin_bottom=”0″ min_height=”220″][vc_column width=”1/2″][vc_empty_space height=”30px”][vc_column_text css=”.vc_custom_1446738576687{margin-bottom: -10px !important;}”]

Use an action layer

[/vc_column_text][vc_column_text css=”.vc_custom_1446738626229{margin-right: 5% !important;}”]

Action layers are transparent elements enabling you to add actions to your media.

[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_empty_space height=”90px”][vc_column_text css=”.vc_custom_1446738783227{margin-left: 5% !important;}”]

[/vc_column_text][/vc_column][/vc_row][vc_row padding_top=””][vc_column width=”5/6″][vc_single_image image=”123″ img_size=”full” alignment=”center”][vc_empty_space height=”10px”][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text letter_spacing=””]

1. To import an action layer on a page, click on the “+” icon on the menu on the top left. A list of available elements appears, select “Action layer”.

Action layers appears as blue rectangles in editing mode, but they will be transparent for the user once the project published.

2. Their main use is to apply actions on a group of elements without having to add actions on each layer. Indeed the actions applied on an element on top of the layer stack will prevail over actions applied on elements below it.

Tips:
In preview mode you can decide to display action layers to make sure their position is right, or not to display them to see exactly what the user will see.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”5639″ img_size=”full” onclick=”link_image” css=”.vc_custom_1463665662311{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”30px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text letter_spacing=””]Action layers enable you to add interactivity to the area they cover. In this example, we set a “Roll-over” interaction that impacts the opacity of the two parts of this image. We use two actions layers covering each characters to make define the interactive area.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”30px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text letter_spacing=””]

1. Access the properties panel by clicking on the gear-shaped icon on the menu on the top left.Duplicate an element (preserving its size and actions)
   Rotate your element clockwise from 0 to 360° and counterclockwise from 0 to -360°.
   Rename your element.
2. Add a link to your element (see here for details)

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”5636″ img_size=”full” onclick=”link_image” css=”.vc_custom_1463665677980{margin-right: 5% !important;}”][vc_column_text][/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][vc_empty_space height=”50px”][vc_widget_sidebar sidebar_id=”sidebar-1″][/vc_column][/vc_row][vc_row padding_top=”0″ padding_bottom=”0″][vc_column][vc_empty_space][vc_single_image image=”132″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row type=”color” bg_color=”#e8e8e8″ vertical_align=”yes” column_gap=”no” padding_top=”” margin_top=”0″ min_height=”220″][vc_column width=”1/3″][vc_empty_space][vc_column_text]

More
tutorials:

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_empty_space height=”65px”][vc_column_text]

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_empty_space height=”65px”][vc_column_text]

[/vc_column_text][/vc_column][/vc_row]