Key Sections to Include in Your Creative Website Template

Today, web development in the digital era moves at a rapid pace. The time of plain-text websites ended long ago. And this is for the better. The choices for unique website templates – from interactive web templates to animated web templates – available to the customer is mind-blowing. And this is particularly true to anyone in creative fields who’d like to quickly and easily build up a creative website template.

Optimal website design plays a vital role in the success of a business. Making a good first impression is the most important part, and it directly correlates to user engagement. In this article, we break down this concept and discuss the key sections needed for a creative website template.

When someone first enters your website, there are a couple of essential elements that will grab their attention. This article explains everything that you need to know to make a great first impression.  As you might have noticed by now, our other posts highlight that programming skills are not necessary in creating a creative website template. Furthermore, this becomes even easier if you have a WordPress theme that comes with everything you need like Jupiter X.

Hero Section

The purpose of a header is to convey the core of your business to the visitor.  A carefully designed header design layout must announce the core of your business to the visitor. In designing the layout of the header, you have several choices: a static header image, a header image with text overlay, a slideshow header or a video background header. 

While hero sections vary in terms of layout, for example, a popular use case is the full-screen hero section. However, this is not the rule, and you may also use a half-screen hero section. Jupiter X Creative Studio, Jove and Architecture templates offer different designs of hero sections for a creative website template:

Creative Website Template
Creative Website Template
Creative Website Template

Services

Following heroes, in the Services section, companies or individuals talk about their services or the area of their main specialization. This is probably the most important part of the whole website. In this section, you’ll need to introduce services offered by your company to your visitor. While there are several standards and known design rules about how to design such a section, you are free to change this up since we’re talking about creative website templates. Make it your own by offering something new in design, layout or colors. But let’s not get too carried away: don’t forget to keep the section clean and simple. In other words, anyone viewing your website shouldn’t leave your site with any questions about what you’re offering them and how. 

Let’s go ahead and take a look at several examples of a Services section in Jupiter X Creative Studio and Startup templates.

Creative Website Template
Creative Website Template

About Us

When it comes to the About Us section, professional website designers and developers only provide very little information on the main site. This can be seen as a brief about what the brand is about – it’s better to keep these short and simple on the homepage. In terms of location, it’s good to place the About section either right after the Hero section or below the Services section. However, this is not the rule, and you can also place this info in the Hero section. 

The About Us section should contain a brief description of the company or person, how they started the business, where they are at this moment and what is in their future. Here are some examples from Jupiter X Kore and Jove templates.

Creative Website Template
Creative Website Template

Partner

Partner sections are a vital aspect to your website, as they provide visitors confidence into a company’s dependability. Most Partner sections contain lists or a table of partner logos. While logos are often more readable and recognizable, it’s also essential to include the partner’s full name in addition to their logo. You can also add a link to their website in this section. 

Depending on the number of partners in the section, we might also include a short synopsis of your relationship and how they are partnering with you. You might want to take it a step further, and give each partner their own profile page. Another option is to group the partners by categories; for example partners in design projects, software exchange projects and so on. Check out these examples from Jupiter X Agency and Persephone templates.

Creative Website Template

Clients

The Clients and Partners sections are similar to each other. However, they differ in their purpose. Clients are the most valuable thing as businesses are fully dependent on clients. Similar to the Partners section, we can use a list of logos. We can also add links to a project that your company worked on for a client.  

Along with a list of clients, we may also include testimonials (which is a great addition to any kind of website) from previous clients, which will add more weight to the section and increase user engagement. Below are examples from Jupiter X Agency and Creative Studio templates.

Creative Website Template

Showcase

A Showcase – or commonly known as a Portfolio section – is a great opportunity for you to display your work and case studies to visitors. This section isn’t only for work: you can also use it to show your unique personality, talent and experiences. Portfolio sections are particularly useful in creative fields for photographers, designers, developers and more. 

To get a better idea of how you can put this into action, take a look at some Showcase sections in Jupiter X Creative Studio, Software 2 and Persephone templates.

