Elementor Page builder design

Improve Your Elementor Site Using Free Widgets of Happy Addons

A well-designed website always leaves a great impact on the visitors. As in this digital era, users always expect something extraordinary. Especially, to create a sustained relationship with the traffic, a website with a noticeable look is a plus point.

Don’t afraid, if you’re a novice or a non-tech person. With Elementor you can design a website without having any prior coding knowledge. But sometimes Elementor alone can’t give all the facilities to portrait your imagination in the real world.

In that case, Happy Elementor Addons, which is an enhancer of the Elementor workflow can rescue you. As it comes with a rich library of unique features and widgets. Therefore, it can help you to build a high-functional website design from scratch. ๐Ÿ˜ฎ

Throughout this article, we’ll show how you can give a unique look to your website using some free widgets of Happy Addons, like Image Compare, Image Carousel, Slider, Image Grid, and Logo Grid.

Anyways, enough talk! let’s dive into the discussion.

Website Design From Scratch Using Free Widget of Happy Addons

Website Design From Scratch

In this section, we’ll show how you can implement the free widgets of Happy Addons, step by step. But before showing the procedure, let’s know shortly what actually Happy Addons is and how it works.

There is a ton of splendid Elementor add-ons available in the market. But Happy Addons has received a huge response from the users for its powerful widgets and amazing features within a short time period.

Generally, the main purpose of Happy Addons is to take your Elementor website design to the next level. That’s why it works perfectly with any Elementor website. As a result, it helps the users to create some exceptional designs within a few seconds.

However, you can check out the following video to know more about Happy Addons ๐Ÿ‘‡

Okay, let’s introduce some popular free widgets of Happy Addons one by one. And also know how to implement them perfectly on your website.

However, check out the following requirements before starting.

Requirements

Let’s assume you have already installed WordPress, Elementor & Happy Addons successfully on your site.

๐Ÿก† How to Use Image Compare

Image compare widget is a useful feature of Happy Addons. If you’re a product demonstrater, designer or eCommerce store owner, then it can a perfect tool for you to showcase your products. Using this you can display both the current and previous demo at a time.

To do that, you’ll need a webpage. You can also apply it to your current webpage.

First, navigate to Dashboard>Pages>Add new page>Title>Select Elementor Canvas>Edit With Elementor

Website Design From Scratch
Adding a New Page

Next, select the ‘Image Compare‘ widget from the left sidebar. And drag it to the marked area.

Adding Widget
Adding Widget

Then a general window will open. From here you can see the available options to customize. Images, Settings, and Wrapper Link.

Now, add images in both sections ‘After’ & ‘Before’. And it will look like the following one. Choose the ratio according to your website layout. Here, we selected medium size 300*300. And then add a label.

Website Design From Scratch

Next, its time to stylize the content. To do that click on the ‘Style‘ button. Here you can experience the options that fit best.

Website Design From Scratch
Style Option

Final Preview

Website Design From Scratch

However, you can read the documentation on Image Compare Widget. And also check out the following video tutorial to get a visual idea. ๐Ÿ‘‡

๐Ÿก† How To Use Image Carousel

The procedure of using Image Carousel is kind of similar to other widgets of Happy Addons. So nothing to worry about. If you acknowledge the first process, this process will be easier for you. Just follow the steps and get used to it.

Generally, this widget helps to create an interesting image and text carousel in a comprehensive way. Again, this widget will allow you to showcase images in different ways. For example, product images, profiles, service images, etc. Therefore, you’ll get a lot of options to customize them fruitfully.

To use this widget, navigate the page where you want to use the widget. And then click ‘Edit With Elementor‘. A page will open where you just need to select the widget and drag it to the marked area.

Adding Carousel Widget
Adding Carousel Widget

Here you’ll find some useful options to customize the full widget. Like ‘Preset‘, ‘Slides‘, ‘Settings‘, and ‘Wrapper Link‘. Using these options you can create any types of design.

image carousel

Note: Preset is a collection of pre-built design, where you just need to select from the list and then it will be automatically applied to your design.

The next step is to add images inside the slides and customize them. So after adding images, you can edit them more. For example, Image Title, Description, etc.

Editing Slides
Editing Slides

In the setting option, you can control the speed of images move. And also you can edit autoplay speed, slides speed and more.

Settings of Slides
Settings of Slides

Next, to design your website from scratch, you’ll need to stylize it. Yes, from the ‘Style‘ option, you can do that. So what you can do in this portion?

You can edit, carousel item, slide content, navigation arrow & dots, etc.

Website Design From Scratch

After completing the whole process, click on the ‘Publish’ button when you’re done with your design.

Final Preview after Applying Happy Addons Image Carousel

how to design a website for free
Preview after designing

However, find more on our documentation to get a clear idea and step by step guideline.

๐Ÿก† How To Use Slider

We all know what is a slider or what are the basic functionalities of it. However, in a general sense, a slider consists of images and it’s being used at the starting of a Website, especially after the header part or instead of hero banner.

Designing a slider with different programming languages is very hectic. But using this widget, you can create some beautiful sliders within a second. So we’ll show how you can do that.

To do that, first, select the widget from the left sidebar and drag it to the marked area.

