Jupiter X v1.10: Custom Single Page, Archive Custom Template, Custom Title Bar and More

Jupiter X v1.10 Featured

Recently we released Jupiter X v1.10. This new version pieces together some very exciting and frequently requested features and additions to Jupiter X. In this post, I’m going to outline the 4 most important features added in the version.

Custom Single Pages

Creating custom single pages was not previously possible in Jupiter X without Elementor Pro. It’s needed when you want to define a different standard design for a single page of your post type. It can help save a lot of time redoing a design for every post and also completely customize it for you or your clients’ needs and preferences.

Custom Single Pages for Blog, Portfolios & Pages

Before, you had to choose from readymade templates available in Jupiter X in order to add custom single pages to your blog and portfolio posts. But now, you can design your very own templates with Elementor and assign it to your portfolio and single pages.

After updating to Jupiter X v1.10, you’ll see a new tab labeled Single in the saved templates section where you can add and manage the single page templates. You can click on the Add New button and just like a regular header, page or section templates, you’ll be taken to the Elementor editing space to build your page whichever way you want and save it.

Jupiter X v1.10 Blog Single

Once saved, you can go to Customizer and simply assign the template you just built to all new portfolio single pages.

By using the same method, you can also create a standard design to apply to your page templates. Imagine that when your client requires specific elements on every page, you’ll be able to create a template including those elements to load every time they create a new page.

Learn more about new custom single pages in the knowledge base.

Custom Single Page for Custom Post Types

You can now define custom single pages for your custom post types as well. Imagine you’re running a hotel-listing website with tons of rooms you constantly manage, add and remove. You’ll need a custom post type with a custom single page design that includes only the content you require (e.g. room types, sleeps, amenities, options, price, etc.)

Jupiter X v1.10 Post Single

Or say you are creating a talent-listing website for a headhunting company with a large database of freelancers. They need a custom talent post type with a custom single page that includes the talents’ information such as personal information, location, bio, experience, skills, etc. with a vertical portrait next to this info. You’ll need a custom layout that you cannot find in the readymade blog single styles in Jupiter X.

In Jupiter X v1.10, you can simply create a custom single page for your custom post type and make it standard for all future posts in that post type.

Learn more about new custom single pages for custom post types in the knowledge base.

Dynamic Content in Custom Post Types

The attributes you need to include in the single pages for hotel and outsourcing website examples are custom data sets that are not normally included in a blog or portfolio single page. In order to add all this info, we need to do two things:

  • Inside our custom post type, define and add a set of dynamic content fields for the custom attributes we need (rooms, price, skills, bio, etc.). These fields will appear inside the post meta section in the single page in the backend. The tenant will set the value for each attribute and publish the post
  • The attributes along with the values set by the tenant for each should appear in the frontend. So we should add each dynamic data set we require inside the blog single page for the custom post type as well.
Jupiter X v1.10 Custom Elements

All this is now possible with Jupiter X. Thanks to the new Dynamic Fields Mapping feature, you can add a variety of standard elements to your custom single page such as heading, image, button, video, text editor, as well as many dynamic elements such as post content, post comments and post meta.

Custom Archive Page Template

If you want a custom design for your blog, portfolio or any other post type archive page, you are now able to do it without any other plugin such as Elementor Pro. Thanks to the new Archive Custom Templates in Customizer, you can create, edit and assign custom archive page templates for any post type.

Using the advanced dynamic tools, you can add both the blog loop wherever you want in the custom archive page template as well as any other dynamic content to your template:

  • Heading Element
  • Image Element
  • Video Element
  • Button Element
  • Text Editor Element
  • Photo Roller Element
  • Posts Element
  • Posts Carousel Element

Assigning a custom archive page for blog and portfolio is easy with Customizer. If you need to assign the archive page template to your custom post type, simply enable your desired custom post type from Jupiter X > Control Panel> Settings and check the Customizer settings again. You will see the post type name in your Customizer menu, and it will give you the ability to assign custom templates to it.

Learn more about new custom archive pages in the knowledge base.

Custom Title Bar Template

With Jupiter X, it was previously possible to customize the comprising elements of the Title Bar such as the container, title, subtitle, breadcrumb or enable/disable the title bar for different post types. However, it was not possible to create a custom design from the ground up and set it as the standard page title. Now it’s possible.

In Jupiter X v1.10, you can use Customizer to design a custom title bar just like a page section in Elementor and assign it as your page title. With the help of the newly added Breadcrumbs element to the Raven plugin, it’s also possible to choose between Jupiter X default Breadcrumbs, YOAST Breadcrumbs, and NavXT Breadcrumbs.

Would you like me to give you an example of this feature? Though so. Imagine you wanted to add a dynamic image to the background of your title bar so each page could have its own title bar background image. Similar to any other dynamic templating feature, you can now assign a dynamic background image element to your page title container section and set it to fetch the source from the featured image. Isn’t that cool?

Learn more about the new custom title bar template in the knowledge base.

Global Typography Option for Post Content

This is a feature that has been frequently asked about by heavy-duty bloggers and writers. In Jupiter X Customizer, you were able to customize the look of many things in your blog single page including the featured image, title, meta, tag, social shares and more – but the main body text was not one of them. If you weren’t using Elementor to write blog posts, there was no way you could define standard formatting for the main body text in your blog single pages.

