Join us in celebrating as we introduce the powerful, all-in-one SP Page Builder 6!

Brace yourself for its grand entrance, full of surprises that you will love and redefine what your Joomla site can do. 

So let’s dive right in!

Introducing Joomla Articles in Dynamic Content, Finally!

Native Joomla Articles are now fully integrated into SP Page Builder’s Dynamic Content. 

Now you can design, customize, and showcase your Joomla articles exactly the way you want with SP Page Builder.

The latest update gives you a head start with ready-to-go dynamic article pages:

• Dynamic Article Index Page: Instantly create a gorgeous article listing that pulls in your titles, images, dates, and more.
• Dynamic Article Detail Page: Let each article shine with full content, visuals, author info, and even related articles.

Your Joomla dashboard stays the content engine, and SP Page Builder becomes the design powerhouse.

Get Started With Instant Layouts  

The best part is you don’t have to start from scratch. As soon as you create your dynamic article pages, you’re greeted with pre-built, smart layouts, already wired up with the right dynamic addons.

• A polished Article Index layout, styled and ready.
• A detailed Article Page layout, complete with all the fields you need.

Just style it, and make it yours.

Create Buzz Around Your Articles with Native Comments

Creating a comments section for Joomla Articles used to be a hassle with third-party tools, extra costs, and designs that never quite fit. Not anymore!

SP Page Builder’s brand-new, built-in commenting system changes the game, bringing you a seamless, fully integrated solution that looks and works flawlessly right out of the box.

Beautifully Customizable
Design your comments section your way. Place it anywhere, style it to match your brand, and customize every detail directly inside SP Page Builder. No restrictions, no compromises.

Complete Control at Your Fingertips
Manage everything effortlessly. Approve, edit, publish, unpublish, or delete comments with full moderation power. You can even control anonymous comments and approval settings with ease.

Seamlessly Integrated
Your comments will now feel like a natural part of your site. Setup takes just minutes, and the design blends perfectly with your content and layout.

Engagement that Thrives
Keep the conversation going with replies and reactions that spark meaningful discussions and keep visitors coming back for more.

But hey, don’t just listen—see it in action! This is your chance to transform your ordinary Joomla articles into something truly extraordinary.

SP Page Builder Powers Up with Joomla 6

SP Page Builder just took a giant leap forward with Joomla 6 compatibility! With the Beta 2 release underway, SP Page Builder 6 is fully ready to work with Joomla 6 Beta 2. This means you can now test your site on Joomla 6, explore all the new possibilities, and see SP Page Builder in action on the latest platform. Seamless, convenient, and built with you in mind—because helping you stay ahead is exactly why we made this happen.

Smooth Update with Zero Breaking Changes

Unsure about updating? Relax, your site is safe with this upgrade. You can confidently move to the latest version, knowing that there are no breaking changes.

Note: We still recommend you to install the update on a staging site first or back up your site to verify compatibility and functionality before applying it to your production site.

Key benefits include:

• All your existing layouts, modules, and content remain fully compatible
• Access to new features and improved performance
• Full compatibility with your current templates and extensions

Experience a seamless upgrade and take your site to the next level without any disruptions.

Other Notable Improvements

SP Page Builder 6 doesn’t just stop at new features - it also brings a series of updates to enhance performance, compatibility, and user experience. Check them out:

Added compatibility with GPT-5 models: SP Page Builder now supports GPT-5 models, opening doors to smarter AI-powered workflows and content generation possibilities. Update now to enjoy this latest addition!

Improved dynamic content loading speed: Dynamic content now loads faster to ensure smoother page rendering and a more responsive user experience.

Enabled vertical video support in the modal popup & video addons: Vertical videos are now fully supported within the modal popup and video addons. Share vertical content effortlessly and keep your designs looking sharp across all devices.

Please go through the full changelog to know more about other fixes and enhancements that come packed with this version.

SP Page Builder v6.0 Changelog:

• New: Added support for native Joomla articles in Dynamic Content.
• New: Introduced a built-in Article Commenting system.
• New: Enabled profile image support via SP Page Builder - Profile Image plugin.
• Update: Added compatibility with GPT-5 models.
• Update: Added fetch priority option in the Image addon. 
• Update: Improved dynamic content loading speed.
• Update: Enabled vertical video support in the Video and Modal Popup addons.
• Fix: Fixed Form addons not functioning in Dynamic Detail pages.
• Fix: Resolved layout break and pop-up issues in the dynamic media gallery pagination.
• Fix: Resolved the issue with the linking page list not working in the frontend editor.
• Fix: Fixed SEF multilingual page routing issues.
• Fix: Addressed critical path traversal vulnerability in Media Manager.

Experience the Wizardry of SP Page Builder 6 Today!

Over the years, your favorite SP Page Builder has grown tremendously, moving from careful steps to bold strides. This journey shows our commitment to our vibrant community, and we always deliver on our promises. 

This latest update marks a true evolution of SP Page Builder, proving that with it, the sky is the limit!

Don’t forget to drop your thoughts in the comments. Enjoy!

Get SP Page BuilderLive Demo

So let’s get right into what’s brand new!

EasyStore v1.7.0 Changelog:

• New: Added FedEx shipping carrier support.
• New: Added USPS shipping carrier support.
• New: Added DHL shipping carrier support.
• New: Added Aramex Connect shipping carrier support.
• New: Added Mondial Relay shipping carrier support.
• New: Added Boxtal shipping carrier support.
• New: Added Australia Post shipping carrier support.
• New: Introduced Paymongo payment gateway support.
• New: Introduced Square payment gateway support.
• New: Added option to configure Seller Tax ID in General settings.
• New: Introduced Custom Invoice ID Settings for merchants to set custom invoice numbers.
• New: Added Custom events plugin group support.
• Update: Manual payment instructions now appear in Order Details.
• Fix: Removed duplicate product images on invoices and packing slips.
• Fix: Incorrect state names for Italy corrected.
• Fix: Resolved currency formatting issues.
• Fix: Enabled proper rendering of HTML tags in collection descriptions.
• Fix: Added missing annual payment instructions in Orders.

Ship Worldwide with Multiple Leading Shipping Carriers

EasyStore just dropped its biggest shipping boost yet! We have integrated not one, not two, but seven brand-new shipping carriers with this new release! 

You can now give your business enhanced global reach and lightning-fast deliveries. These new shipping carriers include:

FedEx (Global/US-based): Ship your packages at lightning speed with FedEx, the global courier from the US that delivers far and wide. EasyStore now brings this reliable network straight to your fingertips. 

DHL (Global/Germany-based): DHL, the German express wizard, makes international shipping a breeze. With EasyStore, your parcels travel fast and safely to customers anywhere in the world.

USPS (United States): USPS is the trusty American postmaster, delivering packages across the US with care. Now you can easily send your products nationwide in the US through EasyStore.

Aramex (Middle East & Global): From the Middle East to the world, Aramex ensures your shipments arrive on time, every time. EasyStore makes it simple to reach customers near and far with Aramex.

Mondial Relay (France & Europe): Mondial Relay is Europe’s favorite for convenient pickup points, especially in France. With EasyStore, your customers can grab their orders with ease from a nearby location.

Boxtal (France & Europe): Boxtal is your European shipping genie, connecting multiple carriers in one place. EasyStore gives you access to Boxtal’s magic, making delivery faster and smarter.

Australia Post (Australia): Australia Post is the Aussie hero of shipping, trusted for both local and international deliveries. With EasyStore, your parcels travel safely across Australia and beyond.

To get the newest shipping plugins in EasyStore, make sure to refresh your Joomla EasyStore cache. This will load the latest plugin list instantly.

Don't forget to check out the detailed shipping carrier documentation.

Introduced Support for 2 New Payment Gateways

Selling is easier when paying is effortless! That’s why EasyStore is here with two all-new payment gateways, giving your customers more ways to pay securely. These are:

Square Payment Gateway: Square is an incredibly popular payment gateway in the US, Canada, Australia, Japan, the UK, Ireland, France, and Spain. With Square’s integration with EasyStore, you can offer customers in these regions a more reliable payment experience.

PayMongo Payment Gateway: If you are running your business within the Philippines, EasyStore now supports PayMongo, the most popular payment gateway in the nation. Enable your Filipino customers to make purchases with a level of convenience not seen before.

To get the newest payment plugins in EasyStore, make sure to refresh your Joomla EasyStore cache. This will load the latest plugin list instantly.

Learn more about Square and PayMongo in our detailed documentation.

Other Key Features Rolled Out in the Update

Alongside the new shipping carriers and payment gateways, EasyStore v1.7.0 brings more control to how you can run your online store. These include: 

Improved Order Management with Smarter Invoicing 

With this latest update, EasyStore has enhanced how you manage your store’s finances with expanded invoicing options.

Merchants can now define their own invoice number format from EasyStore’s General settings, making record-keeping easier and ensuring invoices align with your business requirements.

Operate More Efficiently With Seller Tax ID Configuration

With this new update, you can manage your tax registration numbers for different regions, adding an extra layer of compliance and professionalism.

You can now add your official Seller Tax ID (also known as a sales tax registration number) directly within the Tax settings. Not only does it keep your store compliant with regional tax laws, but it also reassures customers that they’re buying from a trusted, professional business.

Miscellaneous Updates and Fixes

To enhance your experience with EasyStore, we've fixed some bugs and refined some features, which include:

Clear Manual Payment Instructions in Order Details: Customers using manual payment methods (such as bank transfers) can now view your additional instructions directly in their order details, reducing confusion and ensuring smoother transactions.

Accurate State Names for Italy: Certain state names have been corrected, ensuring proper address formatting and improving shipping accuracy within Italy.

Better Currency Formatting: We have fixed inconsistencies in currency display, so amounts are always presented correctly.

Update Now!

Update to the latest version today and explore how EasyStore keeps evolving to power your online store!

And as always, we’d love to hear your thoughts. Tell us in the comments which shipping carriers you plan to use!

Learn MoreGet EasyStore

And as the buzz builds, the Joomla community is diving into planning, drafting ideas, and mapping out where to begin. Here at JoomShaper, we’re right in the thick of it too! From laying the foundation to shaping strategies, we’re exploring every angle to ensure our products are ready for what’s coming next. Even though the official release is still a little while away, our work is already well underway.

So, in this article, we’ll walk you through what to expect from Joomla 6 and share a peek into how we’re gearing up behind the scenes.

Joomla 6 Features: What’s Taking Shape So Far

Unlike the previous major Joomla upgrades that shook things up with big UI overhauls and flashy new features, Joomla 6 is taking a more thoughtful and strategic path. This time, it’s all about improving the developer experience, making things smoother to use, and ensuring rock-solid stability for the long run. 

While the full list of features is still under wraps, here’s what we’ve gathered so far:

Healthchecker

One of the standout features of the latest Joomla 6 is expected to be the new Healthchecker. Unlike the existing update checker that only verifies if your extensions are up to date, the Health Checker provides a comprehensive overview of your website’s overall health.

Enhanced SEO

Alongside that, Joomla 6 is about to bring smarter SEO features to help your content get found faster, right out of the box, no extra extensions required.

Migration Tool

And if you're worried about moving to the latest version, the updated Migration Tool is here to help. It’s designed to make upgrading from previous Joomla versions smoother and more user-friendly than ever.

Cleaner Codebase

Joomla 6 is tidying things up under the hood by saying goodbye to more legacy code. It’s part of a bigger plan to keep the core lean, clean, and easier to work with. Alongside that, there’s a smart re-architecture in motion to ensure the platform remains solid, maintainable, and future-friendly for years to come.

TUF (The Update Framework) Integration

TUF (The Update Framework) was already part of Joomla’s core, but Joomla 6 takes it further by fully integrating it for enhanced security. This ensures updates are more thoroughly verified, making the update process even safer and more trustworthy.

No Drastic UI Overhaul

Unlike past major releases, Joomla 6 focuses more on backend improvements rather than front-facing visual changes.

There’s definitely more to uncover as upcoming Joomla 6 versions continue to roll out. But surely, Joomla 6 isn’t about eye-catching changes. It’s about building a smarter, safer, and more future-ready CMS that grows with its community.

First Look Inside JoomShaper’s Roadmap for Joomla 6

Here at JoomShaper, we’re rolling up our sleeves to get ready for what’s ahead. Our team is already at work preparing for the upcoming Joomla 6 release, and this time, we have plans lined up for all our JoomShaper products.

Here’s a quick sneak peek:

Helix Ultimate

Helix Ultimate is already in the workshop, getting ready for Joomla 6. We’re working hard to bring you the updated version and will be sharing it with you very soon.

Templates

As Helix Ultimate prepares for Joomla 6, our templates will follow suit. We’re gradually upgrading them to ensure full compatibility with Joomla 6 to make it easier for our users to stay up to date without hassle.

Components

We are currently working on modifying and improving our components so they are compatible with the new structure, design, or system introduced in the latest version of Joomla.

SP Page Builder

SP Page Builder is also gearing up behind the scenes to support Joomla 6. We're actively working and testing the update. We'll roll it out soon and look forward to your feedback to help us refine it further.

EasyStore

EasyStore is also getting its fair share of attention. Alongside Joomla 6 compatibility, expect some exciting additions that will take things up a notch. Keep watching this space!

Note that JoomShaper products will no longer support Joomla 3.x. We recommend upgrading to a newer Joomla version to continue receiving full compatibility and support. 

We’ll be releasing Joomla 6 Beta-compatible versions of our products ahead of the stable release, giving you a chance to try them out early and share your feedback.

Anyone Still Using Joomla 3 or 4

Sticking with older Joomla versions is no longer a safe option, especially as secure server support continues to disappear. The good news is that upgrading has never been easier. Joomla 5.3 is a rock-solid release, and the move from older versions to 5 is smoother than ever. Here’s why now is the perfect time to make the switch:

