Artbees Takeaways from WordCamp Europe 2019

WordCamp Europe 2019 was the biggest and the best WordCamp I have ever attended. But that’s not what made it special. What WordCamp Europe 2019 successfully accomplished for the first time was holding a massive event without falling into the usual pitfalls of events this size.

In my first encounter with WordCamp Europe 2019 at the Estrel venue in Berlin on June 20, I recalled events such as Web Summit. It was a three-day event held in a huge venue packed with talks, workshops, booths, and activities with thousands of attendees. It was the largest WordPress event ever, with 3,260 tickets sold and 2,734 attendees.

The attendees came from 97 different countries, and 1,722 of them had never attended WordCamp Europe before. Events this size must be quite difficult to organize and might require months of planning, arrangements and hundreds of people involved.

How was it different from any other WordCamp?

Events on this massive of a scale might end up making them mediocre with poor organization, average talks and bad service for attendees. But this is exactly where WordCamp differed from events like WebSummit. WordCamp 2019 was an event much larger than its usual size and so wonderfully organized that its scale didn’t make it mediocre.

The other important way WordCamp sets itself far above other large-scale tech events is that it’s driven by the community, not profit. Look at an event like WebSummit or the TNW Conference, and you’ll notice an event designed to make money. At these events, celebrities are invited to a venue with a private jet to talk about your run-of-the-mill topics so more people in that crowd understand it. This is the problem in events that sell as many tickets as possible to earn more money and end up with a very disparate audience!

WordCamp Europe 2019 Estrel

An event like WordCamp is designed primarily to gather members of a community, rather than running a business to make money out of it. It’s very common to see someone who is a speaker at one WordCamp to be a volunteer at another. And yes! Volunteers aren’t volunteering for a reference letter here! WordCamp Europe 2019 didn’t just set a new standard for continental WordCamps but also set one for other tech events.

Jupiter X in WordCamp Europe 2019

Artbees attended WordCamp Europe 2019 on June 20-22 in Berlin. We had the pleasure of not just attending but also co-sponsoring the event this year. Jupiter X had one of the busiest booths in a small business hall in WCEU this year.

It was also our first WordCamp where we gave away a small but lovely prize. The Jupiter X AirPod Giveaway was so welcomed by the attendees at WordCamp this year that during the drawing session on the last day of the event, our booth was hardly able to host the massive crowd waiting for their name to be selected from the box as the winner!

Meeting with Jupiter X users, friends and partners

We had so many great guests stop by the Jupiter X booth for a visit, including some of our fantastic users, fellow authors in the Envato market, our friends in the industry and the WordPress community.

Meeting with the Envato Team & Envato Worldwide

We had various meetings with the Envato team during different WordCamp Europe 2019 events. On Envato Worldwide Day, which was one of the side events, we met with and greeted the great Envato team. Cameron Gough, James Giroux, Stephen Cronin and Aaron Rutley from the Envato team stopped by our booth during the first conference day for a nice chat and some fruitful discussions about the state of WordPress, the Envato market, trends and more.

It was also a pleasure having a special meeting with Cameron Gough – General Manager of Content at Envato – and to share some ideas and suggestions regarding ThemeForest as one of its authors. Cameron is not just a great human but also very determined to reflect the authors’ voices in Envato and to take some huge steps forward by addressing issues and possible improvements to the marketplace.

It’s also been a year in which Envato is hosting meetups of their own called Envato Worldwide in different cities around the world, including London, Amsterdam, Kyiv, Warsaw, and Saint Petersburg. As part of their worldwide tour, they held a meetup in Berlin a few days before WordCamp Europe 2019.

Envato Worldwide meetups are a great combination of keynote presentations, local author presentations, networking, Q&A sessions and a nice after party. As members of the Envato community, we were thrilled to meet and greet with some of the great authors in ThemeForest as well as the amazing members of the Envato team, discuss ideas, share experiences and learn from one another.

WordCamp Europe 2019 Contributor Day

There is no denying that one of the best parts of every WordCamp is the Contributor Day. At large WordCamps like WordCamp Europe, it’s even better! What you could see was a large hall filled with passionate community members who were helping to build or expand some aspect of WordPress.

500 contributors formed different groups such as core, review, marketing, support, polyglot, design, etc. and were led by 37 experienced lead contributors to different MakeWordPress projects. From Artbees, Gulhan joined and contributed to the “theme review” team. Rouzbeh contributed to the marketing team, and Nel joined the community team just like at WCEU 2018.

During Contributor Day at WordCamp Europe 2019, we also had an exciting encounter with the one and only Matt Mullenweg, WordPress co-founder and CEO.

WordCamp Europe 2019 Gulhan and Carolina
Gulhan with Carolina Nymark from the “theme review” team on Contributor Day
WordCamp Europe 2019 Contributor Day Matt
The Jupiter X team with Matt Mullenweg at WordCamp Europe 2019 on Contributor Day

The group photo taken at the end of Contributor Day may have been the biggest photo ever taken at a WordCamp. Check for yourself and see how many of Artbees members you can find in the crowd!

WordCamp Europe 2019 Group Photo
Photo courtesy of WordCamp Europe 2019

Talks

Unlike last year, we were running a booth at WCEU this year, so, unfortunately, we could not attend most of the talks. There were some great topics and speakers I shared in our “we’re heading Berlin” post on June 13. But one talk in particular that is most talked about at every WordCamp Europe or WordCamp US is Matt Mullenweg’s State of WordPress talks.

This year, he again went up on stage thanking and giving a round of applause to the organizing team and sponsors who made possible what he called the best WordCamp ever. He explained the latest developments of different WordPress projects, especially Project Gutenberg and its roadmap in the coming months. And, as usual, it concluded with a Q&A session.

Side events

There were several side events before and during WordCamp Europe 2019. We were invited to a side event or afterparty almost every day before WCEU and during the conference days.

Just like at WCEU 2018, we joined Elementor’s side event this year but with a brand new name called “Meet the Makers of Elementor.” This event was much more than an afterparty and included various sessions such as workshops and keynotes. I’m sure this will be a good beginning for them to make great community get-togethers in the future.

WordCamp Europe 2019 Elementor Makers

Just like WCEU 2018, the Freemius team held a lovely side event in Berlin to gather different kinds of WordPress community members. It was great to meet Vova at this WCEU and engage in some insightful discussions about their service Freemius, which is a platform for WordPress businesses to operate on.

WordCamp Europe 2019 Freemius

Afterparty

A WordCamp is never complete without its afterparty! Just like many other WordCamp Europe attendees, we were counting down the seconds for another great afterparty for WCEU 2019, and it definitely lived up to the hype! The afterparty this year was a 4-hour long chat, complete with music and dancing with a party theme I’ve always liked: the 80s!

WordCamp Europe 2019 Jupiter X Afterparty
The Jupiter X team at the WordCamp Europe 2019 afterparty!

Closing Talk

The WordCamp Europe 2019 closing talks were a holistic review of this year’s event with tons of interesting figures about its contributors, volunteers, sponsors, speakers, and attendees. Though there was a section this year celebrating those who helped make the event happen but couldn’t attend the event.

Like any other event, WordCamp Europe 2019 was not without issues. But the great thing about WordCamps is that you can see a noticeable betterment after each WordCamp from city to city. WordCamp 2019 in Berlin was definitely a better WordCamp than WordCamp Europe 2018 in Belgrade – and hopefully, WordCamp 2020 in Porto will be better as well!

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.

[Giveaway] A Taste of 2019 with Artbees Free Holiday Template!

I want to add to the happiness right in the middle of the happiness this season brings! You’re most likely having fun celebrating the Christmas season and preparing for the new year or enjoying your vacations right now. Regardless, I’d like to take the opportunity and treat you with a free template from Artbees to add to the happiness that this season brings!

Continue reading

How To Create A Great Case Study For A Creative Project

There are two ways to showcase your creative work to your future clients: showing them and showing them the right way. Some believe that showcasing a portfolio project in itself is a creative work and even more important than creating the project itself. I, personally, have seen great presentations of mediocre portfolios converting more users into leads than a great creative portfolio which was presented poorly. Simply put, using effective presentation techniques will boost the value of a project.

Continue reading

A Virtual Summit Expert Talks About How To Run Event Websites With WordPress

run event websites with wordpress

Online events are nothing new to us, and they come in many different forms. We are constantly bombarded by product and service websites featuring online “how to” webinars which detail the key points and advantages of the product. Or there are the online training courses that happen in the form of one-time online sessions. Additionally, one may find that many tech conferences are held up virtually as online events or that independent brands will deliver their service in the form of online events for which people can register and attend.

Continue reading

WordPress Is About to Be Reborn. Find Out How the Future of WordPress Is a Game Changer

hero-future of wordpress

We have already entered an age of services in which capitalism is turning services into commodities not products. The tech industry and digital market are also no exception. The software and internet industry have already begun to change their economics to services based businesses. Take free OS upgrades and apps just as an example. But how is it going to affect WordPress as a popular website building solution?

Continue reading