Page elements are the building blocks of your site pages and page templates. Combined, they provide the page's structure and content.
Required Editions
| Available in: Salesforce Classic |
|
Available for purchase in: Enterprise, Performance, and Unlimited Editions Available (with limitations) in: Developer Edition |
When a site page or page template is open in Site.com Studio, these page elements are available to site administrators and designers.
| Page Element | Description |
|---|---|
| Content Block | Contains the page text, and can also house images, media, and hyperlinks. Also available to contributors if the page has editable areas. |
| Custom Code | Lets you customize your site by adding markup, such as HTML and JavaScript for elements that aren't provided in Site.com Studio. |
| Image | Adds images directly to the page. |
| Breadcrumb | Adds a breadcrumb navigation element to the page. |
| Menu | Creates a menu that lets users navigate through the pages of your site. |
| Panel | Adds structure to the page and lets you group other page elements together. |
| Button | Adds a button to the page. You can use the actions in the Events pane to add functionality to the button. |
| Form | Lets you create web-to-lead forms or gather customer feedback, and submit the data to Salesforce objects. |
| Input Fields | Provides several field types to add to forms or pages. When added to a form, binds to fields in the form's object. See Input Field Types. |
| Data Element | Must be contained in a data repeater. Binds to a field in the data repeater's object and acts as a placeholder that shows the content of a specified field for the current record. |
| Data Function | Connects to a standard or custom Salesforce object, performs calculations on the returned results, and displays the calculation on the page. |
| Data Repeater | Connects to a Salesforce object and returns a dataset based on filters that you specify. Combines with data elements or custom code page elements to display the results on the page. |
| Data Table | Connects to a standard or custom Salesforce object, retrieves a data set based on the filter criteria that you specify, and displays one or more record as rows in the table. |
- Add Site.com Page Elements
Page elements are the building blocks of your site pages and page templates. Panel elements add structure to your pages. You can think of both pages and panels as “containers” for the page elements that you add to them. - Edit and Work with Site.com Page Elements
The Page Structure pane displays the hierarchy of all elements on the page and is a very useful way of selecting, moving, and reordering elements, particularly for more complicated page designs. - Lay Out Site.com Pages Using Panels
A panel is a useful layout tool that defines the logical divisions of your page and lets you group page elements together for easy movement and positioning. Think of it as a container for other page elements, including other panels, or as adivthat wraps around the content placed within it. Panels are ideal for adding editable areas to page templates. - Position Panels Using CSS
A panel is a useful layout tool that defines the logical divisions of your page. Using CSS, you can position panels and improve the layout of the page. - Add Images Directly to the Page
As a site administrator, you can add images directly to your site pages and page templates or you can add images to content blocks. - Add Content Blocks to Pages
Content blocks contain the text of your website pages, and can also house images, videos, and hyperlinks. Designers and site administrators can add content blocks to pages when in Design Mode. - Add Custom Code to Pages
Custom code lets you customize your site using markup, such as HTML and JavaScript. - About the Site Map and Page Hierarchy
The Site Pages view on the Overview tab contains the pages and site map links of your website. The Site Map folder reflects the hierarchy or tree structure of your site by housing site pages and links that are included in the site map. When you create pages or site map links, they're automatically added to this folder. The Landing Pages folder houses standalone pages that are excluded from the site map, making it ideal for temporary pages, such as promotional or competition pages. - Adding Custom HTML Attributes
You can add custom HTML attributes to pages and page elements, which are rendered on the HTML tag of the page element. For example, this is useful when working with third-party frameworks that render page elements differently based on certain attributes. - Changing a Page Element's HTML Tag
By default, panels, data repeaters, data elements, custom code, and content blocks are each defined as adiv, but you can change this to any other HTML tag using the HTML Tag property. This gives you greater flexibility and control over how the page element is displayed on the page. - HTML5 Semantic Page-Layout Tags
HTML5 defines several semantic page-layout tags that describe the content they contain. These tags make it easier for search engines and screen readers to read and organize your content.