If you are not investing in your business how do you expect it to grow?

Page Content

 MODIFIED Date: 11/9/2018 |  User Level: Regular User |  Views: 946

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.

Page Content Toolbar

Text Decoration

FontPage Content Toolbar - This simply changes the size of your font. The larger the number the larger the font!

Font TemplatesPage Content Toolbar - 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 ColorPage Content Toolbar - 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 ColorPage Content Toolbar - 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.

BoldPage Content Toolbar - This makes text a bit thicker.

ItalicsPage Content Toolbar - This makes text slanted to the right slightly.

UnderlinePage Content Toolbar- This creates a line beneath the text.

Convert All To UppercasePage Content Toolbar - Makes every letter in your selection UPPERCASE .

Convert All To LowercasePage Content Toolbar - lower case does the opposite.

Undo/Redo

Page Content Toolbar

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

Page Content Toolbar

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.

Page Content Toolbar

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

Page Content Toolbar

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 Page Content Toolbar to indent and Page Content Toolbar 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

Page Content Toolbar

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

Page Content Toolbar

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

Page Content Toolbar

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

Page Content Toolbar

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.

Page Content Toolbar

ID - This id is used for reference in styling the link

Name - This is an attribute that can be set for the Anchor.

E-mail

Page Content Toolbar

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

    Page Content Toolbar

    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

    Page Content Toolbar

    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.

    Page Content Toolbar

    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:

    Page Content Toolbar

    Here's what it looks like on the webpage:

    Page Content Toolbar

    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

      Page Content Toolbar

      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:

      Page Content Toolbar

      The use of these types of searches are covered extensively in the Search and Sort KB article >here.