HOSTBABY HELP CENTER

Content Editor

  1. Bold, Italicize, and Underline
  2. Left, Right, and Center Alignment
  3. Font Format
  4. Font Family
  5. Font Size
  6. Font Color
  7. Text Highlight
  8. Remove Formatting
  9. Full Screen Mode
  10. Cut
  11. Copy
  12. Paste From Plain Text
  13. Lists
  14. Indenting
  15. Undo/Redo
  16. Link Make / Break
  17. Horizontal Rule
  18. Insert Table
  19. Insert Non-breaking Space Character
  20. Visual Control Characters on/off
  21. Edit HTML Source
  22. Add Image
  23. Edit Image
  24. Add File
  25. Insert/Edit Embedded Media

Bold, Italicize, and Underline

Like most word processors, you can select text to make Bold, Italic, Underlined, or any combination of those 3. Simply highlight the text you're interested in modifying, and click on the appropriate styling to your text.

Left, Right, and Center Alignment

This section adjusts how your text / contents align in your content field. Simply highlight the content you're interesting in aligning, and select the appropriate alignment.

Pro-tip: save this, and most other similar formatting changes, for the end of your styling process; it makes life a lot easier to first get all your text in place, highlight the text you want to re-align, and align them section by section.

Font Format

This allows you to select a typical pre-style format provided by your template for your text fonts. Simply highlight the text you want to modify, and select the format of your choice from the dropdown menu.

Font Family

This allows you to select a specific font family for your text. Simply highlight the text you want to modify, and select your Font Family from the dropdown menu.

Font Size

This allows you to select a specific font-size for your text. Simply highlight the text you want to modify, and select your size from the dropdown menu.

Font Color

This allows you to modify the color of your text. Simply highlight the text you want to modify, click on the font-color button, and select the color of your choice. You can also click on "more colors" to bring up a much more details color selection, where you can also input your color's HEX code if you have that handy.

Text Highlight

Much like the Font Color tool, this allows you to change the color BACKGROUND of your text, basically text "highlighting". Like the Font Color tool, simply highlight the text you want to... highlight, select the color of your choice and enjoy.

Remove Formatting

This tool is used to help clean up your content. If you end up with a jumbled mess of colors and highlights or are copying content from another source, use this tool to remove all that formatting. Simply highlight the modified text you want to un-modify, hit the Remove Formatting Button, and you should be left with just the plain text. Font-size / format will still be retained, but all the formatting will be removed.

Full-Screen Mode

Ever find the field we provide to work on your site a bit small? This will expand the HTML editable area into a full-screen format that will fill up your web browser. Simply re-click this icon to take your editor out of this mode.

Cut

Just as you'd expect, this allows you to "Cut" out some content you can paste back into a different section of your site builder. Just highlight your content, and hit that Cut button or a keystroke of CTRL-X will do the same thing.

Copy

Likewise, this allows you to copy some content from one section of your site to paste back in later in a different section. Highlight your content, hit the Copy button, or a CTRL-C key-stroke would do the same thing.

Paste From Plain Text

Ever work on a text editor to jot down your notes, and just want to paste that into the Site Builder? That's what this tool is for. Use this Paste tool if you have some plain text with some spacing / positioning you want to retain. If you click on this tool, a new window opens; paste your text as is in there, hit update, and your plain text should appear as it did when pasting it in; spacing and all.

As most folks realized, pasting text straight from Word does not work well with our Site Builder. You can save a bit of time by using the Paste From Word tool. This will help retain the positioning of your text as it was from Word but will NOT carry over font styling.

Lists

Having lists with bullet points / numbers is pretty standard for websites as needed. This tool allows you to make lists of either type; Unordered (bullet points) or Ordered (numbers). When entering your List Data, simply first hit either of these list items (which should produce a bullet or number), enter your text, hit ENTER to bring up the next line, and continue on until you're done. When your list is completed, simply hit the List button again to END the list you're working on.

Indenting

Use this tool to indent your content either to the right or the left. This applies to text as well as static objects (videos, images), and list items as well.

Undo/Redo

