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

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

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

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.

  • Right click on the section button, then click on Save as Template.
  • 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 in 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 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 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 Text color to rgba(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 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 right column.

  • On the layout tab, set Minimum Height to 450px.

6. Add a Heading element then set the following settings.

  • On the Content tab, set Title to Why Choose Us?
  • On the Style tab > Typography, set weight to 300
  • On the Advanced tab, set margin top to 25

7. Add a Text Editor element then set the following settings.

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

  • 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

2. 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 rgba(0,0,0,0.84), in Typography, set size to 47px
  • On the Advanced tab, set margin top to 95px, margin bottom to 100px.

3. Add an Inner Section element with two columns.

4. In the left Column, add an Icon list element then set 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

5. 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 the set the following settings.

  • On the Content tab, set Title to Testimonials, Alignment to Center.
  • On the Style tab, set Color to rgba(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 size to 24px, weight to 300
  • On the Advanced tab, set margin top to 10px, margin bottom to 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.

Enjoy A Free Event Website Template From Jupiter Today!

March is the perfect time to start planning out your events. Whether you’re putting together a social, professional, or corporate event, mapping them out for this year is an important task. Why? Because it gives you enough time to prepare for each one – which, to be honest, is crucial. If you don’t get to prepare well for your activities, it might turn out as a bad experience for you and your guests.

Continue reading

How to customize your portfolio list with Jupiter X

A portfolio is an essential section in your website for building your professional brand and getting more business to come in. A good-looking portfolio can open a lot of doors to meeting (and impressing) potential clients. Often, you can make a great first impression with your site visitors after viewing your online portfolio, so creating a powerful portfolio page can be extremely crucial to the future of your business.

Continue reading

[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