As one of TicketSpice's signature features - our page builder gives you the opportunity to showcase your organization's unique identity through customized design and branding elements. This article will guide you through the process of personalizing your TicketSpice page by adjusting fonts, colors, and backgrounds, ensuring that your ticketing page visually aligns with your brand.
Jump To...
Edit the Style of TicketSpice Fields
TicketSpice provides a wide range of customization options, allowing you to edit headings, paragraph text, text links, buttons, and fields, as well as apply custom CSS. To explore these features, navigate to the Design Settings section of the page. This article outlines how to customize each available style field in TicketSpice.
Getting Started
From the Pages screen, click the pencil icon on the page you want to edit
Click Design Settings in the top right corner to display the design options
Select Styles at the top of the field
Headings
Headings
This field can be used to customize the formatting of all headings on your event page.
Select the Headings dropdown
Edit the headings as desired
Font: Select the heading font
Font Size: Select the font size for the headings
Heading Color: Customize the heading color by clicking the color block square and selecting the desired color, or manually adding a color hex you would like. If you use the color block square to adjust the color, make the color more or less opaque by adjusting the opacity slider next to the color slider
Bold/Italics: Select if you would like the headings to be bolded or italicized
Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page
Paragraph Text
Paragraph Text
This field can be used to customize all paragraph text (non-heading text) on your event page.
Select the Paragraph Text dropdown
Edit the paragraph text as desired
Font: Select the paragraph text font
Font Size: Select the font size for the paragraph text
Heading Color: Customize the paragraph text color by clicking the color block square and selecting the desired color, or manually adding a color hex you would like. If you use the color block square to adjust the color, make the color more or less opaque by adjusting the opacity slider next to the color slider
Bold/Italics: Select if you would like the paragraph text to be bolded or italicized
Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page
Text Links
Text Links
This field can be used to customize the color of all text links on your event page.
Select the Text Links dropdown
Customize the text link color by clicking the color block square and selecting the desired color, or manually adding a color hex you would like
If you use the color block square to adjust the color, make the color more or less opaque by adjusting the opacity slider next to the color slider
Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page
Buttons
Buttons
This field can be used to customize the color of the buttons on your event page.
Select the Buttons dropdown
Customize the button color by clicking the color block square and selecting the desired color, or manually adding a color hex you would like
If you use the color block square to adjust the color, make the color more or less opaque by adjusting the opacity slider next to the color slider
Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page
Fields
Fields
This field can be used to customize how the labels are centered, the style of all input boxes, and the width between fields on the page.
Select the Fields dropdown
Edit the fields as desired
Label Position: Select how you would like to center all labels on your event page
Input Box Style: Select whether you would like all input boxes (fields where attendees enter information) to have square or rounded edges
Field Width: Select the width you would like to have between all fields on the page
Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page
Custom CSS
Custom CSS
This field can be used to add custom CSS to the page.
Warning: Custom CSS can break a TicketSpice page if formatted incorrectly. Also, when TicketSpice pushes code updates, those updates also have potential to break any custom CSS. We only recommend using custom CSS on a TicketSpice page if the user understands how CSS works and proceeds with caution.
Select the Custom CSS dropdown
Enter the CSS into the dropdown
Click Done
Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page
Edit the Background
TicketSpice offers flexible design options, allowing you to customize the page foreground color, background color, and background image to align with your branding. These settings enable you to create a visually cohesive and engaging ticketing page. To explore these customization options, navigate to the Design Settings section of the page. This article provides step-by-step guidance on adjusting each of these style elements.
Getting Started
From the Pages screen, click the pencil icon on the page you want to edit
Click Design Settings in the top right corner to display the design options
Select Background at the top of the field
Foreground Color
Foreground Color
This field is used to edit the foreground color on your event page.
Select the Foreground Color dropdown
Customize the foreground color by clicking the color block square and selecting the desired color, or manually adding a color hex you would like.
If you use the color block square to adjust the color, make the color more or less opaque by adjusting the opacity slider next to the color slider
Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page
Background Color
Background Color
This field is used to edit the background color on your event page.
Select the Background Color dropdown
Customize the background color by clicking the color block square and selecting the desired color, or manually adding a color hex you would like
If you use the color block square to adjust the color, make the color more or less opaque by adjusting the opacity slider next to the color slider
Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page
Background Image
Background Image
This field can be used to add a background image to your event page.
Select the Background Image dropdown
Click Choose an Image
Select one of the background image options
Upload Your Own: Select Choose File to upload a new image, or choose from one of the images that has already been uploaded
Use One of Our Photos: Search by keyword to find a photo, and select the image
Browse Patterns and Textures: Select Abstract Backgrounds or Polygon & Geometric Backgrounds, and select the desired background
Color Overlay: Add an overlay over the image with a color you select. If turned on, customize the overlay color by clicking the color block square and selecting the desired color, or manually adding a color hex you would like. If you use the color block square to adjust the color, make the color more or less opaque by adjusting the opacity slider next to the color slider
Position: Select where you would like the crop to begin if your image crops out a portion of the photo
Repeat: Select if you would like your image to repeat
Scroll: Select how you would like to image to interact when attendees scroll
Scale: Select how you would like the background image to scale on the page
Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page
FAQs
Why doesn't my Banner field text change when I update the heading and paragraph text styling?
Why doesn't my Banner field text change when I update the heading and paragraph text styling?
The Banner field has its own styling settings, so changes made to heading and paragraph text styling on the Design Settings field won’t affect it. To learn how to customize the font styling for the Banner field, click here.