Make a mistake? No problem, the left-facing arrow is an "Undo" command that will undo the last thing you've done in the Site editor that saved session. Contrastingly, the right-facing arrow "Redo's" the last thing you've done in the Site builder; usually only after you've "Undone" something.

Link Make / Break

Want to make a link? No problem. Use this tool to make links to different URL's.

  • Highlight / select the text / image / chunk of text you want to make into a link.
  • Click on the completed Chain
  • You should get a new window like this one:
  • Type in your URL, select your link behavior, etc. and insert!

Contrastingly, if you want to REMOVE a link, highlight/select your link, and click on the broken chain icon, which will remove the link.

Horizontal Rule

These buttons help you set up a "Horizontal Rule" or basically a line that spans across your content. There are two buttons here.

The plain line (left one) makes a 1-pixel, black line across your content.

The 2nd line allows you to set a width, height, as well as shadowing for your Horizontal Rule (mileage may vary based on browser).

Insert Table

As the name implies, this tool can help you easily produce a table for your site. Generally speaking, you only want to use table to store tabular data; not as a place holder for images, or random objects.

There are obviously a lot of settings:

  • Cols: The number of Columns
  • Rows:The number of Rows
  • Cellpadding: The amount of padding (in pixels) between cells contents and their walls
  • Cellspacing: The amount of space between cells themselves
  • Alignment: General alignment of table contents within their cells (Left by default)
  • Border: Border for table cells / exterior by pixels
  • Width / Height: The width/height of the table in pixels
  • Class: CSS styling class (generally unused)
  • Table caption: Checking this off will produce some space at the top of your table for a Table Name/Caption

NOTES: You'll notice 8 squares around the perimeter of your table within the HTML editor. You can click/drag those boxes to adjust the size of your table free-hand instead of by pixel size

Insert Non-breaking Space Character

This is more for the HTML savvy; this is basically a "Space". Non-breaking space characters are meant to avoid breaking lines in code, but the same task is basically accomplished by hitting on your space key, much like a word processor.

Visual Control Characters On/Off

Again, more for the HTML Savvy. Have this tool on to have "."s represent non-breaking spaces. Think of the "show formatting" tool in Microsoft word; basically the same purpose--to manage formatting and spacing that isn't easily seen unless you look at the source code.

Edit HTML Source

This is a very big/important tool. For any Site Builder users that are looking to embed widgets, purchase links, YouTube Videos, PayPal buttons, etc -- will need to get very familiar with this tool. In order to paste in embed code provided by 3rd party sources, you'll need to make sure you paste the code in this HTML Source editor. Pasting your code straight-up into the main body of your pages will only render the code, not the object it's meant to represent.

In this example, you can see the HTML source used to render the table in the background. This tool is pretty straight forward:

  1. Click on the HTML Source Editor
  2. A window pops up, with all the HTML source for your currently active edited site
  3. Paste in the HTML code as needed, where needed.
  4. Hit insert and save your changes to that page.

NOTES: The HTML source editor we have is designed to excise / modify unfamiliar code; mainly to prevent folks from inserting malignant scripts into their sites. If, for some reason, the code you're inserting is truly legit, and it's not rendering after your insertion; let us know. We can work on tweaking the behavior of the Source Editor.

Add Image

As it describes, this tool allows you to insert an image onto your site. Simply move the cursor to where you like to insert an image, then hit the "Add Image" button. This will pop open a browser window to your images, stored in the Images section of your Media Center.

Simply select the image you want to insert, and BEHOLD, your inserted image!

Edit Image

After inserting an image onto your page, you may want to tweak it a bit; not a problem. First off, you'll want to select the image you've uploaded by clicking on it, then selecting the "Edit Image" tool:

Once selected, a new window will appear with some general options:

  • Image URL: The URL to the image you've selected. Click on the grid-like icon to the right of the URL to select a different image
  • Image Description: General notes about your image, for your own developmental purposes
  • Image Caption: Shows up when you roll your mouse over the image; usually a synopsis of the Description.
  • If you click on the Appearance tab, you can modify some aspects of the appearance

