Blog - JoomShaper

How to Optimize Your Joomla Website for SEO with SP Page Builder

2023-02-20T11:27:58+00:00

Joomla is a popular content management system that can help improve your website's search engine optimization (SEO) in a number of ways. With its built-in SEO features, customizable templates, and third-party extensions, Joomla provides a solid foundation for creating SEO friendly websites. And with a powerful drag & drop tool like SP Page Builder, you can not only build modern Joomla websites but also further optimize your Joomla site's SEO.

In this article, we are going to show you how SP Page Builder can optimize the visibility and ranking of your Joomla website on search engines. Let’s get started!

Why is SEO Important for Websites

SEO is important for websites as it helps to increase visibility and ranking on search engine results pages. A higher ranking can lead to increased traffic, engagement, and conversions. In short, SEO can contribute to the overall success and growth of a website.

Here we’ve listed some core reasons behind optimizing your Joomla website for SEO.

An appropriate SEO strategy will boost organic traffic
SEO will increase business engagement with target customers
Good SEO practice improves the user experience
SEO will put your website ahead of the competition
SEO boosts website credibility

How to Optimize Your Joomla Website’s SEO with SP Page Builder

In this section, we’ll explain some optimization tips for your Joomla website that you can easily apply with SP Page Builder.

Write a Great Meta Description

The meta description is an HTML element that offers a brief summary of a webpage. The search engines always collect the meta description and display that on SERP. It helps both the readers and search engines to know your webpage content in a succinct form.

Try to write your meta description between 150 to 160 characters and include your focus keyword within that. It makes the meta description more SEO-friendly.

SP Page Builder has some SEO settings right out of the box. In order to write the meta description within SP Page Builder, you have to navigate Options > SEO > Meta Description.

Then write your meta description and click on the Save button below. That’s it!

Open Graph Optimization

The Open Graph is a Facebook owned protocol that is mainly used by social media networks to display rich results. By using the Open Graph tags, you can control what others will see when someone shares your webpage on social media platforms.

Generally, the Open Graph project contains three different metadata. These are:

Open Graph Title
Open Graph Image &
Open Graph Description

As the name suggests, the Open Graph Title is used to set your webpage title. The Open Graph Image is for cover images, and the Open Graph Description box is for writing a brief description of your webpage.

You can access the Open Graph settings of SP Page Builder by navigating to Options > SEO > Open Graph. After providing all of these, click on the Save button below. Try to limit your Open Graph description to 200 characters (including space).

Add Alt Text to Images for SEO

Adding alt text to images is important to improve a website's accessibility for people with visual impairments, help search engines understand the content of the image, and improve image search rankings. It improves the overall SEO of a webpage.

With SP Page Builder, you can easily add Alt text to your site's image and optimize height, width, radius, margin, position, etc. You can access Image Settings inside the Image addon of SP Page Builder.

Place your Keywords Accordingly

Keywords are the linchpin between what people are searching for and what you have covered in your article. Your chance of being ranked on the first page of search engines will increase drastically if the search engines can explore your keywords properly.

However, it’s not an easy task to promote the appropriate keyword to search engines. But, SP Page Builder works as a real life-savior here. You can manually input your keywords by using this Joomla page builder.

To access the keyword option, navigate to Options > SEO > Keywords. Then enter your primary keywords and click Save. That’s it!

Additional Tips to Improve Your Joomla Site’s SEO

We’ve listed some additional tips to optimize your Joomla website’s SEO even more. Let’s check those out.

Implement SEO-friendly URLs

Every search engine prefers SEO-friendly URLs. Google even suggests that webmasters use simple URLs in their SEO Starter Guide. So, you must keep your website URLs as simple as possible.

But the default Joomla URLs aren’t SEO-friendly at all. You have to do it manually. However, creating SEO-friendly URLs isn’t rocket science. You can easily do that by removing unnecessary IDs from URLs.

Here are some characteristics of SEO-friendly URLs. Here are:

Keep the URL as short as possible
Don’t use any special characters
Avoid using numbers
Make the URL easily readable
Remove any superfluous information
Always use the lowercase characters
Replace spaces with hyphens
Hide the www part, etc

By the way, you don't have to worry much about SEO friendliness while using SP Page Builder. You can easily update the alias by creating a hidden menu from the menu manager. Besides, SP Page Builder works very well with both SH404SEF and 4SEF. Simply configure SH404SEF with SP Page Builder, and you’re good to go!

Harness the Social Media Marketing

Though your activity on social media platforms won’t boost your rankings directly, it helps to build brand awareness and improve your organic traffic.

Hence, keep in mind a few best practices to increase the SEO ranking of your website.

Publish high-quality content regularly
Increase engagement with customers
Try to understand the user's demands
Promote your content on social media
Increase brand presence among customers

Use an Appropriate Interlinking Strategy

You need links to rank your content on search engines. There are two different types of links; internal and external. Both these links are important for ranking your website. Still, interlinking is the super critical one here.

Basically, interlinking is the process of linking one page to another within your own website. It gives search engines a clear idea about the structure of your website. Besides, it makes navigation super easier for both search engines and visitors.

Generate Quality Backlinks

Whenever someone links your website to their article, it is considered a backlink for your website. Backlinks are considered as the ‘vote of confidence’ from one site to another. So, create high-quality content and generate authoritative backlinks for your website.

When lots of authority sites link your website, it sends a signal to the search engines that your website is too good. As a result, the search engines improve the ranking of your website on SERP.

Speed Up Your Website

It doesn’t matter how great your content is, if your site is slow, visitors will just abandon it. There’s no alternative to increasing the loading speed of your website. We have a dedicated article about speeding up your Joomla website, give it a read if you want to know more about page speed optimization

SSL Encryption

SSL stands for Secure Sockets Layer. It is a standard security layer that establishes an encrypted link between a client and server computer. The primary reason to use SSL encryption is to keep sensitive information safe and secure from third parties.

However, SSL not only keeps your website secure but also improves your website ranking on search engines. Even Google has made SSL encryption mandatory since 2018. It shows a ‘Not Secure’ warning if your website doesn't have a valid SSL certificate.

Keep Your Website Mobile-Friendly

Making your website mobile-friendly means allowing all of your web content to be visible across all screen sizes and resolutions. Believe it or not, responsiveness has significant importance for a Joomla website. Here are some of those:

It makes your website accessible to all users
Responsiveness boosts SEO and website rankings
It improves the user experience of your Joomla website
Mobile-friendly websites have a comparatively lower bounce rate
It improves the page speed for the end users

Optimize Robots.txt file

The robots.txt file is a text file created by the webmasters like you that instructs web bots on how to crawl web pages. Though it sounds like a technical thing, it plays an important role in SEO. It controls the search engine bot’s behavior on your website.

However, if you want to permit all web crawlers to crawl your website, simply use the following Robots.txt instruction.

That's it!

These are tips to improve your Joomla website’s SEO to achieve a better ranking on search engines.

Wrapping Up

Optimizing a Joomla website for SEO might seem like a complex task. But, knowing the tips we’ve explained above might make your SEO journey a little bit smoother. Whether you already have a Joomla site or thinking of creating one these tips will help you to optimize your Joomla website for SEO.

So what’s the wait? It’s high time to start optimizing if you don’t wanna lose your potential customers to your competitors.

See you later — ciao!

Try SP Page Builder for FREE!Get SP Page Builder Pro

How to Configure Interactive Lottie Animation on Your Joomla Website

2023-01-26T06:31:24+00:00

Motion captures attention!

The moving elements always draw our attention, even to our subconscious mind. The United States National Library of Medicine published a journal about the alliance between visual motion and attentional capture. According to their research, motion always guides our attention effectively.

If you want to get more attention on your webpage, add some moving objects there. Thus the customers are more likely to get hooked to your webpage. But here comes the actual question; how can you capture visitors’ attention?

Simple, use Lottie animation!

Lottie's are far more effective in terms of capturing visitors' attention than the static assets of your website. That’s why we’re going to inform you of the overall process of adding interactive Lottie animation to your Joomla website.

What Are Lottie Animations

Lottie is basically a file format for vector graphics animations. It was named after a German pioneer of silhouette animation, Charlotte Lotte Reiniger.

A Lottie is basically a JSON-based animation file that helps web designers to display animation files on every screen. These small animation files suit any screen without pixelation. But, if we wanna talk about development, Bodymovin is the first thing we must discuss here.

The development of Lottie files became possible finally because of Bodymovin. It is an Adobe After Effect plugin that was developed by Hernan Torrisi. This plugin can export Adobe After Effects animations into JSON formats. When the web designer implements those JSON files on their website, they get those beautiful Lotties vibing on their screen!

Where Can You Find Interactive Lottie Animations for Free

There are lots of online and offline tools to design your own Lottie animation. The most popular ones are Adobe After Effects, Adobe XD, Figma, etc. However, you can design an effective Lottie animation only if you have enough time and design knowledge for that.

Despite how complex Lottie animations may seem to create, they are pretty simple to implement. Because there are plenty of free and readymade Lottie animations available online. Search for your preferred Lottie animations there, get the JSON file, and use that on your website.

However, you may collect your Lotties from Lottiefiles. It’s a great open-source platform where you can download a number of interactive Lotties for free. Let me explain the steps of finding free Lottie animations from Lottiefiles.

Browse Lottiefiles.com
Hover your mouse on the Discover menu
Click on the Free Ready-to-use Animations from the dropdown menu

You will find plenty of Lottie animation on that page. If you want a specific animation, you may use the search box on the navbar. Once you find your preferred Lottie animation, click on that and download it in whichever format you want. Lottiefiles allows users to download these animations in multiple formats such as JSON, dotLottie, ZIP, MP4, Gif, etc.

How to Add & Configure Interactive Lottie Animation

Designing a Joomla website isn’t a big deal. The real struggle begins when you want to design a professional and eye-catchy website. Well, today we are going to help you design a better website by adding and configuring interactive Lottie animations. Let’s get the list of prerequisites first.

Prerequisites

You’ll need only two things to design your Joomla webpage uniquely.

SP Page Builder Pro
Admin access to a website

Got everything?

Great! Now, let’s focus on the step-by-step process of adding some interactive Lottie animation to your website.

Step 1: Create a New Page or Article

You can add Lottie animation on both your web pages and articles. So, create a new page or article first. In this blog, we will add a Lottie in a new article. So, log in to your Joomla admin panel dashboard first. Then navigate to Content > Articles. On the article page, click the + New button on the topbar in order to create a new article.

Here, write your article title, alias, and other required settings. Then click on the Save button and select the SP Page Builder option in the article section. Now, click on the Edit with SP Page Builder button, and the SP Page Builder editor will open in a new tab.

Note: You must save the article first in order to edit the article with SP Page Builder.

Step 2: Choose the Placement Area

Now, you have to choose where you want to place your Lottie. Try to place it in such a place that it can attract the most visitors. To choose the placement area, click on the Add New Row button and choose your preferred column layout.

As you can see, there are already 10 pre-defined column layouts there. Choose the one that suits the best with your article structure. However, you can also generate your custom column layouts by using the custom columns box. We choose the 4+4+4 layout in our article.

Step 3: Use Lottie Addon

Now it’s time to use the Lottie addon. After setting up the column layout:

Choose your preferred column area where you want to show the Lottie
Click the '+' icon from there, and it will open the addons of SP Page Builder
Search for the Lottie addon and drag that to your preferred column area

After setting up the column layout, choose the place where you want to show the Lottie. Then click the ‘+’ icon from there and it will open the addons of SP Page Builder. Search for the Lottie addon and drag that to your preferred column area.

After dragging the addon on there, you’ll get a bicycle image on there. It’s just a demo Lottie animation that comes with the SP Page Builder. You can change the Lottie URL in order to use your own. We’ll discuss the process in the following step.

Step 4: Get the Lottie Animation URL

SP Page Builder supports multiple methods of integrating Lottie animations on your Joomla website. You may either upload the Lottie GIF file directly into the media library or use an external URL of the JSON file of your preferred Lottie file. In this blog, we will use a Lottie of an Aerobatic Plane which is hosted on Lottiefiles.

As we’ve mentioned earlier, Lottiefiles has thousand of free Lottie animations to choose from. Just choose a good Lottie and click on that. You’ll get the Lottie animation URL just under the animation.

Go to Lottiefiles.com and copy the JSON link of your preferred Lottie animation. We’ll need that URL to configure the Lottie animation. Make sure that you have copied the full URL correctly. Otherwise, SP Page Builder cannot fetch your preferred Lottie file from the source. By the way, you must log in to get that JSON URL.

Now, click on the Lottie section, and it’ll display the Lottie Setting bar. Click on the Lottie addon icon from here. It will open the Lottie Settings modal popup. Select the External URL option from there as the file source and paste your URL in the Lottie URL box.

That’s it!

If you followed the previous steps properly, you might get a preview of your chosen Lottie animation by now.

Step 5: Configuring Lottie's Settings

Well, you might be a little bit confused right now. Because even though you’ve done everything correctly, the animation file isn’t moving! It looks like a static image, right?

Don’t worry! Everything is just fine. In this step, we have to tweak some settings to control the behavior of your selected animation file.

To do that, open the Lottie Settings modal popup again. Then enable the Autoplay and Loop option. As the name suggests, enabling these options will make the animations move continuously.

Besides the highlighted options, you’ll also get a few other customization options here. These are:

Mode - It indicates when the animation will start moving.
Play Speed - It determines the speed of animation. The default speed is 1.
Start Point - The start point indicates the time at which moment the animation will start.
End Point - Just like the start point, it indicates the ending moment of your Lottie animation.
Direction - You can control whether you want to play the animation in a forward or backward direction from here.

These are the additional configuration options of SP Page Builder. However, if you need to adjust the dimension of your Lottie animation, you can do it from the Size tab. You can set the proper height and width of your Lotties.

Note: Users can embed Lotties in an iFrame too. In that case, they have to use the RAW HTML addon instead of the Lottie addon. Then, they have to copy and paste the whole iFrame code on the Raw HTML addon.

Step 6: Preview the Final Version

That’s the end of our journey of adding and configuring an interactive Lottie animation on a Joomla website. So, let’s have a look at the GIF file below to understand the configuration of Lottie animations.

That’s the process of adding and configuring an interactive Lottie animation file on your Joomla website.

Bonus Tips on Adding Lottie Animation

Lottie animations beautify your website for sure; no doubt about that. But, that doesn’t mean you’ll add unlimited Lotties wherever on your Joomla website.

Here are some important things that you must take into consideration while adding the Lottie animations.

Don’t Use Too Many Lotties

Lottie animation is an eye-catchy web element. It has a positive impact on visitor sessions, bounce rate, user engagement, etc. So, most webmasters can’t resist the temptation of overusing those animations. But you must avoid using too many Lottie animations in order to reduce the loading speed, page weight, etc.

Maintain Brand Color Consistency

You must maintain color consistency throughout the whole website. It is a crucial part of your brand identity. However, it doesn't mean that you can’t use animations of different colors. Nowadays, most of the Lottie animation provider has a feature to apply a different color palette to that animation. Simply apply your brand color palette and increase your brand awareness.

Pay Attention to Lottie Placement

The ultimate purpose of using Lottie animations is to increase the visitors’ attention. That’s why you have to pay close attention to the placement of those animations. Here are some locations where you might use Lottie animations in order to get the most positive feedback.

Above the fold area
Image galleries
Product feature section
Contact form
Purchase confirmation page
404 pages, etc.

These are the most common pages from where the Lottie animation suits the best. Though this placement thing totally depends on your business and website design, just make sure that you didn’t misplace it.

Ensure Pixel Perfect Layout of Lotties

While placing an animation in an existing article, make sure that it remains consistent with the existing column layout. Otherwise, it not only breaks the design pattern but also the design of the whole webpage will become inconsistent. Overall, it will affect the user experience negatively.

Wrapping Up

Lottie animations not only improve the visitor's user experience but also make your website looks unique and more attractive than others. By the way, don’t overuse these animations in the right. Otherwise, it may backfire on your website’s performance.

