add and manage images

[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 letter_spacing=”” css=”.vc_custom_1474977269298{margin-bottom: -10px !important;}”]

Add and manage images

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

Racontr welcomes all popular image formats : jpeg, png, gif. Once uploaded in the “Media” section, you can add your images to your pages.

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

Here are the different options proposed by Racontr that we will approach:

[/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]

First step: Insert an image on a page

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

  1. To insert an image, click on the “+” icon in the left menu of the page editor. A list of available media appears, click on “Add images”.
  2. The image library includes all the files you uploaded in the “Media” section. Select the image you wish to use and click on “Apply” to insert it on your page

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

Insert multiple images on a page

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text letter_spacing=””]To insert multiple images, sounds or videos, keep the shift key pressed on your keyboard while selecting several files on your computer.

Click on “Apply” to insert them all at once.

You can then manage their depth with the layer stack on the left menu.[/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=”10px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

Images properties

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

  1. Rename your element (by default it will have the same name as the file you uploaded), or add a CSS class.
  2. Replace your element
  3. Duplicate (while preserving its properties and actions) or remplace it.
  4. Manage the opacity of the element (from 0 for invisible to 100%)
  5. Manage the rotation of the element

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

  1. Manage the opacity of the element (from 0 for invisible to 100%),
  2. Manage the rotation of the element
  3. Choose a color for the border, set the rounded effect for the border, set the size of the border, the position on the scene (X or Y).
  4. Choose a color for shadow
  5. Choose horizontal position for shadow
  6. or vertical position.
  7. Then, choose blur effect.

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

Size & position

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

  1. To move an image, you can drag-and-drop it wherever or edit its precise coordinates in X
  2. and Y in the bottom right fields.
  3. To resize an image, you can click-and-drag from one of its corners (keep the shift key pressed to preserve its proportions) or edit its precise width
  4. and height in the bottom right fields.
  5. You can lock the element on the scene.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”5708″ 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″ margin_bottom=”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]

Saving

Log in with your credentials

or    

Forgot your details?