Blog

Just Custom Fields

Alternate For ACF Flexible Content to Build Landing Pages

Nowadays, almost every site uses “Landing pages” – long scroll pages with an introduction of different sections, with big, nice and clean elements and illustrations. Usually, they have different grid elements, sliders, carousels, tiles, etc. Many developers use the paid version of the ACF plugin and Flexible Content field to do this. Our plugin doesn’t have any similar features and we do not plan on copying it from ACF. However, we want to share with you an alternate experience of building Landing pages that we usually use for our clients.

First of all, let’s check how to create a Landing page with ACF. Just to be able to compare this method with alternates after all.

Creating Landing Pages with ACF Flexible Content

Flexible Content allows us to create a certain similarity of a grid on the page. This includes lines and cells that need to be filled with data, such as text, pictures, video, and other things. Working with this field type is a bit complex. You will need to create/register all required fields, columns, and cells. Editing the content is not very clear to the final users at the end.  For example, to create a basic grid we will need:

  • To create the respective field with subfields. If there are many identical fields, then we receive a long strip of similar fields in a quite unreadable look. Besides, the multicolumn realization has a drawback — creating is done through lot of selects and conditional logic that is a pretty labor-intensive process with a high probability of mistakes.
    IMG_2016-09-22_095102-480x265 Alternate For ACF Flexible Content to Build Landing Pages
  • If your page has 3-5 different screens, that backend page becomes very hard to edit because of too many editable elements on the same page. After several scrolls, you will lose the block you’re actually editing.
    FireShot-Capture-007-Edit-Page-‹-Astor-Hotels-—-WordPress_-http___umi360.ekostyuk.dev4_.jc_ast Alternate For ACF Flexible Content to Build Landing Pages
  • The next stage is to write special templates to print all elements in the correct order for each layout and each field. The print process is not speed-balanced, you do a lot of similar operations and loops.
    IMG_2016-09-22_095103-640x540 Alternate For ACF Flexible Content to Build Landing Pages
  • At the end, we need to write HTML/CSS for new elements added inside each new project.

Apparently, from the aforesaid, the process of creating a simple grid through ACF and its Flexible Content component is pretty labor-consuming, bulky, and not intuitive for the developer and end-user with a high probability to make a mistake during creation.

ACF Alternate – Page Builder!

Fortunately, there is an opportunity to create a content grid for landing pages using the convenient interface. We recommend using Page Builder plugins. In the WordPress Plugins repository you can find 2 popular plugins. Famous Visual Composer (requires a paid licence) and an absolutely free plugin Page Builder (by SiteOrigin). Visual composer provides too many controls for the end user, so we recommend it only to developers and users with strong technical backgrounds.

On the other hand, SiteOrigin Page Builder is a nice looking, easy to use plugin. SO Page Builder allows you to create a grid directly in the main post editor. You can create rows, columns, and inserts standard WordPress widgets into them. Easy, isn’t it?

SO Page Builder looks like this:

IMG_2016-09-22_095106-2-640x402 Alternate For ACF Flexible Content to Build Landing Pages

The Basis of Page Builder structures are rows which can include various widgets. Widgets are added from the toolbar. A convenient feature of the plug-in is the mode of editing rows/widgets directly in the editor of the page (as told above, in ACF you need to configure layouts and fields separately). Row settings include columns quantity, columns widths, and also orientation of cells on the left, on the right, and vice versa. All parameters change in real time with visual effect.

Besides, there are flexible settings for row attributes and design options:

For content you can use, I recommend WordPress standard widgets (like Categories, Menus, Text box, Editor) and SiteOrigin widgets pack. Also any popular widget downloaded from WordPress repository works good with Page Builder. For example you can use NextGen gallery or Revolution slider or Contact Form 7 widgets to add content to your page. This is how the widgets screen looks like after the installation of the SO Page Builder:

Selection_019-480x196 Alternate For ACF Flexible Content to Build Landing Pages

One more good feature of this plugin is a lot of built-in hooks. You can extend the plugin and add your own features. For example, we use our own extension for all projects we build with the SO Page Builder. This extension adds some new features, which simplify row editing:

  • We hide difficult to use widgets, or widgets which can break the layout (which are not required by design)
  • We hide row styling options and add a new “Layout” option. This is a simple select box, where users can select the general look of their row. For example: Full width row, Carousel row (all widgets inside will be automatically converted to carousel) etc. Same Layout addon for widgets, for example, you can define default wrapper styles for some widgets.

     

  • Each theme we do just has special configurations of available layouts.
  • Also, we clean up generated HTML a bit to easily add responsive support from designs requirements.

 

To understand in more detail how to create a landing page with Page Builder, let’s create a homepage copy of our official site justcoded.com.

Landing Page Build Example

Before you start working with Page Builder you need to analyze your page and find rows and columns. After that, you need to find a widget which best suits every column.

For the justcoded.com homepage, the logical structure looks like this:

Just Alternate For ACF Flexible Content to Build Landing Pages

Now we can build our layout in Page Builder:

PB_example_sketch_backend-640x525 Alternate For ACF Flexible Content to Build Landing Pages

As you can see it’s very clear to understand the structure of the page and find the element you need to edit. Furthermore, this plugin has “live mode”, where you can see how the new page will look like without saving it every time and preview.

One more advantage of this plugin is that it saves all generated content inside the usual post content field and it allows WordPress to search this post or page with a typical search box and you never miss it in your search results.

Hope you like our way of building the Landing page and you will try it out on your next project!