https://docs.builderius.io/assets/js/f4cc8655.865be427.js

1"use strict";(globalThis.webpackChunkbuilderius=globalThis.webpackChunkbuilderius||[]).push([[4423],{2452:(e,n,t)=>{t.d(n,{A:()=>s});const s=t.p+"assets/images/elements-5-54be95f2258b2fe95d74d7ca067da4b5.webp"},4801:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>l,default:()=>h,frontMatter:()=>o,metadata:()=>s,toc:()=>c});const s=JSON.parse('{"id":"elements/settings","title":"Element Settings","description":"Every element in Builderius is controlled through two tabs that appear in the sidebar when you select an element: Content and Style. The Content tab handles what goes inside your element and how it behaves, while the Style tab controls how it looks and is positioned. This separation almost completely mirrors the separation to HTML and CSS.","source":"@site/docs/elements/settings.md","sourceDirName":"elements","slug":"/elements/settings","permalink":"/docs/elements/settings","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"id":"settings","title":"Element Settings"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/docs/elements/introduction"},"next":{"title":"Section","permalink":"/docs/elements/section"}}');var i=t(4848),r=t(8453);const o={id:"settings",title:"Element Settings"},l=void 0,a={},c=[{value:"Content Tab",id:"content-tab",level:2},{value:"Style Tab",id:"style-tab",level:2}];function d(e){const n={a:"a",h2:"h2",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.p,{children:["Every element in Builderius is controlled through two tabs that appear in the sidebar when you select an element: ",(0,i.jsx)(n.strong,{children:"Content"})," and ",(0,i.jsx)(n.strong,{children:"Style"}),". The Content tab handles what goes inside your element and how it behaves, while the Style tab controls how it looks and is positioned. This separation almost completely mirrors the ",(0,i.jsx)(n.strong,{children:"separation to HTML and CSS"}),"."]}),"\n",(0,i.jsx)(n.p,{children:"This separation keeps related settings organized and prevents the interface from becoming overwhelming - you can focus on structure first, then styling, or switch between them as needed."}),"\n",(0,i.jsx)(n.h2,{id:"content-tab",children:"Content Tab"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"Screenshot showing the Content tab interface with element name, conditions, HTML tag selector, dynamic data, content area, and attributes",src:t(5892).A+"",width:"1350",height:"1400"})}),"\n",(0,i.jsxs)(n.p,{children:["The content area shown above shows controls that exist in all elements except the non-container elements. For elements that have unique features beyond these universal controls, those ",(0,i.jsx)(n.strong,{children:"specialized settings are covered in their individual articles"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Element name (1):"}),' Click to rename your element for better organization (like "Card Wrapper" or "Hero Section"). This doesn\'t affect the HTML - it\'s just for your reference in the builder.']}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Conditions (2):"})," Opens conditions builder to set conditional rendering based on various criteria."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Sidebar Collapse/Expand (3):"})," Collapse or expand sidebar categories toggle to manage your workspace."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"HTML Tag Swap (4):"})," Change the HTML tag this element renders as."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Dynamic Data Toggle (5):"})," Opens modal with searchable list of dynamic data sources to insert content."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Dynamic Data Dropdown (6):"})," Insert dynamic data from any source, local or remote."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Content area (7):"})," Main content area where you type content or insert from dynamic data."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Dynamic data toggle (8):"})," Add dynamic data inside Attribute values."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Attributes (9):"})," Create custom attributes."]}),"\n",(0,i.jsx)(n.h2,{id:"style-tab",children:"Style Tab"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"Screenshot showing the Style tab with UI/code toggle, classes, and organized styling sections",src:t(2452).A+"",width:"1350",height:"1400"})}

1),"\n",(0,i.jsx)(n.p,{children:"The Style tab controls how your element looks:"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Editor mode (1):"})," Toggle between UI and Code editor modes for styling control. ",(0,i.jsx)("span",{class:"badge pro",children:"Pro Feature"})]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"HTML tag (2):"})," Same HTML tag selector as Content tab."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"CSS classes input and search (3):"})," Search for, assign, and create new classes."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Dynamic local (active) class (4):"})," Add unique styles to just this element."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Classes Dropdown (5):"})," Dropdown/modal element with quick access to all global, template or local classes."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Assigned classes (6):"})," Assigned classes to this element, but not currently being edited."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Styling categories (7):"})," Organized sections for different styling properties:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Typography"}),"\n",(0,i.jsx)(n.li,{children:"Layout"}),"\n",(0,i.jsx)(n.li,{children:"Flex Child"}),"\n",(0,i.jsx)(n.li,{children:"Sizing"}),"\n",(0,i.jsx)(n.li,{children:"Spacing"}),"\n",(0,i.jsx)(n.li,{children:"Position"}

1),"\n",(0,i.jsx)(n.li,{children:"Backgrounds"}),"\n",(0,i.jsx)(n.li,{children:"Borders"}),"\n",(0,i.jsx)(n.li,{children:"Advanced"}),"\n",(0,i.jsx)(n.li,{children:"CSS Variables"}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Values and variables:"})," Each styling property accepts static values or CSS variables for reusable design tokens."]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Next steps:"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"../styling/introduction",children:"Learn detailed styling techniques \u2192"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"../dynamic-data/getting-started/conditions-overview",children:"Explore conditions and dynamic content \u2192"})}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},5892:(e,n,t)=>{t.d(n,{A:()=>s});const s=t.p+"assets/images/elements-4-54e60c3edcbb9ad375b2d4de66c4cbe1.webp"},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>l});var s=t(6540);const i={},r=s.createContext(i);function o(e){const n=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(r.Provider,{value:n},e.children)}}}]);