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

Page Content

 Monday, October 8, 2018 |  Views: 64

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 -  It may sound silly but the  font that you choose can really have an effect on the  feel of the site. If you have existing text in the Page Content field then highlight the text that you would like to change the font of then select the  font you’d like from the dropdown and it’ll be changed.

 

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

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.

Outdent - This has the  opposite effect of Indent.

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.

  • E-mail

  • 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

Misc

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

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 it as a link

      • 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.

Using The Browser to Find Your Pages

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.



 


Latest JM2 CMS KB Articles