How to Create Custom Color Pallete in Gutenberg

Some themes have the ability to change the color palette swatches in Gutenberg, however, if your theme doesn’t have that ability, then you can add a custom color yourself with our tutorial here. We used the Twenty Twenty One theme for our example which doesn’t have many color options in the color palette.

As you noticed in the above image, we still can pick a custom color for the color option by clicking on this area, however, allowing this kind of freedom sometimes can result in the website content going haywire from any color scheme you’ve defined in your theme, for example, users may pick colors that make reading difficult, and that may have a negative impact for your website. But, don’t worry we will give you a way to disable the custom color picker in Gutenberg later in this tutorial.

How to Create Custom Color Pallete in Gutenberg

First, you need to be logged in as a user with an administrator role for the capability to edit the theme of your WordPress site, specifically, we will add some snippet into the theme functions.php file.

From your WordPress dashboard, go to Appearance → Theme File Editor, it will take you to the Edit Themes page, go to the Theme Files section and open the functions.php file to edit it.

The function for adding the color palette looks like this:

add_theme_support( 'editor-color-palette', array );

'editor_color_palette' here is a built-in variable to add the custom color palette and the array is the array of colors. And in the Twenty Twenty-One theme, each color itself has defined with an array of name:value pairs. Try searching for “palette” in the functions.php by pressing Ctrl+F in the editor, it will bring you to the color palette codes.

