Page 19 – Artbees

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.

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.

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):

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!

Extend Elementor like a Pro: Creating a Custom Control

Creating a Custom Control Featured Image

Every Elementor’s widget is composed of different input types called a control. A control is used to construct the interface of a widget. Using controls allows us to customize and set our favorite settings for a widget and see a live preview of it.

Before diving headfirst into this article, we suggest that you check out the following articles.

Elementor control

In default, Elementor has several control types like Text, Color, Dimension, Select, Icon, Media, Typography and so on that meet most common usages. But sometimes we need to create a custom control to realize our needs.

Directory Structure of a Control

Normally, each control contains three files as PHP, JavaScript, and CSS:

control.php
js/control.js
css/control.css

PHP File

The PHP file generates HTML and constructs UI of control in Panel. To create the PHP file, we need to extend the Base_Control abstract class.

The Base_Control provides several methods.

get_type: retrieve the type of control.
content_template: render the HTML output in Panel.
enqueue: use to add CSS and JavaScript files to control.
get_default_settings: retrieve the default setting of control on initialisation.
get_default_value: retrieve the default value of control.
get_value: determine how the control returns its value.
get_style_value: interact with the CSS rule that passed with Selector argument.

Elementor allows for five base classes to extend Base_Control for different purposes. We can extend the following classes to create new controls. For more info, you can refer to this page about Elementor controls.

Base_UI_Control: creates a UI control that is visible in the panel and doesn’t return any value. For example, Heading control.
Base_Data_Control: a base class that returns a single value. For example, Number Control.
Control_Base_Multiple: a base class that returns multiple values. For example, Media control.
Control_Base_Units: a base class that returns unit based values. For example, Dimension control.
Group_Control_Base: a base class for creating group control. For example, Typography control.

JavaScript File

The JavaScript file is used for interacting between UI and live preview and manipulate events that are related to control.

The Elementor uses the Backbone.js library for JS manipulation. For more information about Backbone.js, you can check out backbonejs.org and https://www.javatpoint.com/backbonejs-tutorial

Also in Elementor, there is an exclusive JS file for each PHP file that interacts with them. For instance, the above base PHP classes have JS files such as:

base.js
base-data.js
base-multiple.js
base-units.js

To create a new control JS file, we need to extend one of the above JS files. You can find the source of the JS file at GitHub.

Note: For some reason, Elementor merges all JS files in the editor.js file. We can extend the above JS file from by using the elementor.modules.controls object.

CSS File

CSS allows us to style the UI of a control. In the following sections, we’ll go into detail about the actual usage of CSS.

Creating a Custom Control

Now that we have gained a basic understanding of an Elementor control, we are ready to create a custom control called MultiUnit, which is similar to Elementor’s Dimension control.

In the Dimension control, we can only set the same unit (px, em,…) for the top, right, bottom and left values, but in MultiUnit control, we can set a different unit for each value.

At the end of this article, we’re going to create the following control.