Photo Album

If you’re a photographer or creative artist, then having a Photo Album section on your site is a must to showcase your art. It’s important that you are able to showcase your work in the most creative way possible, which is why placing raw images in a column simply won’t cut it. That’s where the Photo Album section comes in handy as it offers variation in creatively displaying photos. Take a look at the following examples from Jupiter X:

Full examples can be viewed here:

https://jupiterx.artbees.net/elements/photo-album/

Contact section

On traditional websites, you’ll find important info like the site map, address, link to the website’s privacy policy page in the Footer section by default. This information is usually organized in several columns, and the most popular is a combination of three or four columns. 

Of course, with creative website templates, you’re definitely not bound to this rule, and you might want to leave only important information in the footer. Creative templates are all about the creative approach, which calls for simplicity. In the Contact section, you might want to input only the necessary information such as contact details, social media or several words for engagement. Check out some of samples below from Jupiter X Jove, Agency, Kore and Persephone templates:

Wrapping Up

Incorporating creative websites into your development process all depends on the goals of your site and the needs of your visitors. Developing a creative website is probably the most interesting design work you can come across – but it’s also the most challenging. The main thing to keep in mind is not to get overwhelmed by new ideas. It’s worth mentioning that while adding several moving elements onto a page might look visually appealing, it might be difficult to make them responsive. 

Jupiter X offers a great selection of web templates dedicated to creative agencies or individuals. And the great news? You don’t have to start from scratch, as the readymade templates can be imported with just a few clicks – all you’ll need to do is change the text and images and you’re all good to go!

We hope that this article provides you with all the tools you need to implement creative website templates into your pages. We’d love to hear about your experiences, so please comment in the section below!

Key Elements for Creating an Agency Website

Agency website templates are all about design that is clean and easy-to-understand, which in turn allows visitors to easily access information from the homepage.  In this article, we break down this concept and discuss the key elements in creating an agency website.

You’re in luck! We’ve gone ahead and compiled a list of the most crucial elements needed for an agency website. Plus we included a couple of interesting gems that will allow you to showcase your agency.

And more good news: you don’t have to be a programmer to create a professional-looking agency website. In other words, you won’t have to write a single line of code at any stage of building up an agency website. A major part of the work is done for you already, and every user gets the most out of their preferred site editor. Let’s dig in!

Hero sections

Hero sections are the part of the page that appear as the first element. Your site visitors will notice the hero section the second they enter your site – as you might imagine, hero sections are one of the most important sections for agency websites. Your goal here is to create an eye-catching section that will keep the visitor on your page and invite them to browse other parts of your site.

Usually, the hero section is built with a visually appealing background or side image, brief explanation text of the company’s main goal and sometimes call-to-action buttons.

Jupiter X has several examples of how a hero section can attract visitors. Let’s check them out:

  1. The hero section from the Startup template:
Key Elements for Creating an Agency Website

2. The hero section from the Digital Agency template:

Key Elements for Creating an Agency Website

3. The hero section in the Agency 2 template:

Services section

The services section is another vital part of your agency website that should not be overlooked. In this section, you should display all services offered to your visitors, which means that it should be crystal clear and easy to understand. You can provide a brief explanation of the service and a call-to-action button for more information. These buttons can be used to direct visitors to the single services page.

The popular layout for any services section is divided by several columns. Elements, image elements and tabs can be used to beautifully display the services offered by your agency.

  1. The services section from the Agency 2 template:

2. The services section in the Ruminus template:

3. The services section in the Metis template:

Key Elements for Creating an Agency Website

Portfolio

The portfolio section is where you’ll need to beautifully showcase your recent work. The appearance of this section depends on the type of your business. So, if you have a software agency, then you have to list the most popular programs you’ve completed. If you’re a web design studio, then you might want to list the websites you’ve created. If you’re a music composer, you can list your popular soundtracks and so forth. In other words, depending on what you do and what you want to showcase, the elements used in a portfolio will change accordingly.

