Google Maps Alternatives: Good or Bad?

Google Maps Alternatives Featured Image

Many websites created by Jupiter users include a Google Map element. They’re particularly helpful for businesses who have a set location that they would like their visitors to know about and visit. But in using Google Maps, you might run into difficulties such as error messages as seen in the image below. In the next paragraph, we’ll explain in detail why you’ve received this message and how you can begin using alternatives to Google Maps!

The launch of Google Maps Platform

As of 11 June 2018, Google Maps changed its name to Google Maps Platform. With this change, any site that uses Google Maps is required to have a valid API key and a Google Cloud Platform billing account. Featuring Google Maps on your website is still possible, but you’ll have to make some modifications to how it is set up, including giving Google your credit card.

You can read more about the restructuring of Google Maps here.

Without an API key, sites with Google Maps will no longer be supported, and any Maps requests will now show only low-resolution maps watermarked with “for development purposes only” unless a credit card is associated with it.

If you are unwilling to create a billing account with Google, you can still find some Google Maps alternatives. We’ll list some of them.

Open Street Maps as a Google Maps Alternative

Tons of sites all around the world are working on OSM. The WP OSM Plugin is an open-source plugin with a free license and without any pro version or a business plan.

Features of the WP OSM Plugin include:

  • Add geolocation to a post or a page
  • Add GPX and KML files or just a single marker to a map
  • Add maps as shortcode or widget to a post/page
  • Fullscreen map, maps with markers linked to post/page with geolocation
  • OpenStreetMap, OpenSeaMap, Stamen maps, basemap, etc.
Google Maps Alternatives Features

You can read their FAQ and documentation on their official site.
Read the “Display a simple map” article to find out how to add a map to your WordPress site.

MapBox

Another alternative to Google Maps is MapBox. Mapbox is an online mapping service that allows users to customize maps – much more than Google Maps ever did. You can change backgrounds, road colors, and a lot more directly with a simple interface.

WP Mapbox GL JS Maps is the only plugin that enables you to make highly customized maps with 3D features, custom icons, zooming, custom filters, among many more options. It has a free and an inexpensive premium version, which adds custom markers, better control over directions, and more advanced control over marker and popup behavior.

To get started with MapBox, visit http://mapbox.com/ and click “Sign Up.” There are different pricing options you can select when signing up for MapBox. For now, go ahead and sign up for a free account, which comes with more than enough to get started. Read more here on how to use it.

The plugin provides you with a live preview while building the map, so you’ll always be able to see what the map will be before it’s published onto the main site. You can embed your map with a shortcode or publish it directly!

We’ll now show you how to use these alternatives to Google Maps on the Jupiter X site and describe the Open Street Map.

How to use Open Street Maps on Jupiter X

You’ll first need to install the OSM plugin in your WordPress dashboard via Plugins > Add New as described in this Jupiter X article.

Then follow the instructions from the OSM article:

1. Create a page or a post where you want to show a map and open it to edit.

2. Find the “WP OSM Plugin shortcode generator” section in the page editor and customize the map to your liking.

3. Below, you’ll see a map that you’ll need to adjust. Click on the place where you want to show a marker on the map. It will generate the map latitude and longitude based on where you placed the marker.

4. The last step is saving your marker and generating the shortcode.

Google Maps Alternatives Last Step

5. You’ll see a shortcode above the button.

6. Copy it to be able to add it to the page in the Elementor editor.

7. Once you’ve copied the shortcode, you can go and edit the page with Elementor.

8. Look for the “Shortcode” widget in the Elementor editor.

Google Maps Alternatives Elementor Editor

9. Drag it to the page and paste the OSM shortcode you copied in the previous step.

10. You’ll see the map as you styled it. Here is the result you’ll see on the frontend:

Google Maps Alternatives Result

Wrapping Up

Open Street Maps and MapBox are fantastic free plugins for placing detailed, interactive maps on your website. If you take the time to read the instructions for the plugins, you’ll find that they are a useful way of enhancing any post or page.

How to Create a Custom Header with Jupiter X like on the Apple website

Custom Header Featured Image

With the Jupiter X theme, you can create a new custom header from scratch using Elementor. It allows you to use all of the Elementor elements to build a highly customized header, which is the first thing visitors will see when they enter your site.

Please note that the Raven plugin must be installed and activated among the bundled plugins before being able to use the Custom Header feature with the free edition of Elementor.

The difference between the old Header Builder in Jupiter 6 and the Custom Elementor Header Builder in Jupiter X

Simply put, the old header builder has limited options and styles, while the custom Elementor header has virtually unlimited customization due to its widgets. This means that you will be able to add any Elementor elements to the header, including buttons, images, headings, icons and much more.

