Organists Online

Free Resources for Organists

Home > Editing > Editing RegisteredPlus Pages

Editing RegisteredPlus Pages

| Editing Area | | Adding Text | | Adding Images | | Adding Audio Clips | | Adding Videos | | Adding Hyperlinks | | Creating a Menu | | Conclusion |

The editing suite supplied with RegisteredPlus pages is so designed that anyone, without previous knowledge of webpage design or coding, is able to produce visually pleasing pages that display well across all media. That is, despite the radically different screen sizes and shapes available from desktop computers through to smart phones, the RegisteredPlus pages always present in  a coherent, readable manner.

Remember: over 50% of the viewings of your page will be via a smart phone with a small screen. If in doubt, design your page with small screens in mind.

You can edit your page on a desktop, tablet or smart phone. However, the larger the screen area you have to work on, the easier the task will be.

If you are editing on a desktop, it's possible, when viewing the result, to "emulate" or "spoof" how your page will look on a handheld device. In Chrome, press F12 and try out the possibilities. It's more complicated with Explorer, so press F12 but use this LINK for helpful information.

RegisteredPlus organists have password access to their page at all times.

The Editing Area

The editing area looks like this:



or this:



When the page becomes large, the menu buttons will also appear at the bottom.

Return to the Top

Adding Text


To add text, just type into the editing area. Once you have done this, you can format your text using these menu buttons:



These function the same way as text formatting buttons in a word processor and a few minutes experimentation on your page will acquaint you will all their functions. Try things out as much as you like. You can't break the page and, as long as you don't click on the "Save Changes" link, nothing will appear on the internet. At any time, you can click on "Abandon Changes" and your page with refresh.

You may wish to add a special character which isn't available on your keyboard (such as a Euro sign or a diphthong). By clicking onf the Special Character button, you will be presented with a range of choices:


The Paragraph Format drop-down menu:




enables you to format headings or whole paragraphs. The results look like this:



Return to the Top

Adding Images


You can add images to you page:
  1. Place the cursor where you want to put your image and click on the Image button.


  2. You will see a series of options:



  3. If you want to use an image from a pre-existing website, visit that site, right click on the image, select "Copy Image Address" (or something similar, depending on your software). Copy this into the URL box, select OK.

  4. If  you want to use an image on your computer, click on the Browse Server button, and then on the Upload button:


    This will give you access to the files on your computer. Choose the image you want and it will be uploaded to the Organists Online server. Then, in the server screen, select the image you want and click on Choose:



    This will return you to the Image Properties screen (2. above), then select OK.

  5. As mentioned above, you can't break the page, so experiment with the other image properties as much as you like.

  6. You can change image properties by right-clicking on the image. Useful tip: to centre an image, centre the cursor using the text-formatting features, then follow the above procedures.

    Alternative text is where you place the briefest of descriptions of the image. This is to help visually impaired users who have voice generating software.

    Width and Height enable you to control the size of your image. BEWARE!!!! As your page will be viewed on many screen sizes, it's best to define these in percentages only and, to maintain a good aspect ratio, add only a width %. The height will adjust automatically.

    Border does what it says, places a border round you image. You set this in pixels.

    HSpace and VSpace determine how many pixels margin there will be around your image, both Horizontally and Vertically. This is useful when using

    Alignment, which determines whether your image is displayed to the left or right of text.

    Useful Tip: to ensure a good appearance across all screen sizes, it's best to ignore HSpace and VSpace and also Alignment  and centre an image. (See 4. above). This won't allow text to flow to the right or left of your image but, when the screen size is small, there won't be any weirdly formatted text squeezed in.

    If you really want to align an image to the left or right, test your page on a mobile device to see if everything looks good on the screen after adding the image. As mentioned above, for a quick idea of how your page might look, press F12 on Chrome. You can do the same on Explorer, but it's more complicated. If you want to try this on Explorer, press F12 but follow this LINK.for more information.


Return to the Top

Adding Audio Clips


You can add audio clips to you page:
  1. Place the cursor where you want to put your image and click on the Audio button:



  2. Then, the process is essentially the same as adding an image.


