Basically, today, website building is #1 way to develop your business. It doesn’t matter which niche you choose! Thanks to the properly designed online project, you can improve everything and anything. Would you like to run an ace website that will introduce your company to the digital world? Do you want to set up a personal page, a travel blog, or a full-fledged website? Needless to say, there are many website kinds but all of them have something common. And here is what I’m going to talk about!
Do you remember those old sad days when running an online project was a real luxury? All in all. only famous companies were able to afford it. However, even those expensive sites weren’t perfect. They had a simple design and a poorly created navigation. Still, we used to hire professional web developers for these reasons which means spending big money.
Fortunately, in 2018, there’s no need to look for a web designer! Nowadays, the users of all skill levels can build the desired website. What’s more, today, it’s a quick and even entertaining process. What’s the secret? To make a long story short, it’s all about code-free page builders. I guess the most popular WYSIWYG page builder for WordPress users is Elementor. It comes with all the voguish WordPress web designs! Opening any modern marketplace, you will find lots of plugins, themes, and add-ons related to Elementor. In this post, I’ll tell you about JetElements. Today, this is a leading plugin for Elementor-based websites. So, would you like to enrich your site with a groundbreaking gallery without touching a single line of code? In this case, follow my step-by-step guide!
What Is Elementor?
Before all else, let’s say a couple of words about Elementor. This is a brand-new page builder and content editor, which is extremely popular among WP users. So, Elementor’s work is based on drag & drop technology. Therefore, you can create new pages or edit them without coding. Simply choose the web design component you’d like to use and drag it to the editor window.
Here are the main advantages of Elementor.
- Firstly, the builder comes with a pre-packed library. There are lots of stylish UI components to choose from. Needless to say, the library also contains all the must-haves.
- Secondly, you can speed up your working process by saving your layouts as new templates. As a result, you’ll be able to back to them as soon as you need it.
- Thirdly, there’s a fast live preview. It will help you to avoid the most popular mistakes during website building.
- Fourthly, Eleanor has a 100% creator-friendly interface. You don’t need to have any experience to work with the tool!
- Fifthly, same to all leading WordPress products, Elementor has free updates. You will receive them automatically and on a regular bases.
You might be interested! Check out best WordPress themes for elementor page builder!
As an example, here is how you can design a Justified Gallery via Elementor.
Obviously, there are many plugins that were made for Elementor-based online projects. Among them, you will find JetElements. You can see it inside any leading WP theme. Let’s see what you get choosing this item.
What’s Inside JetElements Addon?
Although Elementor contains many visually pleasing modules, I recommend you to take a closer look at JetElements. This best-selling WP plugin has lots of flexible designs and impressing functionality. What will you find inside the pack of the addon?
- On the first hand, there are high-class modules with functional settings. All the elements are fully customizable. There are numerous design options, visual effects, marvelous backgrounds, eye-friendly fonts, etc.
- On the other hand, JetElements comes with WooCommerce Elements integration. As a result, you can set up a modern online shop anytime you want. There’s a wonderful kit of eCommerce oriented components.
- By the way, JetElements supports RTL. That’s why you can change the text direction and create foreign-language content. Needless to say, this step will help you to attract a bigger audience.
- In addition, JetElements is WPML-compatible!
- There’s a handy Contact Form 7 in the package. Would you like to let visitors get in touch with you? Thanks to the feature, people will be able to ask all their questions directly on the site.
- Also, JetElements has multiple templates for your homepage.
- Plus, there are pre-styled blocks you can use without any boundaries!
- By tradition, choosing the plugin, you get detailed documentation and free 24/7 technical support.
Which Content Elements You Get With JetElements?
Without a doubt, building a website, you should take care of any of its parts. As I already wrote, the plugin has everything and anything to improve your design. Here is what you’ll get with JetElements:
- Advanced Carousel, Post Carousel,
- Post Slider,
- Brands, Banners,
- Circle Progress and Progress Bars,
- Pricing Table,
- Countdown Timer,
- Animated Boxes and Animated Texts,
- Recent Products, Featured Products, Sale Products, Top Rated Products, and Best Sellers,
- Testimonials,
- Instagram Gallery,
- Scroll Navigation,
- Parallax scrolling,
- Newsletter Subscription,
- Image Comparison,
- Timeline,
- Price Lists,
- Maps and Weather, etc.
Well, the thing is that this is not even the whole list of modules JetElements provides. There are numerous styles for a gallery. How can you build it? Follow my step-by-step guide!
How To Create A Gallery With JetElements Addon?
Before everything else, keep in mind that all the actions you perform with the plugin have the same working mechanism. So, what should be your basic steps? For starters, here is how you will begin creating with JetElements. To add any widget to the page, you’ll need to:
- navigate to Pages
- find Add New tab in the left column of the WP dashboard,
- find Edit with Elementor button and click on it,
- as soon as the button redirected you to Elementor editor page, there will be 2 options,
- choose Add New Section button to work with the draft,
- next, you will see JetElements widgets,
- choose the element you want to work with,
- drag it to the column area to add the design.
You will see the element settings in the left column. Here you can change previous content, switch between styles, and customize your styling options. Before we move to the next point, here are the main settings you may want to change.
- Edit Widget option that provides quick access to the widget editing block. It is in the left column of the page editing screen.
- Duplicate Widget option was made to duplicate the existing widget. Keep in mind that the widget will be duplicated with all its settings and content.
- Remove Widget option, which logically, removes the widget from your page.
Working With Portfolio Widget
To create a gallery, you will need to choose Portfolio widget. As I promised, the first part of your work with the gallery (or portfolio) looks like the one described in the previous point. And what should you do next?
By tradition, there are many settings, items, styles, filters, UI elements, and content types to choose from. As soon as you find the one you like, just drag it and drop to the editor. You won’t have problems with it! However, beginners can be confused with the number of options they get. Thus, let’s check the main features. Here is why you need them!
Viewing the first section, you will see:
- Layout type where you should select the layout you are going to use for site’s gallery. There will be such options as masonry, grid, justify, list.
- Preset option where you can choose the preset for your portfolio elements.
- Columns settings will help you to set the needed number of columns.
- View More Button, which you can enable to add a View More button.
- The same thing with the View More Button Text. With it, you’ll add or edit the text of your button.
- Item Per Page section allows you changing the number of portfolio items what will be shown on a page.
And here are the settings you get for items:
- Add Item,
- Category section allows users to find the products from your gallery using marks and tags,
- Image and Image Size,
- Title,
- Description,
- Link Text,
- Link URL.
Styles Settings
Working on your gallery with JetElements plugin, you will see the next styles:
- Using Items Margin a website owner will specify the responsive margins for the items,
- Thanks to Border Type you will the needed border type, (there are such variants as none, solid, double, dotted, dashed or groove)
- Width,
- Color,
- Border Radius to make the border angles more round if needed,
- Padding option allows a user to set the paddings for the portfolio,
- Box Shadow gives you access the shadow options.
Which Gallery Filters You Can Find Inside JetElements Pack?
To continue, the next thing you will see when building a gallery with JetElements is filter settings. Actually, there are separate sections for container and item styles. So filters container styles include the next options.
- Background Type will help the site owner to choose between classic or gradient widget types. There are rich customization options for every type.
- Padding option will help you to set perfect padding values.
- Using Margin section you will easily specify the responsive margins.
- Needless to say, Border Type will help you to choose the very border type. The available variants are solid, double, dotted, dashed or groove.
- Width option defines the width in px.
- Select Color option to change or mix the colors.
- Working with Border Radius you can round the borders which is a trendy thing today!
- As always, Box Shadow lets site creator apply shadows for the chosen elements.
To continue, there are even more settings for Filter Items Styles section. Here you will see:
- Separator Icon that helps one to specify the icon, which will be used as a separator between site categories,
- Separator Size,
- Alignment, which changes the alignment and makes it responsive,
- Color,
- Typography,
- Background Type block will help you to set the widget type,
- Padding sets the paddings for the gallery,
- Margin to work with the responsive margins,
- Border Type,
- Width,
- Border Radius,
- and Box Shadow.
As you can see, the list of settings the plugin provides for your portfolio is pretty huge. And this is not even a half! Building your website with the help of JetElements, you’ll also get detailed and easy-to-manage settings for such categories as:
- content,
- image,
- title,
- category,
- description,
- button,
- order,
- and cover.
Although all these settings are 100% versatile and user-oriented, I still have for you a couple of video tutorials. Check them out to see how to drag and drop an element and add it to your newborn gallery.
How To Add Your Instagram Gallery With JetElements?
So, here is the last question I’m going to answer today. Like all the popular social media, Instagram is a nice thing to be added to your main page. Surely, you can have Social Integration option to get more traffic. Still, adding a live Insta feed on the main page of your online project, you make the site alive and keep its audience engaged. So how can you do it?
As expected, there will be a section called Instagram. It showcases your Insta posts in a minimalist and eye-catching way without overloading site design. Choosing this option, you can style any detail. Thus, you will work with such things as text captions. What’s more, you can showcase meta information which means the number of likes and comments.
How to display some pics from your personal Instagram account? To do it, you should:
- go to JetElements settings,
- open Instagram Options,
- find Access Token,
- generate it,
- and copypaste the result to the corresponding field in your dashboard.
How to edit your Instagram gallery? Let’s see what the panel looks like!
- What to show – this option lets you specify which elements you want to be shown in the widget. For example, you can select the pics with a specific hashtag.
- Clicking on Tagged Photos, you’ll see the next options.
- Hashtag to input the needed hashtag by which the photos will be added.
- Cache Timeout – to set the timeout of the Instagram photo cache.
- Next, setting My Photos in What to show, you’ll have these options:
- Username,
- Photo size, (Standard (640x640px); Low (320x320px); Thumbnail (150x150px); Original).
- Number of Instagram posts,
- Enable linking photos,
- Enable caption,
- Caption length,
- Enable comments count,
- Enable likes count,
- Layout settings
- Layout type, (Masonry, Grid, List)
- Columns, (from 1 to 6).
Final Thoughts
For today these were all the details I wanted to share with you. To sum everything up, JetElements is a brand-new and well-featured WordPress plugin for Elementor. Actually, this is a best-selling addon, which is perfect to be used with Page Builder. Needless to say, buying the plugin, you get lots of trendy design elements and functions to enrich your website. This large set contains:
- 50 content widgets,
- over 1000 pre-designed section templates,
- 150+ stylish subpage templates on different topics,
- and more than 60 homepages.
To say more, the tool requires no coding skills. Thus, you can work with JetElements and improve your web design without trouble. To finish with, which features you are looking for before everything else? What are your must-haves for a gallery? Are there any voguish components you’d like to use? Let me know in comments!