• Security risks are growing as older versions lose server and software support
• Joomla 5.3 is stable and reliable, built to support long-term use
• Upgrading from Joomla 4 to 5 is seamless, with minimal disruption
• Delaying the upgrade can cause issues with outdated extensions and templates
• The Joomla community is ready to help if you need guidance along the way

Whether you're still on Joomla 3 or just need that final push from 4, there's no better moment to upgrade and start enjoying all the improvements.

Joomla 6 Release Schedules

The Joomla 6 Alpha phase is already in full swing, with all three Alpha versions successfully released. As development progresses steadily, the Beta phase is just around the corner, bringing us even closer to the next major Joomla release. It's an exciting time for the community, and now’s the perfect moment to start preparing. 

Don’t forget to keep an eye out for the upcoming milestones:

Beta Phase

• Beta 1 – August 19, 2025
• Beta 2 – September 2, 2025
• Beta 3 – September 16, 2025

Release Candidate

• RC 1 – September 30, 2025

Stable Release

• Joomla 6.0 Stable – October 14, 2025

Please note that these are tentative dates based on the Joomla.org News. 

We’re Just a Few Steps Away from Joomla 6

The finish line is already in sight. And with every step, Joomla 6 is shaping up to be a strong, solid upgrade. As with any major Joomla milestone, it’s just as much a moment for us at JoomShaper as it is for the wider community.

To all the Joomlers still sticking to the old versions of Joomla, if you’re not already preparing, this is your sign to start! 

With every update, we aim to make your Joomla eCommerce experience smoother, faster, and more powerful. This time, EasyStore brings a fresh new integration, essential fixes, and performance upgrades that promise to elevate how you manage orders, shipping, and filters.

So let’s get right into what’s new!

EasyStore v1.6.0 Changelog:

• New: Added Colissimo shipping carrier support.
• Fix: Improved weight calculation according to the item quantities in the cart.
• Fix: Missing Itemid parameter added to ensure proper URL routing on the shop page.
• Fix: Resolved issues related to the price range filter functionality.
• Fix: Category filters are now bypassed when EasyStore-specific primary keys are detected.
• Fix: PDF generation via the Order Detail print button is now simpler and more optimized.
• Fix: Resolved issues affecting product import and export functionality.
• Fix: Corrected variant option handling to address case sensitivity issues.

Ship Smarter With Colissimo Shipping Carrier

We're excited to introduce native support for Colissimo, one of Europe’s leading shipping carriers! 

With this new integration, you can streamline your shipping, especially for customers in France and other European countries, by offering real-time shipping rates and trusted delivery through Colissimo.

Set Up Colissimo with Pickup Point Delivery & Weight-Based Pricing

Configuring Colissimo in EasyStore is quick and user-friendly, making it easy to set up, apply custom shipping rules, and tailor the settings to fit your store’s shipping policies.

This integration supports pickup point delivery, not just within France but also in other eligible EU countries. Your customers can choose from a list of nearby pickup locations, giving them more control over how and where they receive their orders.

One of the other key advantages is accurate rate calculation based on a predefined weight chart. EasyStore automatically calculates shipping costs using Colissimo’s rate-by-weight structure, ensuring your customers are charged appropriately at checkout.

Note: Once the Colissimo plugin is enabled, customers selecting France or an eligible EU country as their shipping destination should enter a valid ZIP code at checkout in order to find the list of nearby pickup points.

Be sure to check out our documentation to learn more about how the Colissimo integration works.

Updates and Fixes

To make sure your experience with EasyStore is as seamless as ever, we've fixed some errors and improved a lot of features, such as:

Accurate Weight Calculation for Better Shipping Estimates: Say goodbye to underestimating package weights or misaligned shipping fees. With this update, EasyStore now ensures that cart item quantities are properly factored into the total weight calculation, providing precise shipping rates and avoiding any surprises at checkout.

Price Range Filter Functionality Restored: We have fixed the issue that previously prevented the price range filter from working correctly. Now, customers can effortlessly narrow down their choices by selecting the price range they’re most comfortable with, helping them find their perfect product faster.

Seamless Experience When Using Direct Primary Key Links: In some cases, filters would interfere with direct links using EasyStore’s primary keys. We've introduced a fix that bypasses category filters when these keys are detected, ensuring proper product visibility and seamless linking throughout your store.

Update Now to Experience the Difference!

EasyStore v1.6.0 is here to supercharge your eCommerce workflow with smart integrations, performance improvements, and key fixes. Whether it’s more reliable shipping, improved filtering, or streamlined PDF generation, this update is packed with upgrades you’ll appreciate.

Update to the latest version today and discover how EasyStore continues to evolve to meet your growing business needs.

And as always, we’d love to hear your thoughts. So, drop your feedback in the comments!

Learn MoreGet EasyStore

That’s why a well-designed medical website matters more than ever. It’s often the first interaction a patient has with a clinic or practice, and it sets the tone for the entire experience. A clear layout, essential information, and effortless booking can make all the difference.

In this article, we’ll guide you through the steps to create a medical booking website that looks professional, works seamlessly, and puts the needs of your patients first.

Core Features Every Medical Appointment Website Needs

A well-built medical website should simplify patient interactions while maintaining professionalism, clarity, and trust. Here are the key features your site should include:

• End-to-End Appointment Management: A complete system lets patients book, reschedule, or cancel appointments, while admins can efficiently manage patient info.
• Detailed Department & Service Listings: Detailed department and service listings with pricing help patients clearly understand what's offered and make informed booking decisions.
• Searchable Doctor Profiles with Smart Filters: Detailed profiles with filters by name, department, or specialty make it easy to find the right doctor.
• Weekly Doctor Schedule Page: An auto-generated schedule shows which doctors are available on specific days to simplify planning.
• Advanced Search & Filter Capabilities: Smart filters allow quick sorting of data using keywords or dropdowns to enhance usability.
• Responsive, SEO-Optimized Design: A mobile-friendly, search-ready layout ensures smooth performance and stronger online presence.

The Right Tools and Platform for a Strong Start

When it comes to building a robust medical website, Joomla consistently stands out. It offers a secure, scalable, and open-source foundation that’s flexible enough to adapt to any project's needs.

For managing key features like doctor profiles, appointment bookings, and service cost estimations, a specialized extension is a must. That’s where SP Medical excels, providing a complete end-to-end medical management solution.

Finally, to fine-tune your site visually without touching code, SP Page Builder lets you customize layouts easily. You can build engaging pages with drag-and-drop simplicity.

Step-by-Step Guide to Building the Website

Alright, let’s dive right into building your medical booking website. In this tutorial, we’re using the Medico Joomla template, which comes ready with the SP Medical component already set up and makes our job a lot easier.

However, if you're working with a different template, no problem. Just make sure to check out how to install SP Medical before moving forward.

Let’s get started on creating a seamless medical booking experience.

Step 1: Create Your Medical Departments

Medical departments are the foundation of medical services. Let’s kick things off by setting them up!

• Head over to SP Medical > Departments > + New to create your first one. Start by filling in the basics: the department name, a short alias, a brief description, and some information about the treatments offered.
• When you reach the Treatments field, click the + button to add each type of treatment along with its price. This helps visitors understand exactly what to expect.
• Don't forget to add investigations or additional services specific to this department. Once everything looks good, click Save & Close.

Just like that, your first department is live and ready. Now, follow the same procedure to create as many departments as your medical center requires.

Step 2: List Your Specialists

Now that your departments are in place, it’s time to bring in the heart of your medical service, i.e., your specialists.

• Navigate to SP Medical > Specialists and click +New to add a new profile. Start by entering the essentials: name, title, designation, specialty, the department they belong to, and so on.
• Make it easy for patients by adding visiting hours, so they know exactly when a doctor is available.
• You can also include more details like experience, education, awards, website link, ratings, and anything else that helps build trust.

Once you've added all the information you want to showcase, click Save & Close. Repeat the process to list each of your specialists, one by one

Step 3: Simple Appointment Booking

The SP Medical component comes equipped with an easy-to-use appointment booking system to help patients schedule their visits quickly and smoothly.

Booking appointments is simple and straightforward for patients. They can just visit the Appointment page, fill out their details, and click Submit to instantly receive an appointment number for reference.

On the admin side, every appointment request appears in the SP Medical > Appointment dashboard. You can also modify and create appointments manually by clicking + New, entering patient info, and setting details like appointment time or whether it is online or in person, and more.

Step 4: Set Up A Cost Estimator

The cost estimator feature is built right into SP Medical as a menu item. Add it to your navigation bar in just a few clicks for quick and easy access!

To add the Cost Estimator page go to Menus > Main Menu > + New, then choose SP Medical > Cost Estimates from the Menu Item Type list. Then, save the settings to make it live on your site.

Patients can now visit the page and select the treatments or investigations they need. The estimator will instantly show the total cost based on the prices you set for the services offered while creating the departments.

Step 5: Display Dynamic Weekly Schedule

Let’s make it easy for patients to book the right time with a dynamic weekly schedule for specialists. It can updates instantly with any changes so everything stays accurate and up to date.

Just like Cost Estimates, the weekly schedule is available as a built-in menu item in SP Medical. Go to Menus > Main Menu > + New and choose SP Medical > Schedules from the Menu Item Type list. With that, the dynamic schedule goes live on your site, and makes it easy for patients to find specialist availability at a glance.

Step 5: Customise With SP Page Builder

The Medico template and SP Medical join forces to build a strong medical website. Now it’s time to make it uniquely ours and bring our brand’s vision to life!

This tutorial shows how to transform the Home and About pages using SP Page Builder Pro.

• Head to SP Page Builder Pro > Pages and select the page you want to customize. You can edit your content live on the frontend or use the backend for more control—whichever suits you best!
• Tweak texts, update headings, and add images that perfectly reflect your brand.
• Easily add new sections, change layouts, and adjust content with intuitive drag and drop.

Don’t forget to explore the versatile addon gallery to add fresh features and stylish design elements that make your medical website truly stand out!

Final Look

Okay! Now that we’ve set up the key features of our medical site, let’s take a final look!

And just like that, everything blends seamlessly to deliver a smooth and professional experience. Take a moment to test your site’s functionality and usability, make any final design tweaks, and make your site live!

You can check out how to conduct usability testing to learn more and ensure a flawless user experience for your medical site.

Additional Key Features of SP Medical

Beyond the core functionalities, SP Medical includes several powerful features to further improve your medical website’s performance and usability.

Here’s what else SP Medical brings to the table:

• An easy-to-use dashboard that provides clear insights and stats about your medical services and appointments.
• Seamless integration of appointment request forms directly on specialist profiles for quick patient bookings.
• Built-in site modules for Specialists, Services, and Search make it easy to display key content and enhance user navigation across your site.

Wrapping Up!

If you were thinking that creating a medical appointment booking site was a hassle, we hope this tutorial helped change your mind! If you’ve followed through, then you already have a ready-to-go site all without the complexity of coding.

With SP Medical handling the functionality and SP Page Builder offering full visual control, you’re equipped with everything needed to launch a modern, patient-focused platform. From bookings and schedules to service listings and profiles, every step was designed to be intuitive and scalable.

All that’s left now is to go live and let your patients experience the convenience of a seamless digital medical website.

Let’s jump straight into the changelog and explore the details!

SP Page Builder v5.7.0 Changelog:

• New: Introduced color variables with mode in Global Color.
• New: Introduced the ability to import and export collections in Dynamic Content.
• Update: When exporting or importing pages that use Dynamic Content, all related Collections and their data will now be automatically generated and included.
• Update: Enhanced typography preset responsiveness.
• Update: Added shortcode support for articles addon.
• Update: Enabled reset button as a filter control item.
• Update: Enhanced dynamic filters for "load more" functionality.
• Update: Added text alignment option for full-width buttons in the Modal Popup addon.
• Update: Enhanced custom field support for article addon.
• Fix: Updated field exclusion policy for dynamic filter.
• Fix: Resolved image upload issue for small-sized files in Media Manager.

Global Color Now Includes Color Variables With Mode

We’ve supercharged the Global Color with variable and mode support! Now, you can create reusable color variables and effortlessly assign them to different modes—light, dark, or any custom mode you imagine.

Easily access these color variables right from any addon’s color settings. The mode feature acts like a smart color switcher, letting you toggle between themes seamlessly. Best of all, when you tweak a color variable, that update instantly cascades across your entire site, wherever you have used it. 

Stay consistent, work faster, and give your site a polished, professional look in no time!

Introduced Collection Export/Import Feature in Dynamic Content

SP Page Builder’s Dynamic Content leaps forward with the all-new Export/Import functionality. You can now export your collection data into a .json file with just a few clicks. Then, when you’re ready, import that file into any other Dynamic Content manager—on the same site or even on a different one! 

With this handy feature, you can:

• Effortlessly migrate collection data between projects.
• Collaborate with teammates by sharing ready-to-use dynamic data.
• Quickly restore or replicate collections and their items without starting from scratch.

It’s all about giving you the tools you need to work smarter and more efficiently!

Export/Import Dynamic Pages Along with Their Content Collections

When you export or import pages with dynamic collections, SP Page Builder now includes not just the layout but also the associated dynamic data.

When exporting a dynamic content page, SP Page Builder now ensures that the associated dynamic collections and their related items are included by default. When importing, both the dynamic page layout and its associated dynamic collections are imported effortlessly. 

The dynamic collections, complete with their fields and items, will be neatly housed in the Dynamic Content manager, ensuring smooth continuity.

Miscellaneous Improvements

Our latest version also includes additional improvements to make your experience more convenient. Here are some of the notable ones:

Enhanced Typography Preset Responsiveness

Typography presets are now more adaptable. This means fonts and text styles adjust smoothly across different screen sizes and devices for improved readability.

Modal Popup Addon Now Supports Text Alignment for Full-Width Buttons

The Modal Popup addon now includes an option to align text within full-width buttons. When you set your button to full width, an alignment option appears so you can place the button text on the left, center, or right.

Enhanced Custom Field Support for Article Addon