However, we hope our guideline of adding and configuring interactive Lottie animation will help you to implement some eye-catchy Lotties on your own website. If you face any issue throughout the whole configuration process, shoot that in the comment box below.

Happy animating!

Try SP Page Builder for FREE!Get SP Page Builder Pro

How to Add Custom Shapes to Your Joomla Webpage Using SP Page Builder 4

2023-01-12T11:29:30+00:00

Implementing different basic shapes in your webpage layouts can go a long way in building visual identity. Basic shapes can be an essential aspect of web design that can symbolize ideas as well as express moods. Hence it's only wise to keep the idea of utilizing certain shapes on your website at the back of your head. And with SP Page Builder the work only gets simpler and easier as it can be. From the heading, you should already be guessing what today’s tutorial is about.

That’s right, in this article, you will learn how you can add custom shapes to your Joomla webpage layout effortlessly. So without further ado, let's jump in!

Does SP Page Builder Come With Custom Shapes Options?

No, but it doesn’t mean SP Page Builder limits you from creating shapes in different sizes according to your requirement. Say goodbye to the hassle of loading your site with unnecessary images and slowing your site down in an attempt to add different basic shapes for your web page layout. With SP Page Builder 4 you can easily implement your basic shapes effortlessly with the help of existing addons just by following through with some simple tricks!

How to Add SPPB Built-in Shapes to Your Rows?

To help you add further styling to your webpage, SP Page Builder lets you add fantastic shapes to your rows. Here’s how you can style your rows with different shapes:

Navigate to your SP Page Builder 4 front-end editor and create a row. Select the created section and go to the Row settings from the Row Editor. On the Style tab, scroll down to find two options: Top Shape and Bottom Shape.

Enable both options. As you enable the options you should be able to choose from a drop-down menu of options to decide on the shapes that you want on the top or bottom of your row. Choose your preferred option and you can, of course, decide to edit and change its size and colors however you want.

Create Basic Custom Shapes

So far we have discussed how you can add shapes at the top and bottom of your rows. Now let's jump in to glance through some simple tricks that you can use to create some basic shapes and place them anywhere on your webpage! Just follow through the simple steps described below.

Step 1: Get SP Page Builder Pro

Like always, get your SP Page Builder Pro first. Visit the SP Page Builder website, and select the plan that seems right for you. Download and install SP Page builder Pro on your Joomla CMS. Go to your Joomla dashboard > Systems > Extension and upload your SP Page Builder Pro zip file and you are all set to go. As simple as that!

Step 2: Plan the Page Layout & Decide Where to Add your Custom Shapes

Next comes the planning of your webpage layout. Always remember that your webpage design can either make or break your website. It is always recommended and absolutely necessary to have a well-thought-out design ready with the right elements just in the right place.

Step 3: Prepare Your Page Layout

Once you are sure about your layouts, let's start creating the shapes manually. For this demonstration, we have created a simple section that includes the basic shapes.

From your SP Page Builder frontend editor create a section. For this particular demonstration, we chose a 6+6 layout from the column generation option. We adjusted the look of the full row and chose the Heading and Text Block addons for the first column and we left the second column to implement our shapes.

At this point, you should also increase the height of your row for the convenience of your design. To adjust the Row height go to the Row settings from the Row editor. From the Style tab, scroll down to the Height Options and set the Min Height to 500. Hit Save.

Also, we will be demonstrating 4 different shapes in this tutorial, hence we will be initially taking 4 Div addons to our right column.

Step 4: Create and Add a Circle

To create a full circle, choose the first Div addon from your right column. Set your addon’s Width and Height to 100 and proceed to the General Settings option. From the Style tab, scroll down to the Background Option and choose Color. Choose your preferred color and set the Border Radius to 100. Next, navigate to the Advance tab just next to the Style tab. Enable the Custom Position option. Set the Select Position to Absolute and for our layout convenience, we are setting the values for the x-axis to 50 and the y-axis to 30.

There you go, you have created your first circle! As simple as that!

Create and Add a Hollow Circle

SP Page Builder also lets you create hollow circles easily in minutes. Let's take another Div addon and set the Height and Width to 100. Proceed to the General Settings and from the Style tab scroll down to enable the Border option. Pick a Color and Width for your border and set the style to Solid. And finally, set the Border Radius to 100. You should be able to see your hollow circle at this point. To further place it in the position that fits your need, you can navigate to the Advanced tab and enable the Enable Custom Position button. Select the position to Absolute and set the values for your x & y axes.

But for this demonstration, we will skip the hollow circle from our layout.

Step 5: Create and Add a Square

Next, let's see how you can create a square for your webpage layout. Move to the second Div addon that you had taken previously and set the Width and Height to 100. Navigate to the Style tab from the General Settings and choose a color for your shape.

Change the position of the square from the Advanced settings tab by enabling the Enable Custom Position option. Set the x-axis value to 50 and the y-axis to 390. Your square shape is pretty much done at this point!

Create and Add a Rectangle

You can also create a rectangle in exactly a similar way. All you need to do is pay attention to the value you set for the addon’s Width!

Step 6: Create and Add a Triangle

Creating triangles is also pretty simple. Go to the next Div addon and set the Width and Height to 300. From the General settings Style tab, scroll down to Background Option and choose Gradient. Choose the color of your triangle from the Color 2 option. Now we set the Start & End values to 50. For our layout purpose, we set the Angle to 135%.

Next, go ahead and click on the Color 1 option and change the RGBA values to such that the opacity is set to 0. For example, RGBA(255, 254, 254, 0). You should be able to see your triangle now!

Step 7: Create and Add a Cylindrical Shape

Let's see how you can add your cylindrical shapes. Click on your next Div addon in the same column and set the Width to 325 and Height to 75. Navigate to the General settings Style tab and scroll down to the Background Options and choose Color for your cylinder shape. Set the Radius to 100.

Reposition your addon by enabling the Enable custom position option and addon and select the addon position to Absolute. Set the x and y axis according to your necessity. Here we set the axes to 170 and 400 respectively.

Step 8: Final Result

Repeat the steps that have been shown so far to add the rest of the necessary shapes according to your layout, make adjustments where needed and give one final check. Save the changes when you are happy and you are ready to go! Here is our final result:

Customizing Your Added Shapes

SP Page Builder is always there to provide you with something extra. Let's see how you can add shades/shadows to your custom shapes. Decide on the shape you want to add the shadow on. Select the shape and go to the General settings Style tab. Scroll down and enable the Shadowbox option.

Once you are there select the color according to your preference and edit the shape of your shadow using the horizontal and vertical values. Setting the Blur value lets you make the added shadow prominent or faint. Set the Spread value if you wish to extend the area of the added shade.

Things to Keep in Mind

In case you are adding most of your Div addons in a single column, it's only wise to rename the addons to avoid any confusion later. From the SP Page Builder frontend editor, navigate to Layers and choose the column in which you added all your Div addons. Expand the column to find all your used Div addons. Hover over each of the used addons to display the 3 vertical dots and click on it to display the options. Choose Rename option to rename them to avoid confusion.

Winding-Up

When used correctly, basic shapes do have the ability to help build eye-catching websites that your visitors will remember. Understanding the feelings, moods, and concepts behind shapes can help you pick the best ones for your web design. And what else could be better than SP Page Builder 4 that will ease up your work tenfolds?

What interesting shapes could you come up with using SP Page Builder 4? Let us know in the comments. Happy developing!

Try SP Page Builder for FREE!Get SP Page Builder Pro

How to Create a Horizontal Footer Menu on a Joomla Site With Helix Ultimate

2022-12-12T10:47:41+00:00

Even if designing your site’s footer doesn't always gain the best attention, you can’t deny the importance that it holds for certain visitors. And one of the essential parts of your site’s footer is the footer menu. While some of you might find it tricky to place your menu at the footer, Helix Ultimate will only make the job amazingly simple for you.

So in today’s article, we will explain you through some simple steps on how you can create a footer menu for your site simply and without a single line of code! Without any further ado, let's head over to the start.

Why Do You Need a Footer Menu?

To be precise, there aren’t any specific recipes for designing or implementing a footer menu. Your users who cannot find specific information within the main menu are most likely to scroll down to the bottom to find out more. Hence it's only wise to display the info that your main menu doesn't offer at your site's footer. Displaying different menu items at the footer also means that you don't have to make the main menu crammed with excess contents that will only make navigation for your users difficult. That's why your footer makes the perfect section to set out those extra menu items.

Let’s Build a Horizontal Footer Menu Easily

Once you have decided on what items should sit on your site’s footer, it's time to implement your plans! Let's get straight to the easy and simple steps to create an easy, clean, and simple horizontal footer.

Step 1: Get Helix Ultimate

Make sure to get your Helix Ultimate pack ready. Visit the JoomShaper website and get your Helix Ultimate template framework. In case you are wondering how to install the quickstart pack, here is the complete tutorial for you.

Step 2: Create Your Footer Menu

Login to your Joomla dashboard. From the dashboard navigate to the Menus > Manage. Create a new menu and insert the Title and the Unique name.

Step 3: Add Menu Items to the Newly Created Menu

At this point, we need to add the menu items to the newly created menu. To do that click on the + sign beside your created menu from your Joomla dashboard.

This will land you on the Menu Items page from where you can create a menu item.

From this page carefully fill in all the information that is required to create your menu items. In our case, we named the menu item Contact Us and fill in all the required information like below:

Menu Item Type: System Links > URL
Link: #
Menu: Footer Menu

Hit Save & Close and repeat the process to create multiple menu items.

Step 4: Assign Module to the Menu

Once you are done creating the menu items for your footer menu it's time to add a suitable module for your menu. From your dashboard go to Menus > Manage. Here you should find the Linked Modules column from where you can add your module to the menu.

Hit ‘Add a module for this menu.' Then go ahead and add a title and choose a position for your module. For this demonstration, we have set the Position to Footer 1 [footer1]. Disable the Title button to hide the module title.

Also note that, while choosing the position from the dropdown list, make sure to choose the menu position from the Shaper-helixultimate list as we are using Helix Ultimate as our template framework.

Step 5: Switch to Helix Ultimate Frontend Editor

Hopefully, you can follow the steps so far. Now switch to the Helix Ultimate Frontend Editor. To do so navigate to the System from your dashboard. Choose Site Template > shaper_helixultimate - Default > Template Options. This will land you to the Helix Ultimate front-end editor.

Step 6: Final Outcome

From your Helix Ultimate frontend editor scroll down to the bottom of the page to find the footer. Bingo! Your horizontal footer menu has been created and displayed exactly how you wanted!

You can also experiment with your footer position by repositioning your modules. For example, in order to set the entire menu to the right-hand side of the footer, simply change the position of your module to Footer 2.

Wrapping Up

We hope you could follow through with the steps demonstrated above and could come up with a footer menu for your site. By creating a footer menu for your site you will be much more helpful to every site visitor who scrolls to the bottom of your page. And when Helix Ultimate lets you accomplish your work in a snap, why not give it a try today?

Don't forget to share your experience and feedback with us in the comments sections below. Happy developing!

Get Helix Ultimate

Create Video Mask Easily for Your Joomla Site With SP Page Builder

2022-11-15T07:35:55+00:00

One of the ways to make your website stand out from the crowd and wow your audience is by adding a video to your website. But just adding a simple video to a particular section of your site might not do the magic that you are looking forward to. Adding an overlay on top of your added video can be an excellent substitute for those boring, regular video clips that you have been planning to add to your webpage. So if you are looking for a creative way to get your favorite video clip noticed on your website and stand out from the competition, then getting a video mask might just do the wonder for you!

And as always, SP Page Builder Pro is here to make your day with some more amazing and simple tricks! Hence we are here today with another tutorial for all our SP Page Builder Pro users on how you can adorn your best-loved video clip using a mask.

Without any further ado, let’s dive in!

What are Video Masks on Websites?

Video masks in websites are the overlays on top of your videos, usually used in the form of images or animations that will act as a frame around the video. They are generally meant to complement your video clip and can result in a good way to attract, engage and bring visitors back to your site! Giving a ‘makeover’ to your clip not just makes it entertaining but can potentially engage your visitors by drawing attention.

Types of Masks that Can be Used on Your Webpage Videos

The type of mask or overlays that you want to use for your video is up to you to decide. Make sure that it matches with the rest of the elements of your layout and compliments the used video as well as the message that you want to convey. Here are the main types of video overlay you can use in your video.

Animated Masks: Animated masks are frames with animated effects that also come in the form of videos and sets around the border of your clip.
Shape Masks: Shape masks take the form of different shapes like circles, squares, hearts, ovals, etc, and are considered the basic and mostly used masks for videos.
Text Masks: In this case, the mask comes in the form of text and the video consequently takes the shape of the text mask. This gives your video an interesting look and is quite a trend nowadays.

How to Add Video Mask to Your Joomla Site Easily

Time to learn how to beautify your video clip with just a few simple tricks. Follow through these simple steps and your video mask should be all set to hit the ground and that too without a single line of code! Let’s delve in.

Step 1: Get SP Page Builder Pro

First thing first, get SP Page Builder Pro. Install the downloaded zip file by navigating to your Joomla control panel > Extensions > Extension Manager.

Once installed, go ahead and create a new SP Page Builder page. To do so navigate to the Components from your Joomla dashboard and choose SP Page Builder Pro. Hit Get Started and create a new page.

For this particular demonstration, we are using both Helix Ultimate and SP Page Builder for our convenience.

Step 2: Decide on Your Video and Mask Beforehand

Make sure to have both your video mask and the video ready beforehand to avoid any confusion during the rest of the procedure.

In our case, we have already created our video mask and saved them to SP Page Builder’s Media Manager. Pay attention that your mask should be in png format with transparent background and your video should be in MP4 format.

Step 3: Navigate to SP Page Builder Frontend Editor

Here starts the fun part! Once you have both your mask and video ready, navigate to the SP Page Builder Pro frontend editor and create a section. For this demonstration, we are choosing a 6+6 column.

Step 4: Add a Row to Your Column

Go ahead and start adding your addons at this point. To our right column, we will add a new row. When you add a new row to the column you should get two columns. Delete one of the columns to get a full-width row inside your column.

Step 5: Insert Video Into the Added Row

Now navigate to the Row settings of the row that you just added inside the right column. To do that simply go to the Layers option from the SP Page Builder frontend sidebar. Expand your Canvas section and locate the column where you inserted your row initially. Click on the three dots right next to the Row and the related settings options should pop up. Hit Settings.

From the Style tab, choose Video from the Background Option. Upload your video here and make sure to enable the Play Video in Loop option.

You have successfully added the video!

For our left column, we have used an Animated header addon and a Text addon. Change the texts for your Animated Header and make the following adjustments:

From the Animated Heading Settings choose Animation: Blinds.
From the Color settings, change the animated text color: #399d0d.
From the Typography Settings choose font style Arial and set the Size to 70px.
From the Animated Heading general settings only set the top Margin to 100px.

Step 6: Add the Mask on Top of Your Video Row

Next, it's time to add the mask on top of your video. To do that, add an Image addon to the same column where you added your video. Replace the default image with the video mask that you had created and saved to the Media Manager initially.

Adjust the size of the mask image to cover the video around the edges. Here’s a simple trick to do that! Go to the Image addon General settings Style tab and adjust the Image Margin. In our case, we have put -26px for the top and bottom Margins and -25px for the left and right Margins.

At this point, we want to match the background color of the entire row with the color of our mask image. From the Row editor, go to the Row Settings and select the Style tab. From the background option, select the Color tab and choose your desired color from the palette. The hex code for our background color is #ffffa2.

Step 7: Increase or Decrease the Video Column Size

Let's set the size of our video column according to our preference. For that again choose the Row settings from the layers panel. From the Style tab, scroll down to the Width Option and adjust the value. We are choosing to set the value of the width to 650px.

Step 8: Adjust Your View Ports

As we all know SP Page Builder 4 comes with 6 different viewports. So far we have created and adjusted the row and addon options according to the laptop viewport. Let's give a quick check to the rest of the viewports. To do so simply click on each of the device icons displayed at the top of the page. Please note that at this point you might have to adjust each of the viewports margins and widths individually.

