Create a scrollable tab like the WebFlow website using Jupiter X

Scrollable Tabs Post Featured Image

One way to provide visitors to your website with a seamless experience is through creating a scrollable parallax tab similar to the WebFlow.io homepage. Creating a scrollable parallax tab will allow users to access much of your site’s content as soon as they land on your homepage.

Many of our users asked about how to go about building a scrollable tab, and we’re here to answer! And what’s even better is that the Jupiter X theme has endless possibilities that can help you create a similar tab (as seen below) by using a simple trick. If you’re also curious about how you can build this amazing tab using Jupiter X, read this article to the end.

WebFlow sample scrollable tab.

What we need to create a scrollable tab:

  • Jupiter X Pro theme and its Elementor page builder
  • Jet Tricks from the Jupiter X bundled plugins
  • Raven, an exclusive Artbees plugin to extend the functionality of Elementor

First of all, allow me to briefly explain the whole process. We won’t use any tab elements to represent this. Instead, we’ll use the Raven Navigation Menu element and anchor links (#tab1, #tab2 …) as the tab titles. Then, we’ll use multiple sections that have the same ID as the anchor links (so when you click on the menu items, scroll to those sections).

And in the end, we’ll add the Sticky effect to the column container of the menu navigation element using the Jet Tricks plugin. Then, we’ll proceed to write a custom CSS snippet to add a transition to the menu items and make them bigger when they are active. Before starting, make sure you’ve already activated the above plugins from Jupiter X -> Control Panel -> plugins.

So, let’s start by building our menus. Navigate to Appearance -> Menus and create a new menu. Then add your Custom Link items. Remember to use the anchor links like #tab1, #tab2 … as the menu item link.

Add menu items with anchor link hashtags to be considered as Tab titles.

We are now done with this part of the process. Let’s create a page, and do the rest. From the Pages -> Add New, create a new page and start editing with Elementor.

Edit the page with Elementor.

In Elementor, drop a Section into your page, and divide it into two columns. Then drop a Navigation menu to your left column, and add a CSS class to the navigation menu.

Scrollable Tab Screenshot 3 - Add a CSS class to the menu in order to avoid conflict while wiring CSS snippets.
Add a CSS class to the menu in order to avoid conflict while wiring CSS snippets.

The next step is to add a custom CSS to make each menu stay in one line and also to enlarge them when they are active. So, from the page settings (bottom left corner of the page), choose the Advanced tab and then add the following CSS snippet in the Custom CSS section (JX).

/* Add Transition to the items */
.custom_tab_titles li a {transition: 0.2s all;}

/*make the items bigger when they are active while having transitions */
.custom_tab_titles li .raven-menu-item-active {transition: 0.2s all;
    transform: scale(1.3); margin-left: 0.8em;}
    
/* put each menu in one line */
.custom_tab_titles li {clear: both; display: block; width: 100%;}
Scrollable Tab Screenshot 4 - Add CSS snippet to make the menu items vertically aligned and add transition to them on mouse hover.
Add CSS snippet to make the menu items vertically aligned and add transition to them on mouse hover.

Now add some Inner Section elements to your other column. We need to assign an ID equivalent to the menu anchors in order to make them scrollable when clicked.

Scrollable Tab Screenshot 5 - Add a different ID to each inner section equivalent to each anchor link hashtag
Add a different ID to each inner section equivalent to each anchor link hashtag.

Add as much of your content as you want to your scrollable tabs. Here, I kept it empty in order to make it more understandable. I also added a min-height 400px to each inner section. You can avoid it or add more height. The styling part completely customizable, and you can do what you want with it.

The last step is selecting the Column container of the Navigation menu and adding the Sticky behavior to it.

Scrollable Tab Screenshot 6 -
Follow the steps in order to enable the sticky option for the navigation menu. It will be considered as the Tab titles later on.

I also added some typography settings and color changes to the navigation menu in order to make the scrollable tab more eye-catching. Take a look at what we have now:

Scrollable Tab Gif 2 - The scrollable tab made by Jupiter X and Elementor.
The scrollable tab made by Jupiter X and Elementor.

One of the great things about using Jupiter X to create a scrollable tab is that you have the flexibility to create a tab exactly to your liking. You have the option of adjusting the margins and paddings to fine tune the tab, as well as to style every corner of your new tab.

Additionally, you’re not limited by how many tabs you can have: you are free to add more and style them in any way you see fit. Don’t worry about getting carried away in adding too many new elements as this has been tested on all modern browsers, and it’s compatible with all of them.

In this blog post, we’ve provided you with the details on how to create a tailor-made scrollable parallax tab, similar to what can be seen on the WebFlow home. We also illustrated how to create this awesome tab with Jupiter X Pro (and the Elementor page builder), Jet Tricks and Raven.

Do not hesitate to ask any questions you may have in the comments below.

Different Ways to Add Custom Code Snippets in WordPress

Custom Code Snippets in WordPress Featured Image

Used by more than 60 million websites, WordPress is a popular, powerful and flexible Content Management System (CMS). One of WordPress’ valuable features is its extensibility architecture that allows users to expand WordPress features via plugins. In many cases, site owners need custom codes to improve the functionality of their website. In this way, custom code snippets plugins in WordPress can be a handy tool.

Sometimes when surfing the internet, we come across articles that explain how to add custom code snippets to the template files like index.php, footer.php or edit function.php files. These methods aren’t safe or recommended.

There are only two safe methods to add custom code snippets in WordPress:

  • Using plugins
  • Using the child theme

Adding Custom Code Snippets in WordPress Using Plugins

There are some plugins that allow you to add custom PHP, HTML, CSS and JavaScript codes in WordPress. In this article, we try to cover some of them with examples. Some of the plugins are listed below.

Insert the PHP Code Snippets Plugin

Custom Code Snippets in WordPress - Insert PHP Code Snippet

Using this plugin, we can add our PHP code conveniently to our pages, posts and widgets.

Features

  • Convert PHP snippets to shortcodes.
  • Insert PHP code easily using a shortcode.
  • Support for PHP snippet shortcodes in widgets.
  • Dropdown menu in TinyMCE editor to easily select snippet shortcodes.

Example

In this example, we want to display the number of content words in a post/page after a post or page.

1. After installing this plugin, click on PHPCode Snippet from the left sidebar of the admin page.

Custom Code Snippets in WordPress - PHP Code Snippets

2. On the new screen, click on the Add New PHP Code Snippet button.

Custom Code Snippets in WordPress - PHP Code Snippets 2

3. Set

  • Tracking Name: words-count
  • PHP code (this code displays the words count for a page or content post)
<?php

  function word_count() {
       $content = get_post_field( 'post_content', get_the_ID());
       $word_count = str_word_count( strip_tags( $content ) );
       return $word_count;
    }

  echo 'Words:', '  ' , word_count();

?>
Custom Code Snippets in WordPress - PHP Code Snippets 3

4. Click on the Create/Update button.

5. The plugin generates a shortcode as [xyz-ips snippet=”words-count”].

Custom Code Snippets in WordPress - PHP Code Snippets 4

6. Go to Posts > Add New. At the end of the text, insert the above shortcode.

Custom Code Snippets in WordPress - PHP Code Snippets 5

7. After publishing the post, we can see the number of words in the post.

Insert the HTML Snippet Plugin

custom code snippets in WordPress - Insert HTML Snippet

Inserting the HTML Snippet allows us to create shortcodes corresponding to HTML snippets. We can create a shortcode corresponding to any random HTML code such as JavaScript codes, video embedding codes, CSS codes, among others and use the same in posts, pages or widgets.

Features

  • Convert HTML snippets to shortcodes.
  • Convert Javascript codes to shortcodes.
  • Convert CSS codes to shortcodes.
  • Support for snippet shortcodes in widgets.
  • Dropdown menu in TinyMCE editor to pick snippet shortcodes easily.
  • Insert Adsense or any add codes.
  • Insert flash, videos, etc. to your posts, pages, and widgets.

Example

In this example, we want to generate a Google Translate button after our post.

1. Install the plugin, and go to XYZ HTML > HTML Snippets.

Custom Code Snippets in WordPress - HTML Code Snippets 1

2. On the new screen, click on the Add new HTML Snippet button.

Custom Code Snippets in WordPress - HTML Code Snippets 2

3. Set

  • Tracking Name: translate
  • HTML Code (this code generates the Google Translate button)
<div id="google_translate_element"></div>

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

4. Click on the Create button.

Custom Code Snippets in WordPress - HTML Code Snippets 3

5. The plugin will generate the shortcode as [xyz-ihs snippet=”translate”].

Custom Code Snippets in WordPress - HTML Code Snippets 4

6. Go to Posts > Add New. Set the title and content the add [xyz-ihs snippet=”translate”] at the end of the post.

Custom Code Snippets in WordPress - HTML Code Snippets 5

7. Publish the post, and you will be able to see the Google Translate button after the post.

Custom Code Snippets in WordPress - HTML Code Snippets 6

Simple Custom CSS and JS Plugin

Custom code snippets in WordPress - Custom Css

Customizing your WordPress site’s appearance can easily be done by adding custom CSS and JS code without modifying the theme or plugin files.

Features

  • Text editor with syntax highlighting.
  • Print the code inline or include it into an external file.
  • Print the code in the header or the footer.
  • Add CSS or JS to the frontend or the admin side.
  • Add as many codes as you want.
  • Keep your changes when you change the theme.

Example

In this example, we want to change the background color of the admin bar with the CSS snippet.

1. Install the plugin and go to Custom CSS & JS > Add Custom CSS.

Custom Code Snippets - Custom CSS 1

2. On the new screen, in the options section, check the Internal, Header, In Admin radio button and set the following:

  • Title : admin-bar-background-color
  • Code (code change background color of admin bar in the admin page)
#wpadminbar {
    background-color: rebeccapurple;
}
Custom Code Snippets in WordPress - Custom CSS 2

