# Help with UIBuilder **URL:** \ **Category:** General\ **Tags:** uibuilder\ **Created:** [16 September 2024 07:01 UTC](https://discourse.nodered.org/t/help-with-uibuilder/91010 "2024-09-16T07:01:54Z")\ **Posts on this page:** 1\ **Showing post:** 47

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\ **Post date:** [23 September 2024 16:15 UTC](https://discourse.nodered.org/t/help-with-uibuilder/91010/47 "2024-09-23T16:15:24Z")

> [@smanjunath211](#): > > Is it possible to show another element in the same html page Yes, absolutely. The exact "how" depends on what you want it to look like. In general, the simplest starting point is to wrap things individually in another `

....

` which helps isolate them. However, you might take note of my recent posts on layouts where I give a couple of examples of layouts that you could use. > [@UIBUILDER: Example web page layout #1 (typical content-heavy or blog style)](https://discourse.nodered.org/t/uibuilder-example-web-page-layout-1-typical-content-heavy-or-blog-style/90176): > > Hi all, I know that some people wanting to use UIBUILDER are not so familiar with HTML and CSS. This example can be used with any UIBUILDER node. It does not require any fancy front-end framework because it is simple, modern HTML and CSS based on a grid layout of 3 rows and 2 columns. It will adjust to light/dark browser preferences thanks to UIBUILDER's built-in brand CSS file. No JavaScript is needed for this example. Simply add a uibuilder node, give it a url name, deploy, then edi… > [@UIBUILDER: Example web page layout #2 (Dashboard Style)](https://discourse.nodered.org/t/uibuilder-example-web-page-layout-2-dashboard-style/90586): > > As hinted at in [UIBUILDER: Example web page layout (typical blog style)](https://discourse.nodered.org/t/uibuilder-example-web-page-layout-typical-blog-style/90176), here is the 2nd example page layout. The flow below contains everything needed to fully reproduce this layout along with some design documentation and hints on adjusting it to taste. Cards 7 & 8 have been dynamically inserted from Node-RED by the use of UIBUILDER's no-code uib-element node. A no-code uib-update node also illustrates how to make further adjustments - in this case, adding a style attribute to chan… As a really simple starting point, here are a couple of index.html files you could use that will give slightly different looks: ```html Examples for smanjunath211 - Node-RED uibuilder

Examples for smanjunath211

Using the uibuilder IIFE library.

``` ```html Examples for smanjunath211 - Node-RED uibuilder

Examples for smanjunath211

Using the uibuilder IIFE library.

This is a heading for something else

``` Div and article are 2 block elements. The uibuilder brand CSS includes formatting in particular for the article tag and you will see it being used in the 2nd of those posts but you can also use it "naked" as I have above. Just remember that HTML is a tree structure at its heart (or a hierarchy if you prefer). So keeping a logical structure will really help. When you use the no-code nodes, if you check the HTML that gets created, you will notice a very clear and logical structure. > [@smanjunath211](#): > > i am still working on it, but have high doubts i will succeed. You will get there. You've launched into something reasonably complex but you already have a lot of HTML so you've some knowledge already. --- _[View the full topic](https://discourse.nodered.org/t/help-with-uibuilder/91010)._