Powered by DitDat

Tutorial: Advanced Widget Editing

This tutorial shows you how to edit content on a page. All of the content on your page is contained within individual content groups called widgets. Widgets allow you to organize blocks of content into functional groups which can be individually added to a page, moved around a page, and edited.

Editing Widgets

  1. Go to the page you'd like to edit and make sure you're logged in.
  2. Hover your mouse pointer over the section of the page you'd like to edit.
  3. A yellow 'edit tab' will pop up. It contains an Edit Pencil Icon, a Copy Icon, a red Delete X, and six small dots.
  4. Click on the Pencil Icon. 
  5. An Edit Widget Dialog will appear on your screen. 
This dialog allows you to change everything about the widget your mouse was over. Different types of widgets allow you to change different properties on the 'Content' tab of the dialog, but every widget allows you to change the following:
  • Widget Title:  Change header text that displays above the widget, set whether or not the title is displayed, and change the alignment of the title (left-justified, centered, or right-justified)
  • Widget Border:  Do you want to display a border around the widget or not?
  • Widget Margins:  Set the amount of white space that appears between the border of the widget and it's contents
  • Widget Styles:  Choose one or more theme-specific styles to change the appearance of the widget (e.g. background colors, corner styling, etc.)
  • Widget Properties:  Set individual colors and styles to change the appearance of the widget
  • View Permissions:  Choose which groups of people are allowed to see the widget
  • Publish Date:  The widget won't be seen by anyone else until the specified date
  • Expiration Date:  The widget won't be seen by anyone else after the specified date
  • Widget Lock:  Don't allow the other owners of the page to edit this widget.
In this tutorial we'll show you how to do all these things using a text widget as an example.

Creating a Test Page

In this tutorial we're going to create a test page and add a text widget for your to practice on. That way, if you mess up, you can just delete the page and start over.

  1. Navigate to your home page and make sure you're logged in. You'll see a Builder Bar (usually yellow) at the top of the page if you're logged in and are allowed to edit the page.
  2. Create New Page: 
    1. Click 'Create New Page' on the Builder Bar
    2. Enter a Page Name (e.g. 'Widget Practice Test Page') at the 'Title' prompt
    3. Click on the 'Create New Page' button
    4. You'll be taken to the new page
  3. Add a Text Widget:  Depending on the default template your system uses to create new pages, you may or may not already have a text widget on the new page. Either way, practice adding a new widget by:
    1. Click 'Add Widget' on the Builder Bar
    2. Drag 'Text' onto the page and release it when the dotted drop box is at the right spot on the page
You are now ready to practice editing your new test widget. 

Changing the Widget Title Text

  1. Move your mouse over the text widget
  2. Click on the Edit Pencil on the yellow Edit Tab that pops up
  3. Edit the text in the Widget Title text box at the top of the Text Dialog box.
  4. Click 'Save' at the bottom of the text dialog.
Your new title should now be showing at the top of the text widget.

Hiding the Widget Title Text

  1. Move your mouse over the text widget
  2. Click on the Edit Pencil on the yellow Edit Tab that pops up
  3. Click on the Green Check Mark right after the Widget Title text box at the top of the Text Dialog box.
  4. Click 'Save' at the bottom of the text dialog.
The widget title should be gone.

NOTE:  You could have deleted all the text in the Widget Title text box and left the 'Display Title' box checked, but that would have left a blank line at the top of the widget.

 Centering the Widget Title Text

  1. Move your mouse over the text widget
  2. Click on the Edit Pencil on the yellow Edit Tab that pops up
  3. Click on the Title Centering Button right after the Widget Title text box at the top of the Text Dialog box.
  4. Click 'Save' at the bottom of the text dialog.
The widget title should now be centered.

Display the Widget Border

  1. Move your mouse over the text widget
  2. Click on the Edit Pencil on the yellow Edit Tab that pops up
  3. Click on 'Appearance' Tab at the top of the Text Dialog to open the dialog to the appearance section.
  4. Check the 'Display Widget Border' checkbox to display a border around the widget
  5. Click 'Save' at the bottom of the text dialog.
You won't always see a border around the widget. You'll only see a border around the widget if your theme has defined a border. If your theme hasn't defined a border, then checking or unchecking the 'Display Widget Border' checkbox won't have any effect.

Changing Widget Margins

  1. Move your mouse over the text widget
  2. Click on the Edit Pencil on the yellow Edit Tab that pops up 
  3. Click on 'Appearance' Tab at the top of the Text Dialog to open the dialog to the appearance section.
  4. Select '20 pixels' from the Widget Margins dropdown
  5. Click 'Save' at the bottom of the text dialog.
There should now be extra space between the widget text and the borders of the widget.

Changing Widget Styles

  1. Move your mouse over the text widget
  2. Click on the Edit Pencil on the yellow Edit Tab that pops up 
  3. Click on 'Appearance' Tab at the top of the Text Dialog to open the dialog to the appearance section.
  4. Experiment with selecting different styles in the Widget Styles dropdown.
  5. NOTE: You can select as many styles as you want from the Widget Styles dropdown, but some later styles may override earlier styles of the same type.
  6. Click 'Save' at the bottom of the text dialog.
Practice selecting one style at a time to get an idea of what impact each style has on the overall look of the widget.

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.)