Put Text over Image

There are two methods to overlay text on images: Using the Hero Banner element and the Row element.

Method 1: Using the Hero Banner Element

The Hero Banner element is designed to create impactful Hero banners or collection banners that link to collection pages, among other use cases.

By default, it provides presets that allow you to set a background and edit text on the background image. This makes it an ideal solution for situations where text needs to be placed over an image.

Step 1: Open a page to edit from the GemPages Editor. The Hero Banner element can be found quickly on the left sidebar under the Media section. Drag and drop the element to any position you prefer. 

Step 2: Click on the Banner to open the Settings panel and Select your desired background image. 

Step 3: Use the Text Block to drag and drop text onto your Hero Banner element and customize the text’s font, size, and color right from the settings panel to ensure it stands out against the image. 

To understand deeply about Hero Banner Element, check out this article.

Method 2: Using the Row Element

Step 1: In the GemPages Dashboard, select your page and click the “Edit” button to enter the editor.

Step 2: Search for the Row element on the left sidebar to drag & drop it onto your preferred spot on the page. Then, In the settings panel, set an image as the background for the entire Row.

To understand Row Element deeply, check out this article.

Step 3: Use the editor to adjust text properties like alignment, font, and color to enhance visibility and design.

Both options can address your needs effectively, but using the Hero Banner element is generally quicker and easier. Meanwhile, using the Row element offers more flexibility for certain specific use cases.