Understanding the elements of your pages

While we've gone to great lengths to make Tinder as simple as possible to use, there are still many things that are very helpful to know. This section describes some of the various components you will find while working with your site.

The Tinder Editor toolbar

tinder_editor.png

Almost everything happens here. The left side of tool bar contains familiar tools that you will find in most work processors, alignment, fonts sizes, styles, colors, bullet-ed and numbered lists and more. The right side contains specialized tools for working with files, media, images, tables and hyperlinks as well as special tools for viewing the raw html code, cleaning dirty code and embedding movie code from sources like YouTubeâ„¢.

Tip

Hovering over any of the tools with your mouse produces a pop up with a short description of the tool



The Button Row

You'll see these buttons on every new page you create. These buttons allow you to set up the page for a specific purpose. Most of the time you will use the "Edit" button. The Edit button is used for all types of content, from text to images to files and links, clicking the edit button makes the central area of your page editable via the Tinder Editor Toolbar.
buttonrow.png
The other 3 buttons perform very specific functions and allow you to use your page for RSS feeds, a dynamic calendar, or an Image Gallery. Clicking any of these buttons changes the page to the appropriate format.


Editable Areas

There are 3 types of editable areas on your pages. Your site may include any number of the following areas, including Text Areas for titles, summaries, comments, keywords, categories and other plain text, Page Specific areas which are edited using the Tinder Editor and can include text, graphics, images, movies, widgets, links, files and more, and Persistent areas, which are edited using the Tinder Editor yet share their content across all pages ( a header or footer for example).

Plain text and title areas are pretty simple, click the edit button to open the area, type the text, click the Save button.

Plain Text & Title Areas

In these areas, text can be edited but can not be styled. You will not see the Editor Toolbar when editing these plain text areas.

Screen_Shot_2015_02_11_at_1.11.36_PM.png
title_edit.png
getting_familiar.png

Page Specific & Persistent Areas

Most of the areas of your website use what we refer to as "page specific" or "persistent areas". These areas are edited using the Tinder® Editor Toolbar.

tinder_editor.png

These areas accept many types of content including text, images, media, documents, audio, hyperlinks and more. (The area you are viewing now on this Help site, for example, is a page specific area and all of the content on this page was placed using the Tinder Editor.)


Important tools & icons


The Edit icon editor_button.png
This icon appears when an area has been created using the Edit button from the Button Row, and content has been added to the area. Clicking this button either opens up an editable title area, or opens a content area and produces the Editor ToolBar.

The Save icon
save_tool.png Saves the changes to the currently open area. (you can only edit one area at a time)

The Close icon cancel_tool.png Closes the currently open area without changes (prompts user to proceed or cancel)

The Revision Tool revision_tool.png Allows you to "revert" to any of the last 10 previous states of the area. Drop down displays user, date and time of previously saved revision.

Most of the tools will be familiar to most users. The text formatting tools for example, are the same type of tools found in other popular word processing programs.

justification.pngindent_tools.png
font_styling_tools.png
Text justification toolsIndent and List Tools
Font Styling Tools

There is a tool for creating links Picture_1.png, tools for adding color and highlights to text text_color.png, a tool for managing images image_manager.png, a tool for embedding movies movie_tool.png, and a tool managing your files file_manager.png
There are several other special tools in the editor, such as the anchor tool anchor_tool.png, the table tool table_tool.png and the HTML code View tool html_tool.png


*Each tool in the editor is explained in the respective section of the website