With the latest update, you’ll have a Post Content section among your blog single style tab in Customizer where you can define all the formatting attributes for your body text in the blog single page. This is not limited only to your blog post content, as you can do the same thing for a portfolio and any custom post type single pages as well.

Learn more about the new post content formatting in the knowledge base.

What’s Next!

What’s next is great projects made by great people for great people! We believe the newly added features – particularly the custom single pages and the new dynamic content in custom post types – adds even more capabilities to Jupiter X as a WordPress website builder. Dynamic content alone opens a whole new chapter on the types of websites that can be created by Jupiter X. Just one example is various listing websites!

In the near future, we’ll publish blog posts to exclusively cover each of these features more in-depth. Until then, we’d like to know your feedback about Jupiter X v1.10 and if you think its features might come in handy for your next Jupiter X project. Let us know in the comments and stay tuned for related blog posts soon 😉

subscribe

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

Web Designer Tricks to Deliver Website Projects Faster

Deliver Website Projects Faster Featured
Deliver Website Projects Faster Featured

Freelance web developers and web design agencies completely understand what it means to have a hasty client and to work harder to deliver website projects faster. Clients usually want their projects to be done in a blink of an eye in addition to all the practical aspects such as elegance, speed, content structure, navigation, ease of management, SEO, security and more. Of course, most of the time, they want all this on a low budget. It gets beautiful, isn’t it?

So, if you were a freelance web developer or a web design company in New York or any other city, what would you do in this situation? Possible options include the following:

  • Increase the project delivery time which causes more costs for both you and the client.
  • Increase the cost and try to hire some other developers to implement and develop the design as fast as possible.
  • Simply say “no, I can’t accept this project.”
  • Use tools to speed up your project.

Wait a second – which tools? Well, there are tools for every job! Imagine you have to move all your furniture in your apartment to another city, and you have these options:

  • Put each thing one at a time into your car and move them to the other city.
  • Load everything into an old truck – which could break down at any second – but for free.
  • Use a big, nice truck with all the gadgets required to move the stuff safely in a short period of time with a low fee.

I would personally choose the third option. It’s also the same for every other job in the world. Tools are there to help us do our jobs better and faster. But which tools to deliver website projects faster and better?

Before we get into this, I should mention that every web developer has their own methods of working quickly. Sometimes, someone uses a CMS (Content Management System) that contains a customly designed template, making it easier for the developer to create a website using his or her own templates. Sometimes, a developer more quickly writes the whole management system than setting up a new CMS.

So, what I’m really trying to say is that each developer chooses their own way of going about things. However, typically there are ways to improve the speed and reduce the costs of a web design project such as:

  • Using a good and flexible CMS. (We will consider WordPress only since it has more than 60% of CMS usage over the internet)
  • Using premade PSD templates that you can easily convert to a website
  • Using a premium WordPress theme that is feature-rich and requires no coding
  • Using premade website templates

Let me explain more about each of these ways.

Using WordPress as a CMS

As of October 2019, WordPress is used by 61.5% of all the websites whose CMS we know. This is 34.7% of all websites. It means that WordPress has the biggest community of users among all CMSs in the world. It also is a great choice for running websites from simple to complex use cases. Since WordPress is actively maintained and has a large community, it’s a secure platform if you keep it updated. Also, plugin variety and theme availability are making it the number one choice for many web developers.

Using Premade PSD Templates

You might have your own PSD designs that can be used with some changes for your other clients or you might be looking for other PSDs and sketch designs. In general, when you show your client a PSD of what his website would look like after implementation, you saved a lot of time and headaches. This is because in case it was not accepted or your client didn’t like it, you could easily change the design using PhotoShop, Sketch or XDesign software which is much less time consuming compared to developing a whole website, then showing it to your client.

Using a Premium WordPress Theme

If you ask an experienced web developer if free or premium themes are more cost-effective, they would most certainly tell you that premium themes are the way to go. Why? After all, doesn’t a free theme mean FREE? Of course, it does, but when using a free theme, you’d need to use a lot of other features and combine everything together. Most of the time, you’ll pay more for a small feature that you need. So, it’s not time and/or cost-efficient at all. Choose a good and flexible WordPress theme, and you can rest assured that what you get is much more than what you pay.

Using Premade Website Templates

This is also a big story alone. There are thousands of premade templates for every category you can think of. Plenty of them is free and available on different websites. Many of them are even award winnings. You only need to search for your category name and “website template” in Google to see thousands of results. Using premade templates is like having a cheat sheet with yourself on your final exam. It gives you great results, but this time, it’s completely legal.

Now that you know what can help us improve our speed, one question that probably annoys you is: How can I ensure that I can implement a premade PSD design with my changes, over another premade template using another theme? The answer is that you can’t. If you’re going to design and implement a website like this, then what’s the point of using tools? You need to find a tool that gives you all of the options together.

Imagine you have a multipurpose WordPress theme that has a vast variety of different templates for different categories and it has the PSD design of each template beside it. What else do you need? You need to be sure that this theme is good for your SEO, performance and has enough flexibility to implement your client’s requirements. It should be easy to manage, maintain and be compatible with third-party plugins. Having premium plugins bundled is a plus.

