The Visual Editor Toolbar

Located at the top of the Visual Editor Content Window,  the Visual Editor Toolbar may look familiar if you’ve used word processing applications before. Lets walk through the different buttons and what they do!


 Text Formatting

The first option from the left on the toolbar is a dropdown menu. This controls the formatting of your text. We do not have a font size option currently so this is where you can change the size of your text. The default setting is Paragraph. You can click to select different heading sizes also. The Preformatted option will strip whatever font settings you have chosen and appear exactly like it does in the drop down menu. Preformatted text is not something most users will want to use.  Here is an explanation of what it does.

Back to Top


 Text Color

 

The second option from the left is a small A over a colored bar. This is the Text Color option. Click on it and it should open a pop up color menu. You can choose from the preselected color pallette or you can click Custom underneath the pallette. This should pop up the Custom Color Window. From here you can click anywhere in the color box to choose the shade you’d like. The bar on the side will let you click to drag the bar up or down to pick the hue. The color box at the bottom right shows you a preview of the color you’ve selected. Advanced users can enter a RGB color or an HTML color code manually in the text boxes. 

 

 

You can change the color of your body font from the Theme Settings however sometimes you may want to change the color of just one portion of text. You can do this one of two ways:

  1. Enter some text in the Visual Editor. Select the text, then click the Text Color Button and select the color you’d like. Click anywhere in the Visual Editor to de-select the text and see the color change.
  2. Click the Text Color Button and select the color you’d like first. Enter text in the Visual Editor and it should appear in the color you’ve chosen.

Back to Top


 Text Styles

Bold Text

The third option from the left is a Bold B button.

This allows you to change the font style to bold.

You can also use the keyboard shortcut Ctrl+B to make your text bold.

Italic Text

The fourth option from the left is an Italic I button.

This allows you to change the font style to italic.

You can also use the keyboard shortcut Ctrl+I to make your text italic.

 

Underline Text

The fifth option from the left is an Underlined U button.

This allows you to change the font style to underlined.

You can also use the keyboard shortcut Ctrl+U to make your text underlined.

Strikethrough Text

The sixth option from the left is a strike through button.

This allows you to create a strikethrough effect on your text.

You can also use the keyboard shortcut Shift+Alt+D to do the same effect.

 

Back to Top


The seventh option from the left is an Insert/Edit link button with a small chain link icon.

Type the text then select the text you want to become a link. In the visual editor toolbar, click the Insert/Edit link button. A small box will pop up under the selected text. Insert the URL you want to link to in the text box then click the Blue Apply button. The text you selected should become a clickable link.

If you do not have any text selected when you click the button, your URL will be entered as the text.

 

Back to Top


In the visual editor toolbar click the Insert/Edit link button. A small box will pop up in the visual editor. Instead of inserting the URL you can click the grey settings cog button to go to Link Options pop up window. It should look something like this:

This menu is just an alternate way to configure your links. Most of the options are the same. The existing content searches our website and is unlikely to be something you’ll need to use.

 

Back to Top


Sometimes you’ll want to make sure that when a person clicks a link on your profile, instead of leaving your profile their browser opens that link in a new browsing tab. To do this use the grey settings cog to navigate to Link Options as described above. Check the box that says “open link in new tab” then click the blue Add Link button at the bottom.

 

Back to Top


If you incorrectly copy a URL as a link the visual editor will warn you that your link is broken and will not work. It does this by showing your link surrounded by a red dotted border as shown above.

Tip: If you click on your links in the Profile Builder preview window they will not work. You will get a pop up error message that says your link has been blocked because it links to an external site. Don’t worry! As long as your URL has been copied correctly they will work fine when you install them on Myfreecams.com

Back to Top


 Unlinking Text Links

If you make a text link by mistake it is very easy to unlink the text. Simply click the link you want to remove. A small pop up window should appear and in the right corner you’ll see an Unlink Button with a grey broken chain link icon. Click this to remove your link.

Back to Top


Editing Text Links

If you need to make changes to a text link you can do so by clicking on the link in the visual editor.

This should open up a window like this where you can change the URL, or click the grey cog icon to go to the Link Options Window. 

Back to Top


 Text Alignment

The second grouping of buttons in the Visual Editor toolbar are the text alignment buttons. These let you control how your text is aligned in the basic section. You can select text you’ve already entered and click the button to apply this alignment to that text. Or you can click an alignment button and begin typing.

