WYSIWYG - Adding Buttons, Side-by-Side Columns, Service Titles, etc.

This module is for Full Admin users who are updating a page on the Pages Module

Button:

To add a button, switch to the code editor and add this line of code:

Or if you want the link to open in a window use:

Replace “#” with your link. Be sure to make it a relative link rather than absolute. Ex: /about-us instead of www.doitbest.com/about-us

Replace: “I’m a Button” with the button text.

Full Width Button:

If you would prefer the button to go full width use the below code.

For side by side buttons, it is important to wrap the buttons in a "<div></div>" or "<p></p>" so they properly stack on mobile.

Side by Side:

To add side by side columns first, in the editor or in the code editor, make two elements. These can either be images, text, whatever. Then, in the code editor, add this code:

<div class="TwoColumns">

PLACE ELEMENTS HERE

</div>

Copy the code of the elements and put them in between the divs.

If you need multiple elements on one side wrap them in a div, ex:

 

Image Left -> Text Right Example

---

 

Text Left -> Image Right Example

---

 

Image Left  & Image Right Example

---

 

Text Left  & Text Right Example

---

 

Three Column Example:

 

Services Title:

To add a service heading, simply wrap an <h2> in a div with the class “ServiceHeading,” ex:

 

Anchor Tags:

To add an anchor to an image, button or any link follow these steps.

Image Anchor

1. Find your img tag. Example: <img src="/your-img-src">
2. Wrap it in an <a> tag. Example: <a href=” ”><img src="/your-img-src"></a>
3. Add your anchor’s name to the href (No spaces allowed, starts with #.) Example:

<a href=”#MyAnchor”><img src="/your-img-src"></a>

1. Determine where you want your anchor to go. Add an id to your tag. Examples:

<p id=”MyAnchor”>My paragraph</p>

<div class=”TwoColumns”  id=”MyAnchor”> two columns code </div>

Note: Don’t use the hashtag (#) in the id

 

Button Anchor

1. Add your anchor name to the href of your button. (No spaces allowed, starts with #.) Example: <a href="#MyAnchor" class="CMSButton">I'm a Button</a>
2. Determine where you want your anchor to go. Add an id to your tag. Examples:

<p id=”MyAnchor”>My paragraph</p>

<div class=”TwoColumns”  id=”MyAnchor”> two columns code </div>

Note: Don’t use the hashtag (#) in the id

 

Link Directly to Your Anchor From A Separate Page

To link directly to an anchor on a page from another page (a blurb from the home page, another CMS page, etc). Simply append the anchor name with the hashtag (#) to the end of your link. (No spaces or slashes needed)

Example: /tools-and-supplies -> /tools-and-supplies#MyAnchor