Create “alternative/zebra” boxes in the content area?

If you’re looking to duplicate the shortcode method mentioned in your question, you could do something like this. Either of the following two options can be added to your themes functions.php file.

Basic “Box”

// Add Box Shortcode
function wpse_168480_box_shortcode( $atts , $content = null ) {
    return '<div class="myBox">'.$content.'</div>';
}
add_shortcode( 'box', 'wpse_168480_box_shortcode' );

In your stylesheet, add whatever styles you see fix for the “myBox” selector class (or just replace class="myBox" with inline styles if you prefer. For example: style="background: #EEEEEE;"

To mimic the style you show above:

.myBox {
    background: #EEEEEE;
    border-top: 1px solid #CBCBCB;
    border-bottom: 1px solid #CBCBCB;
    padding: 20px;
    width: 100%;
}

From here you’d simply wrap your content in the box shortcode, for example:

[box]Your Content Here[/box]

Advanced “Box”

You could get a little more fancy with it, and pass specific colors to it via attributes.

// Add Advanced Box Shortcode
function wpse_168480_advanced_box_shortcode( $atts , $content = null ) {

    // Attributes
    extract( shortcode_atts(
        array(
            'color' => '#EEEEEE',
            'borderColor' => '#CBCBCB'
        ), $atts )
    );

    $styles="padding: 20px;";
    $styles .= 'width:100%;';
    $styles .= 'background: '.$atts['color'].';';
    $styles .= 'border-top:1px solid '.$atts['borderColor'].';';
    $styles .= 'border-bottom:1px solid '.$atts['borderColor'].';';

    return '<div styles="'.$styles.'">'.$content.'</div>';

}
add_shortcode( 'advanced_box', 'wpse_168480_advanced_box_shortcode' );

Fromhere you’d wrap your content in the advanced_box shortcode, along with the hex colors you’d like to use. If you do not enter any attributes, it will default to the colors specified in the function above. For example:

[advanced_box color="#f1f1f1" borderColor="#000000"]Your Content Here[/advanced_box]