The Header Builder in Jupiter 6 doesn’t have as many elements, meaning the design is simpler:

Custom Header Jupiter 6 Header Builder

If you’re looking for a more specific header design, Elementor will allow you to do just that:

Custom Header Elementor Header Design

What you can do with the Jupiter X Header Builder

With the power of the Elementor editor, you can design a custom header any way you like and be able to complete projects faster than ever before. You can also save a header template and reuse it for another project. With the Header Builder and the Raven plugin, things are going to be much simpler and faster.

Custom Header Template Library

You also have the option of choosing a header from a large selection of designer-made blocks, which are readily available in the Template Library. There, you’ll be able to find templates from Jupiter X and the Elementor Pro version. Customize it any way you like, and give it your own personal touch.

Note that to use the Elementor Pro templates, you’ll have to buy the Elementor Pro version as the Jupiter X theme only provides the free version of Elementor. However, there are several Jupiter X header templates for you to choose from, and the Pro version is not required.

Creating a custom header like on the Apple website

Creating a custom header can be done with ease and in no time at all as code editing is not required.

As an example, we’ll use a header from the Apple website:

Custom Header Apple Website Header

To create a similar header, make sure you have activated the Raven and Elementor plugins.

1. From the menu on the left side in WordPress, click on Templates and go to the Saved Templates menu

Custom Header First Step

2. Click on the Add New button next to the My Templates title.

Custom Header Second Step

3. For the template type, select Header, give your header a name and click on the Create Template button.

Custom Header Choose Template

4. Click on the + icon to add a new section and select the structure as a row without columns.

Custom Header Add New Section

5. Before adding a menu to the section, create it in Appearance > Menus. If you want to have the icon as the homepage instead of just a text as on the Apple site, you will also need to activate the Menu Icons plugin that is bundled in the theme. Then, in Appearance > Menus, create a menu, and select an icon for your homepage item:

Custom Header Create Menu

Select any icon you want. If you want to hide the Home text in the menu and only show an icon, you need to check the Hide Label option and set other settings. Then, click the Select button:

Custom Header Select Icon

6. Add other menu items from your pages or custom links to complete the menu.

7. When it’s saved, go back to your header template in Elementor editor and look for the Navigation Menu element from Raven (the blue one).

Custom Header Navigation Menu

8. Select your menu and enable the Menu Icons option in the Settings tab.

Custom Header Menu Icons

You’ll still see the Home label in the editor, but the icon will be shown on the frontend.

Custom Header Home Icon

9. You can then add a background color for the header. You’ll need to edit the Section settings, and set the background in the Style tab:

Custom Header Set Background Color

Also, style your Navigation Menu via the Style tab in the Navigation Menu settings.

Once you have made the needed changes to the header design, click Publish, and assign the custom header in Appearance > Customize > Header.

custom header result

That’s it! You’ll now be able to see your handcrafted header live on your site. You can easily create as many headers as you like, and spread them across the relevant pages with a single click.

Wrap Up

From now on, you don’t need to change your header.php file or hire a developer to customize the CSS header elements of your site. Jupiter X features make designing a header quick and straightforward. With the bundled plugins like Raven, Menu Icons and the main one Elementor, you’ll be able to create any custom design for your header.

How to Create Custom Search Results Page via Jupiter X

Create Custom Search Results Page via Jupiter X Featured Image

Customizing the search page is one of the biggest concerns for web designers. When it comes to WordPress, you need to modify your search page template in order to customize your search results. But what if you had the ability to customize your search results in a blink of an eye with a set of premade options?

Jupiter X uses a default search results page which mimics post archives. This is controlled in the theme by the jupiterx/lib/templates/fragments/search.php template file. There’s no option to create a custom template for a search results page, but you have the capability to customize the page with some settings.

By default, when users search for something on your website, it displays the results from all of the post types such as posts, pages, portfolios, and products. But, you may want to filter the search results in your website and show the results from just a specific post type like posts or pages.

It’s especially useful in e-commerce websites when you want to show particular products in the search result page. You can even specify how many posts should be shown per page. Let’s see how easy it is to create a custom search results page via Jupiter X.

Create Custom Search Results Page via Jupiter X

1. From your WordPress left menu, go to Jupiter X > Customize.

Create Custom Search Results Page via Jupiter X 1

2. Select the Pages option.

Create Custom Search Results Page via Jupiter X 2

3. Choose Search, then a new window will show up with the Search settings.

Create Custom Search Results Page via Jupiter X 3

By Disabling/Enabling the post types from the Display section, you can customize the search results. You can change the number of posts per page as well.

Create Custom Search Results Page via Jupiter X 4

4. Close the Search settings panel and then Publish the changes.

Editing Search Result Text

  • Using Poedit software

When you check the search results page, you may want to edit or translate some titles like “Search Results for:”, “New Search”, etc.

Create Custom Search Results Page via Jupiter X 5

It can be done with the Poedit software, which is used for translation. You can read more about Poedit in the article “Translating the theme”.

Just create a .po file as described in the linked article above and name it with your language prefix. If you want just to edit the text in English, you need to name the file en_US.po. This way, you’ll be able to edit any Jupiter X text in the English language.

  • Using the child theme

Another way to override default text is to make changes in the child theme. You’ll need to override the functions of the necessary titles.

You can edit the files through your WordPress dashboard in Appearance > Editor.

1. Look for the file search.php in the parent theme jupiterx/lib/templates/fragments directory.

2. Copy the function name, for example, jupiterx_new_search_title_text if you want to change the text “New search” on a search results page.

Create Custom Search Results Page via Jupiter X 6

3. Go to the child theme folder and open the file functions.php and add this code:

add_filter( 'jupiterx_new_search_title_text_output', function() {

   return 'Some new text of yours';

} );

4. Save the file, and you’re done. The changes will be visible on the frontend.

You can do the same with other functions you find in the file. For example, to change the subtitle text, you can use the same code. Just edit the function name to the one you need, e.g. jupiterx_new_search_subtitle_text for the subtitle, and the code will be:

add_filter( 'jupiterx_new_search_subtitle_text_output', function() {

   return 'If you are not happy with the below results, you may try another keyword.';

} );

Adding a Sidebar on a Search Results page

You can also add or remove the sidebar when you create custom search results page via Jupiter X. To do this, you’ll need to edit Sidebar section in Jupiter X > Customize. You can get comprehensive instructions about how to add a sidebar in this article. It will be applied to all pages, but if you want to add or remove it only for the search result page, do the following:

  1. From the WordPress left dashboard, go to Jupiter > Customize.
  2. From the Customizer left dashboard, go to the Sidebar menu.

In the Sidebar popup, there’s an Exceptions setting which allows you to edit the sidebar for different post types, such as Page, Blog, Search, Shop, Archive, and Portfolio. In our case, we’ll select Search as an exception and configure the sidebar settings to the ones you need.

For how to add widgets to sidebar areas, refer to the article “Adding widgets to a sidebar”.

Customizing Your Search Results Page is Quick and Easy with Jupiter X!

In this article, we learned how we to create custom search results page via Jupiter X. To reiterate, you can customize the search to include/exclude different post types and also change the number of items in the result page. We also explained how to change the text using translation plugins and in the end, we overviewed how we can modify the search page using the powerful Jupiter X API.

In general, with the Jupiter X API, there is nothing you can’t customize. In future posts, we will go through some approaches on how you can easily add or edit some sections using Jupiter X API.

Meet Jupiter X v1.0.3! Blog, Menu and Popup Mega Features Are Added!

Is everyone back from the holidays? If you’re back at work like us, I’m going to kick off your year with great news about Jupiter X WordPress theme.

Just in the last days of 2018 when you’re preparing for your new year celebrations, our team was hard at work to deliver the last Jupiter X update release in 2018: Jupiter X v1.0.3.

Let’s see what’s important about it!

Jupiter X v1.0.3 introduces various improvements, additions, and fixes. You can see the detailed update log here, but I’m going to give you a glimpse of the most important feature added in this version:

  • Jet Menu
  • Jet Blog
  • Jet Popup

As you can guess from names, these features are related to menu, blog, and popup. But let’s have a closer look at each to better understand their capabilities.

Build professional blogs with JetBlog

JetBlog is a plugin that allows you to display Blog posts with different layouts using different dynamic modules such as Smart Tiles, Text Tickers, Video Playlists, Smart Posts List.

All these modules can be added on the page built with Elementor (so make sure Elementor plugin is installed).

Using JetBlog, you can:

  • Stylize the content appearance to match the general webpage style
  • Customize the module backgrounds, layouts, and responsiveness
  • Add borders
  • Apply shadows
  • Change typography
  • And more

There are many other options to discover for each of the content modules. Let’s describe every module for more information.

Smart Posts List

Smart Posts List widget displays your posts in the form of neat content blocks. You can change the listing max-width, featured post position, and image size. You can also stylize post excerpts and meta information without ever touching a single line of code.

Smart Post Tiles

