Image

Image elements are basically placeholders where you can upload or drop an image URL to display. Images can be placed anywhere—next to the text, in bullet lists or on top of another background image. They’re cool elements, you should use them.

Adding an image

There are three ways to upload images in the Ycode editor—either directly when working on your canvas or via Files in the left-side panel.

Method 1. Canvas (new image element)

  1. In your Canvas or Layer sidebar, select where the image needs to be added

  2. Go to the top panel and click on the Folders icon to open the menu

  3. Under Images, click Upload images

  4. Once uploaded, click on the image to insert it on your page

Method 2. Canvas (replacing an image placeholder)

  1. In your Canvas or Layer sidebar, select the image placeholder

  2. Open the Settings tab in the right sidebar

  3. Click the + Upload button to upload your image, or add the URL directly

Method 3. Files

  1. In the left-hand side menu, click on the Files icon

  2. On this screen, click on the Upload files button on the upper right

  3. After uploading, head back to your canvas

  4. In your Canvas or Layer sidebar, select where the image needs to be added

  5. Go to the top panel and click on the Folders icon to open the menu

  6. Select the uploaded image to insert it on your page

Afterward, you can move the image element by dragging it to the right spot in the Layer sidebar.

Settings

First, select the image you want to edit. Then look to the upper right side of your screen and open the Settings tab. Here you can select image data from your database to attach, as well as replace the image images and add ALT text.

Tip: We recommend adding descriptive ALT text for all your images. This benefits you in three ways:

  1. If the images fail to load, visitors will see your ALT text and read about the picture that should have been there

  2. It helps visually impaired readers to understand your website, as screen-reading tools will say your ALT text out loud

  3. Search engines can better crawl and rank your website

Dimensions

Image elements automatically adapt to whatever block they’re embedded in. If you add an image to a section, it takes up the entire width of the page (great for image backgrounds or dividers). If you add it to a container or grid, the image will adapt to the size of these blocks.

To create custom image dimensions you need to add the image inside a div block. The div block can be found in the top panel.

Open the Square icon menu and click Div block. In the block’s Design tab, you can now add your custom dimensions under Sizing. After that, add your image inside the div and see how it adapts to the size you set.

All your inline images are optimized

At Ycode, images are responsive. This means that every image you upload is automatically scaled, compressed, and optimized. Your images are displayed at exactly the right size for every device, at every resolution. As a result, your pages will load much faster.