You’ll now find improved custom field support for the Article addon. Just enable the "Show Custom Field" option to take advantage of this enhancement.

Update Now!

If you haven’t updated to the latest version yet, now’s the perfect time to discover these amazing enhancements and simplify your tasks. Also, let us know your thoughts in the comments below. 
Good luck!

Get SP Page BuilderLive Demo

Enter SP Page Builder’s Dynamic Content! The Dynamic Content is already packed with incredible advantages, but its reference and multi-reference fields take the game to a whole new level. 

So in this guide, we’ll demystify how dynamic content works in SP Page Builder and provide a step-by-step tutorial to help you get started.

Ready to transform your workflow? Let’s dive in!

Understanding Reference & Multi-References in Dynamic Content

In any content-rich website, maintaining relationships between various types of data is crucial for organization, usability, and scalability. This is where the reference and multi-reference fields in Dynamic Content shine—they simplify and automate these connections and make your site not only more organized but also more dynamic and interactive for your audience.

The Reference fields are designed for one-to-one connections, and this is what makes them ideal for linking a single item to another.

Similarly, with the Multi-reference fields, you can easily establish one-to-many connections, associating one item with multiple related elements. Examples can be tags, keywords, categories, and so on.

And SP Page Builder makes sure you can achieve this daunting task as smoothly and hassle-free as possible. So let's dive into understanding this in detail.

Reference Fields in SP Page Builder

In SP Page Builder's Dynamic Content, you can use Reference fields while creating your collections to link the related items efficiently. For instance, if you manage a “Recipes” collection and a “Chef's Name” collection, you can easily link each chef to their respective recipes without manually inserting the chef’s details for every recipe while creating your layout.

And when it comes to making an update, simply change it once, and it will automatically update everywhere on your site.

Multi-Reference Fields in SP Page Builder

Multi-reference fields work much like reference fields but with added flexibility. Instead of linking one collection to another, they let you associate several related items with a single piece of content. Imagine tagging your recipes with multiple related tags like Asian Cuisine, Protein, and Noodles in just a few clicks. All you have to do is define the fields while creating your collections and assign them their respective recipes.

Speaking of recipes, if you're planning to build a dynamic recipe site in Joomla, be sure to explore our detailed tutorial!

A Quick Tutorial on Implementing Collection References with SP Page Builder

Now that you understand the basics of reference and multi-reference fields in Dynamic Content and how it streamlines managing your growing content, let's see how SP Page Builder can help you attain this through a simple example. Let’s get started!

Step 1: Install the Latest Version of SP Page Builder

Ensure you have the latest version of SP Page Builder installed, as Dynamic Content is supported from version 5.5.0 onward.

Once installed, navigate to Components > SP Page Builder Pro and select Dynamic Content. 

For this demonstration, we’ll work with a real estate website where we already have a dynamic Property and Property Details page. This is where we’ll implement our dynamic data using Reference and Multi-reference fields.

Step 2: Get Your Collections Ready

Next, set up your dynamic collections. You can either choose from the Collection Presets or create your own from scratch.

We have created three collections: Properties, Agents, and Features.

Use fields like Image, Title, Location, Price, Type, and more to structure your collections.

Step 3: Include Your Collection Items

After setting up each collection, it's time to add your collection items.

1. Click the Add Items button to populate the fields with relevant data.
2. Once completed, click Save to store your items.
3. Add as many collection items as needed for each collection.

Step 4: Plan How You Want to Connect Your Collection References

Planning is key! Decide how you want to connect your collections using the reference and multi-reference fields.

In this demonstration:

• “Properties” will serve as the primary collection.
• The “Agents” collection will be linked to the Properties collection using a Reference field (allowing one agent per property).
• The “Features” collection will be linked to the Properties collection using a Multi-reference field (allowing multiple features per property).

Step 5: Add Reference and Multi-Reference Fields to Your Collections

With your collections ready, it’s time to include Reference and Multi-reference fields in the Properties collection.

1. Open your created Properties collection by clicking the three dots next to it and selecting Edit.
2. Click Custom Fields, scroll down, and select the Reference field. Then, choose "Agent" as the source.
3. Similarly, select the Multi-reference field (located just below the Reference field) and choose "Features" as the source.
4. Click Update Collection to save your changes.

Step 6: Populate Your Collection Items with Reference and Multi-Reference Data

Now, update your Property items to include their respective “Agents” and “Features”.

1. Open each Property item in the Properties collection.
2. In the Agents dropdown (Reference field), select one agent per property.
3. In the Features dropdown (Multi-reference), select multiple features for each property as needed.

Repeat the process for each item in your Property Collection to establish accurate links to their respective agents and features.

Step 7: Add Reference and Multi-Reference Fields to Your Dynamic Index Page

At this stage, the heavy lifting is done! All that's left is to add the reference fields you created to your SP Page Builder Dynamic Content pages.

Design your Dynamic Index page as you would with any SP Page Builder page. The key difference here is the ability to include dynamic data into your layout using the Dynamic Content addons.

Our Properties page is already set up as the Dynamic Index page. If you are not sure about how to create one, feel free to breeze through the Collection Index documentation.

Let's integrate the reference fields into the Dynamic Index page layout.

To display the reference fields data:

1. Inside the Collection addon, add a Dynamic Text addon and rename it to your preference.
2. Set the addon’s Field Source to Property Agents > Title.
3. Customize the addon to align seamlessly with your layout. For instance, we’ve set the font to Inter and adjusted the size to 12px.
4. As an optional step, you can use some custom CSS to enhance the design. We have presented the Agents' names as a badge overlay on each image.

To display the multi-reference data:

1. Add a new Dynamic Collection addon within your existing Collection addon and set its source to Features.
2. Inside this newly added Collection addon, include the Dynamic Text and Dynamic Media addons. 
3. Set the Dynamic Text addon's source to Value and the Dynamic Media addon's source to Image.
4. Hit Save once done.

Step 8: Add Reference and Multi-Reference Fields to Your Dynamic Details Page

For the Property Details page, use a similar method by mapping Dynamic Text and Dynamic Media addons to the appropriate fields. Keep in mind that a Collection addon is only necessary for displaying multi-reference fields. For all other fields, you can directly use the Dynamic Text and Dynamic Media addons without additional setup.

Step 9: Final Result

Give yourself a well-deserved pat on the back for making it this far! Your Dynamic Content page now seamlessly displays both reference and multi-reference data. To modify this data, simply update your dynamic collection items—no need to adjust the page layout.

Filter for Your Dynamic Content

By now, you’ve hopefully followed the steps to integrate reference and multi-reference fields into your dynamic content. But the possibilities don’t stop there. You can expand the functionality even further by utilizing the Dynamic Filter addon.

With the Dynamic Filter, your users can seamlessly filter through your dynamic content. For example, if your real estate website features a wide range of properties, you can give visitors the ability to filter listings according to their preferences. Allow them to sort by property price, category, amenities, and more to find exactly what they’re looking for.

Check out the Collection Filter documentation, where you can learn the steps to add the filter.

Wrapping Up!

We hope this tutorial has answered many of your questions about the reference and multi-reference fields in SP Page Builder's Dynamic Content. If you've explored these features in your projects, we’d love to hear about your experience! Share your thoughts in the comments below—your feedback helps us and the community grow together.

Get SP Page Builder 5Live Demo

With a dynamic portfolio site, there’s no need to manually update layouts or reformat pages. Just add your projects, and your site stays clean, consistent, and ready to impress—no matter how much it grows.

In this guide, we’ll walk you through creating a modern, dynamic portfolio using Joomla—no coding required. 

Save Time and Stay Consistent with a Dynamic Portfolio Setup

Managing your portfolio by manually duplicating layouts or updating individual pages is time-consuming. A dynamic setup streamlines the process.

Here’s why building a dynamic portfolio is a game-changer:

• Centralized project management saves time and effort
• New project pages are generated automatically
• Content is managed independently from design
• Layout updates apply across all project pages
• Scales easily as your portfolio grows

In other words, a dynamic portfolio gives you more freedom, better control, and a professional edge—all without the maintenance headaches.

Which Joomla Page Builder Is Best for Dynamic Portfolios?

To build a portfolio website that’s both easy to manage and visually impressive, you need a Joomla page builder that supports dynamic content. SP Page Builder makes it easy to build a flexible, professional portfolio site—without coding or design headaches.

Here are the key reasons to use SP Page Builder for creating your portfolio site:

• Drag-and-drop interface simplifies layout design
• Built-in Dynamic Content automates project updates
• Responsive layouts ensure mobile-friendly viewing
• SEO-ready structure improves online visibility
• Integrated media manager streamlines image and video uploads
• Pre-designed templates help you launch faster

How to Build a Dynamic Portfolio in Joomla in 5 Steps

After you have installed SP Page Builder and set up your site, the next step is structuring your content. This involves creating structured collections to dynamically store and manage your portfolio data.

Whether you are editing a template or starting from scratch, the following steps will help you make your Joomla site dynamic. Let’s get started:

Step 1: Set Up a Portfolio Collection Using Dynamic Content

The very first thing you need to do is head over to your Joomla Dashboard and go to Components > SP Page Builder Pro > Dynamic Content. Then, click Add New Collection or choose from handy presets like Projects, Services, or Profiles, which come with pre-built fields you can customize later.

Let’s say you want to build a Projects collection from scratch. After adding and naming your collection, populate it with fields such as Image, Gallery, Video, Text, Rich Text, Date/Time, Option, and Link. These fields offer enough flexibility to organize your content efficiently, and you can always update or add more later.

Once you’ve added your fields, hit Create Collection. 

Now, you’re ready to start adding projects. To do this, you have to:

• Select the Projects collection and click the Add New Item button.
• Fill up all the fields. Upload project images, write descriptions, and so on.
• Click Save.

Simply follow the same steps to create other necessary collections, such as your list of clients, profiles for you and other artists in your team, tools used, project categories, etc.

Step 2: Connecting Collections with References

If you’ve followed through so far, you have successfully created a basic “Projects” collection. 

Let’s assume you want to build a more diverse website for a Creative Firm with multiple artists. Each project should have an artist, and each artist can use multiple tools for the project. 

For these kinds of scenarios, it is optimal to use References and Multi-References to link collections together.

How to add and use a Reference Field:

To add a Reference Field, first create an Artists collection and fill it with artist details.

Then go to Projects collection > Custom Fields > +Custom Field > Reference, and set it to reference the Artists collection.

After saving, you can select an artist from a dropdown when editing any project.

How to add and use a Multi-Reference Field:

Similarly, you can link multiple items using a Multi-Reference Field.

Create a Tools Used collection first, then go to Projects > Custom Fields > +Custom Field > Multi-Reference and connect it to the Tools Used collection.

By connecting collections with Reference and Multi-Reference fields, you build a flexible content architecture that’s not only easier to manage but also more engaging and accessible for your site visitors.

Step 3: Design an Index Page to Showcase Projects

Now that your collections are ready, it's time to bring them to life on your website. 

First, you’ll need to create a main showcase page where all your projects are listed for visitors to explore.

Navigate to Pages in SP Page Builder and click + Add > New Dynamic Content Page > Project > Index. After entering a suitable name for your page, you’ll be redirected to the backend editor. 

Just like designing any other page in SP Page Builder, you can create a custom layout for your Index page using drag-and-drop elements. Use the Dynamic Addons to pull in content from your collections.

• Use the Collection addon to list items from your Projects collection by setting the Field Source accordingly.

• Within the Collection addon, add Dynamic Media for images or videos and Dynamic Text for titles, descriptions, and other text-based fields.

Note: You can only use the Dynamic Media and Dynamic Text addons as long as they are placed within the collection addon.

Step 4: Create and Customize Dynamic Project Detail Pages

Next, you’ll need to set up individual pages that highlight the full details of each project so users can dive deeper into the work that interests them.

Similar to creating an index page, head over to SP Page Builder and open the Pages tab from the dashboard once again.

This time, click + Add > New Dynamic Content Page > Project > Detail Page.

Unlike the Index Page, you can freely place the dynamic addons here to map fields like title, description, or images without the need for the Collection addon. However, for Reference or Multi-Reference fields (like Artists or Tools Used), you’ll need to use a Collection addon to display linked content. 

Once set, each new project entry generates its own page automatically using this layout.

Note: SP Page Builder automatically generates a slug (URL) for each dynamic page, making navigation seamless. 

Using the Gallery Field for Project Showcases

When adding or editing a project, use the Gallery field to upload multiple images through the Media Manager. 

These images can be easily displayed using the Dynamic Media addon in SP Page Builder—just set the Field Source to your gallery field and customize the layout to fit your design.

A Gallery field is particularly useful for showcasing multiple visuals per project without needing to use separate images manually.

Step 5: Set Up Dynamic SEO Tags for Portfolio

SP Page Builder includes built-in SEO tools for setting meta descriptions, Open Graph data, keywords, and image alt text—all in one place. Just head over to Page Settings > SEO tab.

You can customize SEO settings by using dynamic variables that pull directly from your Project collection. Here is an example on how you can set up each of the SEO fields: 

• Title: “Explore {{Project Title}} – A Standout {{Project Category}} project by {{Artist}}”

• Meta Description: “{{Project Title}} is an exceptional {{Project Category}} project crafted by {{Artist}} using tools like {{Tools Used}}. The {{Status}} project is currently available for purchase for a price of {{Price}}.”

• Open Graph Image: Use {{Image}} from the project’s media to generate a striking thumbnail for social sharing.

Final Result

If you have followed all of the above-mentioned steps, your site should look something like this:

If you would prefer a more detailed visual walkthrough, be sure to check out our video tutorial and follow along to create a stunning and dynamic portfolio website.

Additional Tip

You can use the Dynamic Filter addon to let visitors instantly sort and explore your projects based on projects, categories, status, tools used, or any other collection. 

Simply select your desired collection as the source and choose filter layouts like accordion, dropdown, or flat. 

