Blog homepage » Entry
Bootstrap October 7, 2019

Using advanced editor functions to modify CSS classes.

Benedykt Michalski

Inspirational Writer

We are very proud that you can very quickly create the first version of the layout using only the drag & drop function in our editor.

However, this is not always enough. That’s why in this post, I will describe the advanced feature of HTML Structure, which is available after clicking “Content” on each component added to the project.

Click button to open Component Content settings.

Note: This description applies to both Bootstrap Shuffle and Bulma Builder.

Visual Content and HTML Structure

When you open the content panel, you will see two tabs (see the image below).

One is Visual Content, which allows you to change texts and images in your project.

The second is the HTML Structure. This is an option for more advanced users who know the given CSS library. It allows you to modify CSS classes directly from our panel.

Component content window is divided into two columns.

I will start description from the right column because you know it well from the main application screen. This is a preview of the currently edited page with a small addition. The two side markers show which component you are editing.

Component Content settings.

What’s in the HTML Structure tab

The left column is divided into two sections: Parents and Component. Parents are wrappers in which the component is located, thanks to them you can change CSS classes for body elements and the main container.

Each section has an HTML element tree. When you move over an item, it will be highlighted on the right in the preview so you can be sure which item will be edited.

Hover on an item will highlight it in preview.

After clicking the HTML tag, the class edit field will expand with the current classes assigned to the given element. You don’t need to know the names of all classes in the library because we have an auto-complete mechanism! Start writing, and we’ll tell you what classes are available.

Autocomplete when typing class name.

The Component section has an additional “copy HTML” link that allows you to copy the entire item to the clipboard – if, for example, you would like to use it in another project.

Copy component’s HTML to clipboard.

All changes made to this panel are saved in real-time.

Try the HTML Structure panel in any of our applications: Bootstrap Shuffle and Bulma Builder.

Related blog posts

Shuffle December 21, 2023

Shuffle in 2023: Export to GitHub, UI Library Creator, and more.

We had a busy year at Shuffle, and you’ll love this. There are just five working days till the end of this year, and we are preparing the final update for 2023. The team is crushing it! If you haven’t checked Shuffle recently (https://shuffle.dev/new), here are the most important updates to the editor made in […]

Benedykt Michalski

Inspirational Writer

Learning October 31, 2023

Halloween.css

Use CSS filters to change your website’s style into Halloween mode in just a few lines of CSS. It is super scary!

Benedykt Michalski

Inspirational Writer

Bootstrap September 9, 2022

Hero Components Spotlight

Picking the right header is crucial to website reception. Will the user stay on the website or bounce? That depends on what he will see!

Benedykt Michalski

Inspirational Writer

© 2022 Shuffle. All rights reserved.