Return to the Top

Adding Videos
(YouTube - see below for Facebook)


You can add YouTube videos to your page:
  1. Place the cursor where you want to put your video and click on the YouTube Video button:


  2. You will see a series of options:



    DO NOT PASTE IN THE EMBED CODE PROVIDED BY YOUTUBE
    Although this will function as expected in desktop mode, the complicated YouTube coding will begin to argue with the RegisteredPlus coding when the page is viewed on a smart phone.

    It's MUCH better to cut and paste the YouTube Video URL, which can be seen to the top left of the YouTube page:



    Then you get something like this:

    :

    For best results across all media, ignore the Width and Height settings, and check "Make Responsive".

  3. You can decided for yourself if you want to check or uncheck the other options.

  4. When you click the OK button, your video will be placed on your page. To change the settings for this video, it's necessary to remove the video and go back to stage 1.

  5. If you are feeling very confident, you CAN insert a YouTube embed code then, where the code says "width", add a percentage. The YouTube software will sort out the aspect ratio etc. Not always necessary, but may be according to some browsers, UNCHECK Make Responsive.

    Doing this may make your page look neater on a desktop, but may make the video very small on a smart phone. However, you can experiment and see what you like.

Adding Videos
(Facebook - see above for YouTube)

You can add Facebook videos to your page:
  1. Visit Facebook and find the video you want to link:

  2. Right click on the video and you will see this:



    Select "Show Video URL".

  3. You will see something like this:



    Copy the URL.

  4. Return to your RegisteredPlus editing page and select the Facebook icon in the editing bar.



    and you will see:



    Paste the video URL into the URL box.

  5. Click "OK".

Useful Information: On some handheld devices, the video thumbnail may appear to be misaligned. However, once playing, the video will be correctly displayed.


Return to the Top

Linking to Another Site


You can use the Hyperlink button to link to another website:



Select the text or image you want to function as a link, then click on the Link button. You will be presented with several options:



Remberber!! When adding a URL to the box, ONLY use the section from www. The very first part is selected from the Protocol menu.

If you want to know what the other options do, have a happy time with Google. However, the instructions above will enable you to add simple links.


Return to the Top

Creating a Menu


If you have created a large page with many sections, it will help people to navigate it if there is a menu at the top. A drop-down menu such as THIS page has is beyond the scope of the simple-to-use editing package that goes with a RegisteredPlus page, but there are easier solutions:
  1. At the top of your page, type a list of the principal sections, something like -
    Education Qualifications Experience Special Skills etc.

    You could leave this just as one line, but your page will be viewed via a wide variety of devices, ranging from desktop computers (with a screen width of 1,920 pixels to a mobile phone with a screen width of just a few hundred pixels. This could lead to you menu being divided, and a mutliple-word heading, such as "Special Skills" being split in two. So:
  2. Centre your menu-text and then make it into a series of separate lines:

    Education
    Qualifications
    Experience
    Special Skills
  3. You might want to flank each term with a Special Character to give more visual impact:

    § Education §
    § Qualifications §
    § Experience §
    § Special Skills §

    These individual lines are so short that they are unlikely to be split to fit in a narrow screen.
  4. Now return to the main body of your page. Place the cursor before each important heading and click on the Anchor button:



    You will see a box like this:



    Add the name you want to use for that Anchor or section. Do this for all the sections of your page.
  5. Now return to your menu. Select a menu item and click on the Hyperlink button:

  6. Then - select OK.
  7. If you have created a page with lots of content, a user will have to scroll up and down a lot and he/she may find this tiresome. So it could be useful to Anchor tag a word at the very top of your page and then, at the end of every major section, add an Anchor link such as Return to Top.

Return to the Top

Conclusion


The aim of the editing suite is to make sure that anyone, with or without any prior knowledge of web building or codiing, is able to produce a useable webpage. For most site users, wanting to find out something about an organist, these profile pages will be the first place they will look.

The page also provides a unique URL that can be accessed without first entering Organists Online (look in the URL bar when viewing your page). For instance, check out https://organistsonline.org/organist/Philip-Norman