Smart Post Tiles widget allows you to add posts to the website’s page in the form of an eye-catching tiles block. It has different style settings, allowing you to add a gap between boxes, create box overlays, and change the content appearance and meta information. It also has six pre-built layouts that will help you showcase your posts in a totally advantageous way.

Text Ticker

Text Ticker widget adds a captivating ticker content module to your website’s page while displaying the recent and most important post titles in order to engage more visitors to read the recent publications.

Video Playlist

Video Playlist widget allows you to add a video playlist to the web page. It’s very helpful if you want to showcase the videos in a stylish way. There are settings that allow changing the style of the thumbnails and scrollbar, as well as the thumbnail numbers or typography.

JetBlog feature will come in very handy for those who want to create a professional-looking blog and news websites. Jet Blog alone gives Jupiter X the capability of a newspaper theme! You can find more information about the JetBlog plugin in their documentation.

Customize your menus with JetMenu

JetMenu is another plugin that lets you create and style up your mega menu. You’ll be able to create content for the menu items and customize its appearance, add menu badges and icons, and change the menu item background.

The plugin works with the Elementor page builder, allowing you to add content to menu items in a drag-and-drop way. You’ll also get Vertical Mega Menu and Mega Menu widgets for Elementor, which lets you add a menu to any page section.

There are also Import and Export settings that allow you to export the JetMenu settings and use them on another site. You should note that in creating a mega menu, you will use the Elementor page builder, and the mega menu will be displayed instead of the submenu items. The default submenu will be disabled as it will be replaced by the Mega Menu content. In effect, you’ll be able to add any Elementor widget to your submenu and create any content you want.

JetMenu is a powerful plugin to customize your menus. Those who run heavy-duty websites with lots of content or e-commerce websites with a lot of product to showcase always make use of menus with rich content. More information about JetMenu plugin can be found in their documentation.

Build effective popups with JetPopup

JetPopup is an add-on for the Elementor page builder. It facilitates the addition of popups to the pages built with Elementor. With JetPopup you’ll be able to create new popups using all widgets available in Elementor. Also, it allows you to add popups to different widgets and its content, set the specific popup triggers, and choose the time when the popup appears on the page.

Preset Popup layouts

Another useful option is to select a preset layout. JetPopup plugin provides a variety of default presets that can help in creating popups with specific layouts:

Popup action button

There is also a Popup Action Button widget in Elementor page editor that allows you to create buttons that add Yes/No action to popup templates.

There are different actions you can choose from:

  • Leave Page
  • Close Popup
  • Link
  • Close Constantly

Usually, such buttons are added below the text blocks with questions like, “Are you sure you want to leave this page?”

Preset Popup Templates

What’s great in JetPopup plugin is you can use pre-designed popups from the Popup Library. You can import them and edit according to your needs with Elementor page builder, in the same way, you edit any other page.

There are a lot of other great features of JetPopup plugin like Mailchimp Form Integration, popup templates Export and Import, and Attaching Popups to any widget in Elementor (when you click on a widget or its button, a popup will appear).

JetPopup is most useful for websites that are designed to generate leads or sell products or services. With popups, you’ll facilitate the conversion process and make your website marketer happy! You can investigate other options deeply by reading the JetPopup documentation.

What’s next?

Well, a lot! There’s a lot happening in Artbees labs and more and more features are going to be added to Jupiter X very soon. Expect many brand new templates are going to be added in 2019. In fact, I’d like to share the insider tip that we are aiming to hit 300 templates count in 2019. So Stay tuned for a year packed with improvements, features, and templates and let us know what you think about the Jupiter X v1.0.3 in the comments.😉

10 Crucial WordPress Maintenance Tasks To Keep Your Site Running Smoothly

If you’re a WordPress beginner who would rather manage your own site than to outsource it to a developer, then this article is for you. We’ll give you preventative measures to help you keep your website from crashing or bugging up. Preventative care in web design is similar to preventative care in health, in that it requires regularity and responsibility, and can save you big bucks in the long run.

Continue reading

Part I: Common Errors During WordPress Installation and How to Fix Them

WordPress has been marketed as being easy-to-use and learn. And in many ways, it is! Though having worked with WordPress themes for many years now, I’ve seen a pattern of common challenges and problems people encounter. Now working on the Support Team at Artbees, I see firsthand every day what roadblocks you, our customers, are facing and I’m here to help!

Continue reading

Custom Contact Form Builders and How They Work With Jupiter WordPress Theme

WordPress is used by millions of people worldwide from across endless sectors and spectrums of experience and use. One easily overlooked and underestimated part almost every website has is the Contact Form. Think about it—usually, in order to communicate directly with your customers, your website needs a contact form–easy enough, right?

Continue reading