Use a text widget as a sitewide (page to page) copy feature in Yola... A Honey Bear Playhomes tip...

  • 3
  • Idea
  • Updated 8 years ago
Okay, so it may sound a bit wild but it does indeed work. When does my stuff not work right? LOL ;)

For those of us who either have a vast number of pages or a vast number of scripts on our pages you all know how challenging it is when we do a site update and all our content changes. Copying codes from page to page and ensuring that all your pages look 100% identical can be at times one of the most trying things we will face. You want to set forth a professional appearance and uniformity on all your pages goes a long way to show your visitors that you are more than simply a novice website builder.

There are times that one thinks that they can speed up the process by dumping all your scripts in one HTML widget having one big code instead of many only to find that some scripts don't play well all together like that and can in fact break a page. The use of individual widgets offers a form of protection as well as allows for proper placement of text or images, flash content or menus.

I personally have used this technique since I accidentally created it a few years ago and all for a few issues find it to be most reliable. (Always use a test page first)

When you have edited your page and placed all the widgets that you want to have copied to all your other pages do the following:

1) In your sitebuilder click "Save page as" and save your perfectly edited page as "site copy"
2) Drag a text widget to the top of the page and type the number "1" into the editor.
3) Drag all your widgets which are identical from page to page below the text widget from step 2.
4) Drag a text widget to below the last widget that you want copied and type the number "2" into the editor.
5) Update/Publish your website.
6) Open the newly created "site copy" page in your browser and highlight from the number 1 to the number 2
7) Right click on the highlighted numbers and click "View selection source" (works best in Firefox)
8) In the following page right click on the highlighted source code and click "Copy"
9) Open your sitebuilder to a new page. (Name it "site copy 2")
10) Drag a text widget onto your page and click once in the text editor to show the little HTML icon in the toolbar.
11) Click the little HTML icon and open the HTML editor.
12) Highlight the small bit of code contained within the editor. (Usually just a few characters)
13) Right click on the highlighted code and paste/replace the source code copied from step 8
14) Click "OK"

In the sitebuilder you will see the text widget with the numbers 1 and 2 contained within appear.

15) Highlight and then delete the number 1 (one number at a time)
16) Highlight and then delete the number 2 (one number at a time)
17) Click once in the text widget and then click the little HTML icon in the toolbar.
18) Highlight and then copy all the code contained within to your wordpad or notepad editor (for backup).
19) Update/Publish your website.
20) View "site copy 2" in your browser to verify appearance and content.

To add this code and the identical content that you want to place on each page of your website do the following (please note that it is recommended that you use a test page first):

1) Open your page (any) in the sitebuilder
2) Drag a text widget onto your page.
3) Click once in the text widget and then click the little HTML icon in the toolbar.
4) Highlight the small bit of code contained within the editor. (Usually just a few characters)
5) Right click on the highlighted code and paste/replace the code copied from step 18 from above.
6) Click “Ok”
7) Preview or Publish your site to verify appearance and content in your browser.

Please note: Do not delete the pages that you created from above as they will be useful when you have future edits on your website. Simply edit the content of page "site copy" and repeat the above steps.

Additionally, it is recommended that in ALL your scripts that you use the complete/full URL to your resources.

This is effectively a copy and paste of the actual scripts in all your HTML, two-column, text and image widgets from one page to another. For example, I have all the content including image and flash overlays which are layered over my banner in one text widget and all the footer content in another text widget thereby saving me countless hours, days or weeks copying codes from one page to another.

It really does speed things up quite a bit as well as ensure that your website pages are all 100% identical from one to the other.

Happy site building
Ed

If you find my tips useful please share my website with your social network friends...

Honey Bear Playhomes Tips and Favs in one place... A Honey bear Playhomes Tip ;)
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes

Posted 8 years ago

  • 3
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Ed, this is a lot of steps, but I will try it out! So we need to follow every step when we need to update it? It seems like it may take longer... I'm a little confused, LOL. I will try it step-by-step and see how it does.

I just don't get how does it do it? Like how do text widgets update by editing one page? Thats a pretty cool tip!

Thanks for sharing it! :)

Thanks!
-Nathan
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Okay let me explain a little better my friend...

Say you are editing your site and make 25 changes to your index page and in those changes you have:

* A custom footer with links in a text box combined with an image of your logo.
* New tracking codes for Google and maybe another analitical script for an alternate tracking program.
* Copyright notice update.
* Custom menu JS scrips
* Custom background script
* Google search feature placed in a two column widget layered over your banner.
* Custom favicon script
* Custom cursor script
* Custom CSS in HTML widgets

In addition to anything else that you can think of...

You break up the page into top and bottom with a text widget with all the codes for the top of the page in the top widget and all the codes for the bottom of the page in the bottom text widget. That way you can copy all the content (widgets) that you want to paste on all your other pages with only one trip to that page instead of many.

Imagine having 100 pages and trying to make each 100 pages look identical. Before, you would either have to copy all the codes from the starter/updater page into a notepad and then paste each one individually into individual text, HTML or image widgets on each of your site's 100 pages then on each of those 100 pages align each two-column widget and widget margin settings to get the look you are after trying to make that page look identical to the one before. I am the first to admit that once you do a few pages there are subtle changes that take place and the looks can change from simply clicking from one page to the next in your site.

The steps that I have outlined above make it so that you can place all those widgets I just mentioned above into one text widget HTML editor instead of many different widgets with their margin settings, image and text placement of all your widgets between the numbers 1 and 2 (steps 2 and 4 from above) precisely as it looks on the original page. Every page from there on out will be exactly as the one before it.

I'll post a video soon to show you what I mean...
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Ed, thank you so much for this explanation! This does help me understand a lot better. I am looking forward to the video (you can probably use Camtasia Studio for it, thats what I use for my video tutorials or whenever I need to record my screen)

Thanks!
Nathan
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Dude look above I posted the video...
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yeah sorry I was already typing out that comment above and then you posted the video and I didn't know so I posted that comment. Thanks for the video!! I already watched it and I already told someone about i and they said they gotta use this because they have like a lot of pages and they have a lot of custom HTML on their site that they need to add to every single page so thank you so much for this tip, this seriously helps a lot!! I will definitely be using this because almost half of my page int he site builder is HTML widgets!

Thanks,
Nathan
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
I'm usually good for a few now and then... ;) Glad to help make what would have been weeks editing down to hours. This is seriously that good of a tip...

If one was creating a new site it would be so easy to "save page as" but for those of us millions of users who have to update their existing site (worse if you have hundreds of pages) this will keep us from pulling our hair out until Yola releases the sitewide common widgets.

At least the reps can lead their questions of sitewide common widgets to this thread until they can come out with something that does it better.

What would you guys do without the Bear? LOL
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I don't know what I would do without you but you provide so much stuff for our sites! I am putting an ad to your site on my members area of my site. Go check out my members area here: http://my.nathansmusicstudio.cz.cc The coolest part about my Members Area is the Edit Profile forms. They use Ajax to submit to Authpro so it doesn't direct to a new page and say "Update details successfully" it says is right on the page, and I made it all my self with jQuery and some other sweet stuff. You can either create an account or just login with the Test account:

Login: Test

Password: Test

Do you have a specific image for your ad? I am putting it in the sidebar with the rest of the advertisements. Yours will be the featured one!

Thanks,
Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Ed, I just watched the video and now I 100% understand! It all makes since now! Thanks for that video, all of those steps aren't as hard as they sound!

Thanks!
Nathan
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Glad that you found the video makes the written tutorial easier to understand...

It is truly one of those things that makes editing your site easier. Just be careful on some of the more creative placement of widgets when you layer them atop other widgets. Sometimes if you go beyond the sitebuilder boundaries you can get stuck. Thus is why you always want to place a blank text widget on top for security. See the following thread for more information on layering of widgets.

Don't mess up your page with bad or difficult code trying to layer objects such as a search feature above/over your navigation menu or banner. Use a two column widget to do it instead... A Honey Bear Playhomes tip...

I will work on a little 125x125 px square banner. thanks for the offer.
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
Ed this is brilliant.

Your amazing at site building and your tips are just brilliant.

Thanks :)
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Just lucky my friend... If you look at each of my site's pages you will see that they are identical to the others. For a site that has 3 year old pages this technique is perfect for updating and ensuring that each page is the same as the other...

