background image

PopIT Pages

When you want to insert extra information on a page, but you don't want to make the page too long, or force the visitor to another page, then this is when you need to use PopIT Pages.

importantIt is a fact that few people will read all the text on a web page, especially when there are hundreds of lines. Most people scan the page to look for interesting points or graphics that attract attention. This is difficult if your page is loaded with information, and there are few images or photos to break up the text.

Using PopIT Pages allows you to reduce your page length by adding summary text mixed with attention grabbing photos and headlines. You can then add read more text links (like this one) or buttons and images anywhere in your text that display more detailed information when clicked.

Step 1: Create a PopIT Page Section

On the page where you are going to insert the PopIT Page link, click on Manage Sections and add a new WYSIWYG section, and set the Block type to Hidden. This prevents (or hides) that section from appearing on your web page.

Click on the WYSIWYG link to return to the page editor.
You will now see that the new section has been added below your main section.

Step 2: Add your PopIT Page Content

Add any content that you want to display in your PopIT Page into this section like this. Note the Section ID number which you will use in the next step.

Step 3: Insert the PopIT Page Code

In your main section, enter the PopIT Page code where you want your link to appear like this example.

You can see that our example PopIT code looks like this...
[[#86:txt=Read more...]]

PopIT Page codes always start with [[#
The number 86 is the Section ID of our PopIT Page section, so you would use the Section ID of your PopIT Page section.

Then we have a colon which is always used to separate each parameter.

The parameter used in this example is the link text which is entered like this...
txt=Read more...

You can enter any text you want to use as the link text, so this could also have been...
txt=Click me to read more information

Finally, the PopIT code is terminated by closing double square brackets...
]]

When the page is viewed, the PopIT Code is converted into a text link that will display the hidden page section content as a PopIT Page when it is clicked like this...
Read more...

 

Using a Text Button as the link

Instead of using plain text as the link to view the PopIT Page, you can add an extra parameter that will turn the link into a button (without the need for any graphic).

The parameter to use is...
link=button

So, your PopIT code will now look like this...
[[#86:txt=Read more...:link=button]]
Note the colon is used to separate the parameters.

... and your link will now appear like this...
Read more...

 

Using a Graphic Button as the link

If you want to use your own graphical buttons as links to open PopIT Pages, then simply upload your button graphics into the Media section of your admin, and add the path to your graphic like this...

thumb=mybutton.jpg

If you have created a new Media folder, then make sure you include your folder name in the path like this...

thumb=buttons/mybutton.jpg

Then, your PopIT Page code will look like this...
[[#86:txt=Read more...:thumb=buttons/mybutton.jpg]]

... and your link will now look like this...

As well as graphics, you can use any photo as a link in the same way.
Just upload your photo into a Media folder and use the same method above.

 

Changing the Mouseover Text

The default mouseover text that is used on these links is "Click to view"
You can change this to any text you like by using the following parameter...

title=For more information click here

Your plain text PopIT Page code will then look like this...
[[#86:txt=Read more...:title=For more information click here]]

... and your link will now look like this (move your mouse over the link to see the text)...
Read more...

NOTE: if you were using the button graphic, then you would include both parameters like this...
[[#86:txt=Read more...:thumb=buttons/mybutton.jpg:title=For more information click here]]

 

Changing the Size of the Window

The default size of the popup window is 700 pixels. The height expands to fit the content.
You can make the window any width and/or height you like by adding the parameters like this...

width=500:height=300

Your plain text PopIT Page code will then look like this...
[[#86:txt=Read more...:width=500:height=300]]

... and your popup page will be resized (scroll bars will appear if the height is less than the content)...
Read more...

You can also just use the width parameter, so that the window will expand to fit the content.