Description
This Events page template took inspiration from Eventbrite and includes a variable events tickets product where you can manage stock of early bird tickets, general tickets and VIP tickets.
Modern, accessible Voxel Templates.
Will be updated after the v1.4 release.
Features
Responsive design
Scales on any device size
Accessibility
HTML structure, contrast, fonts, spacing, clickable cards linked to card headings
Fluid typography
No need to think about font sizes every again
Fluid spacing
Consistent spacing that adapts to the screen size
Global colors
Set your colors once and they update everywhere
Conditional Logic
Visibility controls are taken care of – Hides labels if it’s not in the post
What is included
- The template described on this page.
- The custom post type (CPT) configuration file used in this template.
- The CSS required for this template.
- The attached Product Type.
What is not Included - Disclaimer
- There will be NO support.
- I do not guarantee this template will match your use case or is fit for purpose.
- Use it on your own decision.
Build process
Here is my process when building a design.
- Research other websites to identify common custom fields.
- Structure the CPT input fields for ease of use.
- Layout the webpage using inspiration from the other big sites.
- Apply correct HTML structure, variables and tokens wherever possible.
- Test responsiveness.
- Untold webpage inspections to determine why something is not working!
- Reviewed the design, making tweaks along the way.
- Test template import/export.
- Write How to use this Template guide.
How to support me
While this template is given freely, you can help me out by:
- Providing a do-follow link to Voxel Guides (https://voxelguides.com).
- Consider using an affiliate link from the Tools page.
- Buy me a Coffee.
- Review and add images of how you used this template in your designs.
Design Considerations
Where possible, CSS variables are used to define font size, spacing, gaps, margins, and padding.
This means that you have a single source of truth for your design layout, and can easily increase or decrease these values as required.
Fluid typography is text size that scales with the device viewport.
By using fluid typography in your design, you don’t have to think about what pixel or rem value to use at each device size. The CSS clamp function does this for you and ensures your design is responsive.
Conditional logic is used on each section to display or hide values depending on whether they are included in the post meta.
Unfortunately, I had to add explicit styling variables to each heading, or container spacing.
This was done so that when a user imports the template, they do not also need to set up the page builders’ global styles as well.
For example. Normally I would set a global container default in the Site settings > Layout > Padding and Gaps.
To remove this requirement, I have added the container gap spacing var(–space-xs) to each element.
Requirements
CSS
Copy this into your Fluent Snippets plugin (or wherever you store your added CSS). To vary any of the clamp functions, use the CoreFramework tool.
:root {
--space-4xs: clamp(0.33rem, calc(-0.03vw + 0.33rem), 0.31rem);
--space-3xs: clamp(0.41rem, calc(0.05vw + 0.4rem), 0.44rem);
--space-2xs: clamp(0.51rem, calc(0.19vw + 0.47rem), 0.62rem);
--space-xs: clamp(0.64rem, calc(0.43vw + 0.55rem), 0.88rem);
--space-s: clamp(0.8rem, calc(0.8vw + 0.64rem), 1.24rem);
--space-m: clamp(1rem, calc(1.36vw + 0.73rem), 1.75rem);
--space-l: clamp(1.25rem, calc(2.23vw + 0.81rem), 2.47rem);
--space-xl: clamp(1.56rem, calc(3.52vw + 0.86rem), 3.5rem);
--space-2xl: clamp(1.95rem, calc(5.44vw + 0.86rem), 4.95rem);
--space-3xl: clamp(2.44rem, calc(8.28vw + 0.79rem), 7rem);
--space-4xl: clamp(3.05rem, calc(12.44vw + 0.56rem), 9.89rem);
--text-xs: clamp(0.69rem, calc(0.16vw + 0.66rem), 0.78rem);
--text-s: clamp(0.83rem, calc(0.19vw + 0.8rem), 0.94rem);
--text-m: clamp(1rem, calc(0.23vw + 0.95rem), 1.13rem);
--text-l: clamp(1.2rem, calc(0.27vw + 1.15rem), 1.35rem);
--text-xl: clamp(1.44rem, calc(0.33vw + 1.37rem), 1.62rem);
--text-2xl: clamp(1.73rem, calc(0.39vw + 1.65rem), 1.94rem);
--text-3xl: clamp(2.07rem, calc(0.47vw + 1.98rem), 2.33rem);
--text-4xl: clamp(2.49rem, calc(0.57vw + 2.38rem), 2.8rem);
--h1: var(--text-4xl);
--h2: var(--text-3xl);
--h3: var(--text-2xl);
--h4: var(--text-xl);
--h5: var(--text-l);
--h6: var(--text-m);
--section-space-m: var(--space-m);
--section-space-l: var(--space-l);
--section-space-xl: var(--space-xl);
--section-space-2xl: var(--space-2xl);
--section-space-3xl: var(--space-3xl);
--section-space-4xl: var(--space-4xl);
--content-gap: var(--space-s);
--container-gap: var(--space-xl);
--grid-gap: var(--space-l);
--section-padding-x: 1.6rem;
--section-gutter: 1.6rem;
--radius-xs: clamp(4px, calc(0vw + 4px), 4px);
--radius-s: clamp(6px, calc(-0.23vw + 8.73px), 8px);
--radius-m: clamp(10px, calc(-0.23vw + 12.73px), 12px);
--radius-l: clamp(16px, calc(-0.45vw + 21.45px), 20px);
--radius-xl: clamp(26px, calc(-0.68vw + 34.18px), 32px);
--radius-full: 999rem;
} How to use this template
TBA
Reviews
Must be logged in to add a review.