But, what is the chance that you’ll get all of these features together? If you look for it in big markets such as Envato, you’ll find some of them. The Jupiter X Multipurpose WordPress theme is an example. It’s a WordPress theme that has plenty of demo templates, and you can use any of them by a single click, plus the templates have PSD design files ready to download. The theme itself uses Elementor as the default page builder with 17 premium bundled plugins. It means that you get a $225 package for only $59.

Let’s see how we can build up a Barbery website for our hasty client using the Jupiter X WordPress theme.

Building up a Barbery Website

Before everything, let’s see what options we have among the Jupiter X templates. Open this page and search for keyword “barber”.

Deliver Website Projects Faster List
List of current barbery-related templates in the Jupiter X theme.

Let’s say that I like the Elara template, but I first need to show it with some changes to my client. So, I go to Jupiter X Control Panel and download the PSD package of this template.

Deliver Website Projects Faster Downloading
Downloading the PSD package of Elara Template

I then open the homepage PSD file inside the package and start editing as I wish.

Deliver Website Projects Faster Changing Design
Changing the design on the PSD

Then, I show this PSD to my client and get some feedback. After applying the feedback, it’s time to implement the design on my website. So, I simply install the Elara template on my website and then start changing the content and design based on the final PSD files.

Deliver Website Projects Faster Installing
Installing Elara Template

And it’s done!

Deliver Website Projects Faster Installed
Template Elara is successfully installed.

Now, all I have to do is to go to the homepage and edit my content as I previously edited on the PSD file.

Deliver Website Projects Faster Background
Changing the background image of a column in Elara Template

And then update my page. This would be the final result:

Changing the background image of a column.

That’s it. We’ve made it. Changing the rest of the content is as easy as this. All you need to do is apply the changes one by one.

Ok, but I still want my project to be better than this. Give me some tips!

The best thing I can advise is to have a comprehensive understanding of your website requirements. Imagine that you need to build up a website for a furniture shop. What features first come to mind? Probably high-quality images, big headings, portfolios, shop page, checkout steps and etc. Now observe the templates carefully. See which one has the best match design with the one that you have in mind.

Furniture-related demos in Jupiter X templates

The first thing you need to do is to ensure the designed layout is suitable for your content. The rest is to make sure you can implement your extra features as well. For example, if you need an e-commerce furniture website and your template doesn’t have WooCommerce by default, make sure to provide the correct place for your shopping items first and then enable WooCommerce. Also, make sure to check the Artbees Crash Course that has a great A-to-Z tutorial on how to build a website with different subjects in our blog.

Wrapping Up Tips to Deliver Website Projects Faster

Web design is a tough job and gets worse when you have a client on a tight deadline. However, using tools such as a multipurpose theme will give you the ability to design quicker and better and deliver website projects faster. Here we explained which tools can help you design a quality website in a short timeframe – and that gets a thumbs up from your client.

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
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.

Introducing WunderWP: Preset Styles for Elementor and More

Earlier last week we introduced WunderWP on ProductHunt. A new and free tool for Elementor that takes away a long-lasting pain shouldered by Elementor users. Let’s talk a little more about why this product was ideated and what problem it solves. Why on earth were preset styles for Elementor needed in the first place?

What is WunderWP?

WunderWP applies preset styling for Elementor widgets and beautifies your content in seconds. It helps you save big time by using its readymade styles to build your content and get your website up and going.

What problem preset styling for Elementor solves

Everyone who has used Elementor widgets knows that they are not ready to use right away! They won’t look nice until you put a good amount of time and energy stylizing and shaping them into something you want for your website. If you want to go about doing this, there are simply too many options and settings to deal with, and you need to make sure that what you customize looks professional and visually appealing.

All of this is time-consuming – and not to mention boring! WunderWP saves you that time by bringing on hours of work put by skilled designers and Elementor experts at Artbees to beautify your raw Elementor widgets and let you focus on the more important aspects of your project.

How WunderWP solves the problem

Regardless of which theme you use, once you install WunderWP, preset styles will appear in your element settings under the Content tab.

Preset Styles for Elementor Choose Style

Try different styles by clicking on their thumbnails and see which one looks better on the element and get something that more closely matches your preference. Voila! The ugly-looking default widget instantly turns into something beautiful.

Preset Styles for Elementor Before and After

New styles from the WunderWP Cloud

WunderWP adds new styles for different elements over time and, as long as you have the plugin installed, your library automatically updates itself with the latest preset styles for Elementor.

Compatible with everything Elementor

WunderWP is free and compatible with all Elementor-based themes, Elementor Free and Elementor Pro. It is also fully compatible with Jupiter X and the Raven library. Jupiter X users can simply download it from the WordPress repository.

250+ preset styles?

At the moment, WunderWP provides the following number of styles:

  • 105 element styles for Elementor Free
  • 139 element styles for Elementor Pro
  • 36 element styles for Jupiter X Raven

…and new styles are being added over time!

Is it possible to save/reuse my own styles?

At the moment, it’s only possible to apply WunderWP’s preset styles but this sounds like a tempting feature! If you’d like to be able to add your own styles and reuse it again for other elements, please do let us know if you want to see that in WunderWP!

