Making sure your WordPress website is mobile ready has never been more critical. After all, mobile users now make up the majority of online traffic. That means you have to do everything in your power to make sure their experience is as good as possible.

Thanks to services such as AppPresser, you can now create simple apps for your WordPress website, even if you don’t have a development background. In this article, we’ll teach you how to use the platform to develop a mobile app. However, let’s firstly talk about mobile apps, the future of web browsing, and what AppPresser can offer you.

Why Mobile Apps Are the Future of Web Browsing

Given the statistics, you’re likely reading this from a mobile device – and it may even be the way you mostly interact with the web these days. After all, most of us will pull out our smartphones every chance we get, including to surf the web.

The Elegant Themes blog's mobile version.

Making your site responsive doesn’t mean you have to sacrifice style to make it usable.

As a site owner, the simplest way to cater to smart device users is to optimize your site for smaller viewports. That way, users will have a consistent experience regardless of the device they’re using. However, there’s also another option – albeit one involving a bit more work – and that’s creating an app for your site.

Apps have a few distinct advantages over regular mobile-friendly websites:

  1. They offer readers a constant reminder of your site. Having a dedicated app on their device might lead some users to think about checking for new content. You could also net a higher visiting frequency than usual.
  2. You can include dedicated, mobile-specific features. A lot of apps include interesting features such as social logins and push notifications. Sure, it’s also possible to implement these on a regular site, but they feel more natural as part of an app.
  3. It looks professional. Having an app for your website simply makes it look professional. As long as you offer a modern, stable offering, the chances are that users will walk away feeling impressed.

Of course, creating an app for your website doesn’t mean you should forego making it mobile-friendly. Think about it as a complementary measure to maximize its exposure. The best part is, the app creation process isn’t that complicated, thanks to some interesting new services.

An Introduction to AppPresser

The AppPresser homepage.

AppPresser is a service that enables you to take your existing WordPress website and turn it into a modern-looking mobile app. Using the platform, you can add any of your existing pages, create menus, and benefit from advanced features including push notifications to make your app look more professional.

The best part is, using the service is remarkably simple. In fact, it’s entirely possible to get a working (and stylish) app up and running in a matter of hours using AppPresser.

You’ll likely want to opt for the $19 per month starter plan upfront, which supports a single app. If you need more than that (or you’re planning on monetizing your app), there are other tiers available.

Key Features:

  • Lets you create mobile apps for Android and iOS.
  • Includes a WordPress theme and plugin that enables you to access advanced app features.
  • Offers social login and sharing options.

Price: $19 per month | More Information

How to Turn Your Divi Site into a Mobile App with AppPresser

Before we dive into the tutorial, you’ll need to sign up for an account on both AppPresser – which, as we mentioned earlier, is a paid service – and Phonegap (which you’ll need to use for the last step).

After signing up to the former, you’ll get an email that provides access to the AppPresser plugin and its complementary theme (which can’t be found elsewhere).

The AppPresser plugin.

As for the theme, don’t worry – you don’t need to activate it. It only needs to be installed to enable the AppPresser plugin and web app to access data, and it’ll only show up for your mobile app. If you’re Divi user, using AppPresser’s theme and plugin won’t affect your installation.

Once you’ve installed and activated the AppPresser plugin, then uploaded its theme (but not activated it), move onto step one!

Step #1: Create a New App and Customize Its Style

To kick things off, you’ll need to log into your AppPresser account using the same credentials you signed up with. The service will prompt you to create a new app, so once you’ve added a title, click Create App:

Creating a new app.

Next, you’ll need to link your website to your app before you start customizing it. To do that, click the General tab on your AppPresser dashboard and look for the section that reads API SETTINGS:

Your app's API settings.

Copy both your site slug and app ID, then make your way to the AppPresser tab on your WordPress dashboard. You’ll find two corresponding fields, so paste your data there, then save the changes:

Adding your API settings to WordPress.

With that out of the way, you can get to work on your app’s customization. Return to your AppPresser dashboard, navigate to Customize, then click on the Customize and Build App button:

The Customize and Build Your App option.

The next screen should look familiar as it’s modeled after the WordPress live customizer, and you’ll also see a mockup of a mobile device displaying a prototype of your app. Once we’re finished, you’ll be able to download a fully working version of it.

The AppPresser customizer.

Over the next few steps, we’ll cover the most critical sections in the customizer, but for now let’s focus on the Color tab. Here you’ll find multiple options to change your app’s colors and explanations for what each of them does:

Changing your app's colors.

