This Guide tells you how to change, or add to, the web pages your delegates will see when they visit the meeting scheduler. The first part tells you how to add or edit web pages, and insert images and a webpage banner, easily and quickly. The second part deals with advanced webpage layouts, requiring at least a basic knowledge of html.


Before you start:

  • IMPORTANT: Go to the Content tab and activate your pages by clicking the blue Activate button. If you do not activate the pages, the default page content will be displayed on your website.

  • Prepare the texts and images you want to display, saving them on your computer or server. Save images as .jpg (recommended) or .png files. Our webpages are 700 pixels wide, and images should be 300px wide or less so as to fit on smartphone screens.

  • Before changing any content, copy and store the original so you can paste it back in if things go wrong.

  • If possible, either type in text or copy and paste from plaintext files (.txt) rather than formatted word processor files, which can introduce undesirable fonts or formatting.

  • To view your new pages and edits, open the main website (the ‘frontend’) by clicking ‘Website’ in the blue banner at the top of the Admin page. Refresh pages to view new edits.

NOTES:


I Arrange the links to your Menu pages


Your attendees will access your menu pages via the lower menu bar on the website. Once you have activated your pages on the Content tab, or added new ones, make sure their menu items appear in the desired order by clicking the up/down arrows to promote/demote menu pages.


Easy and quick webpage setup and editing


II Add a new page

  1. Open the Content tab and click ‘New’ at the bottom of the page. The Page Edit dialogue will open.

  2. Add the page title and menu title in the first two fields. These will be displayed on the frontend as shown here.
    TIPs:
    Longer titles will wrap into two or more lines. To tidy, insert 
    <br /> to create line breaks where you want them.
    To create a ‘hidden’ page, leave the Menu title blank – you can still link to it
    from other pages/websites.

  3. Add a one-word description in the ‘Slug’ field. This creates the unique web address (URL) that allows the page to be displayed on the frontend.

  4. Type or paste your text into the Content editor and click Save.

  5. Check that your new page appears correctly on the frontend (refresh your browser before viewing).

TIPS:

  • If you do not want your new page to be viewed just yet, uncheck the ‘Published’ checkbox. Re check to display the page and its menu item.

  • Link a menu item to an external web page by entering its full web address in the ‘Redirect url’ box.


III Change the text on a page.


  1. On the Content tab, click the page you want to change, to open its Edit page.
    TIP: if you are not sure which is the right page, look at the Menu title and compare it to the menu bar on the website.

  2. Type or paste your text changes into the Content editor.

  3. Click Save.

  4. Check that your changes have appeared correctly on the frontend (refresh your browser before viewing)

NOTE: Some pages contain coded ‘elements’ such as [[SITE_NAME]]. These are listed on every Edit page at the bottom right. They take information from the Settings area and display it within website content. By changing these settings you can instantly update information such as a contact phone number across the whole website. You can add the coded elements to new content so that it is always up to date.

See also: Hyperlinks, Coding Tips (below)


IV Add an image.


  1. Add all the images you want to display into the Media Library as follows:


    - On the Content tab, click ‘Media’ in the right hand menu block
    - The Media Library window will open. Click the Browse/Search button, and locate
    your image on your computer or server
    - Click ‘Save’ on the Media Library window to add the image to your directory
    - Repeat for all images.

NOTE: images appear as thumbnails for later selection and insertion into web pages

  1. Click the Content tab, the click the name of the page you want to change, to open its Edit page

  2. On the Content editor toolbar, click the green image insert icon.

NOTE: This launches a pop-up window. Your browser may ask you to authorize this action.

  1. On the image insert pop-up, launch the Media Library by clicking the image browser icon (a further pop-up window will open).


  2. Find the image you want to add and click it.

  3. On the image insert pop-up, click ‘Insert’.

  4. You will be returned to the page Edit view. Click Save, and check the appearance and position of your image on the frontend.

NOTE: you can position your image on the page by adding inline HTML code, see : Hyperlinks, Coding Tips (below)



V Add a banner to your website.

  1. Add your banner image to the Media Library as described above.

NOTE: the banner must be 1170 pixels wide, in .jpg, .png or .gif file format.

  1. Return to the Content tab and click inside the Banner image text field.

  2. The Media Library will launch in a pop-up window. Your web browser may ask you to authorize this action.

  3. Click the banner image thumbnail. You will be returned to the Content tab.

  4. Click Update under the Banner image field.

  5. Now click ‘Website’ in the breadcrumb trail at the top of the page to check the appearance of your banner on the user interface.