3. Click on the Publish button. You’ll be able to see that the admin bar background menu changed.

Custom Code Snippets in WordPress - Custom CSS 3

Code Snippets Plugin

Custom Code Snippets in WordPress - Code Snippets Plugin Banner

This is a powerful, simple and handy plugin that lets us add our PHP, HTML, CSS and JavaScript snippets to our websites.

Features

  • Providing a GUI interface.
  • Snippets can be activated and deactivated.
  • Categorize snippets with tags.
  • Snippets can be exported for transfer to another site.
  • Full-featured code editor.

Example #1

In this example, we want to disable standard widgets like Archives, Recent Posts, Recent Comments with the simple PHP snippet. The default page is similar to the image below:

Custom Code Snippets in WordPress - Code Snippets Plugin 1

1. Install the plugin, and go to Snippets > Add New.

Custom Code Snippets in WordPress - Code Snippets Plugin 2

2. On the new screen, set:

  • Title: Remove standard widget
  • Code (Remove Archives, Recent Posts, Recent Comments from the right sidebar of the homepage).
function unregister_default_wp_widgets() { 

    unregister_widget('WP_Widget_Archives'); 
    unregister_widget('WP_Widget_Recent_Posts'); 
    unregister_widget('WP_Widget_Recent_Comments'); 
}

add_action( 'widgets_init', 'unregister_default_wp_widgets', 1 ); 

3. Save and activate the snippet.

Custom Code Snippets in WordPress - Code Snippets Plugin 3

4. After reloading the homepage, you’ll be able to see that the Archives, Recent Posts, Recent Comments have been removed.

Custom Code Snippets in WordPress - Code Snippets Plugin 4

Example #2

In this example, we want to change the font size of the post with the JavaScript code.

1. Go to Snippets > Add New.

2. Set

  • Title: change the font size
  • Code ( Increase the font size when clicking on the post text and decrease font size when holding down the SHIFT key and clicking.)
add_action( 'wp_head', function () { ?>

<script        src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>

    <script>	
    $(document).ready(function(){
    $(".jupiterx-post-content").click(function(){
        if (event.shiftKey) {
            $(this).css({"font-size": "-=10%"});  
        } else {
            $(this).css({"font-size": "+=10%"});
        }
    });

  });

  </script>

<?php } );

3. Check the Only run on site front-end radio button and save it.

Custom Code Snippets in WordPress - Code Snippets Plugin 5

At the end, when clicking on the post text, the font size will have been changed.

Custom Code Snippets in WordPress - Code Snippets Plugin 6

Adding Custom Code Snippets in WordPress Using Child Theme

In WordPress, a child theme is a sub-theme that inherits all the functionality, style and features from the parent theme. The child theme is a safe way to change or modify the parent theme without modifying parent theme files.

Example

Let’s add our default content to the WordPress editor.

Our default content: “This is some custom content. I’m adding it to the post editor because I hate re-typing it.”

1. Active the child theme on your site (for more information, read this article.)

2. Go to Appearance > Editor.

Custom Code Snippets in WordPress - Child Theme 1

3. Open the functions.php file.

Custom Code Snippets in WordPress - Child Theme 2

4. Add the below code at the end of functions.php, then update it.

add_filter( 'default_content', 'my_editor_content' ); 

  function my_editor_content( $content ) { 
    $content = "This is some custom content I'm adding to the post editor  because I hate re-typing it."; 
 
    return $content;
}
Custom Code Snippets in WordPress - Child Theme 3

5. After modifying functions.php, go to Posts > Add New or Pages > Add New. You’ll be able to see that our default text has been added to the editor.

Custom Code Snippets in WordPress - Child Theme 4

Conclusion

In this article, we first introduced several plugins for adding custom code snippets in WordPress. We also included some examples on how to use HTML, CSS, JavaScript and PHP snippets using the plugins.

Finally, we showed how to add custom code snippets in WordPress with the child theme. Feel free to share your experience with us in the comments.

WordCamp Europe 2019: Meet Makers of Jupiter X, Get Exclusive Swags & Win an AirPod!

WordCamp Europe 2019 Featured Image

Summer is here and so is another WordCamp Europe! WordCamp Europe 2019 will be held on June 20-22 at the Estrel Hotel and Congress Center in Berlin this summer, and we just cannot wait to attend another great 3 days packed with all things WordPress! This means meeting the best of the WordPress family and community, who will attend the biggest gathering of the technology that we, you, and one-third of the worldwide web loves!

What is a WordCamp?

The WordCamp Central website says, “WordCamps are informal, community-organized events that are put together by WordPress users like you. Everyone from casual users to core developers participate, share ideas, and get to know each other.” Every year, tens of WordCamps are held in different cities around the world. Local WordCamps focus more on local communities and continental WordCamps such as WordCamp Europe, WordCamp US, and WordCamp Nordic gather members of a wider region or from around the world.

Why should you attend?

WordCamps are where everyone who lives and breathes WordPress get together. Developers, businesses, designers and even end users. It’s a great opportunity to get to know and network with many people who might end up being your next colleague, business partner or customer.

WordCamp Europe 2019 - 3
Archived photo from WordCamp Europe 2018

They are also a great opportunity to experience and practice an event not driven for profit by a community not formed solely around benefits. This event is organized and run by a large group of volunteers and financially powered by sponsor funds and humble attendee tickets. So you will experience a different atmosphere and culture than what you may get at other events such as WebSummit or TNW Conference.

What happens at WordCamp?

WordCamps truly reflect the vibrant community that attends it. This dynamic two-three day event consists of different sections such as talks, workshops, contributor sessions, networking, WP Cafe, social hours, after parties and much more.

Contributor Day

Each WordCamp has a Contributor Day, which is a daylong session dedicated to contributing to the WordPress open source project. Different groups are formed to contribute in different fields such as core, design, marketing, community, and polyglot. WordCamp Europe will have its Contributor Day on its first day, Thursday, June 20.

