Sections & Wraps

You are here:
In this article

Sections & Wraps

Sections and Wraps are the core building blocks in the Codibu 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 Codibu 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 Codibu Builder, the first thing you will see will be the WordPress editor. After scrolling down, you will find the Codibu Builder. Let’s start by adding the first section and editing the section options.

Section options

Background

  • Background | ColorSelect the background color for the section.
  • Background | ImageSet a background image from the media library.
  • Background | PositionChange the position of your background image. You can also choose the fixed position and the parallax effect from the list.
  • Background | VideoUse 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 the .mp4 file format, but we added a .ogv file type field.

Layout

  • Padding Top & BottomPadding top and padding bottom values can be added to create space.
  • Padding HorizontalSet a side padding for your section. This works only if the section has the “full width” option enabled.

Options

  • Decoration SVGSelect 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 the background color selected above. Does not work with parallax and some section styles.
  • The decoration imageThis feature lets you set an image top and/or bottom for the current section. It will always be fixed to the section’s bottom and/or top. 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.
  • NavigationThis option will add arrows on the top and bottom of the section, which is 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 Codibu Builder has many options that control the section itself and 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 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 use a dark background for your section and want to make the items inside more visible, this is a perfect solution. Change all the colors to white, not only in columns but in all Codibu Builder items.
  • Equal Height items in a wrap – all items inside a single wrap equal 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 equal 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 – the possibility of making 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 | ClassesYou can add a custom class. Multiple classes should be separated with the SPACE button.
  • Custom | you can add a custom ID. This is mostly used for one-page sites. Example: Your Custom ID is offered, and you want to open this section, please use the link: your-URL/#offer
  • Responsive VisibilityChoose 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 the 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. You can add all of the existing Codibu Builder items from this point. 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 | ColorSelect the background color for the wrap. You can also set an alpha value for transparency.
    • Background | ImageSelect the background image for the wrap.
    • Background | PositionChange the position of your background image. You can also choose the fixed position and the parallax effect from the list.
    • Background | SizeChoose the background-size property. You can choose from: cover, contain, auto, and cover for screens larger than 1920px

Layout

      • Move upMove this wrap to overflow on the previous section. It does not work with parallax
      • PaddingUse value with px or %. Example: 20px or 20px 10px 20px 10px or 20px 1%

Items

      • Margin BottomSet the margin-bottom value for all inner items inside the wrap.
      • Vertical AlignThis option is for aligning wraps vertically. Please remember first to 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
Was this article helpful?
Dislike 0
Views: 15