Row Element
1. Row element is a foundational layout component used to organize and structure content on a webpage. Select "Row".
2. To configure the Row settings, click on the pencil icon.
3. Allows the row to stretch using CSS.
4. Row stretch
Stretches the row or its content across the container or screen width. Default: No stretching is applied. Stretch Row: Stretches the row background but keeps content constrained to the container width. Stretch Row and Content: Stretches both the row background and content to the full width of the screen. Stretch Row with Padding: Stretches the row with extra spacing to maintain padding while stretching.
5. Defines the spacing (gap) between columns within the row.
6. Makes the row span the full height of the viewport.
7. Ensures all columns within the row have the same height.
8. Reverses the column order for layouts designed.
9. Aligns the content vertically within the columns of the row.
10. Allows you to use a video as the row's background for a more dynamic and visually appealing design. If checked, enables the option to add a video background using a YouTube link .
11. Enable parallax effect to make the background move at a different speed than the foreground content, adding a dynamic look.
12. Allows to apply Animation from the given available options.
13. If checked the row won't be visible on the public side of your website. You can switch it back any time.
14. Let's move to "Design Options" section.
15. Allows you to turn off the background image for the selected row without deleting it.
16. Adds a parallax scrolling effect to the background image, making it move at a different speed than the foreground content.
17. Enables the use of a gradient as the row's background instead of a single color or image.
18. Adds a shadow effect around the row.
19. To learn more about Design Options, search for the video "Design Options Of Elements."
20. Click on "Save Changes" to save the settings applied.
21. Creates a duplicate of the current row with all its content and settings.
22. Enables reuse of row settings without recreating them manually. You can copy the row and reuse it elsewhere on the page or another page.
23. Pastes the copied row configuration into a new row or section.
24. Deletes the current row from the page layout.
25. Let's move to the Column Settings, click on the pencil icon.
26. Inherit: Uses the default color scheme from the parent or theme settings. Light: Applies a lighter background and text color. Dark: Uses a darker background and text color for contrast.
27. Aligns the text content within the column.
28. Aligns the content vertically within the column.
29. Adjusts horizontal alignment of column content.
30. Enables video background for the column. You can apply the YouTube video by inserting it's link.
31. Adds a parallax scrolling effect to the column background.
32. Adds a parallax effect that responds to mouse scroll movements for interactivity.
33. Makes the column “stick” as users scroll, keeping it in view while other content scrolls.
34. Limit the column height and add the "Read more" button. IMPORTANT: you need to add our "Button" element to the end of this column and enable an appropriate option there as well.
35. For a detailed understanding of the Design Options, search for the video titled "Design Options Of Elements" where you’ll find all the information you need.
36. Let's move to the "Responsive Options" section.
37. Width
This option allows you to select the column's width within a 12-column grid system.12 columns - 1/1: Represents a full-width column spanning all 12 columns. Other options (e.g., 6 columns, 4 columns) allow you to set the column width proportionally, such as half (6/12), one-third (4/12), etc.
38. Represents the type of device for which you are adjusting settings. 1) Desktop 2)Tablet 3)Mobile (Small) 4)Mobile (Extra Small)
39. Offset
The Offset option allows you to create spacing (or margins) before a column begins in a row. It shifts the column horizontally to the right by a specific amount, creating blank space in the layout. Offset set to 1/3 — The column starts after one-third of the row's width. Offset Inherit from smaller — The same offset applies unless specified. Offset set to No offset — The column starts at the beginning of the row.
40. Width
Allows you to set how much space a column occupies within a row. No offset: The column starts immediately without any gap.1 column – 1/12: The column occupies 1 out of 12 parts (smallest fraction).6 columns – 1/2: The column occupies half of the row width.12 columns – 1/1: The column occupies the entire row width. Custom percentages like 20% – 1/5 allow finer control for flexible layouts. Inherit from smaller: The column width automatically adjusts based on the width set for a smaller device.
41. Allows you to hide the column on specific devices.
42. Hide on device?
43. Determines whether to reset the margin values for the column. If set to YES, all default margins will be removed or reset for this column.
44. Click on "Save changes" to apply the settings.
45. You can click on this icon to drag the row and reposition it anywhere you like.
46. Each set of lines indicates a specific grid width or column proportion: 1/1: Full-width column. 1/2: Half-width column. 1/3, 2/3: One-third or two-thirds width. 1/4, 3/4: One-fourth or three-fourths width. These options allow precise layout customization for dividing rows into multiple columns.
47. The "Custom" allows you to input a custom column width manually (like percentages or fractions) for advanced control.
48. Row Layout
Click on "Custom" will open this window to input the custom layout for the row.For example, entering 1/1 creates a single full-width column, while 1/2 + 1/2 splits the row into two equal columns.After entering a custom layout, click the Update button to apply the changes to the row.
