Training

Add a Button or Accordion

Make a link standout by adding a button to your page or post.

  • Start in the visual editor of your page/post.
  • Click on the button symbol in the toolbar.

button-in-dashboard

  • Create a title. This will be the text that shows inside your button.

 

button pop-up

 

  • Put a URL in the next box to link the button to a new page.
  • Check the Open in New Window if the link will be taking the visitor outside of your site.
  • Click Ok. Code will be added that looks similar to below. To visually see the button, preview or publish your page/post.

button text

Shorten the length of your page by organizing content into an accordion.

  • Start in the visual editor of your page/post.
  • Click on the accordion symbol in the toolbar.

accordion-in-dashboard

  • Create a title. This will be the headline that always shows for the section of content.
  • Type in your content. This will show when a person clicks to open the accordion.
  • Add more sections into the accordion by clicking on Add Another Accordion button. Keep adding as many accordions as you like and then click the Submit button.

accordion pop-up

 

  • After you click Submit, code will be added that looks similar to below. To visually see the accordion, preview or publish your page/post.

accordion text

  • This is how it will appear on the page – the accordions will appear closed until the user clicks the arrow symbol on the right to open it.  Try it here. (Styling will vary according to your site design.)
Accoridion Text 1
Accordion Text 2

Tips for Accordions

Accordions can be tricky sometimes. When you insert an accordion, you’ll notice that all of the content ends up being lumped into one big paragraph. You need to go through the content and organize it a bit if you want to style it more than just a paragraph.

Use soft enters (Shift+Enter)
  • This stacks the accordion information like the above photo. Go through the content and look for the start and ends of the accordions. This helps separate them a bit making them easier to read.
Don’t use a hard enter {Enter) after title
  • For your first paragraph, we recommend keeping it with the accordion title. If you do a regular enter, it will create a large gap on the front-end (what the viewer see) of the site in between the accordion title and content.
  • After the first paragraph, if you have more than one, feel free to use a hard enter.
  • Leave the [/accordion] at the end of the last paragraph. Just like the top of the accordion, if you use a regular enter, it will give you a big space at the bottom.
Style as normal
  • Once you have everything organized and easy to read, feel free to style and add links as you usually would.
  • Keep away from adding heading styles to the first sentence of the accordion and the last. This will mess with the accordion a bit and can sometime break it. Feel free to use them further down in the accordion content.
Each site is different
  • No two websites are alike. Depending on how your site has been designed, some of these tips may or may not work.
  • If you have major issues or something just isn’t working out, please contact us and we can help you figure it out.