FAQ's

11 FAQs

  • How to Move Content From Your Current WordPress Site to C4 Site Builder

    The Official WordPress Importer allows you to easily export content into another website using an XML file. It allows you to move:

    • Posts, pages and other custom post types
    • Comments
    • Custom fields and post meta
    • Categories, tags and terms from custom taxonomies
    • Authors


    N.B:
    We strongly recommend you to take a back up of the database and content of your current website so that you can restore it should something go wrong.

    Exporting Content From Your Current Website

    Go to your WordPress dashboard and select the Export item from the Tools section.

    Because you’re exporting everything, it’s easy: keep the All content option selected and hit Download Export File.

    An XML file will be created. Keep it in a safe place and go across to the installation to which you’re migrating.

    The WordPress Export Page

    Alternatively, you can choose to only export posts or pages. You can filter what is exported and only export content from particular categories, authors, date range and publication status.

    You can filter what posts and pages you want to export.

    Save the file to your computer.

    N.B: When exporting images or files from your media library we highly recommend doing an export for each month of the year individually, rather then the entire media library in one export file

    Importing Content To C4 Site Builder From Another Website

    On your new C4 Site Builder website, go once again to Tools, but this time select Import.

    You will be shown a list of importers, from which you should select the WordPress option.

    Click Install Now and wait for the importer plugin to download and install.

    If it all works, you can click Activate Plugin & Run Importer on the next screen.

    At this point, you’re all ready to import and the XML file you generated earlier comes into play.

    Upload Your Import File

    You will then be given the option to assign imported authors to existing authors on your website. This is useful if the same authors exist in both websites. Alternatively, you can create a new account for each author’s posts.

    This page also has an option for downloading attachments. When you select this, WordPress will attempt to import all of the images that are attached to the posts and pages you are importing.

    Assign imported authors to existing authors.

    Assign imported authors to existing authors.

    That’s all there is to it. Your content will now be imported into your website. You can verify this by checking your posts and pages.

    All information will be identical to what it was before. Therefore, posts and pages will have the same publication date and be assigned to the same categories.

    N.B: If you have any images or files to move to the new site, make absolutely sure that you tick Download and import file attachments – it’s not selected by default.

    Hit the Submit button and you’re done!

    The page may take a little longer than usual to load because it’s creating all the new rows on the database, but it will get through it. Just wait patiently for it to be processed and all of your content should be imported onto the new site ready for its life there.

    Congratulations - You have imported all content into your new website.

    Congratulations – You have imported all content into your new website.


    N.B:
    Whilst the WordPress importer can be used to migrate all content from one website to another, it is not an ideal solution for transferring a full website to another location as website settings are not transferred - Site Title and Tagline

  • Overview of Settings > C4 Page Builder

    The Page Builder Settings panel has a number of tabs, and we'll go through each one. Follow the links for more information about when you'd want to use these settings.

    Modules tab

    By default, all of the built-in modules are enabled, but you can disable specific ones. For example, you might want to eliminate modules you know you'll never use.

    Post Types tab

    By default, Page Builder is only enabled for Pages. You can enable it to insert layouts into the content areas of single Posts. If you have WooCommerce plugin installed, you'll see a Products post type, and if you have other custom post types, they'll appear here also.

    Note: Page Builder applies to layouts in the content area of your page or post. Standard headers, footers, and sidebars are controlled by your theme.

    Templates tab

    When you open a new page in Page Builder, you choose a layout template – a blank template if you want to start designing your layout from scratch. There are a number of built-in templates, or you can choose templates that you've created and saved. The Templates tab lets you choose whether to display or hide the standard layout templates, your custom layout templates, both or neither. If you have the Agency version, you can replace built-in templates with your own set, making it easier to provide your clients with your own custom solution.

    User access tab

    You can enable or restrict access to various areas of the Beaver Builder user interface for each of the four WordPress user roles independently: Administrator, Editor, Author, or Contributor. For more information, see the article on  granting user access.

    Note: This tab replaces the Editing tab in Version 1.9 and earlier, which is described below.

    Icons tab

    Page Builder comes with the Font Awesome, Foundation, and WordPress Dashicons icon sets. You can also add your own icon sets through this UI, by helping you upload custom sets from Fontello or IcoMoon to your Media Library.

    Tools tab

    The Tools tab has a Cache section, a Debug mode section, and an Uninstall section.

    Clear cache

    A CSS and JavaScript file is dynamically generated and cached each time you create a new layout. Sometimes the cache needs to be refreshed, such as when you migrate your site to another server or update to the latest version of the plugin. "Clear your cache" is often the first step in troubleshooting layout problems that suddenly appear.

  • Start C4 Page Builder

    In order to start building layouts, open any of your pages in the Pages section of your website Dashboard. Within each page, click the Page Builder tab to launch C4 Page Builder.

    Start Page Builder for a new page

    When you create a new page, start Page Builder from the Add New Page or Edit Page screen.

    Click the Page Builder tab to the right of the Text Editor tab, as shown in the following screenshot.

    Start Page Builder from the Admin bar.

    After you have saved a page that was built with Page Builder, you can click  Page Builder in the WordPress admin bar to open the page for editing with Page Builder.

    [IMAGE]

    If you don't see the top admin bar, it means you are not logged into your website. If you don't see C4 Page Builder in the top admin bar, it means that the page you are viewing was not built with C4 Page Builder.

  • Responsive Behavior In C4 Site Builder

    All C4 Site Builder layouts are responsive, meaning they automatically adjust for various screen sizes. By default, layouts are responsive in the following ways:

    • Device size
      Beaver Builder has three device sizes built in: large (typically desktop and laptop displays), medium (tablets) and small (smartphones).
    • Breakpoints
      Breakpoints define the browser width at which the settings for each device size apply. By default the medium device breakpoint is 992px and the small device breakpoint is 768px. These values can be customized.
    • Stacking
      Stacking determines how rows, columns, and modules are ordered as the width of the display decreases. You can control column stacking by setting custom column widths for each device size, or you can disable column stacking.
    • Spacing
      Margins and padding for rows, columns, and modules are automatically adjusted with the Page Builder autospacing feature. For fine tuning, you can adjust margins and padding for each device size to override autospacing, or you can disable autospacing entirely.
    • Visibility 
      By default, all modules are visible at every device size, but you can hide modules on particular device sizes.

    Finally, although we don't recommend it, you can disable responsive behavior site-wide.

  • Generated WordPress Archives versus C4 Page Builder Layouts

    To display lists of your Posts, you can use generated WordPress index or archive pages, any of the Posts modules in Page Builder, or both.

    Generated WordPress index and archive pages

    In a typical WordPress blog, index or archive pages are generated by WordPress in a location that you specify in Customize > Settings > Your latest posts.

    Here's an example of the Posts listed on a generated WordPress index page. In the following screenshot, the first two Posts do not use Page Builder, but the third Post does. All three Posts have a featured image, which is displayed in the index. Note that WordPress only pulls the text, not images or other objects, from the content area of a Post.

    Note: Because index and archive pages are generated at runtime, you cannot edit them directly or apply C4 Page Builder layouts.

    Posts modules in C4 Page Builder layouts

    Instead of or in addition to generated index or archive pages, you can create Pages and use C4 Page Builder Posts modules to display Posts. The Posts modules give you a wide range of choices about which Posts to display, how to order the display (for example, by date, author, or category), and what to include in each listing (for example, with or without the content excerpt). You can also display the list as a grid, a slider, or a carousel, with several variations.

    The following screenshot shows a list of C4Page Builder and non-Page Builder posts in a Posts module with a grid layout.

    You could use this page as a more attractive substitute for a generated WordPress index page, or you could add a Posts module to a page containing other content. For example, your home page might contain a row displaying the most recent Posts or custom post types, but you could also have a blog set up elsewhere on your site that has a generated WordPress archive page.

    Tips:

    • While you can use a Page with a Posts module to replace a generated WordPress index or archive page, you can't put a Posts module on a generated page itself, because the pages are dynamically generated.
    • Don't forget that you can also save a Posts module and use it in shortcode in widgets or in non-Page builder areas of your site. Here's an example where the shortcode for a Posts grid module was inserted into the footer widget layout.

  • Save your C4 Page Builder edits

    When you're done editing a page, click Done in the upper right corner and select one of the following:

    • Publish changes
      Takes the changes live, accessible to the world at large if you're working on a public site.
    • Save changes and exit
      Saves your page and exits Page Builder. The changes made in that editing session are not visible except when editing in C4 Page Builder.

      • Warning: Be very careful about this choice. If you choose Save changes and exit and open your page again for editing, then choose Discard changes and exit for that session, you will lose any work in previous sessions for which you chose Save changes and exit. See some suggested alternatives in the next section.
    • Discard changes and exit
      Discards changes made in that editing session and any saved but unpublished work from previous sessions and exits C4 Page Builder.
    • Cancel
      Returns you to the editing page.

    Alternative ways to save changes but hide from public view

    Choosing Save changes and exit creates a risk of losing your work if you ever choose Discard changes and exit in a future editing session before the page is published. If you are planning to keep changes to a page from public view over an extended number of editing sessions, you might consider some alternatives:

    • If there are only a couple rows, columns, or modules that you want to hide, you could set the row, column, or module's Visibility on the Advanced tab to Logged in users only or Never, then choose Publish changes. This has the same effect of hiding the row, column, or module from public view but displaying it in the C4 Page Builder editor.
    • If you want to prevent an entire page from being viewed you could set the page to Draft in the C4 Site Builder  editor or password-protect the page.
    • If you are making changes site-wide that you don't want to be public until they are complete, consider creating a staging copy of your site in another location.
  • Overview of full-width and boxed pages and rows

    C4 Theme has settings in Customize > General for both page layout (full width, boxed) and Content width, which controls the width of the content in the header and footer. In the content area of the page, C4 Page Builder has both Global Settings and individual row settings for the width of the row's background and content. Here's how they all work together.

    Boxed page layout example

    Here's a diagram showing a boxed page layout, with various combinations of row settings.

    A boxed layout means that the web page appears in a box in the browser, with space appearing around the box as your browser screen is sized larger than the box size. The box border is shown with a brown line in the following diagram:

    Boxed page layout

    The theme sets the page layout and header/footer width

    The boxed layout is set in the C4 Theme's General Layout settings: in this example, Width = Boxed and Content width = 960 px. This sets the width of the header and footer content (in this example, the two columns in the top bar) at 960px. You don't have to enter the width of the box – it's automatically calculated by adding 80 px to the content width, which produces a buffer between the header/footer content and the box on both sides as the screen is resized.

    C4 Page Builder sets the row width

    This example shows three different combinations of row and content width, set for each row in the layout.

    • In the first row, Row width is set to Full width. With a boxed layout, this means the row background stretches the full width of the box (not the full width of the browser).
      Row content width is also set to Full width, which means the content also stretches the full width of the box, or less depending on the margins and padding you set for the row.
      Both of these default settings are inherited from Tools > Global Settings, or you can change them for the individual row.
    • In the second row, Row width is set to Full width.
      Row content width is set to Fixed.
      Max width of the fixed row content is set at 600 px. This setting comes from Tools > Global Settings and can't be changed in individual row settings.
    • In the third row, Row width is set to Fixed. This means the row background will only stretch to the Max Width specified in Tools > Global Settings.
      Row content width is also set to Fixed, which means row content also has a max width of 600, or less depending on  margins for the content.
      Max width is set at 600 px. This setting comes from Tools > Global Settings. The default max width is 1100 px.

    Full-width page layout example

    Here's a diagram showing a full-width page layout with various combinations of row and row content settings. A full-width layout means there is no box, and the content is free to stretch from side to side to the edge of the browser window.

    Full-width page layout

    Theme Settings

    The full-width layout is set in the C4 Theme's  General Layout settings: in this example, Width = Full Width and Content width = 960 px. This means that the width of the header and footer content is 960 px, but the header and footer backgrounds stretch to the edges of the browser window.

    C4 Page Builder Settings

    The row and row content widths are set in the C4 Page Builder Global Settings. When rows are set to full width, then content within the row can be set to either full or fixed width. The fixed width of the row is set by the max-width setting in the C4 Page Builder Global Settings. In this example, the row is set to full width and the max width is set to 600 px. With a full-width page layout, the row background extends all the way to the edge of the browser screen.

    This example shows three different combinations of row and content width in a full-width page layout.

    • In the first row, Row width is set to Full width. With a full-width page layout, this means the row background stretches the full width of the browser.
      Row content width is also set to Full width, which means the row content also stretches the full width of the browser, or less depending on the margins and padding you set for the row.
      Both of these default settings are inherited from Tools > Global Settings, or you can change them for the individual row.
    • In the second row, Row width is set to Full width, so the row background extends the full width of the browser.
      Row content width is set to Fixed.
      Max width of the fixed row content is set at 600 px. This setting comes from Tools > Global Settings and can't be changed in individual row settings.
    • In the third row, Row width is set to Fixed. This means the row background will only stretch to the Max Width specified in Tools > Global Settings.
      Row content width is also set to Fixed, which means row content also has a max width of 600, or less depending on  margins for the content.
      Max width is set at 600 px. This setting comes from Tools > Global Settings. The default max width is 1100 px.
  • C4 Theme Customizer settings mapped to CSS

    The following diagram of a boxed layout shows each of the C4 Theme's header, content, footer, and page areas mapped to Customizer setting and CSS class.

    Note: This diagram also applies to full-width layout, but the page background color (set at General > Background) will only appear in a thin band at the bottom of the browser page under certain viewing conditions.

    • The top bar background and text colors can be set at Customize > Header > Top bar style, which translates to the CSS class .fl-page-bar.
    • The header background and text colors can be set at Customize > Header > Header style, which translates to the CSS class .fl-page-header.
    • If you choose a Preset layout whose nav bar is a different color from the header, you can customize the nav bar at Customize > Header > Nav style, or you can write a CSS rule for the class .fl-page-nav-wrap.
    • The background for the content area is set at Customize > Content > Content background and translates to the CSS class .fl-page-content.
    • The footer widget background and text colors can be set at Customize > Footer > Footer widgets style, which translates to the CSS class .fl-page-footer-widgets.
    • The footer background and text colors can be set at Customize > Footer > Footer style, which translates to .fl-page-footer.
    • The page background color, which displayed outside the box, is set at Customize > General > Background. This background color is set on the <body> tag.

    Note: The Additional CSS tab contents are theme-specific. If you activate a different theme, the CSS rules will disappear from the Additional CSS tab, but they'll reappear if you reactivate the theme in which you added the rules. If you have CSS rules in Additional CSS that you want to migrate to a new theme, copy the rules manually.

  • C4 Theme CSS Reference

    CSS namespace

    If you look at C4 Site Builder HTML outputs, you see a lot of class names that start with fl-. That is our namespace and helps us to avoid styling conflicts with plugins that you may have installed. When you see that namespace on an element you are styling, you know that it’s part of the C4 theme or C4 Page Builder.

    Page elements

    Here are the elements that make up the shell of the website:

    Page Wrapper .fl-page
    Top Bar .fl-page-bar
    Fixed Header .fl-page-header.fl-page-header-fixed
    Header .fl-page-header.fl-page-header-primary
    Content Area .fl-page-content
    Footer Widgets .fl-page-footer-widgets
    Footer .fl-page-footer

    Here are the three navigation positions you can choose from in the theme settings:

    Right Nav .fl-page-nav-right .fl-page-nav
    Bottom Nav .fl-page-nav-bottom .fl-page-nav
    Centered Nav .fl-page-nav-center .fl-page-nav

  • Shortcodes Reference

    The C4 Site Builder shortcode is really easy to use to add content to your layouts. This reference shows the syntax of the shortcode, including examples with attributes.

    C4 Site Builder shortcode syntax

    [fl_ builder_insert_layout]

    Inserts a C4 Site Builder layout into any post, page, or custom post type.  This shortcode requires either the slug or the ID of your page.

    Here's an example of a shortcode with a slug - [fl_ builder_insert_layout slug="my-post-slug"]

    If you have more than one post type with the same slug, you can specify the type to show only that post, as in this example - [fl_ builder_insert_layout slug="my-post-slug" type="fl-builder-template"]

    Here's an example of a shortcode with an ID - [fl_ builder_insert_layout id="123"]

    Enter a comma-separated list of IDs to insert multiple layouts - [fl_ builder_insert_layout id="123,456,789"]

    You can enter the ID of a site on a multisite network to pull the layout from - [fl_ builder_insert_layout id="123" site="5"]

  • How to Map Your Own Domain to Your C4 Site Builder Website

    Go to your WordPress dashboard and select the Domain Mapping item from the Settings section.

    You should see an option to enter in your own domain name.

    Enter your domain name into the box and click the Map Domain button

    Domain Mapping

    There is a dropdown menu option to select http:// or https://

    NOTE: We highly recommend selecting https:// to enable a secure security certificate for your domain name.

    Change Your DNS Records with Your Webhost


    AfriHost:

    Step 1: Login to your AfriHost ClientZone: https://clientzone.afrihost.com/

    Step 2: Find the domain name you would like to map to your C4 Site Builder site and select it. (In order to map a domain name it has to be parked or alternatively already have an active hosting plan with your web host)

    Step 3: Select "Hosting Settings"

    Step 4: Select "DNS Editor"

    You should then see a screen like this...
    AfriHost DNS Settings

    Step 5: You will need to edit the following two DNS records and change the i.p address to 129.232.136.219
    1. yourdomain.com
    2. www.yourdomain.com

    Hetzner:

    Step 1: Login to your Hetzner KonsoleH: https://myaccount.hetzner.co.za/

    Step 2: Find the domain name you would like to map to your C4 Site Builder site and select it.

    Step 3: Select "Manage Services" from the left hand menu

    Step 4: Select "Manage DNS"

    You should then see a screen like this...
    Hetzner DNS Settings

    Step 5: You will need to edit the following two DNS records and change the i.p address to 129.232.136.219
    1. @
    2. www

    Your domain mapping is now complete.

    N.B: It can take anything form 24 - 48hrs for the domain mapping to complete.