Headings

You can easily add headings using either markdown selecting the appropriate heading in the editor, or by using an html tag. You can also use a horizontal line or horizonatal rule with your headings with html.

Markdown

Html

Text & typography

You can format your text with bold, italics, and strike through. You can also create bulleted lists and numbered lists.

Markdown

Html

Links

You can easily create links with either markdown or HTML. Links can point to either content on your page header (e.g. #hiddenText would link to an html tag with the id="hiddenText") or a url to another page anywhere on the internet (e.g. https://directangular.com).

Buttons

You can create buttons with the HTML <a></a> tag and adding css with class="btn".

Change the size of the button by adding the appropriate class: btn-large or btn-small. Change the color of the button by adding a class btn-ghost, btn-light. Change the style of the buton by adding the class btn-round.

Nervous to write markdown code? Copy the button you'd like, paste the markdown code into the code editor, then change the text and href.

Images

Images can really make your party header stand out. Add banner images, rounded images, or circular images with the HTML <img>and CSS classes img-banner, img-rounded, or img-circle.

Nervous to write markdown code? Copy the image type you'd like below, paste the markdown code into the code editor, then change the src in the markdown editor to the url of your image.

Template Banner image

Copy to clipboard

Template Rectangular image

Template Rounded image

Template Circular image

Menus

You can add your very own menus, so it's easier for your customers to find important information about your business. Add a simple HTML <nav></nav> tag with the class menu, menu-white, or menu-gray. Any html tags included as the direct children in the nav tag will automatically get spaced correctly.

Pro tip: We recommend including no more than 4 items in your menu, so that shoppers can easily find what their looking for whether they are on a computer or on their mobile phone.

Nervous to write markdown code? Use the interactive menu templates below.

Promotional banners

Running a sale or promotion? It's easy to highlight the sale with a nice banner at the top of your party page. Just use a the HTML <section></section> tag with the class promo. Change the color of the banner with the class promo-green, or promo-pink and make the banner bigger with the class promo-lg. As with buttons, you can mix and match these however you'd like. Also, use any of the other HTML tags in the text & typography section above to add striketrhough, bold, and italic text, links, or buttons.

Nervous to write markdown code? Copy the promo template you'd like, paste the markdown code into the code editor, then change the text, <b></b> and <del></del>.

Vertical spacers

Sometimes, you just need to add some space between the items in your party header. You can do that by adding an HTML <section></section> tag with the class spacer-25, spacer-50, or spacer-100 to add vertical spacers of 25, 50, and 100 pixels. If you need to add more space, just add more than one tag and class.

Sections & columns

Sections and columns can make it easier to make your party header look pretty. Want to add a picture on the left with text to the right? Add pictures in a grid? Feature an item on the right and put your usual party text on the left? Just add an HTML <section></section> tag to group items together.

To add columns to your section just add the class columns. Then any <section></section> tag you add inside will automatically become a column, and the column widths will adjust automatically to fit the content you add.

Don't want column widths to adjust automatically? No problem. Just specify the number of columns that you'd like with the class columns-2, columns-3, or columns-4 to create two, three, and four columns respectively with fixed width.

Collapsible text

Sometimes you want to hide ugly, long, text, like your terms and conditions, your party rules, or a big table of shipping costs. You can easily do that with a collapsible text section. You'll just need to add an html <a></a> tag as a link to hide and unhide the text and a <section></section> tag as follows:

Pro Tip: It's a good idea to include the "well" class on the hidden text section, so it's easy for people to see the text when it's unhidden, but it's not required.

Products

You may want to highlight or feature certain products at the top of your party page. This allows you to promote products, albums of products, or new styles with your own specialized designs and photos. You'll just need to add an html anchor tag as follows:

There are three image types with corresponding image length: image widthratios supported: square (1:1), portrait (4:3), and landscape (3:4). You can change the image type by adding the corresponding class to the anchor tag: product_square, product_portrait, and product_landscape.

By default, all products will be displayed with full-bleed (100% of the width of the page), rectangular images with the product description hidden. You change the width of products and add more products side sby side using columns. Add spacing, product descriptions, and rounded product images by adding the classes: spaced, labels, and rounded to the <section></section> tag of the columns. We recommend using the featured items templates under party headers below to see how it works before you attempt to create your own featured products sections with markdown.