What’s next

WunderWP was ideated to automate styling and to create something like readymade website templates but for individual widgets. This helped us produce website templates for Jupiter X at a more rapid pace and then we thought that maybe it could be of use as an independent plugin for Jupiter X users and maybe all Elementor users.

WunderWP is doing its job at the moment, and we’ll keep adding beautiful styles to it over time but are there other directions it can go in? Yes, there are! There could be preset styles for Elementor that could be applied globally on the website. Or, for example, there could be automation and readymade content for other content types!

It’s up to how our community reacts and which features they’d like to see next! We’re eagerly waiting by to hear your feedback before we decide the next move 😉 You can follow WunderWP on social media to stay current with the latest styles and features added to it.

subscribe

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

How to make WordPress Themes or Plugins Translation Ready

Translation Ready Themes Featured Image
Translation Ready Themes Featured Image

It’s no secret that WordPress is used around the world. So it’s a good idea to ensure that themes and plugins can be easily translated into other languages. Adding internationalization and localization support by having a translation ready WordPress theme can greatly increase its market share.

Difference Between Internationalization and Localization

Internationalization is the process of developing a plugin/theme so it can easily be translated into other languages.

Localization describes the subsequent process of translating an internationalized plugin into a new language.

Side Note: It’s worth noting that internationalization is often abbreviated as i18n (because there are 18 letters between the ‘i’ and the ‘n’), and localization is shortened to l10n (because there are 10 letters between the ‘l’ and the ‘n’.)

The localization process can be done using a software called Poedit with three types of language files: the POT file (that contains a list of all translatable messages in the WordPress theme), the .PO file (created when you translate a POT file to a particular language) and the .MO file (a binary file that is created automatically by Poedit and is not human-readable).

Translation Ready Themes

There is some confusion about what a translation-ready theme actually means. So let’s clear up any possible confusion and explain what this entails:

  • Translation ready themes that only come with a .pot file

You can find translation ready themes that only come with a .pot file (and sometimes with an English version of .mo and .po files). These files can be used to translate the theme into other languages. These themes don’t provide translations to other languages, but you have the tools needed to localize the WordPress theme like the Poedit software or the Loco Translate plugin.

For example, in the Jupiter X theme, we provide the jupiterx.pot file and a user can translate the theme to their language.

  • Translation ready themes with translations into other languages

You can find translation ready themes that come with .pot file that also come with translations into other languages. These translations usually have been done by translators, volunteers or any other users.

For example, in the Jupiter 6 theme we provide .po and .mo files for some languages, meaning a customer doesn’t have to translate the theme themselves.

Translation Ready Themes Jupiter 6 Files

Steps to Create a Translation Ready Theme

  1. Create and load the text domain for your WordPress theme.
  2. Enclose the Translatable Text String with the WordPress gettext function.
  3. Create the POT file.

Create and Load the Text Domain

The Text Domain will be a part of the WordPress theme or plugin specification. The following code snippets show the theme and plugin specification with the text domain.

Note: The theme specification will be in the theme’s style.css

/*
 Theme Name: YOUR THEMENAME
 Theme URI: yourdomain/themes/yourthemename/
 …
 …
 Text Domain: yourthemename
 */
/*
 Plugin Name: Plugin Name
 Plugin URI: yourdomain
 …
 …
 Text Domain: yourthemename
 */

Load your theme’s text domain by using the load_theme_textdomain() function. This function has two parameters as the text domain name and the directory path where we will store the .pot, .po, .mo language files. Paste the code seen below in your theme’s functions.php to load the text domain.

load_theme_textdomain( ‘yourthemename’, language_file_path );

Enclose the Translatable Text String with the WordPress gettext Function

WordPress uses the gettext framework function to translate the text string into the specified target language. It has a set of functions in a core translation API file l10n.php located in the wp-includes directory. We have to enclose the text string with the appropriate function. The code below shows how to use the gettext function to localize your theme.

__()
This is one of the most basic translation functions. Like many of its siblings, it takes two parameters: the string to be translated and the text domain.

$name = __( ‘My Stats’, ‘textdomain’ );

It’s used when you want to mark a simple string for translation and return the value to use somewhere else. This is frequently the case within functions – think of registering post types.

_e()

This is almost the same as the function above, except it echoes the value. It can be used when you’re translating in the HTML content directory:

_n()

This function is used when translating strings with a conditional plural in them. This means that you don’t know in advance if the string will use the plural or singular form because it depends on the momentary value of some parameter. A good example would be a comment count.

For example, if a comment count is one, you would need to use a singular form: “One comment.” If a comment count is 0 or more than one, you would use the plural: “Many comments”. This can be done in one go by using the _n() function.

This takes four parameters: the singular form, the plural form, the number to check and the text domain:

$comment_count = get_comments_number();
$comment_count_text = _n( ‘One Comment’, ‘Many Comments’, $comment_count, ‘textdomain’ );

You can read more about the gettext function in the following articles:

https://codex.wordpress.org/Plugin_API/Filter_Reference/gettext
https://codex.wordpress.org/I18n_for_WordPress_Developers

Creating the POT file with the Translatable Text String

