Layout Builder Kit
  • Layout Builder Kit
  • Setting Up Layout Builder
  • Book Navigation
  • Icon Text
  • Image
  • Rich Text
  • Tab
  • Video
  • Paragraphs has an Ecosystem, Too
  • Known Issues
  • Developer Documentation
    • Storing Component Configuration
Powered by GitBook
On this page

Was this helpful?

Image

PreviousIcon TextNextRich Text

Last updated 5 years ago

Was this helpful?

The image component can display an image that you provide directly. You can add a rich text overlay to it.

Instructions

  1. While editing a layout, click Add Block. The Choose Block pane will appear.

  2. From the Layout Builder section, click Image (LBK):

  3. The configuration form appears:

  4. Choose the Title position (top or bottom).

  5. Click Choose File and select a file. Click Upload.

  6. Select the Image Style, if desired.

  7. Select the Alignment (left, center, right).

  8. If you would like a text overlay, enter the text.

  9. Select the overlay text position to Bottom, which makes it visible.

  10. Provide extra CSS classes that will be added to the component, if desired.

  11. Click Add Block and the image will appear on the page.

Be sure to click Save Layout or your changes won't be saved and won't be visible to visitors.