Step 9: Final Result

Make one final adjustment to the layout and hit Save. Let's check out the final outcome.

Amazing isn’t it? Turn all those monotonous videos into interesting and eye-catchy ones. And with SP Page Builder, slide through those tough works smoothly and save up time too!

Ending Thoughts

Hope this tutorial was helpful to you and answers any questions you may have had regarding video overlays or masking. SP Page Builder makes sure to do all the heavy lifting for you so that all you need to do is focus on crafting your site with engaging and interactive content. Bag your SP Page Builder Pro today and dive in to enjoy the finest website development experience. Happy developing!

Try SP Page Builder for FREE!Get SP Page Builder Pro

How to Make Your Columns Responsive in SP Page Builder 4

2022-11-08T08:42:57+00:00

Howdy SP Page Builder users! As you all know, with the release of SP Page Builder version 4.0.5, the Column Responsive option was got ridden off for clarity and convenience. Since then, a lot of you have had questions regarding how to adjust your column sizes as you can no longer specify the class for the columns of your tablet and mobile layouts.

At JoomShaper, we’re always working to shape our products to become the best of their kind while also keeping our beloved users at our heart. Hence, even if the old Column Responsive Options have been removed, it will not limit you from adjusting your column sizes in any way compared to the convenience you have had in the previous versions.

So we are here today to walk you through some simple steps on how you can have your column responsive fixed without the column responsive options. Without any further ado, let's delve in!

Step 1: Create a Section with Multiple Columns

First things first, from the SP Page Builder Pro frontend editor create a section with 3 or more columns. For this demonstration, we are taking 3+3+3+3 columns for convenience.
Also, note that you can add a total of 8 Columns within a single Row.

Step 2: Add Your Addons and Make Necessary Changes

Time to add the addons. Here, we are taking two image addons and two text block addons. Adjust the images and texts of the addons to fit your need.

Step 3: Check the Column Responsive for the Tablet Mode

When you are happy with your addons, switch to Tablet Portrait mode from the 6 viewport panel on the top of your page in case you want to change the column responsive for your tablet layout. Now, navigate to the Row settings from the Row Editor. From the Style tab, you should be able to find the Fill Columns option at the top and disable it.

After disabling the Fill Column option, you should now be able to adjust the column width by simply clicking and dragging the Column boundary.

Another way to adjust the column size is by specifying the width of your columns from the input field that appears on the top of each of your columns when you click on the boundary. Simply enter the percentage of the columns that you wish to resize according to your preference.

Please note that the procedure to adjust the column size for your Mobile responsive layout is exactly the same as the tablet layout.

Step 4: Set Gap Between Columns In the Responsive View

When you have set your columns according to your need you might want to add some more gaps between each of your columns for further clarity or decoration. There is also a simple trick to let you get that gap just right! Simply go to the Column Option and choose the Style tab. From the Spacing option, choose and set the Margin values to fit your need.

Ending Thoughts

We hope this simple yet effective tutorial answers a lot of your questions. With our constant effort to make SP Page Builder the best Joomla web-building tool, the changes that come along are only to make your web-developing experience easier and more comfortable. Let us know if you have tried out this new trick to resize your columns in the comments!

Happy developing!

Try SP Page Builder for FREE!Get SP Page Builder Pro

How to Create Your Own Custom Addon in SP Page Builder 4

2022-10-17T07:08:30+00:00

Did you know that you can create your own SP Page Builder custom addon? SP Page Builder already has a vast collection of addons that are well-built, user-friendly, and makes your Joomla website completely functional. But knowing how to fine-tune your custom addon based on your needs will make you unstoppable.

The idea of creating your own addon may seem overwhelming especially if you’re not a professional developer, but it is actually doable! Turns out, you’ll only need to know the basics of coding to turn your desired functions into an addon.

First Things First

Before you start, we highly recommend using a local web development environment first. This will give you the freedom to learn and test things out without the worry of messing up your live site.

If you’re new to SP Page Builder, here’s our detailed guide on how to download and install SP Page Builder. Alright now that we have the disclaimer out of the way, let’s get into the tutorial.

Step 1: Create a Custom Plugin

First, we’ll create a custom plugin and then add our custom addon code there. But wait, weren’t we supposed to create a custom addon? Yes, that mission is still live!

With a plugin, you can install one or multiple addons. Ideally, creating a plugin to install your custom addons lets you add your custom addons that aren’t dependent on the SP Page Builder core component. This means once you update your SP Page Builder you’re not going to lose your custom addons.

To create a custom plugin, you need to first create a folder and name it plg_sppagebuilder_demo. Here, demo is the name of the plugin. You can replace ‘demo’ with your preferred plugin name if you want.

Inside the plg_sppagebuilder_demo folder, we’ll need to create the followings:

A PHP file named: demo.php
An XML file named: demo.xml
A folder named: addons

Step 2: Create the demo.php File Inside the Custom Plugin

Let’s start by creating the PHP file of the plugin. To do that, we’ll need a text/code editor. You can use any text/code editor you prefer. For this tutorial, we’re using Sublime Text because it has a free version and is extremely lightweight.

Open the folder that we have just created from the editor and create a file named demo.php. Please note, our plugin name is Demo, hence the name of the file is demo.php. If you’re using any other name, the name of the file should be yourPluginName.php.

Now, paste the following code snippet.

<?php
/**
* @package SP Page Builder
* @author JoomShaper http://www.joomshaper.com
* @copyright Copyright (c) 2010 - 2022 JoomShaper
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
*/

