How to Add a Widget?

In this guide, you will learn how to add a widget on your website.

For adding widgets, here are the steps that you need to do:

  1. On the Advanced Editor tool, click the “WIDGETS” icon from the left panel.

  1. You will now be seeing the pop-up beside the first panel. This will show you all the available widgets that you can use for your site. (See image below.)

Note: You must scroll down to see the other available widgets. Widgets are grouped into 7 different categories which are as follows:

  • POPULAR – consists of most used widgets on all websites such as Text, Image, Icon, Click to Call, Map, Image Slider, Media Slider, Photo Gallery, Button, HTML, Large Title (H1) and Contact Form.

  • BASIC – widgets that are necessary for building a website from scratch such as Text, Button, Divider, Spacer, Large Title (H1), Large Title (H3), File, List, 1 Column, 2 Columns, 3 Columns, 4 Columns, Countdown, Table, Breadcrumbs, Accordion, Text & Image, Tabs and Copyright.

  • MEDIA – are composed of Media Slider, Image, Image Slider, Photo Gallery, Icon, Video, Shape, Before & After, Audio and Lottie Animation.

  • BUSINESS – widgets that are helpful for websites used for businesses like Click to Call, Map, Open Table, Email, Contact Form, PayPal, Restaurant, Yelp Reviews, Business Hours, Multi Location, Coupon, Online Scheduling, Google Calendar and Yext.

  • SOCIAL – social media widgets such as Share, Twitter Feed, Facebook Like, Facebook Comments, Social Icons, RSS Feed, Disqus Comments, WhatsApp, and Facebook Feed.

  • ADVANCED – HTML and Navigation

  • BLOG - All Posts, Recent Posts and Search Posts.

  1. Once you have decided which widget to add, simply DRAG & DROP the widget where you would like to put it on the page. Before the widget is added, the Content Editor box will appear. In the sample below, we are adding the Share widget on the page

  1. In the Content Editor, you can edit the content of the widget on the Content Tab and change the layout, style animation and spacing on the Design Tab to match your website’s layout. (See image below)

  1. Once you are happy with how it looks just close the Content Editor and you will now see the added widget on the page.

PreviousHow to Edit the Elements in the Advanced Grid?NextHow to Add Flex Element Widgets?

Last updated