When creating landing pages, the following best practices can make the creation process easier and make your landing pages more visually appealing:
To easily add content to your landing pages:
Wherever possible, build custom pieces using HTML elements on the landing page itself.
For more information about adding HTML elements, see Adding an HTML Editor.
If you want to duplicate the same information on multiple landing pages, create the information in an entry (such as a blog entry) somewhere on the Vibe site where you have access. After you create the information in an entry, you can then reference that entry from multiple different landing pages.
For more information about adding entry elements, see Adding an Entry.
If you plan to edit the HTML of an item, ensure that you have local copies of all images in the HTML. Images do not load properly when you edit the landing page unless you have local copies.
To make your landing page look more professional:
Create nice looking graphics to incorporate into the page.
Use a simple, classy image for the background that can be repeated vertically and horizontally.
For subject headers, set the opacity to somewhere between .65 and .85 (<style="opacity: .??;">), and round each corner to somewhere between 4 and 10 (<style=”border-radius: ??px:>). Ensure that settings for each corner are consistent.
When you want to display a graphic on the landing page, especially in tables, re-size the graphic outside of Vibe before you add it to the landing page. Then use that pre-sized graphic as a building block to build out the desired sized page. This is important because the pixel sizing within the landing page editor might not present what you expect.
When you want to display a calendar on the landing page, always use the Enhanced View element.
For more information about the Enhanced View element, see Adding an Enhanced View Element.
If your table contains pixels (or if the percentages do not total 100 percent), you must add an additional column to the table that has a width of * in order for the columns to stay at their fixed widths. This is an HTML browser requirement.
For example, suppose you want a 3-column table with the first column with a width of 450 pixels, the second column with a width of 150 pixels, and the third column with a width of 10 percent. For the columns to retain their fixed widths, you must add a fourth column, and specify * in the provided field.