Adding code to an element
If a page element has an HTML section that can be edited, you can add an embed code to the element. For example, to add code to a block, complete the following steps:
- Copy the embed code.
- Add the embed code to a block. The block must use the Full HTML format, and you must edit the HTML source code to add the
- Save the block.
- Add the block to the webpage in Full HTML or another trusted format.
This block can now be used as a slot for Experience Builder. The embed code is HTML, and will render in the webpage, but is not visible to the user.
Using CSS selectors
You can manually enter a webpage element’s CSS selector(s) into the labeled field on a slot card. Any selector or group of selectors that can be defined with CSS can be used by Acquia Lift to define your slot region.
Users can enter one or more selectors into the field to define the slot region on the webpage.
The selector or group of selectors entered into the field:
- must be unique across all the slots on your website.
- must not belong to a page element whose parent or child element is also an Acquia Lift slot.
- must target an HTML block-level element on the page, such as:
- headers (
h2, and others)
This ensures that multiple slots do not overlap with each other on your webpage, and that two slots do not use the same region of your website. If you have overlapping selectors, Experience Builder may display a message similar to the following:
Please ensure the slot's chosen CSS selector targets a single element on the page and does not conflict with any existing Lift slots. See the "How to use CSS selectors" link above for more details.
If your selector matches multiple elements, only the first matched element will render a slot. An example of a selector group that can be used by Acquia Lift:
#first-line div > p
Entering this code into the slot’s CSS Selector field enables Acquia Lift to use a paragraph in a
div that uses the ID
first-line as an Acquia Lift slot. You can change the CSS selector that was entered into the field on the slot card at any time, which changes only where the slot is rendered on the webpage. Any rules that you have created for the slot are not affected when you modify the slot’s CSS selector.
Content replacement mode
Experience Builder allows you to configure slots with different content replacement modes, which define how the content is provided:
- trusted mode - Content is injected plainly
- untrusted mode - Content is injected, but encapsulated
Finding a selector
You can use your browser's tools to inspect a webpage and find the identity of a particular element.
For a potentially easier selector discovery method, we recommend that you use a browser extension to find the CSS selectors on your webpage. For specific solutions, visit your browser’s extension or add-on store.
Adding to the theme
You can also add slot information to your website theme, as part of your committed code. However, embedding slot information this way can make it more difficult for users to change it.