---
schema_version: "1"
id: aaa203df907e9082f8c8261960483cb20276d2bf89435f8743f806c95c87f15a
title: Add Images to Content Blocks in Design Mode
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/siteforce_contentblock_image.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.siteforce_contentblock_image.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: d9d259a66ddcf1a26160d67d94f2301e8b1b48f93168c33ee66aa9ff936ba13f
description: Designers and site administrators can add images to content blocks when viewing a page in Design Mode.
products:
  - Salesforce Platform
  - Security
release: "264"
---
# Add Images to Content Blocks in Design Mode

Designers and site administrators can add images to content blocks when viewing a page in Design Mode.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition">
        <colgroup>
          <col>
        </colgroup>
        <tbody>
          <tr class="">
            <td class="slds-cell-wrap" style="vertical-align:top;">Available in: Salesforce Classic</td>

          </tr>
          <tr class="">
            <td class="slds-cell-wrap" style="vertical-align:top;">
              <p>Available for purchase in: <strong>Enterprise</strong>, <strong>Performance</strong>,
                and <strong>Unlimited</strong> Editions</p>
              <p style="margin-bottom:0;">Available (with limitations) in:
                <strong>Developer</strong> Edition
              </p>
            </td>

          </tr>
        </tbody>
      </table> <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d101460e74">User
              Permissions Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d101460e74 ">To build, edit, and manage Site.com sites:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d101460e74 ">
              <p><samp class="parmname">Site.com Publisher User</samp> field enabled on the
                user detail page</p>
              <p>AND</p>
              <p style="margin-bottom:0;">Site administrator or designer role
                assigned at the site level</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d101460e74 ">To edit only content in Site.com sites:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d101460e74 ">
              <p>
                <samp class="parmname">Site.com Contributor
                  User</samp>
              </p>
              <p>AND</p>
              <p style="margin-bottom:0;">Contributor role assigned at the
                site level</p>
            </td>

          </tr>
        </tbody>
      </table>

When the page is open:

1. Double-click the content block on the page.
2. Position your cursor where you want to insert the image and click **![Add or edit images](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/extend_click/images/siteforce_icon_image.png)**.
3. In the Image Properties dialog box, either:
    - Enter a URL to an image in the Image URL field.
    - Select an image from your website by clicking **From Website** and selecting the image in the list that appears.
    - Upload an image from your computer by opening the Upload tab, browsing to the image, and clicking **Upload**.
4. Enter a brief description of the image in the Alternative text field. If the browser can’t display the image, the description is used by screen reader users or as a substitute. It can also help with search engine optimization (SEO).
5. Optionally, preview how the image appears in relation to the text on the page and set:
    - The width and height of the image
    - How much space surrounds the image (which is controlled by the `HSpace` and `VSpace` properties)
    - How it aligns with the text on the page
    - The image border (for example, to set a dotted green border that's 10 pixels wide, you enter `10px dotted green` in the Border field)
6. Click **Apply**.
7. Click **Save**.

#### See Also

- [Edit Content Blocks in Design Mode](https://help.salesforce.com/s/articleView?id=platform.siteforce_contentblock_edit.htm&release=264.0.0&type=5 "Designers and site administrators can edit content blocks on the page. Content blocks contain the text for site pages, and can also house images, videos, and hyperlinks.")
- [Understand the Content Editing Toolbar](https://help.salesforce.com/s/articleView?id=platform.siteforce_contentblock_toolbar.htm&release=264.0.0&type=5 "Designers and site administrators can edit content blocks when in Design mode. Content blocks contain the site page's text, along with images, videos, and hyperlinks.")
- [Import and Manage Assets](https://help.salesforce.com/s/articleView?id=platform.siteforce_assets_import.htm&release=264.0.0&type=5 "Contributors, publishers, and site administrators can import a variety of assets, such as images, HTML pages, and PDFs, to use in a website. You can import assets and files individually, or use a zipped file. When importing entire websites or large numbers of assets, it’s easier to create a zipped file of the content with the desired folder structure. When importing the zipped file for a website, Site.com recreates your website and places everything in the same folder structure.")