In order to customize each section of the Modern Events Calendar manually, you can use the dev tools inside your browsers and then put the custom codes into the Custom CSS box in the settings of MEC or your theme. Alternatively, you can explore other customization methods like using the Elementor Single Builder addon, Gutenberg Single Builder addon, or advanced techniques like template overriding.
Customization Tools Overview
Using Elementor
If you prefer the Elementor page builder, you can extend its functionality for MEC customization with the Elementor Single Builder addon. This addon enables you to modify the design of your event pages, giving you flexibility and creative control.
Using Gutenberg
For users who prefer Gutenberg, customization of single event pages can be achieved with the Gutenberg Single Builder addon. This tool allows you to define layouts, including details such as start and end dates, event metadata, and more. Additionally, it provides a drag-and-drop interface for easy customization.
Write Custom CSS Code
You can use Inspect Element (built-in developer tools of your browser) and change each section for yourself:
If you want to make changes to your design, you can use Inspect Element (dev tools) to see the source code of your website and the CSS rules applied to it.
To access it, right-click, and from the pop-up menu, select Inspect Element (or Inspect or Dev Tools).
For more details, you can visit Chrome inspect element or Firefox inspect element. Meanwhile, searching on Google will be helpful too.
For example, we try to change the bottom gray border color in a footer.
Here are some CSS tutorials that will help you write your own customized CSS codes: w3schools | CSS Units
Media Queries for All Devices
You can use “media query” to make your design more responsive on mobile and tablet devices. Click here or here for more information on CSS media queries.
You can apply your CSS on a custom screen size using the following example:
1 2 3 |
|
or use between two screen sizes:
1 2 3 |
|
Note: If you want to make sure that all your customizations are only being used in the Single Event Page, you need to use body classes like the following ones (check the below screenshot):
1 |
|
or
1 |
|