Summary
Page Content allows you to manage the content of each individual page. You'll be able to create content for your website without any knowledge of HTML or CSS while also being able to customizing it to your liking. In this KB Article we'll be covering the following:
How To Create and Customize Your Content
META Information
Advanced Administrative Information
Page Content
Tools and Usages
Manage Page Content List
How To Create and Customize Your Content
Let's start by showing you how to place the content on the site. Expand the Advanced Administrative Information Tab. Here there is a dropdown list of categories. These categories actually determine the path of the URL. For example https://websiteURL.com/Category_Name/Your_Web_Content. Your web content will be after the category name. Let's go ahead and test this To do this follow these steps
Pick any category
Type into Page Name what you want the specific page to be called(Equivalent to Your_Web_Content from my example)
Select Published from the Publish Status dropdown.
Type anything into the Page Content.
Click on Save Page Content on the bottom of the module
Open a page in a new window and type the following: Your_Website_URL.com/Category_Name/Your_Web_Content.
After these steps you should be taken to the web page that you just create with the text you just typed. Impressive! Now that we have some basics covered let's go into more depth of what can be done with this one site. Let's start with learning about the META Information Tab.
META Information
Title - This is the text that will be shown in the tab on your browser to the right of your website's icon.
Description/Keywords - This is text that would be used to optimize your SEO. You should type blurb in here to talk about what your business is all about. You should base your Description based on your Keywords. If you are a bakery and you have a website you might list in your keywords something like the pastries and other goods along with adjectives that describe those goods. You'd then write a description about those. The search engine uses this information to bring more clients that want baked goods to you!
Robots - The options for this may look complicated but let me break them down for you.
INDEX - This means that search engines will show your page is search results.
NOINDEX - Means that it won't show in search results.
FOLLOW - This allows the search engine to follow any links that don't specifically have a NOFOLLOW attribute.
NOFOLLOW - This disallows the search engine to follow any links.
Advanced Administrative Information
Category - We spoke in the beginning of this section about how to use Category to set where your page content shows up on your site.
Category New - This allows you to use a category that doesn't come by default with our system. When you do this you should make sure that you don't have any Category selected from the Category dropdown box. Otherwise your content will show up in both places. To prevent this select 404 from the Category dropdown list. Now your content that will only display on the New Category that you defined.
Page Name - This is what you type in after the Category you chose as exemplified in the beginning of this section.
Sub-page Name - The Sub-page Name allows further organization of your content. Here's an example. Say you're a sporting supply store so your URL is https://www.SportinGoods.com/Category/Page_Name/Sub-Page_Name. At this location you'll be able to find your content.
Template Name - Templates are used to give your website a different look or feel. These template options give you the ability to give yourself different styled headers and footers. There are a few options by default:
(Default) - This refers to the template that we use for default for most of the websites we design.
(None) - This actually is the same as the amp template
Amp - The amp template is beyond the scope of discussion that should be covered in this KB article. Here's a link if you want to know more about it.
Header/Footer (Embed) - Are used if you want to use any special JavaScripting on your page. Most of the times this isn't needed so there's no need to worry about it.
Page Content
Page Header - This is exactly as it sounds. It is the text that goes at the top of your page that declares what your content is about.
Publish Status - There are 2 options here
Draft - Allows you to save your progress but doesn't make the web content live
Published - Publishes the content live for all to see on your website.
Page Content - This is a section all on its own. The basic idea of it though is that it allows you to customize to a great extent what content you want to show on your page. More about that in the next Section!
Using Page Content Tools to Customize Your Content
We'll go from left to right up to down through these tools. One basic skill that must be learned first is the selection of text. This simply involves holding down the left mouse button near the beginning of your selection then dragging it until the end of your selection. For most of the tools that are on the Page Content toolbar you use this process.
Text Decoration
Font
Font Size
- This simply changes the size of your font. The larger the number the larger the font!
Font Templates
- This is a dropdown list of presized font options. It varies in both text size and color. You have options of different sizes and colors of headers as well as list options. This makes things a lot easier if you don't want to be messing around with font sizes and colors.
Font Color
- If you do want to change the color yourself you just click on this icon and a grid of color options are shown. At the bottom of the pop-up it there's a link to “Add Custom Color…”. If you click there a little window will appear requesting a hex number that translates to a color. Google has a >special tool that allows you to choose a color quite easily and find the hex number for it too. You could either write the number down and then type where it was requested or highlight the hex number(and only the 6 characters after the “#” ) by holding ctrl and c to copy and then ctrl and v to paste it.
Font Background Color
- This tool is very similar to the font color tool. You have a pallet of colors to choose from and also the option to put in a custom color using a hex number.
Bold - This makes text a bit thicker.
Italics
- This makes text slanted to the right slightly.
Underline
- This creates a line beneath the text.
Convert All To Uppercase
- Makes every letter in your selection UPPERCASE .
Convert All To Lowercase
- lower case does the opposite.
Undo/Redo
Undo - This reverses the effects of the most recent action that was taken
Redo - If you have already pressed on undo then you are able to press the redo tool. It allows you to go ‘back' to your most recent action.
Copy, Cut, and Paste
Copy - Copies the content of your selection and allows you to put that selection somewhere else
Select the text you want to copy
Click the Copy tool
Click the location where you want the text to be placed
Click the Paste tool
Cut - Creates a copy of the selection but deletes the original selection at the same time. You then can put this selection where you need it.
Select the text you want to Cut
Click the Cut tool
Click the location where you want the text to be place
Click the Paste tool
Paste Options - The Paste tools come in handy when you are copying or Cutting text from outside this module. Examples of this are: Word, from a plain text file, or straight from an html file.
Note - html is simply a type of markup language for website design.
Search And Replace - Let's start with an example. You pasted in a great deal of default text for a about section for a generic company. It has placeholders for COMPANY_NAME and a few other things. You want to change all this information quickly. This is a perfect time for search and replace. Directions for use are as follows:
Click on the Find and Replace icon (A window will appear with tabs named find and replace )
Click on Replace
Fill in the Find field with COMPANY_NAME
Fill the Replace With field with your actual company name
Click Replace all.
Lastly let's go over some additional details about some options within the window named Find and Replace starting with the Search Options. There it gives options for the direction of the search. Down is means that it starts at the top and moves down through the page content until the bottom. Up means that it starts at the bottom and goes up. Now if you're using the replace tab and want to do replace all then it won't matter what direction is chosen. If you are wanting to find a specific instance and replace to replace then it may be helpful to change the direction of the search. This would be handy if you have a general idea that what you're looking for is near the bottom but you don't know exactly where.
Spell Checker - Spell Checker checks all text within page content for spelling errors. Simply click and it will do that for you.
Lists
Let's start by explaining lists and how to make them in general. Follow these steps:
Click on the place in Page Content that you want to start the list. This should be right before the first item on your list or a blank line if you don't have your list written.
Click on one of the list Tool icons. A number or circle should appear to indicate that line is a list item.
Type what you're listing
Press enter to add a new list item
Press 
to indent and 
to outdent your list items.
That's about all there is to know in order for you to make lists. Let's now look at specific types of list styles.
Bullet List - Bullet list using circles to indicate list item. It's good for listing things that have no particular order.
Numbered List - Numbered list is as it sounds. It uses numbers to list things. This could be used for a recipe or a tutorial on how to do a particular task.
Text Arrangement
Indent - In the Lists section I told you a little bit about indentation. This simply moves the text slightly to the right. Usually a tab/ Indent is worth about 5 spaces. You can use either tab or Indent to accomplish this effect.
Left Text Align - This makes letters align with the left margin of the Page Content.
Center Text Align - This will cause the text to be in the center of the Page Content (Useful for titles).
Right Text Align - This makes letters align with the right margin of the Page Content.
Tables
Insert Table
Click on the Table icon
Move the mouse over the grid to indicate the size of your table(hold the mouse over a square for a second to see how the dimensions of your table in the format of height by width )
Click on the square indicates the dimensions required
Your table appears
Remove Grid from Table - Simply click on this icon while having your table selected and the grid will be removed. This may make for a cleaner look.
Links
There are a few things that you should know about links before we get started. There are a few terms that you should know. When people make links they give them special properties. These are called attributes. Below I've listed some of the attributes:
Same Window - This link will open up in the same window.
None - Same Window is the default state of a link so None will have the same properties.
New Window - The link will open up in a new tab. Everytime it is clicked another tab will open with the URL requested.
Parent Window - It will appear to open in the same window that it was clicked.
Browser Window - This will also appear to open in the same browser that it was clicked.
Search Pane - This will open in a new tab. When it is clicked again it will not open additional tabs.
Media Pane - Search Pane has the same result as Search Pane.
Insert Link -
Start by clicking on the insert link icon. A window named Hyperlink Manager should open. It'll look like this:
Hyperlink
URL - Here you have 2 options. You can either attach a document (which acts as a link), or you can type a URL directed to the webpage you want to link. To the right of the URL is the icon for the Document Manager. Later in this article we cover how to use that tool.
ID(If this is CSS) - If you can define an id for a link then you can style it in a specific way.
Target - I covered the meanings of the targets earlier. Simply choose one from the dropdown the option that works best for you.
Existing Anchor - Links are called Anchors in HTML. This field wants you to type the name of an existing link. By default there are no others. See the section about the Anchor Tab to learn more.
Tooltip - This is exactly the same thing as a title on an image. If you hover your mouse over the link for a second the text you type here will show.
CSS Class - Here is an option to connect it with some of our predefined css classes. If you want to format the text without doing any coding this is an option.
Anchor - The Existing Anchor drop down in the hyperlink tab won't do much for you if you don't have an anchor created.
ID - This id is used for reference in styling the link
Name - This is an attribute that can be set for the Anchor.
Address - The address refers to the email address that you'd like to send and email to.
Subject - This sets the subject of the email
ID - This sets the ID of the link locally. For customization of the link with CSS this is useful.
CSS Class - CSS class similarly offers benefits.
Tooltip - This is the same thing as the title text property. After holding the mouse point on this link it will show the text typed here.
Break Link - This turns the link back into a regular text. To break a link:
Highlight the link
Click on the break link icon
Special Characters
Select the location in which you'd like the character to be placed
Click on the Special Characters icon(A dropdown of currency and mathematical symbols are shown)
Click on the one you'd like to use and the symbol will be inserted
That symbol will be inserted where you selected earlier
Horizontal Line - This creates a divider between text. It looks nice when separating paragraphs or particular sections in an article.
Image Manager
Image Manager - This tool has a great deal over crossover from the file manager module so I'll link to information about how to use that >here. Due to the large scope of this tool it deserves its own article. Which you can read here.
Document Manager - when clicked this tool opens to the docs folder in your file manager. From here you can't access other files. The point is that this tool is meant to only allow you to manage your documents as the name of the tool suggests. Once the tool is open these are the instructions on how to use it:
Click on the document you'd like to add to the page
Then click insert.
That's it!
Here's what it looks like in the editor:
Here's what it looks like on the webpage:
Now when you click on the pdf it will take you to that document!
Note: The document manager contains the same toolbar that you had seen on the file manager. For instructions on how to use those tools see >this page.
Hidden Tools
To access these hidden tools you must have at least one image in your page content editor. Right click on the image and you'll see these tools:
Properties - The tools here reflect those found in the properties tab of the Image Manager.
Image Map Editor - The image map editor allows you to define parts of your images as a few things:
-
Set an area for certain option to be set. Those options are:
Setting text that will appear when the mouse hovers over that area of the image.
Or both!
How to define areas
Using the form - You can use the form to define precisely where the area will appear. First you must to 2 things: choose whether you want to an area type of circle or rectangle,click on the New Area Button. Once that is done you have two options of area creation listed below:
form properties:
Left/Top - These properties define how far the top left portion of the area is from the top left portion of the image.
Width/Height
Rectangle - Width and height of the rectangle are adjusted here.
Circle - Only width is adjusted here. A circle is perfectly round. This means that its height and width would be the same. This is why we can only edit one of them( the width in this case). You can think about this like the diameter of the circle instead of the width if that helps.
URL - Next you can type a link here so that when someone clicks on the area defined they can go wherever you want them to.
Target - This defines how you want the link to behave.
Alt Text - The alt text is what shows when the user is unable to visually interpret the image
Title Text - This is what shows up when the user hovers the mouse above your area for a second.
Visual method - You can simply click on new area and by default a rectangle will appear in the top left corner of the Preview Pane. Click and drag on the red dot to change the area of the rectangle. You can also select circle as a shape if you like and adjust the size in the same way. To move the area just click and drag it. The rest of the properties must be set in the form refer back to the Form method for how to do that.
Note: Make sure to keep your areas within the image. This applies to both Visual method and the Form method. If the area goes out of he image the area will be reset to a point where it is 100% in the image.
Manage Page Content List
At some point you will have a lot of pages on your site that you're managing. You may want to go back at some point and change something but it can be difficult to find. In the following section we'll be covering that. Let's start with what you can do with your browser.
To find things more easily on your keyboard press ctrl and then f. A search box will appear on your browser. You will be able to search the page for the content that you need to find! A very useful tool for those with 20 + pages to manage! Now that you know how to use your browser to find things let's cover how to use our system.
Search and Sort
When you click on the accounts module or go back to the accounts list from creating a new account you should see something like this:
The use of these types of searches are covered extensively in the Search and Sort KB article >here.