//no direct accees
defined('_JEXEC') or die('Restricted Access);
use Joomla\CMS\Plugin\CMSPlugin;
class PlgSppagebuilderDemo extends CMSPlugin {
	protected $autoloadLanguage = true;
}

Here, the Demo in Class name ‘PlgSppagebuilderDemo’ must be replaced with your plugin name.

Step 3: Create the demo.xml File Inside the Custom Plugin

Now, we'll need to create an XML file for our plugin. Create a new file on your code editor, name it demo.xml, and paste the following code snippet.

<?xml version="1.0" encoding="utf-8"?>
<extension version="3.8" type="plugin" group="sppagebuilder" method="upgrade">
	<name>Demo Addon Plugin - SP Page Builder</name>
	<author>JoomShaper</author>
	<creationDate>22 Sep 2022</creationDate>
	<authorEmail>support@joomshaper.com</authorEmail>
	<authorUrl>https://www.joomshaper.com</authorUrl>
	<copyright>Copyright (C) 2010 - 2022 JoomShaper. All rights reserved.</copyright>
	<license>GNU/GPL V2 or Later</license>
	<description>Demo addon plugin for SP Page Builder</description>
	<version>1.0</version>

	<files>
		<filename plugin="demo">demo.php</filename>
		<folder>addons</folder>
	</files>

</extension>

Here, you need to draw attention to the following lines of code:

In the <name> tag, you need to put the name of your plugin.
In the <description> tag, replace “demo” with the name of your plugin.
In the <filename> tag, replace the file name demo.php with your plugin PHP file.
In the <folder> tag, make sure to set the folder name to "addons". We’ll create the folder in the next step.

Step 4: Create the “addons” Folder

In this step, we’ll create a folder inside our plugin folder. From the code editor, create a new folder inside the custom plugin and name it addons. This is where we will store all our custom addons.

Inside the addons folder, create another folder and name it rich_text.

Note: In this tutorial, we will be using Rich Text as the name of our new custom addon.

Inside the rich_text folder, you need to create the following files:

A PHP file named admin.php
A PHP file named site.php
A folder named assets to store all the assets for the addon

Here’s what the file structure will look like:

As we’ve mentioned earlier, you can install multiple addons using a plugin. So, if you wish to add another custom addon, simply create a folder with the name of that addon inside the addons folder.

Step 5: Write the Custom Addon Specific Functions

In this section, we’ll start writing code to add features to our Rich Text addon. Before jumping on to the code, let’s figure out what we want our Rich Text addon to do.

Ideally, the Rich Text web element lets you create long-form content. Instead of adding Heading, Paragraph, Button, Image, etc. individually, Rich Text lets you add these different content elements directly.

For this tutorial, we’ll keep our Rich Text really simple. It’ll have a heading, a paragraph, and a button as shown in the image below.

Create the Addon Icon

First, let’s add the icon of our addon. In the assets folder, create a new folder and name it images. Inside the images folder, add your icon.png file. Here, we have kept the size of the icon 76 x 76 px. If you want to change the icon of your addon, you can just replace the icon image.

Create the admin.php File

Now, let’s create a new PHP file inside the rich_text folder and name it admin.php then paste the following code snippet.

<?php
/**
 * @package SP Page Builder
 * @author JoomShaper http:   //www.joomshaper.com
 * @copyright Copyright (c) 2010 - 2022 JoomShaper
 * @license http:   //www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
 */

// No direct access
defined('_JEXEC') or die('Restricted access');

use Joomla\CMS\Language\Text;

/**
 * Inline editor settings rules:
 * 1. The inline array must have an attribute named `buttons`
 * 2. The buttons array contains all the editor buttons. The key of the array must be unique.
 * 3. Every button contains some attributes like-
 *         a. action (string) (required) [The action will perform after clicking the button]
 *         b. type (string) (required) [The type of the button. valid values are `placeholder`, `icon-text`]
 *         c. placeholder (string) (optional) [If the button is dynamic and this cannot be expressed as icon/text.]
 *         d. icon (string) (optional) [A valid icon name available in the pagebuilder]
 *         e. text (string) (optional) [A text value to show as the button text]
 *         f. icon_position (string) (optional) [`left` or `right` position of the icon to the text. Default `left`]
 *         g. tooltip (string) (optional) [Tooltip text to show on the button hover.]
 *         h. fieldset (array) (conditional) [An conditional array (which is required if action is dropdown) for representing the fieldset fields.
 *             This is valid only if the action is `dropdown`.
 *             The direct children of the fieldset array would be the tabs.
 *             Inside the tabs name you should define the fields descriptions.
 *             If there is only one fieldset child then that means no tabs]
 *         i. options (array) (conditional) [This is a conditional field. This is required if the action is dropdown
 *             but you need to show some options not fields.]
 *         j. default (mixed) (conditional) [This is required if there is the options key. This indicates the default value of the button from the options array.]
 */

SpAddonsConfig::addonConfig(
    [
        'type' => 'content',
        'addon_name' => 'rich_text',
        'title' => 'Rich Text',
        'desc' => 'Rich Text Custom addon',
        'category' => 'Custom',
        'icon' => '',
        'inline' => [
            'buttons' => [
                'rich_text_general_settings' => [
                    'action' => 'dropdown',
                    'icon' => 'addon::rich_text',
                    'tooltip' => 'Rich Text',
                    'fieldset' => [
                        'tab_groups' => [
                            'title' => [
                                'fields' => [
                                    [
                                        'title' => [
                                            'type' => 'text',
                                            'title' => Text::_('COM_SPPAGEBUILDER_ADDON_TITLE'),
                                            'desc' => Text::_('COM_SPPAGEBUILDER_ADDON_TITLE_DESC'),
                                            'std' => 'This is a advanced heading',
                                        ],
                                        'heading_selector' => [
                                            'type' => 'headings',
                                            'title' => Text::_('COM_SPPAGEBUILDER_ADDON_HEADINGS'),
                                            'std' => 'h3',
                                        ],
                                    ],
                                ],
                            ],
                            'content' => [
                                'fields' => [
                                    [
                                        'content' => [
                                            'type' => 'editor',
                                            'title' => Text::_('COM_SPPAGEBUILDER_ADDON_TITLE'),
                                            'desc' => Text::_('COM_SPPAGEBUILDER_ADDON_TITLE_DESC'),
                                            'std' => "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
                                        ],
                                    ],
                                ],
                            ],
                            'button' => [
                                'fields' => [
                                    [
                                        'button' => [
                                            'type' => 'text',
                                            'title' => Text::_('COM_SPPAGEBUILDER_GLOBAL_BUTTON_TEXT'),
                                            'desc' => Text::_('COM_SPPAGEBUILDER_GLOBAL_BUTTON_TEXT_DESC'),
                                            'std' => 'Button',
                                        ],
                                        'type' => [
                                            'type' => 'select',
                                            'title' => Text::_('COM_SPPAGEBUILDER_GLOBAL_BUTTON_STYLE'),
                                            'desc' => Text::_('COM_SPPAGEBUILDER_GLOBAL_BUTTON_STYLE_DESC'),
                                            'values' => [
                                                'default' => Text::_('COM_SPPAGEBUILDER_GLOBAL_DEFAULT'),
                                                'primary' => Text::_('COM_SPPAGEBUILDER_GLOBAL_PRIMARY'),
                                                'secondary' => Text::_('COM_SPPAGEBUILDER_GLOBAL_SECONDARY'),
                                                'success' => Text::_('COM_SPPAGEBUILDER_GLOBAL_SUCCESS'),
                                                'info' => Text::_('COM_SPPAGEBUILDER_GLOBAL_INFO'),
                                                'warning' => Text::_('COM_SPPAGEBUILDER_GLOBAL_WARNING'),
                                                'danger' => Text::_('COM_SPPAGEBUILDER_GLOBAL_DANGER'),
                                                'dark' => Text::_('COM_SPPAGEBUILDER_GLOBAL_DARK'),
                                                'link' => Text::_('COM_SPPAGEBUILDER_GLOBAL_LINK'),
                                            ],
                                            'std' => 'default',
                                        ],
                                        'url' => [
                                            'type' => 'link',
                                            'title' => Text::_('COM_SPPAGEBUILDER_GLOBAL_BUTTON_URL'),
                                            'mediaType' => 'attachment',
                                        ],
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
                'rich_text_alignment_separator' => [
                    'action' => 'separator',
                ],

                'rich_text_alignment_options' => [
                    'action' => 'dropdown',
                    'type' => 'placeholder',
                    'style' => 'inline',
                    'showCaret' => true,
                    'tooltip' => Text::_('COM_SPPAGEBUILDER_GLOBAL_ALIGNMENT'),
                    'placeholder' => [
                        'type' => 'list',
                        'options' => [
                            'left' => ['icon' => 'textAlignLeft'],
                            'center' => ['icon' => 'textAlignCenter'],
                            'right' => ['icon' => 'textAlignRight'],
                        ],
                        'display_field' => 'alignment',
                    ],
                    'default' => [
                        'xl' => 'center',
                    ],
                    'fieldset' => [
                        'basic' => [
                            'alignment' => [
                                'type' => 'alignment',
                                'inline' => true,
                                'responsive' => true,
                                'available_options' => ['left', 'center', 'right'],
                                'std' => [
                                    'xl' => 'center',
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],

        'attr' => [],
    ],
);

Let’s try to understand what’s happening in this code. Every SP Page Builder addon has an inline editor that’s specific to its features. In this code, we are specifying the fields/features that our custom addon’s inline editor will have.

First, we have to lay out some basic information like the type, name, title, description, etc. of the addon.

‘type' => 'content', // set the type of the addon
'addon_name' => 'rich_text', // same as the addon folder name
'title' => 'Rich Text', // Display name of the addon
'desc' => 'Rich Text Custom addon', // This text will appear in the tooltip
'category' => 'Custom', // Let’s create a separate category for our custom addon and name it Custom.
'icon' => ‘ ’, //keep it empty so that it can access the icon image we have added in the assets folder.

Now, let’s add the fields.

Inside the 'inline' =>, we need to define the fields of our addon’s inline editor. So our Title, Content, and Button are inside the Rich Text Settings tab, so we will add the code for these three fields under the 'rich_text_general_settings'. And after that, we’ve defined the Alignment Option of the addon.

Create the site.php File

Once our fields are ready, we need to add code to visualize our addon. To do that, inside the rich_text folder let’s create another file, name it site.php, and paste the following code snippet.

<?php
/**
 * @package SP Page Builder
 * @author JoomShaper http://www.joomshaper.com
 * @copyright Copyright (c) 2010 - 2022 JoomShaper
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
 */
//no direct access
defined('_JEXEC') or die('Restricted access');

class SppagebuilderAddonRich_text extends SppagebuilderAddons
{
 /**
 * The addon frontend render method.
 * The returned HTML string will render to the frontend page.
 *
 * @return string The HTML string.
 * @since 1.0.0
 */
 public function render()
 {
 $settings = $this->addon->settings;
 $class = (isset($settings->class) && $settings->class) ? ' ' . $settings->class : '';
 $title = (isset($settings->title) && $settings->title) ? $settings->title : '';
 $heading_selector = (isset($settings->heading_selector) && $settings->heading_selector) ? $settings->heading_selector : 'h2';
 $content = (isset($settings->content) && $settings->content) ? $settings->content : '';
 $button = (isset($settings->button) && $settings->button) ? $settings->button : '';
 $button_type = (isset($settings->type) && $settings->type) ? $settings->type : '';

 $output = '';

 // Link Parse
 list($link, $target) = AddonHelper::parseLink($settings, 'url');

 $output .= '<div class="sppb-addon sppb-addon-rich_text' . $class . '">';

 // Title
 $output .= '<' . $heading_selector . ' class="sppb-addon-title">';
 $output .= nl2br($title);
 $output .= '</' . $heading_selector . '>';

 // Content
 $output .= '<p>' . $content . '</p>';

 // Button
 $output .= !empty($link) ? '<a ' . $target . ' href="https://www.joomshaper.com/' . $link . '">' : '';
 $output .= '<button class="sppb-btn sppb-btn-' . $button_type . '">' . $button . '</button>';
 $output .= !empty($link) ? '</a>' : '';

 $output .= '</div>';

 return $output;
 }

 /**
 * Generate the CSS string for the frontend page.
 *
 * @return string The CSS string for the page.
 * @since 1.0.0
 */
 public function css()
 {
 $addon_id = '#sppb-addon-' . $this->addon->id;
 $cssHelper = new CSSHelper($addon_id);

 $css = '';

 $settings = $this->addon->settings;
 $settings->alignment = CSSHelper::parseAlignment($settings, 'alignment');
 $alignment = $cssHelper->generateStyle('.sppb-addon.sppb-addon-rich_text', $settings, ['alignment' => 'text-align'], false);

 $css .= $alignment;

 return $css;
 }

 /**
 * Generate the lodash template string for the frontend editor.
 *
 * @return string The lodash template string.
 * @since 1.0.0
 */
 public static function getTemplate()
 {
 $lodash = new Lodash('#sppb-addon-{{ data.id }}');

 // Inline Styles
 $output = '<style type="text/css">';
 $output .= $lodash->alignment('text-align', '.sppb-addon-rich_text', 'data.alignment');
 $output .= '</style>';

 $output .= '
 <#
 let btnUrl = "";
 let target = "";
 let rel = "";
 if (!_.isEmpty(data.url) && _.isObject(data.url)){
 const {url, page, menu, type, new_tab, nofollow} = data?.url;
 if(type === "url") btnUrl = url;
 if(type === "menu") btnUrl = menu;
 if(type === "page") btnUrl = page ? `index.php?option=com_sppagebuilder&view=page&id=${page}` : "";
 
 target = new_tab ? "_blank": "";
 rel = nofollow ? "noopener noreferrer": "";
 }
 
 #>
 ';

 $output .= '<div class="sppb-addon sppb-addon-rich_text {{ data.class}}">';

 // Title
 $output .= '<{{ data.heading_selector }} class="sppb-addon-title">';
 $output .= '<span class="sp-inline-editable-element" data-id={{data.id}} data-fieldName="title" contenteditable="true">{{{ data.title }}}</span>';
 $output .= '</{{ data.heading_selector }}>';

 // Content
 $output .= '<p>';
 $output .= '<span class="sp-inline-editable-element" data-id={{data.id}} data-fieldName="content" contenteditable="true">{{{ data.content }}}</span>';
 $output .= '</p>';

 // Button
 $output .= '<a href=\'{{ btnUrl }}\' target=\'{{ target }}\' rel=\'{{ rel }}\'>';
 $output .= '<button id="btn-{{ data.id }}" class="sppb-btn sppb-btn-{{ data.type }}">';
 $output .= '<span class="sp-inline-editable-element" data-id={{data.id}} data-fieldName="button" contenteditable="true" data-placeholder="Add text...">{{{ data.button }}}</span>';
 $output .= '</button>';
 $output .= '</a>';

 $output .= '</div>';

 return $output;
 }
}

Here, we’ve created a class and named it ‘SppagebuilderAddonRich_text’ which extends the abstract class SppagebuilderAddons. From the class name, you need to replace Rich_text with your addon name. Inside this class, we’ve added three functions:

render () - displays the end result
css () - controls the style of the end result
getTemplate () - allows front-end editing

Inside these functions, replace the div “sppb-addon-rich-text” with your addon’s name. Example: “sppb-addon-your_addon_name.

Step 6: Create the Installable Zip File

Alright, we are almost done! Now, save all your hard work and create a zip file of the project folder plg_sppagebuilder_demo. To create a Zip file, right-click on the folder and click on compress “plg_sppagebuilder_demo” and you're done.

Step 7: Install the Plugin

The plugin that we have created can be installed on your website like any other Joomla plugin. Go to Joomla Backend > System > Install > Extension > Upload Package File.

After the installation, you need to activate (publish) the plugin. To do that, from the Joomla Backend go to System > Manage > Extensions. Find your plugin (type demo in the search) and hit publish.

Final Output

Congratulation! You’ve successfully created your own custom addon. To access the addon, go to the editing mode of a page with SP Page Builder. Here under the Custom Category, you will be able to see your custom addon.

Wrapping Up

We hope this article helped you learn how to easily create a custom addon in SP Page Builder. While the entire process may seem daunting at first, give it a try. Play around with the code. Once you have the process figured out, you can tailor any custom addon to meet your needs. You can also download the source code for this custom addon to accelerate your custom addon development process.

For any queries or assistance, feel free to reach out to us in the comments. Good Luck!

Try SP Page Builder for FREE!Get SP Page Builder Pro

Exceed Your Web-Building Boundaries With SP Page Builder Interaction & Animation

2022-09-08T05:47:29+00:00

Adding animations to your webpage is no longer just a mere embellishment or a decorative element today. It's considered one of the most important factors of user experience as it's a way to breathe life into your web page's static layout. As we are always on the go to help ease up your work, SP Page Builder’s Interaction & Animation feature makes sure to let you accomplish just the right animation that you need for your website with minimal effort!

So in today’s article, we will walk you through some easy steps on how you can transform your simple, unadorned webpage into an interesting one with easy-to-do interaction & animation features of our very own - SP Page Builder tool. Let’s dig into it!

How Animated Website Can Lead to Better Conversions

Let’s have an extra detailed talk on this. It’s needless to say how modern websites are inclining toward having animations and interactions-oriented websites nowadays. It has been proven that animated or interactive websites bring about tons of benefits to both the users and the owners. But a good animation in design means it should have a well-thought-out purpose and should be incorporated at the right time as well as in the right place. If implemented correctly, with the right functionality, adding interactions & animations can significantly bring up the conversion rates to website owners, consequently keeping you ahead of the competition. Plus, it makes your site easier to navigate, and all these add up only to result in a better user experience and ultimately leading to better sales!

SP Page Builder Interaction & Animation is At Your Rescue

As much as interactive websites are making their place at the top of the priority list, it’s not always just a walk in the park. Chances are if you are not a professional developer, you need to hire an animation specialist or generalist with the programming skills and expertise suited for the work you need.

But with SP Page Builder at your rescue, you can have full access to creating your animation-based web page with the Interaction & Animation feature with zero coding knowledge! It has a set of powerful controls that lets you add attractive transitions and beautiful animations to your web page effortlessly.

Let's have a quick look at what's in SP Page Builder’s Animation and Interaction feature.

Animations

The Animations feature lets you animate your Addons, Rows (Sections), and Columns. As your website visitor scrolls down the page, the elements appear with an entrance animation. You can choose:

Animation Type - choose the effect used for animation (fade, flip, rotate, bounce, zoom).
Animation Duration - set how many milliseconds an animation will take to complete one cycle.
Animation Delay - set when the animation will start, this value is defined in milliseconds.

Interactions

Let’s see what effects you can create with the interaction controls.

Move
Scale
Rotate
Skew
Opacity
Blur
3D Tilt

These controls can be categorized into two sets of settings.

Scrolling Effects: Using scrolling effects you can create animations for when visitors scroll through a web page. A motion effect is created by determining a starting and an ending point.

Mouse Effects: Using the mouse effect you can create transitions for when users hover the mouse on a particular element.

Before we go any further, let’s learn where the interaction can be used. Well, basically everywhere on a webpage. The feature is available in all the SP Page Builder addons. After going to the edit mode, choose an addon and you’ll find the “Interaction” controls right beside the “Advanced” tab.

A Short Tutorial for Better Understanding

We understand how using the Interactions and animations can still be tricky sometimes, especially if you are a beginner. To let you have a more vivid idea about the interaction and animation features here’s an example of how you can implement simple scroll-based interactions through this simple demonstration.

Step 1: Decide on Your Page Layout

First things first, decide on how you want to create your page layout and where you want to implement your animations and interactions.

For this particular demonstration, we will be taking 3 sections where we will add Animations to the first and third sections and use interactions in the 2nd sections. For easy understandability, we will be using Image and Text Block addons.

Step 2: Create a New Page With SP Page Builder

Now go ahead and create a new SP Page Builder page. To do so navigate to the Components from your Joomla dashboard and choose SP Page Builder Pro. Hit Get Started and create a new page.

Add rows to your page. Firstly we choose 12 from the column generation option to add a full horizontal row. Followed by 4+4+4 to generate 3 equal columns and lastly again choose 12 for the full horizontal row.

Step 3: Start Adding Your Addons in Accordance With Your Layout

Let's quickly add the addons to the rows and columns you just added. For a simple demonstration, we have used Image and Text Block addons.

At this point you can also adjust the look of your section by changing the padding, enabling fluid, adding images to the background, etc.

Click on each added addon to replace the image with your selected ones and add your images. Replace the texts in your text addons. After the changes, this is what our web page looks like:

Step 4: Add Animations to a Row

Now it's time to add some Animations to our first and last rows for some extra effects.

Select the first section and go to the Row settings from the Row Editor. Enable the Animation option.

Once you enable the Animation option you should be able to see all the built-in animations that you can implement on your rows. There are also some basic options given to personalize the animation as you want.

Direction: The direction in which you want the animation to take place.
Duration: The amount of time the animation takes to complete one cycle.
Delay: The time after which the animation takes place.

For this demonstration, we will add Fade animation to our section. Direction is set to Down, Duration, and Delay fixed to 1200ms.

Similarly, we set the parameters for our last section, choosing the Zoom animation and setting the direction to Zoom. Duration and Delay are both set at 1000ms.

Your animations part is all set to go!

Step 5: Time to Add Interactions to Your Image Addon

Once you have all the addons according to your layout and you are happy about it, it's time to jump into the fun part! Try adjusting your interaction settings now. To do so, click on each of the addons and go to the general settings to enable the Interaction While Scrolling into View.

Now choose the first image and go to the general settings to enable the interaction option. Once you enable the option, you can see by default Move Scroll Action is added at 0% and 100%. This timeline area represents the viewport of the page that is visible. The bottom of your page indicates 0%, the middle of the page indicates 50% and the top of the page indicates 100%.

Let's start adding the rest of our Scroll Actions. Click on the ‘+’ sign to choose and add your scroll actions. At 0% we will add two more scroll actions - Scale and Opacity.

Select the Move Action keyframe and set the y-axis to -100. Keep the Transform Origin X-axis and Transform Origin Y-axis to the center.

The X and Y axes control your addons’ horizontal and vertical directions respectively. This means for X-axis, the addon moves to the right horizontally in case of positive values and moves to the left horizontally in case of negative values as you scroll down. And for Y-axis, the addon ascends vertically from bottom to top in case of positive values and descends from top to bottom in case of negative values as you scroll down.

There’s also the Z-axis to reposition an element. It controls the z-axis in 3D space which specifies how far inward or outward an element will move. For this particular demonstration, we will keep the Z-axis value to 0.

Next, select the Scale Action keyframe and set the x-axis and y-axis to 0.5. Keep the Transform Origin X-axis and Transform Origin Y-axis to the center.

With the Scale effect, you can make an element either larger or smaller in the aspect of its absolute position. A positive value makes an object stretch and a negative value makes an object shrink. Hence setting a positive or negative value for the X-axis increases or decreases the addons' horizontal scaling. Similarly, setting a positive or negative value for the Y-axis increases or decreases the addons’ vertical scaling.

For the Opacity Action keyframe, set the opacity to 0.3 at 0%. Keep the Transform Origin X-axis and Transform Origin Y-axis to the center.

Now shift all the 100% action keyframes to 50%. This means that your created interaction will end when the page scroll comes in the middle of the viewport. To do so click on each of the action keyframes and choose the Timeline from the Interaction settings.

Now repeat the same process for the rest of the images. Click the Save button. Let’s check the final result of our image-based interaction from the preview.

Step 6: Add Interaction to Your Text Block Addon

Now let's add some interaction to our Text addon. Click on the Text addon and go to the general settings. Choose the Interaction tab and enable the Interaction While Scrolling into View just like you did in the case of your Image addons.

For the default action keyframe Move, set the y-axis value to 40 at 0%. At 100%, set the keyframe y-axis to 0.

In addition to the default Move action keyframe, add another Action Scroll keyframe - Opacity. At 0%, keep the Opacity Value to 0, and at 100% set the Opacity value to 1.

Next, change the Timeline value from 100% to 50% for both the Scroll Action keyframes.

Repeat the same process for the rest of the Text Block addons.

Step 7: Final Result

Give yourself a pat on the back if you could follow so far! Time to check the final result:

Now isn’t that amazing? You have successfully added some awesome interaction & animations to your webpage without implementing a single line of code!

Winding Up

Hope this tutorial could give you an idea about how interaction and animation work. An interactive website not just expands your audience by instilling an everlasting impression but also retains and engages users eventually resulting in higher conversions. And SP Page Builder is there to help you accomplish your work without a single line of code. What do you think? Don’t forget to let us know your experience in the comment section.

Get SP Page Builder Pro

A Complete Guideline on the All-New SP Page Builder 4 Feature: Layers

2022-08-17T09:30:07+00:00

Your favorite SP Page Builder 4 marked its first step a few days ago with a vision to transform your web building experience into a far more convenient one. With this brand-new version of Page Builder 4 comes a number of new features to help make your life easier. And what else could be better than being able to manage your workflow just the way you like!

In this article, we will be shedding some extra light on SP Page Builder 4’s brand new feature - Layers. Much like Photoshop or Sketch Layers, it turns your builder into a layered interface and lets you customize everything at any stage.

So let’s jump right in without further ado!

What are Layers in SP Page Builder 4?

Using Layers in SP Page Builder 4 actually allows you to keep your sections organized to manage your workflow without a hitch. While using different elements of SP Page Builder, the Layers stack all your used elements on top of one another, which helps you craft your site with more proficiency.

How to Use Layers?

SP Page Builder 4 is all about frontend editing now. So to be able to use Layers simply go to the Dashboard and select the desired page. From the frontend sidebar editor, you can find the Layers tab just below the Addons.

Once you click on the Layers you can see that all the sections you have used on your page are organized separately. Click on each section to view the columns associated with each section. What’s more, you can also drag a section up or down to change the layout of your page.

As you go on adding different sections to your site, the layers panel will keep updating itself accordingly.

How Layers Can Make Life Easy!

Now that Layers have already come into action, let's shed some light on the brighter sides that come along with them.

Previously in SP Page Builder 3.x, making changes to your page layout was all about going back to your backend and coming back to the frontend again to view the change.

Now, with Layers at your rescue, you can visually and instantly see the layout changes that you have made and customize your page with minimal effort. Simply make the necessary changes and drag and drop the section wherever you think is suitable. Also, instantly make changes to your choice from the settings option available for each section.

Efficiently Customize and Manage Your Columns and Addons

Speed up your edits with Layers as it allows you to have a layered interface making it fun and easy for you to customize your sections in any way you want. Move and adjust the individual column as well as the addons you have used to change the position. Also, rename each section, column, and addon for better convenience and to recognize each layer in your layout.

Give the New Duplicate Option a Whirl!

The sections in your layer come with a fascinating option “Duplicate” that lets you instantly duplicate any section that you like. You can make changes to the duplicated one without the need to change the original one! Plus, duplicating a section means that you don't have to start creating a similar section again from the scratch and boost up your speed.

Toggle Section Visibility to Decide on the Best One

With SP Page Builder 4 Layers, you can also hide or display a section according to your preference. Toggle the visibility of an addon or a column in a section individually. Plus, you can also turn the visibility of an entire section on or off. The disabled elements will still exist, but users will not see them on the live site.

A Detailed Look Into the Layers

When you access the Layers tab from the SP Page Builder 4 sidebar, you’ll see how the existing sections and their content are organized on the current page.

The Canvas contains all the sections of your page that you are currently working on. When you click on the three vertical dots beside the Canvas, it should expand the available options. These options will let you expand or collapse all the sections and the associated columns and addons, clear the page canvas, or export & import any of your previously saved page layouts.

When you hover over each section, click on the three vertical dots to expand the related options. These options will let you save the individual sections, duplicate sections, copy, edit the section row, delete or rename the section, and also expand the detailed settings to edit your section.

Similarly, you can expand the options related to your individual columns and the used addons.

Access Nested Row Settings

In case you want to access the nested row settings, simply navigate to the Layers tab and Expand the Section associated with the nested rows. Expand the Columns and now you should be able to see your nested row. Click on the three vertical dots to access all the options related to the nested row. From here you can easily access your nested row Settings.

Please note that you can only access the nested row settings from the Layers.

The Convenience of Importing and Exporting Your Page

If you already have a page built with SP Page Builder Pro you can always save it for later use. This time SP Page Builder Pro makes exporting and importing your custom-designed page easier than ever!

With SP Page Builder Pro 4, you can export any page and import them for later use on other pages. Page structure is saved as a .json file.

To export/import a page:

Click on ‘Layers’
Click on the three dots you see in the Canvas section. These should open up extra options.
From the list choose Export/Import.

Notice! The import process will override current page content if you don’t import the file on a new page. For more info on export and import, check out the documentation here.

Ending Thoughts

SP Page Builder 4 has been designed keeping user convenience at the core. And in this whole process of simplifying the user experience, Layers have added a new dimension. This new addition to the Page Builder family not just allows you to create a hassle-free workflow but also saves your valuable time by letting you see the changes instantly.

So go ahead and dive into a smoother, organized, and far more efficient web-building journey with the all-new SP Page Builder 4.

Get SP Page Builder 4

How to Create Web Forms Using SP Page Builder Addon

2022-03-01T12:00:25+00:00

A website can either create or destroy your business. So it is important to pay attention to each of your web pages. And your contact page is no exception! Contact form in your website not only connects your visitors with your website but also to your services and products. That is why, when strategically crafted right, this can generate leads down to your sales funnel.

With SP Page Builder crafting such web forms will be nothing but a walk in the park. The easy-to-use drag and drop tools will make sure to let you customize each field in a user-friendly format.

So today, we are here with a simple tutorial for you to be able to create your own contact form and newsletter portal with just a few quick clicks!

Things to Keep in Mind While Creating a Web Form

Through web forms, you are giving your visitors proper means to connect to you. Which is why this should be given much emphasis and importance that will also portray your company’s gravity. Hence, there are a couple of factors that should be kept in mind. Here are some of the ideas for your help:

Keep it clear and concise: Upon landing on the contact page, your visitors primarily look for means to contact you or ways to find you without trouble. So keeping your page precise, clean, and simple will only add to the positivities!
Use simple language with clear instructions: Your potential customers should be able to understand what the web form is for. Therefore the use of simple instructions and clear instructions have no alternatives.
Highlight mandatory fields: No matter what kind of form you want to create for your website, it is always a good idea to highlight the fields that are compulsory to fill out.
Include examples of how the fields should be filled out: Sometimes filling out pieces of information can be confusing to many. Showing an example of how the fields should be filled out can turn out convenient for your prospects.

Keeping these tips in mind while creating a web form can surely result in a better conversion rate and user participation for your website.

Now without further ado, let's jump into the tutorial!

Create your Custom Contact Form

In this tutorial, we will try to give you an idea about how you can create a contact form for your own website contact page. We will be using Helix Ultimate Framework and SP Page Builder to create the contact form. Follow through the simple steps of this tutorial and get your form ready in no time!

Step 1: Install SP Page Builder Pro & Helix Ultimate

First things first, get your SP Page Builder Pro and Helix Ultimate downloaded and installed on your device. In case you are having trouble installing your Helix Ultimate Quickstart pack, check out our tutorial here.

Step 2: Create a New Page for the Contact form

Once you have successfully installed both SP Page Builder Pro and Helix Ultimate, it's time for you to embark on the main tasks. Login to your Helix Ultimate administrator. Navigate to the Components > SP Page Builder Pro. Hit +New.

Then rename the new page as ‘Contact’. Hit Save & Close.

Great! You have created a new page for your contact form.

Step 3: Log in to the Frontend Editor

Now to start creating your form, switch to the Helix Ultimate frontend editor. To do so navigate to Components > SP Page Builder Pro and scroll down to the new page you just created in step 2. Upon hovering over the ‘Contact’ page you should be able to see the ‘Frontend Editor’ button. This should land you to the frontend editor of your page.

Step 4: Choose a Layout and Add New Rows

Now it’s time to choose your page layout and add new rows. This mainly depends on how you want your web form to look. In our case, we will create a custom layout for creating a simple contact form with a separate panel for address.

From the frontend editor, hit ‘Add New Row’ and set the layout grid to 6+6.

Bingo! Your custom rows have been added.

Step 5: Enter the Form Builder and Text Block Addon

The next thing to do is add the Form Builder Addon in one of the rows. Fill in and edit the fields as your requirement. Here we have chosen to add a Text Block Addon to add some fixed relevant information.

Step 6: Edit the Fields to Fit Your Necessity

Next, we customize the fields according to our preferences. To edit your form, simply click on the addon you have just placed and the related edit panel should show up in the SP Page Builder sidebar.

For a simple demonstration, here we have chosen to keep 3 relevant fields - Name, Email, and Message for our form. To do that, simply navigate to the sidebar of your addon and delete the unnecessary fields from the default form. To delete the fields choose the trash icon.

Once done, go to the settings option of ‘First Name’. In case you want to add new fields, click on the ‘+ Add Item’.

Upon expanding the field settings, choose Form Elements, rename your Fields Label, Field Placeholder, and set the Field Width to 100% as shown in the screenshot. Hit Apply.

Repeat the same process for the rest of the items in your form.

Step 7: Highlight Compulsory Fields

As discussed before, it is always a good idea to highlight the important fields that must be filled out by the users. To do so go back to the field settings and scroll down to the ‘Is Required Field’ and ‘Show Required Star Mark’ options. Enable both options and hit Apply.

For easy demonstration and better understanding, we will be disabling the Captcha button. To do so, go to your Builder Form Addon options and scroll down to Redirect, Security, and Policy Options. Disable the ‘Enable Captcha’ button.

At this point, we are pretty much done with our form. Now let's give our Text Block row a quick makeover!

Step 8: Add Changes to Text Block Row

Since we only want to use the space for addresses and details so we will keep it simple.

Just as you have done for the Form Builder Addon, click on the Text Block Addon row and the addon options should show up on the sidebar.

Here we are setting the Title and editing the Content body as shown in the screenshot.

Hit the Save button at the bottom of the sidebar. At this point, our Contact page format is almost ready.

You can always go ahead and style the page easily using the Style tab.

Step 9: Create New Menu Item and Assign the Created Contact Page

Now let's see how we can display our created form on the website. Create a new menu for displaying your contact form.

From your helix ultimate dashboard, go to Menus > All Menu Items > + New.

Fill in all the required information like below:

Title: Contact
Menu Item Type: SP Page Builder > Page
Select Page: Contact ( You created in the previous steps)
Menu: Main Menu

Hit Save & Close.

To view your created menu navigate to Systems > Site Templates Styles > shaper_helixultimate - Default > Template Options. Upon landing on the Helix Ultimate Frontend Editor, you should be able to see the newly created menu item ‘Contact’ in the navigation panel. Click on the menu item to see the final output!

Create Your Custom Newsletter Form

You can also create your customized newsletter in similar ways. Just follow the steps shown above till Step 4. After that assign Opt-In Form Addon to your desired position and customize however you want it to look!

Final Words

If your web forms can initiate user action and increase user engagement then your website is just on track! Make sure not to strike your users with disturbing and unimportant tasks that would annoy or drive them away. Instead, make your contact form useful and convenient for both your visitors and yourself.

Hope this tutorial was helpful for you and should you have any more relevant questions, do not forget to let us know in the comment section. Happy web building!

Try SP Page Builder for FREE!Get SP Page Builder Pro

How to Create a Custom Header Using Helix Ultimate

2022-02-09T10:15:23+00:00

We all know the importance of having a stunning website to boost the credibility of your business. But have you ever emphasized the headers of your website? Because the header sits at the top of your website, this panel plays one of the significant roles in attracting your potential visitors, buyers, consumers, etc.

With the mighty Helix Ultimate, creating a custom header got simpler and more fun as it enables you to create your very own custom header without any prior coding experience. Although Helix already comes with built-in predefined headers with ready-to-use layouts for you to choose from, you can always go ahead and create your own fun custom header. So in this article, we will take a look at how you can create one step by step.

The Importance of Header for Your Website

It’s astonishing that although most of the businesses owning a website don’t pay much attention to their website header. Since the header sits at the top of your website, it should be able to create the first impression in capturing and creating a positive vibe.

Hence there are a couple of significant keys that you ought to keep in your mind while creating one:

The header should contain a minimum of 2 elements - your business logo and navigation menu.
Come up with something exceptional. Thinking of a unique header can immediately catch your prospect's attention and make them explore your website further.
It is better to have no headers at all instead of a messy one. So don’t be extra careful when it comes to creating well-structured headers.
Pay extra attention while choosing the Fonts. Headers must be legible, period! As much as it is praiseworthy to be creative with the logo, it is only recommended to be as formal and clean with the font.

Just keeping these factors in mind while creating your custom header can land you a successful, good-looking one. So without anymore further delay let's jump into the tutorial.

Step 1: Decide What You Want to Put Up for Your Header

As we have already discussed, there are no alternatives to having a proper, sensible header. So sketch down how you want your header to look first and then dive into implementing it on your website.

For this particular tutorial, we will be implementing a simple logo and a navigation menu for your understanding.

Step 2: Log in to Your Helix Ultimate Frontend Editor

Firstly login to your helix ultimate backend administrator and from your dashboard go to System > Site Template Styles > shaper_helixultimate-Default. Choose Template Options and visit your Helix Ultimate Frontend editor.

Step 3: Hide Predefined Header

Helix Ultimate already comes with a range of different headers for you to choose from. In order to allow your custom header to be visible, it’s necessary to hide those predefined headers. To get this step done navigate to the sidebar and choose Basic > Header. Click the toggle button off.

Step 4: Upload Your Logo and Create Your Custom Menu

Once you have logged in to the frontend editor, upload your Logo first. To do so navigate to the sidebar and choose Basic > Logo > Select.

Next is creating your menu items. To do that simply navigate to the sidebar and choose Menu > Add Menu Item.

Create your Menu Items and fill up the necessary fields.

Title: Popular
Menu Item Type: System Links > URL
Link: #
Menu: Main Menu

Double-check the information you provided and hit Save. Repeat the same process for the rest of your menu items that you wish to display in your header.

We have also included a Mega Menu for our header in this tutorial. In case you want to create your own Mega Menu then here is how to.

Step 5: Create Custom Header Layout

Now it’s time to create your custom header layout. From the sidebar choose the Layout option. Once you hover over the first row you should be able to see the (+) sign appearing under the row. Click on it and it should create a new layout.

Drag the newly created layout at the top of the entire layout grid. To get into row options now click on the slider icon. Rename the section title as ‘Header’ and hit Apply.

Now moving on, choose the boxed icon to create a custom column layout. You can already find a range of predefined layouts or you can create your own. This layout proportion depends on what your header consists of. In our case, we are going to use a logo and a navigation menu for demonstration. We will choose a 4+8 column layout.

Step 6: Choose Module Position From the List

Choosing a module position for your header element is important. For this tutorial, we are using a logo and a menu. Hence here we will assign module positions to our header elements individually.

To do that hover over your first column layout. You should be able to see three dots. Click on the three dots to access the column option. From the Module Position option, we simply choose ‘Logo’ for our logo position and hit Apply. You can choose your own logo image from the frontend editor's Basic > Logo > Select.

Repeat the same process for the second column layout which we have assigned for the menu. So for this column layout, we choose the position ‘menu’ and hit Apply.

Do remember to hit the save button from the frontend editor to check the changes.

If you were able to follow so far then great job! You are pretty much done with creating the custom header. Let’s check the final result:

Ending Thoughts

Website headers play important roles in your site’s success or failure. Apart from branding your beloved website, headers can also help promote other important information, display social media links, and a lot more. Therefore, it is recommended that you take your time and thoughts before designing and creating one for your website.

Hope this tutorial was useful and helpful to you in case you were struggling to create your own header without having to implement any coding.

Do you still have questions and queries regarding custom header creation? Then let us know right in the comment box.

Get Helix Ultimate

How to Create Mega Menu Using Helix Ultimate in Joomla

2022-01-25T10:56:43+00:00

Mega Menus, if implemented correctly, can actually enhance your website’s usability to a great extent. It's a great way to display information about your website. This can include categories and subcategories, products and services, testimonials and much more. From improving the navigation experience for your users to creating smart information architecture, a mega menu can come in handy if you have a range of products that you want to display.

Creating mega menus can be undoubtedly troublesome at times. But not with Helix Ultimate 2.0. With Helix Ultimate, mega menu can be added to any module position, sub position or custom position in your Joomla site. It can also display any type of content such as categories, articles, videos, images, links and more.

Today, we will take a look at how we can create a mega menu using the best Joomla template framework - Helix Ultimate. Follow through these simple steps of this tutorial and you will get your mega menu ready right off.

So without further ado, let’s jump into the tutorial.

Step 1: Log in to Your Localhost or Cpanel

First and foremost, log in to your local host or Cpanel. By this time you should be having your Helix Ultimate Quickstart pack installed and configured.

If you haven’t set up your quickstart pack then here is how to do so.

Step 2: Switch to Helix Ultimate Frontend Editor

Assuming you have your quickstart installed and all ready to go, switch to the Helix Ultimate Frontend Editor.

To do so navigate to the System from your dashboard. Then choose shaper_helixultimate - Default > Template Options

Step 3: Add New Menu Item

From the frontend editor, navigate to the sidebar and choose Menu. From Menu choose Menu Builder and add your Mega Menu.

In our case, we will name the menu item Mega Menu and fill in all the required information like below.

Menu Item Type: System Links > URL
Link: #
Menu: Main Menu

Step 4: Assign Menus to the Parent Menu

Once you are done creating the parent menu, it’s time to create the sub-menus and assign them to the parent menu. Create all the sub-menus that you want to assign to your mega menu in the similar way you did in Step 3.

Now to assign your created menus to your mega menu you can simply drag the menus and drop it on the parent menu.

Or, you can choose the parent item from the Edit Menu Item option.

Repeat the step for adding the rest of your menu items. Once you are done, the initial Menu should look like this depending on how you nest the sub-menu items to their respective parent menu.

Step 5: Assign Modules and Layouts to Your Mega Menu

Once you are done with step 4, it is time to assign layouts for your Mega Menu. From the sidebar, choose Menu and scroll down to the mega menu you have just created. You’ll see an icon for layouts option like the screenshot below:

Now enable the Mega Menu option and add rows for your sub-menus. In our case, we have chosen the row with 4 columns.

Please note that you can use a predefined layout or create your own layout (custom).

All your menus and submenus will automatically get assigned to your layout’s rows and columns.

Step 6: Add Custom Modules According to Preference

Now that you’ve created your preferred layouts you can add any module from the list of available or installed modules. For example, you can display a banner, the latest articles, or a login module.

Just click the plus (+) icon inside the column where the module should be, then select a module. Or you can have your own customized module! In our case, we want to add the photos module to display our own photos just below the “New in Store” menu.

Let’s see how you can customize your own module according to your preference. Carefully follow through the steps and it should be ready in a blink of an eye!

Firstly, from the dashboard navigate to Components > SP Easy Image Gallery > Albums.

Here we are required to create an album that we wish to display thumbnails of in our mega menu. Hit +New to create a new album. Add a title to your album and featured image. We have named our album ‘Album 2’.

Once you Save the album you can upload your preferred photos. Upload all your photos and hit Save & Close. Your Album has been created.

Then we move on to the next step which is to create your relevant modules. From your dashboard navigate to Content > Site Modules > + New. A list of available modules will show up from where we look for the SP Easy Image Gallery Module.

Select the module and fill in the required fields. For us we set the name of the module as ‘Photos’, chose our previously created ‘Album 2’. Similarly, fill up and adjust the rest of the field according to your preference.

Great! Now your module is ready!

Next, go back to your Helix Ultimate frontend editor. Scroll down to the Mega Menu you have created and choose the ‘Mega Menu’ option. Choose the add button.

Now from the list of modules you should be able to see the module you have created and choose the module.

Final Output

Good job! You have now displayed your custom module exactly the way you wanted. Once you are done your overall Mega Menu should look like this:

Similarly, you can choose other modules and customize them according to your need. Here we have also set up a search button using the Search module using similar steps.

Wrapping Up

To keep your menu list organized and convenient for your users to locate what they need, a mega menu is an easy way out. And with the Helix Ultimate simple drag and drop function, building mega menus has never been easier!

Hope this tutorial was beneficial to you and answers all your questions regarding building a mega menu. Do not forget to keep an eye on our blogs for regular updates, new releases, and more tutorials, and please do share your valuable thoughts and opinions in the comment section.

Download Helix Ultimate

How to Install Quickstart Package in Joomla 4

2021-11-15T10:46:52+00:00

If you have ever tried to install a Joomla Quickstart manually then you might have noticed it comes with a lot of settings and options that need to be configured for you to use it smoothly. To help ease the struggle Quickstart packs are there that come together with the sample data and all the necessary items and ingredients that are required. And all these together will help you let your site get going in no time.

In this tutorial, you will get a closer look at how you can get your Joomla Quickstart pack downloaded and installed in Joomla 4.

What is a Joomla Quickstart Package?

A Joomla Quickstart pack is actually a copy of a template's demo website consisting of all the related necessary components like all demo site extensions, installed and configured templates, sample data containing the configured extensions, custom contents, etc. In short, Quickstart.zip is the exact demo site of a particular template.

As the package is loaded with quite a few elements it is about 30 MB in size and not 2MB like the template only pack.

Downloading the Quickstart Package

If you are looking to get attractive and responsive Quickstart packages to give the desired look for your website grab yours from the JoomShaper website. After logging in to our website navigate to the Products tab and choose Templates from the dropdown menu. Choose your desired template that you wish to install and choose the Quickstart Pack - Joomla 4 button. Click Download.

Methods of Installing Quickstart Package

You can install the Quickstart package both on the localhost and the web server. In this tutorial, we are going to see the Quickstart installation methods both on the server and the localhost.

So, let's get started.

Install Quickstart on a Localhost

If you are locally developing your website and looking to install the Joomla Quickstart pack then you need to have it installed on your localhost. Follow along with these simple steps and your Quickstart package will get ready to go in no time.

Copying and Unzipping Quickstart Pack to the Localhost

To set up your Quickstart pack on your localhost you can use local server software like MAMP, WAMP, XAMPP. Assuming you already have set up your local web server environment, copy the Quickstart zip file that you have just downloaded to the htdocs folder of the local server that you installed. Extract the Quickstart zip file there.
In case you haven’t installed any local web server and need relevant help you can check out the tutorial here.

Visiting Localhost Address to Start the Installation

Now open your browser and type “localhost” in the URL panel.

Click on the unzipped folder from the Index page which will land you on your Quickstart’s installation page. You should be able to see the screen given below:

Enter your website name and go to the next page. Fill out the login data using your site name, username, and password.

Hit Setup Database Connection once you are done. This will land you on the database configuration page where you carefully need to fill out the form.

Enter the username and password of the database as “root”. (Default for localhost software like MAMP. Please check for your localhost software). Now set a database name and click next.

Installation Completed!

Once you have successfully completed the installation the following page will appear.

Now hit Complete and Open Admin to access your Joomla backend administrator.

Install Quickstart on a Web Server (Cpanel)

Now, we will take a look at how to install a Quickstart pack to your web server. There are two ways to upload the Quickstart file to your server.

cPanel
FTP client

In our case, we will be using the cPanel as our web hosting control panel. Assuming your host uses cPanel, your host should provide you with a direct link to access cPanel. Once you visit that address, you’ll be prompted to log in with your cPanel username and password.

If you haven’t received your username and password please contact your hosting provider for support and help.

Upload the Quickstart Pack to the Server

After logging in to your cPanel using your username and password, go to File Manager from your cPanel dashboard.

Now on cPanel’s file manager, there are two ways for you to upload your files.

First of all copy the folder that you got after extracting your Quickstart zip pack. Now you can start off by clicking on the file manager on your cPanel and then navigating to the public_html folder. Then simply paste your extracted folders there.

Or you can also upload your downloaded Quickstart zip file to public_html in your File Manager.

Create a New Database and a Database User

While installing the Quickstart pack on your server you will come across a ‘Database Configuration’ page that will require valid information. For that, we need to create a MySQL database user and a database on your web server first. Let’s take a look at how we can create a database.

On your cPanel visit the MySQL Database Wizard on the cPanel and create a database first.

Give a name to your database and hit Next Step

Now create a database user by filling out the username and confirming your password on the same environment of the cPanel MySQL Database Wizard.

Now that you have a database and a database user, it is time to assign all the privileges to the MySQL user. Choose all privileges in the ‘ Add user to the database ’ page and hit Next Step.

You have successfully created a new database and a database user!

Start Installation by Visiting Your IP/Website Address

To start your installation, open your browser and navigate to the URL panel and type in your appropriate domain name. You should be able to see the initial installation page at this point. Follow through the installation process as you have done for your localhost.

In the database configuration page use the database username and password of the user you have just created along with the newly created database name. Hit the install button.

Once the installation is complete, a success message will show up.

Installation Completed!

That’s it! You’ve successfully installed your Quickstart package in Joomla 4 on your web. Click Complete & Open Admin to view and edit your newly installed Quickstart pack.

Summing Up

So far in this guide, you have learned two different ways of setting up the Quickstart package. Hope you could find your way through to your preferred Quickstart pack using this tutorial. Do not forget to keep an eye on our blogs for regular updates, new releases, and more tutorials and please do share your valuable thoughts and opinions in the comment section below.

How to Improve the Domain Authority of Your Joomla Site

2021-07-30T06:57:41+00:00

Domain authority is a useful metric to determine how well your website is performing compared to competitive sites. But we must also emphasize that it is not an official ranking factor for Google. So what does that mean? Should we still strive to improve it?

If you have similar questions in your mind, then you’re in the right place. By the end of this article, you’ll understand what exactly domain authority is, why, and how you can improve the domain authority score of your Joomla site.

Sounds good? Let’s get started.

What Is Domain Authority

Domain Authority (DA) is one of the ranking factors that determine where your website will rank in the search engine result pages. It is developed by a company called Moz to tell us how well a website should rank, using a 0 to 100 scale.

It predicts how likely a domain is to appear in the SERPs compared to its competitors. The higher the DA, the better chance it has to rank, in theory.

Several factors determine your website’s domain authority, such as:

The number and quality of your site’s backlinks
The quality of content on your website
The popularity of your domain on various social media networks
The performance of your website in search results

Is Domain Authority Important

Does domain authority actually matter? Simply put, there's a direct correlation between high domain authority scores and higher rankings. Although it’s not necessarily a metric used directly by Google, it’s still one of the important metrics SEOs use to gauge how valuable your site is.

It’s not the be-all or end-all of SEOs, but it gives you a reference to how well your website is performing. Therefore, if you want to grow your SEO rankings, you should consider improving your domain authority.

How Is Domain Authority Calculated

Domain authority can be easily calculated using the Moz Domain Authority tool, a quick, free tool that will show your domain authority score.

All you have to do is create a Moz account to use it and it’s free for ten lookups a month. Once you create an account and look up your site using the Link Explorer, you’ll get a lot of valuable information like your Domain authority, Linking Domains, Inbound Links, and Ranking Keywords.

If you have a new site or you run a small business website, your domain authority score will be very low. But that should not concern you. Compare the score against your competitive websites to get a better idea of how your site is performing.

How to Improve the Domain Authority

While this article focuses on the ways to improve your domain authority, don't obsess with the score. Use it as a baseline to determine if your efforts to increase domain authority are paying off.

Improve Domain Authority Through Backlinks

Backlinks, which are links from other websites to yours, affect your domain authority. Sneaky redirects and bad backlinks can get your site banned from search engines. Make sure the links to your website are valid and free of any black-hat SEO tactics.

The first step is to get rid of bad backlinks because a lot of low-quality irrelevant backlinks will only harm your rankings. Here's a tool from Moz where you can check your site and its links to sort the bad ones out.

The next step is to add good links. Reach out to businesses for mutually beneficial partnerships and do guest postings on other sites to get more exposure. Your content marketing strategy also plays a crucial role in increasing your domain authority. Consider writing blog posts on your websites if you don’t already. The more content you create regularly, the more likely your DA will improve.

Optimize Your Internal Linking

Have you ever noticed how brilliant the internal structure of Wikipedia is? An excellent top-down structure that is fully optimized for search engine crawlers and keeps site visitors engaged is the key here.

You need to create a menu structure for your Joomla site that is optimized for passing link juice. Also, if you write blog posts, you can link every post to 2-3 others posts on your blog.

Here are some of the best strategies to follow for internal linking:

Add internal links wherever it helps your readers
Place links in the body of the page rather than the header or footer
Link from new to old and from old to new pages
Link from pages with high traffic to pages that have high conversion rates
Use anchor text in the text of the link
Fix broken internal links

Make Your Site Relevant

Relevance or query relevance is the consistency of users' queries and your website's content. When a user finds their query relevant to the title, URL, and meta description of your site, they are most likely to click it.

Perform consumer analysis, get to know your audience, their concerns, and their intent. When you know your users' intent, you can use the right words/queries to find the relevant keywords.

Once you find the keywords, it's time to put the right keywords in the right places to make your site relevant. Use keywords in the page title, content, H1 header, image alt tags, and your meta description.

Remember not to overstuff your content with keywords. At the end of the day, you want your content to make sense to your users and not only to search engines.

Improve Your Page Load Speed

Who doesn't love to browse fast websites? Well, Google loves it too and made page load speed one of the factors to determine your site's rank.

There are plenty of tools available to check the page speed, such as Google Page Speed Tool, WebPageTest, Google Analytics, Lighthouse.

Here's a quick checklist to follow to work on speed optimization of your Joomla site.

Choose a reliable Joomla Page Builder
Use Joomla templates optimized for speed
Enable Gzip compression on Joomla
Compress and optimize images before using them
Enable Joomla caching
Enable Server caching
Use Content Delivery Network to serve content

For a detailed guideline, visit HERE.

Master the Art of Social Media Marketing

If you have a well-optimized website with great content and still not getting the reach you deserve, you probably haven't mastered the art of social media marketing yet.

Social signals are a big ranking factor, and you have to promote your content and engage with the audience to improve your domain authority.

Here are a few things to keep in mind to get more social signals.

Set goals and plan strategies that are relevant to your business
Research your target audience and set KPIs
Promote your content with engaging social copy
Be consistent with your social presence
Assess what’s working and what isn’t to keep improving

Wrapping Up

Domain authority is an important metric and surely improving it propels your business forward. But also remember it’s a comparative metric, the score on its own means very little. So instead of sweating on the score, focus on the improvements that can be done.

Follow the steps we mentioned in this article and when you do, your domain authority will rise. As well as your site’s ability to rank well in search engine results. Good luck!

15 Tests You Must Run Before Launching Your Joomla Site

2021-07-17T10:03:41+00:00

You took the time to plan and develop your Joomla site carefully, and now it's showtime! But is your website launch-ready? Launching a website can be daunting if you don't know what to check before the world is ready to see your site.

It can be baffling to think of all the tests that need to be run before a website can be considered launch-ready. Today, we will make things a little easier as we discuss the must-run tests before launching a Joomla site. All you need is a well-crafted website and this checklist.

Ready? Let's jump right in!

Update Your Website’s Favicon

Favicon is your website logo that appears next to the site’s title on your browser tab. Usually, this is the logo of your brand. This way, visitors can quickly notice your website when they have many tabs opened in a browser. Setting up your site’s favicon is an easy task but often slips out of our minds.

All you have to do is create a 16x16 image of your logo and convert it to ico format using any online free tool. Copy the file to the /joomla/templates/<your template> directory and name it favicon.ico, and it should show up in the browser. For a detailed guideline, visit HERE.

Remove Unused Extensions and Plugins

Extensions and plugins are great. They let you add almost any functionalities you want to your Joomla site. And you probably have played around with quite a few of them in the development phase. But there's no reason to keep them if you've decided not to use them.

Give a final check and remove all unused plugins and extensions before launching your site. Otherwise, they will bloat your site, slow the load time, and make your Joomla site prone to vulnerabilities.

Harden The Security

Don't let misconfiguration, lousy hosting, or vulnerable integrations be the reasons your precious site is prone to hacking. Before your site goes live, make sure you have taken care of the following:

Secure login with a strong password: Use a secure password generator to create and manage passwords for your Joomla site. Don't forget to enable 2-factor authentication to harden the security further.

Remove unreliable integrations: Don’t settle for unreliable extensions no matter how tempted you are. They can expose serious vulnerabilities to your Joomla admin.

Use reliable hosting: Ensure to check security measures and monitor their server network before choosing a hosting provider.

Set Up Google Analytics

Google Analytics lets you know your traffic sources, keyword volume, top content, etc. and will give you an insight into your website performance.

You'll want to have Google Analytics installed on your Joomla site from the get-go so that you can understand the site visitors right away and optimize things accordingly.

SEO and Meta Descriptions

SEO and Meta descriptions increase your organic click-through rate and help you rank in the search engine. You can set global metadata in your Joomla site from the System > Global Configuration > Site tab and write your description under Meta-Data.

However, this will create the same description for every page, so you are encouraged to set unique metadata for every page. For instance, in Article Manager, you will find the Meta Description field under the Publishing tab for every article. Similarly, in the Menu Manager, you will find it under the Metadata Options.

Check Mobile Friendliness

As more and more people are accessing the internet on mobile devices, you have to make sure your site performs well on all devices. You can easily do the mobile-friendly test online.

The fastest way to check is to perform a Google Mobile-Friendly Test. Type in the full URL of the web page, and it will typically take less than 5 minutes to run. So please do it!

Test Form Submissions

Create and test all your website forms before the site goes live. You can send a few test form submissions to ensure they are working as expected. Here's an essential checklist to follow while testing your forms:

The form is well instructed and indicates a clear purpose
Test if the form validation is working properly
Form notification emails are delivered successfully
See if all the conditional logic is working properly

Check Order and Payment Process

If your website sells products or services, you need to review the checkout and order process before it takes actual orders. Create a test order and check everything works as intended.

You should also test each payment method that is available on the website. Perform functional, integration, performance, and security testing to provide a seamless shopping experience to the users.

Set Up Backups

Backups can be a lifesaver! If anything goes wrong, backups can prevent data loss and protect against unwanted damages.

Your hosting provider should set up a backup solution by default. However, you are encouraged to use third-party integration like Akeeba Backup to take regular backups of your site and know how to restore your site from backup.

Create a Custom 404 Page

You have no control over a misspelled URL, but how about turning this negative experience into a positive one? A custom 404 error page can reduce the bounce rate, keep people engaged, maintain consistent branding across your site, and guide the lost visitor to your site. After all, every visitor is important in the initial growing phase of your website.

Learn how to create a custom 404 page for your Joomla site and better prepare your site for the launch.

Check For Broken Links

Checking for broken links is crucial as we often change links and pages in the development phase. Broken links are basically dead links that users can't access for various reasons.

Here's how you can check and resolve any broken links you might have on your site.

Check Google crawl errors
Use 301 redirect
Leave as a 404
Recreate and replace the content at the broken URL

Review URL Mapping

This one applies if you are redesigning your website. Once you're done revamping your site, review the URL map to guarantee the redirects will be correct when the site launches.

URL mapping will ensure a seamless transition from the old site to the new site and is also beneficial for search engines to transfer SEO equity from the old pages to the new pages.

SSL and HTTPS

Would you still browse a website if your browser warned you about the site not being secure? You already know the importance of securing your site using an SSL certificate, and in 2021, it is an out-and-out necessity. From improving customer trust, search engine ranking, data protection, SSL does so much for you. So don't forget to activate SSL and enable HTTPS on your Joomla site.

Set Up Your Privacy Policy

If you haven't set up a privacy policy page for your site, it's a reminder to write one. It would be best if you made an effort to craft an easy-to-understand and accurate document. Also, if your business is based in the EU or you are doing any transaction with EU citizens, your privacy policy should comply with GDPR.

Validate Your Website

Apart from the tests mentioned above, here are some of the must-run tests that you should perform to ensure a smooth users experience.

Google PageSpeed Test: Who doesn't get frustrated with slow sites? Test where your PageSpeed stands and take necessary actions to improve it.

Check Browser Compatibility: Ensure the website pages are cross-browser and device compatible. They should look good and function properly in as many browsers and on as many devices as possible.

Grammar and Spellings: Do you want your site to look silly? If no, then give a final check to the content to make sure it is free of any grammatical and spelling errors.

Wrapping Up

You can easily miss the sheer number of seemingly minor details before launching a website. That’s why it’s always nice to have a checklist. Do you have a checklist of your own? Feel free to share with us in the comments.

Congratulations if you have come this far! You are now ready to introduce your site to the world. Go ahead and launch your website. Good luck!

How to Make Your Joomla Site GDPR Compliant

2021-07-14T08:12:37+00:00

Safeguarding customer privacy is more than a protective measure; it is crucial for your brand growth and online presence. Consumers are becoming more and more careful about what personal data they share online. Hence data protection and privacy can not only create a business advantage but also has become a necessity.

If your business has an online presence and you’re still in the dark about GDPR compliance, it’s time to wake up! Today, we will cover how to incorporate best practices to protect customer's information and make your Joomla site GDPR compliant. But before we do that, let’s find out what exactly is GDPR.

What is GDPR compliance?

GDPR stands for General Data Protection Regulation. It is a regulation in EU law that is written to protect citizens from privacy and data breaches.

In simple terms, the legislation specifies what personal data is and regulates what can be done with them. It answers the questions of what is considered consent and ensures cookies are considered personal data and you take consent before using them.

The seven key principles of GDPR are:

Lawfulness, fairness, and transparency
Purpose limitation
Data minimization
Accuracy
Storage limitation
Integrity and confidentiality
Accountability

Since it is a law in the EU, should businesses based outside the region bother about GDPR? Definitely! Wherever you are based, if you are doing any business with EU citizens, you have to make your website GDPR compliant.

What Happens if You Don't Comply GDPR

The consequence of non-compliance can be very serious. For less severe breaches, the fine can be up to 10 million Euros or 2% of the firm’s global turnover. The fine can be up to 20 million Euros or 4% of the firm’s global turnover for more serious offenses.

Not only that, it can cause severe reputational damage, and you may lose the trust of your customers.

How to Make Your Joomla Site GDPR Compliant

Now that you are well aware of what GDPR is, it is crucial to ensure your Joomla site is GDPR ready.

Here is a checklist to make sure your Joomla site complies with the GDPR.

Use GDPR compliant template, extensions, plugins: The template and extensions you choose to build your Joomla site can streamline the alignment with GDPR requirements. Since they create the interface that visitors use to interact with your site, it needs to have proper elements available to let users consent to third-party cookies.

While choosing your Joomla template or extensions, go for reliable providers that strive to make their products GDPR compliant.

But it is also worth mentioning that while GDPR compliant templates and extensions can make the process easier, it’s your responsibility to actively work on it. Since you’re in charge of the data processing strategy, activities, and processes.

Obtain clear consent to use cookies (Cookie notification): One of the most common ways for personal data to be collected and shared online is through website cookies. GDPR requires a website to only collect personal data from users after they have given their explicit consent to the specific purposes of its use. This means users have to actively opt-in and accept cookies.

In short, if your Joomla website uses cookies you must:

Inform your users that your site/app (or any third-party service used by your site/app) uses cookies
Explain, clearly and comprehensively, how cookies work and what you use them for
Obtain informed consent before storing those cookies on the user’s device

The good news is there are plenty of reliable extensions available in the Joomla extensions directory to manage cookies and resources on your Joomla site. One of them is SP Cookie Consent which lets you display a cookie or other legal notice on your Joomla website and inform the visitors that your site uses cookies.

You can also test if your Joomla site complies with the GDPR cookie consent HERE.

Update your privacy policy: GDPR does not call for a complete rewrite of your privacy policy. All you have to do is just adjust and update your current privacy policies to be made more specific to meet the GDPR standard.

Here’s a rundown of some of the changes you need to make to make your privacy policy GDPR compliant.

An easy to read privacy policies
Third-party disclosure that you share data with
State how you collect and store the data
State what you do with the data
Give users the right to access their own data
Give users the right to remove data

Website forms & Newsletter signup: Your Joomla site likely has newsletter signup, inquiry/contact form, registration form, or forms of some kind to collect user data. GDPR requires you to have informed consent of the users before you collect data through these forms.

While working with forms, keep in mind the following:

Avoid storing data if you can
Encrypt the data if you have to store
For newsletter signups, make sure the email provider is GDPR compliant too
You have no pre-ticked boxes on the forms

SSL certificate: GDPR does not specifically say your website needs to have an SSL certificate to be GDPR compliant. But if your site collects and processes user data, you need to have an SSL-protected site to protect and secure the user data.

Regardless of GDPR, having an SSL certificate is the best practice. It gives your site heightened security, helps you rank in the search engine, and more. Read our article on how to enable SSL on your Joomla site to fully protect your site.

Make sure third-parties are GDPR compliant: Your payment gateways, chat providers, or any other third party you share data with have to be GDPR compliant too. As you become jointly responsible for the data you share and you could be held accountable for their lack of compliance if they fall short.

You are highly encouraged to approach each of the third parties you use and ask for a copy of the contract or agreement between you.

Wrapping Up

At JoomShaper, we ensure data protection and security are at the heart of everything we produce. Our templates, extensions, and plugins are developed and updated with GDPR in mind. But templates and frameworks alone can not make your Joomla site one hundred percent GDPR compliant.

As a website owner, it’s your responsibility to consult with legal professionals to understand the full scope of their compliance obligations under GDPR. And take the necessary steps as mentioned to make your Joomla site GDPR-compliant.

Did we miss anything? Let us know your thoughtful feedback or suggestions in the comments. Good day!

8 Effective Ways To Make Money With Joomla

2021-07-07T10:35:24+00:00

Joomla - a CMS that has truly stood firm to its Open Source values. A CMS that has continued to power millions of websites and won millions of hearts over the years. And that’s not all, the stable version of Joomla 4 is right around the corner featuring a fresh user interface, a lighter code base, tighter security, and better accessibility. It’s fair to say that there’s never been a better time to become a Joomla fan and make money with it.

Working with Joomla is not only fun and exciting but also can help you earn money. And if you’re looking for different ways to make money with Joomla, you’re in the right place. Before we start, it’s worth mentioning that while there are many ways to make money with Joomla, most of them require time and patience before you can see actual results.

Let’s jump into each of these ways in detail, shall we?

Selling Online Courses With Joomla

We have entered a new era, the era of online learning! Especially with the pandemic going on, eLearning has become a hot thing. The good news is If you’re an instructor you can easily take your classes online and create an Udemy-like platform in Joomla.

This is a great way to make money with Joomla by providing lessons, support, learning materials, etc., to learners. The best part is, if you already have a Joomla site, SP LMS can easily turn it into an online learning platform.

Make sure your online courses are qualitative so that more people are willing to pay for them.

Creating an eCommerce Site With Joomla

It goes without saying that eCommerce is constantly booming. If you’re a business owner and haven’t taken your business online yet, you’re missing out big time. You can easily create an eCommerce site with minimal efforts in Joomla - thanks to its huge number of extensions, templates, and plugins.

Don’t worry If you’re just starting, we have got you covered. Read our in-depth article on how to create an eCommerce site in Joomla and reach more customers than traditional retail. With so many people making online purchases, you don’t want to miss out on the fastest-growing retail market.

Creating a Classified Ads Website with Joomla

Apart from the eCommerce site, you can also build a feature-rich classified ads site, without writing a single line of code with Joomla!

How does it work? A classified ads website is a place where individuals and companies can buy and sell goods or services. In classified websites, goods and services are arranged in different classes and categories. You can generate revenue by charging a fee to anyone who places an ad on your site. Or if your site generates a lot of traffic, you can also earn revenue directly from Google AdSense ad blocks.

To create a classified ads site or add such a feature to your existing Joomla website, you may want to look at these classifieds ads Joomla extensions.

Getting Paid to Publish Reviews

If you’ve got a passion for writing blog posts then this one is perfect for you! Writing paid reviews is a much easier way to make money with Joomla. All you have to do is own a Joomla blog and know how to write blog posts.

Don’t confuse writing paid reviews with sponsored posts. In the case of a paid review, businesses pay you to review and write on their product or brand. While for sponsored posts, interested business owners send you an already written post, and pays you to publish it to your blog.

If you choose to write a paid review post to make money with Joomla, make sure you write honest reviews and choose products with good reputations. Also, don’t forget to dedicate a page on your blog to your review policy to explain your review process and how businesses can get in touch with you.

Publishing Sponsored Posts in Joomla

As I’ve mentioned earlier, you can also publish sponsored posts where interested businesses send you an already written post and pay you to publish it to your blog.

Earning money with sponsored posts on your blog is no rocket science but you have to keep the following things in mind to get started.

Add rel=”nofollow” tag to sponsored links.
Time your publication of sponsored posts carefully.
Tie the post to the value it adds to your audience’s life.
Choose your clients and projects wisely.
Don’t make the sponsored posts sound like a big sales pitch.

Selling Ads Space on Your Joomla Website

If you are looking for an alternative to classified ads websites, you can use your existing Joomla site to sell ads space and make money from it. By selling ads space you allow businesses to place content like video, text, or banner on your Joomla site.

You can start selling Ads space if you already have a decent amount of traffic on your Joomla site. To get started, create an ‘Advertise with Us’ page, with information about your ad placing policies and your site’s Google PageRank and audience profile. This will help you to gain credibility and secure a deal that aligns with your audience.

Selling Membership for Premium Contents

This is a recursive way to make money with Joomla. You can create a membership-based website and configure a membership subscription plan to share your restricted resources with the premium users only.

There are tons of membership and subscription extensions available in the Joomla extension directly that will allow you to sell membership on your Joomla site. High-quality premium content will not only help you make money but will also increase website traffic, premium engagement, and create brand perception.

Create Affiliate Marketing Website With Joomla

Affiliate marketing is one of the best ways to monetize your website traffic and earn a good amount of commission by recommending your audience great products. Make sure you let your audience know what values the products you are recommending can bring to them and not just make a big sales pitch.

The good news is no matter the type of affiliate marketing program you want to launch, the Affility Joomla template is a complete affiliate marketing solution that lets you showcase products, offer deals, list stores in categories, and place ads for extra revenue with minimal effort.

Wrapping Up

Whichever ways you choose make sure you follow the best practices and commit to being transparent with your readers. While there are other ways than the above-mentioned ones through which you can make money with Joomla, most of them require more advanced skills.

So what’s the wait? Go through each of the ways and see what works for you. Good luck!

How to Create a Beautiful One Page Website in Joomla

2021-06-15T07:54:17+00:00

We all know the importance of a good website to build credibility for a business. However, choosing between the options of having a unified one-page website versus multiple pages website can be tricky. Especially if you are new to the Joomla world and web development.

With mobile and social media users on the rise, single-page websites are gaining popularity. But is this the right choice for your business? If so, how can you achieve this in Joomla? To answer all these questions, today we will talk about one-page websites, what kind of businesses can benefit from them, and lastly how you can create a beautiful one in Joomla.

So, without further ado, let's dive right in.

What Is a One-Page Website?

A One-page website is exactly what the name suggests - a single-page website. This type of website aims to provide just the right amount of information for a user to make a decision and act on it. The overall long scrolling design makes it easy to get creative while crafting a story where you have full control over the order in which your content is seen.

Let’s have a look at the advantages of a one-page website:

Increased user engagement
Higher conversion rates
Easier navigational experience
Better structure
Simpler development and maintenance

Decide if It Fits Your Business Needs

So what kind of businesses can benefit from a one-page website?

If you have a lot of content, you might want to ditch the idea of using a one-page website. However, if you have short-form content, like a landing page, freelance website, photography portfolio, or any event-related website, then the single-page design is an excellent choice.

So whether you are an architect, graphic designer, painter, musician, copywriter agency, or book writer, you can opt for one-page websites.

One-Page Website in Joomla

Once you have made up your mind that a one-page website is what your business needs, it’s time to implement it.

In this section, we’ve put together everything you need to know from getting your domain name, to pre-launch tips, to having your site up and running in no time.

A Domain Name

The first step to building a great website is to find a catchy domain name. A domain name, simply put is the name of your website. It's preferable that your domain name and business name are as similar as possible. You can purchase a domain name from any domain popular name registrar such as Namecheap, GoDaddy.

A Stable Hosting

A strong and stable hosting is the foundation of your website. Getting the right hosting means more traffic and bigger revenue. This is where you don’t want to settle down for the cheap options.

High reliability, uptime, bandwidth, solid customer support, ability to scale are some of the important factors to keep in mind while choosing your hosting provider. If you don’t get your hosting right, your business will suffer! Read more about how website downtime can affect your search ranking.

Time To Build Our Site

To set the right foot off you need to choose a Joomla template that has all the necessary elements a one-page website needs. Although you can build your one-page website from scratch, it requires some web development skills and a hefty amount of time.

To make your life easier, we have a few one-page templates that will allow you to build a unified website in no time.

What’s even better is these templates are fully flexible to work with and you can customize each section according to your needs. Our top pick from the collection would be Qubic.

Qubic template features:

One-page layout
Modern & fully responsive design
SP Page Builder Pro
Multipurpose for any business
Built-in animations and more

Now, let’s create our website with the selected template!

We do not recommend installing Joomla and the template separately! Download the QuickStart pack of your selected template from our website, and get your Joomla site running with the template in no time.

Step 1: Copy the Quickstart pack to the localhost

Copy the Quickstart zip file to the htdocs folder of the local server. Extract the Quickstart zip file there.

Step 2: Start the installation by visiting the localhost address

From a browser, go to localhost/quickstart_file_name. This will take you to the configuration window like below. Enter your site name, email, username, and password. After that, click next.

Step 3: Database Configuration

Enter the username and password of the database as “root” (default for localhost software like MAMP). Set a database name and click next.

If you’re using XAMPP, use phpMyAdmin to create the database and fill up the fields accordingly.

Step 4: Remove Installation Folder

We are almost done. All you have to do now is click on the “Remove installation folder” to get started with your site. You can also contact our support team or check the documentation for further assistance.

Step 5: Optimize the Content

Once you have set up your template, start planning your content. Creating a one-page website gives you control over the order in which your site is viewed. So you need to logically and intuitively plan your site’s content.

A typical website needs an about page, dedicated pages to highlight your work or services, pricing plans, contact information, FAQ, and more. You’ll need to plan out which section comes after which for a smooth content flow.

Step 6: Go Live

We can safely assume you have a one-page Joomla site running on your localhost, and now you are ready to take the next big move, that is to go live! There are two ways to move an exact copy of your Joomla site from localhost to a remote server. You can either do that manually or using a backup extension like Akeeba Backup. Learn how to do that Here.

Golden Rule of SEO

One-page or multipage, SEO is important for every website. It’s a practice to draw more traffic and potential customers by optimizing your site to rank higher in the search engine. Luckily, our templates are already optimized for SEO so that’s a good start for you.

SEO is a vast topic and can not be covered in a single section. But don’t worry, you can give our article on how you can improve your Joomla site’s SEO a read for in-depth knowledge.

Test, Test, and Test

Your website has to be tested thoroughly before it goes live. Here’s a rundown to make things easier for you while testing your Joomla site for launching.

Cross-browser compatibility
Speed testing
Broken link testing
Test for responsiveness on different screen sizes
Spellings, grammar, and any kind of typo
Image optimization
Test the site for user experience
Test the site for user accessibility

Wrapping Up

Congratulations! If you have come this far, it means your site is all ready to go live and make money. Your one-page website acts as your extended business card. Make sure your content speaks to your brand value and aligns with your style. Share your creations and feedback with us in the comments. Good luck!

Browse Joomla Templates

SEO for Pinterest: Rank Your Joomla Site and Drive Sales

2021-06-02T08:03:57+00:00

What’s the first thing that comes to your mind when you hear about Pinterest? Recipe pin? Home decor? Fashion inspiration? Sure, it has them all. But if you think Pinterest is just limited to that, you’re missing out on something big.

Pinterest is a great opportunity for business. It helps increase links back to your website, introduce you to a new audience, steer traffic back to your website than any other social media source. Did I mention Pinterest currently has 478 million active users every month? Yes, that’s how massive it has grown to a visual discovery tool!

So, it’s time to level up your social media strategy for your Joomla site and start using Pinterest. Today let’s talk about how Pinterest pins are changing the game and how you can optimize your Joomla site for Pinterest SEO.

Still Not Convinced? Here’s Why Pinterest Is Important

Still not convinced to use Pinterest for your business? Let’s talk facts then. Here are some major reasons why you should use Pinterest to grow your business, especially if you run an e-commerce site.

Pinterest Inspires People to Shop

Shoppers are increasingly turning to Pinterest for inspiration. And why wouldn’t they? Pinterest makes it easier for people to discover products and makes the experience as inspirational as possible.

Considering Pinterest has 148 million monthly users, your company can reach, engage, and convert millions of potential customers and brand followers. Only by creating shareable pins that are optimized with the keywords these users are searching for.

Drive Traffic With Pinterest Backlinks

A picture is worth a thousand backlinks. So, what kind of value do Pinterest backlinks bring then? Their value lies in referral traffic. If users flock to your pins and click on the source where the image is embedded, then you can drive more traffic and views to your site. Of course, creating quality visuals and good content is the key.

So, don’t sleep on Pinterest backlinks!

User Engagement Is Soaring

Users on Pinterest seem pretty content to simply find and share things with small groups of people. This is good for your business! Why? It means that your pins are more likely to be seen, touched, and even go viral!

Share Your Post Links to All Social Media Accounts

Pinterest integrates with your website, Facebook profile, and Twitter account making it simple for you to post links to all of your social media accounts. Cross-posting content allows you to share posts across many different platforms – keeping your social media accounts active and healthy. This can help you to retain your existing audience, broaden your reach and attract new followers.

Tailor Your Products to What Your Consumers Want

Use Pinterest to see what’s in trend right now. It gives you the opportunity to understand what your consumers want and use that information to position your offers and products. Staying up-to-date with the trend and consumers’ wants is extremely important if you want to stay relevant in your field in the long run.

SEO Tips to Rank Your Joomla Site on Pinterest

Now that I’ve given you a quick rundown on why Pinterest is important, it’s time to dig into optimizing your Joomla website for Pinterest SEO.

Use a Pinterest Business Account

First thing first. You need to use a Pinterest business account. A Pinterest Business account is free and allows you more features than a personal account. With a Pinterest for Business account, you have access to all in-app analytics associated with your profile. You can easily view how many impressions your profile and Pins get each month, which content is performing best, and how much traffic your driving to your website.

Enable Rich Pins and Claim Your Business on Pinterest

Once you have a business Pinterest account, you can verify your website and apply for Rich Pins. What are they? Rich Pins are Pinterest pins that have more information included in them, such as your avatar, your website, and other details that wouldn’t appear in a regular Pin.

Depending on what type of post you are pinning, you can choose your category from App, Article, Product, and Recipe. Learn how to enable Rich Pins HERE.

Use Your Joomla Blog to Create Strategic Pin Strategy

Put your website’s blog to good use. Choose one of your blog posts and pin it to one of your boards that is rich in relevant keywords to the blog post’s topic. You should pin the post to a board named exactly as the topic is to make SEO sense.

For example, a pin for a blog post about how to make your Joomla site multilingual should be named “Make Joomla Site Multilingual” and not anything else. Do this for each of your blog posts and then start pinning to relevant group boards as well.

Optimize Your Joomla Site’s Images for Pinterest SEO

We all know Google reads the information in your image alt tags, so does Pinterest.

You must put your keywords in your image file name as well as the alt tag. You can also add hashtags in your alt tag, which Pinterest will pick up on, and feature it in a feed of other pins using that hashtag.

Display Pinterest Boards on Your Joomla Site

If you’re already active on Pinterest, you can easily embed your Pinterest profile, boards, or individual pins to your Joomla site using extensions. There’s plenty of extensions in the Joomla extension directory that you can choose from to display Pinterest on your Joomla site.

Optimize Your Pinterest Profile With Keywords

I’m sure you know how important keywords are for your blog posts. Yes, your Pinterest profile needs that too. Use targeted SEO keywords in your profile name, bio, board names, descriptions, and pin’s description will make you more discoverable.

Wrapping Up

Convinced to start taking Pinterest seriously? Then act on the tips mentioned above. Test your results and double down on what works for you. If you’re interested, you can give our article on how to drive traffic and boost conversion a read to further step up your SEO game.

Over to you - what’s your take on Pinterest marketing? Let us know your feedback in the comments. Good day!

How to Redirect and Customize Login on Joomla Site

2021-05-26T07:42:20+00:00

Hola Joomlers! Have you ever wanted to redirect users to a different page after a successful login? I certainly have. By redirecting users after the login, you can provide them a clear path to action. And every customization we make to our Joomla site to better the user experience is important!

This one little trick lets your users hit a page of your choosing instead of the default home page. It also comes in handy to streamline the user experience or redirect users to premium or member-only content.

Today, we’ll show you how to do just that - in two different methods! So without further ado, let’s get started.

Redirect Users to a Different Page After Login

A redirection page is like a roadmap telling the users what to do next. In case you’re wondering where to redirect users after a successful login, here are some examples of good redirection pages:

Custom dashboard for admin users
Custom dashboard for frontend users
Order details page for pending orders
Product/service page
Sales and coupons tailored for that specific user
Feedback and customer support forms

Alright, now that you know where you can redirect the users for a better experience, it’s time to implement it.

There are two ways you can set a custom login redirect. One by creating a login link to your navigation, and another by creating a login module. We will demonstrate both methods for you in detail so that you can figure out what works best for you.

Method 1: Create The Login Link

This method is pretty simple and straightforward. All you have to do is create a menu item of the type Login that will appear in your navigation.

Go to your Joomla site's back-end admin dashboard, then Menus > Main Menu > Add New Menu Item.

Title: Set the menu item title to Login

Menu Item Type: Choose Users > Login Form

Access: Set the access level for this link to Guest

Hit Save & Close. Now the Login menu item will appear in your navigation if you are not logged in already. Once you’ve logged in, this will disappear as we have set the access level to Guest.

Method 2: Use the Login Module

This method involves using a login module to redirect users after they log in. Here’s a step-by-step on how to do that.

Step 1: Create a Login Module

Go to the backend admin dashboard of your Joomla site. Now head over to Extension > Module > New and search for Login.

Let’s configure the Login module as below.

Title: Give the Login module a title, for this example, we’ll set it to login.

Position: Select the position where you would like the Login module to show up on your site. We’ll set the position to the top right of the home page.

While setting the position keep in mind if the login box is located at the bottom of a home page users might find it difficult to find it. Try to move the login box to the top of the page as much as possible.

Login Redirection Page: This is where you set the page you want users to visit after they log in. Let’s set it to Services because I want the users to check out the amazing services we provide first thing right after they log in.

From the Select button, you can choose any page that's connected to the menu item on your website to send your users after login.

If you keep the "Default" option, the user will get redirected to the website's default page, which is usually the home page.

Similarly, you can set the Logout Redirection page as well.

Step 2: Module Assignment

We are almost done. What’s left is to select the pages where we would like the login module to display.

Tap on the Menu Assignment tab and select your preferred page/pages. I want it to show on my home page only, hence selecting the default home and home page for other languages (for a multi-lingual site). If you are interested to know how to make your Joomla site multi-lingual, visit Here.

Now after you log in, instead of the default home page you will be redirected to the service page of your Joomla site. But wait a minute. We didn’t display the login module on the service page, so how do we log out? Read the next section to find out how.

Customize the Joomla Login for Better UX

After you log in, the login module converts to a logout button. And from there you can simply log out. But we have only selected the home page for the module to be displayed on.

This means a user will need to go back to the home page to log out of the site. Sounds very inconvenient, doesn’t it? How about if we could have a logout button on every page of the site without displaying a login box on each page? There are two ways you can do that.

Method 1: Use The Login Module For Logging Out

In the first method, we will create a second login module to act as a logout button. Go to Extensions > Module > New and then select Login.

You can set the title to Logout. Assign the access level to Registered. Now go to the Menu Assignment tab and select all pages except the ones you have selected for the first login module.

This module will only appear if you are logged into the site since we have set the access level to Registered. And when you are already logged in, the module displays as a logout button.

Now if you click the logout button, this module will no longer display because you've logged out and not a part of the Registered access level anymore! There you have it - a logout button on every page of the site without displaying a login box on each page.

Method 2: Create the Logout Link

You can also create a logout link in your navigation that will only appear when you are logged into the site.

To do that, from the admin dashboard go to Menus > Main Menu > Add New Menu Item.

Title: Set the menu item title to Logout

Menu Item Type: Choose Users > Logout

Access: Set the access level for this link to Registered

Hit Save & Close. Now the Logout menu item will appear in your navigation if you are logged in. This method is more preferable to method one as it is more intuitive and works better with any site design.

Wrapping Up

As you can see, Joomla is very versatile and provides you multiple ways to work with the login of your site. With the above tweaks, you can easily customize the login experience on your Joomla site and enhance the user experience.

Still have a question about how to redirect users after logging in? Let us know in the comments below. Good day!

What Is Web Accessibility and How to Achieve It on Your Joomla Site

2021-04-29T09:09:13+00:00

The Internet has grown so wide that websites are now an essential part of our everyday lives. And in 2021, it’s not enough to have a website. In today’s world, you need to have a good website!

A website that can reach people all over the world. A website that offers equal access to its users regardless of their abilities, economic situation, age, or education. I’m sure you already know how to create a Joomla site, but today let’s talk about how to create an accessible one.

Fortunately, there are several website accessibility guidelines that we can easily follow to make sure we are creating a website that is usable for more people. And we have compiled a list of those guidelines in this article to make your Joomla site more accessible. So without further ado, let's get started!

What is Web Accessibility?

Before we start, let’s talk about what exactly is web accessibility.

Web accessibility in very simple terms means making your website accessible to all users regardless of disability. That includes individuals with visual, motor, auditory, speech, or cognitive disabilities.

This ensures all users have equal access to the functionalities and information of your website. Accessibility is very important these days, especially for government sites, and is required by law in many situations.

Why Should You Care About It?

So why should you care about web accessibility? As a website owner, it is your responsibility to make your content accessible to all regardless of ability, context, or situation.

Putting aside the responsibility, a website offers one of the easiest ways to communicate and do business with people who suffer from a disability. Examples of this are people who cannot physically get to a shop.

There’s more! Following the Web Content Accessibility Guidelines (WCAG) will also ensure ease of use, better search result, more SEO friendly. A win, win!

Guidelines for an Accessible Joomla Site

Building an accessible Joomla website from scratch is a lot easier than fixing an inaccessible one. If you’re building a new Joomla site, you should implement the following guidelines from the get-go. But if you already have an inaccessible site, that’s okay. We can fix that too.

Add Sufficient Color Contrast

Add enough color contrast between the text and the background. It will make it easier for people with low vision to distinguish between page elements. If you are a Mac user, you can check contrast using the color picker in real-time with the Contrast tool.

Keyboard Accessibility (Usable Focus States)

Many people use their keyboards to navigate through the web. Keyboard accessibility helps a person know which element has the keyboard focus. Elements like links, form fields, widgets, buttons, and menu items need to have a focus indicator ( blue outline ) to indicate the keyboard focus. Read more about focus visible HERE.

Alt Text for Images

Alt text helps visually impaired people or people with other cognitive disabilities access and understand visual content such as images, charts, and graphs. This text helps screen-reading tools describe images and also allows search engines to better crawl and rank your website. So, always use them!

Use Default HTML Tags

Did you know a great deal of web content can be made accessible just by using the correct Hypertext Markup Language elements for the correct purpose? An excellent content structure with the correct heading, paragraphs, lists, etc. can aid a screen reader to navigate through the content effortlessly. Always use the correct element for the job, ex: button for the button.

The Proper Headers Structure

Headings are much more than a bold title. It’s a structure that should be defined properly so that it’s not only visual but also screen readers can read it out.

In total, there are six levels of headings you can use to structure sections of content on the page (<h1> through to <h6>).

H1 typically corresponds to the title of the page. You should have a single Heading 1 on each page. Each H2 creates a section of content. For a sub-section of the H2 - H3 is suitable, and so on.

Use Meaningful Link Text

Link text should be meaningful to help users who use screen readers to know something about their destination if they click on it. Link text needs to make sense alone without the surrounding context. It should be easy to speak out loud and also convey the function and purpose of the link. Avoid link text like “Click Here,” “Read More”, etc.

Make Audio and Video Media Accessible

Provide captions/subtitles so that people who are Deaf and hard-of-hearing get a text version of the speech and non-speech audio information needed to understand the content. Also, provide a transcript that includes a text description of the visual information.

Use Accessibility-ready Joomla Templates and Extensions

Choosing an accessibility-ready Joomla template or extension to build your Joomla site is important. Generally, all our Joomla templates and extensions are accessibility-ready. But there’s room for improvements. Designing for accessibility is something we try to improve all the time.

But what we can promise you, the upcoming Helix Ultimate 2.0 will be even more WCAG friendly. Beta 2 of Helix Ultimate 2.0 is already here and the stable version is just around the corner. Excited? We all are!

Wrapping Up

The goal isn’t all or nothing. Every improvement you can make following the above guidelines will help the cause of accessibility. Let’s develop our websites responsibly and make our web content accessible to all regardless of any disability.

Did we miss anything? Let us know what else you do to make your web content more accessible in the comments. Happy developing!