Did you see my banner today? Mouse over the house... I am still smiling at that one. ;) In a banner no less. LOL pretty cool.
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
The banner is awesome, been sat there for a few minutes going WOW. Your site is brilliant :)
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Thanks John

I am just happy that my tips are able to help others and save time in the process. Lord only knows how much time I spent on them all.

LOL, I still look at it, smile and say to myself "wow" I am amazed that I was able to pull it all together as it turned out. I was lucky indeed... ;)
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
Hi Ed, It's me again,

I've started redesigning one of my sites now the new Yola CSS feature is out.
I remembered your little tip came back for a read and have started to use it, its possibly one of your best tips. I love it.

All though i haven't done much work yet i want to show you my progress.
http://sleightsinfonew.yolasite.com/s...

I have also decided to include some of your other tips when i continue to add to this page.

Many thanks,

John M
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
This might be one of my last posts as my laptop is dying a slow, loud and painful death and there is no way I can afford to replace it anytime soon.

Glad that you are finding this little gem as useful as I have John... It truly can help a site builder do some pretty cool things that were before unobtainable.

I agree with you in that it is also one of the best... So many possibilities... It's a shame that more members don't post their websites on any of my tips threads as it would be interesting to see what others have created using them.

Keep up all your great work.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I'm sorry to hear that Ed. :( Did you enter that website contest to win a new laptop? It was on Facebook and here is the thread for it: Show of your site for a chance to win a HP Laptop! Did you enter that? I think ya would have won if you did because your site is so awesome!

I used your snow effect on this site: Santa's Workshop Also for that snow effect, I put in some extra options by looking at the variables in the JavaScript file and I used some JavaScript through the snowStorm.option It is neat, just click on Preferences and you can turn the snow on and off and you can change the way the snow is blowing! (the wind direction)

Sincerely,
Nathan
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Yeah, I entered but when Yola changed the rules to only allow the top 100 vote getters to be decided from (after the fact and after the contest ended) it really chapped my backside. In fact, that was one of the reasons I felt disillusioned and reconsidered my future contributions here in the forums as well as contemplated a full retirement. As you well know I do so enjoy helping, sharing my knowledge and being a mentor to others it takes a computer to do so and as mine has been limping along for months now, I thought that I would at least have a chance to win the contest so I entered thinking that it would be perfect timing. Sadly and most frustratingly, I was nowhere near the top 100 vote getters as the entry for my site failed the first 4 times I tried and the button to share it with my friends failed which made it an impossibility to get any more than the 1 vote that I placed for myself. The experience really was eye opening.

So, without a computer I am useless... Glad that I updated my site when I did because it might be some time until I get that chance again...

Man the loss of internet will drive me nuts though and my old computer is still being used by my niece who I gave it to for her schoolwork. Would never take it back from her... At least I can check email on my phone. ;)

As to your Christmas site, I was most impressed. I think that I might steal the code for the preferences next year. ;) Good job on placing...
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Arggg... You had to bring up the contest... I'll be stewing over that all day now... :(
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I would have voted for yours because I love your site and all of these awesome codes and posts you have posted here.

I'm sorry about bringing up the contest... I forgot to enter 'cause I am not done with that site yet.

Also I am so sorry you didn't get to win or enter. You should have though, you got such a nice site, and you post so much codes for everyone and so much tutorials and tools. You contribute a lot to the Yola community. Maybe there will be another contest before your computer fully goes out on you.

I'm glad you were impressed, and also go at the code for the preferences, I am adding in another cool thing that says when the music is on and off.

Sincerely,
Nathan

Sincerely,
Nathan
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Ed,

I saw your comments about your frustration regarding the contest and I just wanted to touch base with you. I can assure you we in no way "changed the rules" of the contest as you indicated. The contest was judged based on a combination of votes, design and content. Our panel of judges evaluated all the entries and based on all three components, they selected the winners. We noticed that it happened that these winners were amongst the top 100 vote getters which we thought was impressive with over 3,000 entries so we made mention of it. It was not however a requirement.

I am also sorry to hear your laptop is not in good health and you are feeling disillusioned by that and reconsidering your presence in the forums. I agree a free laptop would have been a wonderful solution, but sadly that was not known, nor could it have been a deciding factor for our judges. We hope your computer can get you through as we would hate to lose your voice here.