Adding Slider widget
Adding the Slider widget

Like before, you’ll get all the options to customize the widget.

Website Design From Scratch
Options for the Widget

Then add images on your website type.

Adding images
Adding images

Next, give a unique style according to your designing sense.

Stylizing the widget
Stylizing the widget

So its very simple to customize. What you have to do is, draw a design frame and then just go for it.

Final Preview after Applying Happy Addons Slider

How to design slider
Preview

To get a better idea, read our documentation. Or you can read the following article ๐Ÿ‘‡

๐Ÿก† How To Use Image Grid

Now, its time to use another free widget of Happy Addons. Its ‘Image Grid‘. You can use this widget to display the most important images or any portfolios on your website. And also you apply beautiful animation, powerful effects that look very lucrative. Thus it improves your website look.

Okay, to use ‘Image Grid’ widget, navigate to the page where you want to use it. And then select the widget>drag it to the marked area.

Website Design From Scratch

Like the same way, you’ll get the option to customize this widget. And then you just need to apply the best-fitted design on it.

Website Design From Scratch

After adding images, it will appear next to the screen. And you can able to customize them easily. To beautify it, you can give a title or the purpose of the images.

Website Design From Scratch

Next, in the ‘Setting’ option, you can do some interesting things. You can keep the entire grid as usual or categorize it.

Website Design From Scratch

To stylize the widget, click on the ‘Style’ option. From here you can edit the margin, padding, border-radius, shadow effects, opacity, and more.

Website Design From Scratch

So after finalizing the design, click on the ‘Publish‘ button. That’s it.

Final Preview after Applying Happy Addons Images Grid

How to design a website

Anyways, you can check out the following video tutorial to know more about the ‘Image Grid’ widget ๐Ÿ‘‡

๐Ÿก† How To Use Logo Grid

Logo Grid widget allows you to display the important elements, like photos, client profiles, especially logos, etc, on the website. The uniqueness of this widget makes your website so beautiful and lucrative. Therefore, it could grab the user’s attention and also there is a high chance to generate potential leads.

Anyways, we’ll show how you can use this widget for your website, in this section. Let’s get started.

Similarly, you’ll need a page or an existing page where you can apply it accordingly. Go to add new page>click on edit with Elementor. You’ll be redirected to a white canvas where your task will start. Then just select the widget and drag it the marked area.

Website Design From Scratch
Adding Widget

After adding the widget, you’ll see all the options to customize it. Like, Preset, Logo grid, Settings, and Wrapper link. However, we talked about preset in the previous section. Hopefully, you’ve understood that.

Website Design From Scratch
General Options for Logo Grid

Next, add logos and customize them. First, click on the logo grid option. Upload images or choose from your gallery. Give a brand name. Following the same process just add more logos, clicking on the ‘Add Item‘ option.

improve website design
Adding Images

As you can see, after adding the logos, it will appear. And also the options are available to edit them. It’s all about your design capability and sense of creativity that how you want to produce them.

logo-grid

Okay, in the settings option, you’ll get more options to edit. The size of the images, Grid Layout and how many columns you want.

Website Design From Scratch
Settings option

You can also provide a link on the grid. To do that, click on the Wrapper Link.

How to design a website
Wrapper Link

To stylize the widget, click on the ‘Style’ option. Here you’ll able to edit padding, margin, border, box-shadow, border-radius, and colors, etc.

Website Design From Scratch
Stylizing widget

Finally, click on the ‘Publish‘ button if you’re done with the design. That’s it!

Final Preview after Applying Happy Addons Logo Grid

How to Add Logo Grid
Finalizing the design

However, you can read our documentation to know in detail about the procedure. Or you can check the following video tutorial of ‘Logo Grid’๐Ÿ‘‡

You will Get More with Happy Addons

Website Design From Scratch

Well, the main purpose of this article is to provide a simple guideline so that anyone can do a website design from scratch. However, in the earlier section, we gave you a quick glimpse of Happy Addons.

Now let’s know shortly about some ‘Happy Elementor Addons’ features that are extremely unique yet easy to apply.

  • Cross-Domain Copy-paste: Using this feature you can easily copy or paste elements one domain to another. Therefore you don’t have to do the same task again and again
  • Live Copy: If you’re facing difficulties to design the website from scratch, then the live copy feature of Happy Addons can be very useful for you. You can just copy the demo work right your website.
  • Image Masking: Using the image masking feature, you can change the original size of the images. And apply it according to your layout.
  • Wrapper Link: Link anywhere you like to use. This feature will help you to add links to any sections, columns, widgets.
  • Display Condition: Depending on your browser, operating system, and data, you can show the content according to the condition.

These are some fruitful features of Happy Addons. And these features will perfectly work with any Elementor website. Thus it surely reduces your hassle to perform a website design from scratch. ๐Ÿ˜ƒ

Not to mention that people love to visit a site with an easy interface and a good UI/UX design. And Happy Addons helps you to visualize your imagination into reality. However, if you get any difficulties with the tutorial, please let us know in the comment section. We’ll definitely respond and give you a solution. ๐Ÿ˜Š

Share this post

Share on facebook
Share on twitter
Share on linkedin

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *