Creating reusable components with Symbols
Learn how to make custom builder blocks that can update many pages in one place, and even take in custom inputs by using Symbols.
Reusable components, or reusable sections, are extremely helpful. They save you time by having to create less components and it keeps your style consistent from page to page. You can drop your reusable components into any of your Builder pages, and any changes you make will be saved and updated everywhere. We will be covering:
Creating your symbol
Navigate to the Models tab (located in the site navigation bar). Models can be used to create many things and can be very customized, but we are going to keep this simple. In the Models tab, click “create model” and select “section”. Give your section a name. Once you click create, we are going to ignore the developer options for now.
Building out your symbol
Navigate back to Content. You’ll see that we have two tabs at the top now, pages and symbols. Lets create a new symbol. Create a new entry and select “symbols”. Now we can build out our content. We Are going to make a symbol that can ask a user something, then we are going to bind it to the UI and use it in any page. We can also update our symbol on any page, and when the page is published, the symbol will get updated on every page it is used on.
Next, we are going to add the pre-made Hero template to our page. Go to the “Data” tab and click “create input”. Let’s call our input “Title”, it will be type “text”, then click “more options” and give this input a default value of “Great title”. Now, we will add two more inputs, a subtitle and an image. For the subtitle input, repeat the steps we did for “Title”. For our image input, give it a title of “image”, it will be type “file”, and below you can choose a file type (JPEG is the best option). Then, give this input a default value. This can be any image.
Now we want to take these inputs and bind them to our UI. Click on the title and navigate to the "element data binding" section. Click “new binding”. We will “get” our text “from” Title. You will notice a “G” now shows up for the title. This is our dev state, you can edit this in the “data” tab. Repeat this step for our subtitle. To bind the image, click "new binding", then for "get" enter in "style.backgroundImage". For "from", select "image". This isn't going to give us our default image, so we need to enter in some CSS. We will input "url(" + state.image + ")". Now, our default image will appear.
Reusing your symbol
Now, we will save our page, name it “Hero component”, and publish it. We can use our component in a page. Once you have a new page created, drag and drop the “symbol” component onto the page. Click edit, then select the “Symbol” page in the model dropdown. Then select “Hero Component” for the entry. Now, you are using your reusable component!