You can create a custom page header for your Party using markdown formatting and the Beta Code Editor. Markdown formatting allows you to use simplified code to create custom elements on your Party page such as a custom menu, banner image, or promotional banner. The specific markdown formatting supported includes traditional markdown,
HTML tags, and CSS classes. To create elements, you will write (or copy/paste) the Markdown code into the code editor and click Save. If you're familiar with Markdown, HTML, and Css classes, you can skip the instructions below and read the markdown documentation. If you're not familiar, don't worry, it's easy to learn! You can also use our interactive templates to copy and paste a template that fits your style.
Instructions for using markdown interactive templates
Writing your own markdown, while useful, isn't always necessary. Using an interactive template, you can customize the markdown and then copy/paste it into your Party page header. Each interactive template includes an Edit button and Copy button. Click the Edit button to see the elements of the template you can change and customize. Once you're finished, click the Copy button and paste the markdown into the code editor.
Review the interactive templates to get started. If you'd like to make even more changes to the templates, you'll need to edit the markdown directly.
Instructions for using Markdown
Markdown is an abbreviated, simplified method for telling your web browser what to display. The most simple example is adding an image. To create an image, you use the HTML tag
<img />. "Img" is an abbreviation for "image", and the brackets "< >" and "</>" tell the browser that you're providing instructions for creating an element that it should display.
If you type <img /> you've told the browser, "I would like you to display an image".
The browser then reads the instructions for how to create the image inside the brackets. Images only require one instruction, the src or location of the image to display, and include three optional parameters or instructions: width, height, and class. Here's a simple example.
<img src="https://yoursite.com/an_image.jpg" width="100px" height="100px" class="img-round" />
By copying and pasting the above code into the Beta Code Editor, you're telling the browser to display an image where the file is located at "https://yoursite.com/an_image.jpg", should be displayed as 100 pixels wide, 100 pixels height, and be styled with the class of "img-round" which stands for a round image. While it might be complicated to understand this code at first, with just a little practice and some trial and error, it's easy to tell your browser what to show all your customers when they come to visit your Party. Review the Markdown formatting to find the element that you'd like to add to your Party header, copy the code that corresponds to each element, and paste it into your Party header. For example, if you wanted a banner image, some italic text, and then a button you'd write the following code into the Beta Code Editor:
<img src="https://via.placeholder.com/1500x300.png" class="img-banner"> <i>Some italic text</i> <a href="https://exampleblog.com" class="btn btn-color-green btn-lg">Read my blog</a>
You could write these on different lines or on the same line, it will read from left to right, and top to bottom, and then display the items as follows:
Review the markdown formatting to get started.