About Row element
The Row element is one of GemPages’ fundamental elements. Its purpose is to contain other elements and dynamically adjust to various screen sizes on different devices.
For further information on GemPages’ responsive features, please refer to this article.
Add the Row element to your page
Step 1: In the GemPages Dashboard, select your page and enter the Editor via the “Edit” button.
Step 2: To add the Row element to your page, navigate to the left sidebar and locate it there. You can then drag and drop the element onto your desired location.
Otherwise, you can select a layout from the bottom of the page to add a new section/row to your page with ease.
Following this, you will notice the element’s settings on the left sidebar, which will be discussed further in upcoming sections.
Configure the Settings tab
All of the Row element’s functionalities are accessible in the Settings tab.
Layout
To begin, choose a layout for the desktop view from the six layouts corresponding to 1 to 6 columns. Once you’ve made your selection, the corresponding layouts for tablet and mobile views will automatically appear.
Display
There are 2 modes for setting the width of the column at this point:
- Fill column: The width of the columns is evenly distributed, and you can adjust the width ratio of the columns by dragging the slider in the Custom layout.
- Fit content: The width of the columns auto-adjusts to the content inside the column.
Alignment
Vertical alignment: Align content inside all columns to Top, Center, Bottom, and Stretch. Stretch alignment only works when at least one column has 2 elements inside.
Horizontal alignment: Only applies to Fit content mode to align columns within sections.
Dimension
Full-width: Toggle this switch on to make the row stretch to both edges of your page. The default setting for a row is Full width, but you can toggle it off and adjust the width of the row. When it’s Off, the system will set a default width taken from the Default Row Width value in the Global Style.
Width: You can adjust the width of the row in either pixels or percentages using this parameter. Click on the Desktop icon to switch between different views and adjust the width accordingly.
Column Gap: Choose from the available sizes in the dropdown box or click on “Edit Global Style” to configure spacing in the Global Style.
Background
In the “Background” section, you have the option to modify the background appearance by selecting a color from the provided palette or inserting a background image.
- Color: Choose a color from the color palette or input a hex color code in the box.
- Image: Click on “Browse gallery” to switch to picture mode.
Next, hit “Add Image” and upload the image from your device. Alternatively, if the image is already uploaded in your Shopify Admin > Content > Files, you can simply input the image’s URL into the “Image Source” field.
Hit “More settings” to bring up more properties of the background:
- Background size
Cover: The background image will color the entire background of the element.
Contain: The background image will maintain its original size and the rest of the background will follow the color code set up in the color tab.
- Background position
Adjust the position of the image in 9 different positions: top left, top-center, top right, middle left, middle-center, middle right, bottom left, bottom-center, bottom right.
You can also input values in the X-pos and Y-pos, or click and drag vertically to adjust the position with pixel precision.
- Background Repeat (For Contain background size only)
Repeat the background image to fill up the background in 3 styles: Fill, X-axis only, and Y-axis only.
By default, your image is set to the fourth option: No repeat.
- Background Attachment
Scroll: The background image scrolls with the page.
Fixed: The background image does not scroll with the page
Local: The background image will scroll with the element’s content.
Preload Image: If you want the image background to load before the content inside, you can select this option. Keep in mind that this will only be visible on the actual live page.
Configure the Design tab
You can access all the necessary tools for adjusting the appearance of the Row element on the Design tab. We recommend checking out our article on the Design Tab for tips on how to optimize its use.
For any further assistance, our GemPages Support Team is here to help. Please reach us via email or live chat.