The New Page Editor

One of the biggest overhauls of VB Media Version 3, is the page editor.

The very first version of VB Media had very little capability of page editing. I think we had a text editor and that was probably it (it was THAT long ago I can’t fully recall).

When we built Version 2, we upgraded. We split the page into four sections and each section could contain up to four content blocks. It was an improvement upon what was there previously, but as requirements grew, the content blocks have become quite restrictive.

Version 3 is a vast improvement! We have stuck with the content block approach but this time there are no restrictions as to how many content blocks you can have. The types of content blocks available has increased as well.

You will now have the following sections available…

• Blog Posts - show a selection of overviews for blog posts
• Call To Action - a banner which you can use to guide users to a particular page
• Gallery - a group of images which are clickable
• Gap - quite simply, er, a gap
• Headings (Basic) - simple H1, H2 or H3
• Headings (Advanced) - a ‘fancier’ approach which will allow you to add a background image
• Pricing Tables - for those that have a product or service that needs a comparison
• Products & Categories - import the ‘mini-details’ of products or categories so you can group them together for pages like the homepage, where you may need a list of your ‘best sellers’, for example
• Sliders - a simple slider for ‘sliding’ through images, ideal for advertising select products to your visitors
• Team Members - ideal for a ‘Meet the Team’ style page
• Testimonials - show your visitors what past customers have to say about you
• Text - a standard text editor combined with HTML editor which should cover most needs

Each of these come with an array of settings which are unique to each section, giving you a huge amount of customisability for each section. Because of this we have provided a selection of ‘pre-designs’ (where applicable) to give you a starting point as well as see what can be done with each section.

Adding sections is going to be a frequent event whenever you are creating your own pages, so we thought you may need numerous ways to do it.

Firstly, we have added a big green button in the top left of the editor, which will then show you a list of all the sections available and then, when clicked, the pre-designs. Clicking a pre-design will then add this section to the bottom of your page.

If you don’t want the section to be added to the bottom, you can hover over any existing section and click the ‘Add Section Above’ or ‘Add Section Below’ buttons to add the section exactly where you want it.

Don’t worry if you add a section in the wrong place, you can simply drag and drop sections to reorder the page layout.

The page layout shows the stack of sections added to make up your page, sandwiched between the Header and Footer.

This is to give you a visual overview of the sections as well as being clickable to edit each section. 

There are two ways to edit a section, you can either click the section you want to edit in the Page Layout. Alternatively, if you hover over a section, the section will form an outline and various options will be available in the top left corner. Here you can simply click the ‘Edit Section’ button to, you guessed it, edit the section - we have tried to keep things this easy to understand as it saves time all round.

Once clicked the Page Layout will be replaced by settings for the section you are editing. Once finished you can hover over and edit the next section or click the back arrow next to the section settings header to show the Page Layout.

Each section type comes with its own bundle of settings to tweak and experiment with. Because of the (in some cases) large number of settings available to a section we have added them to expandable groups so they do not swamp the page causing needless scrolling.

Some settings are common across sections, such as Background Colour or Padding. Others, however, are completely unique to that particular section, such as Hide Blurb on Blog Articles or Autoplay Slider for the, you guessed it, Slider.

Because each section utilises the same base HTML, it is the combination of these settings that are adjusted to make them unique across sites. It is also these that are pre-set when adding a pre-designed section.

Some sections have child items, such as the Gallery or Team Members. Sections will come with a few already added, which you can edit or remove as you like.

Sections which cater for child elements will have an additional button next to the ‘Edit Section’ button. This will be clearly labelled, such as ‘Add Image’ for the Gallery.

We have added a handy little feature so that you can see how each page will look at different screen sizes. There are three buttons which allow you to view the page at full-width, tablet-width and mobile-width. These sizes are set and may vary across devices, but it does give you a good indication as to what each page will look like on these devices.

Whenever you make changes to the page you are editing, the save button will appear blue. This means that something has changed and if you want to keep it, you need to save. Once clicked the button will appear green and faded with a tick icon to show that all has been saved.

If the page is currently live the button will show ‘Save and Update Website’. Otherwise, it will display the simple ‘Save Page’ message.

Another feature currently implemented is the automatic storage of ‘versions’ of the page. Whenever the page is saved, a version of the page is saved in the history.

You can see all of the saved versions (which are ordered by the date they were created) and even click on a version to restore it. Don’t worry though, if you restore a page and decide that you don’t want it, you can go back to the version history and click on the latest save or even just exit the page editor without saving - a restored version will only persist when the page is saved.

We are hoping you’ll agree that this is a major step forward in creating and editing pages on VB Media. I am using it on a daily basis (mainly while I plough through creating blog content, like this article) and am fixing any annoyances, as well as coming up with ‘quality of life’ features that I may or may not get a chance to implement prior to going live.