wordcamp europe 2019 - Last year WordCamp Europe 3
Archived photo from WordCamp Europe 2018

Talks and workshops

WordCamps are also famous for their various talks and workshop sessions. Every year, hundreds of talks are presented by WordPress professionals at WordCamps about different aspects of WordPress – from development to business to marketing!

The WordCamp Europe 2019 schedule promises a vast variety of topics such as SEO, accessibility, Gutenberg, diversity, copywriting, support, REST API and more. Some of the sessions we are interested in attending include:

Matt Mullenweg Keynote

WordPress co-founder and visionary leader Matt Mullenweg has a famous ‘Matt on WordPress’ talk in which he shares the status of WordPress and its key points in the past 6 months (and the same at WordCamp US for the next 6 months of the year) as well as the short-term roadmap for the software.

What’s special about WCEU 2019?

wordcamp europe 2019 - Jupiter X sponsor image

As the second WordCamp Europe we’ll be joining, Artbees is attending WCEU 2019 at full capacity this year! Our very own Jupiter X is an official sponsor of WCEU 2019 and will happily showcase the product in our booth during the Conference Days on June 21 & 22. We will also join Contributor Day to contribute to the marketing, design and development teams.

wordcamp europe 2019 - Last year WordCamp Europe 2
Archived photo from WordCamp Europe 2018

In the days preceding WordCamp Europe 2019, there are great meetups such as Envato Worldwide organized by Envato, Meet Makers of Elementor by the folks of the Elementor team and the Freemius/WPEngine meetup, all of which we will try to attend.

Meet the makers of Jupiter X

Five members of the Artbees family, including the co-founders, will be in the Jupiter X booth at WordCamp 2019 during the Conference Days, as well as Contributor Day and many side meetups. Let’s meet, chat and share! There is also some fancy Artbees and Jupiter X swag waiting for you in our booth.

wordcamp europe 2019 - Meet Artbees Team

Enter our exclusive AirPods giveaway!

wordcamp europe 2019 AirPod giveaway

We’re raffling off a FREE set of AirPods to any participant who tweets a photo taken in our booth. Stop by our booth at WordCamp 2019 on June 21 & 22 to learn more! You can find more info on the participation process on our exclusive WCEU page.

Do follow our coverage of WCEU 2019

Do follow the #WCEU hashtag and our channels on social media for special coverage of WordCamp Europe 2019 from Wednesday, June 18 to Saturday, June 22. We will cover different sections of the event, including Matt’s keynote, expert talks, the Jupiter X booth as well as the side meetups and events.

Have a great weekend, and we’re looking forward to meeting all of you guys at WCEU 2019 this year 😉

How to Quickly Create a Landing Page Using Custom Blocks in Jupiter X

Elementor is an extremely powerful page builder. Among all its features, the ability to manage and create a landing page with custom blocks is quite handy. It allows you to build different parts of a website, then combine them into a page.

What is a custom block?

A custom block is similar to a piece of a puzzle or a brick of the wall. A landing page or complete website has several sections like a header, footer, hero, slider, testimonial, form, and so on. With the custom block feature, you can create each section separately and use each in any site or web page.

What are the benefits of a custom block?

  • Ability to use readymade block templates.
  • Creating a custom block once, then using it on several web pages or websites.
  • Ability to export/import the custom blocks.
  • Increasing the speed of creating a web page.

How to Create Custom Blocks

By using Elementor with the Jupiter X theme, you’ll be able to create different types of custom blocks: Page, Section, Header, Footer. With these types, you can create various custom blocks for any web page.

To create a custom block, follow the steps below:

1. From the left sidebar of the admin page, click on Elementor > Templates > Add New

Create a Landing Page Using Custom Blocks 1

2. Select the type of custom block, then enter a template name and click on the Create Template button.

3. In Elementor editor, add a new Section then add a widget.

4. There are two methods to save the custom block.
1). Right-click on the section button, then click on Save as Template.

2). Right-click on the Save Options button then click on Save as Template.

How to Export/Import Custom Blocks

Another valuable feature in Elementor, particularly when it comes to creating a landing page using custom blocks, is exporting/importing. With this feature, you can easily create custom blocks and export them. Also, you can import custom blocks that have been created by other people.

Exporting a custom block

There are two methods to export a custom block.

1. Go to Elementor > Templates > Saved Templates then click on the Export Template button.

2. In the Elementor editor, click on the Add Template button then click on the Export button in the Library popup.

Importing a custom block

To import a custom block from your computer, click on Elementor > Template on the left sidebar of the admin page. Then in a new window, click on Import Templates and choose your file to upload it.

How to Create a Landing Page Using Custom Blocks

A landing page (a.k.a static page, lander, lead capture page) is a standalone page that shows all the important content of any website on a single web page.

Creating a Header Block

The Header block is one of the moment sections on each website. In this case, it contains brand and social icons.

  1. Create a Template and set the type to Header.
  2. Add a new Section with two columns.
  3. Add a Heading element then set the following settings.
    • On the Content tab, set Title to Law <span style”color: rgb(248, 88, 88)”>.</span>
    • On the Style tab, set color to #000000
  4. Add a Social Icon element the set following settings.
    • On the Content tab, create 4 icons as: Facebook, Twitter, Google+, WordPress
    • Also set Shape to circle and Alignment to Right.

Creating a Hero Block

The Hero block is one of the most important elements when you create a landing page using custom blocks as it represents the leading message and the product promoted by your website. In this case, it contains two headings and a call-to-action button.

  1. Create a Template and set the type of it to Section.
  2. Add a new Section then set the following settings.
    • On the Layout tab, set Height to Fit to Screen and Column Position to Middle
    • On the Style tab, set Background Color to #565656
  3. Add a Heading element then set the following settings.
    • On the Content tab, set Title to Expert Legal Solution, Alignment to Center
    • On the Style tab, set Color to #ffffff
  4. Right-click on the first Heading element, click on Duplicate, and then set the following settings.
    • On the Content tab, set Title to Defend Your Constitutional Right with Legal Help
  5. Duplicate the previous heading then set Title to Business Law
  6. Add Button then set following settings.
    • On the Content tab, set Text to Make An Appointment, Alignment to Center
    • On the Style tab, set Background color to #f85858, Border Radius to 28px
    • On the Style tab > Typography set Size to 18px, Weight to 300, Letter Spacing to 2.1
    • On the Advanced tab, set margin-top to 5%

Creating a Stats Block

Stats block is a section that allows you to input information and the statistics of your operations, followers, subscribers, delivered projects, among other data points. Typically, a web designer uses a counter, progress bar, and chart.

  1. Create a Template and set the type of it to Section.
  2. Add a new Section with one column then set the following settings.
    • On the Layout tab, set the Height setting to Min Height equal to 400.
    • On the Style tab, set the Background color to #efefef
  3. Add an Icon element then set the following settings.
    • On the Content tab, set Icon setting to user-o
    • On the Style tab, set Color to #f74242, Size to 60, and Alignment to Center
    • On the Advanced tab, set margin-top to 15px
  4. Add a Counter element then set the following settings.
    • On the Content tab, set Starting Number to 0, Ending Number to 27539, Animation Duration to 2000, Title to Satisfied Clients
    • On the Style tab > Number section, set the Text color to #000000, in Typography set: Size to 45, weight to 200, Line-Height to 1.6 EM
    • On the Style tab > Title section, set the Text color to rgb(0,0,0,0.36), in Typography set Line-Height to 4 EM
  5. Duplicate the first column three times, then set different icons and titles as explained before.

Creating an About Us Block