In Jupiter X, there are several Elementor widgets to showcase portfolios. These portfolios can be dynamic or they can be assembled with elements that are not dynamic and manually linked to the single portfolio page or to directly linked to the project website.

Let’s take a look at some examples:

  1. The portfolio section in the Euporie template:

2. The portfolio section found in the Metis template:

Key Elements for Creating an Agency Website

3. The portfolio section in the Zethus template:

Recent publications

Recent publications could be treated as a blog section. Of course, what you decide to name this section when creating an agency website is up to you. Depending on what you prefer, you can call this section “recent publications” or a “blog”. The blog section on the main page might contain recent publications from your company’s activity. Nowadays, keeping up with blog posts has become extremely important. So, if you decide to place this section on your main page, then you have to constantly publish your posts.

Whenever I browse a company’s website, I pay attention to the blog section such as the date when they last published a post. So for instance, if it’s been 6 months or a year since they last posted, then I might come to the conclusion that the company is not paying attention to the public or are not serious about keeping up with the latest trends in their industry.

Jupiter X has several Blog widgets to showcase recent publications. You’ll need to use the Posts element and style the look as you want in the element settings.

  1. A recent publication section in the Startup template:
Key Elements for Creating an Agency Website

2. A recent publication section from the Agency template:

Partner section

This section highlights the prominent partners of a company or business, which can go a long way in increasing the value of a brand and could generate extra leads. The power of the partner section shouldn’t be understated. If you have partnered with globally recognized or trusted partners, the chances are that other big companies will want to partner with you as well.

  1. The partner section in the Agency template:

2. The Partner section in the Startup template:

Subscribe section

At some point, subscribers might become your next client or partner, meaning that they are one of the most important parts of your business. While creating an agency website, keep in mind that you’ll definitely want to have a subscription section right on your homepage. This beautifully created section may also attract more visitors, and you might also want to include some info about  what you’re going to do with the list of subscribers. In other words, it’s a good idea to promise that you won’t spam their mailboxes and that they’ll be able to opt-out anytime they want.

  1. The subscribe section in the Startup template:
Key Elements for Creating an Agency Website

Footer anatomy

Footers could play a significant role on your agency website. While designing a footer, you should remember one vital thing: the footer appears on every page, so you’ll need to make it very attractive and informative. A footer is a place for only necessary information, such as contact info, important pages on your site (such as About Us or Pricing) and a subscription box.

  1. The footer section as seen in the Startup template:
Key Elements for Creating an Agency Website

2. The Footer section in the Zethus template:

3. The footer section in the Digital Agency template:

Key Elements for Creating an Agency Website

Conclusion

When you have a powerful tool such as Jupiter X at your disposal, creating an agency website shouldn’t be a complicated process. Jupiter X offers a great selection of web templates dedicated to agencies that have differing profiles. In order to build up an agency website, you don’t have to start from scratch, as the readymade templates can be imported with just a few clicks – all you’ll need to do is change the text and images and you’re set! 

I hope this article will help you create an agency website that suits your needs in no time at all. We’d love to hear about your experiences, so please comment in the section below!

Everything You Need to Know about WordPress Development Workflow

WordPress Development Workflow Featured

It’s no secret that WordPress is the most popular CMS in the world. Due to its popularity, there are a number of tools and services out there you can use to simplify your WordPress development workflow and improve the delivery time of your project. In this blog post, we’re going to take a look at these tools and services, as well as a few methods you can use to better develop websites.

Local or remote development

When it comes to developing WordPress themes, you’ll need to set up a development environment suited to WordPress. To get started, you’ll need to choose a decent hosting environment for your project, which can be a local environment or a live website. Both have their advantages and disadvantages as well as different methods and tools. Let’s take a closer look.

Local environment – Ideally, the web development for any project always flows in one direction: local → staging → production. This is a proven method for avoiding collisions. All core, plugin and theme updates are first done locally, then tested in staging and finally deployed to production.

A local environment or local server is a web server that runs on a personal computer and is used for development. In other words, it’s not used to make the website available for others on the internet.

