In Part 1, I gave some background on my experience. It's not that important. What is important has been my ability to adapt to changes in website development technologies. If you are a developer, change is constant. Joomshaper's SP Pagebuilder has constantly evolved to set the pace for page-building tools.
Before you begin developing content or web pages using PageBuilder, take some time to get your start correct. Going back and changing the fundamental site setup becomes much more difficult if you jump into developing pages using PageBuilder.
Setup
Open PageBuilder and go to settings. There, you'll see places to set the various keys for services your site may use: online maps, ai tools, font libraries, and production mode settings. Get the setting right to start.
Planning
Before starting to build a website, you should understand the sponsor's desires and what their website users need. That may include setting the best color palette and font pairings. PageBuilder allows you to set a selection box for the default colors used in its extensions. It enables a list of fonts the site uses without showing a list of hundreds. So create a color palette and create a font book. You'll save time later.
Basic Design
The one area where PageBuilder represents a new paradigm is designing for mobile users. A few years ago, the design emphasis was to place essential parts of the page above the fold; desktop users didn't like to scroll, or so we thought. Mobile phones expect people to scroll. Facebook and other social media are built around the concept of scrolling pages.
If there's one thing that mobile users hate, I suspect it is having to navigate a complex menu through a "Hamburger" menu. That means building a mobile-only menu for phones and tablets.
Choose your template carefully. By using the Helix Ultimate template, you have almost total freedom over the layout of web pages- at least as much as the underlying Bootstrap system allows. PageBuilder has a collection of sample layouts for different types of sites. The great part is that each page of a given layout design can be separately imported into your page. From there, it's easy to take advantage of some fancy CSS and layouts I wouldn't have come up with--just not that creative.
Pagebuilder works with most other templates if you want to use the creativity of another designer. You can buy a template package with Joomla and extensions included, but you'll wind up with lots of unneeded sample content and extensions that PageBuilder can easily replace. Your site can get too complex with too many external extensions. (I know purists will stick with Casiopedia and create overrides to create swift, efficient, attractive sites. That's above the skill level I want to employ.)
Content Design
PageBuilder works with sections containing content blocks--like paragraphs in a word processing document. You can embed external modules and PageBuilder elements (modules built-in to PageBuilder) within each section. Sections are divided into rows with columns to provide positions for the placement of elements. As long as the total number of positions in a row is 12 or fewer, the elements usually fit on one row for a desktop view. Responsive settings place the content of rows vertically rather than horizontally when the screen width is too narrow. Sections and rows can be nested if you like nested Divs in the code to achieve a complex layout.
When you decide the content that goes into a section, it becomes a movable part of the layout. You can freely move sections above or below other sections. Sometimes, you'll develop a better section on a different page. You can save it in a library for reuse later. Or, you can copy the section and paste it into a new section on a different page.
You can export an entire page to a JSON file and import it into another website. Pretty impressive, huh?
Content Development
With regular Joomla, you can write articles much like you can write with a word processor. It's basic and essential. You can configure several types of modules and plugins. You'll have to download most of it from the extensions.joomla.org site. Your choices may be vast, but you'll spend time deciding which extension will suit your needs, which may cost a few dollars.
PageBuilder comes with gobs of extensions, modules, and built-in. It's a drag-and-drop into your content layout. Most of the extensions have multiple options for how they can be displayed. Many even have convenient places to add your own CSS without creating a custom or user CSS file for the template. It's easy to pop into a preview screen to see how the page and extensions will display. The development tools in browsers permit you to inspect the page code. Sometimes, white or black text over a photograph needs a shadow to read easily, and you can do it all from the page being edited. (Not all tools are so helpful. YooTheme, in particular, formats code in an undecipherable fashion.)
