Designing the site means selecting themes and colors for your overall site, uploading a logo and determining design that is going to affect your whole site and all pages.
Using the designer tool in Ticketor, you can create almost any design or site that you may imagine or you can match the site to have the same look and feel as another site or your official site.
Even if you are integrating or embedding ticketing to an existing site, you should still use the designer tool to make the site have the same feel and look as your other site and upload your logos and background pictures.
You can launch the designer tool from Control Panel > Account & Settings > Design . You can follow the wizard for basic settings or skip the Wizard to go to the main panel.
The main panel opens up on your page so you can immediately see the effect of the changes you make on the page. You can navigate to other pages to see the effect on all pages.
All changes to this panel are automatically saved and applied and do not require saving. You can use Ctrl+Z for undoing.
Important note: Usability is More Important Than the Look
The most important consideration when designing a site is usability.
You don’t want to ever sacrifice usability for the sake of design or beauty of your site. Here are a few points you want to pay extra attention to:
- Color contrast: Your text color and background color should have enough contrast to be easily readable, not only by a healthy eye, but also by disabled users.
- Mobile friendliness. Always consider mobile and small display use-cases when designing the site. Try to avoid big paddings and margins around the page that will make the area for the main content so small. Also try to avoid 2 or multi-column designs as they may not fit on small screens as you expect.
With those in mind, lets start designing the site:
Select a Theme
Start by selecting a theme. The theme dictates the overall color of the site. Select a theme that best matches your logo and branding. You can change the colors, backgrounds, borders and other settings for different areas later. So don’t worry if you don’t find a perfect theme. Just select one that uses closest colors to your branding or taste.
Make sure to choose a theme with light text color if you are planning to design a dark-color site and choose a theme with dark text color if you are planning to make a site with light background.
Upload Your Logo
Next, go to the site logo panel and upload your logo. If you do not have a logo, you can use the text logo instead.
The logo as well as the site navigation are the 2 items that reside in the site header area.
You can resize the logo and the top navigation by dragging the handle at the bottom right corner of the them and you can move the logo and the top navigation anywhere in the header area.
You can also adjust the height of the header area by dragging the bottom of the header.
Select Layout and Header Settings
Next select your layout. Consider very large displays as well as very small mobile displays when selecting the layout. Full-width layout may not look good on wide screens. Fix width layout (center) may waste a lot of screen area on big monitors.
I would like to go with “Full-Width with content in the center”. They use all the screen width on small screens and look good on a wide screen.
Depending on whether you want the header and module background colors, that we will adjust in the next steps, to cover the whole width of the screen or only the center, you should select one of the layouts that keep the content in the center.
Also, you can choose the design of the top navigation. You can choose simple links or different style of boxes.
Then you can adjust the alignment of the items in the site header. The site header contains your logo and the top navigation.
You can drag and drop the logo or the top navigation to move them anywhere in the header area. You can resize the logo or the navigation menu using the handle at their bottom-right. If the Navigation menu is too narrow, the items in the nav will wrap to a second line.
You can also adjust the height of the header area by dragging the bottom edge.
Resize your browser to make sure the header area looks good on all screen sizes and widths and it does not cause scrolling.
Upload Ticket Logo
Next upload your e-ticket logo. That is the logo that gets printed on your tickets. Remember that tickets get printed on white papers so the e-ticket logo should have contrast with white.
When you create an event, you can preview the tickets and the e-ticket logo that you upload here.
Upload Email Header and Footer
All the outgoing emails from the system, including welcome emails, confirmation emails, and any newsletter that you send will go out with the email header and footer you upload here.
Note: You can also add email signature from Control Panel > Account & Settings > Edit Emails and Confirmations > Email Signature
Customize Themes and Colors for each Page-Section
At this point you can customize your selected theme, change some colors, borders, or upload background pictures.
Go to the “Sections” tab. This tab includes multiple panels, for different sections of the page. The content of the panels is pretty similar for each section and allow you to customize that section.
Every page on your site consists of the following sections:
- Page: Is the overall page. You can use this section to set a background picture or color for the page and make other settings
- Page Header: The header of the page where your logo and top navigation is located. You can use this section to change the color of the top navigation or change the background of the page header
- Page Footer: Controls the color and design of the site footer. The site footer normally contains the credit card logos and a link to your terms and you can add any content to the site footer from Control Panel > Account and Settings > Edit Content > Site Footer
- Module: Module is the area where the main content of the page is located. For example, “Find Tickets” area, “Shopping Cart” area, “List of events” area, “Contact Us” area are all modules. Each page may contain one or more modules. A module consists of a header and body. The header contains the module title and the body contains the main content of the module. The width of the module may be the full width of the screen or it may be limited to the center area depending on the layout you choose. If you want to have a background picture for the modules that cover the whole width of the screen or if you want the module header to go all the way to the edges of the screen, choose the layout “Full Width – Module content in the center” so only the content of the module (body) is limited to center while the header and module is full-width. Otherwise, if you want the module header to be limited to the center area, choose “Full width – Module in the center” or “Full-width – All content in the center” to limit the site header to the center as well.
- Module Body: Is the part of the module with the main content, excluding the module header (title)
- Module Header: Is the top area of the module with the module title. You can adjust the height of the module header by dragging the bottom edge and you can adjust the font size of the module title or the color and background color.
- Content: This is not a specific area or section of the page but refers to the general content of the page. You can change the main content color and “Highlights & compliments” color that is used as secondary color for titles or highlights of the text.
- Clickables: Here you can set the colors and setting for clickable areas of the page including links, buttons, tabs, and panel headers. You can set the “Default State” or how the clickables look normally, “Hover State” when you hover the mouse over a clickable area, “Active State”, such as the active tab in a panel, “Primary Button” and “Utility Button” colors and styles used throughout the site.
In each panel you can set or overwrite the following settings:
- Background color or style (Solid or gradient). You can choose semi-transparent colors to create see-through areas. For example, you can select a semi-transparent grey or white background color for the module or module body background to make the module area separate from the rest of the page and give enough contrast to your text, while showing your page background image. This technique can be used to create a modern-looking module without borders and boxes
- Background picture that you can upload or select from the gallery
- Border width and color that can be set for each side of the section: top, bottom, left and right. To remove the border for an area that comes default with a border, simply set the border width to zero for all the 4 sides.
- Padding is the blank inner space of the area, between the content of a box and the border of the box. It can be set for each side of the box independently.
- Margin, which is the outer space of the box, from the box border to the next box on the page. It can be set for all 4 sides of the box independently.
- Shadow color and size can set the shadow of the box. If your theme comes with a shadow and you want to remove it, simply set the size to zero.
- Corner radius can be set to create boxes with rounded corner. The corner radius can be set for each corner independently. You can use big radius on some corners to create irregular boxes.
- Font, font color and font shadow allow you to set the font for the section.
Using the Sections tab, you should be able to fully customize the design of your site.
CSS
CSS is a technology used by web designers to design a site. Using CSS, a designer can hide or change the style of every individual item on the page in a very granular or general way.
Since the “Sections” tab of the designer panel give you very good control over the style of the site, it is very unlikely that you need to write any CSS code. Actually, Ticketor discourages using CSS on the site except in very rare cases.
If you are a web developer and decide to use the CSS section to add style to the site, make sure to carefully limit your selectors to the specific item you are targeting and do not use generic selectors to avoid any unexpected consequences that may affect the site functionality.