Benefits of a local environment:

  • Themes and plugins testing: In your local environment, you can try out as many themes and plugin combinations as you want without risking taking your live site out due to incompatibilities.
  • Safe updates: With a local environment, you can update WordPress core and components to see if there are any problems before applying the updates to your live site.
  • No internet needed to work: With the WordPress site on your computer, you can work on it without being connected to the internet. This means that you can get work done even if there is no WiFi.
  • Best performance: Since site performance is not limited by an online connection, local sites usually run much faster, which makes for a better WordPress development workflow.
  • Low or no cost: You can set everything up with free software and eliminate the need for a paid staging area.

Furthermore, there is a variety of services that you can make use of:

1. Local by Flywheel – This is the easiest way to install and deploy your website from local to remote.

WordPress Development Workflow Flywheel

2. MAMP – This stands for Macintosh, Apache, MySQL, and PHP and allows you to set up a localhost environment on OS X. A beta version is also available for Windows. MAMP is free, but there’s also a premium version available with the ability to set up any number of virtual servers, as well as the option to install WordPress automatically.

WordPress Development Workflow Mamp

3. XAMPP – This is a free and open-source localhost PHP development environment available for Windows, OS X, and Linux. The Apache Friends website includes a fantastic forum for users who run into trouble and need some help.

4. DesktopServer – DesktopServer is extremely easy to set up as it can take as little as five minutes to get WordPress up and running on your local machine. Unfortunately, if you want to use a multisite setup then you’ll have to upgrade to the premium version.

5. WampServer – WampServer is a popular Windows web development environment that allows you to create web applications with Apache2, PHP and MySQL.

The above five services don’t make up a comprehensive list but instead are the most popular. Of course, other local services exist on the market that enables you to work on a project in the local environment.

Remote environment – The remote environment is made up of hosting providers. In this case, if you’re working directly on a live website, any changes you make are published immediately (that is, as long as you’re not using Staging). This setup is the easiest to maintain, as new configuration options or software need to be deployed in one place only.

Hosting companies today offer the best technologies ever, starting from syncing in multiple servers to CLI technology. There is also dedicated WordPress hosting that is focused only on WordPress website hosting and their infrastructure is specially optimized to host WordPress CMS. We are not going to review hosting companies because there are thousands of reviews on the net.

Choosing a starter theme?

When building a WordPress site, one of the most significant decisions you’ll make is which theme to use. There is a plethora of themes available for you to choose from – each of which has its own pros and cons. This post will break down and compare two major theme types, frameworks and starter themes.

What exactly is a WordPress starter theme? It’s a blank theme with minimal design. It comes with either a basic layout or without a layout at all. Usually, such themes come with the most commonly used templates in a WordPress theme.

In WordPress starter themes, you’ll find all the required template files, including the basic CSS styles and functionalities that are required to create a WordPress theme. These themes come with the code to help you display posts, comments, and archive pages, with minimum or no styling. This saves you the effort of creating everything from scratch.

With these themes, developers can start adding their own styles to create an entirely new and fresh theme. These differ from the parent themes that usually completely style WordPress themes, which can be directly installed and used on live websites. A starter theme or child theme can be used to create a parent theme. As discussed, starter themes come with no styling, but you can add those.

Let’s check some starter themes to see what they offer:

Underscores – Underscores is one of the most popular WordPress starter themes. It comes with an ultra-minimal CSS, which means that you’re free to write your own CSS stylesheets when creating your WordPress theme as there is less stuff to bother the developer.

A large number of WordPress developers have already used Underscore to create both free and premium WordPress themes. The majority of the codebase in _s is well-optimized with comments on nearly every function and call. It is one of the best options for SASS users as it comes with a SASS configuration as well.

Sage – Sage – formerly known as Roots – is a more feature-heavy starter theme that focuses on offering a few different capabilities from the start. It ships with Gulp/Bower supporting a “modern WordPress development workflow,” which means that you can quickly compile SASS into the normal CSS.

