Sections & Wraps – Betheme Support Center

Sections & Wraps

Sections and Wraps are the core building blocks in the Muffin Builder. With them, you can build any layout and make it look great with the built-in style options, image, and video backgrounds, parallax effects, etc.

Create a section

The first thing in the Muffin Builder you will have to add is a Section. Sections are the main elements that are used to insert wraps and shortcodes.

How to start building?

When you edit a page, post, or any other custom post type that supports the Muffin Builder, the first thing you will see will be the WordPress editor. After scrolling down, you will find the Muffin Builder. Let's start by adding the first section and editing the section options.

Section options

Background

  • Background | Color

    Select the background color for the section.

  • Background | Image

    Set a background image from the media library.

  • Background | Position

    Change the position of your background image. You can also choose the fixed position and the parallax effect from the list.

  • Background | Video

    Use your video file from the media library to set a background video for sections. The video playback is always muted and will not play on mobile devices. Most modern browsers support .mp4 file format, but we also added .ogv file type field.

Layout

  • Padding Top & Bottom

    Padding top and padding bottom values can be added to create space.

  • Padding Horizontal

    Set a side padding for your section. This works only if the section has the "full width" option enabled.

Options

  • Decoration SVG

    Select a decoration feature for the section. The list contains none, circle up, square up, triangle up, triple triangle up, circle down, square down, triangle down, and triple triangle down. Works only with background color selected above. Does not work with parallax and some section's styles.

    See how it looks
  • Decoration image

    This feature lets you set an image top and/or bottom for the current section. It will always be fixed to the bottom and/or top of the section. Remember to upload images at least 1920px wide for the best results. This image will always cover everything else in this section. It will be on top of the background and content.

  • Navigation

    This option will add arrows on the top and bottom of the section, which are clickable and after click will scroll to the section below or above. This is especially useful when building a one-page website.

Advanced

The section item in the Muffin Builder has many options that control not only the section itself but also impact the design and behavior of the items inside. Below you will find a list of styles for the section item with detailed descriptions.

  • Style
  • Columns | remove margin - removes all horizontal and / or vertical margins from the items items inside the section. This is perfect when you want to have two pictures next to each other or backgrounds that will touch and leave no space next to each other.
  • Dark - if you are using a dark background for your section and you want to make the items inside more visible, then this is a perfect solution. Change all the colors to white, not only in columns but in all Muffin Builder items.
  • Equal Height items in wrap - makes all of the items inside a single wrap to be equal in height. This works great when you have a couple of column items that vary in the amount of content, but you want the background to match.
  • Equal Height of wraps - makes all of the wraps inside a section to be equal in height. It is mostly used to position elements on top, middle, or bottom inside wraps.
  • Full Screen - the height of the section will adjust to the height of your viewport (browser height) - the content inside the section will be centered vertically.
  • Full Width - with this option, the content grid width is ignored, and the section becomes full width.
  • Full Width | except mobile - ignores the full width effect described above on mobile devices.
  • Highlight - adds the possibility to make either the left or right half of the section a solid color. You can still set a background image or video for the section but only one half will be visible. It is best to use two 1/2 wraps in one section. The color of the highlight can be set in theme options > colors > content.
  • Custom | Classes

    You can add a custom class. Multiple classes should be separated with the SPACE button.

  • Custom | ID

    You can add a custom ID. This is mostly used for one-page sites. Example: Your Custom ID is offer and you want to open this section, please use link: your-url/#offer

  • Responsive Visibility

    Choose on which device the section will appear. For example, you can hide a section on a mobile device, while showing another section instead of it - this section will be disabled on desktop.

  • You can choose from:
  • Hide on Desktop | 960px +
  • Hide on Tablet | 768px - 959px
  • Hide on Mobile | - 768px
  • Hide on Desktop & Tablet
  • Hide on Desktop & Mobile
  • Hide on Tablet & Mobile

Create a wrap

Wraps are inserted directly into Sections. From this point you can add all of the existing Muffin Builder items. Wraps also have a lot of styling options which we will cover below.

How to start building?

After creating a Section, you can add wraps to build your layout. Click the "add wrap" button to create one, then use the "+" and "-" icons to adjust the width of the wrap. You can also clone the wrap and use the wrap options to fine tune your design.

Wrap options

Background

  • Background | Color

    Select the background color for the wrap. You can also set an alpha value for transparency.

  • Background | Image

    Select the background image for the wrap.

  • Background | Position

    Change the position of your background image. You can also choose the fixed position and the parallax effect from the list.

  • Background | Size

    Choose the background size property. You can choose from: cover, contain, auto and cover for screens larger than 1920px

    • Layout

    • Move up

      Move this wrap to overflow on previous section. Does not work with parallax

    • Padding

      Use value with px or %. Example: 20px or 20px 10px 20px 10px or 20px 1%

    Items

    • Margin Bottom

      Set the margin bottom value for all inner items inside the wrap.

    • Vertical Align

      This option is for aligning wraps vertically. Please remember to first enable the option "equal height wraps" inside the section settings, otherwise this will not work.

    Advanced

    • Custom | Classes Add a custom class to the wrap. Multiple classes should be separated with SPACE
Try it now