The addon supports various filter types, such as checkboxes, sliders, search bars, and more, allowing a fully customizable and interactive filtering experience that updates results in real time.

For specific instructions on using this addon, please refer to the official documentation.

Wrapping Up

Building a dynamic portfolio website in Joomla is now easier than ever with SP Page Builder’s no-code tools and dynamic content capabilities.

Have you explored the potential of dynamic content in any of your projects yet? Share your thoughts or suggestions in the comments—we’d love to hear from you!

Get SP Page Builder 5Explore Templates

Excited to learn more? Let's jump right in!

SP Page Builder v5.6.0 Changelog:

• New: Introduced the Dynamic Content Filter addon.
• Update: Integrated "send a copy mail to applicant" feature in the Form Builder addon.
• Update: Improved template presets in the color library.
• Update: Added labels for the color presets.
• Fix: Resolved broken image issue in the Article Scroller addon.
• Fix: Addressed TinyMCE not loading issue.
• Fix: Corrected title alignment issue for headings within a row.
• Fix: Fixed frontend editor crash for the Product List addon.
• Fix: Resolved responsive width issue in the Gallery addon.

Introduced the Dynamic Content Filter Addon

The Dynamic Content Filter addon comes as your secret weapon for a smooth and seamless content management! Define the collection source, related fields, and additional parameters to tailor the filter to your specific needs. Plus, customize its behavior, layout, and functionality to provide your users with a precise and intuitive search experience.

Define Your Filter Source with Ease
Seamlessly connect your filter’s collection source in seconds. The addon dynamically pulls content from your specified collection fields, ensuring your audience always sees the most relevant information.

Effortlessly Configure Your Filter Items
Define your filter items with zero effort—choose from Field-wise Filters or general Search to match your needs. Set up collection fields within each filter item, enabling users to search and find content based on the defined filter criteria. This flexibility gives you full control while keeping the setup hassle-free.

Personalize Settings with In-Depth Customization
Take your filters beyond the basics by customizing appearance, layout, and control types to fit your site’s style. From adjusting colors and sizes to choosing between checkboxes, radio buttons, or inputs, you can fine-tune every detail.

Check out the detailed documentation to learn more about the functionalities of the Dynamic Filter addon.

Miscellaneous Improvements

We've fine-tuned numerous features and resolved various bugs to ensure your SP Page Builder experience is as smooth as ever. Here are some highlights:

• "Send a Copy Mail to Applicant" Feature: The Form Builder addon now lets you send users a copy of their submissions. All you have to do is toggle on the "Send a copy to Sender" option.
• Labels Added to the Template's Presets: Previously, we introduced an option to include your Helix Ultimate template's color presets in the Color Library. In this update, color labels have been added to the presets, making it easier to identify and organize your preferred color schemes.
• Article Scroller Issue: Fixed the broken image issue in the Article Scroller addon, ensuring flawless visuals.
• TinyMCE Loading Issue: Resolved the TinyMCE not loading issue, so you can edit content seamlessly.
• Gallery Addon Width Issue: Fixed the responsive width issue in the Gallery addon for a better mobile experience.

Update Now!

So what’s the wait? Upgrade to the latest version of SP Page Builder today and take advantage of the latest enhancements. And don’t forget to let us know your thoughts - we’re always eager to hear you out!

Get SP Page Builder 5Live Demo

This time, 28 of your most loved templates have been upgraded to ensure compatibility with the latest Joomla and PHP 8.3 versions. Plus, templates that include key extensions like SP Page Builder, EasyStore, and many others are now equipped with their updated versions, ensuring your website is always ahead of the curve!

Check out the overall changelog and the list of your favorite templates that got updated this time:

• Update: Support for Joomla v5.2.5 or v5.3.0.
• Update: Support for SP Page Builder v5.5.x.
• Update: PHP 8.3 compatibility.
• Update: Added EasyStore v1.4.x compatibility with the related templates.
• Update: Added Joomla 5 Quickstart pack to the related templates.
• Update: All extensions related to the templates updated to the latest versions.
• Update: Included the latest version of SP Simple Portfolio, SP Booking, SP Soccer, SP Movie Database, SP Medical, SP LMS, and SP Property to the related templates.
• Update: Campaign v2.0.0 added to the Politist template.
• Update: Helix 3-based templates upgraded to v3.0.5.
• Update: Helix Ultimate-based templates upgraded to v2.1.2.
• Fix: Fixed all known bugs and improved stability.
• Fix: Fixed the layout broken issues in the Knight, Gourmand, Delacroy, and Decora templates.
• Fix: Language error issue solved in the Knight template.

1. Allura: Joomla eCommerce Template for Online Fashion Stores

2. Arino: Joomla eCommerce Template for Online Stores & Shops

3. Calcio: Joomla Template for Soccer News & Football Club Websites

4. Decora: Architecture & Interior Design Joomla Template

5. Delacroy: Digital Agency & Multipurpose Joomla Template

6. Empire: Responsive Joomla Template for Real Estate

7. Event Planner: Joomla Event Template for Organizing & Managing Events

8. Fusion: Joomla template for high-tech & AI-based websites

9. Gourmand: Recipe and Food Blog Joomla Template

10. Investa: Consultancy, Law Firm, and Corporate Business Joomla Template

11. Jewels: A Jewellery & Watch eCommerce Joomla Template

12. Knight: Responsive Joomla Template for Company and Agency Sites

13. Kreativa: Complete Online Store-based Joomla Template for Creative Entrepreneurs

14. Live Sports: An All-in-one Joomla Template for Sports-Related Websites

15. Luxyort: Resort and Holiday Destination Joomla Template

16. Maestro: Multi-purpose Joomla Education Template for eLearning

17. Medico: Joomla Medical Template for Hospital, Clinic & Healthcare Sites

18. Moview: Movie Database & Review Joomla Template

19. Politicas: Joomla Template for Political Campaigns, Parties, and Politicians

20. Politist: Responsive Joomla Template for Politicians/Election Campaigns

21. Revibe: Multipurpose Creative Joomla Template

22. Savor: A multipurpose restaurant & cafe Joomla template

23. Shefund: Joomla Template for Women NGOs and Charity Firms

24. Shopin: eCommerce Joomla Template with EasyStore

25. Soccer: Sport Team Clubs Joomla Template

26. Sphere: A Multipurpose Corporate Joomla Template

27. Stellar: Joomla Template For Creative Agency and Portfolio Sites

28. Travelin: Trip Booking Joomla Template

If you’re using any of these templates, don’t wait—update now to avail these latest enhancements! We’d love to hear your feedback, so share your thoughts with us in the comments below.

This is where usability testing becomes essential for your Joomla site. By conducting thorough usability testing, you can uncover potential issues and improve the overall user journey. 

In this article, we’ll explore how usability testing can help optimize your site and how SP Page Builder can make the process smoother, faster, and more effective.

What is Usability Testing

Usability testing puts your site to the test with real users, helping you uncover how intuitive and easy it is to navigate. The feedback you get reveals pain points and ensures your site delivers a seamless experience that matches user expectations.

Types of Usability Testing Methods for Joomla Sites

While you're out and about conducting usability testing for your Joomla site, it's important to be aware of the methods you can use. Let’s take a look at some usability testing methods you can employ on your site:

• Cognitive Walkthrough: This method evaluates how easily a first-time user can navigate your website. Testers are given tasks, like Find and buy a product, and are observed as they complete them. By identifying any points of confusion or frustration, you can improve navigation and task flow and ensure that your site is intuitive and user-friendly for new visitors.
• A/B Testing: This method uses two versions of a webpage or feature to see which performs better. You test different elements, like button color or layout, and track how users interact with each version. The goal is to make data-driven decisions that improve user experience and boost conversions.
• User Surveys and Feedback: This is a great way to gather input directly from your visitors. By asking users specific questions about their experience, you can learn what they liked, what frustrated them, and what needs improvement. This method provides valuable insights into user satisfaction and helps you make better decisions for future updates.
• Heuristic Evaluation: This method involves having a small group of usability experts review your website to identify potential usability problems based on established principles, or heuristics. These experts look for issues such as poor navigation, inconsistent design, or confusing layouts.

Conducting Usability Testing for Joomla Websites

Usability testing is all about understanding how your users interact with your site and uncovering opportunities to improve. 

Here's how you can effectively conduct usability testing for your Joomla website.

Define Objectives 

The first step in usability testing is to determine what you are testing. Are you testing a new feature, improving navigation, or aiming to increase conversions? 

Setting clear goals helps guide the testing process and ensures you focus on the right aspects of your Joomla site. 

Identify Target Users

When testing your site, know exactly who it’s built for. Testing from their perspective helps you fine-tune the experience and make sure it’s perfect for the people it's meant for.

Choose Usability Testing Methods

There’s no one-size-fits-all approach to usability testing. Whether you mix methods or focus on just one, choosing the right fit for your site will uncover key insights to level up the user experience!

With SP Page Builder’s Front-End Editor and Preview, you can test as you build. Click around, explore the layout, and follow the path a new visitor might take. It’s like doing a mini cognitive walkthrough in real-time, spotting pain points and fixing them before anyone else even visits.

Create Test Scenarios And Tasks

Set up real-life scenarios your users are likely to face—like browsing products, signing up, or checking out. These tasks should reflect your site’s main goals and help you see how users interact with each step. 

Run the Test And Gather Feedback
After walking through the tasks yourself, invite real users to try them out. Share the site preview with team members, clients, or a small test group, and watch how they interact with it.

Encourage them to speak up about what’s confusing, what’s working, and what’s missing. Combine their feedback with your observations to make meaningful improvements.

Fixing Common Joomla UX Issues with SP Page Builder

User experience can make or break a Joomla website, but many common issues can be resolved seamlessly with the right tools. 

SP Page Builder smooths out most UX bumps before they even show up. From layouts to loading speed, it handles the heavy lifting so you can spend less time fixing and more time fine-tuning through usability testing.

Let’s take a look at how SP Page Builder helps address key UX challenges and enhances your usability testing efforts:

Clunky Backend Navigation

It’s no surprise that Joomla’s default admin interface can feel overwhelming—especially for beginners. The backend navigation often feels clunky and can slow down your design workflow.

SP Page Builder smooths things out:

• The Backend Editor lets you drag and drop elements with ease, while giving you full control to fine-tune every detail.
• Switch to the Frontend Editor to design visually and make real-time changes right on the page—what you see is truly what you get.
• Hit the Preview button anytime to instantly check your progress and catch any design hiccups before they go live.

This intuitive setup helps you work faster, stay focused, and catch design hiccups before they go live.

Inconsistent Typography Across Pages

Consistency is key—but applying the same fonts, spacing, and styles across an entire site can get tedious.

That’s where SP Page Builder’s global typography settings come in. Create presets with your preferred fonts, line heights, spacing, and font weights just once—then apply them to any addon in seconds.

• Navigate to Joomla Dashboard > Components > SP Page Builder > Settings > Typography to set up your presets.
• Once saved, just open the typography settings of any addon and select your preset.

No more guesswork or repetitive tweaks—just a clean, cohesive design that pulls your whole site together.

No Easy Way to Manage Repeated Sections

Managing repeated content across your site can be a real time sink. Manually updating sections like testimonials or CTAs on every page—or recreating the same layout from scratch? Nobody’s got time for that.

With SP Page Builder, simply save your sections and reuse them across the entire site—no need to repeat the same design process over and over.

Plus, with Dynamic Content, managing updates is a breeze—edit once, update everywhere. Check out our comprehensive tutorials to master it with ease.

Accessibility Concerns

Accessibility isn’t just a bonus—it’s essential. Many Joomla sites fall short when it comes to key accessibility features like missing alt texts, poor contrast, or improper heading structures.

SP Page Builder makes building accessible websites easier:

• Add alt text effortlessly to every image across all addons—boosting accessibility without extra steps.
• Set proper heading structure (H1–H6) directly in the addon settings to ensure a logical flow for screen readers.
• Its modular interface naturally supports clean, organized layouts that improve both usability and accessibility.

Moreover, SP Page Builder continuously enhances its accessibility features to create a more inclusive web experience for all users.

Limited Content Layout Flexibility

Default content layouts can limit creative freedom, especially when you're restricted to a single-column structure.

SP Page Builder opens the door to true layout freedom:

• Create advanced, responsive layouts by nesting divs, rows, and columns however you like.
• Build multi-column sections, stack content in multiple lines within a row, or align elements side by side—exactly how you imagined.
• Fine-tune padding, margins, and alignment at every level to achieve pixel-perfect designs.

With SP Page Builder, you're not just laying out content—you’re building a layout that works beautifully on every screen.

Slow Load Times & Weak SEO

A sluggish site not only drives visitors away but also hurts your visibility on search engines. Poor performance and unoptimized content can make usability testing a nightmare.

SP Page Builder helps you stay ahead. With features like lazy loading and built-in SEO tools, your site loads faster and performs better, both for users and search engines.

This means smoother browsing experiences, higher rankings, and quicker, more efficient usability testing.

Wrapping Up!

In web design, user experience is everything. Without thorough usability testing, even the most visually appealing websites can miss the mark on user satisfaction. Thankfully, SP Page Builder simplifies the entire process, making usability testing quicker and more effective.

By prioritizing usability testing and utilizing SP Page Builder’s powerful tools, you're not just fixing problems—you’re crafting a smoother, more enjoyable user experience. This translates to better conversions, reduced bounce rates, and an overall higher-performing site.

Don’t let usability testing be an afterthought. With the right tools and a user-first mindset, your Joomla site can achieve its full potential and deliver results that stand out.

Get SP Page Builder Pro

We’re thrilled to bring you the latest update of EasyStore, packed with features to enhance your Joomla eCommerce journey. Today’s update delivers a range of exciting additions that will make your EasyStore experience even more convenient. 

So let’s dive in and explore what’s new!

EasyStore v1.5.0 Changelog:

