Sooperthemes Glazed Builder is a Drupal drag & drop page builder made to revolutionize the way professionals build websites with Drupal. Glazed Builder is fully integrated with both Drupal 7 and Drupal 8 and gives the marketing staff, content teams and site builders the tools to do a faster, more efficient job! And guess what? You can build a fully functional website with Glazed Builder without ever having to touch a line of code!
The builder provides 36 fully customizable elements to help you make and share beautiful and appealing content on your website without breaking a sweat. In today's blog article we are going to cover five Glazed Builder Elements and show you how to use and personalize them:
1. Countdown Timer
The first Glazed Builder Element we are going to talk about is the Countdown Timer. Using this module is a great way to create a sense of urgency about your campaign and persuade the customer to act soon if they don't want to miss a limited time offer or that amazing upcoming event your team worked so hard to put together.
Currently there are six countdown timer styles to choose from, with the options to count to a specific day, hour, minute and second. It is also possible to set Date and Time limitations for a specific Date only, Date and Time, Time only (repeat every day) and Resetting Counter (with an interval up to 24 hours).
How to Use the Countdown Timer element
In order to create a new Countdown Timer, we are going to choose "Add Elements" by clicking the "+" icon.
After clicking the "+" button this window should appear on your screen. We will use it to create a New Section:
To add a New Section we just need to click "Section" on the Layout menu item. The new created section is empty and should look like this:
We can now create the actual element. To do this click the + sign again and choose "Content" from the menu list > pick Countdown Timer element
Once you clicked on the Countdown timer element, you should be able to see a window with the settings page:
General TabWe are going to start by picking a style we want our Countdown timer to have. Today we will create a Grid Style timer which counts down to October 1st, 2018.
- From the General Tab, choose Grid as the countdown style
- Date / Time limitations, we are going to Specify Date Only in this tutorial
- Display Options, show all elements: days, hours, minutes, seconds
We now created a default Grid Countdown timer and if we click "Save Changes", the element should look like this:
So far so good! We can move on to customizing it and making it our own!
To add animation we are first going to pick an Animation for our timer. To keep things tidy and simple we're going to pick a simple animation that will not be a distraction for the user who's visiting the website.
- Animation start is for defining if we want the animation to occur: on appear, on hover, on click or on trigger (On appear)
- Animation in, a list with different styles of animation you can use (fadeInDown)
- Hidden, you have two options: Before in-animation and After in-animation (we will use both)
- Infinite, turn the animation into an endless loop (OFF)
- Appear Boundary, choose from 0-100% depending on where you want the boundary to appear
- Duration, set the animation duration
- In-delay, set the animation delay
For our example we used the animation to start when the element appears on the screen, adding a short delay of 0,9 seconds. We also chose the fadeInDown animation so that it does not distract the user. Our result so far looks like this:
Now that we have created a default timer and added some animation to it, it's time to make some further adjustments and make it look the way we want it to be.
We are going to do that by going to the Style Tab.
We can design our Countdown timer by adjusting settings such as:
- Font color (the color we want our text to be)
- Border color (if we decide to add a border to our element, then we can choose the color here)
- Background (we have two options: add a simple background by choosing a color from the color pallet in the Builder, or we can add a background image to it)
If you decide to add an image then you are also able to adjust its positioning within the element by picking a Background style, Background position. If you added a border you can also choose between different Border styles.
For our example today we are going to add a font color (white), a background image and a background style (cover):
Now our timer looks like this:
After we adjusted the settings mentioned above, we can now determine:
- What Font size we want our timer to have (the bigger the font size the bigger the Countdown timer)
- Border radius determines how rounded you want the element to look (if you prefer rounded corners then you can go all the way to 100)
- Opacity, add some transparency to the element if it suits your website design
- Drop shadow, add shadow for the extra touch to your element
*The same applies for the "Hover style" section. Those adjustments will determine how the element will look when users hover their mouse over the timer.*
For our example today we chose:
- Font size: 14
- Border radius: 100 (to make the corners fully rounded)
- Opacity: 0
- Drop shadow: 2
To make it more personal you can further adjust the settings and shape your Countdown timer the way you imagined it!
Icons are a great way to captivate user's attention and arrange content in a neat and organized way. Glazed Builder comes with a list of 4,000 of them preinstalled right into the builder, bringing a wide variety of sets to visually support your content and add extra value to it.
Icons are fully customizable and bring the possibility of changing its aspects, such as: icon orientation, size, style, color, etc. Easy and a great way to make them your own.
In order to add a new icon to your existing elements you need to click the "+" button on your section and go to the Content tab > Icon. Here you have the option to preview all icons at once or pick one of the nine sets that come with Glazed Builder. Today we are going to be working with ET Line Icons set, therefore we pick to preview only this set.
You can pick whichever icons you like most, or maybe even combine different styles in a unique and creative way.
You can also see in the General tab of the Icon settings that it's possible to change the size of the icon as well as add a link to it (when people click on it they will be redirected to the link of your choice).
The real magic happens in the Icon Utilities menu. Here we make the first step towards differentiating our icons from others! We can do so by changing the style, icon animation and/or icon orientation.
You can add more twists to it until you're happy with the result!
To illustrate how you can change the icons and personalize them we are going to pick four different icons from the ET Lines Icons set and make them 4x Size. You can follow along with whatever icons you prefer, the process is similar.
For each of these icons we are going to pick the following values from the Icon Utilities menu:
- Circle style
- No Icon Animation
- Normal Icon Orientation
Now our icons look like this:
We will go ahead and add some animation to our icons from the Animation tab in the Icon Settings window:
- Animation start: on appear
- Animation in: fadeInUpBig
- Duration: 1950 milliseconds
These small twists in the settings result in:
We can change icon style by manipulating the settings in the Style menu:
There are so many ways to style your icon, and it really depends on how you want to do it. For this tutorial we are going to keep things simple and change the following settings:
- Font color
- Background color
- Increase the font size in order to make the icons bigger
- Add Border radius and Shadow
These twists result in:
Call-to-action can either help or damage your online success, therefore it is very important to spend however much time needed in order to make it appealing for the end-user. Glazed Builder assists you in creating the perfect conversion machine by adding personalized buttons to your call-to-action content.
Glazed Builder comes with a number of eye-catching preset buttons to choose from. Our team at Sooperthemes also takes into account how important having a customized button is. With the Button element you are able to easily change the size, colors and hover style.
To add a new button we are going to create a new Section first. We will do it by clicking the "+" sign. This window should pop out and all we have to do is click on the "Section" button from the Layout menu.
Now that we have an empty section we can add the Button element to it. Click the "+" sign again and go to the Content tab > Button.
In Button settings window > General tab we can:
- Add a title for our button
- Add a link where the users will be redirected when they click the button
- Choose the button type
- Make the button fit the whole block
- Choose the button size
After we decided on what the General settings for our button should be, we can move on to customizing it by adding animation and/or changing the button style. So far if we just filled in the General settings tab, the default button should look like this:
- Title: LEARN MORE
- Link: www.example.com
- Link target: New Window
- Type: btn-default
- Block button: OFF
- Size: Large
The next step to customizing our button is to add animation to it. You can skip this step if you would rather your button not to have any animation to it. For this tutorial we will add a small pulse animation without any further tweaks to it:
The animated button looks like this:
Moving on to the Style section, we:
- Added a white font color for the text
- Selected a dark background color for the button
- Font size: 25
- Border radius: 50 (to make the corners slightly rounded)
- Opacity: 0
- Drop shadow: 2
How does our element look now?
We are also adding a hover style background color to make the button more responsive, so when people move their mouse over the button - the background color will change to black.
This is our final result! On the left is our element without adding background color for Hover style, and on the right is the element after we added background color to the Hover style.
4. Circle counter
Circle counter is a great tool to arrange and display various statistics about your company, clients or products in a neatly organized way.
To start we are going to create a section on our empty page (reminder: you can follow along on an already existing page or create an empty Drag & Drop page as well).
- Click the "+" sign > Add Section
- Click the "+" sign again > Content > Countdown Timer > Save changes
We created a default Circle counter which should look like this:
By clicking the edit button on the already created element, we are going to reach Circle counter settings.
Here we can choose the colors for our Circle counter, make it a half circle, as well as manipulate its: size, border style and the progress percentage.
For this article we are going to create two examples of Circle counters: one Full Circle and one Half Circle. Both will have the same attributes.
After we applied our preferred color, dimension and percentage, our elements look like this
Don't hesitate to experiment with it and explore the wide range of attributes you can apply to it!
Once we are pleased with our elements' sizes and colors, we can move on to the Circle content.
Here we specify the following:
- What text we want our element to have
- The size of the text (pick one that will be proportional to the circle)
- Add extra info to it if required
If you added your preferred text, font size and info, now your element should look like this:
What a better way to enrich the visual aspect of your circle than to add an icon to it. For this example we are going to choose an icon from the ET Line Icons set. But again, you can choose any icon from the long list that comes preinstaleed with Glazed Builder.
Now we added an icon to our element, as well as color to it in order to match the foreground color:
When you are happy with the icon you chose and the color (you don't necessarily have to add an icon to the Circle counter - only use it if it adds value), you can move on to add Animation to it.
We are not going to add animation to our Circle counter element. Nethertheless, if you would like to add it, the process is similar to adding animation to other elements, some of which we showed examples above: countdown timer, icons and buttons.
We can now move on to styling our circle.
For this tutorial we are going to adjust the font color of the element in order for it to match the foreground color: blue. Now our element looks like this:
You can also add a Hover style if you would like to add a more responsive feel to it.
5. Video Element
With the Glazed Video Element you are able to easily add video content from YouTube or Vimeo to your webpage. It is also possible to add placeholder images which can be used in order to add personal branding to videos.
To create a video element on our page, we are going to:
- Add a New Section to our new Drag & Drop Page
- Click the "+" sign > Content > Video
As illustrated above, you now reached the General Video settings tab. Here we are going to add a link to our YouTube/Vimeo video, determine its width, add Thumbnail picture to it and make the button fit our theme layout.
For this example we created an element with a YouTube video about Installing Glazed Builder Page on Drupal 7 & Drupal 8 websites.
We also added a Thumbnail picture to it as well as a Themed Play Button, leaving the width at the default value. Now our element looks like this:
By going to the Style tab, we are going to add rounded corners to it, make the play button bigger for visibility as well as add a bit of shadow to it.
These settings result in our element looking like this:
To bring the final touch to it, we are going to add a Hover Style.
We are increase the value of the Shadow setting, so that when we move our mouse over the element it will look responsive.
We went from 2 Drop Shadow in the Style tab to 4 Drop shadow in the Hover style tab:
What are your favorite Glazed Builder elements and which ones would you like us to cover next?