This section has many options to work with; the box to the right shows you a general example of how the image will behave:

  • Alignment: Focuses on the alignment of the content AROUND the image; not of the image itself. Scroll through the options here to get the effect you want.
  • Dimensions: Here, you can do a forced resize of your image, incase it needs to be made smaller. We really do not suggest to use this for making images LARGER, you run into pixelation issues. BUT THIS DOES NOT CHANGE THE SIZE OF THE ORIGINAL IMAGE. So, if you shrink down an enormous picture to fit on your site, visitors will still need to actual load the original file, even if they only see a really small version; use this sparingly, and for minor dimension changes. It is still much better to resize your image prior to using them on your site.
  • Constrain Proportions: as the name implies, it constrains the proportions of your image while resizing
  • Vertical Space: If your image needs a bit of space, you can define vertical spacing (margins) by pixels here
  • Horizontal Space: Not surprisingly, this handles horizontal spacing.
  • Border: Like the name implies, you can set a border for your image
  • Style: This is the in-line style field that changes as you go through your appearance settings. If you're familiar with CSS styling, you can insert your in-line styles here.

Add File

This tool is kind of like the Link Maker; this is designed to help you link to files you have uploaded into your Media Center.

With this tool you can select some text/an image to make into a link for the file you're linking OR simply insert the file, which will make a link out of the file name itself.

  1. Decide how you want this link to be made. In this example, we'll make a link out of the text that's there by highlighting that text, then hitting the "Add File" button.
  2. Select the file you wish to link to by selecting the checkbox next to the file name.
  3. Hit the Insert button. The result is something like this; a link to the file you've uploaded!

Insert/Edit Embedded Media

Before we dive into this tool; it's worth mentioning that most browsers, for now, don't work so well with embedded media files, like QuickTime or Windows Media Player movies. The main reason being that they all require some kind of software or plugin to view the files in the first place. Even if you have plugins installed in your browser for these videos, there may still be compatibility/rendering issues depending on the version of your plugin, your browser, and your system in general.

Best practice these days for embedding Media (videos basically) is to make use of flash-converters like YouTube, which will convert your video files to a web-ready format, and provides you with the code you need to embed the media on your site.

First step; select a place to insert your video, and hit the Insert/edit Media button. A pop-up window like this appears. Click on the grid icon next to File/URL to select a file

Yet another browsing window should appear to bring up your Media that you've uploaded. Hit the check-box next to your file of interest, and then hit the Insert link to left in the preview pane.

You'll notice that the Type should change based on the file you've chosen to embed/insert. The preview pane below should show you how the video will appear, and will autoplay if you have it set to do so. On this general tab, the only major option to work with is the "Dimensions". Again, will not affect the size of the file; if it's big, it will still take a while to load even if you shrink it down. It's generally better practice to upload an appropriately sized video before tweaking dimensions.

The advanced tab has a few more options of interest; these will change based on the file type you choose to embed. I'll go over the few common/mostly important options.

  • V-space/H-space: This gives your video a bit of vertical and/or horizontal space; insert your pixel dimensions here
  • Auto Start: Most videos are set to auto-start by default, which can be a major problem if you have a LOT of videos.  Turning this OFF will keep them from automatically playing.
  • Show Menu: Basically, the play/pause/video progress options you typically see on a media player
  • Stretch to fit: Stretches the video to fit the space you've allotted for it; we generally suggest against using this setting, as videos can be skewed/stretched with this tool
  • Mute: Sometimes users will have a general muted video for visual effects, hit this if you want to keep your video muted.

When you've got all your settings in place, insert/update your media, and you should see a yellow box representing your video within the site builder!

NEW! You can now add a video directly from YouTube.com. Just go to the page your video is on, click 'share' and copy the URL to the video. It should look something like this, http://youtu.be/3j8mr-gcgoI

Now go back to the dashboard and press the filmstrip button. Paste the URL you copied into the box marked File/URL. Click update on the popup and then update on the editing page. Voila! Your YouTube video, right on your page!

Have more questions? Submit a request