• New: Introduced the product Upsell and Cross-Sell feature.
• New: Added Order ID prefix and suffix support for invoices and shipping labels.
• New: Introduced Brand management module for better product organization and filtering.
• Update: Enhanced weight unit settings for single products and product variants.
• Fix: Resolved issue with customer payment success notifications not being sent.

Introduced Brand Management Module 

Say hello to effortless product organization and a seamless shopping experience with EasyStore's Brand management module! Whether you're catering to brand-loyal customers or just looking to simplify your backend operations, this feature is here to change how you manage and showcase your product brands. Here’s how:

Centralized Brand Organization: Easily create and manage a complete list of brands tied to your products. Assign each of your products to its respective brand, ensuring everything in your store is perfectly categorized. Plus, utilize the advantage to display your created brands as a menu item for an organized system that creates a seamless experience both for you and your customers.

Improved Product Filtering:  Help customers find their favorite brands and related products in just a few clicks! This new addition lets you include a brand option on the single product page, enabling shoppers to effortlessly explore other products linked to that brand.

Don't forget to check out our documentation to learn more about the functionalities. 

Addition of Product Upsell and Cross-Sell Feature

Take your sales strategy to the next level with the new Upsell and Cross-Sell features! Effortlessly showcase premium options or irresistible bundle deals to your customers, right when they’re ready to shop. Simply assign related products as upsell or cross-sell, and highlight upgrades, popular combinations, and the best value deals without a hitch. It's the perfect way to help your customers find exactly what they need while boosting your revenue. Check out this awesome feature today and don’t miss out on turning every sale into a smarter one!

Better Order Management with Prefix and Suffix Support

EasyStore now introduces a better way to organize your order identification. You can add prefixes and suffixes to your Order IDs for invoices and shipping labels, making order tracking more efficient.

Imagine easily distinguishing orders by region, campaign, or even shipping method—whether it’s adding a prefix like "EU-" for European orders or a suffix like "-2025" to keep track of annual sales. This feature simplifies tracking, enhances identification, and ensures every order is properly categorized.

Get the latest version of EasyStore and start exploring this new feature today!

Update and Fixes

In addition to introducing new features, we've also optimized existing ones to ensure better and smoother performance. 

Enhanced Weight Unit Settings for Single Products and Product Variants: This update introduces greater flexibility in specifying weight units for both single products and their variants. 

Resolved Issue with Customer Payment Success Notifications: We’ve fixed a bug that prevented customers from receiving payment success notifications. This ensures that every successful transaction triggers a confirmation email, keeping your customers informed and improving their overall shopping experience.

Update Now!

Now it’s your turn! Update to the latest version of EasyStore today and explore all the exciting new additions. Don’t forget to share your experience in the comments—we’d love to hear your thoughts. Happy upgrading!

Learn MoreGet EasyStore

This time, we're bringing you an update packed with exciting new features, improvements, and fixes that are definitely worth checking out. So let’s dive into what’s coming your way this time!

SP Page Builder v5.5.5 Changelog:

• New: Added support to use template preset colors in the Color Library (Helix Ultimate-based templates only).
• New: Added Global Typography settings.
• New: Added Telegram and BlueSky support to the Social Share addon.
• New: Added linking options in the Image Overlay addon, allowing customization based on user preference.
• New: Added the ability to randomize slide order across all slider-related addons.
• New: Added a "Send Copy" feature in the Contact Form addon for applicants to receive a copy of the original mail.
• Update: Improved accessibility in the Article Scroller addon.
• Update: Enhanced upload process in the folders tab of Media Manager.
• Update: Improved Smart Search indexing to handle only published pages.
• Update: Added a conditional notification system for language pack downloads.
• Fix: Fixed missing src attribute causing broken images in dynamic content.
• Fix: Fixed scroll-to behavior for external links in the Navigation addon.
• Fix: Resolved export failures when media file names contained whitespace.
• Fix: Fixed crashes in the Testimonial Carousel caused by empty ratings.
• Fix: Addressed crashes related to range fields in the Form Builder addon.

Template Preset Colors Now Available in the Color Library

Designing your web pages with SP Page Builder just got smarter and more efficient! Because if you’re using Helix Ultimate-based templates, you can now tap into your template’s preset colors directly from the Color Library. This new integration lets you apply your template’s predefined color schemes seamlessly, making site-wide customization faster and more cohesive than ever before. 

Style Your Texts Smartly With the Global Typography

The latest SP Page Builder v5.5.5 introduces Global Typography Settings, giving you better control over your site's text styles. Instead of adjusting typography on individual elements or pages, you can now define global rules for fonts, sizes, weights, line heights, and more—all from a single, centralized panel. These settings are easily accessible and can be applied directly through the typography options in your addons.

This powerful feature ensures a consistent look across your entire site while streamlining the customization process, saving you time and effort. It’s typography, made smarter and simpler!

Engage Visitors With Randomized Slider Order

The SP Page Builder v5.5.5 update also introduces a new feature that allows you to randomize the display order of slides in all slider-related addons. 

With this functionality, the sequence of your slider content will shuffle on every load. This ensures that visitors see varied content arrangements, making it ideal for showcasing diverse portfolios, testimonials, or featured items in an engaging and dynamic manner.

Other New Additions in This Update

Wait, there’s even more goodness! This update brings along more new enhancements you'll want to check out. Here's the full scoop:

• Added a "Send Copy" feature in the Contact Form addon: This new addition in the Contact Form addon allows applicants to receive a copy of the email they submit through the contact forms, providing them with a record of their original message.
• Telegram and BlueSky support in the Social Share addon: In the latest SP Page Builder v5.5.5 update, the Social Share addon has been enhanced to include support for Telegram and BlueSky, expanding your website's social sharing capabilities.
• Added linking options in the Image Overlay addon: The Image Overlay addon has been enhanced with new linking options. You now have the flexibility to choose between two linking options: Title or Content.

Miscellaneous Updates & Fixes

With this version, we have also rolled out a series of updates and fixes aimed at refining and improving the overall functionality of SP Page Builder. Here are some of the notable improvements included in this release:

Enhanced upload process in the folders tab of Media Manager
Uploading files in the folders tab of Media Manager is now more intuitive and user-friendly. The upload process in the Media Manager's Folders tab has now been improved to offer greater flexibility and convenience.

Improved Smart Search indexing to handle only published pages
Smart Search indexing has been optimized to include published pages. This improvement reduces clutter in the index and delivers a more refined search experience.

Fixed missing src attribute causing broken images in dynamic content
A bug causing missing src attributes in dynamically loaded images has now been resolved. This fix prevents visual disruptions and improves the reliability of dynamic content rendering.

Fixed scroll-to behavior for external links in the Navigation addon
The Navigation addon now correctly handles scroll-to actions for external links. This fix improves usability, ensuring smooth navigation for users clicking on external anchors.

Resolved export failures when media file names contained whitespace
Export processes no longer fail due to media file names with spaces. This fix enhances compatibility and reliability when working with diverse file naming conventions and smooths out your overall experience.

Check out the changelog to know more about other fixes and enhancements that come packed with this version.

Update Now!

So why wait? Take the leap and upgrade to the latest SP Page Builder now and take your web projects a step further.

Let us know your experience in the comments—we’re eager to hear from you. Good luck!

Get SP Page Builder 5Live Demo

Whether you're a beginner looking to break into the field or an experienced developer seeking to specialize in Joomla, this guide will walk you through everything you need to know to become a successful freelance Joomla web developer.

Benefits of Using Joomla for Development

Joomla is a powerful open-source CMS that’s completely free and supported by a vibrant developer community. While it includes some basic SEO and performance tools, its capabilities can be significantly extended with additional plugins. 

Joomla’s no-code website-building experience is often enhanced through page builders, making it accessible for users of all skill levels. A wide range of templates and extensions is available through the official Joomla Extensions Directory (JED) as well as from trusted third-party developers, giving users everything they need to build and customize high-performing websites.

Now, let’s dive into the step-by-step process of starting your freelance Joomla development career.

Step-by-Step: How to Become A Freelance Joomla Developer

1. Develop Essential Skills

Before diving into freelance projects, building a firm foundation in web development, such as understanding the basic concepts of design and coding, is essential.

Even though Joomla development is mostly no-code, it is wise to learn the basics of HTML and CSS to customize Joomla templates and develop a more feature-rich and unique website. It is also essential to gain familiarity with Joomla’s CMS architecture and backend functionality.

Besides, you will need to have some soft skills because just developing a website is not enough; you need to know how to sell your work and prove yourself to be reliable to your clients. Assertive communication helps you understand client needs, problem-solving ensures quick issue resolution, and effective time management allows you to juggle projects and meet deadlines.

2. Choose the Ideal Joomla Page Builder

Selecting the right page builder can simplify your workflow and enhance your productivity.

SP Page Builder is highly recommended for Joomla freelancers because of its ease of use and powerful features: 

• You can create websites effortlessly with the powerful drag-and-drop editor with numerous addons that cater to all your needs, no coding required. 
• You can easily update content across multiple pages with one change using SP Page Builder’s dynamic content management. 
• You can optimize website content to rank higher on search engines with built-in SEO tools. 
• Finally, you can speed up development by using pre-built layout bundles and professional-grade templates.

3. Choose a Niche

Specializing in a specific industry helps attract higher-paying clients and establish your expertise. Clients value specialized skills and are willing to pay more for them.

Marketing is easier and more effective when targeting a niche market.

With SP Page Builder, you can create a variety of websites, from eCommerce and portfolio sites to LMS platforms and corporate websites. 

4. Create Some Personal Projects

Once you have picked a niche, the next step is to, well, start building of course!

Building personal projects is the best way to refine your skills, gain hands-on experience, and create a portfolio that attracts clients. 

Treat your projects like official client-assigned projects. Plan the structure, create a sitemap, and define the project’s goals. Finally, document your process and highlight the challenges you faced and the solutions you found. This will express your ability to work on a professional level.

5. Set Up Your Portfolio Website

A strong portfolio is essential for showcasing your projects and attracting clients. 

Here’s a quick overview of how you can set up a portfolio site using SP Page Builder, along with SEO optimization tips for better search visibility.

Choose a professional template: Use SP Page Builder’s pre-built portfolio templates to showcase your work. You can also design a portfolio website from scratch, but the templates allow you to speed up the process. 

Highlight Your Best Work With Dynamic Content: SP Page Builder’s Dynamic Content enables you to organize your work into collections and display them anywhere on your site.

• Arrange Your Projects In Collections: A well-designed portfolio site must display all your projects dynamically, containing images of the projects, links to live demos, and details of your process.
  With Dynamic Content, you can set up a project collection that contains fields such as images and text, so you can simply update details about your projects rather than uploading them all manually.
• Create Individual Portfolio Details Pages: Each project in your portfolio should have a dedicated page showcasing detailed information, images, and testimonials. Create a new Dynamic Details page in SP Page Builder.
  Use the Dynamic Content addons to pull project-specific details (such as title, images, and description). Add sections for project goals, challenges, solutions, and results to showcase your expertise. Integrate client testimonials or a case study section to add credibility.
• Create the Dynamic Portfolio List Page: Your portfolio list page serves as an overview of your work, displaying all projects in an organized and visually appealing way. Instead of manually adding portfolio projects, SP Page Builder’s Dynamic Content management allows you to pull specific project information directly from the collection.
• Enhance with Hover Effects & Animations: Use hover effects and animations on images to make the portfolio more interactive. You can add title overlays and brief descriptions that appear when users hover over a project thumbnail.
• Include a Call-to-Action (CTA): Add a way for potential clients to reach out. Use the Form Builder addon to collect inquiries directly from the portfolio pages.

Improve SEO: Optimize images and meta descriptions for better search visibility. Use keyword-rich content to rank higher on Google. 

To ensure your portfolio ranks well on search engines, implement these SEO best practices:

• Use SP Page Builder’s built-in SEO settings to add dynamic meta titles and descriptions to each portfolio project.
• Compress images before uploading to improve page speed.
• Use ALT text with relevant keywords to help search engines understand your content.
• Enable Schema Markup in Joomla to structure your portfolio data for Google.
• Add Open Graph tags to ensure portfolio pages appear correctly on social media.
• Use relevant keywords in your project descriptions, headings, and image filenames.
• Ensure URLs are SEO-friendly by using descriptive links instead of random characters.

Be sure to check out our detailed article on how SP Page Builder can help you improve SEO on your Joomla website.

6. Find Freelance Clients & Build Your Brand

Once your portfolio is set up, it's time to start finding clients. Here’s how:

Join Freelance Platforms: Freelance marketplaces like Upwork, Fiverr, and Codeable provide a great starting point for Joomla developers to connect with potential clients. 

Craft a standout profile that highlights your specific skills, best projects, and client reviews. Use relevant keywords to boost visibility and tailor proposals to showcase how your expertise meets client needs.

Leverage Social Media: Social media platforms are powerful tools for attracting clients. Share your work, case studies, and client testimonials on LinkedIn, Twitter, and Facebook groups related to web development and Joomla. 

Regularly post valuable content, such as website design tips, troubleshooting guides, or success stories, to establish credibility. Engage with professionals and clients through comments and discussions to expand your reach.

Attend Joomla and Web Development Conferences: Building relationships within the Joomla and web development community can lead to valuable client referrals. Industry conferences, both online and in-person, offer a great chance to meet potential clients and network with other professionals.

Additional Things to Consider

Create a Business Plan: A solid business plan is essential for setting clear financial goals and ensuring long-term success as a freelance web developer. 

Start by defining your income targets and outlining a budget for essential tools, such as Joomla extensions, hosting services, and premium website templates. Additionally, allocate funds for marketing efforts, including social media promotions, paid ads, or content marketing, to attract potential clients. 

Expand Your Skill Set: While Joomla is a no-code solution, mastering essential web technologies like HTML, CSS, and JavaScript can greatly enhance your freelancing career. These skills allow you to customize templates, refine layouts, and troubleshoot design issues beyond Joomla’s built-in options. 

