title: Wordpress: Overwriting Shortcode in Plugin
body: <p>We are using a theme that directs plugins to generate the Builder/Shortcodes. A client doesn't like default look of the section separators, and I've build my own SVG and I have a path ready to go, however, I'm at a loss as to how to overwrite it. I'm thinking the if-statements and class_exists works into the solution, but again at a loss to how.</p>
  
  <p>This is the code for the shortcode construction:</p>
  
  <pre><code> &lt;?php
  
  if ( fusion_is_element_enabled( 'fusion_section_separator' ) ) {
  
  if ( ! class_exists( 'FusionSC_SectionSeparator' ) ) {
      /**
       * Shortcode class.
       *
       * @package fusion-builder
       * @since 1.0
       */
      class FusionSC_SectionSeparator extends Fusion_Element {
  
          /**
           * An array of the shortcode arguments.
           *
           * @access protected
           * @since 1.0.0
           * @var array
           */
          protected $args;
  
          /**
           * Constructor.
           *
           * @access public
           * @since 1.0
           */
          public function __construct() {
              parent::__construct();
              add_filter( 'fusion_attr_section-separator-shortcode', array( $this, 'attr' ) );
              add_filter( 'fusion_attr_section-separator-shortcode-icon', array( $this, 'icon_attr' ) );
              add_filter( 'fusion_attr_section-separator-shortcode-divider-candy', array( $this, 'divider_candy_attr' ) );
              add_filter( 'fusion_attr_section-separator-shortcode-divider-candy-arrow', array( $this, 'divider_candy_arrow_attr' ) );
              add_filter( 'fusion_attr_section-separator-shortcode-divider-rounded-split', array( $this, 'divider_rounded_split_attr' ) );
              add_filter( 'fusion_attr_section-separator-shortcode-divider-svg', array( $this, 'divider_svg_attr' ) );
  
              add_shortcode( 'fusion_section_separator', array( $this, 'render' ) );
  
          }
  
          /**
           * Render the shortcode
           *
           * @access public
           * @since 1.0
           * @param  array  $args    Shortcode parameters.
           * @param  string $content Content between shortcode.
           * @return string          HTML output.
           */
          public function render( $args, $content = '' ) {
  
              global $fusion_settings;
  
              $defaults = FusionBuilder::set_shortcode_defaults(
                  array(
                      'divider_type'     =&gt; 'triangle',
                      'divider_position' =&gt; 'center',
                      'hide_on_mobile'   =&gt; fusion_builder_default_visibility( 'string' ),
                      'class'            =&gt; '',
                      'id'               =&gt; '',
                      'backgroundcolor'  =&gt; $fusion_settings-&gt;get( 'section_sep_bg' ),
                      'bordersize'       =&gt; $fusion_settings-&gt;get( 'section_sep_border_size' ),
                      'bordercolor'      =&gt; $fusion_settings-&gt;get( 'section_sep_border_color' ),
                      'divider_candy'    =&gt; 'top',
                      'icon'             =&gt; '',
                      'icon_color'       =&gt; $fusion_settings-&gt;get( 'icon_color' ),
                  ), $args
              );
  
              $defaults['bordersize'] = FusionBuilder::validate_shortcode_attr_value( $defaults['bordersize'], 'px' );
  
              extract( $defaults );
  
              $this-&gt;args = $defaults;
  
              if ( $icon ) {
                  if ( ! $icon_color ) {
                      $this-&gt;args['icon_color'] = $bordercolor;
                  }
  
                  $icon = '&lt;div ' . FusionBuilder::attributes( 'section-separator-shortcode-icon' ) . '&gt;&lt;/div&gt;';
              }
  
              $candy = '&lt;div ' . FusionBuilder::attributes( 'section-separator-shortcode-divider-candy-arrow' ) . '&gt;&lt;/div&gt;&lt;div ' . FusionBuilder::attributes( 'section-separator-shortcode-divider-candy' ) . '&gt;&lt;/div&gt;';
  
              if ( false !== strpos( $this-&gt;args['divider_candy'], 'top' ) &amp;&amp; false !== strpos( $this-&gt;args['divider_candy'], 'bottom' ) ) {
                  $candy = '&lt;div ' . FusionBuilder::attributes( 'section-separator-shortcode-divider-candy' ) . '&gt;&lt;/div&gt;';
              }
  
              if ( 'triangle' === $divider_type ) {
                  $html = '&lt;div ' . FusionBuilder::attributes( 'section-separator-shortcode' ) . '&gt;' . $icon . $candy . '&lt;/div&gt;';
              } elseif ( 'bigtriangle' === $divider_type ) {
                  $candy = '&lt;svg id="bigTriangleCandy" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" ' . FusionBuilder::attributes( 'section-separator-shortcode-divider-svg' ) . '&gt;';
  
                  if ( 'top' === $divider_candy ) {
                      if ( 'right' === $divider_position ) {
                          $candy .= '&lt;path d="M0 100 L75 0 L100 100 Z"&gt;&lt;/path&gt;';
                      } elseif ( 'left' === $divider_position ) {
                          $candy .= '&lt;path d="M0 100 L25 2 L100 100 Z"&gt;&lt;/path&gt;';
                      } else {
                          $candy .= '&lt;path d="M0 100 L50 2 L100 100 Z"&gt;&lt;/path&gt;';
                      }
                  } else {
                      if ( 'right' === $divider_position ) {
                          $candy .= '&lt;path d="M-1 -1 L75 99 L101 -1 Z"&gt;&lt;/path&gt;';
                      } elseif ( 'left' === $divider_position ) {
                          $candy .= '&lt;path d="M0 -1 L25 100 L101 -1 Z"&gt;&lt;/path&gt;';
                      } else {
                          $candy .= '&lt;path d="M-1 -1 L50 99 L101 -1 Z"&gt;&lt;/path&gt;';
                      }
                  }
  
                  $candy .= '&lt;/svg&gt;';
                  $html = '&lt;div ' . FusionBuilder::attributes( 'section-separator-shortcode' ) . '&gt;' . $candy . '&lt;/div&gt;';
              } elseif ( 'slant' === $divider_type ) {
                  $candy = '&lt;svg class="slantCandy" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none" ' . FusionBuilder::attributes( 'section-separator-shortcode-divider-svg' ) . '&gt;';
  
                  if ( 'left' === $divider_position &amp;&amp; 'top' === $divider_candy ) {
                      $candy .= '&lt;path d="M100 -1 L100 100 L0 0 Z"&gt;&lt;/path&gt;';
                  } elseif ( 'right' === $divider_position &amp;&amp; 'top' === $divider_candy ) {
                      $candy .= '&lt;path d="M0 100 L0 -1 L100 0 Z"&gt;&lt;/path&gt;';
                  } elseif ( 'right' === $divider_position &amp;&amp; 'bottom' === $divider_candy ) {
                      $candy .= '&lt;path d="M100 0 L-2 100 L101 100 Z"&gt;&lt;/path&gt;';
                  } else {
                      $candy .= '&lt;path d="M0 0 L0 99 L100 99 Z"&gt;&lt;/path&gt;';
                  }
                  $candy .= '&lt;/svg&gt;';
                  $html = '&lt;div ' . FusionBuilder::attributes( 'section-separator-shortcode' ) . '&gt;' . $candy . '&lt;/div&gt;';
              } elseif ( 'rounded-split' === $divider_type ) {
                  $candy = sprintf( '&lt;div %s&gt;&lt;/div&gt;', FusionBuilder::attributes( 'section-separator-shortcode-divider-rounded-split' ) );
                  $html = '&lt;div ' . FusionBuilder::attributes( 'section-separator-shortcode' ) . '&gt;' . $candy . '&lt;/div&gt;';
              } elseif ( 'big-half-circle' === $divider_type ) {
                  $candy = '&lt;svg id="bigHalfCircleCandy" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" ' . FusionBuilder::attributes( 'section-separator-shortcode-divider-svg' ) . '&gt;';
  
                  if ( 'top' === $divider_candy ) {
                      $candy .= '&lt;path d="M0 100 C40 0 60 0 100 100 Z"&gt;&lt;/path&gt;';
                  } else {
                      $candy .= '&lt;path d="M0 0 C55 180 100 0 100 0 Z"&gt;&lt;/path&gt;';
                  }
  
                  $candy .= '&lt;/svg&gt;';
                  $html = '&lt;div ' . FusionBuilder::attributes( 'section-separator-shortcode' ) . '&gt;' . $candy . '&lt;/div&gt;';
              } elseif ( 'curved' === $divider_type ) {
                  $candy = '&lt;svg id="curvedCandy" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" ' . FusionBuilder::attributes( 'section-separator-shortcode-divider-svg' ) . '&gt;';
  
                  if ( 'left' === $divider_position ) {
                      if ( 'top' === $divider_candy ) {
                          $candy .= '&lt;path d="M0 100 C 20 0 50 0 100 100 Z"&gt;&lt;/path&gt;';
                      } else {
                          $candy .= '&lt;path d="M0 0 C 20 100 50 100 100 0 Z"&gt;&lt;/path&gt;';
                      }
                  } else {
                      if ( 'top' === $divider_candy ) {
                          $candy .= '&lt;path d="M0 100 C 60 0 75 0 100 100 Z"&gt;&lt;/path&gt;';
                      } else {
                          $candy .= '&lt;path d="M0 0 C 50 100 80 100 100 0 Z"&gt;&lt;/path&gt;';
                      }
                  }
  
                  $candy .= '&lt;/svg&gt;';
                  $html = '&lt;div ' . FusionBuilder::attributes( 'section-separator-shortcode' ) . '&gt;' . $candy . '&lt;/div&gt;';
              } elseif ( 'clouds' === $divider_type ) {
                  $candy = '&lt;svg id="cloudsCandy" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" ' . FusionBuilder::attributes( 'section-separator-shortcode-divider-svg' ) . '&gt;';
                  $candy .= '&lt;path d="M-5 100 Q 0 20 5 100 Z"&gt;&lt;/path&gt;
                              &lt;path d="M0 100 Q 5 0 10 100"&gt;&lt;/path&gt;
                              &lt;path d="M5 100 Q 10 30 15 100"&gt;&lt;/path&gt;
                              &lt;path d="M10 100 Q 15 10 20 100"&gt;&lt;/path&gt;
                              &lt;path d="M15 100 Q 20 30 25 100"&gt;&lt;/path&gt;
                              &lt;path d="M20 100 Q 25 -10 30 100"&gt;&lt;/path&gt;
                              &lt;path d="M25 100 Q 30 10 35 100"&gt;&lt;/path&gt;
                              &lt;path d="M30 100 Q 35 30 40 100"&gt;&lt;/path&gt;
                              &lt;path d="M35 100 Q 40 10 45 100"&gt;&lt;/path&gt;
                              &lt;path d="M40 100 Q 45 50 50 100"&gt;&lt;/path&gt;
                              &lt;path d="M45 100 Q 50 20 55 100"&gt;&lt;/path&gt;
                              &lt;path d="M50 100 Q 55 40 60 100"&gt;&lt;/path&gt;
                              &lt;path d="M55 100 Q 60 60 65 100"&gt;&lt;/path&gt;
                              &lt;path d="M60 100 Q 65 50 70 100"&gt;&lt;/path&gt;
                              &lt;path d="M65 100 Q 70 20 75 100"&gt;&lt;/path&gt;
                              &lt;path d="M70 100 Q 75 45 80 100"&gt;&lt;/path&gt;
                              &lt;path d="M75 100 Q 80 30 85 100"&gt;&lt;/path&gt;
                              &lt;path d="M80 100 Q 85 20 90 100"&gt;&lt;/path&gt;
                              &lt;path d="M85 100 Q 90 50 95 100"&gt;&lt;/path&gt;
                              &lt;path d="M90 100 Q 95 25 100 100"&gt;&lt;/path&gt;
                              &lt;path d="M95 100 Q 100 15 105 100 Z"&gt;&lt;/path&gt;';
                  $candy .= '&lt;/svg&gt;';
                  $html = '&lt;div ' . FusionBuilder::attributes( 'section-separator-shortcode' ) . '&gt;' . $candy . '&lt;/div&gt;';
              }
  
              return $html;
  
          }
  
          /**
           * Builds the attributes array.
           *
           * @access public
           * @since 1.0
           * @return array
           */
          public function attr() {
  
              global $fusion_settings;
  
              $attr = fusion_builder_visibility_atts(
                  $this-&gt;args['hide_on_mobile'], array(
                      'class' =&gt; 'fusion-section-separator section-separator',
                  )
              );
  
              $attr['style'] = '';
  
              if ( 'triangle' === $this-&gt;args['divider_type'] ) {
                  if ( $this-&gt;args['bordercolor'] ) {
                      if ( 'bottom' === $this-&gt;args['divider_candy'] ) {
                          $attr['style'] = 'border-bottom:' . $this-&gt;args['bordersize'] . ' solid ' . $this-&gt;args['bordercolor'] . ';';
  
                      } elseif ( 'top' === $this-&gt;args['divider_candy'] ) {
                          $attr['style'] = 'border-top:' . $this-&gt;args['bordersize'] . ' solid ' . $this-&gt;args['bordercolor'] . ';';
  
                      } elseif ( false !== strpos( $this-&gt;args['divider_candy'], 'top' ) &amp;&amp; false !== strpos( $this-&gt;args['divider_candy'], 'bottom' ) ) {
                          $attr['style'] = 'border:' . $this-&gt;args['bordersize'] . ' solid ' . $this-&gt;args['bordercolor'] . ';';
                      }
                  }
              } elseif ( 'bigtriangle' === $this-&gt;args['divider_type'] || 'slant' === $this-&gt;args['divider_type'] || 'big-half-circle' === $this-&gt;args['divider_type'] || 'clouds' === $this-&gt;args['divider_type'] || 'curved' === $this-&gt;args['divider_type'] ) {
                  $attr['style'] = 'padding:0;';
              }
  
              if ( 'rounded-split' === $this-&gt;args['divider_type'] ) {
                  $attr['class'] .= ' rounded-split-separator';
              }
  
              if ( $this-&gt;args['class'] ) {
                  $attr['class'] .= ' ' . $this-&gt;args['class'];
              }
  
              if ( $this-&gt;args['id'] ) {
                  $attr['id'] = $this-&gt;args['id'];
              }
  
              global $fusion_fwc_type, $fusion_col_type;
  
              if ( ! empty( $fusion_fwc_type ) ) {
                  $margin_left  = $fusion_fwc_type['padding']['left'];
                  $margin_right = $fusion_fwc_type['padding']['right'];
                  if ( isset( $fusion_col_type['type'] ) &amp;&amp; '1_1' !== $fusion_col_type['type'] ) {
                      $margin_left  = fusion_builder_single_dimension( $fusion_col_type['padding'], 'left' );
                      $margin_right = fusion_builder_single_dimension( $fusion_col_type['padding'], 'right' );
                  }
                  $margin_left_unitless  = (int) filter_var( $margin_left, FILTER_SANITIZE_NUMBER_FLOAT, FILTER_FLAG_ALLOW_FRACTION );
                  $margin_right_unitless = (int) filter_var( $margin_right, FILTER_SANITIZE_NUMBER_FLOAT, FILTER_FLAG_ALLOW_FRACTION );
  
                  $container_percentage  = 100 - $margin_left_unitless - $margin_right_unitless;
                  if ( false !== strpos( $margin_left, '%' ) ) {
                      $margin_left_unitless_scaled = $margin_left_unitless / $container_percentage * 100;
                  }
  
                  if ( false !== strpos( $margin_right, '%' ) ) {
                      $margin_right_unitless_scaled = $margin_right_unitless / $container_percentage * 100;
                  }
  
                  $viewport_width = '100vw';
  
                  if ( 'Boxed' === $fusion_settings-&gt;get( 'layout' ) ) {
                      $viewport_width = $fusion_settings-&gt;get( 'site_width' );
                  }
  
                  if ( 'Top' !== $fusion_settings-&gt;get( 'header_position' ) ) {
                      $viewport_width = $viewport_width . ' - ' . intval( $fusion_settings-&gt;get( 'side_header_width' ) ) . 'px';
                  }
  
                  // 100% width template &amp;&amp; non 100% interior width container.
                  if ( $fusion_fwc_type['width_100_percent'] &amp;&amp; 'contained' === $fusion_fwc_type['content'] &amp;&amp; ( isset( $fusion_col_type['type'] ) &amp;&amp; '1_1' === $fusion_col_type['type'] ) ) {
  
                      // Both container paddings use px.
                      if ( false !== strpos( $margin_left, 'px' ) &amp;&amp; false !== strpos( $margin_right, 'px' ) ) {
                          $margin_unit = 'px';
                          $margin_difference_half = abs( $margin_left_unitless - $margin_right_unitless ) / 2 . $margin_unit;
  
                          if ( 'Boxed' === $fusion_settings-&gt;get( 'layout' ) ) {
                              $margin_left_negative = '-' . $margin_left;
                              $margin_right_negative = '-' . $margin_right;
                          } else {
                              if ( $margin_left_unitless &gt; $margin_right_unitless ) {
                                  $margin_left  = '- ' . $margin_difference_half;
                                  $margin_right = '+ ' . $margin_difference_half;
                              } elseif ( $margin_left_unitless &lt; $margin_right_unitless ) {
                                  $margin_left  = '+ ' . $margin_difference_half;
                                  $margin_right = '- ' . $margin_difference_half;
                              } elseif ( $margin_left_unitless === $margin_right_unitless ) {
                                  $margin_left  = '';
                                  $margin_right = '';
                              }
  
                              $margin_left_negative = 'calc( (' . $viewport_width . ' - 100% ) / -2 ' . $margin_left . ' )';
                              $margin_right_negative = 'calc( (' . $viewport_width . ' - 100% ) / -2  ' . $margin_right . ' )';
                          }
                          $attr['class'] .= ' fusion-section-separator-with-offset';
  
                          // Both container paddings use %.
                      } elseif ( false !== strpos( $margin_left, '%' ) &amp;&amp; false !== strpos( $margin_right, '%' ) ) {
  
                          if ( 'Boxed' === $fusion_settings-&gt;get( 'layout' ) ) {
                              $margin_unit = '%';
  
                              $main_padding_unitless = filter_var( $fusion_settings-&gt;get( 'hundredp_padding' ), FILTER_SANITIZE_NUMBER_FLOAT, FILTER_FLAG_ALLOW_FRACTION );
                              $main_padding_unit = str_replace( $main_padding_unitless, '', $fusion_settings-&gt;get( 'hundredp_padding' ) );
  
                              $margin_left_negative  = 'calc( ( 100% - ' . ( 2 * $main_padding_unitless ) . $main_padding_unit . ' ) * ' . ( -1 / 100 ) * $margin_left_unitless_scaled . ' )';
                              $margin_right_negative = 'calc( ( 100% - ' . ( 2 * $main_padding_unitless ) . $main_padding_unit . ' ) * ' . ( -1 / 100) * $margin_right_unitless_scaled . ' )';
                          } else {
                              $margin_unit = 'vw';
                              $margin_sum  = ' - ' . ( $margin_left_unitless + $margin_right_unitless ) . $margin_unit;
  
                              $margin_left_negative  = 'calc( (' . $viewport_width . ' - 100% ' . $margin_sum . ') / -2 - ' . $margin_left_unitless . $margin_unit . ' )';
                              $margin_right_negative = 'calc( (' . $viewport_width . ' - 100% ' . $margin_sum . ') / -2  - ' . $margin_right_unitless . $margin_unit . ' )';
  
                              $attr['class'] .= ' fusion-section-separator-with-offset';
                          }
                      } else {
                          // Mixed container padding units.
                          $margin_left_final = $margin_left;
                          if ( false !== strpos( $margin_left, '%' ) &amp;&amp; 'Boxed' !== $fusion_settings-&gt;get( 'layout' ) ) {
                              $margin_left_final = $margin_left_unitless . 'vw';
                          }
  
                          $margin_right_final = $margin_right;
                          if ( false !== strpos( $margin_right, '%' ) &amp;&amp; 'Boxed' !== $fusion_settings-&gt;get( 'layout' ) ) {
                              $margin_right_final = $margin_right_unitless . 'vw';
                          }
  
                          $margin_left_negative  = 'calc( (' . $viewport_width . ' - 100% - ' . $margin_left . ' - ' . $margin_right . ') / -2 - ' . $margin_left_final . ' )';
                          $margin_right_negative = 'calc( (' . $viewport_width . ' - 100% - ' . $margin_left . ' - ' . $margin_right . ') / -2 - ' . $margin_right_final . ' )';
                      }
                  } else {
                      // Non 100% width template.
                      if ( false !== strpos( $margin_left, '%' ) ) {
                          $margin_left = $margin_left_unitless_scaled . '%';
                          if ( false !== strpos( $margin_right, '%' ) ) {
                              $margin_right = $margin_right_unitless_scaled . '%';
                          }
  
                          $margin_left_negative = 'calc( (100% + ' . $margin_left . ' + ' . $margin_right . ') * ' . $margin_left_unitless . ' / -100 )';
                      } else {
                          $margin_left_negative = '-' . $margin_left;
                      }
  
                      if ( false !== strpos( $margin_right, '%' ) ) {
                          $margin_right = $margin_right_unitless_scaled . '%';
                          if ( false !== strpos( $margin_left, '%' ) ) {
                              $margin_left = $margin_left_unitless_scaled . '%';
                          }
  
                          $margin_right_negative = 'calc( (100% + ' . $margin_left . ' + ' . $margin_right . ') * ' . $margin_right_unitless . ' / -100 )';
                      } else {
                          $margin_right_negative = '-' . $margin_right;
                      }
                  }
  
                  $attr['style'] .= 'margin-left:' . $margin_left_negative . ';';
                  $attr['style'] .= 'margin-right:' . $margin_right_negative . ';';
              }
  
              return $attr;
  
          }
  
          /**
           * Builds the rounded split attributes array.
           *
           * @access public
           * @since 1.0
           * @return array
           */
          public function divider_svg_attr() {
              $attr = array();
  
              if ( 'bigtriangle' === $this-&gt;args['divider_type'] || 'slant' === $this-&gt;args['divider_type'] || 'big-half-circle' === $this-&gt;args['divider_type'] || 'clouds' === $this-&gt;args['divider_type'] || 'curved' === $this-&gt;args['divider_type'] ) {
                  $attr['style'] = sprintf( 'fill:%s;padding:0;', $this-&gt;args['backgroundcolor'] );
              }
              if ( 'slant' === $this-&gt;args['divider_type'] &amp;&amp; 'bottom' === $this-&gt;args['divider_candy'] ) {
                  $attr['style'] = sprintf( 'fill:%s;padding:0;margin-bottom:-3px;display:block', $this-&gt;args['backgroundcolor'] );
              }
  
              return $attr;
          }
  
          /**
           * Builds the rounded split attributes array.
           *
           * @access public
           * @since 1.0
           * @return array
           */
          public function divider_rounded_split_attr() {
              return array(
                  'class' =&gt; 'rounded-split ' . $this-&gt;args['divider_candy'],
                  'style' =&gt; 'background-color:' . $this-&gt;args['backgroundcolor'] . ';',
              );
          }
  
          /**
           * Builds the icon attributes array.
           *
           * @access public
           * @since 1.0
           * @return array
           */
          public function icon_attr() {
  
              $attr = array(
                  'class' =&gt; 'section-separator-icon icon fa ' . FusionBuilder::font_awesome_name_handler( $this-&gt;args['icon'] ),
                  'style' =&gt; 'color:' . $this-&gt;args['icon_color'] . ';',
              );
  
              if ( FusionBuilder::strip_unit( $this-&gt;args['bordersize'] ) &gt; 1 ) {
                  $divider_candy = $this-&gt;args['divider_candy'];
                  if ( 'bottom' === $divider_candy ) {
                      $attr['style'] .= 'bottom:-' . ( FusionBuilder::strip_unit( $this-&gt;args['bordersize'] ) + 10 ) . 'px;top:auto;';
                  } elseif ( 'top' === $divider_candy ) {
                      $attr['style'] .= 'top:-' . ( FusionBuilder::strip_unit( $this-&gt;args['bordersize'] ) + 10 ) . 'px;';
                  }
              }
              return $attr;
  
          }
  
          /**
           * Builds the divider attributes array.
           *
           * @access public
           * @since 1.0
           * @param array $args The arguments array.
           * @return array
           */
          public function divider_candy_attr( $args ) {
  
              $attr = array(
                  'class' =&gt; 'divider-candy',
              );
  
              $divider_candy = ( $args ) ? $args['divider_candy'] : $this-&gt;args['divider_candy'];
  
              if ( 'bottom' === $divider_candy ) {
                  $attr['class'] .= ' bottom';
                  $attr['style'] = 'bottom:-' . ( FusionBuilder::strip_unit( $this-&gt;args['bordersize'] ) + 20 ) . 'px;border-bottom:1px solid ' . $this-&gt;args['bordercolor'] . ';border-left:1px solid ' . $this-&gt;args['bordercolor'] . ';';
              } elseif ( 'top' === $divider_candy ) {
                  $attr['class'] .= ' top';
                  $attr['style'] = 'top:-' . ( FusionBuilder::strip_unit( $this-&gt;args['bordersize'] ) + 20 ) . 'px;border-bottom:1px solid ' . $this-&gt;args['bordercolor'] . ';border-left:1px solid ' . $this-&gt;args['bordercolor'] . ';';
                  // Modern setup, that won't work in IE8.
              } elseif ( false !== strpos( $this-&gt;args['divider_candy'], 'top' ) &amp;&amp; false !== strpos( $this-&gt;args['divider_candy'], 'bottom' ) ) {
                  $attr['class'] .= ' both';
                  $attr['style'] = 'background-color:' . $this-&gt;args['backgroundcolor'] . ';border:1px solid ' . $this-&gt;args['bordercolor'] . ';';
              }
  
              return $attr;
  
          }
  
          /**
           * Builds the divider-arrow attributes array.
           *
           * @access public
           * @since 1.0
           * @param array $args The arguments array.
           * @return array
           */
          public function divider_candy_arrow_attr( $args ) {
  
              $attr = array(
                  'class' =&gt; 'divider-candy-arrow',
              );
  
              $divider_candy = ( $args ) ? $args['divider_candy'] : $this-&gt;args['divider_candy'];
  
              // For borders of size 1, we need to hide the border line on the arrow, thus we set it to 0.
              $arrow_position = FusionBuilder::strip_unit( $this-&gt;args['bordersize'] );
              if ( '1' == $arrow_position ) {
                  $arrow_position = 0;
              }
  
              if ( 'bottom' === $divider_candy ) {
                  $attr['class'] .= ' bottom';
                  $attr['style'] = 'top:' . $arrow_position . 'px;border-top-color: ' . $this-&gt;args['backgroundcolor'] . ';';
              } elseif ( 'top' === $divider_candy ) {
                  $attr['class'] .= ' top';
                  $attr['style'] = 'bottom:' . $arrow_position . 'px;border-bottom-color: ' . $this-&gt;args['backgroundcolor'] . ';';
              }
  
              return $attr;
  
          }
  
          /**
           * Adds settings to element options panel.
           *
           * @access public
           * @since 1.1
           * @return array $sections Section Separator settings.
           */
          public function add_options() {
  
              return array(
                  'section_separator_shortcode_section' =&gt; array(
                      'label'       =&gt; esc_html__( 'Section Separator Element', 'fusion-builder' ),
                      'description' =&gt; '',
                      'id'          =&gt; 'sectionseparator_shortcode_section',
                      'type'        =&gt; 'accordion',
                      'fields'      =&gt; array(
                          'section_sep_border_size' =&gt; array(
                              'label'       =&gt; esc_html__( 'Section Separator Border Size', 'fusion-builder' ),
                              'description' =&gt; esc_html__( 'Controls the border size of the section separator.', 'fusion-builder' ),
                              'id'          =&gt; 'section_sep_border_size',
                              'default'     =&gt; '1',
                              'type'        =&gt; 'slider',
                              'choices'     =&gt; array(
                                  'min'  =&gt; '0',
                                  'max'  =&gt; '50',
                                  'step' =&gt; '1',
                              ),
                          ),
                          'section_sep_bg' =&gt; array(
                              'label'       =&gt; esc_html__( 'Section Separator Background Color', 'fusion-builder' ),
                              'description' =&gt; esc_html__( 'Controls the background color of the section separator style.', 'fusion-builder' ),
                              'id'          =&gt; 'section_sep_bg',
                              'default'     =&gt; '#f6f6f6',
                              'type'        =&gt; 'color-alpha',
                          ),
                          'section_sep_border_color' =&gt; array(
                              'label'       =&gt; esc_html__( 'Section Separator Border Color', 'fusion-builder' ),
                              'description' =&gt; esc_html__( 'Controls the border color of the separator.', 'fusion-builder' ),
                              'id'          =&gt; 'section_sep_border_color',
                              'default'     =&gt; '#f6f6f6',
                              'type'        =&gt; 'color-alpha',
                          ),
                      ),
                  ),
              );
          }
      }
  }
  
  new FusionSC_SectionSeparator();
  
  }
  </code></pre>