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