[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/2″][vc_empty_space height=”30px”][vc_column_text css=”.vc_custom_1446735635269{margin-bottom: -10px !important;}”]

The layer stack

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

When you add any element to your page, it appears on your scene but also in the layers stack. Let’s explore how that works.

[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_empty_space height=”90px”][vc_column_text css=”.vc_custom_1446735706132{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=”2/3″][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text letter_spacing=””]On your page, your elements are “piled” on top of one another; the position of an element on the pile is called its “layer depth”.

1. In the layers stack pane, the position of each layer determines its depth: the element at the very top of the stack will be in the foreground, and the lowest one will be the background.
2. To change a layer’s position in the stack, simply click and drag it over or below the others

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”5743″ img_size=”full” onclick=”link_image” css=”.vc_custom_1463747649047{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=”2/3″][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text]To make editing easier, you can make a layer invisible (hidden) while in editing mode.

1. Click on the eye-shaped icon on the right of the layer.

Click a second time to make it visible again. (Note: hiding a layer this way while editing does not affect the visibility of the layer when running the project.)[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”5746″ img_size=”full” onclick=”link_image” css=”.vc_custom_1463747665541{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=”10px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”2/3″][vc_column_text]

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

1. To avoid unwanted displacement, you can lock a layer by clicking on the lock-shaped icon on the right of the layer. Click a second time to unlock it.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”5737″ img_size=”full”][/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=”10px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”2/3″][vc_column_text]

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

1. To delete a layer (and so the element on your page), click on the cross on the right of the layer.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”5740″ img_size=”full”][/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]