CodibuBuilder Blocks - CODIBU https://help.codibu.com Hosting & Domain, Development & Design, SEO & Marketing, 2300+ Themes & Plugins, Free SEO analysis & tools Thu, 06 Oct 2022 19:49:23 +0000 en-US hourly 1 https://help.codibu.com/wp-content/uploads/2022/07/favicon.png CodibuBuilder Blocks - CODIBU https://help.codibu.com 32 32 Sections & Wraps https://help.codibu.com/blog/sections-wraps/?utm_source=rss&utm_medium=rss&utm_campaign=sections-wraps https://help.codibu.com/blog/sections-wraps/#respond Wed, 17 Aug 2022 21:48:17 +0000 https://help.codibu.com/?post_type=kb&p=903

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

The post Sections & Wraps first appeared on CODIBU.

]]> https://help.codibu.com/blog/sections-wraps/feed/ 0 Revisions & Backups https://help.codibu.com/blog/revisions-backups-2/?utm_source=rss&utm_medium=rss&utm_campaign=revisions-backups-2 https://help.codibu.com/blog/revisions-backups-2/#respond Wed, 17 Aug 2022 21:48:13 +0000 https://help.codibu.com/?post_type=kb&p=893

Revisions & Backups

 

 

revisions and backups

 

For even greater security and simplicity of backup management, Revisions have been divided into four different types, and each store five backups in total:

  • Autosave, these are saved automatically every 5 minutes
  • Update, these are saved after every post Update
  • Revisions, these are saved only if you click on the Save revision button so basically, it’s up to you if there would be any revision
  • Backup, these are Backups created before restoring of any revision

The post Revisions & Backups first appeared on CODIBU.

]]> https://help.codibu.com/blog/revisions-backups-2/feed/ 0 Pre-built sections https://help.codibu.com/blog/pre-built-sections-2/?utm_source=rss&utm_medium=rss&utm_campaign=pre-built-sections-2 https://help.codibu.com/blog/pre-built-sections-2/#respond Wed, 17 Aug 2022 21:48:09 +0000 https://help.codibu.com/?post_type=kb&p=892

Pre-built sections

 

 

pre-built sections

 

What are pre-built sections?

These are predefined blocks that can be inserted anywhere on the page with a click. These blocks are filled with sample texts and pictures, which you just need to replace with yours to achieve the desired result in no time.

A constantly growing library of pre-defined sections will mean that you will never have to think about what a given section should look like. This feature allows users to create whole pages with just a couple of clicks! We will be adding more of them in the future to make your building process faster and more straightforward.

The post Pre-built sections first appeared on CODIBU.

]]> https://help.codibu.com/blog/pre-built-sections-2/feed/ 0 How to use https://help.codibu.com/blog/how-to-use/?utm_source=rss&utm_medium=rss&utm_campaign=how-to-use https://help.codibu.com/blog/how-to-use/#respond Wed, 17 Aug 2022 21:43:54 +0000 https://help.codibu.com/?post_type=kb&p=891

How to use

This chapter will focus on building the content using Wraps and Elements.

Let’s start with what the Wrap is. It’s a block where we can add elements. You can choose from included wrap layouts or create your own. The wrap options bar is grey color and each has the following options (starting from the left):

 

 

wrap options

 
  • + & – these icons let you increase or decrease the size of the current wrap
  • 1/1 this is the size of the actual wrap
  • +Item by clicking, the popup with all available elements will appear
  • The pencil icon, when clicked, will open a window with all options available for that specific wrap. You can also double-click on the wrap to perform the edit action
  • The clone icon, when clicked it will close that specific wrap
  • The trash icon, when clicked, will remove that specific wrap
Let’s finally move to adding and editing elements. They can be added inside Wraps only, and you can add as many as you like in a single wrap. The element options bar is always blue in color and has similar options to Wrap.
element options
  • + & – these icons let you increase or decrease the size of the element
  • 1/1 this is the size of the actual wrap
  • The pencil icon, when clicked, will open a window with all options available for that specific element. You can also double-click on the element to perform the edit action
  • The clone icon, when clicked will close that specific element
  • The trash icon, when clicked, will remove that specific element

The post How to use first appeared on CODIBU.

]]> https://help.codibu.com/blog/how-to-use/feed/ 0 An overview https://help.codibu.com/blog/an-overview/?utm_source=rss&utm_medium=rss&utm_campaign=an-overview https://help.codibu.com/blog/an-overview/#respond Wed, 17 Aug 2022 21:43:33 +0000 https://help.codibu.com/?post_type=kb&p=890

An overview

Let’s take a closer look at the Codibu Builder, and its options and discuss them one by one. At first, glance, let’s look at the main bar on the right.

 

 

muffin builder an overview

 
  1. Pre-built sections – here, plenty of prebuilt blocks are ready to use on click. Blocks have been divided into groups so that finding the right one is as easy as possible.
  2. Revisions – 4 types of revision are available for even greater security
  3. Import / Export – here, you can import or export the content, import page templates you have created before, or generate additional content for SEO purposes and plugins like Yoast
  4. Preview – works similarly to default WP preview but for Codibu Builder content that has not been saved or published
  5. Settings – a particularly useful option for those who want to control the general look of Codibu Builder
Let’s move on to the next step. Here, we will deal with the green stripe that is located at the very top of each section.

 

 

section green bar

 

Starting from the left side, we’ve got two buttons:

  • +WRAP – this button will add WRAP to the section
  • +DIVIDER – this one adds a DIVIDER between rows

Then, right in the middle, we have a green + button on both the top and bottom of the section. These buttons sequentially add a section before and after the section, we are currently working on.

Then, on the left side, we have another five buttons. Starting from the left:

  • The Information icon hovering over it will show all the main options set for that specific section, like background image, color, position, padding, etc…
  • The pencil icon, when clicked, will open a window with all options available for the section
  • The clone icon, when clicked, will close that specific section
  • The trash icon, when clicked, will remove that specific section
  • The Three dots icon, hovering over it, will show all the actions and activities for sections like Hide section, collapse, move up, move down, or copy & paste

The post An overview first appeared on CODIBU.

]]> https://help.codibu.com/blog/an-overview/feed/ 0