Is it possible to include common HTML code on multiple pages?

  • 5
  • Question
  • Updated 9 years ago
  • Answered
Is there a way to have a run-of-site column, such that the contents can be updated in one location and then propagated on all pages that have this common code? In other words, I want to create one block of HTML code that is referenced on multiple pages.
Photo of Robert S

Robert S

  • 8 Posts
  • 0 Reply Likes
  • hopeful.

Posted 10 years ago

  • 5
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hello,
I think the best way to do this would be to create your first page and then make a copy of the page by clicking the down arrow of the Save button > Click Save As. Now give this page a new name. You will now have a duplicate of the original page with the html code, you can then remove/change the other parts of the page. Then each time you create a new page do this so you don't have to enter the code again.

Please let us know if that did not answer your question.

Regards,
Emmy
Photo of Robert S

Robert S

  • 8 Posts
  • 0 Reply Likes
OK - yes, this makes sense. The only drawback is if and when I need to make changes to this code, I will need to make it for each of the previously created pages. I presume this type of feature is in your product roadmap, but this workaround is sufficient in the short-term. Thanks.
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
The ability to apply code at a site level is something we would like to look at in future. I can't make any definite promises at this stage, however.
Photo of Kawina

Kawina

  • 7 Posts
  • 2 Reply Likes
Is there any progress on "looking at in future". In my case, I'd like to be able to repeat a specific Text widget that contains advertising, Google Analytics code and CSS.
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
Hi Kawina,

You can create a duplicate of this page. If you ever need to copy all the elements of a page, you can quickly do so using the Save As feature. Duplicating a page is also sometimes a wise action to take, before making any significant changes to it. That way you will not have lost any of your work if something goes wrong, or you simply don't like the changes you've made. You can always delete the copy, and your original page will still be there to go back to.

Here's how you do it:

Navigate to the page you want to copy
On the Yola toolbar, click on the down-arrow next to the "Save" button.
Choose "Save Page As"
The "Save Page As" dialog box will pop-up asking you to name your new page, (and give you the chance to change the page heading, and decide whether or not to include the new page in your menu).
Click "OK" and you're done. The newly created page will now appear up in the Page drop-down arrow of page choices, so you can go back to it again if you chose not to include it in your menu.
Photo of Kawina

Kawina

  • 7 Posts
  • 2 Reply Likes
The "This answers the question" star should be removed.
Photo of Kawina

Kawina

  • 7 Posts
  • 2 Reply Likes
Thanks Kershnee, but that misses the point. Like Robert, I'd like to have common content that when changed, the changes propagate to all pages site-wide that share that content. As it stands currently, any change requires the manual duplication of the change to all pages.

Six months ago, Monique said that the functionality is being considered. Is there any update on that, perhaps with a schedule?
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
Unfortunately I don't have a date for this feature. Currently the site wide changes are limited to the banner image and the background image on certain templates.
Photo of Kumby

Kumby

  • 211 Posts
  • 4 Reply Likes
This would be an awesome feature...
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
The ability to host "site wide" .js and css files (for a fee of course) would be awsome.
I do understand the security risks for Yola though. Any news on this?
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
We are investigating including this option in an upcoming release. We have a fair bit of work to do to get there, but hopefully this is something we can offer soon!
Photo of Kawina

Kawina

  • 7 Posts
  • 2 Reply Likes
Actually, I'm more interested in HTML, as was Robert originally. A reusable text box would do the trick. One way would be to provide the ability to save a text box as an editable custom widget. That certainly wouldn't create security issues and hopefully not rise to the level of justifying a fee.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Here's what you could do, Kawina.

Create a seperate page on your site and place your text box on it.
Then, on all the other pages of your site, you could open that page (text box) in an iframe. That way you only have to edit one page.
Photo of Kawina

Kawina

  • 7 Posts
  • 2 Reply Likes
Thanks Boomer. That was close, but it doesn't work because the extra page includes all of the template elements.

I also tried to create a new site without a template, but I couldn't see how to do it. Is there a way to create a page without the template elements?
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hi Kawina,
I have two iframes on my site http://helderberg.cc/
Check out the scroller on the right and the horoscope down below.
Get in touch with me via my contact form and I'll show you how it was done.
Photo of Kumby

Kumby

  • 211 Posts
  • 4 Reply Likes
Hey Boomer,
Could you tell me how you got that slide show on your homepage?
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
I would suggest going to either http://yolacodes.yolasite.com to grab the code (please read the rules first) and look under "Slideshow". Or you can go to Dynamic Drive and obtain the code there - http://www.dynamicdrive.com/dynamicin...

I need sleep now - can help tomorrow if you get stuck :-)
Photo of Kawina

Kawina

  • 7 Posts
  • 2 Reply Likes
I've developed a generic solution. Many thanks to Boomer for pointing me in the right direction.

I suspect that this board does not allow code tags in the page content. In case it doesn't, I've substituted left square brackets ( [ ) for left pointy brackets ( < ), so they'll have to be changed back if you use the code.

1. Create a new page that is out of the menu. In this example we'll call it include-page.

2. To create a page with only a white background and the common content, (but no template elements such as the menu or footer) add an HTML widget with this code:

[style type="text/css">
[!--
.include {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #FFFFFF;
}
-->
[/style>
[div class="include">
Your common content code here
[/div>

Note that on the edit page the template elements are still present but are removed correctly on the preview and published pages.

3. On the pages that you want to use the common content add an html widget with this code (change height & width to suit your needs):

[iframe src="http://www.yoursite.com/include-page.php"
frameborder="0" width="175" height="1000"
scrolling="no">[/iframe>

Now whenever you change include-page, the change will automatically propagate to all of the pages with the iframe. However, the iframe height and width may have to be adjusted.
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Thank you for the very useful tip. I am sure it will help many people. Unforunately I do not have the ability to mark it as the company solution as it is not posted by an official rep. I have given it a star though and removed the other answer. As is so often the case, power-users like yourself come up with better answers than we do. That is what I love so much about this community! Thanks again for your efforts in posting this!