Learning the visual editor
Responsive design tricks
Saving layers as templates
Importing your site pages
Connecting custom data
Interactive pages with state and actions
Creating reusable components with Symbols
Targeting and scheduling content
Building custom forms
SEO optimizing Builder.io content
Creating custom models
Using custom fields
Enable on-site previewing and editing
Dynamic URLs and advanced data fetching
Adding Custom Code
Using 3rd party libraries
Extending Builder.io with plugins
Using your React components in Builder
Triggering custom actions
Ruby on rails
Use these tips to master responsive design and advanced editing in Builder.io!
Mastering responsive design is extremely important when creating your website. Users will be viewing your website from various screen sizes, and you’ll want your layout to be able to adapt and look nice on every users screen. We will be covering:
Columns allow the elements to automatically rearrange themselves to fit every screen size. This allows you to maintain a consistent look and saves you time when styling your pages. In the example below, you'll see the columns go from horizontal to vertical when the device mode is changes from desktop to tablet. It is best to use a column layout when you need to arrange items in a single row.
Child element layouts
There are several ways you can layout your child elements. View the examples of each layout below
Column: Best used when you need to arrange items in a single row.
Row: Aligns the child elements horizontally
Stack: Aligns the child elements vertically
Grid: Best used when you need to arrange elements in multiple rows.
Scroll: Allows you to have a lot of content that won't overflow or take up a large amount of a page.
Fixed and fluid width content
Let’s say we are styling two images, we will call them image A and image B. Image A has been given a width of 30%. Image B has been given a width of 400px. When we view our page in tablet and mobile view, image A is relative and image B is fixed. Image A will respond to the screen size and always be 30% of that screen while image B will remain 400px in width on every screen size. This doesn’t mean you should never use px when designing your pages, it just depends on what you’re styling. A good rule of thumb is do not use large fixed width elements.
Two other widths that are important to talk about are auto width and 100% width. If you give an image 100% width, it will make this image (not including any margin, padding, or border) 100% width on the screen. In the example below, you'll see that if you give your image margin, it will overflow.
If you give an auto width (this is the default in Builder), it will fit the element in available space (including its margin, border, and padding). You'll see in the example below that the content will not overflow when margin is applied.
Margin & padding
Margin and padding are used to space out elements. Margin is used to create space on the outside of your element, and padding is used to create space on the inside. They are very helpful when styling your pages, but they can cause issues for responsiveness if you don’t use them correctly. Let's say you are viewing your page in desktop mode and you add a left margin of 100px on an image. When you view your page in mobile view, this image will be fixed with a 100px left margin and will not be responsive in mobile view. It is best to avoid using margin and padding to align your items. Instead, use the alignment section to place your content. Now if you view your page in mobile view, your image will still be aligned to the right, but your layout is now responsive and will adjust accordingly.
As states above, it is best practice to align your content using the alignment section in the editor. Below is an example of where to find the alignment section and a preview of how content looks aligned and how it responds to changes in screen size.