Beyond technical expertise, strong analytical and problem-solving skills help Joomla developers debug extensions, resolve compatibility issues, and adapt sites to client needs. 

Wrapping Up

Starting a freelance career in Joomla web development is an exciting journey that requires technical knowledge, marketing strategies, and a strong portfolio. By leveraging Joomla’s powerful CMS and SP Page Builder, you can create high-quality websites efficiently and attract more clients.

Follow these steps, keep learning, and build your brand to thrive as a successful freelance Joomla developer!

Get SP Page Builder 5Explore Templates

We’ve been working hard to roll out some new features and improvements, and we can’t wait to share them with you. From dynamic fields that add galleries, videos, and files, to more control over popup scheduling, and enhancements to our addons—there’s a lot to explore in this update. 

Let’s dive in and check out all the fresh additions and fixes we've packed in!

SP Page Builder v5.5.3 Changelog:

• New: Introduced Gallery, Video and File support fields for Dynamic Content.
• New: Popup Conditions now include a Date Range option to display popups within a specific time range. 
• New: Added Image option in Accordion addon.
• New: Added Custom CSS functionality for Row and Column addons.
• Update: Added description functionality to the Gallery addon.
• Update: Updated Accordion addon with keyboard accessibility improvements.
• Update: Enabled Numeric Keyboard mode for number fields on iOS in the Form Builder addon.
• Update: Introduced Object Fit options in the Image addon for better image control.
• Fix: Resolved image width inconsistency in the Gallery addon.
• Fix: Addressed the issue related to the Save and New functionality for pages.
• Fix: Fixed the nested Admin Label updating issue in Dynamic Content.
• Fix: Resolved an issue where the pause on hover feature in the Slideshow addon was not working for video items.

Say Hello to New Dynamic Fields: Gallery, Video, and File Support

The powerful Dynamic Content launched recently and just like we promised, we're fine-tuning it to make it the best out there! We’ve now added Gallery, Video, and File support fields, so you can easily display dynamic galleries, embed videos, and add files.

Now, you can effortlessly integrate gallery items, videos, and files into your content, making it more exciting and interactive. Update now and give them a try!

Precisely Schedule Your Popups with the Date Range Condition

As SP Page Builder keeps getting better with exciting features, we’ve made sure our Popup Builder receives some love too! 

That’s why we’ve added the new Date Range feature to the Popup Conditions to make it easier to schedule popups for a specific time. Set the date range for your popup to appear and disappear, and let it work its magic! Once scheduled, the popup will display within the selected time frame without you having to put any extra efforts.

Added Image Option in Accordion Addon

We’ve also added an Image option to the Accordion addon in SP Page Builder. Meaning, apart from including icons in your accordion items, you can also upload images to make it more visually engaging. Whether you're displaying information, highlighting key features, or structuring content, you can now experience greater flexibility and creativity.

Miscellaneous Improvements

This update also includes important updates and fixes to help enhance the performance of your SP Page Builder. Let’s take a look at some of them:

Enjoy Custom CSS functionality for Row and Column Addons: We’ve added Custom CSS functionality to the Row and Column addons. This means, you now have more control over your row and column design for a more personalized layout.

Description Functionality in the Gallery Addon: You can now enjoy the freshly added descriptions functionality to your gallery items. This enables you to provide more context to your Gallery item and enhance the visual storytelling of your content.

Slideshow Addon’s Pause on Hover Issue for Video Items: The bug that prevented videos in the Slideshow addon from pausing when hovered over has now been addressed and fixed. 

Resolved Image Width Inconsistency in the Gallery Addon: The issue where image widths in the Gallery addon were not consistent has now been resolved to ensure a polished and uniform gallery display.

Fixed the Save & New Functionality Issue for Pages: We’ve fixed the issue that was affecting the "Save & New" functionality in SP Page Builder. Now users can save their current page and quickly begin a new one without any issues.

Update Now!

So, what are you waiting for? Hurry up, update and try out the new features for yourself! We’d love to hear your thoughts, so feel free to share your feedback in the comments below. 

Good luck!

Get SP Page Builder 5Live Demo

If you’re looking to bring this level of interactivity to your Joomla site, SP Page Builder has you covered! With a range of seamless interaction features, it makes adding scroll effects easier than ever. Let’s dive in and see how scroll interactions can enhance your site!

The Importance of Scroll-Based Interactions in Web Design

Scroll-based interactions have changed the way we experience websites. They make browsing more engaging, accessible, and intuitive. Instead of jumping between static pages, users move through content in a structured, interactive flow. This keeps them engaged and makes information easier to absorb. Here’s why they are essential:

• Enhances User Engagement – Scroll interactions make a website feel more dynamic and responsive. They keep users interested and encourage them to explore further. Moreover, research shows that interactive experiences significantly increase time spent on a page.
• Creates a Natural Flow of Content – Unlike traditional page layouts where all information is visible at once, scroll interactions introduce elements gradually. This helps present complex content in an organized and digestible way. 
• Strengthens Storytelling – Scroll-based interactions allow content to unfold naturally, creating an immersive, cinematic experience. This approach is widely used in product showcases, portfolios, and marketing campaigns to guide users through a compelling narrative.
• Improves Information Retention – When content is revealed progressively, users absorb information more effectively. Movement and animations help reinforce key messages, making them more memorable than static text alone.
• Optimizes Website Performance – Scroll interactions help manage content density by reducing clutter. Instead of displaying everything at once, elements appear gradually as users scroll. This ensures a smooth and organized presentation of information, which improves readability, and overall user experience.
• Encourages User Actions – Interactive elements guide users toward specific actions, such as signing up for a service, making a purchase, or reading further. Smooth transitions and visual cues make navigation more intuitive and improve conversions.

Understanding Scroll-Based Interactions in SP Page Builder

Scrolling effects in SP Page Builder add interactivity to your website by animating elements as users scroll. These effects can be applied to any addon, bringing motion to almost any part of your page. 

You can easily customize how elements appear, move, scale, rotate, and change opacity—all with just a few clicks.

Types of Interactive Scroll Effects

In SP Page Builder, three types of scrolling effects are available:

• While Scrolling Into View: These effects activate when an element enters the viewport as the user scrolls down the page. The types of interactions include move, skew, scale, blur, rotate, and opacity.
• Mouse Movement Interaction: This allows website elements to respond to mouse movement, such as the Tilt Effect, which creates a 3D tilt on elements based on the user’s cursor movement.
• Parallax Effect: This creates a dynamic visual experience. As users scroll, background elements move at a different speed than the foreground. This difference in movement adds depth to the page which creates a more immersive browsing experience.

How Timeline Controls Animation Flow

The Timeline is a key feature for controlling animation flow in SP Page Builder. It provides a visual interface that divides the viewport into segments, allowing you to control when animations start and stop based on the user's scroll position.

• 0% – Represents the bottom of the viewport (i.e., when the page begins to load).
• 50% – Represents the middle of the viewport (i.e., halfway down the page).
• 100% – Represents the top of the viewport (i.e., when the page has been fully scrolled).

You can set the starting and ending points for your animations along this timeline. For instance, an animation can start when an element enters the viewport and finish when it reaches the middle or top of the screen. This gives you precise control over how content appears as the user scrolls.

X, Y, and Z Axes in Motion Settings

SP Page Builder uses a three-axis system to control the direction and movement of elements during scroll interactions:

• X-Axis (Horizontal): Controls the movement of an element from left to right. Positive values move the element to the right, while negative values move it to the left.
• Y-Axis (Vertical): Controls the movement of an element from top to bottom. Positive values move the element downward, while negative values move it upward.
• Z-Axis (Depth): Adds a third dimension of movement to the element. Positive values move the element toward the user (out of the screen), while negative values push it away from the user (into the screen). The Z-axis gives the website a sense of depth, making the animations feel more three-dimensional.

Using axes, you can create complex animations that move an element across the page in multiple directions, making the scroll interaction visually stunning and immersive.

Parallax Effect for Added Depth

In SP Page Builder, the parallax effect can be applied to any section, along with its nested rows and columns. This effect brings your page to life by adding depth, creating a more dynamic and visually engaging experience for users as they scroll.

To enable the effect, simply navigate to your section settings and toggle the Parallax Background option. You can further customize the effect through the settings panel, allowing you to control how it looks on your site.

Scroll-Based Interactions and How to Apply Them

SP Page Builder provides a range of immersive effects that can be easily customized to align with your creative vision. 

This section dives into the basics of scroll interaction effects. Learn how to apply them and transform your website into a more dynamic, engaging experience.

Move Elements on Scroll

The Move effect lets your design elements shift dynamically across the X, Y, and Z axes, adding a smooth, natural flow to your visuals. 

In this tutorial, we’ll get two elements moving in from opposite directions as the user scrolls, seamlessly merging into a cohesive design. Here’s how to do it:

• Click on your element, open its Addon Settings, and go to the Interaction tab.
• Toggle Enable Interaction and add the Move effect from Scroll Action—this will create two points in your timeline.
• To make the first element move in from the left as soon as it enters the viewport, set its starting position to 0% and adjust the X-axis value to -160.
• Now, for the second element, set the X-axis value to 200 so it moves in from the right.
• The interaction is set to complete at 70%, but you can tweak the timeline and axis values to fit your creative vision.
• Hit Save, preview your work, and watch your design transform with smooth, engaging motion!

Scale Elements on Scroll

The Scale interaction adds a dynamic flow to your design by allowing elements to resize as users scroll—expanding or contracting smoothly based on the X and Y axes. It creates a fluid, engaging transformation that brings your design to life.

In this demo, we’ll scale one element up while the other scales down, adding an exciting visual impact as the user scrolls.

Here’s how to make it happen:

• Toggle Enable Interaction and add the Scale effect from Scroll Action.
• For the first element, set its starting value to 0.4 to make it scale up.
• For the second element, set the starting value above 1 and the ending value to 1, so it scales down to normal size when it comes into view.
• Here, the interaction is set to complete once the user scrolls through 60% of the viewport, but feel free to tweak it to your liking.
• Next, opacity and blur effects has been added to enhance this interaction, but you can experiment with other effects to find what works best.
• Once you're happy with it, hit Save and Preview to see your dynamic design in action!

Rotate on Scroll

The Rotate effect brings motion to your design, letting elements spin, flip, or turn with precision. Flip vertically using the X-axis, horizontally with the Y-axis, and rotate smoothly in either direction with the Z-axis.

In this demo, we’ll make the second design element move in while rotating counterclockwise for a seamless, eye-catching effect.

Here’s how to do it:

• Add the Rotate effect to the timeline along with the Move effect.
• Set the Z-axis value to 180 to create a counterclockwise rotation.
• Hit Save and Preview to watch your design come to life!

Skew Elements on Scroll

The Skew effect adds a dynamic tilt, transforming elements into sleek, angled shapes. A positive X-axis skews left, a negative X-axis skews right, and the Y-axis shifts elements up or down, creating a striking 2D illusion.

For this demo, we’ll make an element skew to the left:

• Open the addon's settings and add Skew to the Interaction timeline.
• Set the X-axis to a positive value to tilt the element left.
• Hit Save & Preview—it's that simple!

Control Opacity on Scroll

The Opacity effect controls an element’s visibility, from 0 (fully transparent) to 1 (fully visible). Pair it with Move and Rotate to create fluid, engaging interactions.

In this demo, as users scroll, the information glides in smoothly—but we’re taking it up a notch! Let’s make the descriptions fade in as they move, creating an effortlessly seamless transition.

• Add the Opacity effect alongside the Move effect.
• Set the starting value to 0 (fade in from transparent) and the ending value to 1 (fully visible).
• Follow the same steps for all your desired elements, then hit Save & Preview to see your design come to life!

Tilt Elements on Mouse Hover

The Tilt effect adds 3D movement on mouse hover, creating a dynamic interaction where the element reacts to the user's actions.

• Go to your addon’s Interaction tab and toggle the Enable Tilt Effect on.
• Choose between Forward (pulls towards the mouse) or Opposite (pushes away) based on your design.
• Fine-tune the Speed and set the Tilt Value for that perfect, smooth motion.

Best Practices for Using Scroll-Based Interactions

To create a seamless and enjoyable user experience, it’s important to apply scroll-based interactions thoughtfully. Here are some best practices to help you optimize your animations:

• Use subtle animations to enhance the experience without overwhelming the user. A gentle effect can grab attention without distracting from the content.
• Prioritize performance by testing animations across different devices and ensuring they run smoothly without causing delays or lag.
• Optimize scroll effects for different devices, keeping them simple and accessible. SP Page Builder lets you enable interaction effects for mobile and tablet devices for a more responsive experience.
• Ensure every interaction serves a clear purpose and enhances the user journey. Avoid using animations just for the sake of visual appeal—make sure each effect helps guide the user or improves navigation.
• Test and iterate by reviewing how scroll-based interactions feel during actual user behavior, ensuring that the animations align with their expectations and needs.

Wrapping Up!

Scroll-based interactions may seem like a small design detail, but they’ve redefined how users engage with websites! Striking the perfect balance between simplicity and engagement allows for smooth, immersive storytelling that enhances the user experience.

If you've followed along with our article, you're already familiar with the basics of SP Page Builder’s scroll interactions. But why stop here? Explore even more possibilities—stack interactions, time them perfectly, and create a dynamic, fluid user experience that keeps visitors hooked!

Get SP Page Builder Pro

A well-designed recipe website does more than just list ingredients and instructions. Your recipes tell the story of how your food is made, so you need a website that showcases that story in an engaging way.

In this guide, we’ll explore the essential elements for building a dynamic recipe website that not only looks professional but also enhances user experience, boosts your online presence, and allows you to share your love for cooking most effectively.

Why Your Recipe Website Should Be Dynamic

A static website may work for a handful of recipes, but if you’re serious about sharing your culinary creations, you need a website that grows with you.

