Category: Wordpress

A Google map location on your WordPress website helps users locate your business quickly and builds trust.

Do you want to learn how to add and customize the Elementor Google Maps Widget to your WordPress website?

Then, you are at the right place.

In this blog, we will learn how to customize the Elementor Google Maps Widget in four quick steps.

How to Add Google Maps Widget in Elementor for WordPress Website?

Elementor is one of the best WordPress page builders. It offers a drag-and-drop feature for adding widgets and elements to your site’s page or post.

Elementor Google Maps Widget is a drag-and-drop widget that allows you to add your business’s location to your website without any coding.

In this section, we will learn how to add this widget to the WordPress post or page hassle-free.

Let us get started!

• Step 1: Open your Elementor widget section and search for “Google Maps” widget. Select the widget and add it to the container on your page/post.

• Step 2: Now, preview your Google Maps and add the business location. Finally, publish your page and preview the Google map on your website.

You have successfully added the Elementor Google Maps Widget to your website. Using this widget, you will be able to depict your exact location and build trust among the users.

Customize Google Maps Widget on WordPress Website using Elementor

Every element requires customization before going live on the website, and the same goes for the WordPress Elementor Google Maps widget.

In this section, you will learn how to style the Elementor widget to make it more presentable on the site.

Before going to the Style tab, we will look at some widget options for adjusting its height and zooming in/out of Google Maps.

• Zoom: You can use this zoom slider to zoom in/out on Google Maps to make your location on the website more precise.
• Height: With this option, you can adjust the widget’s height according to the element’s placement.

Style tab

This tab lets you style the widget to match the website’s theme and color combination. It can also adjust the CSS filter for the normal and hover effects.

Normal

• CSS Filters: You can adjust Google Maps blur, brightness, contrast, saturation, and hue with a normal effect.

Hover

• CSS Filters: This option under the hover effect helps you to adjust the hover effect filters by editing the settings.

• Transition Duration: This option helps you adjust the hover effect’s transition duration for your Elementor Google Maps widget.

Conclusion

Suppose you have an offline business like a bakery shop where you want your customers to visit and spend quality time with their loved ones. In that case, you can use the Elementor Google Maps Widget to help visitors locate your place quickly. You can use this widget with both free and premium versions of Elementor.

Adding WordPress custom fonts, whether in the WordPress theme vs page builder, enhances your website’s design and branding. WordPress Custom fonts help align your site with your brand’s aesthetic, creating a unique and professional look. They improve readability and user engagement, making your content more visually appealing.

Using WordPress custom fonts also ensures consistency across devices and screen sizes. Overall, they enhance the user experience and elevate the quality of your website.

Check out our step-by-step guides to learn how to add WordPress custom fonts to both versions of Elementor. We’ll highlight the differences in the processes and share resources for free typography.

Feature of WordPress Custom Fonts

‘Custom‘ means something meticulously designed to cater to specific needs and preferences.

WordPress Custom fonts are tailor-made to meet your personal requirements and preferences, empowering you to create, customize, and refine font characteristics beyond the limitations of standard default fonts.

Craft and apply five distinct custom font formats:

• Embedded OpenType (EOT) – This font file is designed to work on Internet Explorer but may encounter compatibility issues with other browsers. Be sure to use this format to ensure support for earlier versions of Internet Explorer.
• SVG Fonts/Shapes – Utilize SVG typography as glyphs in SVG to display text, ensuring compatibility with earlier iPhone versions.
• TrueType Fonts (TTF) – This was created in the late 1980s by Apple and Microsoft.
• The Web Open Font Format (WOFF 2.0) – WOFF 2.0 offers superior compression to WOFF 1.0, supporting TrueType or OpenType.
• The Web Open Font Format (WOFF) – WOFF is unequivocally the most recommended format due to its comprehensive support in modern browsers.

The European Union has announced a new addition to the GDPR. If you’re using directly hosted Google fonts on your website, you could be in violation of GDPR rules, which will incur a 100-euro fine from Google.

To avoid this, make sure to add Google Fonts elementor locally or consider using elementor typography settings.

You can quickly enhance your website by controlling your Google fonts using the Perfmatters plugin.

Looking for WordPress Custom Fonts Free for Web Design?