After applying appropriate gettext functions for all the translatable text strings of your theme files, create a .POT template file. This template will be the base consisting of all the translatable strings. This file will be referred to create language mapping file .po, .mo pair for each language translation. You can use any popular tool to create this file for getting the theme’s translatable strings.

Read more about making translation ready plugins in the WordPress Codex page.

Wrapping up:

One of the goals of WordPress is to make it easy for users across the world to publish content.
In this article, we took a look at the basics of translations, what a text domain is, the functions we can use and how to create translation files.

We hope this was helpful to you. Please share your experiences in the comments below!😉

subscribe

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

October Crash Course: How to Build a Modern Agency Landing Page with Jupiter X

Agency Landing Page with Jupiter X Featured Image

Homepages were once the most important part of a website – or even for any online presence for that matter. Looking at the rapid evolution of the web over the last decade, especially in the last few years, we see that the situation is the complete opposite. A local business’ homepage might be the least important aspect of an online presence, especially if they also have social media profiles, an Instagram page, a Yelp or Foursquare page – and of course landing pages.

Think of landing pages as a place where you actually do, grow and conduct your business whereas homepages are a mere ornamental, beautiful and purposeless representation of your company or business. A landing page is a web page that serves as the entry point for a website or a particular section of a website. Landing pages are your best (and maybe the last!) opportunity to grab a visitor’s attention and make them consider you.

A homepage is built from thin air regardless of any other factors out there. But a landing page is built as part of your global business funnel. In fact, this gives your landing page its most important and differentiating feature than any of your website’s other pages which is its purpose. That purpose is defined with regard to where your landing page stands in your business funnel. Is it the page you’re directing the traffic from your Google Ads? Is it where your social media followers will land on when visiting your website?

Today, I’ll show you how to build a modern Agency landing page with Jupiter X. The landing page I have chosen for this month’s crash course is inspired by one of the most recently released Jupiter X templates called Agency. It’s been tweaked a little to fit the purpose of this course. If you are a Jupiter X premium user, you can activate it for your website from your Jupiter X control panel.

The final Agency landing page with Jupiter X will include the following sections:

  • Header
  • Hero section
  • Intro
  • Services
  • Sub services
  • Customers
  • Testimonials
  • Blog
  • Footer

This blog post will cover the general instructions on how to build these sections but for more detailed coverage of the building process, settings adjustments and final tweaks do not forget to watch the video.

Header

First thing first! What exactly do I mean by a header? The header is the topmost structure in a website that usually includes a logo and a navigation bar (unless there is side navigation). There can be search, social and cart icons depending on the website type as well. Also, some websites might need a toolbar above the main structure (e.g. e-commerce and listing websites) which is also considered to be part of the header structure.

Layout

The header structure in Jupiter X is built and managed by the Header Builder. Once you are done installing Jupiter X in the WordPress dashboard go to:

  • Templates > Add new, and in the upcoming page find Template Type > Choose header as template type and give it a name.

You’ll be taken to the Elementor building environment. An Elementor library will load with three tabs: Block, Pages, My Templates. This window includes readymade or saved blocks and page templates. We’re going to create our own header template so we can close this window. We are in the Elementor building space with the element library bar on the left hand and authoring space on the other side.

  • Add New Structure (red circle with plus) > select the 16/66/16 structure
Agency Landing Page with Jupiter X Column Structure

We need to tweak this column structure a little by manually resizing the columns. Click on the divider between columns until the following ratio is achieved: 25%, 55%, %20%

Agency Landing Page with Jupiter X Column Resize
  • Edit Section (on the left side) > Layout settings > set the Vertical Align as Middle.
Agency Landing Page with Jupiter X Vertical Align
  • Edit Section (on the left side) > Advanced settings > set the padding as follows:
Agency Landing Page with Jupiter X Header Padding

Logo

Let’s start adding content to our page by adding a logo to our header.

  • Add the Site Logo element to the left column.
  • Edit Site Logo > Choose a logo from the menu. If you haven’t uploaded your logo yet, you should click on the Customizer link below the dropdown and upload different logo versions for your website. In Jupiter X, you can define different logos for primary, secondary, sticky and mobile usages. In this tutorial, we’ll use the primary logo for the light version and secondary for the dark version.
  • Once you’ve uploaded your logo, go to Edit site logo > Style > Set logo size to 200px.
Agency Landing Page with Jupiter X Logo Size

Menu

The second item that goes into the header structure is the menu where we list different sections of the page for users to navigate.

  • Add a Navigation Menu element into the second column
  • You will need to add a menu from the drop-down menu. This will specify the menu and includes the menu items that go inside the menu. You can do this two ways:
  1. Appearance > Menu
  2. Appearance > Customize

In this tutorial, we’ll use the second method.

  • Once the customizer is opened, select Menus from the left sidebar. In WordPress, menus are comprised of two concepts: The menu that includes the menu items and the Location to assign that menu to.
    • Click on the Create new menu button give it a name
    • Select a location for it which in this case is Primary Menu
    • Now click on the Add items button and in the upcoming panel, select Custom links

As you might have guessed, this is going to be a menu for a single landing page so we will need a one-pager menu for it. Each of our 5 menu items should be a custom link with its title in the Link Text field and the URL set as #title. For example, the menu item ‘Mission’ will have ‘Mission’ in the link text and #mission in the URL.