Here’s why we need a dynamic website:

• Effortless Recipe Management: Make a change once, and it updates across your site instantly. Adjust ingredient measurements, tweak cooking times, or add new tips without manually editing each recipe page.
• Optimized SEO: A dynamically structured website improves search visibility, helping food enthusiasts discover your recipes. With proper SEO implementation, your content has a higher chance of ranking in search engines. 
• Seamless Collaboration: Whether you’re a solo food blogger or managing a team of contributors, a dynamic website makes collaboration easier. Multiple users can add or update recipes without disrupting the site’s layout, allowing your website to grow into a thriving hub for culinary creativity.

Step-by-Step: How to Build A Dynamic Joomla Recipe Website

With Joomla and the right tools, you can create a dynamic, user-friendly recipe site in just a few steps. 

Let’s dive in and get cooking!

1. Gather Inspiration and Ideas

Before jumping into website building, take a moment to explore top recipe websites. Notice how they structure recipes, present ingredients, and guide users through cooking steps. Do you want a minimalistic design or something more vibrant? Take inspiration but make sure your website reflects your personal brand and style.

2. Choose The Right Joomla Page Builder

To make your website easy to build and manage, use a Joomla page builder that supports dynamic content. SP Page Builder is a great choice because it lets you create a visually appealing site with drag-and-drop functionality while keeping content dynamically structured. 

SP Page Builder’s built-in Dynamic Content allows you to organize, update, and display your recipe content effortlessly, eliminating the need for third-party dependencies. 

With the dynamic content, you don’t have to manually update each page whenever you add a new recipe. Instead, all your recipes are stored in one place, and updates are reflected automatically across your website.

3. Create a Recipe Collection

After you have installed SP Page Builder and set up your site, the next step is structuring your content. This involves creating structured collections to dynamically store and manage your recipe data.

To get started, navigate to your Joomla Dashboard and go to Components > SP Page Builder Pro > Dynamic Content.

Follow these simple steps to create a new collection:

1. Click Add New Collection to create a customizable collection—or jumpstart the process with the Recipe Preset, which includes essential fields like Ingredients, Cooking Instructions, Nutritional Information, etc. 

2. If starting from scratch, enter a Collection Name. An alias will be generated automatically, but you can edit it if needed.

3. Add Custom Fields to further refine your collection to your needs. You can include:

• Image Field – to showcase the dish.
• Text Fields – for short details like preparation time.
• Text Area – for longer content such as descriptions and cooking instructions.
• Rich Text Field – to format ingredients properly.

4. Customize the fields based on your needs. You can also add extra fields such as Category, Difficulty Level, or External Links to enhance flexibility.

5. Click Create Collection—and you're done!

4. Insert Recipes into Your Collection

Now that you have a collection set up, start adding recipes:

1. Click “Add New Item” in your Recipe Collection.

2. Fill in the fields with details – Upload images, add ingredients, enter cooking instructions, and more.

3. Your recipe is now stored dynamically and can be displayed anywhere on your website.

The best part? If you ever update a recipe, those changes will automatically reflect wherever that recipe is displayed on your website. 

5. Effortlessly Design Dynamic Collection Index Pages

Now that you’ve created a recipe collection and added your recipes, it’s time to showcase them on your website. Instead of manually updating recipe lists, you can create a Dynamic Collection Index Page that automatically displays your recipes with just a few simple steps.

• Navigate to Pages in SP Page Builder and click + Add.
• Hover over New Dynamic Content Page, and a dropdown will appear showing all the collections you’ve created.
• Select your Recipe Collection and click Index.
• A popup will prompt you to name the page—enter a suitable name like Recipe Collections and click Save.
• You’ll be redirected to the backend editor, where you can design your page.

Designing the Collection Index Page

To make your index page dynamic, you need to use SP Page Builder’s Dynamic Content Addons. These add-ons allow your recipe collection to update automatically whenever you add new recipes.

• Click Add Elements and go to the Dynamic Content section.
• Drag and drop the Collection addon onto your page.
• Inside the Collection addon, add the Dynamic Image and Dynamic Text addons.
• Click the Collection addon and set the Source to your Recipe Collection—this will dynamically pull all the recipes from your collection.

Mapping Collection Fields

To display recipe images, select the Dynamic Image addon, then navigate to Field Source under the Content section and choose the Image field from your collection.

To show recipe details, add multiple Dynamic Text addons and individually set their Field Source to relevant text fields like Ingredients, Cooking Instructions, or Preparation Time.

Arrange the layout as needed—for example, you might want to display ingredients before cooking instructions. Simply add a Dynamic Text addon for the ingredients field, then drag another Dynamic Text addon below it for the cooking instructions field.

Note: The Dynamic Image and Dynamic Text addons must be placed within the Collection Addon when creating a collection list.

With this setup, your recipe collection will dynamically update across your website without manual edits. Plus, you’re not limited to dedicated index pages, you can embed recipe lists anywhere on your site to improve accessibility and user experience.

Connecting Recipes to Their Details Pages

For the final touch, you need to ensure that each recipe in your collection links directly to its details page. Select a Dynamic Text or Dynamic Image addon within the Collection Addon.

For example, if you want users to click on a recipe name and be redirected to its details page, choose the Dynamic Text addon displaying the recipe name. Beneath the Content section, you will find another section called Link.

Under the Link section, switch to the Page tab and select the Recipe Details page from the dropdown menu. You can further customize the link behavior, such as opening it in a new tab, using the Link Options settings.

Once saved, every recipe in your collection will dynamically link to its details page, improving navigation and user experience across your site.

Note: Ensure you create the details page first so that you can directly link the collection items to the details page.

6. Design Once, Display Every Recipe with Dynamic Details Page

Imagine having to manually design a page for every recipe on your site—sounds exhausting, right? With SP Page Builder’s dynamic content, you only need to design the recipe details page once, and every recipe in your collection will automatically use that layout, pulling in the correct details dynamically.

Creating a Dynamic Recipe Details Page

• Go to SP Page Builder and navigate to Pages.
• Click + Add and select New Dynamic Content Page.
• Hover over your Recipe Collection and click Details Page.

Note: SP Page Builder automatically generates a slug (URL) for each dynamic page, making navigation seamless.

Unlike Collection Index Pages, you don’t need to nest Dynamic Text and Dynamic Image addons inside a Collection Addon. Instead, you can freely place them anywhere on the page and map them directly to your recipe fields.

Use any SP Page Builder addons to create the page layout exactly how you want. Just place Dynamic Text and Dynamic Image addons where recipe details (title, images, ingredients, etc.) should appear.

Once your layout is in place, connect the Dynamic Text and Image addons to your Recipe Collection fields, and your template will automatically update for every recipe—ensuring a seamless, visually appealing design without manual effort.

Dynamically Display Related Recipe Items

If you have similar recipes within your collection, you can create a Collection Index within your details page to display related recipes. 

Insert a Collection Addon within your Details Page, preferably beneath all of the recipe details. After adding the collection, you must adjust the Filter. Add a new filter condition, where you have to select a field, then choose different conditions depending on the field type.

For example, when filtering recipes by title, you can set the conditions like:

Condition: Starts With "Easy" → Displays only recipes that begin with “Easy.”

Condition: Contains "Chocolate" → Shows all recipes that include the word “Chocolate.”

8. Optimize Recipe Pages With Dynamic SEO

With SP Page Builder, you don’t need to manually update SEO settings for each recipe page. To access SEO settings, simply navigate to Page Settings and click on the SEO tab. SP Page Builder allows you to automatically generate unique SEO data and Open Graph images using variables.

Variables are fields in your recipe collections that dynamically populate SEO metadata for each recipe. For example:

• Title: “Try {{Recipe Name}} – A Delicious {{Cuisine Type}} Dish”
• Meta Description: “Discover how to make {{Recipe Name}} with {{Main Ingredient}} in just a few steps.”
• Open Graph Image: Use {{Recipe Image}} to display a unique thumbnail for social sharing.

For an in-depth look at Dynamic Content in SP Page Builder, be sure to check out our detailed documentation.

Wrapping Up

Building a dynamic recipe website is like crafting the perfect dish—every element must come together for a seamless, engaging experience. With SP Page Builder’s dynamic content features, you can create a visually appealing and functional site that attracts and keeps food enthusiasts engaged. 

Start building your dynamic recipe site today and inspire the world with your cooking!

With a fresh redesign and enhanced features, MegaDeal II is poised to shine brighter, bringing renewed energy to your online store.

Ready to see what’s new? Let’s explore!

MegaDeal II v3.0.0 Changelog:

• Update: Added support for Joomla v5.2.4.
• Update: The latest version of SP Page Builder v5.5.2.
• Update: Replaced Helix3 with Helix Ultimate for better performance and features.
• Update: Added EasyStore v1.4.5 as the eCommerce extension.
• Update: PHP 8 compatibility.

Choose From 4 Pre-defined Color Presets

The MegaDeal II template now offers four pre-defined color presets, allowing you to effortlessly customize your store's design to fit your brand. Each preset is carefully crafted to deliver a unique and visually striking look for your site to stand out. With just a few clicks, you can transform your site’s aesthetic and provide a seamless, soothing experience for your visitors.

Visually Striking Home Page to Showcase Products at a Glance

Experience a refreshed home page design that is ready to use and crafted to give your site an engaging look. Highlight your products effortlessly with dedicated sections for quick previews and detailed views. You also get a section to showcase flash deals to inspire urgency and turn interest into instant sales! Plus, include time-sensitive offers to keep your visitors engaged. The layout is optimized with strategically placed CTAs, helping you turn visitors into loyal customers with ease.

Smartly Present Your Products with the Dedicated List and Details Pages

Take your eCommerce store to new heights with the redesigned product listing and details pages! Now fully optimized for EasyStore, this template gives you all the tools you need to showcase and manage your products like a pro.

• Dedicated Product Listing Page and Details Page
  Showcase your products with precision using separate pages for listings and detailed views, ensuring an organized and user-friendly shopping experience.
• Seamlessly Add and Display Product Variants
  Effortlessly manage multiple product variations, such as sizes, colors, or styles, with intuitive options for customers to explore and select.
• Advanced Filters for Effortless Product Discovery
  Enable customers to quickly narrow down their search with robust filtering options, making it easy to find exactly what they’re looking for.
• Smartly Showcase Customer Reviews and Suggested Items
  Build trust and encourage additional purchases by prominently displaying customer feedback and personalized recommendations for related products.

Built-in About and Contact Pages to Build Trust and Credibility

The updated design of the About page ensures your story is presented in a visually compelling way, engaging visitors from the moment they land on the page. With the fresh layout, it’s easier to connect with your audience and convey your brand’s values.

The Contact Us page has been revamped with a sleek, modern design, making it easier for visitors to reach out. The user-friendly form allows for quick communication, and with the embedded Google Map, your location is just a click away.

Discover New Insights With a Blog List and Blog Details

The MegaDeal II template brings a sleek and user-friendly experience to your blog with its thoughtfully designed Blog List and Details pages. Keep your users informed with the latest news and updates, all presented in a visually appealing and satisfying layout.

• Card-Style Layout: The blog listing page features a clean and organized card-style layout, making it easy to navigate and visually appealing.
• Prominent Tags: Tags are displayed with each blog item, helping readers quickly identify key topics and categories.
• Smooth Pagination: Pagination functionality ensures a seamless browsing experience, allowing users to easily explore additional content.
• Interactive Rating: The option to rate individual articles encourages reader engagement and provides valuable feedback.

Try the Enhanced MegaDeal II Template Now!

Already using the MegaDeal II template? Update today and experience its flawless performance. Haven’t tried it yet? Give your eCommerce store the look, feel, and functionality it deserves by trying it now.

Do let us know your experience in the comments. Good Luck!

Learn MoreBuy Now

With this update, you can enjoy full support for the latest Joomla 5, PHP 8.3 compatibility, updated versions of related extensions, and more—making these templates better than ever!

Let’s check out the overall changelog and the list of your favorite templates that got updated this time:

• Update: The latest version of Joomla v5.2.3.
• Update: Support for SP Page Builder v5.4.6.
• Update: The latest version of Helix Ultimate framework v2.1.1.
• Update: PHP 8.3 compatibility.
• Update: Added EasyStore v1.4.3 compatibility to the related templates.
• Update: Included the latest version of SP Property to the related templates.
• Update: Included the latest version of SP Booking to the related templates.
• Update: Included the latest verison of Easy Image Gallery and SP Simple Portfolio to the related templates.
• Fix: Fixed article social share disappearing issue with SP Author Archive v2.0.2 in the Gazette template.
• Fix: Fixed layout-breaking issues in Edulif, Folium, and Themis templates.
• Fix: Overall stability improvements and bug fixes.

Here's the list of updated templates:

1. AppStream - SaaS & App Landing Joomla Template

2. Celestia - Real Estate and Property Management Joomla Template

3. Crafty - Complete eCommerce Template for Crafts and Pottery

4. Eleva - Premium Joomla Template for Creative Agencies 

5. Homify - A Joomla eCommerce Template for Modern Home Decor Stores 

6. Loqo - An Exclusive Joomla Template for Digital Marketing Agencies

7. LuxeVista - A Versatile Joomla Template for Resort & Holiday Websites

8. NestFund - A Sleek and Professional Joomla Template for Service Firms

9. Optimax - Premium Joomla Template for Web Design Firms

10. Orbit - eCommerce Template for Tech Gadgets and Electronics

11. Trove - A Joomla eCommerce Template for Gadget & Electronics Shops

12. Velvet - An All-In-One eCommerce Template for Fashion-Centric Brands

13. Visualin - Exclusive Joomla Template for Visual Jockeys 

14. Artion - Joomla Multipurpose Template for NFT & Portfolio

15. Edulif - Joomla Education Template with Powerful LMS Inside

16. Finion - Finance, Accounting & Consulting Firm Joomla Template

17. Fixter - Joomla Template for Home Maintenance and Handyman Service Websites