Creating custom fonts from scratch requires various technical skills, including typography, design software usage, encoding, file formatting, font licensing, scripting, and automation.

However, if you’re a no-code user, you don’t need to worry about mastering these skills.

When it comes to choosing fonts, it’s crucial to use pre-designed free or premium options. There are numerous trustworthy websites where you can find incredible custom fonts.

Google Fonts, Font Squirrel, FontSpace, DaFont, and Open Foundry are among the top websites for this purpose.

You can delve into the post on the best places to acquire free fonts to learn more about these websites and access direct links.

Following that, we will guide you through the process of downloading a custom free font from DaFont.

Procedure 1: Download a Font from the DaFont Website

Explore DaFont.com and discover the perfect font for you. With a simple click, you can download your chosen font and enhance all your projects.

Procedure 2: Unzip the Downloaded File

After downloading, the font file will be in ZIP format. Remember to unzip the file and access the folder.

Please keep in mind that Elementor supports only five specific font formats and cannot be used directly with ZIP files.

Procedure 3: Find Out a Suitable Format

There are multiple formats of the downloaded font in the folder. It’s crucial to determine if any of these formats correspond to the five formats listed above. Notably, a .ttf format is present. This format will be essential for the upcoming tutorials.

Similarly, you have the ability to discover and access fonts from additional font foundries.

There’s a difference in how they are added to the free and premium versions of Elementor. The Custom feature is exclusively for premium users. However, no need to worry if you’re a free user.

You still have the option to add fonts to the free version using additional plugins. In our tutorial methods below, we’ll guide you through these processes.

How to Add Custom Fonts in Elementor

Procedure 1: Procedure to Add Custom Fonts in Elementor Free Versions

Are you looking to enhance or add typography in Website? Look no further. With the Free Fonts and Typekit plugins at your disposal, you can effortlessly achieve the look you desire. Let’s get started with the WordPress custom fonts Free plugin.

Step 1: Installation and Activation of Custom Fonts WordPress Plugin

Go to Plugins—Add New. In the search box, type Custom Fonts. Installation and Activation plugin when it appears below.

You’ll find a new menu labeled Custom Fonts in the Appearance section. Access the menu and press the Add New Font button.

Step 2: Uploading the Font and Saving Variations

Be sure to start by selecting the Local Fonts tab. Then, click the Choose File button to upload the font file you downloaded from your local drive.

Remember to upload the file in .ttf format. After that, give your font a captivating name. For example, in the image below, we named our font “Saverroot.”

You can also append other variations and see the preview on the right side. Lastly, don’t forget to click the Save Font button to finalize.

Step 3: Ensure that the font is compatible with Elementor

Make your website stand out with our simple steps:

1. Navigate a post or page.
2. Drag and drop the Headings or Text Editor widget.
3. Update engaging text to the widget.
4. Access the Style tab and open the Typography option.
5. In the drop-down list next to “Family,” easily find your font by its name.
6. Witness our updated font “Saverroot” prominently displayed in the list. It works like a charm!

With the WordPress Custom Fonts plugin, you have the power to append elementor typography settings seamlessly without any cost.

Additionally, the process for utilizing the Typekit Fonts plugin is just as straightforward.

Procedure 2: Procedure to Add WordPress Custom Fonts in Elementor Pro

It’s essential to have the Premium version installed and activated on your website for the Fonts function to work. Let’s dive into the tutorial now!

Step 1: Adding WordPress custom Fonts in Elementor Pro

Go to the Elementor – Custom Fonts

Welcome to our custom font creator! Press the “Add New” button to begin crafting your unique font.

Give your font a captivating title, then proceed by pressing on “Add Font Variation.”

Step 2: Adding a Font Variation & Upload Font Files

Enhance your font with annother options like font weight, style, and font files.

Easily upload a TTF font file by clicking the upload button.

Remember to have your preferred font files ready on your device before starting the upload.

Once completed, view the font details instantly.

To maintain consistency, repeat the Font File Upload process for each format. To introduce another font variation, simply click on the “Add Font Variation” button and adjust the font weight to 100.

After the upload, you can conveniently update it from the media gallery.

Step 3: Publishing the Final WordPress Custom Fonts

Update various font styles to your site and click Publish when finished.

Step 4: Utilize the WordPress Custom Fonts in your Elementor Design

