Components & Parameters Template Library? Need Help

[mlbass]

I’m trying to create basic components for my websites in order to simplify changes to the look and feel. Let’s use Headings as an example. Unless I’m mistaken, the only global control I have over them is the font library defining one as “heading”. When I change the font once, it propagates to the entire site. I want the same global control over headings using components. I created a component and used the below JSON (from another post). Instead of allowing choices like H1, H2 (in the example below) I’ll make a component for each so I have global control to implement style changes for each heading type. I think the JSON below covers most of the variables, but I get stuck on implementing the dynamic content (i.e. putting {{dc:p:headContent}} in the header content to have a starting point for what the header says, but the ability to edit that on the page, because obviously every header will have different text. I cannot find a tutorial on this. It would be great if there was a component library just like there are templates. Maybe I missed that, but it would be great to have that library just like Header, Footer, Page library. If there isn’t one, can you help me with this one? I want to also have a section component so there’s global control of the layout parameters (like padding) and the background color or image. I know there is some of this in the documentation, but again, I’'m getting stuck on the dynamic content part.

 {
"headContent" : {
  "label"  : "Heading",  
  "type"   : "group",
  "params" : {
      
      "text" : {
        "label"			: "Text",
        "type"			: "text-editor",
        "initial"		: "Heading"
      },

      "href" : {
        "label"   		: "URL",
        "type"			: "text",
        "placeholder" 	: "Header Text"
      },
      
      "target" : {
			"type"    		: "choose",
			"label"   		: "target",
			"initial" 		: "_self",
			"options"		: [
				{"label" 	: "Intern", "value" : "_self"},
				{"label" 	: "Extern", "value" : "_blank"}
				]
		}
    }
  },

  "HeadTag" : {
    "label"   : "Tag",
    "type"    : "choose",
    "initial" : "h1",
    "options" : [
      { "value" : "h1",
       	"label" : "H1" },
      { "value" : "h2",
       	"label" : "H2" },
      { "value" : "h3",
       	"label" : "H3" }
    ]
  },
   
	"HeadSize" : {
    "label"    : "Size",
    "type"    : "choose",
    "initial" : "H1",
    "options" : [
      { "value" : { 
        	"FontSize" : "2.5em",
        	"Height" : "1.2"
        },
        "label" : "H1" },
      
      { "value" : { 
        	"FontSize" : "2em",
        	"Height" : "1.2"
        } ,
        "label" : "H2" },
      
        { "value" : { 
        	"FontSize" : "1.6em",
        	"Height" : "1.2"
        } ,
        "label" : "H3" }
      ]
	},
   
 "headDesign" : {
    "label"  : "Design",
	"type"   : "group",
	"params" : {
    
		"textColor" : {
		"label"   	: "Text Color",
		"type"    	: "color-pair",
		"initial" 	: {
		  "base" 	: "#000000",
		  "alt"  	: "#FFFFFF"
			}
		},
    
    "topMargin" : {
          "label"    : "Margin Top",
          "type"     : "dimension",
          "initial"  : "0em",
          "slider"   : true,
          "keywords" : [ "auto" ],
          "units"    : [ "px", "em", "rem" ],
		"isVar"   : true
        },
    
    "rightMargin" : {
          "label"    : "Margin Right",
          "type"     : "dimension",
          "initial"  : "0em",
          "slider"   : true,
          "keywords" : [ "auto" ],
          "units"    : [ "px", "em", "rem" ],
		"isVar"   : true
        },
    
    "bottomMargin" : {
          "label"    : "Margin Bottom",
          "type"     : "dimension",
          "initial"  : "2em",
          "slider"   : true,
          "keywords" : [ "auto" ],
          "units"    : [ "px", "em", "rem" ],
		"isVar"   : true
        },
    
    "leftMargin" : {
          "label"    : "Margin Left",
          "type"     : "dimension",
          "initial"  : "0em",
          "slider"   : true,
          "keywords" : [ "auto" ],
          "units"    : [ "px", "em", "rem" ],
		"isVar"   : true
        	}
	}
  }
}

[charlie]

For the headContent part, anything in the params would be referenced through .THE_KEY. So for your headContent “text” it would be {{dc:p:headContent.text}} or for the href {{dc:p:headContent.href}}. Personify and Web Design Magic make use of parameters and components if you are looking for examples.

For another global solution you can make sure of Global Parameters stored here in the Globals Tab. You can then utilize though parameters in your components or Global CSS.

Let us know if that helps, not 100% sure what we’re trying to solve on this one. Have a great weekend.

[mlbass]

Thanks Charlie - in answer to your question, here’s what I’m trying to solve and I’ll use Headings as an example. I’m designing a website for a client, and one of their requests is to change the padding of the H1 Page Title. They want it closer to the header - less space. They will present the initial design to the Board, and the Board will probably want to adjust it again. The client wants to present the design with all pages having the same top padding. I can’t just do one example on one page. Therefore, this small change has to be repeated 18 times, not once. I want to enable a component so I change the padding parameter, sitewide, once. This is, after all, the purpose of Components, correct? I have been doing this with fonts and colors. I do not want to use global CSS because the client will be managing there site, and Components will be easier for them to make these changes than having to mess with CSS. It will be consistent with the Cornerstone UI. Does that make sense?

Regarding you suggestion for Personify and Web Design Magic. 1) I’m not ready to spend a few hundred dollars on this just to get example code I can use. 2) I’m hesitant to buy the course after watching the first video (before this thread) and hitting a dead end. Why would I get any different results watching a lot of similar videos. 3) ThemeCo started providing a library of Site Templates, Pages, Sections, Creative Columns, Headers and Footers a long time ago. Why? I think it was because some of your clients don’t want take the deep dive into the web design features of Cornerstone. They want to use/modify pre-built building blocks. I’m not averse to paying for components if you’ve switched to a “Free” and “Paid” revenue model, but you do not offer a Component library - Headings, Buttons, Columns, etc. But I don’t want to overpay just to be forced into the upsell for Max. I did NOT have a good experience with Gridorama in this regard. I got a bit burned on that to be honest, so I’m not taking the bite so readily this time. But I will say, at least I got templates to use.

I’ve done everything in the video, documentation and your response. I have an immediate need to get the website to launch so I get paid. And they have a deadline. I’d like to give you a login so you can see what I did wrong. Once I can get it working with simple components, I can progress to more advance ones later.

[charlie]

So your dynamic content for the parameter was in the parameter value instead of Text “Content” value here. The same issue is in your URL parameter where the parameter value is {{dc:p:headContent.href}} which is the same as it’s output. So you’re just referencing itself if that makes sense. You would add this dynamic content to a link are on the element itself. Parameters are used to change element values so you should be adding those parameters to tabs like “Primary”, “Effects”, and “Customize” in general.

Your background was also white while your headline color is white so this probably made it hard for you to debug.

If you want to use your parameters elsewhere I’d also recommend moving the export to the headline element or move the parameters to the div you have setup.

Based on what you’ve said with building blocks Personify would probably interest you the most as it offers a more complete component library with sample buttons, modals, and layouts. Thanks for the feedback, have a great day.

[mlbass]

I see your changes, but when I insert the component, it doesn’t let me change the default “Heading” placeholder, to the real heading for each page.

[charlie]

So if you want to keep the component export as the div you were using, you would move the parameters from the Headline element up to the div so you can view and edit the parameters when you use that component. Anything inside your component is going to be obscured so you can edit that within the component builder and all your changes will show up on all pages using that Component.

You could also move the component export to the headline element you were using. Let me know if that helps and have a great weekend.