In web design, the aim of the About Us section is to introduce your team, experience, expertise, operations, services, and to briefly answer questions like: “who are we?” and “what do we do?”.

  1. Create a Template and set the type of it to Section.
  2. Add a new Section with two columns then set the following settings.
    • On the Layout tab, set Content Width to Full Width
  3. Edit the left Column then set the following settings.
    • On the Style tab, set Background Image to this image. Since you can’t see the background image, you need to add an element like Spacer element to the left column.
  4. Edit the right Column then set the following settings.
    • On the Style tab, set the Background color to #665e5c
    • On the Advanced tab, set Padding top to 27 and Padding bottom to 24
  5. Add an Inner Section element to the right column.
    • On the Layout tab, set Minimum Height to 450px.
  6. Add a Heading element then set the following setting.
    • On the Content tab, set Title to Why Choose Us?
    • On the Style tab > Typography, set the weight to 300
    • On the Advanced tab, set margin-top to 25
  7. Add a Text Editor element then set the following setting.
    • On the Style tab > Typography, set Line-Height to 1.6EM
    • On the Advanced tab, set margin-top to 5
  8. Add a Progress Bar element then set the following setting.
    • On the Content tab, remove Title, set Inner setting to Adoption Law, Percentage to 50
    • On the Advanced tab, set margin-top to 50
  9. Duplicate the previous Progress Bar then set the different settings as explained above.

Creating a Contact Us Block

The Contact Us section allows your visitors to view your business contact info. It’s also quite common to add a contact form to this section for easier communication.

  1. Create a Template and set the type of it to Section.
  2. Add a new Section then set the following settings.
    • On the Layout tab, set Minimum Height to 500
  3. Add a Heading element then set the following settings.
    • On the Content tab, set Title to Contact Us, Alignment to Center
    • On the Style tab, set color to rgb(0,0,0,0.84), in Typography, set size to 47px
    • On the Advanced tab, set margin-top to 95px, margin-bottom 100px.
  4. Add an Inner Section element with two columns.
  5. In the left Column, add an Icon list element then set the following settings.
    • On the Content tab, create 4 items then set proper settings like Text to 198 West 21th Street, Suite 721 New York NY 10016, Icon to location-narrow. Repeat the same steps for other items with different settings.
    • On the Style tab > List, set Space between to 25, Divider to On, Style to solid, weight to 1
    • On the Style tab > Icon, set Color to #dd290d, size to 14
    • On the Style tab > Text, set Color to #9b2f14
  6. In right Column, add a Form element then set the following settings.
    • On the Content tab > Form Fields, create 3 fields then set the settings like Type to Text, Label to Name, Placeholder to Name, Column-width to 100%. Repeat the same steps for other items with different settings.
    • On the Content tab > Submit Button, set Text to Send, Icon to Send
    • On the Style tab > General, set column-spacing to 7, Row-spacing to 7
    • On the Style tab > Button, set Text color to #ededed, background color to #e8241e

Creating a Testimonials Block

The Testimonials Section showcases user feedback about your products.

  1. Create a Template and set the type of it to Section.
  2. Add a new Section then set the following settings.
    • On the Layout tab, set Height to Fit to screen
    • On the Style tab, set Background Color to #efefef
  3. Add a Heading element then set the following settings.
    • On the Content tab, set Title to Testimonials, Alignment to Center.
    • On the Style tab, set Color to rgb(0,0,0,0.84),
    • On the Style tab > Typography, set Size to 45px, Weight to 300
    • On the Advanced tab, set margin-bottom to 75px
  4. Add a Testimonials element then set the following settings.
    • On the Content tab > Settings, set Slides to show to 1, Effect to slide, Animation speed to 5000, Show Dot Navigation to yes
    • On the Content tab > Items, add 3 items and set favorite data to Image, Comment, Name, Date.

Creating a Footer Block

The Footer Section normally contains small widgets that provide information about the website. It may also contain other widgets for additional information.

  1. Create a Template and set the type of it to Footer.
  2. Add a new Section with one column then set the following settings.
    • On the Style tab, set Background Color to #ffffff
    • On the Advanced tab, set Padding-top to 40, Padding-bottom to 20
  3. Add an Inner section element with 3 columns.
  4. Add a Heading element for the first column then set the following settings.
    • On the Content tab, set Title to Attorney’s Law, Alignment to left
    • On the Style tab, set color to #515151, in Typography, set the size to 24px, weight to 300
    • On the Advanced tab, set margin-top to 10px, margin-bottom 33px
  5. Add a Text Editor element in the left column then set your favorite text.
  6. Duplicate the Heading element in the first column and add it to the second column and set Title to Opening Hours and Alignment to center.
  7. Add an Icon List element then set the following settings.
    • On the Content tab, create 3 items then set settings like Text to Mon – Thu: 9:00 – 21 00. Repeat the same steps for other items with different settings.
    • On the style tab, set Space Between to 8, Alignment to center
  8. Duplicate the Heading element in the first column, add it to the third column, and set Title to Contact Information and Alignment to center.
  9. Add an Icon List element then set the following settings.
    • On the Content tab, create 3 items, then set the settings like Text to 198 West 21th Street, Suite 721 New York, Icon to Address-Book. Repeat the same steps for the other items with different settings.
  10. Add a Heading element then set the following settings.
    • On the Content tab, set Title to © 2019 Free HTML5. All Rights Reserved. Designed by FreeHTML5.co Demo Images: Unsplash, Alignment to Left.
    • On the Style tab, set Color to #545454, in Typography, set Size to 16px, Weight to 400

Combining all Blocks

After creating the necessary blocks, let’s combine them to create the final page.

1. Create a new Page from the left sidebar of the admin page.

2. In the new page, set the Template to Elementor Canvas from Page Attributes. Update the page and click on the Edit with Elementor button.

3. In the Elementor editor, click on the Add Template button.

4. In the Library popup, click on the My Templates tab. In this tab, you can see your custom blocks (imported or created). Finally, click on insert.

5. Add the templates in the following order: Header, Hero, Status, About Us, Contact Us, Testimonials, Footer.

Note: After adding each custom block (template), the layout of the page may reset. To assign the correct layout, click on the Settings button and choose the proper layout.

Conclusion

In this article, we showed you how to create a landing page with custom blocks in Jupiter X. We further explained the process of building custom blocks from scratch. But don’t worry – if you need readymade custom blocks, you can check out Jupiter X readymade blocks.

More Than a Block Editor: Pros and Cons of WordPress 5.0

The new version of WordPress was already released in the market on the 27th of November 2018 and advanced editor for the CMS system called Gutenberg was also published on the same day. The newly released WordPress 5.0 is given the name ‘Bebo’ after the Cuban jazz composer Bebo Valdes.

Here, you will get to know about the pros and cons of WordPress 5.0 block editor. While recognizing the leading pros and cons of WordPress 5.0 block editor, you will be able to use the CMS more conveniently. As WordPress is one of the leading CMS platforms in the world, it is remarkable how the new version can be more attractive to users.

When it comes to the statistics, WordPress is backed by a prominent position. In a report by the W3 techs, WordPress holds a significant market share of 58.55%. This market share is much more significant than other CMS systems like Joomla and Drupal combined.

Meanwhile, Netcraft published a recent report which shows that WordPress dominates over nearly 27% of the entire internet. This data implies that over 20% of websites present on the internet in self-hosted style are built with WordPress.

In such a scenario, you can be sure that the latest update can help a large number of web developers. With the latest WordPress features, you can comfortably carry out the necessary tasks related to the web building process.

The Pros and Cons of WordPress 5.0 with the Gutenberg Block Editor

Pros

  • Better visualization for faster work

As we all know, Gutenberg is a block editor; thus, it can provide a more convenient display to the users. As a user, you can prominently use your creativity. You need not worry about the functionality of the site much while creating the web pages.

Pros and Cons of WordPress 5.0 Pro 1
  • The minimized dependency of TinyMCE

The new WordPress 5.0 version beside the block editor has a much lesser dependence on the TinyMCE. The TinyMCE is one of the online rich-text editors through which the earlier WordPress editor used to convert the HTML. In WordPress 5.0, the block editor is meant to deliver better integration of the plug-in’s cores and themes.

With the new Gutenberg editor, you can get a speedy editing experience as there is less need to visit the TinyMCE. As a result, there is a distinct chance of completing the work related to the page makeup faster.

  • All the benefits of Medium Editor are present

There is good news for most web developers who have earlier used the Medium Editor and worked conveniently in the WordPress. The Gutenberg editor contains similar benefits as the Medium Editor and gives the user a chance to create any content easily.

Thus, by the Bebo version of WordPress, the users can have full control over the content they are creating. One can also get total access to third-party tools whenever necessary.

  • Gadget-Friendly

While discussing the pros and cons of the WordPress 5.0 Gutenberg Editor, the central positive fact we came across is its gadget-friendliness. The interface you get is efficiently gadget-friendly. You can quickly work with this interface in tablets, smartphones, or laptops, as well as the traditional desktops.

Pros and Cons of WordPress 5.0 Pro Gadget
  • Friendly to the Users

You should be aware that user-friendliness is one of the leading pros that older versions of WordPress have forever possessed. Now, the latest version with the WordPress 5.0 Gutenberg Editor is easier to use. So, you should always consider the fact that the new version has better usability along with the Block Editor.

Cons

  • Compatibility Issues

As WordPress provides the benefits of working with numerous plug-ins, it is essential for the editing system to be compatible with them. The main con of the WordPress Bebo version is that it might not work well with several themes and plug-ins.

Moreover, the Gutenberg editor demands more work from the end of the developer. This happens due to the decreased use of TinyMCE. However, all the updates that will be made later can improve the backward situation of the compatibility of the editor.

  • No Full Meta Box Support

In the case of the Beta version of the Gutenberg, you cannot get many essential components of the Meta box. This is another con which might ruin your convenience of working with the WordPress 5.0 version. The only good thing that the Gutenberg editing system has is the Yoast SEO support. There is a prominent expectation that other Meta boxes might work efficiently with Gutenberg in the future.

Pros and Cons of WordPress 5.0 Con 1
  • No Markdown Support

However, working with WordPress is beneficial in many ways; the Gutenberg review might spoil the markdown support. The WordPress Bebo beside that block editor has a prominent con as Markdown is absent. It is a markup language of the lightweight with the ugly test syntax.

If you are the one who has so far used the Markdown language, there might be some problems in getting accustomed to the Gutenberg editor. You should nevertheless expect that the compatibility to the Markdown language will be added shortly.

  • Bad Accessibility

You must be aware that the Gutenberg Editor that comes with the WordPress Bebo is hard to access. In this editor, you cannot find the API that the CRM earlier used to rely upon for building the plug-ins as well as the themes.

So, these are some of the pros and cons of WordPress 5.0 along with the Gutenberg editor. You should always incorporate it only after thoroughly researching the worthiness of the WordPress Bebo. In case you have lighter jobs to do, and you are a beginner, the 5.0 version is best for you.

Verdict

In spite of all its shortcomings, you should be aware that the latest WordPress is the future. The CRM developers are trying their best to make the WordPress Bebo the best among all the versions available so far. You should also expect a quick road to perfection given the position which WordPress holds in the CRM market.

How to Do A/B Testing to Troubleshoot the Theme Issues with Jupiter X

A/B Testing Featured Image

What do you do when you face a problem using any of your tools? Some people stop using them entirely, while some try to fix it to avoid having to replace a perfectly good tool. But how do you fix something when you don’t know its mechanism? The answer is simple: Compare it with a fixed version of your tool and see which part is having the issue.

What is A/B testing?

This is how the so-called A/B testing technique can be used to troubleshoot an issue. It doesn’t matter if your tool is a tangible object, virtual machine, or software You can use this method to troubleshoot and solve the problems you encounter. You probably did it before without knowing that your using the A/B testing strategy, but let me give you some examples so you understand it better:

  • The moment that you decide to set up camp in the forest and pitch your tent, you are actually doing an A/B testing. You are always comparing between different locations and tents. Should I put my tent here or there? What will happen if I place it here? How do the other tents look? Are their campsites better than mine? You are pretty much using A/B testing at that moment to find and examine the best location available for your tent.
A/B Testing Tent
  • The moment that a laboratory scientist compares between normal and healthy samples to give you the results of your blood test, he/she is using A/B Testing.
A/B Testing Lab

The moment that you are in a clothing store and testing the clothes to see which one suits you better, you are doing an A/B Testing.

A/B Testing Clothes

There are dozens of other examples of the concept. You basically used this method a lot in your daily life to troubleshoot an issue.

In digital marketing, A/B Testing is the perfect method to measure the impression you make on your users and increase your sales by collecting and analyzing the statistics of different marketing campaigns.

Let’s see how we can use it to troubleshoot an issue with your website. The principle and method are the same. You need to compare your website with a perfect version of it or with the design you provided (PSD) to be able to detect the issues.

Notice: Always do your testings over a staging website and keep a full backup before starting your tests.

Provide the perfect look

The key point here is to have a perfect non-issue-ish version of your website. Whether it’s a PSD version or it’s a completed website, you need something to compare with your problematic website. Otherwise, detecting the issue will be hard. Keep the perfect look open on a different tab on your browser or in your Photoshop software. You will need it for the next steps.

If you had a website that was previously available but recently got issues and you don’t have a backup or screenshot from it, you may use Archive.org to see how your website looked like back then.

A/B Testing Perfect Look

Check the error logs

The first thing you should do is to use the browser Developer tools. Developer tools will help you detect the problems by providing debug tools and consoles. Hover the mouse on the different DOM elements in the Elements tab to see the size and details, and compare them with the other tab. It will help you detect the difference and then you will get one step closer to resolving the issue. Also, for the Javascript issues, you can compare the Browser Console tabs to see if you have any new errors in the problematic page or not.

A/B Testing Error Logs

Apply a change and compare again

This is a repeating task. You need to continuously compare the changes on your staging website and see if it helped or not. When I’m talking about the changes, I mean deactivating plugins one by one, switching the themes, updating WordPress (or other CMSes if you are using them), and even reconfigure your web host settings. Issues come from different places, so you need to perform the changes from different places to see if it’s related to your problem or not.

The thing is, the better you know the mechanism, the smarter you can troubleshoot an issue. For example, if a section background color is not working correctly, the reason cannot be from the webserver configuration (unless it’s a caching issue). Or when you have a server error on your page, it may not be related (or barely related) to the color configurations of your theme at all.

Sometimes, the issue goes further and comes from the Database or third-party API. So, you may need to reset your database and see if it helps or not. In a nutshell: You need to check everything that involves your website to be able to detect an issue.

Here is a list of things were common issues usually come from:

  • Web hosts and servers configurations. You should check the server requirements of your theme and plugins and make sure it meets the minimum requirements.
  • Outdated core CMS (WordPress), theme and plugins
  • Firewalls or security plugins.
  • Plugin conflicts, like multiple caching plugins which will conflict with each other
  • Misconfiguration of plugins, such as forcing SSL which should be done carefully
  • Misunderstanding or using the functions in an inappropriate way, like using a popup trigger on your burger menu icon (side note: Yes, it happened to some users already) which triggers weird popups as you trigger the menu
  • Customizing the codes, whether they are CSS or JS customizations, or even if it’s your child theme and you did change the theme files inside your child theme
  • Database corruptions or invalid data in the database

It’s better that you apply the changes you think may help, step by step, and see if they work.

Isolate the problem

While you are doing your A/B testing, you are also isolating the problem to the point that you find the reason for the issue and resolve it. When you find the problem, you did the job! The faster you isolate the problem, the sooner you get to the answer.

Here are some major testing tips which will help you get to the root of the issue faster:

  • Deactivate your plugins. If it did resolve the issue, you know that it’s a plugin conflict. Now, you have to activate the plugins one by one to see which one triggers the issue.
  • Switch the theme. Sometimes, a good starting point is to see if the issue is happening because of using your current theme or not. Switch to your parent theme if you are using a child theme, and switch to another theme if you don’t have a child theme. In case the issue resolves itself, you at least know that it’s coming from your theme.
  • Switch to another web host. Sometimes, it’s faster to move your whole website to another web server and see if you still see the issue. It’s especially good for when you have permission or caching issues. If your issue was resolved by moving your website to a new web host, then the problem is your previous web hosting service.
  • Change your browser, device or network. It happens sometimes that your browser, device, or even your ISP causes issues. Also, it’s better to deactivate your browser extensions as much as you can because some extensions such AdBlockers may cause some conflicts with parts of your website.

If none of the above helped, you can isolate more by removing the content from your pages or deactivating headers, footers and block sections. These will help you identify issues with your content if you had any.

Software and tools for A/B Testing

Although the best tools to troubleshoot an issue are your personal computer, a browser, and developer tools, each issue requires its own tool or service. Imagine that your SEO rank has dropped and you want to find the issue. What tools would you need? Probably, you will need your Google Search Console, or Alexa and Google Analytics.

Furthermore, each issue requires its own debugging tools. There are plenty of software and services, free and premium, which can help you troubleshoot an issue and also help you do automatic testing.

Here, I listed some of them:

  • BrowserStack Automate. It gives access to 2000+ real mobile devices and browsers, which include real iOS and Android devices, Chrome, IE, Firefox, Safari, and Edge. You can set a bunch of automatic testing tasks with different conditions and get results by Text Logs, Selenium/Appium Logs, Video Recordings, Screenshots, Console Logs, Network Logs, and more.
  • Screener.io. Although this is a good tool for automated testing, it’s Screen Overview function is also a great tool to find differences between two versions of your page.
  • WinMerge.org. It’s a diff checker tool that will allow you to find the difference between two versions of texts. You can use this to spot the differences between page contents, page sources, and even images!
  • GTMetrix.com is a performance analyzer. Open two tabs of the same website and apply your changes to your website. Then, retest on one of the tabs and do your performance A/B testing with it.
  • WordPress logger, debug and troubleshooting tools such as Debug Bar and its Add-ons. They can be considered as A/B testing debug tools as they provide a set of logs. You can then observe them and compare with different scenarios while doing your A/B testing in order to isolate and find the issue.

Conclusion

As mentioned, A/B testing is a method that you are using a lot in your daily life. You can use it to troubleshoot your website issues, too. Every tool you are using to check your website and debug its issues can turn into an A/B testing tool. It’s just about the way you’re using your tools.

Create a Job board in WordPress using Jupiter X

One of the important things in any person’s life is his or her job. A good career provides structure and gives one’s life direction. Therefore, finding the right job is essential. Nowadays, one way to find a job is by using a job board website.

What is a job board website?

A job board (a.k.a job site, job portal, employment site) is a website or webpage that deals particularly with employment, job seekers, and resumes. It enables employers to offer job positions to potential candidates. Applicants can search job boards to find open positions and career opportunities.

There are different types of job board websites over the internet:

Additionally, there are job search engines. The main difference between a job board website and a job search engine is that job seekers only see job offers on one site but on the job search engine, the applicants can access job offers from several job board websites or employers’ career websites.

In this article, we’re going to create a job board in WordPress using the Jupiter X theme and WP Job Manager plugin. In case you want to use a different plugin, the following list can help you.

WP Job Manager WordPress Plugin

Create a job board in wordpress plugin

WP Job Manager is a simple, lightweight and shortcode-based plugin that will help you create a job board in WordPress. It allows you to create jobs, job categories, frontend job submission forms and job dashboards for users.

Features

  • Add, manage and categorize job listings using the familiar WordPress UI.
  • Searchable and filterable ajax-powered job listings are added to your pages via shortcodes.
  • Frontend forms for guests and registered users to submit and manage job listings.
  • Allow employers or recruiters to preview their listing before it goes live. The preview matches the appearance of a live job listing.
  • Each listing can be tied to an email or website address so that job seekers can apply seamlessly.
  • Searches also display RSS links to allow job seekers to be alerted to new jobs matching their search.
  • Allow logged in employers to view, edit, mark as filled, or delete their active job listings.
  • Create three default pages as Jobs, Job Dashboard, Post a Job.

Useful Shortcodes

The plugin comes with several shortcodes to show jobs and forms in various formats. You can learn more about the following shortcodes in this shortcode reference article.

  • [jobs]: Shows a list of your jobs as well as filters for searching.
  • [job]: Shows a single job by ID.
  • [job_summary]: Shows a single job’s summary by ID.
  • [submit_job_form]: Shows the frontend job submission form.
  • [job_dashboard]: Shows the job dashboard used by logged in users.

Create a Job Board in WordPress with WP Job Manager Plugin

Now that we have learned about the WP Job Manager plugin, let’s create a website using this plugin and your Jupiter X theme.

Create a Job Board in WordPress screenshot 1

Creating Job Categories

Categories provide a clear structure to websites. It helps visitors to easily find all jobs within a specific industry or field of expertise.

For creating categories, go to Job Listing > Add Categories, then create the following categories:

Web Development, Web Design, Marketing, Accounting, Customer Support, Illustrations, Writing, Photography, Video Production.

Create a Job Board in WordPress Screenshot 2

Creating Jobs

For the purpose of this article, let’s create some jobs so you can configure the plugin properly.

1. Go to Job Listing > Add New, then create some jobs and set proper values as shown below.

Create a Job Board in WordPress Screenshot 3

2. After creating the jobs, it’s time to configure the settings in Job Listing > Settings

3. In the Job Listing tab, set the following settings.

Create a job board in WordPress Screenshot 4

4. In the Pages tab, set the following settings:

  • Submit job Form Page: Post a Job (automatically created via the plugin)
  • Job Dashboard Page: Job Dashboard (automatically created via the plugin)
  • Job Listing Page: Home (Will be explained in the next section)
Create a job board in WordPress Screenshot 5

Creating a Home Page

1. Create a new page from Pages > Add New. Set the following settings, then edit the page with Elementor.

  • Title: Home
  • Template: Full Width
Create a job board in WordPress Screenshot 6

2. Add a new section. Set Padding as shown below:

Create a job board in WordPress Screenshot 7

3. Set the Background settings as shown below. You can download the image from Unsplash for free.

Create a job board in WordPress Screenshot 8

4. Set Background Overlay settings as shown below:

  • Color: #000019
  • Opacity: 0.89
Create a job board in WordPress Screenshot 9

5. Add a Heading element then set the following settings:

  • Title: Hire a talent to do the impossible
  • Size: XL
Create a job board in WordPress Screenshot 10

6. Add a Text Editor element. Set line-Height to 0.8 and text to:

  • Compellingly utilize value-added sources vis-a-vis client.
  • Centric process improvements. Distinctively negotiate impactful leadership skills.

7. Add a Text Editor element. Set text to:

  • Trending searches: Creative Designer, Remote Developer, Writer

8. Add a Shortcode element then set it to [jobs].

Create a job board in WordPress Screenshot 11

9. In the end, go to Appearance > Customize > Homepage Settings

  • Set your homepage displays to A static page
  • Set homepage to Home
Create a job board in WordPress Screenshot 12

Creating Category Pages

For each category, let’s create a specific page so users can find all jobs under that category in one page.

1. Create a new page. Set the Title to Accounting then add Shortcode block with [jobs categories=”accounting”] content.

Create a job board in WordPress Screenshot 13

2. Create the following pages similar to the previous step with the following settings.

  • Set Title to Customer Support and add Shortcode block with [jobs categories=”customer-support”] content.
  • Set Title to Web Development and add Shortcode block with [jobs categories=”web-development”] content.
  • Set Title to Web Development and add Shortcode block with [jobs categories=”web-development”] content.
  • Set Title to Web Design and add Shortcode block with [jobs categories=”web-design”] content.
  • Set Title to Marketing and add Shortcode block with [jobs categories=”marketing”] content.
  • Set Title to Illustrations and add Shortcode block with [jobs categories=”illustrations”] content.
  • Set Title to Writing and add Shortcode block with [jobs categories=”writing”] content.
  • Set Title to Photography and add Shortcode block with [jobs categories=”photography”] content.
  • Set Title to Video Production and add Shortcode block with [jobs categories=”video-production”] content.

Creating Menus

When you create a job board in WordPress, you also need to create two menus as explained below.

1. Go to Appearance > Menus

2. Create a new menu, then follow the below steps:

  • Set Name to Primary.
  • Add How It Works (page, link, …) and Job Dashboard pages to your menu.
  • Save the menu.
Create a job board in WordPress Screenshot 14

3. Create another new menu, then follow the below steps:

  • Set the Name to Secondary.
  • Add all the category pages you created before.
Create a job board in WordPress Screenshot 15

Creating a Header

In job board websites, it’s very helpful to create a header with the necessary links like categories, submit a form, etc.

1. In the admin page, go to Appearance > Customize > Site Identity. Add your logo in Site Logo.

2. Go to Header. In the Settings tab, select the custom type and click on the New button.

3. In the popup, add a New Section.

4. Add Site logo Element to section.

  • On the Content tab, set Choose logo to Primary.
  • On the Style tab, set Max Width to 75%.

5. Add Flex Spacer element after Site Logo in the Section.
6. Add Navigation Menu element to the section. Set the menu option to Primary.

7. Add a Button element. In the Content tab:

  • Set Text to Post a Job
  • Set Link to Post a Job page

In the Style tab:

  • Set background color to #503bff.
  • Set Border Radius to 2.
  • Set Padding Top/bottom to 9 and Padding Right/Left to 15.

8. Add a new Section. In the Style tab, set Background Color to #f8f9fa.

9. Add a Navigation Menu element in the section.

  • In the Content tab, set Menu option to Secondary.
  • In the Style tab, set the following settings.

Creating Footer

1. In the admin page, go to Appearance > Customize > Footer.

2. In the Settings tab, choose Custom type and click on the New button.

3. Click on the Add Template button.

4. Choose the following block from the list of ready-made templates, then click on the Insert button.

5. Edit the Section, set Background Color to #000116.
6. Change the Heading to Hire a talent like a pro!
7. Delete the Get Started and Features columns.
8. Replace Company column items with About, Investors, Terms of Use, Privacy Policy, Contact us.
9. Add a new column then add the Recent Jobs widget. On the content tab, set Number of listings to show up to 3 posts.

Improve Default Styling

The WP Job Manager plugin has some basic styling to help you effectively create a job board in WordPress. You can improve the styling by adding the following CSS in Appearance > Customize > Additional CSS.

/* Job board filter */
.job_filters {
 margin: 2rem 0 2rem;
 border: 1px solid #e5e7e8;
 background-color: transparent;
border-radius: 4px;
overflow: hidden;
}

.job_filters input[type=text],
.job-manager-form input[type=text] {
 display: block;
 width: 100%;
 padding: .375rem .75rem;
 font-size: 1rem;
 line-height: 1.5;
 color: #495057;
 background-color: #fff;
 background-clip: padding-box;
 border: 1px solid #ced4da;
 border-radius: 4px;
}

.job_filters .select2-container--default .select2-selection--single {
 height: 38px;
border: 1px solid #ced4da;
}

.job_filters .select2-container--default .select2-selection--single .select2-selection__rendered {
 line-height: 36px;
}

.job_filters .select2-container--default .select2-selection--single .select2-selection__arrow {
 height: 36px;
right: 5px;
}

.job_filters .search_location {
 margin-bottom: .5rem;
}

.job_filters .job_types li {
padding: .7rem 1rem;
}

.job_filters .job_types li label {
margin-bottom: 0;
}

/* Job single */
.single-job_listing .jupiterx-post-author-box,
.single-job_listing .jupiterx-post-image{
display: none;
}

/* Job recent widget */
.jupiterx-widget ul.job_listings {
border-width: 0;
}

.jupiterx-widget ul.job_listings li.job_listing {
border-width: 0;
margin-bottom: 10px;
}

.jupiterx-widget ul.job_listings li.job_listing:hover a {
background-color: transparent;
}

.jupiterx-widget ul.job_listings li.job_listing a {
color: #fff;
padding: 0;
font-size: 1rem;
}

.jupiterx-widget ul.job_listings li.job_listing a div.position {
padding: 0;
float: none;
}

.jupiterx-widget ul.job_listings li.job_listing a ul.meta {
padding: 0;
float: none;
text-align: left;
display: flex;
width: 100%;
}

.jupiterx-widget ul.job_listings li.job_listing a ul.meta li {
margin-right: 10px;
}

Conclusion

In this article, we showed you how to create a job board in WordPress with the WP Job Manager plugin and your Jupiter X theme.

There are some other plugins in the WordPress Community that you can try. Feel free to share your favorite one with us in the comments section below!

Jupiter X v1.3 Is Out! Supercharge Your Forms With These New Features!

A couple of days ago Jupiter X v1.3 was released. Of course, just like any other theme updates, it comes with a long list of improvements and additions to make the theme even more powerful and capable. But looking at the features, you will notice that this update has particularly improved on one feature! Yes, that’s the form element.

Form builders are among those parts of WordPress themes that are basically the same without much difference in various themes and you don’t expect to see anything about them in theme updates. Well, Jupiter X surprises us again with this update!

Jupiter X form builder is already a powerful tool to visually create and order your online forms.  It also allows you to customize its appearance to the deepest level. So, let’s see what can possibly be an improvement coming with the latest update, Jupiter X v1.3!

New form elements added

As the title also suggests, you will have more elements to use in your forms including checkbox, radio button, date selector and time selector. Date and time selector will open standard date and time selectors for your users to set a time or date.

For checkbox and radio buttons, add the choices one per line and see them listed down.

Say hi to download action

This action helps you upload a file to get downloaded when the submit button is clicked by the user; say, the PDF book you give away in return for new subscribers or a freebie design file in exchange for some valuable leads! There are 2 ways to link a “file” to “download” action:

  1. Via source file link
  2. By uploading the package directly to your hosting service

Hubspot integration

If you‘re using HubSpot to collect leads and you don’t want to use one of the forms from its built-in library, you can simply connect your Jupiter X form to Hubspot. You can enter your HubSpot account details such as Portal ID and Form ID, and the data your form collects will be sent in defined HubSpot table fields. You should do the field mapping here to choose what field will be connected to which HubSpot fields.

Deeper MailChimp integration

Jupiter has offered MailChimp integration from its very early versions, but with the latest Jupiter X v1.3 form builder updates, you will have tighter integration with MailChimp in your forms. Just by entering your MailChimp API key, you can connect your form to any specific audience list you have in Mailchimp and the emails you collect in your form will be added to that audience segment.

If your audience is segmented into groups, you can choose a group so the collected emails will be directly added to that group. Furthermore, you can activate the double opt-in feature for your entries directly from Jupiter X instead of doing it from MailChimp.

Just like the Hubspot integration, you can perform field mapping to indicate the exact MailChimp fields you want each of your form fields to be connected to.

Recap

How do you like the new additions to Jupiter X v1.3 form builder? Go ahead and build your next online form with it and let us know if there is anything you expect from a form builder that Jupiter X v1.3 form builder hasn’t yet provided. And stay tuned for more and more new features and additions coming your way very soon!

Artbees Takeaways from WordCamp London 2019 and WordCamp Torino 2019

Spring is maybe the best season to run WordCamps. In fact, if you check WordCamp Central, you will notice that many WordCamps are scheduled for the spring season. Just to name a few, Paris, Vienna, Atlanta, London, Torino, Athens, Rotterdam, Madrid, Miami, Kolkata, and Prague have all held or scheduled WordCamps for March, April, and May.

Artbees started our WordCamp tours in 2019 with two important European WordCamps, WordCamp London 2019 and WordCamp Torino 2019. We participated in one as a speaker and in the other as a sponsor. Below I will share some of our takeaways from these two WordCamps. Let’s dig in.

WordCamp Torino 2019

Just a few months after our last WordCamp in Milano, we got to join another WordCamp with the great Italian WordPress community — WordCamp Torino 2019. The city of Torino is as beautiful as Milan but less expensive. It was, in fact, cheaper compared to many other EU cities.

Torino is one of the tech and industrial hubs of Italy. Communicating with people as a foreigner, of course, is challenging, but Italians are famous for their upbeat mood and hospitality. This all does not only make the city a great destination for tourists but also a great place for WordCamps.

Upon arrival, you can observe the high engagement of locals who are passionate about contributing to WordPress. WordCamp Torino 2019 was very well-organized and planned, too. Food was nothing less than what you could expect from a country like Italy —always savory and delicious!

WordCamp Torino Contributor Day

Like every other WordCamp Artbees has attended, we had a member in WordCamp Torino 2019 as well. Rouzbeh from Artbees contributed to the Marketing team in WordCamp Torino  (Contribution day in Italian WordCamps are not a placeholder!).

WordCamp Torino 2019 Contributor Day

People seriously work and contribute during this segment and the progress is visible and even palpable. You can see heated discussions and meetings going on during the entire contribution day.

Rouzbeh from Artbees Talked About GPL

At WordCamp Torino, Rouzbeh, CEO at Artbees, discussed a very sensitive and nowadays popular matter: open-source. Within his talk entitled, “Going GPL: What happens when a theme with 100K users goes GPL!”, he shared the story of Jupiter X WordPress theme with 100K customers that decided to change its license to full GPL after 5 years.

As the CEO of Artbees, he explained how he had to be aware of the business implications and risks attached to such a decision. Before making this decision at Artbees, they were very much concerned about the impact this will have on sales, the Jupiter X brand image, and the future of the theme as a whole.

After a short introduction of GPL license and its meaning, he explained the results of this decision, the steps taken to execute the relicensing process, the market’s reaction to it, and finally, the state of the company and our theme after going GPL.

Rouzbeh’s presentation of the Artbees journey towards GPL was worth it for all the WordPress theme producers who are unsure about going GPL. It can also encourage many theme developers to follow the same path. The video of the talk will be available in wordpress.tv soon.

Credits: Artbees CEO, Rouzbeh Firouzmand presented his talk ‘Going GPL: What happens when a theme with 100K users goes GPL!’ in WordCamp Torino 2019

Francesca Marano of WordCamp Torino made a great point regarding Rouzbeh’s talk:

You can not encourage people to contribute to open source for free just as a good gesture or a positive deed. You should show them the real benefit they can get out of it or perhaps a potential opportunity from a business outlook.

Based on the extremely positive feedback regarding Rouzbeh’s talk, you can say that his topic was aligned with what Francesca said as it definitely was trying to explore the business potential of GPL.  

WordCamp London 2019

Just about the same time that WordCamp Torino was taking place, there was another great WordCamp happening exactly 1240 KM away! WordCamp London 2019 was held on April 5-7 in London Metropolitan University, and Artbees was one of its sponsors. Fun fact: This was the first WordCamp that Artbees sponsored in 2019.

Artbees supported WordCamp London 2019 with its Jupiter X

WordCamp London is one of the most important WordCamps in Europe. Some believe that’s the second most important WordCamp (after WordCamp Europe) in Europe and a great opportunity to obtain the pulse of the WordPress community in entire Europe, as there are attendees from every part of Europe, and not just the UK.

I, Maziar, and Babek were representing Artbees’ very own Jupiter X in its booth on April 6 and 7. Rouzbeh was only able to join us on April 7 Sunday after he held his talk in Torino!

WordCamp London Contributor Day

As you may know, Contributor Days are an integral part of WordCamps and truly symbolize the culture that WordPress promotes. Tens, sometimes dozens, and sometimes hundreds of passionate people gather in different teams in every WordCamp and contribute to WordPress however they can (I have co-authored a blog post about the culture of contribution in WordPress in WordPress.org Marketing blog and talked about this in extent).

Maziar from Artbees in WordCamp London 2019 Contributor Day along with MakeWordPress marketing team

Artbees had a representative in WordCamp London 2019 Contributor Day as well! As part of the MakeWordPress Marketing team and along with other great members and reps such as Siobhan Cunningham and Yvette Sonneveld, we worked on different tasks related to the Marketing team. I personally wrote a WordPress success case study you will read soon on wordpress.org Marketing blog.

A Vibrant Talk Lineup!

WordCamp London had a vibrant array of speakers talking about a wide variety of topics such as copywriting, business growth, content monetization, accessibility, content syndication, open-source, SEO, cognitive design, cookies, recruiting, e-commerce and technical topics such as HTTP/2, GraphQL, Laravel, Serverless, Redux, and more.

Below, I want to name a few very interesting talks you might have missed! In which case, do not forget to watch them once they are on wordpress.tv:

Yvette Sonneveld

Sales Funnel = Sausage Maker?

Francesca Marano

Websites For Freelancers 101

Miriam Schwab

JAMstack and WordPress: Friends or Foes?

Raffaella Isidori

Mindful Design: Designing with Presence for Purpose and Inclusion

Sabrina Zeidan

5 Steps to a Faster Website and Higher Google Rankings

Ronald Gijsel

Are You Ready To Publish? – The Afterlife…

Rian Rietveld

Accessibility Testing for Content Managers Workshop

Andrea Zoellner

Effective Copywriting Tips for Better UX

Tess Coughlan-Alenn

Using WordPress To DO_ACTION

Felix Arntz

Introduction to Web Components

Josepha Haden Chomphosy

Fireside Chat: Building a Culture of Safety

Pascal Birchler

An Introduction to WP-CLI

Topher Derosia

5 eCommerce Trends to Implement Now

Jupiter X in WordCamp London

During the days of manning our booth as a sponsor of WordCamp London 2019 (April 6 & 7), we witnessed a very dynamic range of people stopping by to ask about Jupiter X. We received a lot of good insights and feedback about Jupiter X and a round of applause for our decision to go GPL! We also happened to meet some of the old Jupiter users in London who had been using Jupiter since 4 years ago.

Jupiter X Booth in WordCamp London 2019

As you can deduce, Jupiter X had a booth in WordCamp London 2019. So, I had a limited time attending talks or side events. However, I was lucky enough to manage my time to attend important events such as a very useful meetup regarding marketing that was held by  MakeWordPress marketing team.

I joined a side meetup regarding marketing as part of the MakeWordPress Marketing team

In this one-hour meeting, many ideas, trends, and practices regarding marketing were discussed and many questions were answered. I myself discussed the relevancy of testimonials in 2019 and received different ideas about that!

This was our first WordCamp London experience and for sure, not the last one. WordCamp London 2019 was organized by a veteran team (Led by Dan Maby) with many volunteers contributing to it in different sectors. WordCamp London gives everyone who does something with WordPress a unique chance to connect with the UK WordPress community and explore various opportunities.

WordCamp Torino 2019 and WordCamp London 2019 were a great kickstarter for Artbees’ WordCamp presence in 2019. The experience we collected in different parts of these great WordPress gatherings, from contributing to different teams to speaking with them to showcase Jupiter X is priceless and will definitely help us with the future of Artbees and Jupiter X.

However, that’s just the beginning for 2019! Stay tuned with us for great news with upcoming WordCamps such as WordCamp Athens 2019, WordCamp Plovdiv 2019, WordCamp Europe 2019, and more. 😀

Have you ever been to any WordCamp? Do share your experience with us and the Artbees community below!