How to store and reuse HTML sections

Video Transcript

Hello, and welcome to this new LiveCanvas tutorial.

Today. we're going to show you how to save and reuse HTML sections.

Let’s say that we have just built a cool HTML section, (this one looks like a special jumbotron), and we'd like to save it to the local library, in order to be able to reuse it a number of times on other pages of the website, maybe making some changes each time to its content.

Before diving in, have a look at our sample test page: below the jumbotron, we have some more sections, and we have a final section at the bottom with a call to action, we're gonna have a look later to it.

But first, let's concentrate on this nice jumbotron which has a cool glass morphism effect.

To save it to our local library, we just have to open the section’s contextual menu and choose the “Save to library” option. Now let's enter a nice descriptive name:

Let's call it just “glass jumbotron” which sounds quite clear, and confirm.

The new section is immediately added to the library.

Now let's exit this page and see what  happened   in the backend in the meantime.

Inside the LiveCanvas backend panel, there is a sections view, where we can review the glass jumbotron that we've been just saving, and we can even re-edit it if we need to.

If we click the “edit with live canvas” link, we're gonna open the live canvas editor and be able to edit and refine the section. Or if we click the normal “edit” link, we can review the code and grab a shortcode. We’ll dive into this later.

But let's just focus on what we're going to do when you want to reuse this HTML section in another page in the simplest way.

Let’s create a new test page to demonstrate it.

Let's create a new section.

Let's click now on “your HTML sections”. And  here is the glass jumbotron.

As you can see, when hovering, a small preview is shown on the right.

So what we've been achieving now is just retrieving our custom HTML snippet and copying it onto this page. So now for example, we can directly customize this text and maybe also change the image as well, I'm gonna just have some fun with some nature pix.

Let's say that we are satisfied, and we're gonna save right here.

Please note that there is no dynamic link between this jumbotron and the jumbotron we've been seeing in the backend panel: we just created a static-like HTML copy of it.

But now let's show another way to recall sections, useful to repeat the   same, identical section on a number of pages. Let's go back to our homepage

As I anticipated before, at the page bottom we have a call to action section that we want to store as well. So I'm going to just launch the live Canvas editor,

scroll down to the element and save to the library. I'll just call this “call us CTA”.

Upon confirming, it’s instantly added to the local library, as you’ve seen before.

If I go back to the WordPress admin panel and have a look at the LiveCanvas HTML sections screen, you'll see that now we have two elements, the glass jumbotron that we've been creating before and the “call us” call to action we’ve just saved.

If I enter here, you can see on the right that there is a shortcode that  can be used to recall this section in your site pages.

There is some PHP code as well that can be used throughout your PHP templates if you wish.

I'm going to just copy the shortcode and use it  in a new test page.

Let’s add a section here. I'm gonna choose WordPress integration. And then I’m gonna use the shortcode element.

Then I'll click it, So I'm able to customize it.

I'll just paste the relevant shortcode and update the preview.

And as you can see, we've been achieving, again, an extra copy of what we've been saving.

But so, where’s the difference between these two methods?

This time, we have not created another HTML copy, as this is just a reference to the section that  is saved into the backend.

If we go in here to see the HTML code, we'll see just the shortcode, recalling the data.

We cannot go and edit the HTML code directly here.

On the other side, as you remember, the first element in here, the jumbotron, is a simple static-like HTML copy of the section, that  you can  edit how you want, and freely modify. Changes to the jumbotron will not reflect on the original section in the backend, or affect any other part of the website.

Going back to the shortcode recall method of the Call us CTA,  is making modifications to the custom HTML section possible?

Well, yes, but it’s different of course:  you have a central point of control, where you can  affect all the instances of that section through potentially many pages of your website. You can do this from the Sections backend, not here.

Let’s say that we want to make a modification to the call us CTA, we just have to go to the sections backend panel, and  go editing the code.

Or even better, via triggering the LiveCanvas editor on that item.

Ok, let's modify this text from “today”. to “now”.

And hit the save button.

I'll go back to the page we were editing and now upon exiting the editor,  the page will be reloaded. And as you can see, the modification we’ve just done to the section  is immediately reflected.

So if we were using this element on a number of pages, we'll have the edit propagate everywhere,  as of course, this is just a reference to the element that is saved into the backend.