This means that you are able to spot any possible bugs or mistakes as you make them as opposed to writing a ton of code, then compiling and testing later, only to struggle to find out what’s breaking your site when everything is put together the way it will be when it goes live. (With the CSS compiled and JS minified into a single file etc.)

Genesis – Genesis is a long-time staple of the WordPress general user – and more importantly – the developer community. It’s a premium framework made for working with child themes.

Genesis has a big community of developers working with it, which means that not only are there lots of people you can connect with and learn from (with lots of tutorials available online), there are also a ton of genesis specific plugins.

If you’re looking to work with a trusted framework, Genesis is the right choice for you. While Genesis is not free, there is no developer option and the basic price ($59.99) includes unlimited domains, even if you’re developing sites for clients.

Bones – This is a bare-bones (no pun intended) starter theme that is perfect for a starting developer. The well-documented CSS makes it easy for beginners to go in and make significant changes to mold the theme into their own design.

Bones is a great choice if you’re a beginner to WordPress but already know some CSS/HTML and can’t wait to get your hands dirty.

So, this leads us to a question: What is the Best WordPress Starter Theme?

There’s no one theme that is universally the best choice for everyone. While there are a lot of great starter themes and frameworks out there, these stand out from the pack in many ways. If you’ve picked a starter theme or framework to work with, please let us know in the comments. We would also love to hear about your progress as a WP developer.

Best plugins for development

WordPress plugins for developers are rated highly by developers since they help ease their WordPress development workflow. I’ve done the research (so you don’t have to!) and found that the following 10 WordPress plugins stand out as the most useful plugins for developers.

Theme Check – This plugin checks your new theme against the current coding standards and all the requirements for the theme to be functional. If you want to develop themes that are up to WordPress standards, this plugin is a must-have. It helps you keep up with the WordPress coding standards without worrying about likely mistakes in your code.

Debug Bar – This adds an admin bar to your WordPress admin, providing a central location for debugging. I like this plugin since I can tell from a single click the total queries, total queried time and memory usage – all of which is absolutely useful for debugging. This plugin also shows you PHP warnings and notices, but you need to ensure your WordPress error reporting is enabled in wp-config.php

Query Monitor – This allows for the debugging of database queries, API request and AJAX called used to generate theme pages and theme functionality.

Monster Widget – The Monster Widget consolidates the core WordPress widgets into a single widget, which allows you to test widgets styling and functionality in your theme.

Developer – This is the ultimate plugin for testing your WordPress development environment. This plugin checks and ensures that your development environment is configured correctly including the plugins, constants and other settings.

What The File – This plugin allows you to see the files being used to render a particular page. The best thing about this plugin is that when you’re on the frontend of the page on the WordPress bar, you can actually see the template files list used for building this page. You can also click on the files, and you’ll be directed to the file editor page.

Version Control – No more cowboy coding

Do you know what cowboy coding means? Well, if you don’t, then let me tell you. Cowboy coding is when you or your team download a file from the FTP and then upload the changed files and refreshes the page in the hope to see the changes. This is not only inefficient but dangerous!

This WordPress version control helps you track changes to your WordPress site to monitor what’s happening and roll back those changes if needed. Those changes could be simple tweaks like edits to a post or more technical changes like edits to your site’s codebase. Something like a demo version of version control is a built-in WordPress feature that you may know as a WordPress revision feature.

WordPress Development Workflow Feature

This feature enables you to compare the current state of the post to the previous version. This is how version control works. Aside from this, you can also implement a third-party version control system in your project which will highly improve control over your project. For starters, let’s explore why you would use version control and what it can offer in improving your WordPress development workflow.

First of all, version control is used to protect you from unexpected changes. Did you make changes that messed something up? No worries, you can restore your site with a few clicks. The second major benefit of version control is working with a team. Your work will be more efficient, and you’ll be able to control everything everywhere. Moreover, if you are using branching and merging, you’ll be able to copy part of your site’s code to work on and then “merge” that code back into your live site when it’s ready for production.

Best use cases for WordPress Version Control

There are several methods and tools to use in WordPress for version controlling. I’ve gone ahead and listed the best below:

Git – It’s a little more technical, but it’s one of the most popular version control systems. Git is used by all types of developers. If you want to use Git, you have to use hosted repositories like Github, Bitbucket or Gitlab and then deploy your site from that repository to your live server.
To automate the deployment of your code onto the live server, you have several options at your disposal. WP Pusher and Revisr are some of the popular tolls.

VersionPress is an open-source project that aims to “bring the full power of Git to WordPress” by version controlling both your site’s files and database. Though, it also relies on Git. The unique thing about VersionPress is that it tracks every little change and does it in natural human language.

For example, instead of just logging a change to your database, VersionPress will tell you that someone “updated the Hello World!” post. Obviously, this makes Git a lot more useful and accessible in the context of a WordPress website.

WordPress Development Workflow VersionPress

WP Rollback – This only works for themes and plugins from WordPress.org, which means that you can roll back the previous version of your theme or plugins that were downloaded from the WordPress repository. Let’s say that your plugin update breaks something that you can’t fix immediately. (First of all, you have to use the staging site for this) WP Rollback can be used to roll back to the previous version of the plugin.

The plugin adds a rollback button to any WordPress theme or plugin, which makes the rollback feature very easy to operate.

WordPress Development Workflow Final

Final thoughts

The methods and tools that we reviewed in this post – plus dozens of others – can be found on the internet, but we compiled a list of the most popular ones to help dramatically improve your WordPress development workflow.

The tools used in developing your projects might change from one to another, however certain methods and approaches should be kept the same – such as version control in any situation and always backing up before updating your site.

If you enjoyed this article, please share with us the tools and methods that you are using to develop your projects. We’d love to hear from you!

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

How to Build a WordPress Multisite with Jupiter X

Build a WordPress Multisite with Jupiter X Featured

If you’re the owner of several WordPress websites that share common aspects such as themes and plugins, then you might wonder if there’s a more efficient way of managing them as a single install. WordPress Multisite might just be the exact thing you’re searching for. Since version 3.0 came out, WordPress has offered the multisite feature. Multisite allows users to create a network of sites on a single WordPress installation – which ultimately means that you can run as many sites as you like. Read this article in its entirety to find out how to build a WordPress Multisite with Jupiter X.

Advantages of WordPress Multisite

  • Ability to use the same plugins on your project (e.g. performance, security, SEO).
  • Flexibility to use one theme as a parent theme on multiple sites.
  • Ability to share similar media files for your organization’s branch sites.
  • Saves time on updates to your sites.
  • Freedom to experiment with new ideas while developing client sites on a temporary domain.
  • Community networks

Let’s take a look at these benefits in more detail.

Disadvantages of WordPress Multisite

The things that make Multisite a great sharer also contribute to its flaws.

  • Migrations. Because the network uses one database and stores data from each site in a single database, migration is a bit difficult and complex.
  • Users. You can’t separate users, meaning that each one will continue having access to the entire network. Also, you cannot create separate users for FTP uploads because only one folder is used for all the sites.
  • Plugins. You aren’t able to install one plugin for only one site, once the network administrator installs the plugin, it will immediately be available for all the sites in the network. Also, if you delete a plugin, all sites using that plugin will be affected.

So then, this begs the question: Who needs a WordPress multisite network?

Enable a Multisite Network in WordPress

By default, the Multisite Network feature is built-in with each WordPress installation. All you need to do is set up and activate it.

To do this, you’ll need access to the files in your WordPress installation. Use the FTP browser or file browser in your hosting to edit files. This process requires access to two files .htaccess and wp-config.php – both of which are in the base folder of your WordPress installation. Make a backup of both of those before you start. (It’s also a good idea to backup your entire site too.)

To start, open the wp-config.php file in your code editor and add the following code just before the

/* That’s all, stop editing! Happy blogging. */ 

/* Enable Multisite */
 define( 'WP_ALLOW_MULTISITE', true );

Once you’ve done that, save your changes to the server. This code simply enables the multisite feature and once enabled, you will still need to set up the multisite network

