Powered by DitDat

Tutorial: How To Use Clone Widgets

In this tutorial you'll learn how to use the Clone widget.

Understanding Clones

First of all, let's be clear on what problem we're trying to solve. 

When you're building a web site, you often want to have lots of pages have the same widget. 

For example, your DitDat site contains an email signup widget on every single page that's visible to the public. Why? Because people can land on your site on any page. You want them to be able so sign up for your email list no matter which page they land on. So you want exactly the same signup widget on every page.

And the problem is that you have to configure your email signup widget with a special key provided by MailChimp so the widget can talk to MailChimp over the internet. You only want to do that configuration once. But you also want a widget on EVERY page. And if you later decide to change the configuration, then you only want to make that change on ONE widget and you want all the email signup widgets to magically change right along with it.

What's the solution?

The solution is to create on email signup widget and configure it the way you want it. Then on every page, instead of creating another email signup widget, you create a Clone widget. You point the widget to your main email signup widget. And that's it. If you later change any of them, they all change together.

They all act like they're exact clones of the original. 

That saves you time and hassle. You always know that all your clones are in sync with each other.

In this tutorial we'll show you how to do each of the following tasks:
  • Edit a Clone widget
  • Create a new master widget on the Clone Masters page
  • Add a Clone widget to a page and connect it to a master widget

Editing a Clone Widget

  1. Go to the home page of your DitDat web site and make sure you're logged in.
  2. Hover the mouse over the e-mail signup widget and then click on the Pencil Icon.
  3. A MailChimp Dialog will appear.
  4. Change the wording slightly in the Description text box.
  5. Click the Save button to close the MailChimp Dialog.
  6. You should see the change you made in the e-mail signup widget. (If you don't, then refresh the page.)
  7. Go to your About page.
  8. You should see the exact same change has been made in the e-mail signup widget on this page. 
  9. Hover the mouse over the e-mail signup widget. 
  10. Notice that the usual yellow-colored Edit tab in the upper right corner of the widget is NOT yellow. It's orange. This tells you that this widget is a Clone. This is the ONLY way you can tell it's a Clone widget.
Next, we're going to create a new master widget in a special page that consists entirely of Clone widgets.

Adding a Master Widget to the Clone Masters Page

  1. Go to the home page of your site.
  2. Click on the "Admin" menu in your menubar and the select the "Clone Masters" menu item.
  3. Your browser will go to the Clone Masters page. 
  4. Click on the "Add Widget" menu item in the yellow Builder Bar at the top of the page.
  5. A set of widgets will appear.
  6. Select the "Photo Album" widget and drag it down into the right column below your e-mail signup widget.
  7. Click the Pencil Icon on the Photo Album to bring up the Photo Album Dialog.
  8. Click on the "Add Photo" button and select a photo to upload to the Photo Album.
  9. Click the "Save" button to close the dialog.
  10. Your Photo Album should now show up with the photo in it.
You have now configured a master Photo Album widget.

Next you are going to create a Clone widget on a different page and hook it up to the master Photo Album widget you just created.
Connecting a Clone Widget to its Master
  1. Go to the home page of your web site.
  2. Click on the "Add Widget" menu item in the yellow Builder Bar at the top of the page.
  3. A set of widgets will appear.
  4. Select the "Clone" widget and drag it down into the right column below your e-mail signup widget. It will have a title "Clone Widget" and the text of the widget will tell you that it hasn't been set up yet.
  5. Click the Pencil Icon on the Clone widget to bring up the Clone Widget Dialog.
  6. Change the Widget Type menu to be "Photo Album".
  7. A new dropdown menu will appear with the label "Cloned Widget".
  8. Click on the dropdown menu and choose the one that says "Photo Album on page: /admin/clone_masters". There should be only one Photo Album on the Clone Masters page, so you should have only one choice.
  9. Click the "Save" button to close the dialog.
  10. A Clone of your original Photo Album should now show up with the photo in it.
  11. Click on the Pencil Icon to edit the dialog again.
  12. A Photo Album Dialog will appear. Notice that this is NOT the Clone Widget Dialog that you just worked on! This is a dialog for editing the Photo Album itself!
  13. Click on the "Add Photo" button and select a second photo to put in the Photo Album.
  14. Click the "Save" button to close the dialog.
  15. Refresh the page so that the slide-show will begin.
  16. Every three seconds, the photo in the Photo Album should change.
  17. Click on the "Admin" menu in your menubar and the select the "Clone Masters" menu item.
  18. Your browser will go to the Clone Masters page. 
  19. Look at the master Photo Album widget you added to this page a few minutes ago.
  20. Every three seconds, the photo in the master Photo Album widget should change! This is very important. Any change you make on the master will be made on the clone. Any change you make on the clone will be made on the master. They are effectively the same thing in two different places.
You can clone the same master widget many times. You can have them on many pages, or you can put several on a single page. It's up to you.

The real power comes when you create a template page that has several Clone widgets on it. Then every time you use the template to create a new page, all the Clones will be automatically created on that page, already hooked up to their masters!

This gives you amazing power to set up template pages that are "mostly done" so that it's easy to then create a new page and fill in the details.

This is the end of this tutorial. You now know everything you need to know about using Clone widgets on your DitDat site.

Need More Help?

To keep our prices dirt cheap, DitDat is a self-service tool.

If you need help, look here:

  1. The FAQ Page (Frequently Asked Questions).
  2. Email the other people in your cohort.
  3. The Newbie Forum. 
  4. Ask a question at the next DitDat online seminar.
  5. DitDat Customer Support. (This will cost something! This is how we keep your basic prices low.)