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

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!

September Crash Course: How to Build a Restaurant Landing Page with JupiterX

Restaurants – which are nearly as old as the service industry itself – have been serving food (hopefully clean!) on-demand and at a reasonable speed (at least the good ones) for all sorts of folks for centuries. Making a website that helps a restaurant business is essential (I know, you already knew that, but bear with me). The question is: “how can you make a website that is more than a digital brochure to actually helps the restaurant?”

My name is Afshin. I’ve been a Jupiter user for 5 years and used this theme to create many WordPress websites for my clients. My real expertise is branding, so I don’t know how to code aside from some handy custom CSS tricks I learned here and there. In this blog post, I’m going to cover the 4 important things that make a restaurant landing page with Jupiter X stand out of the crowd. I’ll then walk you through the steps of how to build it using Jupiter X – it goes without saying that not a single line of code will be written today!

4 Important Things that Make a Restaurant Website Stand Out (With Jupiter X, Obviously!)

1- Look and Feel (Because Instagram!)

The restaurant website should look the part of the cool, hip place it’s representing online. It’s “game on” the second a visitor enters a restaurant’s webpage as they will almost instantaneously make up their mind about that business. Things like using professional, tempting photos of the food and eye-catching pictures of the ambiance go a long way in communicating the quality of the services along with the restaurant’s look and feel.

2- Being Informative (But not Boring)

Having a well-thought-out, honest and clear message that tells visitors why a restaurant is different and more importantly, the type of cuisine served can leave a lasting impression. To make the webpage actually useful for visitors, information regarding working hours and the restaurant’s location should be easily accessible (But careful! This info shouldn’t be in their faces the whole time!). These details are the most looked at on any restaurant’s website. Let’s not forget people usually just Google the name of the place and working hours, which means that we need SEO to work right there and then. It would be a definite plus if visitors could also make reservations directly from the website.

3- Mobile First (For Real)

Have you seen those people who have their smartphones with them day and night? Yeah, they’re probably going to visit your website on those very same phones (After all, who checks a restaurant webpage on a desktop computer sitting in an upright position?!). So the website should be mobile-friendly or – as web designers like to put it – “responsive,” so people can find what they need on their tiny screens before moving onto the competition.

4- It Should Be Fast (Or Don’t Bother!)

Last but not least, your restaurant website needs to be snappy. I mean, you probably won’t get a second chance to be snappy (remember those people with smartphones? They’re not really known for their patience), so choose your hosting service, CMS, themes and plugins wisely because that website is going to fill your spot online. It better be worth it and fast.

Making a Restaurant Landing Page with Jupiter X

In this part of the blog post, I’ll explain the steps required to recreate the Jupiter X Pro Template Restaurant landing page with Jupiter X, Raven elements and Elementor. If you need more details about any of the steps, you can watch the video to see the entire process. I’m going to assume you have a fresh installation of WordPress, a registered Jupiter X WordPress Theme, installed necessary plugins and activated them.

Restaurant Landing Page with Jupiter X Essentials

Setting up the essentials

Making a website starts with the essentials like the website’s title and subtitle, its colors, typography settings and a few other global customizations. You can adjust these settings via Customizer. If you are unsure where to start, you can take this file and simply import it in your own Jupiter X installation (I won’t tell anyone, wink!). After importing the settings into Customizer, it would be a good idea for you to explore Customizer and get an understanding of what can be changed/adjusted and where, so you can make these settings in future projects using Jupiter X. I would recommend checking the site identity, typography, header, footer, and menu.

Restaurant Landing Page with Jupiter X Menu

Creating the Navigation Menu

When you’re setting up the menu, it’s imperative that you consider which pages matter more and how most people would go about finding the relevant information they are after. To create your menu:

  • Go to Appearance > Menus, and create a menu.
  • Since this is a one-pager, you’ll need to add menu items as Custom Link.
  • Use titles such as #about (also known as anchors – more on this below) and save.
Restaurant Landing Page with Jupiter X Header

Making a Header and Footer for your Restaurant Website

Now that we took care of what is under the hood, it’s time to create the header. Headers matter as they are usually the second thing that catches visitors’ attention. Creating headers with Jupiter X is really straightforward.

In the Dashboard > Templates > Header tab, you can (create and) add a header. In the next screen, you can simply import one out of many header templates. Choose the one with the Jupiter X tag that looks like the one in the template. You can edit the template in Elementor to give it the look you need. The process for the footer is exactly the same.

Restaurant Landing Page with Jupiter X Hero

Hero (Go big or go home!)

This is the first thing visitors to your website will see. Done correctly, it’ll save the day, hence the name hero. The hero section of a website usually has a hero image, an eye-catching graphic element, two to three pieces of typography and a call-to-action button (Duh!). To create the hero section:

  • Add a section from the left sidebar then add a heading, headline and text paragraph.
  • Edit the content in each of the sections you added. The great thing about the Jupiter X headline element is that it allows you to edit the text in two separate boxes and automagically applies two sets of typography and color adjustment to them.
  • Don’t forget to set the headline to H1 and the heading to H3 so they will get their size color and font from the customizer settings that you imported before.