> Advanced webpage setup and editing


  1. Redirect a menu item to another website
    Link a menu item directly to a page on your conference website, for example.

  1. Open the Content tab and click the page you want to change, or create a new page (see 1., above).

  2. Paste the URL of the destination webpage into the ‘Redirect url’ field.

  3. Click Save.
    NOTE: ensure that Menu title, Slug and Position fields are filled, and the Published checkbox is checked. Title and Content are not required for redirected pages.


  1. Create a hidden page
    Follow the instructions below to create a page that is not listed in the menu bar. ‘Hidden pages’ can be accessed via hyperlinks from other pages, websites or from emails.

  1. Create the page as described on page 1 of this Guide.

  2. You can choose to leave the Menu Title empty. From the two options in the Show In Menu section choose No, Hidden.

  3. Add content and click Save.
    See also: Hyperlinks.


  1. Hyperlinks
    Link text and images to locations within your Meeting Mojo website, or to other locations such as your conference website.

  1. Open the Content tab and click the page you want to change.

  2. Highlight the text, or click on the placeholder of the image you want to hyperlink.

  3. Click the hyperlink icon in the content editor toolbar.

  4. The hyperlink editor will launch.

NOTE: This action launches a pop-up window. Depending on your browser security settings, you may need to authorize pop-ups by responding to browser requests, and then re-click the icon.

  1. Paste in the desired link:

      ../../../page/slug to link to an internal page
    http://www.domain.com to link to an external web location.

  2. Select Target (open in same window, or a new window).

  3. Click ‘Insert’.

  4. You will be returned to the page Edit view. Click Save.



  1. Coding Tips
    The Meeting Mojo content manager is packaged with a simple HTML editor that can be used to apply design elements to your webpages.


HTML coding: we strongly recommend use of a reputable HTML editing application to create your code before pasting into the Meeting Mojo editor.



    1. Open the Content tab, and open teh page you want to edit, or create a new one.

    2. On the Content editor menu, click the HTML icon.
      NOTE: This action launches a pop-up window. Depending on your browser security settings, you may need to authorize pop-ups by responding to browser requests, and then re-click the icon.

    3. Paste your code into the pop-up window and click ‘Update’.
      NOTE: If you are including an image, first import it into the Media Library (see ‘Add an image’ in section I, above).

    4. Click Save at the bottom of the Edit page, and check your page on the frontend.


Some coding templates

Use the following suggested html code to create vertical breaks and columns on webpages.

Format text, or text and images into 2 columns.
Paste the following code into the html editor and click Update. Then change text via the page Edit view.

<div style="float: left; margin: 0px 0px 0px 40px;">
<p><strong>List </strong> </p>
<ul>
<li>Item 1</li>


<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<div style="float: left; margin: 0px 0px 0px 40px;">
<p><strong>Image</strong></p>
<img src="A" />
</div>
<div style="clear: both;">&nbsp;</div>
<hr />

NOTE: A = replace with image link location from Media Library. Go to the Content tab, then the Media link on the right, click on the picture you'd like to use, then copy the URL from the top of the page. Paste this in place of A within the code.


Click Save.
View the results on the frontend, refreshing the page to view your latest update.



Sponsor profile’ : hyperlinked logo with heading and short text profile
Paste the following code into the html editor and click Update. Then add text via the page Edit view.

<hr size="1" />

<div style="margin: 10px 20px 10px 10px; float: left;">

<a href="A" target="_blank">
<img src="B" /></a></div>

<h3>Sponsor 2</h3>

<p>Sponsor profile</p>

</div>

<div style="clear: both;">&nbsp;</div>

<hr size="1" />

NOTE: A = replace with webdomain to which the image will link, e.g. http://www.domain.com
B = replace with image link location from Media Library. Go to the Content tab, then the Media link on the right, click on the picture you'd like to use, then copy the URL from the top of the page. Paste this in place of A within the code.

Click Save.
View the results on the frontend, refreshing the page to view your latest update.


Place a series of hyperlinked images in the Footer.
For each image, paste the following code into the html editor:

<div style="float: left; margin: 0px 0px 0px 40px;">

<a href="A" /></a>

</div>


End the series with:

<div style="clear: both;">&nbsp;</div>

NOTE: A = replace with image link location from Media Library. Go to the Content tab, then the Media link on the right, click on the picture you'd like to use, then copy the URL from the top of the page. Paste this in place of A within the code.


Click Update. When you are returned to the page Edit view, click Save. View the results on the frontend, refreshing the page to view your latest update.