fbpx
wordpress-plugin-ditty-metaphor-creations

Documentation

Using Layouts

Every item type loads using either a default layout or a template that has been saved as the default layout.

Using a layout template

  • On your items list panel, select the layout edit icon for your item.
  • If you are currently using a custom layout, select Use Template.
  • If you are currently using a template for the layout, select Change Template.
  • Choose a template from the list of saved templates that appears. You’ll see your item change on the screen when you click a template.
  • Once you are satisfied with your choice select Use Layout.

Editing a layout

  • On your items list panel, select the layout edit icon for your item.
  • Select the Customize button on the next panel.
  • You will see two tabs for customizing your layout. Select the HTML tab to modify the HTML structure of your item, and select the CSS tab to modify the CSS of your item.
  • You can also select the Reset to Default Layout link near the top of the panel to reset your layout to the default layout of the item type.

Layout HTML editor

The HTML editor allows you to add any valid HTML to your layout. It also includes dynamic tags that can be inserted to display various data from your item’s data. The dynamic tags available while editing are dependent on the item type of your item.

Adding a dynamic tags

  • Place your cursor in the editor field where you want the dynamic tag to be inserted.
  • Click on one of the dynamic tags at the bottom of the panel.
  • A popup will appear with options for all of the attributes that can be used for the tag. Click the help icon next to each to read a description of each tag.
  • You’ll notice a preview of the tag building at the top of the panel as you modify the attributes. If an attribute is using a default value, it will not be added to the layout tag.
  • Once you are satisfied with the attribute settings, click Insert Tag.
  • Optionally, you can click the copy icon at the top of the panel to copy the generated tag to your clipboard.
  • As soon as the tag is added to the editor, you’ll see the preview of your item in the Ditty update.
  • Select Update Layout to lock in your layout changes, or select Cancel to revert any changes to the previously saved layout.
  • Be sure to save your Ditty to save your changes!

Layout CSS editor

The CSS editor allows you to add any valid CSS or SASS to your layout. It also includes css selectors that can be inserted to reference the default classes of the dynamic tags available on the HTML editor panel.

Adding CSS selectors

  • Place your cursor in the editor field where you want the selector to be inserted.
  • Click on one of the CSS selectors at the bottom of the panel.
  • The selector will be inserted into the editor, along with opening and closing curly brackets. Insert your css for the selector between the brackets.
  • You’ll see the preview of your item in the Ditty update whenever valid CSS/SASS is added to the editor.
  • Select Update Layout to lock in your layout changes, or select Cancel to revert any changes to the previously saved layout.
  • Be sure to save your Ditty to save your changes!

Saving a layout template

You can save your custom layouts as a template to use with other items in your current Ditty as well as other Ditty.

  • Navigate to the Layout Settings panel for your item.
  • Select the Save as Template button to open the Save as Template panel.
  • To save a new template, select the New Template tab.
    • Add values for Template Name and Template Description (optional)
    • Select Create Template to save the new template.
  • To overwrite an existing template select the Existing Template tab.
    • Select the template you want to overwrite and select Overwrite Template.