18. Folium - Complete Joomla Portfolio Template

19. Gazette - News, Magazine, and Blog Joomla Template

20. Language School - Language Institute, Club, and Coaching Joomla Template

21. Opus - Creative Agency Joomla Template

22. Startup Landing - Joomla Landing Page Template for Startups & Agencies

23. Themis - Complete Law Firm Template for Lawyers and Attorneys

If you’re using any of these templates, update them now to enjoy the latest features and improvements! Be sure to give us your thoughts and opinions in the comments. 

If you’ve been craving an easier and more efficient way to create and manage your website’s content, you're in for a treat. Introducing the much-awaited Dynamic Content in SP Page Builder - a powerful feature that can make your workflow efficient, seamless and oh-so-smart!

So get ready to be amazed, as we unveil the game-changing power of the mighty Dynamic Content.

How Dynamic Content Simplifies Your Workflow

Imagine managing a website with diverse content. Jumping back and forth between pages to update contents individually can become overwhelming and time-consuming.

But with Dynamic Content in SP Page Builder, those struggles are a thing of the past. This powerful feature centralizes your content, allowing you to make updates in one place and see them reflected site-wide.

Here’s how SP Page Builder’s Dynamic Content simplifies your workflow:

• Centralized Content Management: Manage all your content in one place, making updates and organization simple and efficient.
• Dynamic Content Integration: Easily integrate your content with your website’s design, ensuring that updates are reflected across all relevant pages automatically.
• Ready to Grow: As your content grows, your website grows with it—automatically! No extra effort, just seamless scalability.
• No More Extra Tools: With SP Page Builder’s Dynamic Content, you don’t need third-party tools. Everything you need is right here at your fingertips, making your workflow simpler.

A Quick Tour Into the All-New Dynamic Content

Dynamic Content acts as the central hub of content management in SP Page Builder. It allows you to easily define content structures, input essential data, and effortlessly integrate this data into your site’s design, creating a seamless and customizable experience. Let's take a look in details:

Create Collections That Adapt to Every Purpose

No matter what kind of website you’re building, SP Page Builder’s Dynamic Content makes it super easy to create collections for just about anything. With custom fields, you can structure your collections to capture the data you need. 

To make things even easier, it also has various Collection Presets that let you jumpstart your process, helping you get started effortlessly!

Once your collections are ready, populating them with items is a breeze. All the fields you set up are already in place, so you can quickly fill in details like images, text, and descriptions. 

Advanced Reference and Multi-Reference Fields

Apart from defining the data in your collections, you can take it a step further with advanced features like Reference and Multi-reference. This helps to connect one collection with other collections to reuse data or create relations.

Reference Field

Seamlessly connect an item from another collection with the Reference Field! Whether you're linking clients to their projects or connecting speakers to their events, Reference Fields creates meaningful relationships, making it easy for users to navigate and access relevant information.

This provides a more organized and interconnected user experience, helping visitors quickly find related details with just a few clicks.

Multi-Reference Field

While the Reference Field lets you connect a single collection item to a relevant collection, the Multi-Reference Field allows you to link multiple collection items. Whether it’s linking multiple sessions to an event or associating multiple speakers with specific sessions, you can create seamless yet intricate connections between your collections.

It makes managing interrelated data simple and efficient while giving your website a more dynamic, organized structure. 

Together, these powerful options give you the freedom to create highly structured, scalable collections that can evolve with your needs and boost efficiency.

Seamlessly Connect Design and Content Together

Now that you have your Collections and their Items all chalked down, it is time for SP Page Builder’s editor to step in! With the dedicated addons—Collection, Dynamic Text, and Dynamic Image—you can effortlessly connect your collection data to design Dynamic Index and Details pages.

• Create Dynamic Index Pages: Design and create dynamic index pages for your collection lists by automatically pulling relevant data from the collection list you've already created.
• Create Dynamic Details Pages: Collection Details pages act as templates for showcasing individual items from your collections, ensuring a consistent presentation across your site. This is perfect for displaying individual blog posts, portfolio entries, and other similar content.
• Showcase Collection Index, Anywhere Dynamically: Not only dedicated Index pages, but you can also create dynamic collection lists on any existing page of your website!

But wait, there’s more! With Advanced Filtering Options, you can filter collection items based on fields to appear on the collection index. By strategically using filters and conditions, you can create highly targeted content displays.

Optimize Your Details Pages With Dynamic SEO

With Dynamic SEO, optimizing your Collection Details pages is a cinch! Using dynamic variables, you can include SEO metadata for each collection details page, improving search engine rankings and social media engagement. Simply navigate to the SEO settings, define patterns with variables, and set Open Graph titles, descriptions, and images to ensure your content stands out online!

Don't forget to checkout our detailed documentation to learn more about the amazing functionalities of Dynamic Content.

Please go through the changelog below to know more about other fixes and enhancements that come packed with this version.

Changelog of SP Page Builder v5.5.0:

• New: Introduced Dynamic Content
• New: Dynamic Collection Presets
• New: SEO for Collection Details pages
• New: Added compatibility with the o3-mini model
• Update: Merged regular pages, popups, and dynamic pages into a single, organized menu
• Fix: Improved Stability & Performance

Experience the Wizardry of Dynamic Content Today!

Don’t just take our word for it—update SP Page Builder to the latest version now and experience the power of Dynamic Content yourself. Say goodbye to manual updates and hello to effortless consistency, saving you valuable time and ensuring your site always stays up-to-date!

Learn MoreGet SP Page Builder 5

Search engines need a little helping hand to understand the images on your site and make them more accessible to people searching for relevant content.

This is when image search engine optimization becomes necessary. Optimizing your images isn’t just about making them look good—it’s about helping search engines understand their relevance and value. This process ensures your images are properly formatted and tagged to improve your rankings, boost visibility, and draw more visitors to your website.

Let’s explore some actionable strategies to optimize your images and unlock the full potential of your Joomla website!

Use Original Images With the Appropriate Format

Firstly, it is wise that you always use original images. This helps to differentiate your site from competitors using generic stock photos. Ensure that these images are high-resolution and relevant to the site's theme.

Choose formats based on image use: 

• PNG: This format is best for images that require transparency or sharp edges.
• JPEG/JPG: The JPEG or JPG format is ideal for detailed photographs due to efficient compression. It is wise to use this format for most of your static images.
• SVG: This vector format is ideal for logos and icons. SVGs are scalable without losing quality and are easily customizable with CSS or JavaScript.
• WebP: WebP offers superior compression without compromising quality, with broad browser support. You can use these for high-quality images.
• AVIF: AVIF provides even better compression and image quality than WebP but with limited browser support. Use WebP for compatibility and AVIF for maximum compression.
• GIF: GIFs are best for simple animations but less efficient than WebP for complex graphics.
• For Joomla development, SP Page Builder eases the process of uploading and organizing images using the intuitive Media Manager. By using the various image-related addons, you can upload images from any of the aforementioned formats.

Apply SEO-Friendly Image Naming Formats

While uploading your images, you need to make sure that you are using the proper naming format for the image files. Clear and descriptive names that contain relevant keywords help search engines interpret and index your images more effectively.

A few important aspects to keep in mind while naming your images include:

• Be Meaningful and Relevant: Ensure that file names reflect the image content while incorporating relevant keywords. For instance, use "gold-diamond-ring.jpg" instead of "IMG001.jpg."
• Use Hyphens: Separate words with hyphens (-) rather than spaces, underscores, or other symbols. Hyphens are more readable for search engines and users alike.
• Keep File Names Lowercase: Always use lowercase letters to avoid inconsistencies across platforms or browsers that may be case-sensitive.
• Consistent Versioning: For multiple versions of the same image, apply clear version numbering, like "how-to-optimize-images-v01.jpg."
• Keep It Concise: File names should be clear yet concise, avoiding keyword stuffing or overly long descriptions.
• Use Alt Text and Descriptions

The readability of your images highly depends on the alt text, it defines your image for search engines. Alt text enhances site accessibility for visually impaired users, provides additional context, and improves user engagement. 

There are some techniques you can apply to effectively use alt text:

• Describe the image accurately and concisely.
• Include relevant keywords organically without keyword stuffing.
• Avoid generic phrases like “image of” or “picture of” and focus on the content. For example, instead of “Image of jewelry.”, try using “Close-up of hands wearing gold jewelry, highlighting bracelet and ring designs.”
• Include captions or image descriptions to provide additional context, improving content relevance and engagement.

SP Page Builder's image-centric addons empower you to customize alt text with ease, ensuring both accessibility and SEO benefits.

Resize Images to Optimize Load Times

Faster websites provide a better user experience and achieve higher rankings in search engines like Google, especially for mobile users with slower internet connections. To support this, ensure your images are resized and compressed before uploading. Properly optimized images not only improve site performance but also enhance overall engagement and satisfaction.

Some of the benefits of resizing images include:

• Faster Load Times: Resizing images for specific devices reduces file sizes, which speeds up load times by ensuring faster and smoother rendering. 
• Reduced Bandwidth Usage: Resizing and compressing images ensures that users, especially those on limited data plans, don’t experience unnecessary data consumption. 
• Prevents Layout Shifts: By setting precise image dimensions, you prevent layout shifts that can disrupt the flow of the page. 
• Device-Specific Image Resizing: Scaling images for different screen sizes reduces load times and optimizes the user experience across all devices.

Tailor image sizes to different devices by compressing them using tools like TinyPNG, ImageOptim, etc. These tools efficiently compress images without sacrificing quality, ensuring faster load speeds and improved website performance, especially on mobile devices with slower connections.

Use Structured Data

Implementing structured data for your images provides search engines with detailed information and context about the content, improving their chances of appearing in rich results or Google Image Search. 

To enhance your images' visibility and performance in search results, you can implement structured data using formats like Schema.org or JSON-LD.

Here's a brief overview of how you can apply structured data and its advantages:

• Use Schema.org Markup: Schema.org allows you to describe images with details like content, creator, license, and related webpage, improving their display in search results and boosting SEO.
• JSON-LD for Easy Integration: JSON-LD offers a simple way to add image metadata, like descriptions and copyright info, without affecting your HTML, improving search rankings.
• Add Specific Details for Image Metadata: Include metadata like image type and creator, making it easier for search engines to interpret the image’s relevance and improve search visibility.
• License and Attribution Information: Adding licensing data helps search engines recognize copyright status or reuse permissions, enhancing visibility, especially for Creative Commons images.
• Link Images to Relevant Pages: Associating images with specific pages or products helps search engines connect visuals to related content, increasing the chances of appearing in image or product searches.
• These methods allow you to provide additional context about your images, making it easier for search engines to understand and categorize them. 

Make Images Responsive and Adapt to Different Screens

Ensuring your images adjust properly to various screen sizes is crucial for a seamless user experience across all devices. Responsive images help improve site performance, user engagement, and SEO rankings. 

A standard practice is to use CSS properties like “max-width: 100%” and “height: auto” to allow images to scale proportionally and adjust smoothly to different screen sizes. This prevents images from overflowing on smaller screens while maintaining their quality and aspect ratio.

SP Page Builder offers an auto-responsive design process. You can easily ensure your images adapt to different mobile, tablet, and desktop screens as the images get dynamically adjusted. You can also set different visibility options for the images based on specific screens.

Implement Lazy Loading

Browsing should feel swift, not sluggish. With lazy loading, your images load only when necessary, so that your site’s visitors don’t get burdened with unwanted delays.

Essentially, instead of loading all images at once when a page is accessed, lazy loading ensures that images load only when they appear in the user’s viewport.

Here are a few ways lazy loading helps in image optimization:

• Improves Page Load Speed: By loading only visible images initially, lazy loading significantly reduces initial page load time, creating a faster and smoother experience for users.
• Reduces Bandwidth Usage: Users only download images they view, conserving their data and reducing server strain.
• Enhances Mobile Performance: Lazy loading ensures optimal performance on mobile devices, especially for users on slower connections.
• Boosts SEO Rankings: Faster page load times improve user experience, which is a critical factor for search engine rankings.

You can easily enable Lazy Load on your Joomla site from the SP Page Builder Configuration settings, without having to modify any code. This will effectively apply lazy loading to the images on your site.  

Test Images for Issues

The final and arguably most crucial step for optimizing images for SEO is image testing. It basically allows you to ensure that you have properly implemented all the previous steps. 

Below you will find some key ways to test images, as well as the suggested tools that can help you: 

• Detect Slow Load Times: Use tools like Google PageSpeed Insights and GTmetrix to identify images causing slow load times and optimization issues, helping you improve site speed.
• Check for Broken Links: Regularly scan for broken image links using website crawlers or browser testing tools to avoid missing visuals and disrupted user experience.
• Test Across Devices and Browsers: Ensure images display correctly on all devices and browsers by using tools like BrowserStack or CrossBrowserTesting to test layout and size.
• Monitor Image Quality: Continuously monitor for image quality issues, such as pixelation, and re-optimize images when necessary.
• Optimize for Mobile: Test image responsiveness on mobile using tools like Google’s Mobile-Friendly Test to ensure a smooth mobile experience.

Summary

To ensure your Joomla website’s images are optimized for SEO, follow these key strategies:

1. Select high-resolution, relevant, and appropriately named images in the correct format (PNG, JPEG, SVG, WebP, AVIF, GIF) to ensure compatibility and quality.
2. Add concise, keyword-rich alt text and image descriptions to improve accessibility and search engine rankings.
3. Compress images and enable lazy loading to enhance load speeds and mobile performance.
4. Implement structured data to provide search engines with additional image context, improving visibility in search results.
5. Ensure images adjust to different screen sizes.
6. Regularly test images for broken links, slow load times, and display issues across devices.
7. By following these steps, you’ll significantly improve your image SEO, enhance your site’s performance, and provide a seamless user experience.

By following these steps, you’ll significantly improve your image SEO, enhance your site’s performance, and provide a seamless user experience.