Ticketor - How to: Create Content / Landing Pages and Add Content to Your Pages

Create Content / Landing Pages and Add Content to Your Pages (Web Editor / Rich-text Editor)

You can edit most of the text and content of your site and add content pages.

Page Content

Most pages, including the upcoming events page, donation page, contact us page and obviously the free form pages have an area that you can add or update the content.

Ticketor uses a powerful editor, also known as rich text editor or Web Editor, to allow you to create any form of content and web pages. You can access the editor using the gear or pencil icon on the page.

Web Editor

The same editor is also used for events or merchandise description or in the newsletter to create email templates.

The editor is very similar to Microsoft Word or any other document editor.

Web Editor – Standard Controls

Using the menu at the top of the editor or the buttons in the toolbar, you can create any type of content.

It allows you to add text (headers and paragraphs) with different colors, fonts, sizes, background colors and with different styles such as bold, Italic or underlined.

You can also align the content to the left, right or center.

You can add lists and bullet points.

You can also add special characters, smileys or choose from 100s of icons.

It also allows you to upload picture or find a stock picture to add to your content.

You can also embed a video that you have uploaded to YouTube, Vimeo, Facebook or other streaming providers.

Tables with as many rows or columns can also be added. They can be used to show tabular data or to create a layout for the content. For example, you can create a 2-column layout, using a table with 2 columns. The border, colors and backgrounds of the table or each cell can be set in the table properties.

You can also add buttons that link to a certain page, such as a “Buy Tickets” button or “Register for Newsletter” button. The buttons control allows you to create buttons of type “Primary” or “Utility” which get their color and style from your theme and match with other buttons on the page or you can create buttons with custom style.

You can also create links. Just select a piece of text or a picture and convert it to a link by adding a URL.

All the items mentioned above are pretty standard in word processor applications and can be used to generate an article or blog.

Web Editor – Web Design Controls

The next set of controls are more of web-design controls and are there so that you can create beautiful web pages.

Section:

The main control in web design controls is “Full width Section”.

Usually, a web page consists of multiple full-width sections or strips stacked on top of each other.

For example, if you look at www.Ticketor.com , the homepage consists of multiple sections including a slide-show, followed by some headlines section, followed by features section, pricing section, testimonials section and reviews section.

Section is actually the container for “Cards” control and allow multiple Card controls to line up horizontally. The cards in the section either scroll or wrap to the next row, depending on the section’s settings.

Start you web design by adding a section. You can set the sections settings, including the background color or picture, border and animation effect. Animation effect will trigger when the section is scrolled into the view.

Cards:

Cards are boxes of information that go into the Section. You can have multiple cards in a row. If the cards don’t fit on the screen, they either wrap to the next row or they will scroll, depending on the section’s settings.

Cards must be inserted into a section. Insert a section, then click inside the section and insert proper cards.

Different types of cards have different layout and can be used for different purposes. Here is a list of cards:

  • Generic card, which provides a box
  • Vertical card, that contains a picture, text and a button at the bottom
  • Horizontal card, with a picture to the left and text to the right
  • Profile card, with a profile picture at the top, area for name and title, social media icons and a button
  • Text card, that allow you to add some styled text
  • Cutout text card, showing a cutout text on a background
  • Glowing text card
  • Social card with social media icons that can be linked to your social media pages
  • Contact us card
  • Coupon card, representing a coupon or promotion code
  • Counter card, representing a counter on your site
  • Google map card, displaying a location on Google map
  • Star-Rating card, showing star rating for a product or service out of 5
  • Price-Table card, representing a plan or product with its feature

There is also a Site-footer card, suitable for the site footer and a Callout card that shows on the site as a pop up.

One Card can be inserted inside another card to create a more complex layout.

Each card may contain other cards or elements such as images, links, icons, etc. You can click on each element to customize it. For example, a profile card comes with a default picture and social media links and contacts. After adding the card, you can click on the image to change the picture. You can also click on each social media icon to set the URL or you can add icons and links to other social media.

The best way to experience the cards is to create a section and start adding cards of different types to have a better understanding of each card.

To change a card or element properties, simply click anywhere inside the card or element and from the “Tooltip” toolbar, select the card type. If multiple elements are nested inside each other, clicking on one allows you to edit or delete the element or any of its container (parent) elements.

Each element has a group of attributes that allow you to control the size, color, border, animation or other attributes of the element. Web developers can also use the more advanced attributes to add CSS or a Class to the elements.

Templates

The templates icon allows you to add pre-designed section with multiple cards or individual cards. There are templates for the whole section and there are templates for each section item, in case you want to add more items to the section.

Select different templates from the drop down to preview the template.

The templates allow you to quickly and easily create a landing page by adding multiple sections of your choice.

Here are some of the templates:

  • Featured products
  • Page Header (title)
  • Product Detail section
  • Counters section
  • List section
  • Testimonials section
  • Our team section
  • Product features section / Counters section
  • Plans and Pricing Section
  • Contact us page
  • Videos section
  • Blog section

This blog and video show you how to add content and pages to your site and top navigation.

Adding Content and Pages to Your Site and Top Navigation