The process of creating the menu is not over yet and later in the tutorial, we’ll assign each menu item to its respective section on the page.

Once you’ve created your menu items, assign its location and save it and go back to your header template. Click on the menu elements and from the sidebar, select the menu that you just created.

  • Edit Navigation Menu > Style > Main Menu Items > Typography > Set the font size to 16 and the weight to 400.
  • Let’s make our logo items gray. In the same setting, we’ll find a 3-tabbed structure for normal, hover and active states of the items. Set the color of menu items in the normal state as #c8c9cc
  • Our menu items should go white on hover. So from the same setting area we’ll set the hover color to #fff
  • Let’s give our menu items some margin: Top:0, Right:7, Bottom:0, Left:7
  • We should also not forget to think about how our menu looks like on a mobile screen. Set the background color for the mobile menu container as well as the mobile menu toggle icon to white and black.

Call to Action

The last item to go into our header in a nice-looking CTA button.

  • Drag a button element to the third column in the header structure.
  • Edit Button > Content > Align the button centrally
  • Edit Button > Style > Button Typography > Set the font size to 16 and the font-weight to 700
  • Edit Button > Style > Normal > Set the text color as black and the background color to white
  • Edit Button > Style > Hover > Set the hover text color as white and the background color to our accent color, which in this case is a lovely blue.

And finally, let’s add some radius and margin to our button to make it fit best within the header structure.

  • Edit Button > Style > Border radius: 3, 3, 3, 3 px Padding: 17, 30, 17. 30 px

So this is it. We’ve just built our header structure:

As you can see, the header structure is built in abstract and may look incomplete at first sight. But also as indicated above, it’ll look perfectly fine when it’s used along with the hero image, which we’ll create in the next step. But before that, there’s one more thing we should take care of! Our header will look as beautiful as above in the mobile version.

Jupiter X will automatically turn your menu into a burger icon, which will be left in between the logo and CTA. Mobile users are traditionally used to the burger icon in the corner of site navigations in mobile, so we better swap the placement of the menu and CTA. For that, we’ll need to add a header right below the current header with the mentioned changes applied:

Mobile Header

  • Right-click on Header Structure > Duplicate
  • In the second header structure, swap the menu and CTA columns. Hover over the CTA button column, click on the gray handle and drag it before the menu column. And you’re done!

You now have a two header structure below each other. The top structure will be used for desktop and tablet users, and the one below will be for mobile users. But how do we set those conditions?

Simply right-click on the top header structure:

  • Edit Section > Advanced > Responsive > Enable the ‘Hide on tablet’ and ‘Hide on Mobile’ (so it will be used only for desktop users)
  • Do the same thing for the below header structure but this time enable ‘Hide on Desktop’

Sticky header

There is one more header structure we need to decide about. The sticky header is the state of the header when you scroll down the page. In sticky mode, a header usually becomes narrower and includes only the information you want the audience to see along the way down the page. In Jupiter X, the header and sticky header can have two entirely different designs, so we should create them separately.

On our landing page, our sticky header will be exactly the same as the normal header. So what we need to do is to copy the header structure from the main header template.

Create a new template for the sticky header by using the same method we used to create the header template earlier in the article and then paste what we copied into the new template.

Activate your header

We have created three header structures so far: the main header, the mobile header and the sticky header. The mobile header is created right inside the same header but enabled only for mobile view, and the sticky header is created separately in another template (we don’t need to define the mobile version for the sticky header as it’s disabled on mobile by default). What’s left is to assign these templates to the right header slots in Jupiter X.

In the WordPress dashboard:

  • Appearance > Customize
  • Select Header from the sidebar
  • In the upcoming header dialogue box, select Custom as the header type and then select the main header template you created.
  • Also, choose Sticky as the behavior as the sticky template we just created from the drop down menu.
  • Enable the content overlap so our header overlaps the background image in the hero section.
  • And finally, make sure the Enable on Mobile is disabled as we don’t want a sticky menu in that view.

And that’s it! We’re officially done with our header structure. Now let’s move to the hero section.

Hero section

We created our header on a separate page as a template. Now we need to create an actual page that will be used as the landing page, set the template we just built as its header and then continue to build the hero section. In your WordPress dashboard, go:

  • Pages > Add New

In the ‘new page’ meta option section, there are settings about different sections of the page you are going to create including the header, main, title, and footer. In the header section, find the setting for ‘Overlap Content’ and set it as ‘No’. We do this so the header that we have created won’t disturb us while creating the section for the hero by overlapping it. Once we are done building the hero section, we’ll switch this option back to ‘Global’ so the header overlaps the hero.

  • In the new page authoring area, click on the Edit with the Elementor button and start creating the hero section in the Elementor environment.
  • Click on the Add new section red button and choose the single-column layout.
  • Edit Section > Layout setting > Set the content width as 700px.
  • Our hero section has a set height size, so we’ll set the min-height as ‘min height’ and the value to 615px.
  • The content in our hero section is vertically centered.
  • The hero section has a background image so here we go: Edit Section > Style setting > Set normal as background and choose the Classic style. Click on the plus button to choose an image from the library or to upload one.