P.s. don’t forget to create a complete backup of your WordPress site.

Setting Up WordPress Multisite Network

Now that we have successfully enabled multisite, it’s time to configure the Network settings. Head over to the Tools » Network Setup page to configure your multisite network.

You’ll then see a screen that asks how you want your network to be set up and whether or not you want to use subdomains or subdirectories.

Subdirectories

Select which one you want to use, enter the title and admin email address for your network in the Network Title and Network Admin Email fields, and click the Install button.

After this, you’ll be taken to the Network Setup screen. Here, you’ll find some codes with instructions where to paste them. One is for the wp-config.php file and one for the .htaccess file.

How to build WordPress Multisite with Jupiter X Network Setup

Please note: you’ll get different code from this site because we have different sites 🙂

Once you make changes to the files, go back to your site admin. Click the link on the Network Setup screen, and log into your network. Use your default login credentials you used before.

Now, you’ll find that your admin changed a little bit, and you’ll see new items in the toolbar at the top called My Sites and the second one called Network.

My sites used to manage your sites. Among these settings, not only can you add or delete but you can also deactivate and archive sites.
Network – used for configuration and overall network setup, user roles, plugins and theme management, and their updates.

And that’s it! You’ve successfully activated the WordPress network, and you’re now ready to add your new sites in the network.

Building a WordPress Multisite in Jupiter X

As we now know all the advantages and disadvantages of this feature, we should think about how to use WordPress Multisite with Jupiter X. There might be several use cases, but let’s take a look at the most interesting one.

Let’s say you are a freelancer who travels a lot and loves mountain biking. You want to create a site or sites where all these interests will be published according to their styles.

This is what our task looks like:

Freelance site. This site will have a solid looking design, complete with your portfolios and the services you provide. You’ll also want to list all your clients and their testimonials.
Travel site. Since you’re traveling quite a bit and have accumulated good experiences that you want to share with the world, the site must contain a gallery, trips, places you’ve, as well as your future plans.
Mountain Bike. Since you’re really into mountain biking, you’ll want this website to have a very sporty style. If you’re participating in various races, then you’ll also want to have race events and stylish blog posts where you will publish your previous and future adventures.

Having these sites under one hood where you’ll be able to manage everything from one dashboard sounds like a great plan. Now, let’s take a look at what Jupiter X can offer us and how it can help us achieve our goal.

Currently, Jupiter X offers 250 premade templates that are sorted into 16 categories. You’ll find at least one type of business in this extensive list of premade templates. Now, let’s check what we got for our situation.

The freelance-style website under the creative/portfolio category has 33 premade demos:

How to build a WordPress Multisite with Jupiter X Premade Demos

I will choose Creative Studio, which has a clear design, pleasant typography and colors match – all of which I’d like to incorporate into my website:

How to build a WordPress Multisite with Jupiter X Creative Studio

Travel site – There are 9 templates in this category:

How to build a WordPress Multisite with Jupiter X Category

And my favorite is Adventure since it closely resembles my personality and active lifestyle:

Lastly, for my mountain bike hobby, I’ll go ahead and choose the Mountain Bike template from the 10 available demos. It has everything needed on a hobby site and the design exactly what I want.

Now, as we already know what we want, it’s time to roll up our sleeves and get our hands dirty. This is what our task looks like for now:

  1. Install WordPress.
  2. Setup a WordPress network site.
  3. Create three domains and name them based on our goal (For example Freelancer, Traveler, Biker).
  4. Install Jupiter X and all the necessary plugins.
  5. Install templates for each domain.
  6. That’s it – now it’s your turn to make the final changes to them. The Jupiter X templates are almost ready. All you’ll need to change are the text and images. Everything else has already been taken care of (Thanks to the design team behind Jupiter X).

Wrapping Up

WordPress Multisite is a great feature when used correctly. While it has it up and downsides, you can use it for your personal or business sites, to host client or community sites or to run a WordPress.com-like system of blogs that people create themselves.

