Creating a website that looks great on all devices - desktops, tablets, and mobiles - is an essential part of web design. 10Web Builder makes this task seamless by providing responsive editing tools.
Understanding responsive design
Responsive design implies adapting your website's layout to the screen size of the device it's being viewed on. The 10Web Builder defines screen sizes as follows: PCs (over 1024px wide), tablets (between 1024px and 767px wide), and mobiles (under 767px wide). Breakpoints are the screen widths at which your site's layout changes to better suit the device's screen size, ensuring your content is always displayed optimally.
Viewing and editing for different devices
To create a responsive website with 10Web Builder, you'll need to follow these steps:
- Start editing your page: Open the page you want to customize in the 10Web Builder’s editing tool.
- Use the responsive mode: In the top toolbar, you'll find icons for desktop, tablet portrait, and mobile portrait. Click these to see how your site looks on different devices.
- Adjust settings for each device: Look for the device icon next to various widget settings when editing each widget. Clicking this lets you switch between device-specific settings. For example, you might change the font size for a heading on mobile devices without affecting its appearance on desktop or tablets.
- Review and publish your changes: Once you’re done with editing, you can preview your changes and save them by clicking the Preview changes and Save & Publish buttons in the top right corner of the top toolbar.
Customizing breakpoints
While the 10Web Builder comes with default breakpoints, you might need to customize these or add new ones for greater flexibility:
- Access Site Settings from the toolbar: This is where breakpoints can be managed.
- Navigate to Layout settings and find the Breakpoints menu: Here, you can view and adjust the default breakpoints.
- Add or customize breakpoints: You can add new breakpoints to cater to a wider range of devices or edit existing ones.
Responsive options in advanced settings
10Web Website Builder provides a visual way to identify which settings have device-specific customization. Look for the device icon next to various settings. If the icon is present, you can set different values for desktop, tablet, and mobile views.
Note:
Not all settings offer this level of responsive control. For example, certain widgets or properties within containers may not allow you to directly modify their core behavior for each screen size. In such cases, the device icon may be absent.
To achieve greater customization in these situations, utilize the responsive options found in the Advanced Settings section of widgets and containers. Here's how:
- Duplicate and hide: Create two instances of the same widget or container. In the Advanced Settings, set the visibility of one to Hide on Desktop, Hide on Tablet Portrait and Hide on Mobile Portrait. You can customize this for the specific views you'd like.
- Customize for each view: Now, with the widgets/containers selectively visible, you have full control to modify their settings and create tailored experiences for each device view.
Important:
This technique provides more granular control over responsive behavior but may increase the complexity of your website structure. Use it strategically when simpler responsive adjustments don't achieve the desired results.
Responsive editing best practices
The practice of responsive web design entails adhering to best practices to guarantee an aesthetically pleasing layout across all devices. Here are two key principles to consider:
- Start from the broadest device: Make changes to wider devices first, as these will affect narrower devices. This top-down approach ensures consistency across devices.
- Preview changes across all devices: Regularly switch between device views to ensure your edits provide the best user experience on every screen size.
By leveraging the responsive editing features of the 10Web Website Builder, you can ensure your website is engaging and accessible to all visitors, regardless of the device they use to browse your site.