So this is how our hero section looks like up to this point. As you can see, there are more details that should be added to the hero, and the header section should overlap the hero section. We’re going to apply this in the following steps:

  • Edit Section > style setting > Background
    • Position: Top Center so the most important part of the image will be visible most of the time.
    • Repeat: No Repeat to avoid unwanted repeating of the image
    • Size: Cover so the image covers the entire hero section.
    • Size: Cover to have the whole section filled with the background image
  • Edit Section > Style > Background Overlay:
    • Color: #114cbd
    • Opacity: 0.9
    • Blend Mode: Multiply

Add a heading, a spacer and an icon to the section. Edit the elements’ content according to the model and set the heading to H1. To get the playback button to look the way it is on the main landing page, don’t forget to change the size of the icon to 15px and set the correct color for it from Edit Icon > Style> Icon. Also on the same tab, add a 45px padding in all directions. From Edit Icon > Style> Icon > Container, change the container color to match the target.

Intro section

Compared to the hero, there is not much work to do in this section – paying attention to some can do the trick. Just add a two 1⁄2 1⁄2 section and from Edit Section > Advanced, add 100px of padding to the top and bottom of the section.

As for the rest of this section, just add two headings and one paragraph and a button to the left column and an image to the right column. Here are some details to get the look right:

  • The first heading is H4.
  • The second heading is H2.
  • The button has a no-color background and an icon.
  • Move the icon to after the text from Edit Button > Icon by setting it to be right-aligned.
  • Set the image size to Large and also make it right-aligned.
  • Add paddings from Advanced tab on each elements’ settings to give the correct spacing.

Services

There is a trick to make this section really fast: add a ⅓ ⅓ ⅓ section. Make one of the columns exactly like the model and then remove the other two and just duplicate the first column twice to get the whole section done in under 5 minutes. But you need to do it as follows:

  • In the Edit Section > Layout, change the column gap to none.
  • Click to edit the first column on the left, from Edit Column > Advanced set all margins to 20 and padding to 0.
  • Add an Image Layout element from Edit Image Layout > Content > Settings. Adjust the settings as follows:
  • In the Edit Image Layout > Content > Item add one item and set the image size as full. Remove icon, title, and description. Set the link type as external.
  • Add a spacer, a heading, then a paragraph and edit the content, size and weight.
  • To add the hover effect, go to Edit Column > Style > Border set the Border Type to Solid then set the border width to 1px for bottom and zero for others. Change the color to #f1f1f1, click on hover and change the color to #2b71f6

Now you can remove the other two columns and duplicate the one you made twice and then simply change the content.

Note – You might wonder why we had to add a ⅓ ⅓ ⅓ structure as we could have added a single column, edit it and then duplicate. The issue is, in a real project you will not have the values for image height padding, etc. and therefore you would not be able to predict how your column will look unless it was within the proportions used in the design.

Subservices

Things get a tad bit more interesting in this section as we have an object that overflows this section. But before getting to that, let’s build the other parts of the section:

  • Add a 1⁄2 1⁄2 section and from Edit Section > Advanced set the top and bottom paddings to 100px.

On the left column:

  • From Edit Column > Layout, change the column width to 70%.
  • From Edit Column > Advanced, add a 25px padding in all directions.
  • Add a heading and an inner-section on the left column.
  • On the left Inner-Section column add an Image-Box set to the image to be on the left.
    • From Edit Image Box > Style > Image set the image space and width to 30.
    • Again From Edit Image Box > Style > Content set the spacing to 18 and also edit the typography and color.
    • Duplicate this three times and move two to the right column in the inner-section.
  • On the left column of the inner-section, add 100px padding from the right
  • On the right column of the inner-section, add 100px padding from the left
Agency Landing Page with Jupiter X Padding

On the right column:

  • Duplicate the Work With Us button from the Intro section and bring it to this column and change the color to white.
  • Add a spacer under the button set it to 180px.

Here is the interesting bit: the smartphone mock-up screen. There are three things that we should get right here – the position, corner radius, and the box-shadow. Here it goes:

  • Add an image, change the image content to the smartphone mock-up.
  • From Edit Image > Style > Border
    • Change the border radius to 45px
    • Click on the box-shadow and give this value to the color rgba (71,72,133,0.16), and edit the rest of attributes as below
  • In Edit Image > Advanced > Custom Positioning
    • Set Position to Absolute
    • Set the offset values as below
Agency Landing Page with Jupiter X Custom Positioning

Customers

This part of the page is made up of two sections: the part with headings and text as well as the part with logos.

  • For the upper half, duplicate the intro section and carry it to after Subservices. Modify the paddings to copy the look and remove the button (Work With Us). Also remove the image for the right column.
  • For the lower half, add a ⅓ ⅔ section.
  • On the left column from Edit Column > Advanced, add a 100px padding from the right and then do the following:
    • Add a Brands element and set the columns to 3.
    • Remove all the items but one, click to edit it, leave all fields empty and only choose the logo.
    • Duplicate the item and change the logo with another one.
    • From Edit Brands > Style > Company Logo > Logo Wrapper, add a 100px padding from the right.