Default Values	Return Values (Array)
[ ‘top’ => ”, ‘right’ => ”, ‘bottom’ => ”, ‘left’ => ”, ‘top_unit’=>’px’, ‘right_unit’ =>’px’, ‘left_unit’ =>’px’, ‘bottom_unit’ =>’px’, ‘isLinked’ => true, ];	[ ‘top’ => ”, //int ‘right’ => ”, //int ‘bottom’ => ”, //int ‘left’ => ”, //int ‘top_unit’=>”, //string ‘right_unit’ =>” //string ‘left_unit’ =>”, //string ‘bottom_unit’ =>”, //string ‘isLinked’ => ”, //bool ];

Directory Structure of a Custom Control

index.php
multi-unit.php
css/MultiUnit.css
js/MultiUnit.js

You can download the full source code from Github.

Creating the PHP File

To create a custom control, we need to have a unique type. For our control, we’ll choose spicy-multi-unit-control.

Our control extends Control_Base_Multiple and overrides essential functions, as well as creates custom functions to meet our needs.

In this section, we’ll go into detail of each function one-by-one:

1. The below function sets the control type.

public function get_type() {
     return 'spicy-multi-unit-control';
 }

2. This function returns the default values of the control.

public function get_default_value() {
     return [
         'top' => '',
         'right' => '',
         'bottom' => '',
         'left' => '',
         'top_unit'=>'px',
         'right_unit' =>'px',
         'left_unit' =>'px',
         'bottom_unit' =>'px',
         'isLinked' => true,
     ];
 }

3. The below function returns the default settings of the control.

protected function get_default_settings() {
   return [
       'size_units' => [ 'px' ],
       'label_block' => true,
       'range' => [
           'px' => [
               'min' => '',
               'max' => 100,
               'step' => 1,
           ],
           'em' => [
               'min' => 0.1,
               'max' => 10,
               'step' => 0.1,
               ],
           'rem' => [
               'min' => 0.1,
               'max' => 10,
               'step' => 0.1,
           ],
           '%' => [
               'min' => 0,
               'max' => 100,
               'step' => 1,
           ],
           'deg' => [
               'min' => 0,
               'max' => 360,
               'step' => 1,
               ],
           'vh' => [
               'min' => 0,
               'max' => 100,
               'step' => 1,
           ],
           'vw' => [
               'min' => 0,
               'max' => 100,
               'step' => 1,
           ],
       ],
   ];
}

4. This function is used for adding JavaScript and CSS files to the control:

public function enqueue() {
     wp_enqueue_script( 'spicy_multi_unit',plugins_url( 'https://d3pa45a5f8vwb1.cloudfront.net/js/MultiUnit.js', FILE ) );
     wp_enqueue_style( 'spicy_multi_unit' , plugins_url( 'https://d3pa45a5f8vwb1.cloudfront.net/css/MultiUnit.css', FILE ) );
 }

5. The below function renders a button that is used to sync all units together.

private function print_link_unit_template(){
    ?>
    <# if ( data.size_units && data.size_units.length > 1 ) { #>
                                                    Sync Unit                                    <# _.each( data.size_units, function( unit ) { #>                {{{unit}}}            <#});#>                    
     <#}#>
    <?php
 }

6. We’ll use the below function to create a unit for each input:

private function print_units_template($arg){
    ?>
    <# if ( data.size_units && data.size_units.length > 1 ) { #>
                    <# .each( data.size_units, function( unit ) {            if(unit=='px' && data.range.px.step < 1){                data.range.px.step=1;            }            #>                        {{{ unit }}}            <# } ); #>        
    <# } #>
    <?php
 }

7. Finally, the essential function for creating the UI:

public function content_template() {        
    $dimensions = [
        'top' => __( 'Top', 'Spicy-extension' ),
        'right' => __( 'Right', 'Spicy-extension' ),
        'bottom' => __( 'Bottom', 'Spicy-extension' ),
        'left' => __( 'Left', 'Spicy-extension' ),
    ];
 ?>
   <div class="elementor-control-field">
    <label class="elementor-control-title">{{{ data.label }}}</label>
    <div class="spicy-control-input-wrapper">
     <div class="units-wrapper">
       <div>   
        <ul>
          <?php
            foreach ( $dimensions as $dimension_key => $dimension_title ) :
               echo '<li>';
          ?>
          <# if ( -1 !== _.indexOf( allowed_dimensions, '<?php echo $dimension_key; ?>' ) ) { #>
             <?php                      $this->print_units_template($dimension_key );
             ?>  
          <# } #>
                 <?php           
                   echo '</li>';
                   endforeach;
                 ?>
         </ul>
    </div>  
   </div>
            
   <div>
     <ul class="spicy-control-dimensions">
       <?php
         foreach ( $dimensions as $dimension_key => $dimension_title ) :
            $control_uid = $this->get_control_uid( $dimension_key );
       ?>
         <li class="spicy-control-multiunit">
         <#
          var unit=data.controlValue[<?php echo "'". $dimension_key.'_unit'."'"; ?>];
         #>
          <input id="<?php echo $control_uid; ?>" type="number"  data-name="{{data.name}}-<?php echo esc_attr( $dimension_key ); ?>" min="{{ data.range[unit].min}}" max="{{ data.range[unit].max}}" step="{{ data.range[unit].step}}" data-setting="<?php echo esc_attr( $dimension_key ); ?>"
    placeholder="<#
                   if ( _.isObject( data.placeholder ) ) {
                    if ( ! _.isUndefined( data.placeholder.<?php echo $dimension_key; ?> ) ) {
                       print( data.placeholder.<?php echo $dimension_key; ?> );
                       }
                      } else {
                              print( data.placeholder );
                             } 
                     #>"
                                
   <label for="<?php echo esc_attr( $control_uid ); ?>" class="spicy-control-multiunit-label"><?php echo $dimension_title; ?></label>
         </li>
       <?php endforeach; ?>
         <li>                    
          <div style="display: flex;">
           <button class="spicy-link-dimensions tooltip-target" data-tooltip="<?php echo esc_attr__( 'Link values together', 'Spicy-extension' ); ?>">
             <span id="spisy-{{data.name}}" class="spicy-linked">
               <i class="fa fa-link" aria-hidden="true"></i>
               <span class="elementor-screen-only"><?php echo __( 'Link values together', 'Spicy-extension' ); ?></span>
             </span>
             <span id="spisy-{{data.name}}" class="spicy-unlinked">
               <i class="fa fa-chain-broken" aria-hidden="true"></i>
               <span class="elementor-screen-only"><?php echo __( 'Unlinked values', 'Spicy-extension' ); ?></span>
             </span>
            </button>
            <?php       
             $this->print_link_unit_template();  
            ?>
           </li>
          </ul>
         </div>
        </div>
        </div>
        <# if ( data.description ) { #>
        <div class="elementor-control-field-description">{{{ data.description }}}</div>
        <# } #>
        <?php
    }

Creating the JavaScript File

Our JS file is named MultiUnit.js and extends the Elementor BaseMultiple module. This JS file contains a JavaScript class that has several functions, which are explained briefly below.

1. The below function defines the essential UI CSS selectors.

var ControlMultiUnitItemView=
    elementor.modules.controls.BaseMultiple.extend( {
    ui: function() {
     var ui = ControlBaseMultipleItemView.prototype.ui.apply( this, arguments );
         ui.controls = '.spicy-control-multiunit > input:enabled';
         ui.link = 'button.spicy-link-dimensions';
         ui.top_choices ='div.spicy-units-choices > input[type=radio][data-setting=top_unit]';   
         ui.right_choices = 'div.spicy-units-choices > input[type=radio][data-setting=right_unit]';
         ui.bottom_choices = 'div.spicy-units-choices > input[type=radio][data-setting=bottom_unit]';
         ui.left_choices = 'div.spicy-units-choices > input[type=radio][data-setting=left_unit]';
         ui.unitLink = '.spicy_link';
         ui.gear = '.spicy_link_first';
         ui.ranges_top = '.spicy-units-choices-label-top';
         ui.ranges_right = '.spicy-units-choices-label-right';
         ui.ranges_bottom = '.spicy-units-choices-label-bottom';
         ui.ranges_left = '.spicy-units-choices-label-left';
         ui.linked = '.spicy-linked';
         ui.unlinked = '.spicy-unlinked';
         return ui;
     }

2. This function defines the related event for each UI element.

events: function() {
  return _.extend( ControlBaseMultipleItemView.prototype.events.apply( this, arguments ), {
   'click @ui.ranges_top' : 'TopRangeToggle',
   'click @ui.ranges_right' : 'RightRangeToggle',
   'click @ui.ranges_bottom' : 'BottomRangeToggle',
    'click @ui.ranges_left' : 'LeftRangeToggle',
    'click @ui.link': 'onLinkDimensionsClicked',
    'change @ui.top_choices' : 'setTopInputRange',
    'change @ui.right_choices' : 'setRightInputRange',
    'change @ui.bottom_choices' : 'setBottomInputRange',
    'change @ui.left_choices' : 'setLeftInputRange',
    'click @ui.unitLink' : 'linkUnit',
    'click @ui.gear' : 'gearToggle',           
   } );
 }

3. This defines the essential variables.

defaultDimensionValue: 0,
 range_control:'',
 name_control:'',
 gear_check:true,
 range_all:true,
 Range_top:true,
 range_right:true,
 range_bottom:true,
 range_left:true,

4. This defines initial function for control initialization.

 initialize: function() {
 ControlBaseMultipleItemView.prototype.initialize.apply( this, arguments );
 this.model.set( 'allowed_dimensions', this.filterDimensions( this.model.get( 'allowed_dimensions' ) ) );
 this.range_control = this.model.get(['range']);
 this.name_control = this.model.get(['name']);
 }

5. We need a function to select the proper unit when it’s clicked. The below function is used for top_unit.

setTopInputRange : function( event ) {
  var val = $(event.target).val() ;
  var min = this.range_control[val].min;
  var max = this.range_control[val].max;
  var step = this.range_control[val].step;
        
  $('li.spicy-control-multiunit > input[type=number][data-name='+this.name_control+'-top]').attr({"min":min,"max":max,"step":step});
}

We’ve also declared similar functions for right_unit, bottom_unit, and left_unit that you can find in the source code.

6. We need other functions to show/hide units when clicked. The below function is used for the top_unit.

TopRangeToggle : function (event) {
  var cat = $(event.target).attr("data-cat");
  if(this.range_top==false){    $('.spicy-units-choices-label-top[data-cat='+cat+']').not(event.target).hide();
  this.range_top = true;
  }else if(this.range_top==true){
   $('.spicy-units-choices-label-top[data-cat='+cat+']').show();
   this.range_top=false;
 }   
 }

We also declared similar functions for right_unit, bottom_unit, and left_unit.

7. The function below syncs top_unit, right_unit, bottom_unit and left_unit together.

linkUnit : function(event) {
  var text=$(event.target).text();
  $('div.spicy-units-choices > input[type=radio][name=spicy-choose-'+this.name_control+'-top][value='+"'"+text+"'"+']').prop("checked", true).trigger('change');
  $('div.spicy-units-choices > input[type=radio][name=spicy-choose-'+this.name_control+'-right][value='+"'"+text+"'"+']').prop("checked", true).trigger('change');
  $('div.spicy-units-choices > input[type=radio][name=spicy-choose-'+this.name_control+'-bottom][value='+"'"+text+"'"+']').prop("checked", true).trigger('change');
  $('div.spicy-units-choices > input[type=radio][name=spicy-choose-'+this.name_control+'-left][value='+"'"+text+"'"+']').prop("checked", true).trigger('change');  
  $('div.spicy-units-choices > input[class='+this.name_control+']').not(':checked').next().hide();
  $('div.spicy-units-choices > input[class='+this.name_control+']:checked').next().show();

this.allRangeToggle(event);
 }

Finally, we have other functions that are similar to the JS file of the Dimension control and other custom functions that we haven’t explained. But you can find them in source code.

Creating the CSS File

To style the UI of control in the panel, we need CSS rules as seen below.

ul.spicy-control-dimensions {
 width: 100%;
}

.spicy-control-input-wrapper ul li {
 width: 20%;
 float: left;
}

div.spicy-units-choices > input {
 display: none;
}

div.spicy-units-choices > input:checked+label {
 color:red;
}
.spicy-control-multiunit > label {
 font-size: 11px;
}

div.spicy-units-choices > input:not(:checked)+label {
 display:none;
}

.spicy-link-dimensions {
 width:90%;
 height: 30px;
 border: 1px solid;
 border-color: black;
 background-color: #7a8791;
}

div.spicy-units-choices > label { 
 border-radius:50%;
 padding:3px;
 font-size:9px;
 background-color:#ebebeb;
 line-height: 16px;
}

.units-wrapper {
 height :29px;
 margin-top: 5px;
}

.units-wrapper ul li {
 margin-bottom: 0px;
 margin-top: 4px;
}

div.spicy-units-choices {
position: absolute;
}

.spicy_linkAllUnit {
 position: relative;
 height:30px;
 font-size: 14px;
 border-top-right-radius: 5px;
 border-bottom-right-radius: 5px;
 border: 1px solid;
 border-color: black;
 border-left: 0;
 background-color: #7a8791;
}

.spicy-control-multiunit > input {
 border-right : 0;
 border-radius: 0;
 border-color:rgb(58, 57, 57) !important;
 height:30px;
 padding-right: 0;
}

.spicy-control-dimensions >.spicy-control-multiunit:first-child input {
 border-top-left-radius: 5px;
 border-bottom-left-radius: 5px;
}

.spicy_link_first {
 display:block;
 border-radius:5px;
 padding:3px;
 font-size:13px;
 color: white;
}

.spicy_link {
 display:none;
 border-radius:50%;
 padding:3px;
 font-size: 12px;
 color: brown;
}

.spicy-unlinked {
 display: none;
}

.spicy_tooltip {
 width: max-content;
 background-color: #e6e9ec;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;
 position: absolute;
 z-index: 10;
 top: -1px;
 right: 100%;
}

.spicy-units-choices-label-top {
 position:relative;
 z-index: 5;
}

.spicy-units-choices-label-right {
 position:relative;
 z-index: 4;
}

.spicy-units-choices-label-bottom {
 position:relative;
 z-index: 3;
}

.spicy-units-choices-label-left {
 position:relative;
 z-index: 2;
}
.spicy_link_first:hover .spicy_link_tooltiptext {
 visibility: visible;
}
.spicy_linkAllUnit .spicy_link_tooltiptext {
 visibility: hidden;
 width: 88px;
 background-color: #373434;
 color: #fff;
 text-align: center;
 border-radius: 4px;
 padding: 5px;
 position: absolute;
 z-index: 1;
 right: 0;
 font-size: 9px;
 bottom: -26px;
}
.spicy_linkAllUnit .spicy_link_tooltiptext::after {
 content: " ";
 position: absolute;
 right: 5%;
 bottom: 94%;
 margin-left: -5px;
 border-width: 5px;
 border-style: solid;
 border-color: transparent transparent #373434 transparent;
}

How to Use the Custom Control

It’s time to put the control in action. Follow the steps below in order to use the control.

1. Register the custom control in our plugin using the following codes.

add_action( 'elementor/controls/controls_registered', [ $this,'init_controls']);

public function init_controls() {

  // Include Control files
  require_once( __DIR__ . '/controls/multi_unit.php' );

  // Register control
  \Elementor\Plugin::$instance->controls_manager->register_control( 'spicy-multi-unit-control', new Spicy_multi_unit());

}

2. Add the custom control to any widget. Now, it’s ready to use.

$this->add_responsive_control(
  'multiunit',
             [
              'label' => __( 'MultiUnit ', 'spicy' ),
              'type' => 'spicy-multi-unit-control',
              'size_units' => [ '%','em', 'px' ],
              'allowed_dimensions' =>'all',
              'selectors' => [
                '{{WRAPPER}} .elementor-widget-container' => 'padding: {{TOP}}{{TOP_UNIT}} {{RIGHT}}{{RIGHT_UNIT}} {{BOTTOM}}{{BOTTOM_UNIT}} {{LEFT}}{{LEFT_UNIT}};',
                             ],
            ]
 );

For more information, you can read this article.

Conclusion

In this article, we tried to explain how to create a custom control for Elementor. Also, we describe the essential files of control and the structure of them. Finally, we created a custom control named MultiUnit.

Feel free to share your experiences with us in the comments.

Creating a Custom COntrol Elementor jupiter x wordpress customization

Say Cheese: The Anatomy of an Ideal Photography Website

Ideal Photography Website Featured Image

While social media has dramatically changed the world of photography, it has also provided platforms for ordinary people to reveal their inner photographers. And the majority of us embraced it for good as these social media sites have become increasingly popular by the day. But if you’re a professional photographer – or have a real passion and talent for it – it might be time to create an ideal photography website as a way to store and showcase your valuable photos.

Wouldn’t you prefer your beautiful snaps be displayed in a professionally made website to impress the crowd and potential clients rather than scattered around Instagram or Flickr? You owe that to your skills and talent!

Too confused to know where to start? We hear you! Starting off somewhere is always a hassle, but worry not! Jupiter X has got you covered! In this post, we’ll walk you through 5 photography website templates, explaining each one’s unique anatomy as well as features that will help you choose the best option that best suits your expectations and goals. It will also help you get your hands on your personal or corporate photography website in a snap!

Proserpina: Mixed

Multipage with right sidebar navigation and sectioned homepage

https://jupiterx.artbees.net/proserpina/

Ideal Photography Website Prosperina — Prosperina template with Mixed anatomy

Who should use it?

One of our popular photography templates, Proserpina, is perfect for both freelancers and studios who want an uncluttered, yet descriptive portfolio website.

Homepage Structure

The homepage consists of a full-height hero section that you can leverage to shout your name as your personal/professional brand with an intriguing background image, descriptive sections to write about yourself, your business and your projects, portfolio and one-half large sections with video background that adds a cinematic feel to your website if you want to showcase your video editing and shooting abilities. The burger menu with the right sidebar navigation effect helps place focus on the content and images more by keeping menu items out of sight.

Inner Pages

Proserpina has 2 inner pages: Portfolios and Contact. You can store your photo albums and collections in a clean portfolio page. Your concept and vision matter for every single photo. So what’s even better than putting them in different categories for faster and smoother navigation through your photos? Proserpina comes with Posts Element that you can categorize according to your point of view.

Forms, addresses, and social media channels make you reachable to your customers and give them a way to stay in touch with you. You have it all in the contact page, which is ready for customization.

With no more than 3 pages (Home, Portfolio, Contact), this template has everything your audience needs to know about you, your style and your work.

Locaste: Dark Minimal

Multipage page with a 4-column grid

https://jupiterx.artbees.net/locaste/

Ideal Photography Website Locaste — Locaste Photography Template

Want to impress your audience with nothing but your photos at first sight? Well, search no more! Locaste template does just that!

Who should use it?

This minimal template can suit both freelancers and studio owners of the same taste.

Homepage Structure

The homepage loads to a full gallery of photos using the images layout and is organized in 4 columns with no other text or elements to distract your visitors. And the tiny burger menu adds up to it! So the no-intro homepage style is also surprisingly compelling to website visitors.

Inner Pages

Locaste has 4 inner pages: About, Gallery, Blog and Contact. They all follow the overall minimal style of the template but contain multiple layout options to choose from for Gallery and Blog pages.

You can choose between various gallery and blog layouts, from classic to masonry, each with a categories option and different column structure to better organize your albums and posts.

Locaste Photography Template

The About page includes 4 main sections, a hero section with a background image, the about section to write about the artist or the business, a section to add teammates and the last section organized in 2 columns of an image and text, which can be dedicated to anything related to the photos, studio or the artist.

And finally, the contact page consists of a column for the address, social media accounts and a simple form following with a Google Map.

All in all, if you need a big album and a blog to write about the spirit behind your photos, this clutter-free template is the perfect choice. Just take your camera and let Locaste guide your fans through the magical world of your shots!

Cynosura: Minimal

Single page with no navigation

https://jupiterx.artbees.net/cynosura/

Ideal Photography Website Cynosura — Cynosura One-page Template

You’re a beginner, you know you’ve got the eye and want to share it with the world, but in no way want to mess with the technical hassles of creating a complicated website! We hear you and offer you the ultra-minimal one-page Cynosura template.

Who should use it?

This single page template is perfect for freelance photographers who just need to set up a virtual album and a place to communicate with those who find their photography interesting.

Homepage Structure

The homepage loads to a short intro consisting of a full-height background image and some minimal text without a navigation bar. There are no inner pages, and the portfolio is presented on the same page. So all you need to do is to add a photo album element, upload your photos, add your social media accounts and contact information in a simple footer, and trust us, that’s it! You have your simple cool portfolio website.

Arbius: Simple

Multi-page with 2-column Grid

https://jupiterx.artbees.net/arbius/

Ideal Photography Website Arbius — Arbius Photography Template

Who should use it?

This multi-page template is ideal for those freelancers who would like to add a bit more detail to their online portfolio.

Homepage Structure

The homepage starts with a short intro and portfolio organized in two half large columns that each can be served as an album containing more information and photos inside, as well as a minimal footer.

Inner Pages

Arbius has three more inner pages: About, Personal and Contact.

The about page is simply made up of some image and text elements and defines what can be called the best “about” page in its most concise and well-set way.

The personal page can be called your album storage. You can organize your photos into different albums here using the photo album element.

And, finally, the very simple contact page contains your personal studio address, phone number, and email. Isn’t that what a typical contact page should offer?

Jovial: Classic

Multi-Page with classic navigation and sectioned homepage

https://jupiterx.artbees.net/jovial/

Ideal Photography Website Jovial — Jovial Photography Template

Who should use it?

Jovial is a classic multi-page template, perfect for photography studios that consider their website as the main platform to present their services, explain the techniques they use and to showcase their work samples.

Homepage Structure

The section-based homepage starts off with an eye-catching intro, a full-height hero image, and scrolls down to more sections, each containing details and explanations about the services offered. The proper combination of image and text while avoiding an uncluttered overall look is noticeable.

Inner Pages

Like the majority of the classic website templates, Jovial also has many inner pages: About Us, Our Team, Projects and Contact Us.

The about page has an intro with bold headings on top and a cover image below. The inner sections in between can be served as side notes about your business. The fixed background with text element walking on it adds a sophisticated look to the page.

The team page has the same bold heading and cover image style and uses sections to introduce the team members. A whole descriptive section that speaks to the members’ background and experiences sounds great! Some of the sample works can also be added as posts to the page. It will for sure invite the visitors to check on the projects page!

The projects page is all about its name! Following the same intro style, it’s your treasure chest, storing your work samples and past projects.

And finally, the contact page which will serve as a bridge between you and clients with a Google map and contact information down the page.

Wrap Up

We showcased 5 models that represent different approaches in design and content for an ideal photography website and can be chosen as a foundation or inspiration for your photography website based on your brand’s characteristics and preferences.

Have you already started setting up your website? Do you plan to strengthen your online presence and let the world see through your eyes? Let us know in the comments!

ideal photography website jupiter x Photography

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

Restaurant Landing Page with Jupiter X Featured Image

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

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.

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.

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

jupiter x restaurant landing page with Jupiter X restaurant website

How to Perform a WordPress Backup in Jupiter X with BlogVault

Building a WordPress website with Jupiter X is like taking a walk in the park – it’s easy. But building a website isn’t where the story ends. Websites could suddenly crash or get hacked, which could leave you with a rapid decline in traffic and revenue. Bad things happen when you least expect it. Better to be safe than sorry, right? You need to get your site a WordPress backup.

Taking regular backups is the best way to ensure that you have something to fall back on when things go wrong. A simple restoration can get your website up and running in no time.

So all you need to do is to have a good backup solution. But how do you go about choosing one? What does an ideal backup solution offer?

Choosing a Good Website Backup Solution

There are several WordPress backup services to choose from, which makes it difficult to select the right one. You either end up making a wrong choice or worse: you don’t choose at all.

But identifying a good backup service is not as difficult if you know what to look for. The backup solution should be able to provide the following:

Complete backups
Incremental backups
Multiple backups
Real-time backups
Backup storage
Restoration
Independent dashboard
Customer support

1. Complete backups

Your website contains different kinds of data. There are posts, pages, images, videos, tables, settings and configurations that should be backed up. A backup solution must be capable of backing up all these types of data and ensuring that it’s safely archived.

2. Incremental backups

Breaking the data into small chunks not only makes it easier to backup but also makes sure that nothing is left behind. This is called backing up your website incrementally. Incremental backups are best for large sites that contain a lot of data. The risk of leaving data behind is much higher for large websites.

3. Multiple backups

An ideal WordPress backup solution will take multiple backups of the same version and then store it in different locations. It can be stored in the solution’s own server or on cloud storage services like GDrive, DropBox or on your local system. It should also secure the backup copies by encrypting them so that if someone lays their hands on your backup, the copy will be illegible.

4. Real-time backups

Some websites need more than daily backups. Let’s say, for instance, that you run a very active photography blog. New pictures are being added and dozens of people are commenting and buying your prints. You’ll need to take backups in real-time for such a dynamic website. Every single change made on the site has to be backed up instantly. Failing to do so will cause loss of valuable data, such as prints that visitors added to cart but didn’t order. In such cases, you’ll lose orders when disaster strikes.

5. Backup storage

Simply taking backups is not enough: the data must be stored in an accessible location. Sometimes backups are stored on the site server, which makes it impossible to access them on certain occasions like when you can’t access your hosting account. Not just that, the server suffers because it’s burdened with storing backups on top of performing its regular processes.

6. Restoration

There are times when you need to restore your website. Many solutions don’t offer a reliable way to restore backups. Failing to implement a complete restore is a common complaint among website owners. Select a backup solution that comes with a good record for website recovery.

7. Independent dashboard

In a worst-case scenario, performing a backup is your fall back option. But what if you can’t access your backups when you need them? If the backup plugin is accessible only from the WordPress dashboard and if you lose access to wp-admin, then you won’t be able to access your WordPress backup either. Having a completely independent dashboard enables you to retrieve backups even when you can’t enter your website.

8. Customer support

Customer support is a primary benefit for a paid tool. But not all paid tools offer good customer service. A good backup solution values your time by offering reliable and agile customer service. Responses must be quick and easy to understand.

With that, we have covered everything that makes a good backup service. BlogVault Backup Solution is a service that checks all the boxes. Trusted by over 400,000 websites, BlogVault is the most reliable WordPress backup and restoration solution. Learn more about what the solution offers here.

You can use BlogVault to backup your Jupiter X website. In the next section, we’ll demonstrate how.

How to Perform a WordPress Backup with BlogVault

Step 1: First, sign up and add your website to BlogVault. From the dashboard, select Add New Site and enter your website address.

WordPress Backup Step 1 — Add your site by selecting ‘Add New Site’

Step 2: Next, install the plugin to your site. There are two ways to do this. You can automate the installation or do it manually. We’ll show you both.

WordPress Backup Step 2 — You can install the plugin manually or automate the process.

Install the BlogVault plugin manually

WordPress Backup Download Plugin — To download the plugin, click on Download Plugin

Download the plugin from your BlogVault dashboard. Then go over to your website and upload the plugin by navigating to Plugins > Add New > Upload Plugin.

WordPress Backup Upload Plugin — Upload the plugin to your Jupiter X site.

Alternatively, you can install the plugin like any other WordPress plugin. Head straight to your website dashboard and then go to the Add New plugins page. Search for BlogVault in the Search bar and then install and activate the plugin.

Auto-install the BlogVault plugin

The benefit of auto-installing the plugin is that you don’t need to go to your website. Simply enter your site credentials (BlogVault doesn’t save your admin credentials) and select Install plugin. That’s it. The plugin will be installed on your site automatically, and the WordPress backup process will begin instantly.

WordPress Backup Automatic Install — Insert the username and password of your Jupiter X website.

The plugin will backup your entire website and store it safely. Since your website is being backed up for the first time, it’ll take some time. Sit back and relax. You’ll get a notification once the process is complete.

Conclusion

You should be able to rely on backups for any unforeseen situations. Whether you want a new backup service or plan on upgrading your old service, you need to verify whether it offers all the essential features.

In this guide, we explained all these features to be on the lookout for and showed you how to install BlogVault, a WordPress backup solution that’s one of the best out there. We hope you found our guide useful. If you have any questions, feel free to leave us a comment below.

BlogVault jupiter x Website Backup wordpress backup WordPress Development

Socially Hosted vs. Locally Hosted Videos: Pros and Cons

So, let’s say that you own a website and know that videos have a better impact on your viewers. You provide an entertaining video including all the main points and you’re now ready to publish it onto your site. Now, what are your options in showing it to your visitors?

Generally speaking, you have two main options:

Using a socially hosted video
Using a locally hosted video on your own website

So you might be asking yourself the main advantages of each. If you can clearly grasp the benefits of socially hosted vs locally hosted videos, then you’ll be able to make an informed decision based on your requirements. Let’s review the costs and benefits for each one.

Socially Hosted Videos

YouTube and Vimeo are two famous video sharing websites. Chances are that you already know how to use them. Although other video sharing websites such as Wistia are trending these days, the most popular ones continue to be YouTube and Vimeo. The good news is that it’s easy to embed a video from these websites in Jupiter and Jupiter X.

The process of adding a video from any video sharing website to your WordPress website is as easy as inserting the link of the video into your content or using it in a proper widget in your page builder. Assuming that you have uploaded a video on YouTube and embedded it into your website, you’ll have the following benefits:

Losing fewer server resources

Your server is no longer responsible for responding to video requests, so it’ll for sure use fewer resources. It may save you some money, especially in the cloud-based web hosts that calculate the price based on server usage.

Prepared Statistics

Need some metrics to measure the impact that video made on your viewers? No worries, the video-sharing websites typically provide proper measurement tools so you can even see which countries your visitors are from or what your recent popular videos and comments on your channel were.

Socially Hosted Videos Statistics — Youtube Analytics inside the Youtube Studio where you can moderate your channel

Visibility and sharing options through a large community

Yes, the video-sharing website itself will allow for your video to be searched and viewed. This will help you grow your online visitors if you provide the correct description and link your customers to the proper places. Besides that, you’ll have sharing options too. This means that you’ll get a better visitor flow when some users like your video and share it on their social networks or their own websites (if you allow it, that is). This is actually one of the best reasons to use socially hosted videos on your website.

Some other benefits like the more advanced video players (similar to what YouTube offers) will choose the video’s quality depending on the user’s connection speed. Such options might also encourage you to use a socially hosted video over a locally hosted one. But let’s see how much it costs for you to go the social route.

Performance loss

It’s true – your website will have a lower performance if you try GTMetrix or other performance testers out there. The reason is that the video player needs to load, and it usually has a lot of dependencies on different domains which will be requested by your browser and will certainly increase the website loading time. If you use a lot of videos, the result would be even worse than you think.

Video player customization

You cannot customize or control the video player when using a socially hosted video. (However, while Wistia resolved it somehow, this is still valid for YouTube and Vimeo). This becomes worse when you want to show a video on a section background where users should not see the video controls and borders.

The YouTube border on the top and the controls at the bottom during the first three seconds of a **Background** video. Currently, the YouTube player does this, and there’s no way to prevent it.

Video not available for different visitors

Sometimes, you might be unaware that you have an issue (for example, a trademark issue) with your video. Video sharing websites will detect this and won’t allow users from certain locations to watch the video. If you don’t pay attention to the notifications from YouTube or Vimeo, then this could lead to a loss in your number of viewers.

In general, maintaining your content in separate places like on YouTube and your own website could be a bit tricky. You are hosting a part of your content somewhere else, meaning that you’ll need to maintain it properly and keep it updated based on the video-sharing terms of use. Also, you need to be careful about the ads that are played on your videos. By default, they are disabled for embedded videos, but if you enable them, you need to make sure that you won’t lose customers because of it.

Now let’s take a look at locally hosted videos.

Locally Hosted Videos

By locally hosted videos, I mean that you upload the video on the same website and web host. So, the video file has the same domain name as your main website. Now, assuming that you have prepared your video and want to show it to your customers, let’s see what you will get if you upload it onto your own website. In general, the benefits of socially hosted videos are the costs here and vice versa.

Better speed performance

While you host your video on the same websites, the requests going to your server will be resolved instantly on your own server, and the browsers will not have to deal with other domains to load a video player. It’ll speed up the server response time.

Controlling the Video Player

You’ll have full control of the video player with locally hosted videos. You can deactivate the controls, timelines, and titles, you can mute the video or add a loop to it or even use a very customized video player if you install a video player plugin.

Locally hosted videos Video Plater — The video is playing inside a laptop video frame mockup using Raven’s Video player without showing the controls.

You can make sure that your video is playing for all your users

You’ll no longer lose your customers over the “this video is not available in your region” error message. However, if you pay attention to the video-sharing website notifications, you won’t face it with that problem either. But in case any new terms show up, making your video unavailable for some of your users might cause you to lose some customers until you fix the issues. You won’t come across this issue at all when using locally hosted videos.

Now let’s take a look at some of the downsides of locally hosted videos.

Multiple formats required

You would need to provide two well-known formats for your video to keep your users around: MP4 and Webm. Unlike YouTube or Vimeo where you can freely upload any video format you like and then easily use them on your website, you have to convert your videos into the correct format and codec and then upload it onto your website.

Big files require big resources

Wondering why your monthly traffic usage increased suddenly? One of the reasons might be the videos you have hosted on your website. If each visitor plays the video to the end, the traffic used will be at least equal to the size of the video. So be careful about your server resources when you host a video. Actually, by 2021, probably more than 60% of web traffic will belong to videos.

Statistics are not easily available

Want to know the impression your video made when you uploaded it on your web host? You’ll need third-party plugins or services or extract the raw data from your server logs. This is a bit time consuming even for advanced users. So, if the statistics are very important for you and you don’t want to pay for other services, you might consider using socially hosted videos.

Final Thoughts

Based on the facts above, you need to decide whether socially hosted or locally hosted videos will work better for you. If you’ve already used locally hosted videos and think that the server usage is not worth keeping the videos on the same server, simply migrate your videos to video sharing websites such as YouTube or Vimeo.

On the contrary, if you think that the performance of your website is much more important and will outweigh the benefits of using socially hosted videos, start moving your videos to your own website. This article will help you decide wisely about the way you deal with your own videos.

jupiter x Locally hosted videos Socially hosted videos Video Sharing

Here’s Everything You Need to Know About the New Generation of Jupiter X Templates

If you’ve been checking the Artbees weekly newsletters in recent weeks, then you may have noticed the recent new additions to the Jupiter X templates world! We not only added an advanced search module to the Jupiter X templates repository and to some of the landing pages but we also added about 60 brand new templates that are different in many ways.

In this article, I’m going to explore a little more about these additions. So let’s start with why we ideated and released this new generation of templates and which problem we tried to solve with them.

What are the problems with the usual website templates?

1- They are a dumb piece of generic design!

They are all generic so they can hunt a bigger chunk of users with one template. You can easily say when a website is built upon a template.

2- They look perfect until you touch them!

Just take a look at it on dumblatemobster.com, which is as charming as a McDonald’s Hamburger until you unbox it!

3- They are lifeless, not lifelike

Website templates basically do not reflect a real mission and purpose in their content. They are not really built to carry out a purpose.

Meet Jupiter X’s latest round of templates

In its update to the template repository over the past two months, Jupiter X has added about 60 new website templates for you that addresses all the downsides of the usual website templates! And they are from a vast category of niches and types. They encompass businesses and sectors such as agencies, leisure, online shops, creative portfolios, blogs, health, restaurants, listings, startups, events, community and much more. And even more stunning templates are on the way every month.

So what are these templates capable of in addition to being beautiful, customizable and responsive?

New Jupiter X templates carry a purpose

Long gone are the days of “design is beauty.” Design means more of purpose than aesthetics now so despite a usual template’s promise. Even when you add your copy and replace the dummy images with your own images. you are far from the actual website you were waiting to see. It’s because your template is just a presentation without a mission.

Purposeful Architecture

The new approach in template design at Artbees is not only in designing a visually appealing template. It’s a design that serves the mission of that template. The mission of a template consists of:

Mission of the website as a whole (based on its category and niche)
Mission of the homepage or landing page
Mission of the inner pages

The driving force and philosophy behind the new templates is to fulfill these missions.

Jupiter X Templates Purposeful Architecture

Targeted Design

Your template’s design boils down to your customer profile and what is appealing to your business audience. The category/niche belonging to a template plays a critical role in its design. The characteristics of the target audience for that business have been deeply thought about and the findings are made sure to get reflected in that niche’s template design.

Actionable Storytelling

Your Jupiter X template will convey your remarkable story tailored to a specific audience. It’s geared to generate leads and convert those leads into paying customers. Sometimes this is done with a mouth-watering food menu and a booking option right underneath. Or with a timeline and list of achievements to showcase a company’s credibility and trust with an option to call or email.

Content such as hero sections, headings, and call-to-action buttons are now in complete harmony with your website’s purpose and goal. Moreover, most of the templates now include nimble pop-up designs that support your site’s mission by drawing in subscribers or helping to boost sales.

Meet Jupiter X Advanced Template Finder

With the new 60 templates added to the repository, the Jupiter X template count now exceeds 220. While this might be an impressive figure for a WordPress website builder, it can also be worrisome for some users as they are left with several options and unsure about how to find the right template for themselves.

In order to better organize the growing number of Jupiter X templates, we built an advanced template finder module into the Jupiter X control panel as well as our demo websites. This is a powerful tool that locates the right template(s) based on the various factors that you set such as:

Keywords (manually entered)
Category
Style
Header Type
Menu Type
Components
Content-Type

Once you get your hands on it, it’ll prove a very effective way of filtering down the templates you are really after instead of wasting time opening and checking irrelevant templates.

What’s Next?

Jupiter X templates are a tool you can use to build authentic-looking websites with genuine content for businesses with a goal. And the best part? You don’t need to be a designer or a marketer. So the quick answer to the above question is: ‘A lot more new templates’! We will constantly build new templates based on this new approach and add them to the repository.

Stay current with the new added templates by checking the Artbees weekly newsletter and let us know if there is any niche or category you’d like to see as the next template released in Jupiter X. We transformed our template design approach based on Jupiter X community feedback and now look forward to your feedback about how we did it. Enjoy what’s left of the summer 😉

jupiter x jupiter x templates website templates

How to Customize your Blog with the Blog Customizer in Jupiter X

How to customize your blog featured image

Knowing how to customize a blog in WordPress has always been a big challenge, particularly for those who don’t want to deal with coding. Want to do something like creating a custom single post simply to remove a page title? Or something more complicated like changing the entire layout of single blog posts? Of course, the latter is much more involved.

The Blog Customizer is one of Jupiter X’s best features as it allows users to create custom single blog pages quickly and easily. It’s highly customizable, and you can change the layout of your blog pages without a single line of code.

By using the single Blog Customizer, you can:

Change the whole template of single blog posts.
Display/hide every element of the blog posts such as featured image, title, author box, etc.
Customize and change the styles of the blog post elements.

In this article, by using a practical example, we’re going to show you how easily you can customize your blog single page using the Jupiter X Blog Customizer feature. Let’s first create the single blog page before customizing it.

Adding a New Post

1. You are probably familiar with creating blog posts in WordPress. All you have to do is click on Posts > Add New from the WordPress sidebar menu.

How to customize your blog add a new post

2. Now you’re in the post editor. You can add a title and content to your post. Also from the right sidebar in the editor, you can add categories, tags and a featured image to your post. These things are optional but as we want to show how we can customize them, let’s add categories, some tags and a featured image to our post.

3. To be able to customize your posts with the Jupiter X Blog Customizer, your posts must have a Default Template. So from the right sidebar menu, find Post Attribute and select the Default Template.

4. Publish (Update) the page.

Important: To customize your posts with Jupiter X Blog Customizer, you must create at least one post and set its Post Attribute to the Default Template.

How to Customize your Blog Posts via Blog Customizer

To customize your posts:

1. From the left menu in WordPress, go to JupiterX > Customize > Blog > Single Blog

2. A new window will open with all the available options to customize and style the blog post. The Single Blog Customizer has two tabs: Settings and Styles. The first tab (Settings) allows you to choose a default template for your blog posts and enable or disable the feature image, title, date, author, categories, etc for them. In the second tab (Styles), you can change the styles of each element of the blog post.

Settings

Here are the available options for customizing the blog posts that you can find in the Settings tab.

Template

Choose a default template from the sample templates.

Display Elements

Enable/disable the below elements in the blog posts. The available elements include the following:

Featured Image: Displaying a representative image for our posts
Title: Displaying the title of the post
Date: Showing the publish date for each post
Author: Displaying the author of the post
Categories: Showing the post categories
Tags: Showing the post tags
Social Share: Adding a social share button for our blog posts
Navigation: Navigating through the next and previously published posts
Author Box: Displaying all the author’s information, such as the author’s name, bio, avatar, etc.
Related Posts: Displaying the related posts at the bottom of each blog post.
Comments: Enabling/disabling the comment feature for blog posts.

Styles

Here, you can change the styles of every enabled element in the blog post. All the available options for styling elements can be accessed by clicking on Customize for each element.

Here are some sample options for element customization:

Margins and Paddings

You can set margin and padding for every available element for the blog post.

how to customize your blog margin and padding

Units

Units are crucial to set font sizes, measuring spaces, setting the width, etc. Because of that, you can set different units for all the properties that have units. There are four types of units in the Jupiter X Customizer: PX, REM, EM, and %. By clicking on the chosen unit, other possible units will be shown, and you can choose another unit for the property.

Responsive Option

An important and useful feature in Jupiter X Customizer is the responsive option. This option allows you to set different values for different screen sizes for some of the properties of a particular element. For example, you can choose different font sizes for tablet and mobile screen sizes. For every property that has the responsive option, you will see the Monitor icon next to it. By hovering over the monitor icon, three devices will be displayed, and you can choose another value for them.

Case Study

Let’s assume that we want to customize a single blog page by using the Jupiter X Blog Customizer.

Here is what we do:

Create blog posts.
Customize global options.
Enable/disable elements in your blog posts.
Change the styles of existing elements.

Creating blog posts

We’ve described this section earlier. To customize your blog posts, you must create at least one blog post, but we recommend that you have multiple blog posts as we want to show the related posts below each blog post. Also, we suggest you add some tags and set a featured image to your posts to be able to display them for all single pages.

To emphasize what was mentioned before, the Page Attribute option for all of your posts must be set to the Default template.

Customizing global options

Before customizing blog posts, you might want to change the style of the body text or remove/add a sidebar from/to your pages. Also, you can decide whether the Title Bar must be visible for your pages or not. These options can be set globally and not only for the blog posts.

To change the style of body content:
Go to WordPress left menu > Jupiter X > Customize > Fonts and Typography to customize it.

Let’s add the popping font named popping. From Typography, click on Customize for Body. Set the font family to Poppins and the font size to 16px.

To remove the sidebar from your pages:
Go to WordPress left menu > Jupiter X > Customize > Sidebar and set its layout to No Sidebar.

And finally, let’s remove the title bar from our pages by going to Jupiter X > Customize > Title Bar and disable the Title, Subtitle, and Breadcrumb from it.

how to customize your blog title bar gif

Finally, Publish the changes.

Enabling/disabling elements in your posts

You must decide which elements that must exist and which elements must be removed from your blog posts.

We have multiple pre-made templates for our blog posts that we can select and then customize to our preferences. Let’s choose the first template.

Also, we want to remove Comments and Navigation elements from our blog posts and keep all the other options enabled:

All the changes happen instantly.

Change the styles of existing elements

So now that you’ve decided which elements should remain on your blog posts, it’s time to change the styles of enabled elements. Keep the Blog Customizer’s panel open, and go to the Styles tab.

Featured Image

Let’s start from the first element. Click on Customize for Featured Image. Set the max-height to 500px, border-radius to 0 and margin-bottom to 3rem. Here is our final customization for the Featured Image:

Title

Let’s go for the second element, which is Title. We won’t touch any settings for color and the font family so it inherits these styles from its parent which is body, But we will center align it, and change its font size to 2rem. 2rem means it’s two times bigger than its parent’s font size (body: 16px), so it equals 2x16px = 32px. Here is the result:

Social Links

You can add your desired social links icon to the bottom of your blog posts. They could either have names or simply keep the icons visible.

Author Box

We have plenty of options for customizing the author box. Let’s add a border-radius: 50% to our avatar to have a circular profile image in the author box. And change the font-size for the name, description and the social icons. Note that WordPress collects this information from your profile. To modify it, from the left menu in WordPress, go to Users > Your Profile and add the required information there. Here is the result:

Finally, let’s customize the Related Posts element. Changing the font size and adding a little bit of margin to the top and bottom of this element is enough.

This is the result after customizing single blog posts with the Blog Customizer:

After you’re done with all the customizations, simply close the Single Blog settings panel and Publish the changes.

Summary

In this article, we’ve explained how to customize your blog posts with the Jupiter X Blog Customizer. We showed how you can add your desired elements to blog posts, remove any unwanted ones and easily and quickly change the styles of all the available elements.

We’d love to hear from you. Let us know your experiences with Jupiter X Blog Customizer in the comment section below!

blog customizer how to customize your blog jupiter x

Modern Website Design Trends in 2019

What’s trending on the web today is likely to be forgotten tomorrow. When thinking about building a website, many business owners are afraid due to the sheer number of modern website design trends to follow. You need to learn the rules of this game so that your website is in tip-top shape and has enough conversion.

What is a “modern website design trend” in 2019?

First, let’s look at what a modern website trend is. The trend reflects the changes taking place in the web society. Also, it’s an indicator of development. What doesn’t develop dies.

Web design trends come and go in circles. As time progresses, web design trends and development technologies directly impact what we consider “good” and “bad” in website building. The truth is that presently web is at the point where web design is not limited by technology.

Today, we can do pretty much everything we might want to do on the web. And the future of web design is no longer about what we can do, rather, what we should do to design websites that result in positive experiences for users.

How do Design Trends Appear

What are your thoughts about how web design trends appear? Well, some believe that web designers gather secretly at night to create something extraordinary. Others think the thoughts of web designers are intuitively the same. At last, the third option states that web designers have a predicted forecasting team who predict the future “needs & wants” of consumers.

In fact, there’s nothing wrong with any of these options. One thing is certain here: each web design trend goes a long way until the moment when web design professionals are bound to use it.

Think of a trend as the general direction that the web market is taking during a specific period of time. The time for a trend to appear may take longer than predicted or it may not even become a trend at all.

Typically, web design trends are not something that changes within a few weeks. Instead, they evolve gradually, making it easier for web designers to find the most creative way to implement them. Many trends are cycled by nature, some of them come and go, while others are here to stay. And those web designers who know the difference between a fleeting fad and a real trend are the ones who create web products that compel us to admire and take action.

Top 5 Web Design Trends for 2019-2020 (with Examples)

So, what are the top design trends for 2019-2020? Well, by looking across the high-predictable and high-impact modern web design trends, it’s worth highlighting the top 5 web design trends for 2019-2020.

Custom Three-Dimensional Looks

It seems 3D designs are everywhere right now. The fame of fabulously flat designs is gone. Today, web designers are looking to add depth and realism to graphics with only one purpose: to breathe life into your projects by embracing 3D elements. Having proved itself as a quite stable and persistent modern web design trend for the last few years, 3D needs to be high up on your list.

Sometimes web designers use 3D designs as windows to another world. Especially, when they need to define the contrast between two worlds – the digital and physical ones. MakeReign, a digital design studio website, is an ample example of that. It has earned multiple awards, including Awwwards Site of the Day and FWA of the Day.

Sometimes web designers use 3D designs to create the world around you. They can even construct new environments and dimensions to let you enjoy AR and VR experiences on a go.

Some creative web designers go even further. They go outside the box and create imaginary spaces full of surreal and abstract elements. The playful and cartoon nature of a Pitch website is the best illustration of that.

At last, 3D design confidently takes its place in the world of typography. New eye-catching 3D typefaces pop off the page and are part of the main design. Often, some web designer pros use 3D typography as a go-to tool to improvise. They sometimes do this to create a whole new world you need to overdo.

In the above image, you can see letters constructed of blocks and machine parts in bold colors that are extra punchy in 3D. The object smoothly emerging from nowhere makes you stop and focus attention on it.

When you visit the Arche68 website, you’ll be impressed with its outstanding design that has nothing in common with fashion. In fact, it takes some clicking to discover their purpose (hint: they sell fashion accessories). Yet, it’s one of the many fashion websites that opt for a wilder approach with bold typography that creates an innovative, eye-catching design.

More Vibrant Bright Colors

Vibrant, vivid colors will continue to be trendy in 2019-2020. This time, get ready for even more bright and striking colors. Standard website elements are long gone. Today, more original, creative and vibrant designs are making waves. As a result, the overall design feels more futuristic. Thus, mesmerizing and out-of-this-world designs of Spotify or Elje captivate at first sight. All-in-all, a bright color is everywhere.

Gradient color shifts across the page create a natural flow between image and text, guiding a visitor’s eye so that reading information feels more natural and comfortable.

When designing your own website, give it up to the gradients combined with bright, vivid colors. It’s a surefire way to add movement onto your page. Website designs differ – one may lack photography, while others don’t have imagery elements. That’s when gradients can change the way your website is perceived by visitors.

Even More Video

In our day and age when a picture says a thousand words, a video says it best. With a large and beautiful hero image, gaining the attention you need is a no-brainer. Now, a relevant and great video of your brand or your customers speaking for you is a game-changer. It will create a tremendous impact on your visitors, increasing your conversion rates up to 80%.

It’s not a secret, most visitors have no desire to stay for long on a website. Even though speed is such a huge factor today, a great video tends to increase conversions. For that reason, different social media platforms prioritize videos over other kinds of posts. If done right, a video that can grab attention raises your website metric.

Videos work particularly great when you need to explain complex things quickly. Look at how rapidly and effectively CEI The Digital Office convey their message in a matter of seconds. Breaking through the online noise is hard. With a high-quality video, you can do a lot for your branding.

What is the best way to show off? Marisa Passos has the solution. Just visit her personal portfolio to learn how to pitch yourself in the most effective manner. You can’t help but admire her work.

Minimalistic Asymmetrical Layouts

Minimalism – which is not new but trendy – is still hot. Because it keeps a visitor focused, minimalistic design dominates the web. The best thing is that it presupposes that your website is simple and clean. Our life today is dynamic and full of distractions that bombard us from every direction. We don’t have the time or the desire to pay attention to the complex structure or distracting elements.

In fact, combined with asymmetrical grids, your website design has a chance to stand out. Ideal for creating hierarchy, asymmetrical grids are nothing but the best.

The Impact website is one of the best examples of minimalistic asymmetrical layouts. The idea is to call attention to what matters most. So, they break up the content into several parts. Each of them guides the user’s eyes to the information they’re looking for.

When it comes to asymmetrical hierarchy, Ruston Paving sticks out a mile. Peculiar placements and repeating incorrect patterns are a whole new game. A mix of colors and textures sparks attention. At last, the user-focused design funnel people to the right places.

Geometric and organic shapes

What is the best way to add a sense of playfulness and creativity to modern website design? It’s not only colors that evoke particular thoughts and emotions. Specific emotions and feelings are no stranger to geometric shapes. Why not add a bit of extra vibe and dynamism to your web design? Triangles, hexagons, and circles are a big deal in modern web design.

Just take a look at how great the Calar website is. With brilliant, vivid color palettes and interactive elements, their website makes a user feel like a child in art class. Get creative with shapes, and you’ll succeed in establishing visual hierarchy. What part of your website do you want your users to notice?

In fact, streamlined lines are especially successful if supplemented by different shapes. There are no straight lines in nature, so streamlined forms give a website much more loyalty. Rounded corners have appeared to become a trend last year.

Final Thoughts

It’s always fascinating to watch how modern web design trends appear and evolve with time. But what’s more interesting is to watch how some trends turn out differently than expected.

All in all, responsive, clean, speedy and user-friendly websites continue to make waves. 2019-2020 will see the introduction of other web design trends and features, and the ThemeREX team is quite excited to see them coming.

jupiter x Modern Website Design Trends Web Design Trends in 2019 wordpresss themes

Understanding WordPress Hooks

WordPress, the most popular CMS (Content Management System) is known for its flexibility. It’s highly customizable, and making any changes is incredibly easy. One of the most important aspects of WordPress and its flexibility is WordPress hooks. In this post, we are going to explore what exactly a WordPress hook is, how it works and how we can use them.

Users are able to extend WordPress functionality by using plugins. WordPress.org has more than 55,000 plugins in its repository – many of which are free. There are some premium plugins hosted by WordPress.org as well.

So, even by looking at the plugin’s stats, we see that a lot of developers create plugins for WordPress. This is due to the flexible nature of the WordPress structure. So where do hooks come into play? They are an integral part of how plugins work with WordPress core.

What is a WordPress hook?

Let’s break it down. A WordPress hook will let you know that something is happening. In other words, a hook will let you run custom codes when loading a WordPress website to add, remove or modify certain functionality or data. You can do the following with a hook:

Executing a code to send a welcome email right after a new user has registered to the site.
Running a custom code to clear site cache after saving new changes in customizer.
Modifying the default admin footer text.
Changing the label of the “Register” button on the registration page.
Modifying the markup of the page right before the page loads.
Including new styles in certain conditions.

The main point of using hooks is that you don’t need to touch WordPress core files that are required by WordPress to work. If you edit any file in WordPress core, you’ll lose it after updating WordPress.

These are some basic examples of WordPress hooks. As previously mentioned, they work with certain functionality or data. So, there are two different types of WordPress hooks:

Actions
Filters

WordPress Actions

Action hooks can be used to add custom functionality when needed. For instance, imagine that you want to run a code to log the last login time for each user. You’ll need to run a piece of code that records the time right after a user logs into the site. So you’ll need to run an additional functionality at a certain time. In this case, we would have to use action hooks. Action hooks work with functionality – they are doing something new.

How do action hooks work?

Action hooks are similar to informing everyone that you want to do a specific thing such as saying, “Hey buds, I’ve just arrived” or “Bye guys, I’m leaving.” When you inform others, they are aware of what you did or what you want to do, and they can say something in response, remind you of something or react in any other type of way.

While WordPress is loading and reaches a specific point, it’ll let us know about it. So, you can run your codes to add specific functionality or to extend existing functionality.
Some examples of actions include the following:

wp_head When you reach the <head> tag, WordPress lets you know by running the wp_head hook. Remember it as a name. We will provide you with some codes and an explanation about how to use hooks.

publish_post This runs when a post is published or if it is edited and its status is changed to “published.” So, Imagine that you want to tweet a post automatically after publishing it to your WordPress site. This hook makes it easy for you to do it.

wp_footer This action hook is triggered near the tag. That means you are reaching the end of document markup. Many developers use this hook to include their javascript files to the footer of the page.

WordPress Filters

Filter hooks work with data. By data, we mean a simple text, HTML markups and even a PHP variable that could be the value of an option. This means that you can change an option value on the fly. Or you can change a certain text in the admin dashboard without editing WordPress core files. Also, filters could be used to modify multiple things at the same time. For example, you can add a new class name and data attribute simultaneously to the navigation menu items using a filter.

How do filter hooks work?

Filter hooks differ from action hooks. When you reach a certain code, WordPress allows you to make changes to something. Imagine that your child wants to go to school and right before going out, you put an extra book in their backpack. In this example, you’ve changed the content of the backpack and filtered it when you had access to it. Filters work in the same way. They will let you know that content is going to be printed or when an option is going to be used – and you’ll be able to modify it if you want.

Some real example of filters are:

login_erros This runs whenever an error is going to be shown to the user in the login page.

body_class This fires (runs) while generating the tag. Use this filter hook if you want to modify the class names of the body tag.

pre_delete_post This fires right before deleting a post. You may want to avoid sending them to the trash and delete them completely. This filter hook will be useful for you.

How to use WordPress hooks

We’ve covered the basics of WordPress hooks. It’s time to learn code and use actions and filters in the real world. In this section, we’ll see some new things such as Hooked functions, Hook priority and Hook arguments.

Basic WordPress hooks usage

add_action( ‘init’, function(){
     // Do something.
 } );

Code explanation:

add_action: This is a function from WordPress. You’ll need to use this whenever you want to register a new action hook (run an action).

init: This is the hook name. Each event has a unique hook name. You can find a list of existing WordPress hooks on the Plugin API/Action reference page.

function(): This is the callback. The code that you want to execute when reaching the event.

For filters, it is a bit different:

add_filter( ‘excerpt_length’, function( $value ){
     // Do something and change $value.
     return $value
 } );

add_filter: Same as actions, this is a function name from WordPress. You’ll need to use this whenever you want to register a new filter hook.

excerpt_length: Again, this is the hook name. Hook names are meaningful. So, while using excerpt_length you can expect that it will change the excerpt length of the post excerpt.

function(): This is the callback and the code that you want to execute in order to change something.

And the big difference with actions:

return $value

Filters need to return something. Why? Because using filters, you’re going to change something, not destroy it. If you don’t return, your variable/value will be missed. So, keep in mind, always return in filter callback.

Another way to implement this:

add_action( ‘init’, ‘my_callback’ );

 Function my_callback(){
    // Do something.
}

In this mode, we have separated the callback function instead of using an anonymous function. There is no difference.

Hook Priority

add_action( ‘init’, ‘my_callback_early’, 9  );
add_action( ‘init’, ‘my_callback_normal’, 10 );
add_action( ‘init’, ‘my_callback_late’, 11 );

The priority determines when the callback function will be executed in relation to the other callback functions associated with a given hook.

In the above example, my_callback_early is the first function that runs when reaching the init hook. After that, the my_callback_normal will run and at the end my_callback_late.

When there are multiple registered callback functions for the same hook with the same priority, the order of registering them will be used to running callback functions.

Hook Arguments

A callback function can take some arguments. For example, the excerpt_length hook will pass the current length as a parameter. So you have access to it in your callback function.

add_filter( ‘excerpt_length’, ‘my_custom_excerpt_length’, 10, 1);

function my_custom_excerpt_length( $length ) {
  $length = 50;
  return $length;
}

In the above example, 10 is the priority of the running callback, and 1 is the number of the callback function parameters. Because both of them are like default values, you can avoid writing them. The following code does exactly the same thing:

add_filter( ‘excerpt_length’, ‘my_custom_excerpt_length’ );

Practical Examples of WordPress Hooks

Add new admin menu and page:

function register_my_custom_menu_page() {
     add_menu_page( 'Custom menu page title', 'Custom menu label', 'manage_options', 'myplugin-settings.php', '', '
 dashicons-menu-alt3', 6 );
 }
 add_action( 'admin_menu', 'register_my_custom_menu_page' );

Change the excerpt length

function my_custom_excerpt_length( $length ) {
     return 35;
 }
 add_filter( 'excerpt_length', 'my_custom_excerpt_length', 999 );

Insert custom content after each post

function my_custom_post_footer($content) {
        if(!is_feed() && !is_home()) {
                $content.= "<p>Share your idea about this post in comments.</p>";
        }
        return $content;
}
add_filter('the_content', 'my_custom_post_footer');

Disable autosave

function my_prefix_disable_auto_save(){
    wp_deregister_script( 'autosave' );
}
add_action( 'wp_print_scripts', 'my_prefix_disable_auto_save' );

Change the login page message

function my_prefix_the_login_message( $message ) {
    if ( empty($message) ){
        return "<p>Welcome to this site. Please log in to continue</p>";
    } else {
        return $message;
    }
}
add_filter( 'login_message', 'my_prefix_the_login_message' );

Remove login error messages

function my_prefix_remove_login_errors( $error ) {
    return "Incorrect login information";
}
add_filter( 'login_errors', 'my_prefix_remove_login_errors');

Final Thoughts

Wrapping up, WordPress hooks are one of the most important concepts that allow us to develop plugins and add new custom functionality to WordPress. Again, don’t forget to return when using a filter hook ;).

In this article, we guided you through the basics of WordPress hooks, including what they are and how they work. We also gave you some examples of how they are used in code to add further functionality to your website.

In the comments section below, please share your experiences and thoughts with us!

jupiter x WordPress Development wordpress hook