In this blog post, we took a deep dive into how you can set up, enable and build WordPress Multisite with Jupiter X quickly and efficiently so you can begin managing several sites at once. We’d love to hear more about your thoughts and experiences in the comment section below!

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

Creating a Fantastic Custom Login Page with Jupiter X

Custom Login Page with Jupiter X Featured

While the WordPress login page is its most recognizable page – keeping its default design is not ideal. You might be thinking “why not”? We’ve gone ahead and detailed why you should create a custom login page with Jupiter X.

Why would you need a custom WordPress login page in the first place?

  1. Traffic. The more traffic you get on your site, the more problematic it becomes to manage spammers, malicious scripts and bots. A custom login page can filter all suspicious activities and make your site more secure.
  2. Branding. There’s nothing wrong with the default styling of the WordPress login page in and of itself. But if you’re an established brand, you’ll definitely want to brand every inch of your website, including the login page. Displaying your logo to users or clients is surely something they will appreciate.
  3. Multi-user site. This is fine if you have a small blog and you are the only one who uses the login page. But if you have a membership website where users can register and login, a custom login page offers a better user experience.

Choosing the right plugin to create a custom login page

There are 2 ways to create a custom login page:

  1. Using third-party plugins
  2. The manual way

Both have their pros and cons. For instance, it’s easier to use third-party plugins to create a custom login page as it can be done in a matter of minutes without writing a single line of code. However, going the manual route will give you more control of the appearance and features. It also requires good coding skills.

In this example, we’ll choose the easy way: a third-party plugin to create a fabulous custom login page for our project.

There are several plugins that can be used to create custom login pages in Jupiter X. From drag and drop to custom-made templates, from simple to complex, you can find plugins for all tastes and purposes these days.

For our example, we’ll use Clean Login, which is a plugin that offers shortcodes allowing you to embed your form anywhere on your site, including posts, pages, sidebar widgets or widgetized footer areas.

A few other benefits of this plugin include the following:

  • Add your login form in the frontend easily (page or post), as well as the registration and the lost password form.
  • If the user is logged in, they will see a custom profile and will be able to edit his/her data in another frontend form.
  • Only one shortcode per form, which means that you’ll only need to create a page or post and apply this shortcode to create each form you want.

Designing this page for the custom login page with Jupiter X

This is the most interesting part of the post as designing a page is always challenging. But if you have a good design taste, you won’t ever fail. For our login page, we’ll use a simple, clean design. This is how it’ll appear:

Custom Login Page with Jupiter X Login

We are using 2 columns: one with 40% width and second with 60% width. In the first column we have:

  1. Image widget – Logo with an absolute position at the top
  2. Spacer widget – Adds space between the logo and login form
  3. Shortcode widget – Clean login shortcode: [clean-login]
  4. Jupiter X social network widget – Social networks at the bottom
  5. HTML widget – We use this widget for custom CSS, and this CSS code to fix the styling of the form and page:
<style>
.cleanlogin-container * {font-family: "Playfair Display", Sans-serif;}
.cleanlogin-field-remember {float: left;text-align: left;}
</style>

While in the second column, we have only a spacer element and column that has a beautiful background image.

This is how the page looks from the backend:

Custom Login Page with Jupiter X Backend

There is a simpler way to speed up the page creation process. For example, instead of designing a page from scratch, you can use page templates or predesigned blocks from Elementor. This feature will speed up your design process, and all you’ll need to do is to place a login shortcode in the predesigned page:

Wrapping up

There are many ways to build a fantastic login page with Jupiter X using different tools and scenarios. However, the Clean Plugin is the simplest and does not require adding a heavy plugin to your project. Another benefit of this plugin and Jupiter X is that you can use a shortcode in the header builder in the popup window attached to the header or footer menu (The plugin offers the option to redirect the user after a successful login).

Another benefit of Jupiter X is that you can display various menus for different user roles. For example, after successfully logging in, you have access to different menus and options, while a user who has not logged in will see something else.

Please do let us know about your experiences and comment in the section below! 😉

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.