Agency Landing Page with Jupiter X Company Logo
  • On the right column from Edit Column > Advanced, add 20px and 50px paddings to the top and left respectively, and then continue by
    • Add a heading edit the content and typography
    • Add a spacing of 50px
    • Add the Google Ad badge
    • Add a small spacer
    • Add the Facebook MP Badge

Testimonials

Jupiter X has a Testimonials element, however having absolute design freedom while showing the reviews in the agency landing page with Jupiter X tabs element comes in handy. Like the one we used for the Restaurant Menu in the first crash course. These are the things we should do:

  • Duplicate the upper half of the Customer and carry it to the bottom of the page and change the section background color to #f9fcff and also edit the section paddings to 80px top and bottom.
  • Remove the text editor.
  • Add this tabs element (There are multiple tabs elements in Jupiter X. Make sure to use the one indicated below):
Agency Landing Page with Jupiter X Tabs
  • In Edit Tabs > Content remove two items and keep only one. Change the icon to user-o (short for User Outline) and for the label type Customer 1. Leave Choose Template on Select.
  • From Edit Tabs > Style change the looks of the element however you like. To remove the borders in each part, set the border type to Solid and then set the border width to 0.
  • Save your work and go to Dashboard > Templates > Saved Templates and click on Add New. In the windows that open, choose a title for the template, choose Section for template type and wait for the editor to open.
  • Create a ½ ½ section, add an Image to the left and a Text Editor along with it and Icon Box to the right column.
    • Adjust the paddings and spaces as you wish.
    • Change the typography and color to match the design.
    • In Edit Icon Box > Style > Icon, enter 0 for the Icon Size and in Edit Icon Box > Style > Content, enter 0 for the Title Spacing.
    • Publish and go back to the dashboard and add another section template
    • In the editor, click on the folder icon (see the pictures below), add your template and edit the content to create more testimonials in a breeze.
  • Now go back to edit the page.
  • In Item, choose one template, duplicate it and choose the rest of the templates for duplicated items.

Blog

For the blog section, duplicate the Testimonials section and remove the Tabs. Add a Spacer on top of the section100 px. To get the Heading in two lines, use <br> where you want the line break. Add a Post element and do the following:

  • In the Edit Posts > Content > Settings make the settings as seen below:
  • Set the rest to inactive.
  • As for the look of the section, apply these settings in Edit Posts > Style
  • Set the Border Color to Normal: #e6e7ec and Hover: #4183ff and Border Width to 1px. Continue to Feature Image and make the following changes:

Do not forget to edit the typography and colors of the other parts of the element.

Contact Us

To make this section, add a two-column structure. Go to Edit Section > Layout, set the minimum height to 720px and column position as Middle.

  • To make the background look like the hero, apply the same settings to design. After doing this, set the left column to 35%.
  • Add a Heading to the left column, and a Form to the right column.
  • Apply padding from the left for the right column.
  • To get the look and function of the Form, go to Edit Form > Content> Form Fields.
  • Open each item and set them up according to the model.
  • From Edit Form > Content> Submit Button, change the text to “Let’s Talk”.

After that, go to Edit Form > Style and apply the settings below:

  • General: Column Spacing: 11 Row Spacing: 19
  • Field: Apply the following!
  • For field focus state, only change the Background Color to rgba (255,255,255,0.17)
  • Button: Border Type Solid – Border Width 2px (in every direction)

Footer

Hang in there – we’re almost done! There’s only one thing to do and believe me, it’s very straightforward. To get it done:

  • Go to Templates > Add New and choose the Section Type to Footer.
  • In the editor, add a ⅙ ⅔ ⅙ section.
  • Add a 100px from the top and 15px from right and left.
  • Add Logo to the left column and an Icon List (Set it to horizontal) to the middle column.
  • To remove the icon, set its color to Transparent.
  • Add and Social Icons in the right column.
  • Add a ⅓ ⅓ ⅓ section and set paddings to Top:50px, Bottom:30px and 15px from Right and Left.
  • Add a Heading, a Text Editor, and a Button to the left column.
  • Configure the typography, duplicate the Heading twice and drag the duplicates to the other two columns. Then edit the content.
  • Duplicate the Text Editor, drag it to the right column and then edit the content.
  • In the middle column, add an Icon List (Set it to Vertical), edit colors and typography and remove icons as mentioned previously.
  • In the Right Column, add a Form after the text editor and remove all fields other than email. To get the look, apply the settings below:
  • In Edit Form > Style > Button do the following:
    • Set the Height and Width of the button to 45px
    • Set the Color to Normal (#2b71f6) and Hover (#4183ff)
    • For the Border do as seen below:

Now, all you need is a Divider and a Text Editor (for the copyright section) to finish the job. Add a section for each – and you’re done!

That’s a Wrap on our Agency Landing Page with Jupiter X

In our second installment of the JupiterX crash course, we made an Agency landing page with Jupiter X in less than two hours. By following these crash courses, you’ll be able to build expensive-looking webpages without breaking the bank.

Jupiter X is there to empower people who want to imagine and create, be it for a business or some good looking digital content. Do watch the video that comes with the post so you don’t miss any steps in making an Agency landing page with Jupiter X. Stay tuned for our next crash course!

subscribe

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