Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.
Builder content link
Builder public api key 8d5646e5172f4529a3c4743feb63286b
What are you trying to accomplish I’m trying to size and position things on Nik Sharma’s landing page template and nothing is working the way it does in the videos. For starters, there were a ton of set widths, which the videos advise again, so I removed those, but I’m still having trouble getting anything to work.
Code stack you are integrating Builder with Shopify
Reproducible code example If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!
You can have widths on content (100vw, percentages, etc). Using fixed widths is highlighted in our responsive design guide because it isn’t responsive. This doesn’t mean you can never use fixed widths, it just depends on what you’re styling. You can learn more about this here.
Can you share more details around which specific sections you’re unable to edit? Templates have group locked sections, so you can select the section and edit the content in the options tab.
Another option is to unlock the group. You can do this by selecting the dropdown next to “edit” then “unlock group”. This will allow you to click on the individual layers in the section.
I’m sorry, I missed the loom link in your original post! To go over what you showed in your video:
To move content, you can either select the dropdown next to “edit” and select move or you can click on the layer and move it (you’ll want to avoid the dots you see on the edge of the layer, this adjusts margin).
To adjust the size of the image, you can do this in the styles tab and the options tab.
The content is centered on the page, you can see this if you open full screen editing code. This image is currently in a columns block, with a column on either side, which is why you’re seeing the “+ add block” section. You can select the columns layer → navigate to the options tab → open the un-used columns → and delete.
For the product section, The box holding the text block has position absolute and is sitting behind the image. I went ahead and gave the box holding the text a z-index value, so you can now grab it when you unlock the content. You can also navigate to the layers tab and select the text block there. Once you have the text block selected, you can change the text color in the styles tab.
I’d also recommend editing in full-screen editing mode or changing the editor layout to find which editing mode works best for you. Let us know if you have any additional questions!
Just seeing this as this forum doesn’t seem to provide notifications (?). I’m afraid this doesn’t help me. I have unlocked the groups wherever I could and I still couldn’t select certain elements. And I showed you some specific elements in the video that I’m having trouble editing. Could you address those? I’m trying to properly size and center those icons and make the white space on either side of them match each other.
I know how to move to a different section. I don’t see how to add white space around a whole section without adding margins to every item in that section. I tried to use the blank columns for that, but when I widen them, only the icons seem to move inward while the header doesn’t.
My edit options only say “auto”, “2 column” or “3 column”… you should add full screen there. Now that you told me it exists, I found it, but not intuitive. And it took me a while to figure out where I can edit margins/padding, etc. in full screen mode. Nothing happened when I clicked “edit” and then “edit styles”… which is where I would have expected to be able to get to that panel.
I still can’t figure out how to enlarge those blank blocks to the right and left of the icons. When I try to drag them wider, all it does is increase the margins, which will make the page non-responsive. And, I want to add blank blocks only to the right and left of the lower row of icons since they appear larger than the ones above (I want all circles the same size), but I wasn’t able to add blank block just there… it always applied to the whole section.
Hi Dana! It sounds like you may benefit from exploring the documentation we have available on our site and continue watching the videos that show Builder in action. Feel free to walk through these at your own pace and let us know when you become completely stuck → Getting started with the visual editor ← and please let us know when you catch something that is now different.
You may also benefit from starting out a little smaller and trying to build out some layouts that are a little easier to manage. I can understand how dealing with a more complex project and trying to learn the Builder.io Visual Editor at the same time could lead to some frustration.
In the Styles tab, you can adjust these properties for the image if you need to resize it (see left). Additionally, you can open the image’s Options tab and control its aspect ratio under Advanced (see right).
Padding controls the internal whitespace margin of an element, pushing its contents away from the outer edge and towards the center. Is that what you are looking for?
Shown here: the exit button on the top left, along with the INSERT tab that allows you to add content blocks.
I know I can do everything with padding and margins, but was hesitant to do so because then I’ll have to adjust everything individually for smaller screens. But I guess that’s what I’ll have to do.
Also, padding doesn’t work for this. When I add padding to the image, the edges of the circles get cut off. See screen shots of without and with padding:
You can use margin and padding to adjust the whitespace for an element like Logan mentioned. The reason the padding isn’t working as expected on your image is that the background-size is set to cover. If you select the image → open the options tab → change the background-size to contain, then padding will work as expected.
You can also adjust the image’s aspect ratio (in the show advanced section in the options tab), which controls the ratio of height/width. For example, if you wanted the image to be 800 by 600, you would divide 800/600 and this would be the aspect ratio number to use.
I’m just seeing this. You really need to add a notification system so that people know when a response has come in, especially if it’s not same day. It would be nice if the video tutorials covered some of these things. I tried messing with all of these settings and couldn’t get it to work. At this point, my trial period is over and I hardly got to do anything because there were so many issues I couldn’t overcome and it took a long time for me to get and see these responses. So I’m going to give up on this for now and maybe try again when you have more tutorials and I have more time. Thanks.
@SFDANA Thank you for the feedback! Our team is actively working on improving our documentation and we have a great Builder Visual Editor 101 course that goes over a lot of the styling we discussed. We would be happy to extend your trial when you’re ready to try Builder again.