Here’s what the existing code in the Twenty Twenty-One looks like:

 add_theme_support(
			'editor-color-palette',
			array(
				array(
					'name'  => esc_html__( 'Black', 'twentytwentyone' ),
					'slug'  => 'black',
					'color' => $black,
				),
				array(
					'name'  => esc_html__( 'Dark gray', 'twentytwentyone' ),
					'slug'  => 'dark-gray',
					'color' => $dark_gray,
				),
				array(
					'name'  => esc_html__( 'Gray', 'twentytwentyone' ),
					'slug'  => 'gray',
					'color' => $gray,
				),
    
                                 More colors...

For each color you want to have in your palette you need to add an array to the structure. Each array has:

  • name : color label
  • slug : how it’s referred to in CSS code
  • color : variable for the color

Then for the new color to be added, it will be inserted in the list of the color variables on Twenty Owenty-One:

		// Editor color palette.
		$black     = '#000000';
		$dark_gray = '#28303D';
		$gray      = '#39414D';
		$green     = '#D1E4DD';
		$blue      = '#D1DFE4';
                More colors....

Adding a New Color to the Palette

To add the new color to the theme, continue by adding a new variable and its hex code. let’s add the color of ‘wood’ for example:

$wood      = '#966F33',

Add the colors to the Editor color palette list, then the final list will be like this:

                // Editor color palette.
		$black     = '#000000';
		$dark_gray = '#28303D';
		$gray      = '#39414D';
		$green     = '#D1E4DD';
		$blue      = '#D1DFE4';
		$purple    = '#D1D1E4';
		$red       = '#E4D1D1';
		$orange    = '#E4DAD1';
		$yellow    = '#EEEADD';
		$white     = '#FFFFFF';
		$wood      = '#966F33';

Then continue by adding a new array for the wood color in the color palette function.

                          array(
					'name'  => esc_html__( 'Wood', 'twentytwentyone' ),
					'slug'  => 'Wood',
					'color' => $wood,
				),

And the final code will be like this:

That’s it for adding a new color to the color palette in Twenty Twenty-One WordPress theme, the color palette will look like the following in Gutenberg editor.

Removing The Custom Color Picker

Now time to remove the custom color picker area to keep our color scheme for the theme safe.

Go back to the functions.php then add the following snippet just above the editor color palette list.

add_theme_support( 'disable-custom-colors' );

Now try to refresh the Gutenberg editor and take a look at the color palette. The custom color picker is gone and our color scheme will be safe.

The Bottom Line

Some themes have the ability to change the color palette swatches in Gutenberg, however, if your theme doesn’t have that ability, then you can add a custom color yourself, however adding a custom color palette to Gutenberg is a bit of a challenge since each theme has a different location for the palette code.

How to Add a Vertical Divider in Elementor (Without Add-on)

The use of a divider is not only a marking between two objects, but a divider can beautify your page and looks engaging and aesthetic. Luckily, only with the help of Elementor, you can add a horizontal divider and a vertical divider easily. We assume that you don’t need to read a tutorial for adding the horizontal divider to your page because it’s seamless, just pick a divider widget from the widget panel then drag and drop it into your canvas area and you’ll have a horizontal divider. But, it’s a different story if adding a vertical divider, it will need more effort.

In this tutorial, we will show you how to add a vertical divider in Elementor without an add-on. There are two methods of adding a vertical divider in Elementor that we gonna use here as below:

  • Using the Spacer widget
  • Using the Divider widget

How to Use Elementor’s Widget to Add a Vertical Divider

Method 1: Using the Spacer Widget

You can use the free version of Elementor tor to add a vertical divider with this method. You can use the Spacer widget to add a vertical divider with creativity. Well, let’s get started.

Enter the Elementor editor. Create a new section with three columns. Then adjust the width for each column. In the middle, we’ll use it for the Spacer widget, and for the rest, we’ll be using it for the Text Editor widget. For example, On the Spacer widget, we set the width column to 5% and 47.5% width for each Text Editor widget.

Go to the Spacer widget settings panel; adjust the space by sliding the Space toggle on the Content tab. Once you set the space, move to the Advanced tab, then click the Background button. Set the Background Type to Classic and change the Color to black.

Next, we continued to the last step of this method. Still on the Advanced tab -> Layout. On the Margin settings, click the link icon to unlink the values. After that, give the equal number to the RIGHT and the LEFT. In this example, we set it to 14 PX each.

Method 2: Using the Divider Widget

Unlike the first method, you need Elementor Pro to follow this tutorial. Basically, you can use the divider widget to add a horizontal divider. Still, to add a vertical divider, you’ll need the Custom CSS feature that is only available on Elementor Pro. Well, let’s begin!

Enter the Elementor editor. Create a new section with three columns. Click the Edit Section, then set the Vertical Align to the Middle. Next, put the widgets into the canvas area. Text Editor in the first column, Divider in the second column, and Text Editor again in the third column.

As you can see, you have a divider, but it’s still horizontal, so we need to apply some changes to make it vertical.

On the Divider widget settings panel, go to the Advanced tab and then click the Custom CSS option. Paste the following CSS snippet to the available field.

selector{
transform: rotate(90deg);}

Now your divider becomes vertical. Next, you can customize the vertical divider with your creativity. Go to the Content tab and Style tab to edit and style the divider settings, such as style, width, color, weight, etc. Or you can adjust the width columns if you want to.

The Bottom Line

With Elementor, you can add a vertical divider easily. This article shows you how to add a vertical divider without the help of any add-on in two ways. If you have Elementor Pro, we highly recommend using the second method (divider widget); you can do more with your divider with more customization.

Kadence Blocks Plugin: Review and Overview

Gutenberg is not only a block-based editor to create blog posts, but you can use Gutenberg as a page designer for your WordPress site. But, Gutenberg has a limitation on customization, and it can be a deal-breaker for us to use Gutenberg as a page designer. Here are the main weaknesses of Gutenberg as below:

  • Lack of setting options for blocks (especially for typography and spacing)
  • There is no responsive editing. By default, Gutenberg can’t optimize responsive viewing on tablets and smartphones.
  • Unable to set the page layout.

Given the lack of elements and features, you need to install plugins to get more blocks. One of the plugins that we recommend to you is Kadence Blocks.

A Brief Intro About Kadence Blocks

Kadence Block is one of the most popular Gutenberg block plugins for WordPress, with over 200,000 users, and it has a good rating (5/5) in the WordPress directory.

With Kadence Blocks, you can add more creative elements to your Gutenberg-powered page using the block collections it offers. Kadence Blocks also comes with a feature to add dynamic content to Gutenberg and responsive editing capability.

What’s Offered by Kadence Blocks?

Kadence Blocks offers additional blocks to expand the default Gutenberg blocks library and more features, which means it will improve Gutenberg’s editing capabilities. So, you can create an excellent web page with ease – no need to write a single line of code. With Kadence Blocks, you can make the WordPress block editor (Gutenberg) capable of creating excellent content that is usually only possible if you use a page builder plugin.

Kadence Blocks Key Features of Setting Options

1. Gutenberg Blocks

After installing and activating Kadence Blocks, by default (free version), you will get 16 blocks that you can use to design your web page in Gutenberg. The sixteen blocks are below:

  • Row Layout
    • You can create rows with nested blocks either in columns or as a container. It will give style to your rows with background, overlay, padding, etc.
  • Form
    • You can create a contact form or marketing form and style it within the block editor.
  • Advanced Gallery
    • Photo galleries, carousels, and sliders! You can enable custom links, captions, and more. Plus, you can select image sizes.
  • Advanced Button
    • You can create an advanced button or a row of buttons. Style each one, including hover controls, plus you can use an icon and display them side by side.
  • Lottie Animations
    • A Lottie is a JSON-based animation file format. You can add an extra “wow” factor to your site with engaging Lottie animations.
  • Icon
    • You can select from over 1500+ SVG Icons to add to your page and style the size, colors, background, border, etc.
  • Spacer/ Divider
    • You can easily create a divider and determine the space around it or create some space in your content.
  • Advanced Text
    • You can create a heading or paragraph and define desktop, tablet, and mobile sizes, font family, colors, etc.
  • Tabs
    • It enables you to create custom vertical or horizontal tabs with advanced styling controls. Each tab content is an empty canvas able to contain any other blocks.
  • Info Box
    • You can create a box containing an icon or image and, optionally, a title, description, and learn more text. Style static and hover separately.
  • Accordion
    • Now you can create beautiful accordions! Each pane can contain any other block and customize title styles, content background, and borders.
  • Icon List
    • You can easily add beautiful icons to your lists and make them more engaging—over 1500 icons to choose from and unlimited styles.
  • Table of Contents
    • Allow your readers to navigate your content easily with a table of contents block. Includes smooth scroll to anchor.
  • Posts
    • Display a clean grid of posts anywhere on your site, great for your home page where you want to tease your blog.
  • Countdown
    • This block will help you increase your conversions by adding a sense of urgency to your offering.
  • Testimonials
    • With this block, you can create confidence in your brand or product by showing off beautiful, unique testimonials, add as a carousel or a grid.

2. Pre-made Templates

With pre-made templates provided by Kadence Blocks, you don’t need to build your page from scratch. It allows you to seamlessly when you’re creating a page or post layouts by selecting from any pre-made templates. So, it’s like a jump start on your blank canvas.

Accessing pre-made templates is very easy. First of all, make sure that you have already installed Kadence Blocks. Go to the Gutenberg, and you will see the Design Library button. Click it then you will find plenty of pre-made templates that you can pick.

3. Typography Controls

Kadence Blocks give you more setting options for typography. There are many options that you can set which is you can’t do only with default Gutenberg blocks, as below:

  • Line Height
  • Letter Spacing
  • Text Transform
  • Font Family
  • Font Weight

You can access those options on the Block settings of Kadence Blocks.

4. Responsive Editing

Responsive editing is a feature that you can use to customize your website interface so that visitors look at it on the desktop, tablet, or smartphone. This feature can make your website look great on any device. Sometimes people call Mobile Optimization or Responsive Control. Why is this feature essential to us? Because as you know, today most people access the internet from mobile devices. So, optimizing for responsive viewing on mobile devices is a must.

Same as typography controls, you can access responsive editing on the Block settings of Kadence Blocks

5. Spacing Controls

Kadence Blocks give you more flexibility to control spacing of an element when designing a page. What’s even more impressive is that it turns out that you can also control the spacing on the responsive editing. Meaning that you can use a different spacing for each device type (desktop, tablet, smartphone).

6. Visibility Controls

This feature helps you to hide block settings from specific user roles so they can focus on content, and you can keep them out of the block designs. As a role-based setting that the admin has access to, it can be helpful for websites with multiple authors or when you’re handing the site off to the clients and you don’t want them to change the design.

So, it’s based on the user role in WordPress, whether they’re an admin, editor, author, or contributor or available for non-users. Visibility control options are only available on Row Layout and Section blocks.

Kadence Blocks Free vs. Kadence Blocks Pro

We all know that the pro version is better than the free version in every product or service. Compared to Kadence Blocks, the pro version provides more features and blocks. You can check all the comparisons below:

Custom FeaturesFreePro
Design LibraryYesYes
Intelligent LoadYesYes
Responsive ControlsYesYes
Layout ControlsYesYes
Typography ControlsYesYes
1500+ SVG IconsYesYes
Color and Background ControlsYesYes
Configurable DefaultYesYes
Setting Visibility ControlsYesYes
Spacing ControlsYesYes
Animation ScrollNoYes
Custom IconsNoYes
Dynamic ContentNoYes
Custom FontsNoYes
Pro Design Library ItemsNoYes
Page-Specific CSS and JSNoYes
Custom BlocksFreePro
Row LayoutYesYes
Advanced HeadingYesYes
Advanced GalleryYesYes
TabsYesYes
AccordionsYesYes
CountdownYesYes
Table of ContentsYesYes
TestimonialsYesYes
Info BoxYesYes
PostYesYes
Icon ListYesYes
IconsYesYes
FormYesYes
Advanced ButtonYesYes
Spacing/ DividerYesYes
Post Grid/ CarouselNoYes
Product CarouselNoYes
Portofolio Grid/ CarouselNoYes
Image OverlayNoYes
ModalNoYes
Split ContentNoYes
Video PopupNoYes
User InfoNoYes
Advanced SliderNoYes
Pro Gallery AddonsNoYes
Pro Countdown AddonsNoYes
ProForm AddonsNoYes

As you can see above, the difference between the free and pro versions is not too significant. But, there is one thing that you need to concern about; that is optimization. Some features are available on the free and pro versions, but you can do more customization and optimize the functionality, such as Form block. When you’re on the free version, you only have three options on the Actions After Submit option. But when you upgrade to Kadence Blocks Pro, you will get more options. Such as Auto Respond Email, Database Entry, SendInBlue, and MailChimp.

The Bottom Line

Whether we like it or not, people judge Gutenberg based on their experience using some page builders such as Elementor, Divi Builder, Brizy, and other page builders. They have flexible editing experience with many layouts and design choices and with a module or widgets for everything. To take Gutenberg to the next level, Kadence Blocks is the answer.

How to Create a Full Screen Menu in Divi

One of the growing trends in website design is the application of a full screen menu on a website. Thanks to its versatility and its ability to enhance rather than ruin the UX, full screen menu in most cases are ideally suited for almost any project. Having a website that really catches the eyes of users can prove to be a definite advantage in the world of marketing and advertisement, making the two more interactive by giving audiences a more hands-on approach to commercials.

In Divi, there are many options to customize your site menu thanks to the Divi theme builder feature where you can create a custom header template and use the Menu module to add a menu or custom menu you decided and then customize it to your liking. In this tutorial, we will show you how to create a simple and lightweight full screen menu in Divi using the Divi theme builder.

How to Create Full Screen Menu in Divi

Step 1: Add and Build a Global Header

First, let’s create a global header to make the menu available across your website, from the WordPress dashboard go to the DiviTheme Builder. Click Add Global HeaderCreate Global Header.

Step 2: Edit the 1st Section Settings and Add a CSS Classes

You will be taken to the Divi Builder editor, and there will be a section in the editor. Open the Section Settings panel, on the Background block, change the background color into a completely transparent one = rgba(255,255,255,0).

Next, remove the section’s default top and bottom padding, go to the Design tab → Spacing then set the Top and Bottom Padding to 0px.

Continue by assigning a CSS class to the section to turn this section into a full screen menu for the CSS code later, go to the Advanced tab → CSS ID & Classes and type: “section-transform” in the CSS Class.

Then go to Visibility block, and set Horizontal and Vertical Overflow to Hidden, continue to Position block, set the Z Index to 99999, this setting will ensure the section is always on top of all your pages and posts content. Also, enable the hover option and make sure the same value of the Z Index is applied there too.

Step 3: Add the First Row to The Section

Let’s continue by adding a row to the section, and it will be the first row to the section. Then without adding any module yet, open the Row Settings, go to the Design tab and open the Sizing block, and make the row take up the entire width of the screen. Here is the setting needed:

  • Use Custom Gutter Width: Yes
  • Gutter width: 1
  • Width: 100%
  • Max Width: 100%

Continue by removing the default top and bottom padding next in the Spacing block, and set the Top and Bottom Padding to 0px.

Step 4: Add the Text Module for the Menu Button

We only need the text module in this row, and the content of this text module will be your menu button later, you can add a menu symbol of your choice. In this article, we are using the hamburger symbol ““.

Continue by moving to the Design tab → Text, here we will change the text setting as follows:

  • Text Font: Arial
  • Text Color: #0000000
  • Text Size: 3vw(Desktop),5vw(tablet),7vw(phone)
  • Text Line Height: 1em

Continue by adding white-colored Text Shadow to the hamburger icon to give it a better clarity in the dark section of the website.

Then go to modify the spacing values in the Spacing block to make the menu button float a bit in the left corner, the values are as follows:

  • Top Padding: 2vw (Desktop), 3.5vw (Tablet), 5vw (Phone)
  • Bottom Padding: 2vw (Desktop), 3.5vw (Tablet), 5vw (Phone)
  • Left Padding: 3vw (Desktop), 4vw (Tablet), 7vw (Phone)
  • Right Padding: 3vw (Desktop), 4vw (Tablet), 7vw (Phone)

Step 5: Add the CSS ID to the Menu Button to Trigger Full Screen Menu

To trigger the full screen menu when the hamburger icon is clicked, we need to assign a CSS ID to the text module, we will call this CSS ID later in our code. Go to the Advanced tab → CSS ID & Classes and type: “menu-open” in the CSS ID.

Step 6: Add the Second Row to Place the Menu

Let’s continue by adding a second row to the section to place our menu, then change its Sizing and Spacing setting. First open the Row Settings Design tab→ Sizing block and the settings are Width: 100%, and Max Width: 100%.

Next, go to the Spacing block to modify its value as follows:

  • Top Margin: 2vw (Desktop), 4vw (Tablet), 6vw (Phone)
  • Bottom Margin: 2vw (Desktop), 4vw (Tablet), 6vw (Phone)
  • Left Padding: 19vw
  • Right Padding: 19vw

Step 7: Adding the Menu Item

Let’s add items to our menu, and start by adding a text module to the column. Then type the name of the first menu and give it a link if you want. Our first menu is the “Home” menu, and the link is our home page “https://www.wppagebuilders.com/”.

Continue by going to the Design tab to customize the text style, our settings are as follows:

  • Text Font: Arial
  • Text Font Weight: Semi Bold
  • Text Color: #000000
  • Text Size: 3vw (Desktop), 7vw (Tablet), 8vw (Phone)
  • Text Letter Spacing: -0.1vw
  • Text Line Height: 1em

Next is the Spacing settings. The settings are as follows:

  • Top Margin: 1vw
  • Bottom Padding: 2vw
  • Left Padding: 3vw

Let’s add a bottom border, that will become a separating line between each menu. Go to Border block, on Border Styles, and pick the bottom border. For more settings is as follows:

  • Bottom Border Width: 1px
  • Bottom Border Color: #333333

Let’s finish the text module setting by adding a custom CSS Class. And this CSS Class needs to be added to each and every menu item you will be using. Go to the Advanced tab → CSS ID & Classes and type: “menu-item-click” in the CSS Class.

Continue by duplicating the text module to the number of menus you want. However, make sure the menu doesn’t surpass the height of your screen. We will go with 4 menus this time, so we will clone it three times. To achieve it, click on the menu text module, then click the duplicate icon 3 times.

Then proceed to change each duplicated menu item’s name and the link you want.

Step 8: Adding the Code for Full screen Menu

It’s time to add some code for the full screen menu, the following code will transform the section to full screen when the menu icon is clicked.

<script>
jQuery(function($){
$('#menu-open').click(function() {
$('.section-transform').toggleClass('section-transform-active');
});
$('.menu-item-click').click(function() {
$('.section-transform').removeClass('section-transform-active');
});
});
</script>
<style>
.section-transform{
cursor: pointer;    
}
.section-transform-active {
height: 100% !important;
width: 100% !important;
z-index: 99999 !important;
background-color: #FFFFFF !important; 
}   
.section-transform {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}
</style>

To add the code, firstly we will create a new row and add the Code Module inside. We will limit space taken up by this row by removing all default top and bottom padding.

Continue by adding the Code Module and paste the above code into it.

Step 9: Final Sizing for the Section

Once you completed adding all the modules and their content in the section, it’s time for the final sizing. Open the Section SettingDesignSizing and apply the following sizing to the section:

  • Width: 8vw (Desktop), 11vw (Tablet), 18vw (Phone)
  • Height: 7vw (Desktop), 11vw (Tablet), 18vw (Phone)

Continue by going to the Advanced tab → Custom CSS → Main Element and add the following CSS snippet:

position: fixed;
top: 0;

Make sure the same CSS snippet applies on hover too.

Step 10: Save the Project and Watch it Live

And our simple full screen menu is ready for action, go save your menu by clicking the save button, close the editor and click save changes on the Theme Builder page. Try opening one of your pages or posts let’s and try clicking on your newly created menu. Below is how our menu appears on one of our pages.

How to Enable WordPress Theme File Editor if Your Site is Hosted on SiteGround

Theme File Editor is a WordPress feature to make it easier for users to edit the files of a theme via the WordPress dashboard. With the feature, you can edit the files of your theme without needing to login to your hosting panel to access its file manager. Theme File Editor can be accessed by going to Appearance -> Theme File Editor on the WordPress dashboard. The feature is only accessible by users with an administration role — unless you created a custom role on your site. Can’t access the Theme File Editor? This article will show you, especially if you use SiteGround.

SiteGround itself is one of the most popular managed WordPress hosting services. The services include the following plugins:

  • SiteGround Optimizer
  • SiteGround Security

When installing WordPress on SiteGround, you are asked whether you want to include the above plugins on your WordPress installation. If you select the SiteGround Security plugin to included, your WordPress would be installed without Theme File Editor by default. To change the default setting, go to SG Security -> Site Security on your WordPress dashboard.

Seek for the Disable Themes & Plugins Editor option and slide the toggle to enable it.

When you disable the above option, you will also have access to the Plugin File Editor. To re-disable the Theme File Editor, you can simply revert the toggle to its default position.

Please note that while editing the theme files from the WordPress dashboard offers an easiness, it might not the best option when it comes to security. Especially if you have multiple users with an administrator role on your website.

If you don’t use SiteGround Security, you can disable Theme File Editor manually by editing the wp-config.php file of your WordPress site. You can add the following line to the content of the file.

define('DISALLOW_FILE_MODS', true);

You can place the above line right after the last line of the file content. Make sure to update the file after adding the line.

How to Create a Floating Button in Divi

There might be a time of a website visitor can’t find what they’re looking for on the page and wants to jump straight to getting in touch. With a floating button, it’s a great way to make yourself available and accessible. The floating button is always there, it suggests visitors take action without intruding on their browsing experience.

Creating floating buttons or floating action buttons in Divi is not a difficult task, we will show you how to create one step by step in this article. We will create a floating button that will take us to the phone call application when it’s clicked.

How to Create Floating Buttons in Divi

Step 1: Create a New Section and a Button

First, log in to your WordPress dashboard and edit an existing page or you can create a new one and click the Use Divi Builder button to edit the page with Divi Builder. You need to create a section for the new button module. Go into an empty space on your page and click the add new section icon , select a regular one → select the row layout and search for the button module.

Step 2: Change the Text and Give a Link to The Button

After the button is created let’s change the “Click Here” text to “Call Us” on the button. For the link, we will use “tel:phone number” action, so when the button is clicked, it will take us to the phone call application to call the number we just filled in the link option.

Step 3: Let’s Give the Button Some Style

To start customizing your button style, we need to enable the Custom Style option before, in the Design tab.

Then you can change the button color and text, give it an icon, make it more rounded, customize the on hover option, and many more.

Step 4: Make the Button Floating

After you are done with the button style, let’s make the button always floating on the right side of your page, go to the Advanced tab then click on the Position block, change the Position option to Fixed → click the middle right on the Location box to place your button on the middle right of your page → adjust the Horizontal Offset to 20px to make the button not sticking to the right of the browser → adjust the Z Index to 9999 to make the button most upfront element in your page.

After the button is ready, Let’s try scrolling the page up and down to test if the floating button working as intended.

The Bottom Line

A floating button is a great way to make yourself available and accessible with the floating button. The floating button is always there, it suggests visitors take action without intruding on their browsing experience. We demonstrated how easy it was to create a floating button on the Divi editor, with a little setting, and viola your floating button is ready for action.

How to Create Image Hotspot in Elementor (Without Add-on)

Having a good visual is one of the critical factors in sales. Because we believe that the more exciting visuals you present, the more likely your website visitors are interested in the products or services you offer. One of the tricks you can use to impress your visitors is the image hotspot.

So, what is an image hotspot? Image Hotspot is a feature that you can add different image areas to a single image. The Hotspots define the location of the particular image. This feature is a game-changer in this industry. Luckily, only with the help of Elementor Pro you can create an image hotspot very easily without writing a single line of code. Elementor released this feature (Hotspot widget) on version 3.3.0.

How to Design an Image Hotspot in Elementor

In this tutorial, we will show you how to design an interactive image hotspot for a website about gadgets.

On your WordPress Dashboard, go to Pages -> Add New. Click the Edit with Elementor button, and this brings you to the Elementor editor.

Once you enter the Elementor editor, continue to select the Hotspot widget from the widget panel, then drag and drop it into the canvas area. After that, insert the image that you want to. Feel free to select a horizontal image or a vertical image. In this example, we create a new section with two columns. We will use the first column for the Hotspot widget, and the second column for the Heading widget.

Now, we continue to edit the settings and apply some changes. As your reference, you can check our settings as below:

Content tab -> Hotspot

  • Animation: Soft Beat
  • Sequenced Animation: ON
  • Sequenced Duration (ms): 2000

For your information, by default, all the hotspots load simultaneously on page load, so if you want to keep the hotspots loading simultaneously, you don’t need to make any changes on the Sequenced Duration (ms) field.

Next, click Item #1, and you will see the hotspot item settings. There are two tabs; CONTENT and POSITION. We will use Item #1 as a hotspot for the TWS Bluetooth Earphone. Click the POSITION tab and start to adjust the hotspot position and point it to TWS Earphone by sliding the Offset toggles (horizontal and vertical orientation).

There are four ways to design the layout of your hotspot:

  • Default Dot
  • Text Label
  • Label + Icon
  • Icon

In this tutorial, we will design the hotspot layout with an icon. Click the CONTENT tab on the settings panel, go to the Icon option, and choose the icon from the Icon Library. In this example, we select the Music icon.

You will see a field to add the tooltip text on the bottom. In this example, we will write the name product and add a link to direct visitors to a specific page related to the product.

As you can see in the picture above, there are three gadgets. So, we need to add two more items. Click the (+) ADD ITEM button to add two more items. Like what you’ve just done with Item #1, you can adjust the position, change the icon and add the tooltip text.

Content tab -> Tooltip

On the tooltip setting, there are some options that you can set. You can set the Position, Trigger, Animation, and Duration (ms). You can set it with your preference. In this example, we set the Trigger to Hover.

Next, we move to the Style tab. Same as on the Content tab, there are three settings that you can set (Image, Hotspot, and Tooltip). In this example, we don’t change the Image setting.

style -> Hotspot

  • Color: #FFFFFF
  • Size: 20 PX
  • Box Color: #004AA14D

Style -> Tooltip

  • Typography:
    • Size: 12 PX
  • Alignment: Center
  • Color: #0E2D53C7

How to Optimize for Responsive Viewing on Tablet and Smartphone

Well, now the design is looking good. But, there is one thing that we need to do. We need to make sure that our design is still looking good while accessing via a tablet and smartphone. Let’s get started.

To enter the mobile editing mode, use a keyboard shortcut:

  • Ctrl + Shift + M (Windows)
  • command + shift + M (Mac)

Once you enter the mobile editing mode, there are two things that you need to check. The first is the hotspot position, and the second is the tooltip trigger. Why? Because the screen size for both devices is smaller than the PC, so might be affected the hotspot position. Then why do you have to be concerned about the tooltip trigger? Because commonly, people don’t use the pointer (mouse/ trackpad) to operate the devices. So, make sure to set the Tooltip Trigger to Click.

The Bottom Line

Elementor is a very intuitive tool for everyone. Especially for you that want to add an image hotspot to your WordPress site. Without the help of any addon and without writing a single line of code. We think this is the best choice for you if you don’t have any knowledge about coding. Feel free to play around with the Hotspot widget, experiment with all the customization, and enjoy the creative process of making your website more engaging for your visitors.

How to Show a Popup After Downloading a File in Elementor

Offering something (e.g., e-book and template) is a proven way to increase email subscribers of a website. In Elementor, you can make use of the Button widget to create a file download button to make it easier for your visitors to download the digital file you offer. After the file is downloaded, you can show a popup that contains subscription form (or a just a “thank you” text). The problem is that Elementor only allows you to add one link to the Button widget. So, how to show the popup if you have used the link field of the Button widget to add the link of the file you offer? This article will show you how.

As you might have known, you can show an Elementor popup based on the following trigger types:

  • On page load
  • On click
  • On scroll
  • Exit intent
  • After inactivity

In addition to the above trigger types, you can also show a popup by selector. So, if you already use the link field of the Button widget to add the link of the file you offer, you can open the popup by selector.

Showing Elementor Popup After File Download

Step 1: Prepare the Popup

First, create a popup you want to show after a visitor clicks a download button. If you haven’t created any popup before, you can read our previous article to learn how to create a popup in Elementor. You don’t need to set any trigger on the PUBLISH SETTINGS window as you will show the popup by selector. You just need to set the display condition.

Once done creating the popup, click the gear icon on the bottom-left corner to open the Popup Settings panel. On the Popup Settings panel, go to the Advanced tab and add a selector on the Open By Selector field. Make sure to add the dot symbol as the prefix (e.g., .popup12345).

Step 2: Edit a Page/Template Where You Want to Show the Popup on

Once your popup is ready, you can edit a page or template where you want to show the popup on. Edit the Button widget (or any widget you want to use to show the popup). On the settings panel, go to the Advanced tab and add the selector you specified above to the CSS Classes field under the Layout tab. This time, you don’t need to include the dot symbol.

Update your page/template and test the result.

How to Create and Display a Popup by Post Category in WordPress

Popups remain one of the best means to grab visitors’ attention so you can advertise your products and services as well as attract web traffic so your audience grows, and your conversion rates go up. However, please take the user experience into account so they can enjoy your website and not make them go away instead thanks to the intrusive popups.

Popup technology has gotten a lot more advanced over the last few years. Now you can show your popups to specific people, at specific times, and in specific places on your website. Creating a popup with display conditions in WordPress has never been easier with many popup builder plugins to choose from. With display conditions, you can set where a popup to show up, including on a specific post category.

Popup Builder Plugins with Display Conditions Support

1. Elementor Pro

The Popup Builder of Elementor offers a new and better way to build and manage popups. With an intuitive process that would be entirely handled by one single and familiar editor – Elementor. All 4 stages of building your popups will be handled inside one streamlined Elementor editor:

  1. Customizing the popup window.
  2. Building the inside of the popup.
  3. Setting the rules and display conditions for the popup.
  4. Connecting to your site links and contact forms

The above GIF demonstrates how Elementor handled almost all your popup behavior and action. Elementor popup builder also offers many premade popups templates that can get you inspired and makes creating popups getting easier but fined tuned.

2. JetPopup

JetPopup is an Elementor add-ons designed specifically to create popups. When creating a popup using JetPopup, you also can set the trigger of the popup, display condition of the popup, and catch more attention with popup animation effects. JetPopup also has a JetPopup Preset Library feature, which has many premade templates for the popup, so no need to create a popup from scratch. You also can filter the popup templates by categories like contact form, discount, join us, and many more.

3. Brizy Pro

You can use the Brizy Pro popup builder to create any type of popup. From a marketing ads popup to collect leads or just an information popup. Thanks to its on-click trigger support, you can even use the popup builder to create a full-screen menu or off-canvas menu on your Brizy-powered WordPress site. Brizy popup builder supports display and trigger conditions, so you can set the popup you create to appear on specific pages on your website, and what kind of action that triggers the popup to show up.

Brizy popup builder also has many beautiful templates for creating popups, from sale popups, signup form popups, and even media popups!.

How to Create Popup by Post Categories using Elementor Popup Builder

In this post, we will demonstrate how to create a popup with display conditions namely popup by posts categories using Elementor (the pro version). From your WordPress dashboard, go to Templates → Add New. A new window will appear where you choose what kind of a template you will work with, let’s choose Popup and give it a name.

You will be delivered to the Elementor editor and then given the option to choose the pre-made template for the popup, this time we will create it from scratch to show you how easy it was to create one. Let’s close the pre-made template window and add (+) the structure for your popup template.

Go into the popup setting by clicking the gear icon in the bottom left corner of the Elementor editor panel on the left side. It will show you the Layout settings block to set the width, the height, and the position for the popup. you’re free to follow our setting for the popup size or you can adjust the setting to fit your taste.

Let’s choose not to use background Overlay and activate the Close Button so the visitor will be able to close the popup if they want it to. Then set the entrance and exit animation to grab the visitor’s attention.

On the Style tab, you can set your popup background color, give a border to the popup, and add a box shadow to it. Then scroll down a bit, let’s set the position of the close button so it will not intrude on your popup design and make it less pretty. You can drag the pointer to move the X icon on your popup.

Furthermore, you can set the timing for displaying the close button so your visitor cannot close the popup immediately, by going to the Advanced tab and then setting the Show Close Button After(sec). To make the popup appear floating a bit in the corner let’s set the margin of the popup in the Margin option.

And that’s it for the popup setting we did. You’re free to give the content of the popup in the canvas area. After you are done designing your popup on the canvas area, let’s set the visibility condition for the popup. Start by clicking Publish button on the Elementor settings panel, in the appearing window let’s add a condition for the display location of your popup. In this occasion we will display the popup on the posts with the post category. Click ADD CONDITION → select Singular →  select Post – In Category → search the category.

Then click Next to set the popup trigger, for the popup we use the On Scroll trigger, and set the Direction to downward within 50% of the page.

You also can set more rules in the Advanced Rules section, we will skip this step and then proceed to click SAVE & CLOSE button to make our popup ready for action.

Let’s get a look at our newly created popup above, by opening a post with the category, the popup will show up after we scrolled down within half of the page.

How to Customize the Heading Elements on a Custom Single Post Template in Elementor

You might have known it that you can create a custom single post template on your WordPress site in a visual way using Elementor Pro. No need to deal with code. You can add and customize any element to your liking using the available Elementor widgets. One of the crucial widgets you need to add when creating a custom single post template is the Post Content widget. The widget is used to display the content of your blog post.

The Post Content widget offers the ability to customize the body of the blog post such as text size, text color, font family, and so on. Unfortunately, there are no options to customize specific elements of the post body such as heading elements and block quote.

Is there a way to customize the heading elements if you create the custom single post template using Elementor. This post will show you how.

Customizing the Heading Elements on a Custom Single Post Template in Elementor

When you create the custom single post template using Elementor, the elements of the post body (except the main post body) are still controlled by your WordPress theme. Elementor has a feature to override the heading style of your theme. To do so, open the Elementor editor by editing a page with Elementor. Next, click the hamburger icon on the top-left corner and select Site Settings.

Once the Site Settings panel opens, click the Typography settings block.

As you can see, there are several elements you can customize here, including the heading elements. You can customize the typography and set the text color. Simply click the color picker on each heading level to set the text color and click the pencil icon to set the typography.

Make sure to click the UPDATE button on the bottom side to apply the changes you made.

The Bottom Line

Site Settings is an Elementor feature introduced in version 3.0. The feature it aimed at controlling your site settings, so that no matter the theme you use, you can apply settings to your site according to what you want. All settings you made here will override the settings you made via theme customizer. From Site Settings, you can customize the elements on the blog post template such as headings (as we have just covered above), form fields (comment fields), button, and link.

How to Create Age Verification Popup in Elementor

If your website distributes goods or digital content that are not meant for minors, you’ll need a measure of protection used to restrict access to your shop or your digital content for those who haven’t reached a certain age. The age verification popup can solve that problem. That can also avoid problems with the law and keep your website’s reputation.

This tutorial will show you how to create an age verification popup in Elementor Pro. Because the feature of creating a popup template is only accessible on Elementor Pro, make sure that you already have one.

How to Create an Age Verification Popup in Elementor Pro

On your WordPress dashboard, go to Templates -> Popups. Click the Add New button to create a new popup template.

Enter a template name and click the CREATE TEMPLATE button. It will bring you to the template library, which contains many premade popup templates. You can pick one of them or create from scratch, which is what we will do. Click the (X) button, bringing you to the Elementor editor.

Go to Popup Settings by clicking on the (⚙️) button, and then we’re going to apply some changes. You can see as below:

Settings tab -> Layout

  • Width: 550
  • Height: Custom
  • Custom Height: 1000 PX
  • Content Position: Top
  • Close Button: HIDE
  • Entrance Animation: Fade In
  • Exit Animation: Fade Out

Style tab -> Popup

  • Background Type: Classic
  • Color: #02010100 (Transparent)
  • Image: Insert Media

Next, create a new section with a single column. Select the Heading widget on the widget panel, then drag and drop it into the canvas area.

Compose the text and start to design with your creativity. As your preference, you can check our settings below:

Content tab -> Title

  • Title: Are You Over 21?
  • HTML Tag: H1
  • Alignment: Center

Style tab-> Title

  • Text Color: #FFFFFF
  • Typography -> Size: 50 PX
  • Text Stroke: 5 PX, Stroke Color: #252A2F

Now it’s time to add the buttons. We want to design the first button. Select the Button widget from the widget panel, then drag and drop it into the canvas area (under the Heading widget).

Let’s start to design the button. As your preference, you can check our settings below:

Content tab -> Button

  • Text: YES
  • Alignment: Center
  • Size: Medium
  • Icon: Pick the Check (☑️) icon from the Icon Library
  • Icon Position: After

Style tab -> Button

  • Typography -> Size: 20 PX
  • NORMAL:
    • Text Color: #FFFFFF
    • Background Type: Classic
    • Color: #3D5040
  • HOVER:
    • Text Color: #000000
    • Background Type: Classic
    • Color: #E00808
    • Hover Animation: Shrink
  • Border Radius: 30 PX (Iink values together)

Advanced tab -> Layout

  • Margin: Unlink the values; on the TOP field, set it to 20 PX

Next, we’re going to add the second button. Please select the Button widget from the widget panel, then drag and drop it into the canvas area (under the first button). There are some changes that we’re applied, as below:

Content tab -> Button

  • Text: NO, I HAVE A CANDY
  • Alignment: Center
  • Size: Medium
  • Icon: Pick the Candy Cane from the Icon Library
  • Icon Position: After

Style tab -> Button

  • NORMAL
    • Text Color: #FFFFFF
    • Background Type: Classic
    • Color: #20121200 (Transparant)
  • HOVER
    • Text Color: #FFEDEDBa
    • Background Type: Classic
    • Color: #B7149A
  • Border Type: Solid
  • Width: Unlink the values; on the BOTTOM field, set it to 3 PX
  • Color: #0D20A1
  • Border Radius: Unlink the values; on the BOTTOM field, set it to 3 PX
  • Padding: Unlink the values; on the BOTTOM field, set it to 3 PX

Advanced tab -> Layout

  • Margin: Unlink the values; on the TOP field, set it to 15 PX

Once you have finished designing the buttons, we move to the section setting. Click the section handle to edit the section, then you can play around with the settings. As your reference, you can check some changes that we applied here, as below:

Layout tab -> Container

  • Height: Min Height
  • Minimum Height: 350 PX

Style tab -> Background

  • Background Type: Classic
  • Color: #0360D766

Style tab-> Border

  • Border Type: Solid
  • Width: 25 PX (link values together)
  • Color: #2F004AA8
  • Border Radius: 45 PX (link values together)

Advanced tab -> Layout

  • Margin: Unlink the values; on the TOP field, set it to 60 PX

Next, we’re going to aim the buttons. We start with the YES button; we want to trigger this button to close the popup. Go to the Link option, then click the Dynamic Tags icon. Under that, select the Popup option and then click the wrench icon to see some settings. On the Action option, set it to Close Popup. After that, on the Don’t Show Again option, set it to YES by sliding the toggle to the right.

We will set the NO button as navigation to an age-appropriate site. Go to the Link field and add any link you want.

We need to make sure that your visitors will respond to your popup. Please go back to the Popup Settings, then click the Advanced tab. There are many options here, but we only two options that we need to change. On the Prevent Clicking on Overlay and Prevent Clicking on ESC key options, please set those options to YES by sliding the toggle to the right.

Because this popup is displayed by clicking the button, you can publish it without setting any conditions, triggers, or advanced rules — Click PUBLISH and then SAVE & CLOSE button.

How to Apply the Age Verification Popup to the Page

Edit your existing page or new page with Elementor. Once you enter the Elementor editor, add the button widget from the widget panel to the canvas area. If you already have the button before, you can directly go to the button settings. On the Link option, click the Dynamic Tags icon then select the Popup. After that, click the Popup field to find some settings. Set the Action to Open Popup, and then write the name of the popup that you’ve just created above.

Voilà. Let’s see it in action.

The Bottom Line

Age verification is a must if you operate in an age-sensitive. It makes your website compliant with laws and regulations issued by the legal institution in your country—an age verification popup is used to restrict underage users from accessing your website. With Elementor Pro, you can easily create an age verification popup and provide you to design with your creativity.

How to Disable Custom Colors in Gutenberg

When editing a content with Gutenberg — be it a post or page — you can set the color of elements like text and button. You can find the color setting on the Block tab on the settings panel of Gutenberg. There are several predefined/default colors you can find here. These colors are defined by the theme developer so you will find different default colors on each WordPress theme. If none of these default colors suit you, you can use a different color by selecting a custom color.

While custom color is great when it comes to color selection (as you can pick any color you like), you might doesn’t need it for a multi-user site. Instead, you might want all users on your website to use the colors you have defined for the sake of maintaining your brand identity. If this is the case, you can disable custom color so that users on your website can’t pick a color other than the default colors.

How to Disable Custom Colors in Gutenberg

Custom color is a WordPress feature that is enabled by default in most WordPress themes. If you don’t need it this feature, you can disable it by editing the functions.php file of your theme. First, login to your WordPress dashboard and go to Appearance -> Theme File Editor. Make sure the active theme is selected, then select the functions.php file on the right panel to edit it.

Add the following snippet to the functions.php file content

add_theme_support('disable-custom-colors');

You can place the snippet above right after the last line of the functions.php content. Here is the example of the placement.

Make sure to click the Update File button after adding the snippet above.

If everything goes well, you should not see the custom color picker anymore on Gutenberg.

The Bottom Line

In Gutenberg, you have options to set the color or text, button, block background, and several other elements. The default color options are varied on each theme as the default colors are defined by theme developer. Instead of giving your users a freedom to choose their own colors via custom color picker, you can force them to use the predefined colors to maintain your brand identity. You can disable the custom color picker by editing the functions.php file of your theme as we have covered above.

Pin It on Pinterest

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.