About Row element
The Row element plays a vital role in GemPages by providing a foundation for your page design. Its primary function is to contain elements and adapt responsively to various screen sizes on different devices. When creating your page, the row element is typically the first element you’ll add as it establishes the overall structure of your layout. You can easily achieve your desired layout by dividing the row into columns or adding multiple rows.
Next, to enhance the visual representation of your ideas, simply drag and drop other elements like text, images, videos, buttons, and more into the row.
More than that, GemPages offers complete flexibility in building your layout. You can rearrange rows, add or remove columns within a row, and adjust the spacing between elements. This article will guide you through the basic configurations of the row to help you build your desired layout.
Add the Row element to your page
Step 1: In the GemPages Dashboard, select your page to enter the Editor.
Step 2: To add the Row element to your page, navigate to the left sidebar and locate it there under the Layout section. 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.
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.
There are 2 modes for setting the width of the column at this point:
- Fit to content: The width of the columns auto-adjusts to the content inside the column.
- By ratio: The width of the columns is evenly distributed, and you can adjust the width ratio of the columns by dragging the slider.
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 to content mode to align columns within sections.
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.
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.
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:
- Cover: The image uploaded will color the entire background of the Row.
- Contain: The image uploaded will maintain its original size and the rest of the section will follow the color code set up in the color tab.
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.
Repeat (For Contain background size only)
Repeat the background image to fill up the background in 3 styles: Fill, Vertical only, and Horizontal only.
By default, your image is set to the fourth option: No repeat.
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.
For more information, please refer to this article: CSS background-attachment Property.
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 Advanced Tab
For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.
How to use the Row element to create a Responsive Layout?
For a brief guideline on how to use the Row element to create a responsive layout, you can take a look at our video tutorial.