bbin电竞网

Let’s take a look at how to work with Sections on bbin电竞 . Every site page is divided into unique strips that can be customized individually. This lets you create multiple design experiences on every page at any breakpoint.

To work with a section, select it. If you can’t because something’s in the way, like here with this image, use these blue breadcrumbs to select it from under other elements—or go to your top bar and open the Layers panel to navigate, and find your section.

To add a new section, click the + icon at the bottom, and use the floating action bar to change the background color.

From the 3 dots, you have more controls like move up, move down, and flip a section to vertical.

We’ll use this vertical section as a sidebar, for a logo and social links. When you add or move elements, they attach directly to the section you place them in and auto-dock to the nearest edges.

For some elements, like social bars, the default layout is horizontal, but from the floating action bar, you can change the design and layout.

You can resize a section by hand by dragging its edges. For more precision, go to the Inspector panel, and resize using your preferred units of measure.

If you want to keep the elements of your sidebar in place as you scroll, select each element, go down to Position on the Inspector panel, and toggle on Fixed Position . Do this for all elements inside the section. Now when you scroll, you can always see your sidebar elements.

All sections can be set to fill the height of any viewport. To do this, select a section, change the units to viewport height, and type 100.

To arrange elements precisely within a section, apply a grid. This creates a 2-dimensional framework to design on.

On bbin电竞 styling cascades down, which means that all design choices made on desktop, trickle down to smaller breakpoints. On tablet, this section is still filling the screen as it’s set to 100% viewport height, and this section is still flipped vertically.

To make better use of the space on smaller screens, you can always redesign. For example, let’s flip this section back to horizontal, hide the social bar, and resize the section.

Because we set this logo to Fixed Position , it stays still as the site scrolls. You can use it as an anchor to help users navigate back to the top of the site. Learn more about anchors in the Inspector panel video in this series.

Again, these styling changes only trickle down to smaller breakpoints. Back on desktop, the design’s still the same.

To display large amounts of content in a digestible way, use Overflow .

First, click the section, go to Overflow Content on the Inspector panel and select Scroll . Choose the scroll direction and decide if you want to display the scrollbar.

Next, let’s paste in a big chunk of text. As you can see, this was way too much text to fit in this size section. So we chose to reveal it through a scroll.

On tablet and mobile, you might not want this much text. To hide the entire section, click Don’t Display .

Now on tablets and all smaller devices this section is hidden. Let’s head back to desktop to check out the overflow effect. When you scroll down, the section freezes, scrolls through all the text, and then continues.

Since all of your sections can be rearranged and styled per breakpoint, your site experience will be unique to each device.

bbin电竞 is an advanced creation platform. To master it, continue watching this series of video tutorials.