Buttons

• While on appropriate page, enable the Visual Builder
• Click on the + to add a module
  
• Select the ‘Button’ module
  
• With the module open, replace the words ‘Click Here’ in the button text field with the words that should be on the button.
  
• Close the button module.
• Open the WP Dashboard for the site. Scroll down the dashboard to the ‘Divi’ option. Select the subcategory of ‘Theme Options’.
  
  With the theme options open in the ‘General’ tab, scroll to the bottom of the window to the section for ‘Custom CSS’. Be careful when changing the css. The CSS for the button styles will be added/edited here.
  

School Webmasters has a large library of button hovers to choose from on the School Webmaster templates site. Check out the Button Hovers Library

THIS WILL BE A LINK TO THE CSS

If a button has an icon you will write the html by hand and add it into the text tab of a text module.

• While on appropriate page, enable the Visual Builder
• Click on the + to add a module
• Select the ‘Text’ module
• With the module open, click on the “Text” tab found on the top right of the wysiwyg.
• Paste in the following html:

  <a class=”et_pb_button” href=”place url here” target=”_self” rel=”noopener”><i class=”place icon name here” aria-hidden=”true”></i> Place Title of the Button Here</a>

• Replace the url, the i class name, and the button title. Be sure to check if you need to change the target to _blank if it needs to open in a new window. Please don’t delete out the aria-hidden=”true”, it is needed for ADA purposes.
• To find the icon name, look on the  Font Awesome training page or look through the Divi Version of Font Awesome.