Now add the button and change the text and color (the accent color hex code is #ff5600).

Jupiter X Intro

Intro (The specifics…)

If the user scrolls past your hero without bouncing (closing the browser tab), you are either lucky or have done a good job with the hero section (or the visitor just has nothing better to do!). Either way, you must now offer more details about your services to your online walk-in, so you need details on what you serve and why your place is different. But the trick is that you can’t just pile it on. It’s better to share this info in a structured way. Using icons really helps.

To create this part:

  • Add a section, then a headline, and set it to H2. Edit the two sections according to the template.
  • Add a sub-section and then click on the top-right corner on either of the columns to add one more column.
  • Drag and drop an image box element in on the columns, add the image from the settings and edit the styling from the middle tab for both the image and the content (watch the video for the full setting description.)
  • Right-click and click “duplicate it twice,” then drag and drop each of them in empty columns and edit the content.
Jupiter X History

History (Why should I trust you?)

You can claim you are the best, hippest, most awesome place in the city that serves Italian cuisine. But I would most probably not take your word for it. In this way, you should “show your work” and to build trust, a business (especially restaurants) should share their credentials such as the head chef, awards and the number of years in operation.

To make this part:

  • Add a section and a subsection.
  • Edit the column to use 65% of the total length, add an image to the right column and choose an image for it.

On the left column:

  • Add a heading (H3), a Jupiter X headline (H2) and edit the content accordingly.
  • Add a subsection then drag and drop image boxes into one of the columns. Edit the image and content, set up the style and make the title H3.
  • Now duplicate the image box three times and carry two to the right column in the under-section.

The Menu (The Juice)

Whatever you do, please don’t stick a picture of your restaurant’s menu on the first page – or any other page for that matter. The easy explanation is that Google doesn’t like it, and neither do your visitors. Offering text in the form of an image makes your website look unprofessional and difficult to operate and we don’t want that. Offer your menu with mouthwatering photos of the meal. Jupiter X has a set of comprehensive style options and a visually-appealing gallery element that can come in handy when we want to make any product/project showcase (namely a restaurant menu).

To make this part:

  • Add a section. Then you’ll need a heading (H3) and a headline (H2). Edit the content exactly like the similar ones above.
  • On the sidebar, search “tabs” and add the one you see in the picture below. Note that like the header, this element needs the content to be made beforehand so it can actually work.
Jupiter X Tabs

Leave the tabs (save your work first!), go to Dashboard > Templates > Saved Templates and click Add New. (Since this is a mock website, we made only one template. But if you really want to make your tabs work like tabs, you should make five templates – one for each tab).

In the window that opens:

  • Choose the Section and give it a name such as “Offered Menu.”
  • Click “Create Template.” Add a subsection and duplicate one of the columns to get three columns. Also, make sure that you set the inner section to Full Length from the Layout.
  • Search for the Animated Box and then drag and drop it in one of the columns. Edit the content as seen in the picture below:
  • In Style > General, apply the below settings.
  • Duplicate this element four times. Put one in the middle column and two in the outer ones.
  • From Style > General, change the middle animated box.

Now you can click publish, and… Congrats, you’ve created your first custom template!

Testimonials

Testimonials and Partner Brands (Do not fake it until you really make it!)

Typically, people like to read about a new place before trying it. For that reason, having your own set of short review excerpts – especially if they are from Yelpers who have a high readership on the website – can really close the deal for you. To do this, you can invite a bunch of reviewers to eat at your restaurant to get their opinion. Also having the logos of your suppliers on your page gives a sense of trust and reliability.

To build this section:

  • Add a section.
  • Drag and drop testimonials, a heading (H3), a headline (H2) and finally a brands element to the section.

I’ve explained how to style the testimonial and brands in the video but In short, you’ll have to add testimonials one by one. We’ve included a picture, name, position and the rating in each item. In the style tab, you can change the shape of arrows, how pictures are shown and the testimonial background.

The same goes for the brands as you can adjust them, like below:

Restaurant Landing Page with Jupiter X Reservation

Have them make a reservation online (Don’t forget to tell your staff you have this feature on your restaurant website!)

Yes, yes, I know with a gazillion apps out there for making reservations at restaurants and bars, you’re thinking “who needs a reservation form on their own website?” Well, EVERYONE! If you don’t include a form to make a reservation, they’ll have to call your restaurant (What if your staff don’t hear the phone ring?) or use an app to make a reservation (What if they cannot find your place on their specific app?). So make everyone’s life easier and just add the form and link it to an email address you would always check. By the way, a little birdy just told me that soon taking reservations on your website in Jupiter X will be similar to taking orders on an e-commerce website, which would make the task of following up on reservations much easier and more practical.

To make the last part of your webpage’s body:

  • Add a heading (H3), a headline (H2) and finally a subsection.
  • Drop an image (and choose an image for it) into the right column and a Jupiter X form element into the left column.
  • In the settings you change the type of information you get from each field also the color, font, spacing and all styling details of the form element.

Setting up all the nitty gritties

Obviously, without adjusting all your paddings, margins and other little details, you won’t have a market-ready webpage. In other words, don’t forget to retouch each section to give it that nice and sleek look. I tried to only include the gist of the tutorial in the blog post to avoid getting TLDRs in the comment section.

In the video tutorial, I’ve made the whole restaurant landing page with Jupiter X from scratch without a single line of code – and this includes all the small settings and adjustments that make it look the way it looks. Make sure to watch the tutorial!