You might be wondering how to use this font. To find and use the font, open any of your Elementor pages on the design panel. Then, update a text widget to the panel.

After that, update the Heading Widget to the Editing Panel.

After updating the Text widget (heading):

1. Go to the Style section
2. Click on Typography
3. Select the font you created earlier (Saverroot).

Explore other Typography options to enhance the appearance of your text or font, such as font size, weight, transform, style, decoration, line weight, and more!

An exceptional design can captivate customers like no other. If you want to elevate your webpage’s heading to be more vibrant and captivating, this next section is for you.

Procedure 3: By Using Codes Add Elementor Pro Fonts

Discover how to enhance your site by appending font using a simple manual process.

• Create a new “fonts” folder within your theme’s directory using an FTP client or cPanel.
  Ensure that the “fonts” folder is located in wp-content/themes/fonts.
• Then, upload all font files to this newly created folder.
• Finally, open the theme’s stylesheet (style.css) and insert the provided code to complete the process.

				
					@font-face {
	font-family: 'nameofnewfont';
	src: url("/fonts/nameofnewfont.woff2") format("woff2"),
		 url("/fonts/nameofnewfont.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

				
			

• Adding a font to your website’s elements through the stylesheet can be a bit daunting, especially for beginners.
• It involves a lot of coding for configurations such as “italics” or “bold,” and you’d have to repeat the process each time.

If you’d rather skip the technical hassle, follow the steps below to effortlessly add fonts to your site.

Customize your font using the Text Animation Widget

This awesome widget lets you easily make your text more engaging and visually appealing. It offers ten pre-built design layouts to save you time and effort.

Once updated to your design panel, simply choose a layout and customize it to fit your webpage structure.

Let’s see firsthand how you can use the Animated Text widget on your site to enhance your text or font.

Step 1: Updating Animated Text Widget

From the widget gallery, drag-drop the widget.

You will initially see the widget on the screen.

Tap the style button, go to typography, and choose My Fonts to use the text you created earlier.

Step 2: Updating Designs to Text

Go ahead and tap on the content section once again. Select the design that resonates with you the most.

After confirming the design, take the opportunity to fine-tune the animation style. Simply click on Content and locate the Animation type there. Delve into each type individually to enhance your website’s output.

Remember that the Animation delay is in milliseconds. It should be a minimum of 1000 and a maximum of 30000.

Step 3: View the animated text’s final output on the web page

Check out the end result after customizing the Animated Text widget in your font.

Transform your plain font and text with the Animated Text widget for an eye-catching display. For a detailed walkthrough of this widget, refer to the official documentation.

Bottom Line

In summary, adding WordPress custom fonts in Elementor—via the Pro version or the free plugin—enhances the look and functionality of WordPress websites. WordPress custom fonts help establish a strong brand identity and improve user experience.

They make content visually appealing and align it with branding goals, boosting professionalism, readability, and user engagement. This investment is essential for anyone wanting to create a standout online presence.

Duplication of a page becomes significant in the field where you have to create content and if you want to preserve that content with your designs. You can also safeguard your settings, including tags, categories, authors, and all the other data.

It is possible to duplicate a page in Elementor WordPress to generate related content in large quantities and upgrade your previous content.

Duplicating pages will also help you filter your design. In most cases, it’s not only about copy-pasting your text from one page to another.

Whatever the reason, you can effortlessly duplicate a page in WordPress with Elementor.

Reasons to Duplicate a Page in Elementor WordPress.

When you duplicate a page in WordPress, you replicate its design, formatting, and SEO attributes. After duplicating, update the content with new text.

Here are some common reasons for duplicating a page in WordPress:

• 
  To utilize the identical (copying) design for new pages.
• 
  To ensure uniformity in layouts, colors, and fonts
• 
  To create a duplicate of a particular Elementor post or duplicate a page in Elementor.
• 
  To replicate the metadata, SEO details, media files, and other content
• 
  To apply a template to other pages or websites designed with Elementor.

Effortless Methods for Replicating a Page in WordPress

You can duplicate a page in WordPress in various ways. In this tutorial, we have only included the easiest methods. Here’s a list of what you will learn in the following sections.

You can duplicate a WordPress page in various ways. This tutorial lists the most straightforward methods and what you will learn in the following sections.

1. Duplicate a Page in  Elementor.
2. Duplicate a Page in WordPress (Without Elementor).

Duplicate a Page in Elementor.

Given your interest in methods to duplicate a page in Elementor, it’s likely that you’ve already installed it on your WordPress site and are now seeking to create a copy of a page you’ve developed with Elementor.

After creating an Elementor page, follow the steps below to duplicate a page in elementor.

• 
  Step 1. Save Your Page Design as a Template
• 
  Step 2. Import the Template to Create a New Page
• 
  Step 3. Incorporate the Template into Another Website
• 
  Step 4. Duplicate a page in Elementor by Copying and Pasting in the Drag Widget Section
• 
  Step 5. Utilize the Finder feature to duplicate a page in Elementor.

Step 1. Save Your Page Design as a Template

Firstly, go to the page you want to duplicate and start editing with Elementor. You’ll find a small arrow beside the UPDATE button. Click on that, and it will give you two options. Click on the Save As Template option.

Save as template

Change the name of the new page template. Click on the save button to save its copy. We have used New to save it in the page library.

Save Your Page to the Library

Step 2. Import the Template to Create a New Page

Navigate to your WordPress admin panel, then go to Pages -> Add New. Give the new page a suitable title and start editing with Elementor.

Add a new page.

Scroll down to locate the drag-and-drop section of the page editor. Select the Folder icon and click on it.

Choose the Saved Template

To access your Elementor library, click on the Folder icon. The library contains Blogs, Pages, and the My Templates menu. Select My Templates to view your saved templates. Next to the page you want to duplicate, click the Insert button.

After completing these steps, a new page will be created.

Insert the New Template

Step 3. Incorporate the Template into Another Website

To export a template, go to Templates -> Saved Templates and click Export Template (1) to download the template as a JSON file. Then, navigate to Templates -> Saved Templates in the admin sidebar on the target website. Click the Import Templates (2) button and select the template file from your computer to import it.

Export & Import the Target Template

Thus, you can duplicate a specific page across multiple domains. However, ensure that all the websites in question are using Elementor. These features are not accessible for websites without Elementor installed.

Step 4. Duplicate a page in Elementor by Copying and Pasting in the Drag Widget Section

To make a copy of the original page in Elementor, follow these steps:

• Open the page in the Elementor editor.
• Scroll down to the drag-and-drop section.
• Right-click inside the box to see a pop-up menu.
• Click on Copy All Content from the options.

To paste the copied content, first navigate to the Add New page option. Then, edit the new page using Elementor. Locate the drag-and-drop box as before, right-click on the white space inside the box, and select Paste from the menu. This will paste all the copied content from the previous step. Your new page is now ready.

Paste the Copied Content

This is how our site currently looks. After pasting the content.

Step5. Utilize the Finder Feature to duplicate a page in elementor

Elementor has a unique search bar, that provides users with quick and instant access to multiple functionalities across your website. This search bar is called Elementor Finder.

To duplicate a page in Elementor WordPress, you have to follow these steps: 

• Log in to your WordPress admin panel.
• Press CMD + E (for Mac) or CTRL + E (for Windows) to open the Elementor finder.
• Type the name of the page you want to duplicate (for example, sample).

Once you’ve found the page, you’ll see a Copy Icon next to the page name. Click on that icon. A copy of the page will be instantly created.

Open the Elementor Finder.

Check under Pages > All Pages to ensure the duplication process was completed correctly. Rename the duplicated page as needed.

Rename the clone elementor template.

Duplicate a Page in WordPress (Without Elementor).

The default copy-paste functionality of the WordPress block editor can only copy the content of a page without including metadata, SEO information, category, and tag settings. You should manually add these details if you want to duplicate a page. However, if you still wish to duplicate a section in elementor WordPress, follow the steps below.

• Step 1: Copy all content.
• Step 2: Paste it to a new page.

Step 1. Copy all Content

To make a copy of the content, go to the page where you want to duplicate the content and open the WordPress editor. You’ll see three vertical dots menu options in the top right corner. Click on the dots and select Copy all content. This action will save all your content to the clipboard.

Copy all content using the WP Editor.

Step 2. Paste Them to a New Page

Now, navigate to Pages -> Add New in the WordPress admin panel. Give your page a new name and place your cursor in the Type/to choose a block section. To paste all the content into the new page, use the keyboard shortcut Ctrl+V.

Use Short Key (ctrl+v) to paste.

You should see the duplicate page running smoothly once you have pasted the content.

WordPress Admin Panel Duplication

The WordPress admin panel offers a straightforward approach to duplicate pages without requiring additional plugins or technical expertise

Accessing the WordPress Pages Dashboard

You can easily duplicate your Elementor pages directly from the WordPress dashboard. Navigate to your
WordPress admin panel and click on “Pages” in the left sidebar menu. This will display a list of all your
existing pages, including those built with Elementor

Using the Clone/Duplicate Function in WordPress

The WordPress admin panel offers two primary methods to duplicate your pages:

1. Quick Actions

• Hover over the page title
• Look for the “Clone” or “Duplicate” option
• Click to create an instant copy

2. Bulk Actions

• Select multiple pages using checkboxes
• Choose “Clone” from the bulk actions dropdown
• Click “Apply” to duplicate all selected pages

Organizing and Renaming Duplicated Pages

After duplication, your new page will appear with “Copy” or “(Clone)” added to the original title. To maintain an organized page structure:

• Immediately rename your duplicated page
• Update the page slug for proper URL structure
• Add relevant tags or categories
• Consider using a numbering system for multiple versions

This native WordPress method offers a straightforward approach to page duplication without requiring an elementor page duplicator plugin
. When working with complex Elementor designs, this method ensures all your page
elements, including widgets and styling, are perfectly copied.

Now that you understand how to duplicate pages through WordPress let’s explore some third-party solutions that can enhance your duplication capabilities.

Working with Third-Party Solutions

Third-party solutions offer robust and efficient ways to duplicate pages across different platforms. These tools often provide additional features like scheduled backups, selective content duplication, and cross-domain transfers.

Duplicate Post Plugin Methods

The Duplicate Post plugin offers a robust solution for cloning Elementor pages. After installation, you’ll find duplication options directly in your WordPress dashboard.

Key features include:

• One-click duplication from the post/page list
• Ability to clone both content and metadata
• Option to duplicate entire page hierarchies
• Custom prefix/suffix settings for duplicated titles

Yoast Duplicate Post Settings

Yoast’s Duplicate Post functionality provides granular control over the duplication process:

• Selective elementor page copying methods
• Post status configuration for duplicates
• Custom roles and permissions management

• Template preservation settings

Alternative Plugin Options

• Duplicate Page – Simple interface with bulk duplication features
• Copy & Delete Posts – Includes advanced filtering and modification options
• WP All Export – Useful for duplicating pages across different WordPress sites

Each third-party solution brings its own advantages to the table. For instance, some plugins specialize in preserving specific Elementor widgets and settings, while others excel at maintaining complex page relationships and custom fields.

Best Practices and Tips

When duplicating pages, proper practices ensure smooth operation and maintain site integrity.You can maintain a well-organized website while maximizing the benefits of page duplication by following these practices.

Naming Conventions for Duplicated Pages

When duplicating pages in Elementor, implementing a consistent naming system is crucial. Follow these best practices:

• Add a suffix like “-copy” or “-v2” to distinguish duplicates
• Include the date of duplication (e.g., “homepage-2023-10”)
• Use descriptive prefixes for different versions (e.g., “draft-“, “test-“)

Managing Page Revisions and Backups

Duplicated pages can impact your site’s speed if not properly optimized:

• Remove unused widgets and elements from duplicated pages
• Compress images and optimize media files
• Check and fix broken links in duplicated content
• Review and update internal links to maintain proper site structure

• Clear cache after creating duplicates to ensure proper loading

Following these practices ensures smooth operation of your duplicated pages while maintaining site performance.

Conclusion

To duplicate a page in Elementor for WordPress offers a streamlined way to replicate and enhance existing content. Whether you’re maintaining design consistency across multiple pages, preserving SEO attributes, or scaling content creation efficiently, Elementor simplifies the process.
Users can replicate pages effortlessly by saving page designs as templates and utilizing features like the Elementor Finder for quick duplication.

Do you own a WordPress website?

Do you want to upgrade it by investing in it? Or are you confused about which to choose between WordPress themes and page Builders?

Well, we are here to solve your issue. In this blog, we will provide insights about both of them, and that will help you understand what is convenient for you and your sight. And in another way, you can say WordPress theme vs page builder.

So, let’s begin.

Let’s go one by one and start with WordPress themes.

What are WordPress themes?

A WordPress theme is a set of files that defines a WordPress website’s visual appearance and layout. It performs as a template that delivers the overall design framework, which includes styles, colors, fonts, and layouts. A WordPress theme lets users design an aesthetically pleasing and cohesive site without coding from scratch.

Features of WordPress Themes

Now that you have understood the definition of themes, it’s time to understand their features, things that will actually benefit you if you pick themes.

Creates Elements

Themes come with pre-defined design elements like headers, footers, sidebars, and navigation menus, and this makes it easy to set up a professional-looking site.

Customization Options

Most themes offer customization options through the WordPress layouts to fit their brand identity. The Customizer enables users to tweak colors and fonts.

Responsive Design

Many modern themes are made to be responsive, which means they automatically adjust to a variety of sizes and screen sizes, providing a good UX on tablets and mobile devices.

Functionality

Themes often include various features, such as built-in support for post formats, custom widgets, and menu options, which enhance the website’s functionality.

Compatibility

A well-designed theme is usually compatible with popular plugins, lets users to add additional functionality, like SEO tools, contact forms, and e-commerce capabilities.

Pros

• 
  Pre-Designed Layouts
• 
  Consistent Design
• 
  Performance
• 
  SEO-Friendly

Cons

• 
  Limited Customization
• 
  Dependency on Theme Updates
• 
  Less Flexibility

Types of WordPress Themes

Depending on your preferences and capacity, There are various WordPress themes to choose from. We have mentioned them here.

Free Themes: These themes are available in the WordPress Theme Directory and are usually basic but can be suitable for personal blogs or small businesses.

Premium Themes: Third-party developers offer these themes for a fee. They offer advanced features like better support, and more customization options.

Child Themes: A child theme is a completely different theme that inherits the functionality and styling of another theme (the parent theme). This allows for wordpress theme customization without losing the ability to update the parent theme.

What are Page builders?

A page builder is a tool or plugin that lets users create and design custom forms for their WordPress websites without any coding. It has a visual interface with a drag-and-drop function and also allows WordPress users to easily add and customize content details on a page.

Features of Page builders?

So, just like themes, Page builders also have various features, which you might want to know about, so here they are.

Drag-and-Drop Interface

Users can simply drag elements like text blocks, images, buttons, and forms onto the page and position them as desired, making it user-friendly, especially for beginners.

Pre-Built Elements

Page builders generally come with a variety of pre-designed elements or modules, such as sliders, galleries, and call-to-action buttons, that can be customized to fit the website’s design.

Responsive Design Options

Most page builders can make responsive designs that will adapt to various screen sizes, with a consistent user experience across devices automatically.

Real-Time Editing

Many builders offer real-time editing that allows you to monitor changes as you make them without refreshing the page.

Template Library

Page builders usually include a library of pre-designed templates and sections. This allows users to build pages fast or entire websites by importing ready-made designs.

Pros

• 
  Drag-and-Drop Interface
• 
  Versatile Design Options
• 
  Reusable Templates
• 
  High Customization

Cons

• 
  Dependency on Plugins
• 
  Performance Concerns
• 
  Learning Curve

Popular Page Builders

There are various page builders out there. We have mentioned some of them below you can pick from. Do not forget to do in-depth research before you pick one.

Elementor

It is one of the most popular page builders out there, known for its user-friendly interface and wide range of features, it includes a large library of templates and widgets.

Beaver Builder

It is a flexible and strong builder focusing on performance and ease of use, suitable for both beginners and developers.

Divi Builder

This page builder offers advanced design capabilities and a robust set of pre-made layouts as part of the Divi theme.

Final Verdict

A good theme might be the way to go if you’re starting and want something quick and straightforward. But if you have specific design ideas and want to experiment with layouts, a page builder will give you the creative freedom you need.

Ultimately, many users find a combination of both works best—using a solid theme with a compatible page builder for added flexibility. Now you have an understanding of WordPress theme vs page builder.