Every Composer element shares a common set of settings (Share, Title, and Design controls) accessed by clicking the gear icon at the upper-right corner of the element. This article explains each shared setting, including custom CSS class, background image, and header and footer content areas.
đź’ˇQuick answers
- Where are element settings located? Hover over any element on the page and click the gear icon at the upper-right corner.
- Naming an element or hiding the name? Use the Title field to set the name, and the toggle to the right of the title to hide or display the name above the element on the live page.
- Can a custom CSS class be applied to an element? Yes. Open Design controls and add the class selector in the Custom Class field. The class must already be declared in the theme's CSS.
- Adding a background image behind an element? In Design controls, use Background Image and browse File Manager or Resources to select the image.
- What's the difference between element header content and a page banner? Element Header Content is a separate content area above the element's main content, not a page-level banner. Footer Content works the same way below the element.
- Is it possible to make an element reusable on other pages? Yes. Toggle Share on in element settings; see the Shared elements overview article for the full workflow.
In this Article
While most element types have their own dedicated settings, all Composer elements share some common settings, as well. The Share, Title, and Design settings are common to all element types.
Element settings can be found by hovering over an element and clicking the “gear” icon that appears at the upper-right corner.
Shared elements
Enable the "Share" toggle to allow this customized element to be reused later on other site pages or banners. Any content you've added to this element will be preserved whenever it's used later. See Shared elements for more details.
Title
Set a name for this element. The toggle switch to the right of the title controls whether the element name is hidden or displayed above the element when it's viewed on a page or banner.
Design controls
Click on "+ Design" to view and edit these controls. Note that, in most cases, it's not necessary to adjust these options.
Custom Class
If your theme’s CSS file includes a class style declaration that you want to apply to this element, add the class selector here.
Background Image
Browse for an image in File Manager or Resources to display behind the element.
Header Content
Elements can include their own headers, displayed above the element content.
Important Note
This isn't a “header” like a banner that you'd apply to a page, but rather a separate content area above the main content section of the element.
Footer Content
Likewise, elements can include their own “footer” content sections.
Comments
Please Sign in to leave a comment if you don't see the comment box below.