You are here: Home / Tools / Website Documentation / Create a Web Page

Create a Web Page

Creating web pages is an essential task in managing your web site. Now ready to learn the basics of page creation, editing pages, creating hyperlinks, and managing images. We'll also introduce you to the text formatting tools included with Plone.

To Add and Manage Media Pages watch the following video, to add regular pages scroll past the descriptive text to view the add page video

Now that you're able to log in and move around your Propertyshelf web site, you're ready to start creating web pages. A Page in your site is one of the most important content types. Think of a page as the canvas to which you can add text, images, links, and other media to customize your site.

If you've just logged in to your site, click on the Contents tab to take a look at the site contents. You should get comfortable with using the Contents tab to find things until you've learned how to build the navigation structure of your site. You should see a screen that looks something like the following screenshot:

Propertyshelf MLS Webservices Creatiing our Custom Media WebPages

Click on Contents, and the contents (file types) of the respective area you are in appear:

Propertyshelf MLS Webservice Contents

Note the Add new... menu on the far right of the green top taskbar. Click on it, and choose Page/MediaPage from the drop-down menu.

Webservice how to add our custom media pages change state.png

Now you are on the Add Page screen. There are three main elements to consider when creating a new page:
1. Title: Appears at the top of the page as the main heading.
2. Description: Appears as bold text, just below the title.
3. Body Text: The contents of the page.

Webservice how to add our custom media pages add .png

Webservice how to add our custom media pages add .png

Title

A page's Title field is important for a couple of reason. The title acts as the heading for the page, appearing both at the top of the page as well as in your web browser's title bar in the top right. Secondly, the title also forms the URL, which is the web address for that particular page.  As an example, if you title the page "Sample Page", the url would be something like: http//yourpropertyshelfwebsite.com/sample-page

Keep in mind that the Title is required and you cannot create a page without one.  If you accidentally attempt to save the page without one, your website will prompt you to enter a title. Using key search terms in your title is a critical search engine optimization tool.

Description

The Description field also serves some different purposes. Firstly, the description appears in bold text, immediately below the Title, but above the Body Text, when the page is viewed by anyone. Secondly, when using the search tool included with Plone, the search results will be displayed with the Title first, and with the Description immediately after the title. The Description is also used in other listing views that propertyshelf websites generate. (i.e. collection results)

Perhaps most importantly, the search engines generally use the text you put in the description to help index your site, and to make it visible to the end consumer searching for terms in your website. So writing a direct and accurate description of your content will help greatly with SEO (Search Engine Optimization). The description is not a required field, but it is quite useful so we highly recommend you use it effectively.

Body Text

The Body Text field is where you'll put the main information for your page. This is where you will add images, hyperlinks, tables, headings, etc... . Note the toolbar with several icons at the top of the Body Text section. These icons are modelled after the icons used in popular word processing programs. If you hover your mouse pointer over an icon, the name of the icon will appear. These icons represent the formatting tools available to you in your site.

Some of the functions you'll find in the toolbar include:

  • Formatting style: like headings, subheadings, discreet,...
  • Creating numbered lists and bulleted lists
  • Creating hyperlinks
  • standard formatting tools (bold, italize, underline, text color, alignment, indent,..)
  • Inserting images
  • inserting youtube videos
  • Inserting tables with several tools such as adding and removing rows

Start typing some text into the Body Text field. Once you have entered a few lines of text, play with some of the formatting tools to get accustomed to them. Highlight some text and click on the style drop-down menu (which defaults to Normal paragraph) and select Subheading. You've now created a subsection for the page. The following screenshot is an example of what this might look like:

Webservice how to add our custom media pages change style.png

Cool Tools

Sometimes, you may find that you want to define several terms on your web page by creating a glossary listing or a simple dictionary. Plone provides you with the definition list icon (shown in the following figure) to help you accomplish this:

Glossary definition list.png

 

 

Using the Style Bar

As with all other formatting, simply highlight the text that you want to format and select the desired style from the drop-down list menu. Here's a quick summary of Plone's default styles:


•    Normal Paragraph:
If you want to revert some formatted text back to the default paragraph style, choose this option.

•    Heading:

This creates a heading of the same size as the heading generated from the Title field of the page. However, when you apply this style, you also get a blue horizontal line just under the heading. Use this to start a major new section on the page.

•    Subheading:

This creates a subheading, which is smaller in size than the Heading style. Use this to create subsections on your page.

 •    Literal:

This style is useful if you want to display mathematical formulas or lines of computer code. It's a good way to offset content that must be read "literally" from other content that may have stylistic components.

•    Discreet:
This will render the text with a grey color, and slightly smaller than Normal Paragraph. It's useful for notes to your site's visitors that should sit lower in the visual hierarchy than other styles.


•    Pull-quote:

This style will right-align the text, color it orange, and also apply the same vertical blue bar that you saw in the indent or Quote level style. Pull-quote is useful for leaving notes to your site's visitors, such as a "see also" note, or for giving useful tips.


•    Call-out:

  • Call out is similar to Pull-quote, but is not right-aligned, but is slightly indented. This can be used for emphasis or for leaving notes to your site's visitors.
•    Page Break:

Not a text style as such, Page Break is used if you want to control where page breaks should be, for the purpose of printing. You don't need to select any text to apply this style to; simply use it between the lines of text where you want the page break to be. This is useful if the page you are
creating is to be printed, and you want to make sure that the sections are split across pages.

•    Clear Floats:

This calls a CSS style that removes floats of the selected element. This is useful for removing text wrapping around an image, for example.

missing example here!!

•    (remove style): Use this if you want to remove a formatting style. Note that when you use this feature, the text will revert to <no style>, and not back to Normal Paragraph.

Saving the Page

We highly recommend you save your work periodically, especially when you've been working on a page for a long time. The first icon on the formatting tool bar. Also one can save and completing the edition process at the bottom of the screen, you'll see two buttons: Save and Cancel. Save will complete the page, making it a part of your site and if the page is published it is immediately visible by any visitor to your site.  If you click on submit for review, members with the appropriate access level rights can then publish them if they have the reviewer or manager rights.

The default Home Page is automatically published, so information will show up to the general public.  However, any other pages will need to be published in order for the public to be able to view that page.  Save your work, and then you can publish it if you are happy with it.  See below for how to publish

Once you've saved your work, you should see a confirmation message just above the title, to let you know that the page was successfully saved, as shown in the following screenshot:

 

Webservice how to add our custom media pages 2.png

Publishing A Page

In the top right of the page, you will see the current status of your web page (Private, Published or Submit for Publication).  Click on the status, and you can choose another status from the drop down box:

Propertyshelf MLS Webservices Change State

  • Private - Only logged in users can view these pages
  • Publish - Makes the web page visible to anyone
  • Submit for publication - Flags the page as needing to be reviewed.  This is helpful if you have someone entering content for you on your site, but you would like to review it before publishing.

Note: If the site is already published, you will choose Retract from the drop down, and the site will then revert to a private status.

for more details view our video and continue with other website tutorials.