Once you’ve tweaked your app’s color palette and are happy with the results, it’s time to look at your menu.

Step #2: Change Your App’s Menu

Every AppPresser app starts off with the same default menu: A home screen, intro and About pages, and a link to the service’s home page. To replace them, you’ll need to go into the Menus tab within your customizer and click on the App Menu option:

The default AppPresser app menu.

On the next screen, you can choose elements from the left-hand menu. In this case, the Home, Intro, and About buttons all lead you to custom pages, and you can choose whether to delete their menu items now by clicking the Remove option:

Removing an item from your menu.

You can also keep those menu items and customize their respective pages (more of which in a minute). For now, remove any menu item you don’t want and use the Add Items option to fill your menu with other pages. For this, you’ll be able to choose either existing WordPress pages, posts, or custom ones (built using AppPresser)…

Your options for new menu items.

…and clicking on the WordPress/External Links button will give you the option to include a link to one of your WordPress site’s pages:

Adding a WordPress page to your menu.

Once your menu is populated (and the AppPresser theme is installed), the app will be able to ‘export’ your site’s content and display it automatically:

An example of an imported WordPress page.

In less than a minute, you just added a new mobile-ready page to your app. Repeat the process as necessary for your other pages, before looking at setting up custom ones.

Step #3: Add Custom Pages to Your App

To set up custom pages, head to the appropriate tab in the customizer. As with your standard menu, you’ll find three existing pages: Home, Intro, and About. At this stage, you can choose to repurpose each of them for your own app, or just ignore them and create new pages:

The default AppPresser custom pages.

Clicking on the Add New Page button will give you two options: using custom HTML to create your new page…

The custom HTML option.

…or choosing from one of AppPresser’s pre-built styles, which includes a list format and card layout:

AppPresser's pre-built custom page layouts.

To set up either of them, you’ll need to create custom list pages using the WordPress API. Then, just paste the link to your new page on the field right below either of the app’s built-in styles:

Adding the URL to your custom list.

When you’re done tinkering with your custom pages, it’s time to wrap things up by tweaking a few extra settings for your app.

Step #4: Customize Your App’s Settings

At this stage, you should have a working app – at least within the customizer – but one that still sports the AppPresser icon and logo. To replace them, navigate to the Settings tab within the customizer:

The Customizer's Settings tab.

Here, you can indicate which menus you want your app to use. For now, we recommend sticking with the one you created earlier unless you want to set up additional ones.

If you keep scrolling down, you’ll see the options to change your app’s name, its description, and your author info. Fill these fields out if necessary, then continue scrolling until you reach the icon and splash image sections:

Replacing your app's icon and portrait.

You’ll need to upload PNG files here for each of the available options. Once done, your icon will appear above your main menu, and your splash screens will display when your app is loaded.

Keep in mind that AppPresser includes some information on the size of the images you should upload, so you should adhere to them unless you want your images to look distorted. When you’re done here, it’s time to finally get your app up and running.

What to Do Once Your App Is Ready to Launch

To finish building your app, you’ll need to go into the Build and Preview section within the customizer. There, you’ll see an option to enter your Phonegap authentication token. For the uninitiated, Phonegap is a framework that you’ll need to use to get your app onto a device, or submit it to stores.

After updating your token, you’ll see an option to compile your app, which the service will do for you. Then, it’s just a matter of submitting it to either the Android and iOS stores (or both), waiting for approval, and linking to them from your regular website.

If you’re thinking about distributing your app directly from your site, we recommend against it – mainly for security reasons. What’s more, users may not feel safe downloading apps that haven’t been approved by either service, so your efforts may go to waste if you skip the submission step. Of course, WordPress plugins such as Easy Digital Downloads may fit the bill, but the same considerations above should still apply.

Conclusion

Building an app for your WordPress website may sound like overkill, but it can actually be a smart idea. After all, services such as AppPresser have made it easier than ever. What’s more, an app might be just what you need to engage your mobile users further thanks to features such as push notifications.

In this post, we’ve shown you shown you how to turn your Divi site in a mobile app using AppPresser. Let’s quickly recap the steps:

  1. Create a new app and customize its style.
  2. Change your app’s menu.
  3. Add custom pages to your app.
  4. Customize your app’s settings.

Do you have any questions about using AppPresser to create mobile apps for Divi? Ask away in the comments section below!

Article thumbnail image by 31moonlight31 / shutterstock.com

The post How to Turn Your Divi Site into a Mobile App With AppPresser appeared first on Elegant Themes Blog.

Powered by WPeMatico