This button will align your text to the left (this is the default setting). You can also use the keyboard shortcut Shift+Alt+L.

This button will align your text centered. You can also use the keyboard shortcut Shift+Alt+C.

This button will align your text to the right. You can also use the keyboard shortcut Shift+Alt+R.

Justified text is aligned along the left margin and letter and word spacing is adjusted so that the text falls flush with both margins. You can also use the keyboard shortcut Shift+Alt+J.

Back to Top


 Toolbar Toggle Button

This button at the end of the top row of the toolbar will toggle so that more toolbar options are visible in the second row of the toolbar. If you can’t find a button in your toolbar, click the toolbar toggle! You can also use the keyboard shortcut Shift+Alt+Z to toggle this button on or off.

Back to Top


Bullet Points

The first button the second row of buttons is the Bullet Point button. 

You can select text and click this button to apply a bullet point format. Or you can click this button to begin typing and create a bulleted list. Every time you hit return a new bullet point will be created. When your list is complete click the bullet point button again or hit the return key twice to go back to ordinary typing. You can also hit Shift+Return to type inline with your list without a bullet point.

Back to Top


 Numbered List

The second button on the second row of buttons is the Numbered List button. 

You can select text and click this button to apply a numbered list format. Or you can click this button to begin typing and create a numbered list. Every time you hit return a new number will be created. When your list is complete click the Numbered List button again or hit the return key twice to go back to ordinary typing. You can also hit Shift+Return to type inline with your list without a bullet point.

You can also use the keyboard shortcut Shift+Alt+O to turn the Numbered List Button on or off.

Back to Top


 Indent Text

The third & fourth buttons on the second row of the toolbar are the Increase/Decrease Indent buttons.

 

These allow you to increase the indent on text or decrease it. To use it just have your cursor at the beginning of the text you want indented and click the Increase Indent button. You can click it multiple times to increase the indent further and click the decrease button to decrease. Indented text looks like below:

Back to Top


 Blockquote

The fifth button on the second row of the toolbar is the Blockquote button

Blockquote is a text formatting option. It is similar to indenting text and works the same way.

Back to Top


Horizontal Line (like the one right above this title)

Sometimes placing a line between areas of text can help define different sections of a large piece of text.

The sixth button on the second row of the toolbar is the Horizontal Line button

Click the horizontal line button to place a horizontal line anywhere in your basic section. Easy!

Back to Top


 Clear Formatting

The seventh button on the second row of the toolbar is the Clear Formatting button.

To be completely honest I have no idea what this is for. It doesn’t really seem to do anything. If you are reading this, you should tweet @Moros1138 and make him tell you since he built the Profile Builder. -Lacey

Back to Top


 Insert A Table

Tables are the unsung heroes of the Basic Section. If you’ve ever wondered how models get those perfectly aligned lists of members for their clubs, this is probably how. They are the second to last button on the second row of the toolbar.  Tables are very flexible but can be a wee bit fiddly. If you’re having trouble getting yours to work please contact us and we may be able to help.

Now there are some complicated options in here but we’re gonna go through this step by step.

  1. Expand the Insert table option at the top of the dropdown menu.
  2. Hover over the grid to decide how many cells in your table that you want. You can easily change this later. Click once when you’re done.
  3. Your table will appear in the Visual Editor preview window but it will be all squished up like this.
  4. Click the corners to drag it to a bigger size. Tip: The black numbers that appear at the bottom are the pixels of your table.
  5. If you’d like to change the alignment of your table left click one of the corners (it will be black) to make sure you have the whole table selected then click the alignment button you’d like to use. Tip: Usually centering your table will look best on profiles
  6. Add some text or images. You can put in text formatting using the toolbar options covered on this page, and even insert an image. Here’s an example! And here is what that would look like on a profile:
  7. Play with the settings! We’ll start with a border: from the Visual Editor click the table to select it then click the Insert Table Button from the Visual Editor Toolbar and in the dropdown menu choose Table Properties. It should pop up the Table Properties Window. In the Border box type a 1 then click OK.



    Save your work in the Visual Editor and navigate back to the Profile Builder to preview what it will look like. Here’s an example:You can change the #s in the border box to make the border thicker or thinner. You can also click the Advanced Tab and change the border color and background color. If you are familiar with tables you may wish to change other settings. The bottom of the drop down menu has options to organize, delete and add cells, columns and rows.

Back to Top

Back To Main Instructions


Now that you know everything about Basic Sections try making a FAQ Section