Reduce the Height value from " 1" to " 0" to make the Separator completely invisible.Adjust the Color value to " none" to make the Separator transparent.Step 2: In the Settings tab of the Separator element: Step 1: Drop a Separator element inside each of the two outer columns. If you are having trouble centering the middle column of a three-column-row, here’s a neat little trick for you. You can also check out our video tutorial below:Ĭenter the middle column of a three-column row We should achieve the same result with the zigzag layout: Step 5: Hit " Save" and " Publish" to check on your live site. Please go ahead and re-order them by dragging and dropping. Step 4: You will see the order of 3 elements inside this Row got reversed (image on the right and text on the left). Step 3: Paste the code in this exact position, under the gf_column group and hit " Save" Step 2: Right-click on the Row below, which has the Image element on the left, and the two text elements on the right > Edit Code. Step 1: Copy this line of CSS Code, we'll use this to modify the layout of the second Row element underneath. Let's go back to the example with the two images and text above. Method 2: Use the float command in CSS code Please follow the video tutorial below for full instruction: To design your own responsive columns in GemPages, there are two methods you can follow: The root cause was due to your Row element not being responsive. Sometimes, the perfect design you just finished on the Desktop version does not look as good as it should be on the Mobile version.įor example, this block looks beautiful on the Desktop with the text blocks and images placed in zig-zag order.īut when you go to the Mobile version, the order is incorrect and the images are stacked directly on top of each other. Here’s an example of how the image looks when we reduce the dimensions to 50%.Īdditionally, you can also make your image full-width by enabling the Full-width switch. By default, the dimensions are set to 1200 px or 100%. Step 2: From here, you can adjust the image dimensions using the Dimensions (Width) and Full-width sections.ĭimensions (Width) section can be edited by pixels or percentage. Step 1: When nesting an Image element inside, the Row element will automatically adjust to fit the image. The Row element can also contain an image element and allow you to fine-tune your image’s dimensions. The result is a full-width navy blue background without you having to tamper with the image’s dimensions.Īdjust the dimensions of an image or a video Step 4: Paste the color code into the color field Step 3: Select the outer row, and go to the Background section under the Design tab. Step 2: Click on the Background section, select the color code of the Row element, and copy it. Step 1: Click on the inner Row element, select the Design tab on the left sidebar. The example below will paint the outer row's background navy blue matching the inner row's. The Row element’s background color could be modified using the Design tab. In this article, you’ll discover some useful tips to get the most out of this element when designing your page. The Row is one of the Editor’s most versatile elements.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |