Today, web development in the digital era moves at a rapid pace. The time of plain-text websites ended long ago. And this is for the better. The choices for unique website templates – from interactive web templates to animated web templates – available to the customer is mind-blowing. And this is particularly true to anyone in creative fields who’d like to quickly and easily build up a creative website template.
Optimal website design plays a vital role in the success of a business. Making a good first impression is the most important part, and it directly correlates to user engagement. In this article, we break down this concept and discuss the key sections needed for a creative website template.
When someone first enters your website, there are a couple of essential elements that will grab their attention. This article explains everything that you need to know to make a great first impression. As you might have noticed by now, our other posts highlight that programming skills are not necessary in creating a creative website template. Furthermore, this becomes even easier if you have a WordPress theme that comes with everything you need like Jupiter X.
Hero Section
The purpose of a header is to convey the core of your business to the visitor. A carefully designed header design layout must announce the core of your business to the visitor. In designing the layout of the header, you have several choices: a static header image, a header image with text overlay, a slideshow header or a video background header.
While hero sections vary in terms of layout, for example, a popular use case is the full-screen hero section. However, this is not the rule, and you may also use a half-screen hero section. Jupiter X Creative Studio, Jove and Architecture templates offer different designs of hero sections for a creative website template:
Services
Following heroes, in the Services section, companies or individuals talk about their services or the area of their main specialization. This is probably the most important part of the whole website. In this section, you’ll need to introduce services offered by your company to your visitor. While there are several standards and known design rules about how to design such a section, you are free to change this up since we’re talking about creative website templates. Make it your own by offering something new in design, layout or colors. But let’s not get too carried away: don’t forget to keep the section clean and simple. In other words, anyone viewing your website shouldn’t leave your site with any questions about what you’re offering them and how.
Let’s go ahead and take a look at several examples of a Services section in Jupiter X Creative Studio and Startup templates.
About Us
When it comes to the About Us section, professional website designers and developers only provide very little information on the main site. This can be seen as a brief about what the brand is about – it’s better to keep these short and simple on the homepage. In terms of location, it’s good to place the About section either right after the Hero section or below the Services section. However, this is not the rule, and you can also place this info in the Hero section.
The About Us section should contain a brief description of the company or person, how they started the business, where they are at this moment and what is in their future. Here are some examples from Jupiter X Kore and Jove templates.
Partner
Partner sections are a vital aspect to your website, as they provide visitors confidence into a company’s dependability. Most Partner sections contain lists or a table of partner logos. While logos are often more readable and recognizable, it’s also essential to include the partner’s full name in addition to their logo. You can also add a link to their website in this section.
Depending on the number of partners in the section, we might also include a short synopsis of your relationship and how they are partnering with you. You might want to take it a step further, and give each partner their own profile page. Another option is to group the partners by categories; for example partners in design projects, software exchange projects and so on. Check out these examples from Jupiter X Agency and Persephone templates.
Clients
The Clients and Partners sections are similar to each other. However, they differ in their purpose. Clients are the most valuable thing as businesses are fully dependent on clients. Similar to the Partners section, we can use a list of logos. We can also add links to a project that your company worked on for a client.
Along with a list of clients, we may also include testimonials (which is a great addition to any kind of website) from previous clients, which will add more weight to the section and increase user engagement. Below are examples from Jupiter X Agency and Creative Studio templates.
Showcase
A Showcase – or commonly known as a Portfolio section – is a great opportunity for you to display your work and case studies to visitors. This section isn’t only for work: you can also use it to show your unique personality, talent and experiences. Portfolio sections are particularly useful in creative fields for photographers, designers, developers and more.
To get a better idea of how you can put this into action, take a look at some Showcase sections in Jupiter X Creative Studio, Software 2 and Persephone templates.
Photo Album
If you’re a photographer or creative artist, then having a Photo Album section on your site is a must to showcase your art. It’s important that you are able to showcase your work in the most creative way possible, which is why placing raw images in a column simply won’t cut it. That’s where the Photo Album section comes in handy as it offers variation in creatively displaying photos. Take a look at the following examples from Jupiter X:
On traditional websites, you’ll find important info like the site map, address, link to the website’s privacy policy page in the Footer section by default. This information is usually organized in several columns, and the most popular is a combination of three or four columns.
Of course, with creative website templates, you’re definitely not bound to this rule, and you might want to leave only important information in the footer. Creative templates are all about the creative approach, which calls for simplicity. In the Contact section, you might want to input only the necessary information such as contact details, social media or several words for engagement. Check out some of samples below from Jupiter X Jove, Agency, Kore and Persephone templates:
Wrapping Up
Incorporating creative websites into your development process all depends on the goals of your site and the needs of your visitors. Developing a creative website is probably the most interesting design work you can come across – but it’s also the most challenging. The main thing to keep in mind is not to get overwhelmed by new ideas. It’s worth mentioning that while adding several moving elements onto a page might look visually appealing, it might be difficult to make them responsive.
Jupiter X offers a great selection of web templates dedicated to creative agencies or individuals. And the great news? You don’t have to start from scratch, as the readymade templates can be imported with just a few clicks – all you’ll need to do is change the text and images and you’re all good to go!
We hope that this article provides you with all the tools you need to implement creative website templates into your pages. We’d love to hear about your experiences, so please comment in the section below!
It’s well known that online shopping is big business. Online shops are popular for obvious reasons. Customers don’t have to leave their homes, they don’t have to wait in queues and they can shop 24/7. Even if you’ve never built a website before, you can create an online store with ease. The Woocommerce plugin will help you do just that. It’s bundled in the Jupiter X theme so you can install it easily.
During the process of building up your own online store, you might be wondering which elements are the best to display products as well as to create custom templates and single product pages. Below I’ve provided some tips that will help you attract buyers and boost sales.
Design the look of your online store
First, you need to consider design when sitting down to create an online store. Focus on simplicity, and everything that you do should be in line with what you would like to accomplish. Alternatively, you can get a ready-made template and customize it to your own needs. Fortunately, there are great ecommerce templates for Jupiter X provided by Artbees that have clean designs, intuitive layouts and follow the latest web design trends.
Don’t forget to continuously update and add fresh content to your site to keep visitors coming back for more.
Introduce your e-commerce experts
Aside from wanting to find out more info about your product, visitors want to know more about you and your business on a personal level. The “About Us” page is a great place to both add such content and to introduce your team using the Team Member element. This allows you to explain to your customers who everyone is and what they do. Describing who your team members are outside the office and providing contact info is also a great idea. These details make the team and the company much more relatable and friendly. Check out the Flowerpot template with the example of the Team Member element.
Contact information
When you’re looking to create an online store, keep in mind that your contact information should be clear and easy to find. Make sure to mention your contact email, address and social media channels. All this info can be placed on the Contact page and such elements like Icon List and Icon Box will help you to style these fields. Also, don’t forget to mention your customer care number on your website. In the age of social media and live chat, most customers still prefer to contact businesses on the phone. To go one step one further, you could also be willing to get a toll-free or IVR number to provide better support
What kind of Contact page would it be if there was no contact form? Remember to add the Form element to this page as is shown in the Watches Shop template.
Show off your partners
It’s important to establish your reputation in order to gain the confidence of your visitors. You can do this by showing which companies you work with. They don’t necessarily need to be big companies – even smaller companies can add a degree of trustworthiness to your enterprise. To show your partners, it’s better to use the Brands element where you can display your partners’ logos as can be seen in the Pollux template:
Gain your visitors’ trust by adding product reviews
Online shoppers can’t meet retailers in-person, so they have no choice but to rely on other buyers’ feedback. The Woocommerce plugin allows customers to leave ratings and reviews on product pages, which saves consumers time by quickly showing what other customers think about the product. Furthermore, you can blockquote the reviews and show them on other pages with help of the Testimonials element. Don’t hesitate to ask your customers to leave a review after making a purchase. Customers who are satisfied with your product will be glad to share their positive experience with others. Refer to the Chaldene template for an example.
Display your best sellers
You’ve already spent a lot of time and effort in getting customers to your store – however, many of them still leave without buying anything. This means that you might have only a few seconds to capture and retain a visitor’s attention by showing the right product. And if you don’t do this correctly, they just might decide to leave and look elsewhere. That’s why it’s so important to get the right products in front of your customers quickly. Best sellers can help you make more sales and profit from your existing traffic. With the Products element, you’ll be able to select which products to show. Check out the Clothing Shop and Decoration Shop templates for examples.
List the categories for an easier search
When creating products, you assign them to different categories. This helps to differentiate the products between various criteria. The Category page is vital to help you narrow down options for people and guide them to their desired product page so they can make a purchase. To showcase categories, you can use the Categories element where you’ll be able to select Woocommerce categories as an option. There is also a possibility to create a custom category template with the JetWooBuilder plugin. Instructions are laid out in this article. Take a look at the categories grid in this Food Delivery template.
Make sure your store is mobile-responsive
When creating an online store, it’s important to keep in mind that many people nowadays use their phones or tablets to make online purchases. This means that you need to ensure that your site design is mobile-friendly, so buyers can shop no matter which device they’re using. When creating content with the Elementor editor, you can customize it for different devices: mobile, tablet and desktop. Here are the options they provide:
It’s better to use vertical designs over horizontal designs for easier scrolling and content viewing on phone screens.
Make use of social media!
Advertising on social media channels is a powerful way to connect with lots of potential customers in fun, creative ways. There are tons of social media networks, but the ones you’ll probably find the most valuable are Instagram and Pinterest.
Because both of these are more image-driven platforms, they align well with selling products.
Instagram will give you a way to showcase your product itself, along with how it’s commonly used. Pinterest, on the other hand, gives you the opportunity to create and share content that’s related to your niche and drive targeted traffic back to your site. You can also display Instagram photos on your site by using the Instagram element.
Create custom archive and single product pages
Using the standard Woocommerce pages is boring. In other words, creating your own template for your shop pages would be much more interesting. We’ve got great news for you! You can do exactly this with the JetWooBuilder plugin – which is conveniently bundled into the Jupiter X theme. This is the perfect tool for quickly and effortlessly setting up a stylish web store. Inside the pack of the plugin, there’s a powerful set of WooCommerce widgets. Furthermore, the JetWooBuilder does not require extra skills as it’s quick, intuitive, and user-friendly. You can read more about how to create custom templates for product pages in the following articles:
Email marketing is an easy way to build relationships with your customers. You’ll need to collect the emails of buyers and make sure that they want to receive messages from you. One of the methods to ask buyers whether they want to receive email notifications is by displaying a pop-up window while they’re browsing. I also recommend that you track which customers unsubscribe from your email list as this is quite useful. You can use this info as well as other details from their buyer profile to figure out why they might have unsubscribed and how you can prevent future cancellations.
To create a pop-up window, you can use the Jet Popup plugin, which is bundled in the Jupiter X theme as well. Having a pop-up is a great feature as it’s the first thing that visitors see when they go to your site. It immediately catches their attention. Also users cannot ignore the pop-up.
And the Subscribe Form is an appropriate element to use in the pop-up window so you’ll be able to collect the buyers’ email and notify them with updates about your products. Check out an example of the pop-up and subscribe form in the Shoes Shop template.
Don’t hesitate to offer discounts
Offering discounts on purchases is a way to get visitors into your store quickly. Discounts don’t only help your shoppers – they also help your business. Your sales will increase and your reputation will be improved, so discounts may be that one ingredient that can bring success to your business.
If a discount is time-limited, the buyers will be forced to act at that moment. Here, the Counter element will be quite helpful. With Counter you’ll be able to set a time limit, and it’ll be a last chance to get a discount on everything (or almost everything), so the buyers must act fast!
Limited-time discounts are a smart marketing move. Visitors will get on them like there’s no tomorrow – that is, as long as you’re honest about it. If you say your offer ends on Friday, it should end on Friday. Otherwise, your buyers won’t act quickly the next time because they’ll expect the offer to last longer.
Wrapping up
In short, there’s not much of a debate anymore over whether or not to create an online store. There are tons of advantages: your store will be open 24/7 and customers will be able to make purchases by simply clicking on a button. An online shop also removes the barriers of travel and parking, which allows you to reach more customers. And online store owners get to enjoy the fact that their store’s doors never close.
In this article, we took a deep dive into how you can build up your own store online quickly and easily in Jupiter X. So save time and energy and create a shop site with a Jupiter X template. There are many templates to choose from, so the creation process will be much easier for you!
In the previous article, we stopped right after we created a community poll website, which enables users to submit their own polls. . In this post, we’ll walk you through the rest of the process. The next step is setting up a homepage where users will be able to see the latest votes, filter them based on their tags and also be able to search between them. After that, we’ll need to design the single poll page.
Step Four: Implement the single polls page and the homepage
This is what I want from the homepage: a list of the latest approved polls, which includes the title, subtitle, latest vote date and created date. In case the poll was closed, it should also show a lock icon in the top right corner.
Logged out view of the desired homepage.
Also, if the user is logged in, the polls that I’ve already voted on should turn green, so it becomes possible to distinguish between the polls that I’ve participated in and the ones that I haven’t.
Logged in view of the desired homepage.
At first look, it seems possible to implement this by using a simple listing with the help of Jet Engine and Jet Smart Filter plugin. Well, this is true for sure. However, one thing that is missing is the conditional logic of colors. Jet Engine doesn’t give me the ability to distinguish between the polls I’ve voted in and the ones I haven’t.
So, the trick here would be to define a custom shortcode, place it inside a listing and then use it to have smart filters. The following code will give me a shortcode that I can use inside a Listing template on Jet Engine. It represents a single topic with the desired conditions that let me style it as I wish:
Just put this in your child theme’s functions.php, and the shortcode will be available. I also need to style it a little bit, so I’ll go ahead and add this CSS fix into the jupiterx-child/assets/less/style.css:
Now, go to Jet Engine -> Listings and add a new Listing Item. I named it as “polls.”
Adding the “polls” Listing template.
While editing the listing, set the Listing Source as “Posts” and assign the “Topics” post type to it. You can set the whole item to be clickable as well.
Configuring the “Polls” Listing template to show the “Topics” post type.
Now drop the Shortcode element into the page, and add this shortcode to it:
[custom_poll_item]
This is the name of the shortcode that we previously built in the functions.php file.
Adding the custom shortcode to the listing template.
As soon as the shortcode is added, you should be able to see the result in the preview. It’s better to set the margin and column gap of the sections here to 0. Now that you added the listing template, you need to use it on a Listing Grid and put it on your page.
Go to your homepage and drop a Listing Grid element into the content. Then configure it as follows:
Configuring the Listing Grid to show the latest polls.
In order to load more polls, you need to add a button and set it’s ID as “loadmore_latest,” which is the ID you set in the Load More Element ID section of the listing grid.
Adding the proper ID to the Load More button.
Now it’s time to add the search box on top of the polls list and then add the tags filter at the bottom. I’ll use a Smart Filter plugin to do that.
Go to Smart Filters and add two filters:
Tags Selection filter
Search for polls
Adding a new Smart Filter.
For the search box, use the Search filter type:
Setting up the search filter type (text box).
And for the tags, use a Radio type as follows:
Setting up the tags filter using a Radio filter.
Update the filters and go back to the homepage. Now drag and drop the search filter and radio filter into the page.
Adding the Search and Radio filter elements to the homepage.
And assign the filters as you wish. Then style them using their styling options.
Configuring the filters to work with the smart filters created earlier.
Also, this CSS snippet is needed to remove the radio circles and to also show a different color on the selected tag:
The homepage is ready now! Publish the changes, assign this page as your homepage in WordPress Settings -> Readings and check your website.
By clicking on every vote item, you’ll be directed to the polls page where you can participate in the polls. Styling this page requires some modifications in the child theme.
In the previous article, we showed how to override the bbPress template files in a child theme. Just like before, I would need to override gdpol-poll-content.php from wp-content/plugins/gd-bbpress-toolbox/templates/default/bbpress/ in wp-content/themes/jupiterx-child/bbpress/gdpol-poll-content.php.
Also I need to override content-single-topic.php from wp-content/plugins/bbpress/templates/default/bbpress/ in the same directory of my Jupiter X child theme (bbPress).
You can edit the rest of the template files in order to get the look you’re going for. You can find more information here.
Editing the content-single-topic.php file.
Instead of the poll title and description, we used the topic title and description in the previous article. So, we need to show the topic title and description in the poll single page template.
Editing the gdpol-poll-content.php
In the end, adding this CSS snippet to jupiterx-child/assets/less/style.less will give you a better look in the single topics page:
Step Five: Design the header and footer with Jupiter X and Raven
The next part when you create a community poll website involves designing the headers and footers of the website. There’s nothing special in this section since everything is possible with the Jupiter X’s Custom Header and Custom Footer capability. You may want to put menus and call to actions in the header and ensure they are looking as they should. More information about this section can be found here.
Adding a custom header template with a call-to-action for creating the polls.
Step Six: Install Ultimate Member and its add-ons and configure
Using a membership plugin can help you create a membership directory and add social networking features to your app. This will also help you monetize your project. For this particular website, we used the Ultimate Member plugin.
Dozens of add-ons offered by this plugin can help you build a social network. Imagine that the users of your community create polls, share them on social media, and others vote in the polls and join your community. They interact with each other, see their profiles and receive notifications with each interaction. This is all possible with this plugin. Remember that in order to have an integration on the user profiles and the bbPress forums, you would need to use this add-on on Ultimate Member which is premium:
Profile page view and the integration with the forums. We should change the “Forums” to “Polls” later on using translations.
Later on, you can use localization and change the “Topics” word to “Polls.” After installing the Ultimate Member plugin, you need to define some pages as the membership directory page, single profile page and etc. Here you can find more information on how to configure that.
Step Seven: Add custom notification on the poll votes
Notifications are a must-have for any social poll website. As soon as any sort of interaction occurs, users should be notified. In order to have a notification system, we used the Real Time Notification add-on for the Ultimate Member plugin and configured it as we wanted. By default, it gives you these notifications, and you have full control of the options to enable/disable them and show the texts as you like.
Notify users when the user role has changed.
Notify users when someone comments on their post.
Notify users when someone replies to one of their comments.
Notify users when another member views their profile.
Notify users when guests view their profile.
bbPress – Notify users when someone replies to them on topics they created.
bbPress – Notify users when someone replies to them on a specific topic.
You can find information on how to configure it here:
I want to also notify the owner of the poll whenever his/her poll receives a vote. In order to do that, I’ll write a code with the help of the notification API included in the Ultimate Member add-on called Real-Time Notification.
/*
This code sample shows you how to use the API to create
and add custom notifications (for real-time notifications) in the plugin.
STEP 1: You need to extend the filter: um_notifications_core_log_types with your
new notification type as follows. For example:
*/
add_filter('um_notifications_core_log_types', 'add_custom_notification_type', 200 );
function add_custom_notification_type( $array ) {
$array['new_action'] = array(
'title' => 'When something happens', // title for reference in backend settings
'template' => '<strong>{member}</strong> has just did some action.', // the template, {member} is a tag, this is how the notification will appear in your notifications
'account_desc' => 'When member does some action on my profile', // title for account page (notification settings)
);
return $array;
}
/*
STEP 2: Add an icon and color to this new notification type.
*/
add_filter('um_notifications_get_icon', 'add_custom_notification_icon', 10, 2 );
function add_custom_notification_icon( $output, $type ) {
if ( $type == 'new_action' ) { // note that our new action id is "new_action" from previous filter
$output = '<i class="um-icon-android-person-add" style="color: #336699"></i>';
}
return $output;
}
/*
STEP 3: Now you just need to add the notification trigger when a user does some action on
another user’s profile. I assume you can trigger that in some action hooks.
For instance, when a user views another user’s profile, you can hook like this.
$who_will_get_notification : is user ID who will get notification
'new_action' is our new notification type
$vars is array containing the required template tags, user photo and url when that notification is clicked
UM()->Notifications_API()->api()->store_notification( $who_will_get_notification, 'new_action', $vars );
*/
add_action('gdpol_vote_saved', 'trigger_new_notification', 100);
function trigger_new_notification( $args ) {
global $_gdpol_poll, $um_notifications, $post, $topic;
$_poll = gdpol_get_topic_poll_id();
$poll_author_id = bbp_get_topic_author_id($args->topic_id); // die();
update_post_meta( $args->topic_id, '_bbp_last_active_time', date( 'Y-m-d H:i:s', current_time( 'timestamp', 0 )));
if ( is_user_logged_in() ) {
$vars['member'] = $args->topic_id;
$vars['notification_uri'] = get_the_permalink($args->topic_id);
UM()->Notifications_API()->api()->store_notification( $poll_author_id, 'new_action', $vars );
}
else {
UM()->Notifications_API()->api()->store_notification( $poll_author_id, 'new_action', get_the_permalink($args->topic_id) );
}
}
After adding the above code, a new notification will be added to the Ultimate Member -> Settings -> Extensions. Remember to activate it and save the settings.
Activating the newly added notification.
In the meantime, I want to update the topic’s last activity meta field with the latest vote time. So, in the last function, you’ll see this line of code:
This will help you update the latest activity on each poll which is showing on the homepage within the listing you created before. Just add the above code to your child theme’s functions.php file. It’ll give you a look like below. As soon as someone votes on the poll:
Voting on a poll by a user.
It’ll send a notification to the user who created the poll.
The notification received on the other user panel.
And by clicking on the notification icon, it’ll show you the text that you have provided in your custom function and the configuration of the plugin.
Custom notification shows up when a vote is submitted on a poll.
More configurations and stylings are possible using custom CSS.
Step Eight: Localize and translate to your own language
The last section in creating a community poll website is translating and localizing the words into your own language. Using the Loco Translate plugin, you can change every single piece of text within this app just as you like. Remember that the texts are located on different plugins, and you need to dig into the plugins to find the source of the text. Mostly, you need to change the word “Topic” to “Poll” wherever it is showing up because of the logic behind this app.
Translating the Topics to Polls via LocoTranslate.
Results of translating Topics to Polls in the Profile page.
Results, further development and roadmap
We created a social network application based on social polling features. Certainly, there are tons of further considerations to make it like a production app. But the thing is that the base is prepared, meaning that you can add as many features as you want simply by using different plugins and configurations.
This method will save a lot of money if you aim to build such a community – and compared to the social polling platforms out there, it can be considered almost a free platform. The good thing about this method is that you can keep everything updated and secured with one single click.
Additional features such as Login by Phone (using two-factor authentication) or the discussion below the threads can be applied to the app using the following plugins:
Adding more plugins may require configurations and, in some parts, or even writing some codes to integrate it with your base. For example, bbPress uses three post types such as “forum,” “topic” and “reply.” You would need to enable the comments for the “topic” post type using custom development because by default, the topics don’t receive any comments. Or you may need to configure the Digits plugin to work with your own SMS platform.
Also, you may want to push your notification to the users who subscribed to your app or website. This can be done by using FireBase or any other push notification service. However, it may require custom development in some parts to make sure it triggers correctly whenever an interaction happens on your website.
The last thing you want to do is to wrap the website on a webview and publish it on app stores such as Google Play or iTunes. There are dozens of tutorials out there that can help you with that.
Wrapping Up
Creating a community poll website has never been easier than now. It can be done using bbPress and WordPress and using handy tools such as the Jupiter X theme. Its bundled plugins will ease the process and reduce the cost of development. In this series, we provided an overview of how to create a social polling website using their tools we had. Check out the first article of this series here if you’ve come across this post using a search engine.c
For developers, time is of the essence when it comes to delivering a project on a tight deadline. Every second matters – this is the philosophy that helps the Jupiter X team propel itself forward with every new version it releases. After running some performance checks, we noticed that a couple of factors were hindering the Jupiter X performance from reaching its peak potential. So we set out on a mission to fix the inefficient codes, which then in turns saves valuable time for our users.
This post will provide an overview of the recent tweaks we’ve made, and we’ll further look at the efficacy of those changes in our test cases after the 1.15.0 update.
Inefficient codes
While checking the Jupiter X performance, we noticed that one of the themes’ components – called Compiler – was performing poorly, which affected different parts of user experience.
In the Jupiter X theme, the Compiler is responsible for generating and caching CSS and JavaScript. When there’s no cache, it compiles LESS, CSS and JS files and generates the necessary assets in the upload directory.
The Compiler offers some valuable benefits for developers, allowing them to:
Add styles and scripts to the theme on the fly.
Filter or override the LESS variables used for generating styles.
Exclude/include different styles and scripts.
Generate automatic RTL styles.
At the start of the Jupiter X road, these benefits seemed quite promising in terms of bringing lots of customizability to the themes. But throughout the years, it appears that the theme industry is moving toward lightweight themes and relying on page builders to increasingly do the job.
All in all, we started to optimize the Compiler to bring faster-compiling assets for the new version of Jupiter X. We did the following optimizations until v1.17.0.
Reduce calling Customizer variables
The Jupiter X Customizer settings rely on the Compiler to generate styles for the frontend. In this way, we send the Customizer settings as an array (variables) to the Compiler, and it generates the proper styles.
That said, it works pretty well – however, we found out we were calling the variables multiple times during each page load. Now, it’s limited to only when generating the styles.
Single post compiling preview/update asset
There are a few post meta options (build via ACF) for single posts. Some of them are styling options. To generate styles for the frontend, we were sending the styles to the Compiler and recompiling the main CSS file.
It turned out that this caused unnecessary recompiling for each post update/preview. We decided to generate separate CSS files for each post (e.g. jupiterx-post-12.css) when necessary.
Refactoring the CSS parser function
We have a CSS parser in the theme which is responsible for the following actions:
Removing empty CSS properties. (Replaced by standard PHP functions)
Minifying CSS. (Replaced by standard PHP functions)
Generating automatic RTL CSS. (Replaced by a faster PHP class)
Using static script
The theme’s main JavaScript file was generated via the Compiler from smaller files, and we came to the conclusion that we don’t need to have on-the-fly compiling for the script file. That said, we replaced it with a Gulp solution to build and distribute the static script in the theme.
Jupiter X Performance test cases
We measured the loading time in the following 5 test cases for comparison. To have a stable testing result for all the tests, the factors below were considered.
The comparison was done between version 1.15.0 and 1.17.0. You can check the release notes.
Each test was run 3 times (with 30s interval) to calculate the average load time.
Development mode (Control Panel > Settings) was set to off.
Tested on load environment.
Tested on a fresh installation.
Activated Jupiter X Core, Advanced Custom Fields and Elementor plugins.
1. Default home page
This test was completed on a default Jupiter X homepage. The page was loaded 3 times without a cache, and the loading time was recorded.
Result
The v1.17.0 is almost one second faster than v1.15.0, so there was a one-second improvement (30%) in loading without a cache.
2. Loading Customizer
This test was completed on Customizer loading the default Hello world single post page. The page was loaded 3 times without a cache, and the loading time was recorded.
Result
The loading time in v1.17.0 is almost one second faster than v1.15.0, which is the equivalent to 15% faster loading without a cache.
3. Reloading the Customizer preview
This test was done on Customizer > Blog > Blog Single when changing the Typography settings of the Author Box. The test was done 3 times.
Result
It’s not possible to measure the loading time in Customizer preview, but based on the checks, v1.17.0 is about 40% faster than v1.15.0.
4. Loading the Elementor editor
This loading test was conducted with Elementor on a page with 9 sections. The page was loaded 3 times without a cache, and the loading time was recorded.
Result
The loading time in v1.17.0 is almost 2s faster than v1.15.0, which is the equivalent to a 25% faster loading time without a cache.
5. Elementor previewing
This test was done on Elementor previewing on a page with 9 sections. The page was previewed 3 times, and the loading time was recorded.
Result
The loading time in v1.17.0 is almost 2s faster than v1.15.0. This is the equivalent to a 50% faster loading time without a cache.
Conclusion
As mentioned before, we strived to enhance Jupiter X performance in various areas of the theme. By improving the code base without sacrificing current features, we were able to significantly decrease loading times, which translates into time saved for our users.
In the table below, you’ll be able to see the summary of all the test cases mentioned in this article.
Test case
Average improvement
Default home page
30%
Loading Customizer
15%
Customizer preview reloading
40%
Loading Elementor editor
25%
Elementor previewing
50%
Last but not least, since we improved the codes to run more efficiently, the usage of CPU and RAM of your server will be decreased.
Of course, there’s still room for performance enhancement, and we’re continually working to improve the theme to make it as performant as possible.
We’d love it if you could share your feedback with us in the comments section.
Gutenburg, the new WordPress editor, is the future of WordPress. In no time, it’s going to bring a full-site editing experience for users. That said, learning how to create a custom block for WordPress Gutenberg is a fantastic investment. These days, more and more themes (such as the Twenty Twenty theme) are taking advantage of what Gutenberg has to offer.
This post will go over a general introduction of Gutenburg blocks and will then explain how to create a custom block for WordPress Gutenberg.
What are Gutenberg blocks?
Blocks are the core building functionality of the new editor. The idea is that you can add blocks anywhere you want. Blocks are created mostly in JavaScript (sad news for PHP lovers).
Learning a few concepts is necessary before diving into writing codes.
Block registration
First things first – we need to register a block. To register, we need to use the registerBlockType function.
// Registering my block with a unique name
registerBlockType( 'mcb/call-to-action', {} );
Edit and Save
After registering a block, the next step is to tell the editor how to show the block in the editor and how to save it in the database.
Having a proper understanding of the edit and savefunctions is essential to create a custom block for WordPress Gutenberg. The edit function is responsible for making the block editable in the editor, and the save function is responsible for saving the block in the database for showing it in the frontend.
If so, sorry to tell you that Gutenburg is a React.js based editor. The JavaScript frameworks have taken a leap in popularity among developers. Nowadays, JavaScript is an essential skill to have under your belt.
Take every opportunity to really beef up your JavaScript chops. – Matt Mullenweg, Creator of WordPress
Available built-in blocks
Following are the list of built-in Gutenberg blocks in WordPress. If you need more blocks, you can read this article about free blocks.
Common blocks
This includes Paragraph, Image, Heading, Gallery, List, Quote, Audio, Cover, File, Video blocks.
Formatting
This includes Code, Classic, Custom HTML, Preformated, Pullquote, Table, Verse blocks.
Layout elements
This includes Buttons, Columns, Group, Media & Text, More, Page Break, Separator, Spacer blocks.
Widgets
This includes Shortcode, Archives, Calendar, Categories, Latest Comments, Latest Posts, RSS, Search, Tag Cloud blocks.
Embeds
This includes Embed, Twitter, YouTube and 29+ blocks.
How to create a custom block for WordPress Gutenberg
Enough is enough – let’s get our hands dirty and start coding! There are different techniques for creating a custom block for WordPress Gutenberg. For the purpose of this article, let’s use one of the most straightforward techniques to build a tailored Call to Action block.
Note: It’s worth mentioning that many detailed explanations have been intentionally omitted to help you follow the flow of the article easily. The intention is to help you create your first block without being weighed down in the minutiae of block creation.
1. Prepare a base plugin
Before doing anything else, we need a plugin to place our codes. Depending on your preferences, you can use a child theme instead of a plugin. 1. Go to your plugins folder on your site, then create a my-custom-blocks folder.
2. Create a plugin.php file as shown below.
3. Activate the plugin from WordPress admin.
2. Enqueue block script and style
Using the register_block_type function, we can enqueue the block’s script and style it with the Guttenberg.
1. Add the following function in the plugin.php file to enqueue the style and script.
function mcb_register_blocks() {
// Check if Gutenberg is active.
if ( ! function_exists( 'register_block_type' ) ) {
return;
}
// Add block script.
wp_register_script(
'call-to-action',
plugins_url( 'blocks/call-to-action/call-to-action.js', __FILE__ ),
[ 'wp-blocks', 'wp-element', 'wp-editor' ],
filemtime( plugin_dir_path( __FILE__ ) . 'blocks/call-to-action/call-to-action.js' )
);
// Add block style.
wp_register_style(
'call-to-action',
plugins_url( 'blocks/call-to-action/call-to-action.css', __FILE__ ),
[],
filemtime( plugin_dir_path( __FILE__ ) . 'blocks/call-to-action/call-to-action.css' )
);
// Register block script and style.
register_block_type( 'mcb/call-to-action', [
'style' => 'call-to-action', // Loads both on editor and frontend.
'editor_script' => 'call-to-action', // Loads only on editor.
] );
}
add_action( 'init', 'mcb_register_blocks' );
2. Create the following files in the plugin folder to hold the style and script.
After preparing the base, it’s now time to create the actual block.
1. In the call-to-action.js file, add the following function to register an empty block.
( function( blocks, editor, element ) {
var el = element.createElement;
blocks.registerBlockType( 'mcb/call-to-action', {
title: 'MCB: Call to Action', // The title of block in editor.
icon: 'admin-comments', // The icon of block in editor.
category: 'common', // The category of block in editor.
attributes: {},
edit: function( props ) {
return null;
},
save: function( props ) {
return null;
},
} );
} )( window.wp.blocks, window.wp.editor, window.wp.element );
2. For this block, we need both the content and button attributes. Add them as shown below.
3. In the edit function, we’re going to use the RichText component to create a div to hold the content and a span to hold the button. Basically, this component allows to create an editable text area.
The onChange function is responsible for updating the attributes when you change the block content.
5. Now, you should be able to play with the block in the editor.
Wrapping Up
This post provided a basic introduction of what Gutenburg is and how we can create a custom block for WordPress Gutenberg. In other words, think about this article as the very first step in entering the Gutenberg world.
We recommend that you read the WordPress official handbook in order to gain a deeper understanding of the Gutenberg editor.
We’d love it if you would share your custom block with us in the comment section below!
Amid the COVID-19 outbreak, many companies around the world were forced to roll out remote work as their top policy to help slow the rapid spread of Coronavirus. And we weren’t the exception! As a member of the WordPress community with 80% of our staff already working remote, shifting to working-from-home mode was not a major hassle for us. Following the initial announcement, we partially shut down the office, and nearly everyone was asked to begin working remotely during COVID-19. Since the beginning of last week, we completely closed our office doors, and we are now happy to announce that our team is 100% remote, hoping we could – even if only a bit – help to break the chain of infection.
Obviously, this shift was pretty new for a couple of us, and we experienced some challenges to get everything in place working from home. So to get a grasp on real-life experience, we asked both our veteran remote workers and newbies to share what challenges they faced and how they overcame them. We also gathered some tips on how to effectively work in lockdown, which could be helpful for anyone struggling to strike the work-life balance at home.
Constant communication is key
Remote work means you are also remote from your colleagues, office environment, coffee break chats and more. According to the stats, 20% of remote workers struggle with loneliness. Working remotely during COVID-19 with the added pressure of social distancing doubles concerns about a breakdown in communication. This loneliness and lack of proper communication with colleagues can demotivate and negatively affect the overall quality of someone’s work. Fortunately, in the age of the internet with numerous communication tools available, this shouldn’t be a major issue anymore.
Set up daily stand-up meetings with your team or supervisor at the beginning of the day. Even a single wave in a short video conference will boost your energy for the day. Use tools such as Slack, Skype and Zoom to be in constant communication with your team. Tatyana, our Senior Support Staff, also believes that anyone can easily overcome the miscommunication issue:
I myself have been working remotely for 6 years. Sometimes it’s difficult as you don’t have your colleagues near your side, and no one will give you a piece of advice. But in the age of technology, this problem can be solved. We have different messengers like Skype, Slack, Viber where you can communicate with each other.
Treat it like you are at the office
Working remotely from home? Woohoo! I’ll go ahead and wear my warm pajamas, jump in my cozy bed, have my coffee by my side and promise to be the most productive me! Stop there! This is definitely the worst approach toward working from home.
Working in your house clothes in an improper place like your bed can affect productivity in the long run. So try to get up at least an hour before work starts, take a shower and get dressed. You don’t have to be too formal. Doing things such as brushing your hair, putting on make-up (if that’s part of your work routine) and dressing in comfortable and proper clothes is enough to help your brain to prepare for work. This also helps establish some normalcy, which is particularly important while working remotely during COVID-19. Plus, you won’t be caught off guard if your supervisor makes a video call out of nowhere!
Gulhan – who is a developer – and two members of our support staff, Alexander and Aamir, think you should define a specific routine to stay organized while working from home:
Gulhan: I wake up early and always go to bed and wake up at the same time even on weekends. Because my brain clock knows my routine I never feel sleepy or tired. I also change my clothes before I start to work. Working at home doesn’t mean that we work with sleeping clothes. Nobody is asking us to suit up surely but working in sleeping clothes is not acceptable at all.
Alexander: When you work remotely the main thing is to be self-organized and divide your home routines and working time. Get up before the working shift starts, at least 1 hour earlier to do some morning exercises, and never work in your pajamas!
Aamir: One tip for working from home is to make sure that you get dressed. There’s something about getting dressed, putting clothes on, brushing your hair, because when you do this, it kind of puts you into work mode and it tells your brain, ‘okay I’m transitioning from the bed into work mode.’
Equip your home office efficiently
One of the biggest challenges of working remotely is finding the best spot to establish your workplace that isolates you from your personal life and family members. Dedicate a special time to set up your home office and do as much as you can to equip it with any tools and devices that will help you keep your productivity steady.
If you’re a messy-desk type of person and have already made peace with your clutter, then this piece of advice will be the easiest task for you to accomplish! Just grab your laptop, find a place for it on your desk and start creating wonders! But those who are used to working on a neat desk, you should take time to create your own workplace away from any distraction. The best thing to do would be to dedicate one room to work. But if you live in a small apartment, a comfortable corner that separates you from the rest of your home would also do the job. Get a comfortable chair that you can safely spend hours on and try to choose a place with enough natural lighting. Separating yourself from your personal life like this also helps your family members understand you are officially at “work” and to respect that by not distracting you with any conversation, chores, etc.
After all, it’s a matter of what works the best for you. You might want to change your workspace once in a while from your room to a sofa in the living room or even to the balcony. You will gradually figure out what and where allows you to focus on your work better. Just like what Aamir suggests:
You don’t have to be in the same spot every single day. Sometimes what I do is I actually go hang out in my sisters room and I actually get work done there, because when you work from home it’s nice but sometimes after a while you can easily get bored and it can drive you crazy.
Or you can separate a room for work – and only work – like what Gulhan did:
I have my own working space at home and it’s designed like an office. I have only 1 table and 1 very comfortable chair and that’s all. I did not put a second chair intentionally, because I did not want anyone else to come to my room to hangout or chat.
Or like Alexander, pay close attention to the furniture and devices you need:
The most important part is a working place: spacious table, comfortable chair, ergonomic keyboard and mouse, eye-friendly monitor (don’t forget to keep your eyes safe). Good and stable internet connection also plays an important role to be more productive.
Sometimes you need to personalize your home office as much as possible to stay focused. Patrick, our developer, believes so too:
Having my own desktop and laptop. I cannot simply work on other people’s devices. I mean you need something that you own personally. And I work on desktops more than laptops. I love a large screen, keyboard and mouse. I feel much more productive and comfortable.
And finally, as we mentioned earlier, choosing the best spot to work depends entirely on you and your mood. Nodari, a member of our support staff, for example, went against all odds and figured out he can be productive and creative in different locations –even on a hammock!
Sitting at the PC desk for several hours can be very boring, can affect your back and probably you will be tired very soon. This was the problem I was dealing with when I started working from home, then I started exploring some other options and this is what I came up with:
The main station – I call it my main working desk where I spend most of my time with my laptop. It’s kind of a universal place and usually I use it when I’m working on a serious task.
Sofa – I love it because I can take different poses on the sofa, I can lie on it, and I can even take half sitting half lying poses! 😀
Beach chair – not often but I have one and sometimes it’s very comfortable to lie on it. Maybe it’s reminding me of summer and sun? 🙂
Hammock – Believe it or not, I have a hammock in the room! It’s great for creativity!
Well, why not?! If it helps you stay focused and increases your productivity, then go for it! Even if it runs counter to all the tips mentioned above!
Take small breaks
While working at home, you obviously don’t have the option to get up and go around the office or meet in the cafeteria for a coffee and chat a bit with co-workers. You are more likely to spend all day behind the desk, which is dangerous for your health and bad for the quality of your work.
Take small breaks, prepare a tea or a coffee, take casual walks around home and get back to work again. But remember, your break times are for relaxing only! Try not to mix it with completing chores around the house!
If you have small children, go spend some time with them while they’re watching cartoons. Have a conversation with other family members. Put on your headphones and listen to your favorite music, do exercises, yoga or meditation for a couple of minutes, which will boost your mental and physical health. This is invaluable advice, particularly while we are working remotely during COVID-19 and ongoing social distancing.
Nearly all our colleagues pointed out the importance of breaks:
Tatyana: Don’t sit at the desk the whole working day! You’ll be tired and bored. Take a 5-min rest after each hour, make some cup of coffee or tea or even talk to your remote colleague via chat or video call.
Aamir: Make sure that you take frequent small breaks, these are really important. I usually follow the 20-20-20 rule. It goes like this “Every 20 minutes, take a 20-second break and focus your eyes on something 20 feet away.”
Alexander: Don’t forget to take breaks each 1-2 hours and shake your bones, as sitting and working affects your health in a bad way.
Patrick: Have flexible break times. I either take a break before or after a daily stand-up meeting. Sometimes I’m in the zone and I have to pause my break for later. And I drink coffee twice a day, one after I started my day and another one after my break.
One final word to leaders
And finally, a word to all leaders and managers working remotely during COVID-19! As a manager in the web industry, there is a high probability that you already developed remote working strategies for at least a couple of your employees – meaning that managing a remote working team won’t be that difficult for you. But managing a team during a pandemic can be challenging, and you might need to develop extra plans to lead your team through this tough time. Many plans you previously put in place might not be effective or appropriate during this time.
For example, following the Coronavirus outbreak, all kids are at home now, so be as flexible as you can with working hours to your teammates with children. It might be difficult for them, at least in the beginning, to balance their time between kids and work.
Keep track of your teammates and communicate with them more often. A casual chat or a video call to check on if they’re doing ok and all is well with work would be very motivating and will drag them out of unwanted isolation.
Send feedback to your team more than usual, celebrate their wins and get them engaged in group conversations on Slack or any other instant messaging app. It’ll make them feel as if they are part of the family.
Hold virtual happy hour meetings once a week and ask everyone to join with their favorite snacks and just talk about anything other than work – you could even get their family members to join. Trust me, nothing will boost their morale more than this during this challenging time.
We are in this together!
Working remotely during COVID-19 can pose challenges to our lives, particularly with the stress, rumors and negativity that come with the outbreak. However, if it’s done in the right way, it can even be the most productive period of your professional life. So accept the challenge and always remember that your lockdown has such a big effect on reducing the likelihood of transmission. So stay inside, stay connected, stay safe and don’t forget that we’re all in this together!
We also shared our experiences working from home in the video below. If you have any other tips and experiences regarding remote work, please comment below and help us spread the useful knowledge!
Agency website templates are all about design that is clean and easy-to-understand, which in turn allows visitors to easily access information from the homepage. In this article, we break down this concept and discuss the key elements in creating an agency website.
You’re in luck! We’ve gone ahead and compiled a list of the most crucial elements needed for an agency website. Plus we included a couple of interesting gems that will allow you to showcase your agency.
And more good news: you don’t have to be a programmer to create a professional-looking agency website. In other words, you won’t have to write a single line of code at any stage of building up an agency website. A major part of the work is done for you already, and every user gets the most out of their preferred site editor. Let’s dig in!
Hero sections
Hero sections are the part of the page that appear as the first element. Your site visitors will notice the hero section the second they enter your site – as you might imagine, hero sections are one of the most important sections for agency websites. Your goal here is to create an eye-catching section that will keep the visitor on your page and invite them to browse other parts of your site.
Usually, the hero section is built with a visually appealing background or side image, brief explanation text of the company’s main goal and sometimes call-to-action buttons.
Jupiter X has several examples of how a hero section can attract visitors. Let’s check them out:
The services section is another vital part of your agency website that should not be overlooked. In this section, you should display all services offered to your visitors, which means that it should be crystal clear and easy to understand. You can provide a brief explanation of the service and a call-to-action button for more information. These buttons can be used to direct visitors to the single services page.
The popular layout for any services section is divided by several columns. Elements, image elements and tabs can be used to beautifully display the services offered by your agency.
The portfolio section is where you’ll need to beautifully showcase your recent work. The appearance of this section depends on the type of your business. So, if you have a software agency, then you have to list the most popular programs you’ve completed. If you’re a web design studio, then you might want to list the websites you’ve created. If you’re a music composer, you can list your popular soundtracks and so forth. In other words, depending on what you do and what you want to showcase, the elements used in a portfolio will change accordingly.
In Jupiter X, there are several Elementor widgets to showcase portfolios. These portfolios can be dynamic or they can be assembled with elements that are not dynamic and manually linked to the single portfolio page or to directly linked to the project website.
Recent publications could be treated as a blog section. Of course, what you decide to name this section when creating an agency website is up to you. Depending on what you prefer, you can call this section “recent publications” or a “blog”. The blog section on the main page might contain recent publications from your company’s activity. Nowadays, keeping up with blog posts has become extremely important. So, if you decide to place this section on your main page, then you have to constantly publish your posts.
Whenever I browse a company’s website, I pay attention to the blog section such as the date when they last published a post. So for instance, if it’s been 6 months or a year since they last posted, then I might come to the conclusion that the company is not paying attention to the public or are not serious about keeping up with the latest trends in their industry.
Jupiter X has several Blog widgets to showcase recent publications. You’ll need to use the Posts element and style the look as you want in the element settings.
A recent publication section in the Startup template:
2. A recent publication section from the Agency template:
Partner section
This section highlights the prominent partners of a company or business, which can go a long way in increasing the value of a brand and could generate extra leads. The power of the partner section shouldn’t be understated. If you have partnered with globally recognized or trusted partners, the chances are that other big companies will want to partner with you as well.
At some point, subscribers might become your next client or partner, meaning that they are one of the most important parts of your business. While creating an agency website, keep in mind that you’ll definitely want to have a subscription section right on your homepage. This beautifully created section may also attract more visitors, and you might also want to include some info about what you’re going to do with the list of subscribers. In other words, it’s a good idea to promise that you won’t spam their mailboxes and that they’ll be able to opt-out anytime they want.
Footers could play a significant role on your agency website. While designing a footer, you should remember one vital thing: the footer appears on every page, so you’ll need to make it very attractive and informative. A footer is a place for only necessary information, such as contact info, important pages on your site (such as About Us or Pricing) and a subscription box.
The footer section as seen in the Startup template:
When you have a powerful tool such as Jupiter X at your disposal, creating an agency website shouldn’t be a complicated process. Jupiter X offers a great selection of web templates dedicated to agencies that have differing profiles. In order to build up an agency website, you don’t have to start from scratch, as the readymade templates can be imported with just a few clicks – all you’ll need to do is change the text and images and you’re set!
I hope this article will help you create an agency website that suits your needs in no time at all. We’d love to hear about your experiences, so please comment in the section below!
UPDATE On May 2020 we relaunched Odise with a new brand title Growmatik. With this release, we applied the first round of changes and improvements to the product based on feedback we got from our early users. Most important of which was user onboarding from WordPress admin. We solved and smoothed out onboarding obstacles with this release and also collected an enormous amount of feedback from users to reflect on for future releases, including some very exciting new features coming up.
Jupiter X has been around for about 7 years now. More than 130,000 websites from a wide range of niches have been built with Jupiter X. But is that it? What is it you should do after building a professional WordPress website?
What comes after a WordPress website is built? Growth
Once you build a WordPress website for your business your next move is obviously to expand your website audience. This means collecting and nurturing leads, making sales and retaining your customers. You could spend money for outbound marketing campaigns such as Google and Facebook Ads – but to do this organically, your best bet is your content.
By content, we’re referring to your website content, marketing campaigns, pop-ups, emails – essentially, anything and everything you use to promote your business to your audience. If you use a one-size-fits-all content policy, your audience engagement will be minimal. In other words, you need to give each segment of the audience the content they want.
Marketing is no longer one size fits all
Marketing is no longer a same-for-all reachout mechanism. In the near future, the only marketing that will be relevant is personalized marketing.
Imagine that you can have a massive eye that watches over the journey of our site’s visitors from the moment they arrive until they are a loyal customer. And now imagine that this eye can provide visitors with different versions of your homepage based on their background, smart pop-ups tailored to their behavior and exclusive email campaigns suited to their purchase history.
For both personalized marketing campaigns and website content, you’ll need to incorporate many tools. Unfortunately, there are too many tools out there that are overly complicated and expensive.
Personalization is a cluttered and expensive space
Looking at the tools that help with main website content personalization, Segment is for enterprises, and Optimizely and Proof are also for enterprises but are relatively expensive for small-to-medium sized businesses.
Solutions in the personalized email marketing space exist such as Mailchimp, which personalizes based on audience behavior and engagement. However, this happens abstractly regardless of the global behavior of users on the website inside the app and so forth.
Pop-up creators such as Unbounce Popups or Sumo are also mere creators but fail to offer much in the way of personalization.
The bigger problem at hand is that these tools are not able to work together for personalization as part of a whole.
The closest solution for this is Intercom, which allows journey-based personalization but only through a chat widget and email notification. There’s no possibility to personalize in-page content, and again it’s fairly expensive for a small-medium businesses.
So, an all-in-one solution that makes it possible to personalize creation, monitoring and management based on global user behavior is sensible.
Meet Odise: Personalized Marketing Automated
Two years ago at Artbees, we thought of a tool that facilitates the personalization of marketing content (website, emails, pop-ups) in an all-in-one environment. A marketing assistant that can automatically personalize all marketing content based on user attributes and behavior.
We worked on Odise for about two years and recently released the beta version entirely for free on ProductHunt.
https://www.youtube.com/watch?v=gxP6EeFa8D8&t=39s
Odise is a marketing assistant that reveals the behavioral patterns of users across their journey on your website from acquisition to retention and automatically provides personalized website content, marketing campaigns, emails, pop-ups and more based on each user’s stage, attributes and preferences.
Automation Dashboard
1- Discover and oversee your customer journey
Odise provides multi-dimensional insight into your website users’ journey across your website in different stages – from acquisition to nurturing to conversion and retention.
A Customer Journey Sample
Select one or multiple dimensions and see what those users did on your website.
Multi-dimensional Customer Journey
2- Automate all your marketing activities in a ‘If This Then That’ dashboard
Having discovered different working and failing funnels, define automation rules to serve each funnel (as broadly or specifically as you want) as its own personalized experience.
Rule-based Marketing Automation
Automate marketing actions such as sending emails as well as showing or personalizing content for your visitors based on the stage in their journey.
3- Personalize your website content
The Webpage Personalizer helps you show everyone their own version of your website based on their stage, attributes and preferences.
This Odise personalizer tool allows you to make changes as well as add or remove content to your page without touching the source code.
Webpage Personalizer
4- Build and send personalized email campaigns
Create highly personalized emails for your leads and customers and contact them across their journey on your website.
Personalized Email Builder
Use Odise’s powerful email builder to create smart email templates or use one of its various carefully-crafted readymade templates.
Readymade Email Templates
5- Build and serve personalized pop-ups
Create personalized pop-ups to collect and nurture leads, as well as to convert and retain your customers.
Personalized Pop-up Builder
Or use one of Odise’s various readymade templates in different categories such as lead generation, discount, cart abandonment, giveaways, events and more.
Personalized Pop-up Templates
6- Get human-made analytics reports about your marketing activities
Enough of useless attribution and analytics reports! See tailored performance reports about your website performance and automation. Odise’s analytics reports will allow you to make decisions about your next move – nothing more or less.
Automation Reports
Define a timeframe and see a list of your topmost items in each dimension such as location, landing pages and sources.
Actionable Analytics
What’s next? A.I. enters the scene!
Our next step is enabling artificial intelligence, which will take a load off the shoulders of the website tenant by monitoring their website, suggesting the right practice and eventually taking over all marketing activities from ideation to execution to reporting.
Try out for free and help us shape the future of marketing
You might be surprised to learn that Odise is now totally free! We’ve invested two years at Artbees to make a bootstrapped and independent product that solves problems we think many small-medium businesses have with marketing on their own. We deliberately released it totally for free at the beginning to collect honest user feedback and shape its future before we start monetizing it.
Our aim is to make personalized marketing an affordable, easy and mainstream marketing activity – not a marketing luxury carried out only by big brands and corporations.
We cannot wait for our community to try this on their WordPress websites and let us know what they think about it. Does it help them grow their business? What is missing? And what direction should we take going forward?
Want to create a music website but don’t know where to start? You’ve come to the right place! In this article, we’ll show you how to create an effective music website that will impress both your fans and industry professionals.
Starting a professional music website with WordPress is key for more visibility to gain more fans and followers. Below, we’ve gone ahead and listed some key elements that you can incorporate to create a music website.
Slider
Slider is an excellent way to display information – such as images from your concert – in an organized and compact manner. Slider galleries are excellent for organizing content into a neat, clean module. Refer to the example below from the Aoede template:
slider from the Aoede template
Video
Rather than redirecting fans to YouTube, focus their attention on your videos that are embedded directly onto your music website. One of the dangers of YouTube is that there might be hundreds of live videos filmed by your fans on the platform that might not best represent your band.
When it comes time to create a music website, keep in mind that you should place your most recent or most popular videos at the top of your Videos page. Don’t forget to update the page with new videos to keep the content fresh. Check out the example of the video below in the Jazz Club template.
A video in Jazz Club Template
Images Layout
A Photos section is an essential menu option to have on your music website. It’s no secret that fans like to browse photos of their favorite bands. If you include an Images Layout element, then it will keep fans browsing your website for longer.
Creating separate galleries for different kinds of photos makes it easier for people to find the content they’re looking for – as you can see in the Aoede and Apollo templates. So you should have separate galleries for official photos, live photos, fan photos, etc.
Image Layout
Audio element
When making a music website, you must also have a music player as your fans should be able to listen to your songs. In this way, the Audio element is extremely useful. Allowing your visitors to listen to your tracks is great for your fans and will help make your music heard and known.
You can also include some text about your music as well. For this, check out how the Audio element works in the Podcast template.
Countdown Timer
The power of the countdown timer is that the ticking down of the clock adds extra urgency in the customer’s mind. You can use it when selling tickets to your concert as shown in this template.
Also, a great example of the countdown is in the Pasithee template. The fans will see that time is running out, which will become a factor in their purchase decision.
Events
Creating the Events page while creating a music website will allow you to notify your fans about upcoming concerts, provide detailed info on showtimes, cover charges, opening bands, and the venue.
Here, you can also showcase one of your best live videos so fans know what to expect if they come to see your show.
You can also use multiple calendars on your Events page, which means that you could, for example, a local shows list plus a touring list. Take a look at the Aoede and Pasithee templates to find out how the Events page might look.
Team Member
Introduce the band to your fans. Describe who you really are and what makes you different from the rest. You can also include social links of each team member so the visitors can follow their favorite musicians. Don’t forget to mention all the accomplishments that you have achieved. Check out the Thyone and Aoede template to view an example.
Testimonials
Testimonials are an excellent addition to every music website. At least one or two should be placed on the home page. Placing more testimonials on other pages of your site – such as your About page – is even better.
Testimonials are effective, because they are based on actual experience, and visitors to your site will see what you have to offer they will have a real reason to believe and will become your new fans. The Thyone and Night Club Listing templates include testimonials, so you can view the examples.
Contact Form
Contact Forms are a must-have to allow site visitors to get in touch with you. This is especially important for media or industry professionals.
Use a custom form with fields requesting site visitors to fill out specific information. These details are then compiled into a neat email that will be sent to you, as seen on the Thyone and Apollo templates.
Blog
Creating a blog on your site will allow you to provide your audience with frequent and regular content to tell your story, showcase your music, and expand your ideas. It also allows you to differentiate yourself and show your fans the person behind the music. It’s a place where you can connect with your fans through music and your interests and even attract new fans. To show blog posts, you’ll need to use the Posts element and style the look as you want in the element settings.
Wrapping Up
In this article, we presented the key elements needed to create a music website and showed you different web templates for musicians that look very professional. So with this article at your disposal, the process of building up a music website shouldn’t be overly complicated. We hope this article will help you to create a great website that showcases your brand, and your music in a professional way online.
Due to its popularity – as well as its popularity in the WordPress community – the Advanced Custom Fields (ACF) plugin needs no introduction. In a nutshell, ACF has made the developer’s job a breeze for adding custom fields anywhere in WordPress, now it’s time to help them create a custom Gutenberg block using ACF.
Not surprisingly, Elliot Condon (the creator of ACF) hasn’t stopped there. He introduced a groundbreaking feature called ACF Blocks for Gutenberg in the ACF PRO version 5.8, which is a game changer for ACF and Gutenberg players.
In this article, let’s see how we can implement this in real life and create a custom Gutenberg block using ACF.
Note: This article requires the ACF PRO plugin version 5.8.0 and above. If you’re a Jupiter X user, you can activate the plugin from Control Panel > Plugins.
Before diving into writing codes
ACF is a simple yet advanced plugin. If you’re unfamiliar with the ACF plugin, we recommend that you read the following articles to build a good foundation before proceeding any further.
Creating native custom Gutenberg blocks requires decent knowledge of JavaScript, which is not ideal for many users. The ACF Blocks feature is here to save time and help you to unlock your potential for creating custom Gutenberg blocks.
Let’s create a Blockquote block in a few simple steps.
1. Prepare a base plugin
Let’s create a base plugin to hold the block codes. Depending on your preferences, you can use a child theme instead of a plugin.
1. Go to your plugins folder on your site, then create a my-acf-blocks folder.
3. Now you should be able to see the block in the Gutenberg editor. As you see, the block is empty and has no settings. In the next step, we’ll add some settings.
3. Create a field group
To create the block settings, you need to register your settings in a field group.
1. Add a field group called Block: Blockquote in Custom Fields > Fields Group, then add the following fields (settings). There’s no limitation to add the fields but it’s recommended to keep it as few as possible.
2. In the Location, set the Block to Blockquote. By doing so, ACF will show the created fields (settings) for the Blockquote block.
3. Now, you should be able to see the settings in the Gutenberg editor. If you change the settings, nothing will happen. In the next step, we’ll implement the settings.
4. Render the block
Finally, we need to tell ACF how to render the block. This is just a standard process to get the settings and generate the HTML properly.
1. Create blockquote.php in the blocks/blockquote folder in your plugin, then add the following codes. The codes are based on standard ACF docs.
2. Now you should be able to see the block in the Gutenberg editor. By default, it has some default values, which you can change by altering the Quote and Author settings.
3. Now, let’s spice it up by adding some styling. Add blockquote.css in the blocks/blockquote folder in your plugin, then add the following codes.
4. ACF can’t automatically detect the styling files. In other words, we need to tell it where to find the file. Add the enqueue_style param in the plugin.php file.
5. Now, you should be able to see the block in the Gutenberg editor as shown below.
6. Now, let’s take another step and make the border color dynamic based on the Color setting. Open the blockquote.php file then do the following modifications.
